@lukeashford/aurelius 2.12.0 → 2.14.0

package/dist/index.mjs

@@ -3300,11 +3300,299 @@ var Stepper = React40.forwardRef(
 );
 Stepper.displayName = "Stepper";
 
+// src/components/icons/ChevronLeftIcon.tsx
+import React41 from "react";
+function ChevronLeftIcon({ className, ...props }) {
+  return /* @__PURE__ */ React41.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React41.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z",
+        clipRule: "evenodd"
+      }
+    )
+  );
+}
+
+// src/components/icons/ChevronRightIcon.tsx
+import React42 from "react";
+function ChevronRightIcon({ className, ...props }) {
+  return /* @__PURE__ */ React42.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React42.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+        clipRule: "evenodd"
+      }
+    )
+  );
+}
+
+// src/components/icons/CloseIcon.tsx
+import React43 from "react";
+function CloseIcon({ className, ...props }) {
+  return /* @__PURE__ */ React43.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React43.createElement(
+      "path",
+      {
+        d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+      }
+    )
+  );
+}
+
+// src/components/icons/ExpandIcon.tsx
+import React44 from "react";
+function ExpandIcon({ className, ...props }) {
+  return /* @__PURE__ */ React44.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React44.createElement(
+      "path",
+      {
+        d: "M13.28 7.78l3.22-3.22v2.69a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.69l-3.22 3.22a.75.75 0 001.06 1.06zM2 17.25v-4.5a.75.75 0 011.5 0v2.69l3.22-3.22a.75.75 0 011.06 1.06L4.56 16.5h2.69a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z"
+      }
+    )
+  );
+}
+
+// src/components/icons/HistoryIcon.tsx
+import React45 from "react";
+function HistoryIcon({ className, ...props }) {
+  return /* @__PURE__ */ React45.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React45.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z",
+        clipRule: "evenodd"
+      }
+    )
+  );
+}
+
+// src/components/icons/LayersIcon.tsx
+import React46 from "react";
+function LayersIcon({ className, ...props }) {
+  return /* @__PURE__ */ React46.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React46.createElement(
+      "path",
+      {
+        d: "M3.196 12.87l-.825.483a.75.75 0 000 1.294l7.25 4.25a.75.75 0 00.758 0l7.25-4.25a.75.75 0 000-1.294l-.825-.484-5.666 3.322a2.25 2.25 0 01-2.276 0L3.196 12.87z"
+      }
+    ),
+    /* @__PURE__ */ React46.createElement(
+      "path",
+      {
+        d: "M3.196 8.87l-.825.483a.75.75 0 000 1.294l7.25 4.25a.75.75 0 00.758 0l7.25-4.25a.75.75 0 000-1.294l-.825-.484-5.666 3.322a2.25 2.25 0 01-2.276 0L3.196 8.87z"
+      }
+    ),
+    /* @__PURE__ */ React46.createElement(
+      "path",
+      {
+        d: "M10.38 1.103a.75.75 0 00-.76 0l-7.25 4.25a.75.75 0 000 1.294l7.25 4.25a.75.75 0 00.76 0l7.25-4.25a.75.75 0 000-1.294l-7.25-4.25z"
+      }
+    )
+  );
+}
+
+// src/components/icons/PlusIcon.tsx
+import React47 from "react";
+function PlusIcon({ className, ...props }) {
+  return /* @__PURE__ */ React47.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React47.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"
+      }
+    )
+  );
+}
+
+// src/components/icons/CheckSquareIcon.tsx
+import React48 from "react";
+function CheckSquareIcon({ className, ...props }) {
+  return /* @__PURE__ */ React48.createElement(
+    "div",
+    {
+      className: cx(
+        "relative w-4 h-4 flex-shrink-0 border-2 border-gold bg-gold/10",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React48.createElement(
+      "svg",
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        className: "absolute inset-0 w-full h-full p-0.5"
+      },
+      /* @__PURE__ */ React48.createElement(
+        "path",
+        {
+          d: "M3 8l3 3 7-7",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "text-gold"
+        }
+      )
+    )
+  );
+}
+
+// src/components/icons/EmptySquareIcon.tsx
+import React49 from "react";
+function EmptySquareIcon({ className, ...props }) {
+  return /* @__PURE__ */ React49.createElement(
+    "div",
+    {
+      className: cx(
+        "w-4 h-4 flex-shrink-0 border-2 border-ash/60",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/icons/CrossSquareIcon.tsx
+import React50 from "react";
+function CrossSquareIcon({ className, variant = "cancelled", ...props }) {
+  return /* @__PURE__ */ React50.createElement(
+    "div",
+    {
+      className: cx(
+        "relative w-4 h-4 flex-shrink-0 border-2",
+        variant === "failed" ? "border-error/60 bg-error/5" : "border-ash/40 bg-ash/5",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React50.createElement(
+      "svg",
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        className: "absolute inset-0 w-full h-full p-0.5"
+      },
+      /* @__PURE__ */ React50.createElement(
+        "path",
+        {
+          d: "M4 4l8 8M12 4l-8 8",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          className: variant === "failed" ? "text-error/60" : "text-ash/40"
+        }
+      )
+    )
+  );
+}
+
+// src/components/icons/SquareLoaderIcon.tsx
+import React51 from "react";
+function SquareLoaderIcon({ className, ...props }) {
+  return /* @__PURE__ */ React51.createElement("div", { className: cx("relative w-4 h-4 flex-shrink-0", className), ...props }, /* @__PURE__ */ React51.createElement(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      className: "w-full h-full animate-snake-spin"
+    },
+    /* @__PURE__ */ React51.createElement(
+      "rect",
+      {
+        x: "1",
+        y: "1",
+        width: "14",
+        height: "14",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        className: "text-ash/40"
+      }
+    ),
+    /* @__PURE__ */ React51.createElement(
+      "rect",
+      {
+        x: "1",
+        y: "1",
+        width: "14",
+        height: "14",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeDasharray: "14 42",
+        strokeLinecap: "square",
+        className: "text-gold animate-snake-travel"
+      }
+    )
+  ));
+}
+
 // src/components/Message.tsx
-import React42, { useEffect as useEffect6, useRef as useRef5, useState as useState10 } from "react";
+import React53, { useEffect as useEffect6, useRef as useRef5, useState as useState10 } from "react";
 
 // src/components/MarkdownContent.tsx
-import React41, { useMemo } from "react";
+import React52, { useMemo } from "react";
 import DOMPurify from "dompurify";
 var DEFAULT_SANITIZE_CONFIG = {
   ALLOWED_TAGS: [
@@ -3410,7 +3698,7 @@ function injectStreamingCursor(html, cursorClassName) {
   target.insertAdjacentHTML("beforeend", cursorHtml);
   return container.innerHTML;
 }
-var MarkdownContent = React41.forwardRef(
+var MarkdownContent = React52.forwardRef(
   ({ className, content, sanitizeConfig, isStreaming, cursorClassName, ...rest }, ref) => {
     useDOMPurifySetup();
     const sanitizedHtml = useMemo(() => {
@@ -3424,7 +3712,7 @@ var MarkdownContent = React41.forwardRef(
       }
       return sanitized;
     }, [content, sanitizeConfig, isStreaming, cursorClassName]);
-    return /* @__PURE__ */ React41.createElement(
+    return /* @__PURE__ */ React52.createElement(
       "div",
       {
         ref,
@@ -3442,7 +3730,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__ */ React42.createElement(
+var ActionButton = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ React53.createElement(
   "button",
   {
     type: "button",
@@ -3458,7 +3746,7 @@ var ActionButton = ({ onClick, label, children, className, disabled }) => /* @__
   },
   children
 );
-var CopyIcon = () => /* @__PURE__ */ React42.createElement(
+var CopyIcon = () => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3470,10 +3758,10 @@ var CopyIcon = () => /* @__PURE__ */ React42.createElement(
     strokeLinejoin: "round",
     className: "w-3.5 h-3.5"
   },
-  /* @__PURE__ */ React42.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-  /* @__PURE__ */ React42.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__ */ React53.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ React53.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__ */ React42.createElement(
+var CheckIcon = () => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3485,9 +3773,9 @@ var CheckIcon = () => /* @__PURE__ */ React42.createElement(
     strokeLinejoin: "round",
     className: "w-3.5 h-3.5 text-success"
   },
-  /* @__PURE__ */ React42.createElement("polyline", { points: "20 6 9 17 4 12" })
+  /* @__PURE__ */ React53.createElement("polyline", { points: "20 6 9 17 4 12" })
 );
-var PencilIcon = () => /* @__PURE__ */ React42.createElement(
+var PencilIcon = () => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3499,10 +3787,10 @@ var PencilIcon = () => /* @__PURE__ */ React42.createElement(
     strokeLinejoin: "round",
     className: "w-3.5 h-3.5"
   },
-  /* @__PURE__ */ React42.createElement("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
-  /* @__PURE__ */ React42.createElement("path", { d: "m15 5 4 4" })
+  /* @__PURE__ */ React53.createElement("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+  /* @__PURE__ */ React53.createElement("path", { d: "m15 5 4 4" })
 );
-var RetryIcon = () => /* @__PURE__ */ React42.createElement(
+var RetryIcon = () => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3514,12 +3802,12 @@ var RetryIcon = () => /* @__PURE__ */ React42.createElement(
     strokeLinejoin: "round",
     className: "w-3.5 h-3.5"
   },
-  /* @__PURE__ */ React42.createElement("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-  /* @__PURE__ */ React42.createElement("path", { d: "M21 3v5h-5" }),
-  /* @__PURE__ */ React42.createElement("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-  /* @__PURE__ */ React42.createElement("path", { d: "M8 16H3v5" })
+  /* @__PURE__ */ React53.createElement("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ React53.createElement("path", { d: "M21 3v5h-5" }),
+  /* @__PURE__ */ React53.createElement("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+  /* @__PURE__ */ React53.createElement("path", { d: "M8 16H3v5" })
 );
-var ChevronLeftIcon = () => /* @__PURE__ */ React42.createElement(
+var ChevronLeftIcon2 = () => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3531,9 +3819,9 @@ var ChevronLeftIcon = () => /* @__PURE__ */ React42.createElement(
     strokeLinejoin: "round",
     className: "w-3 h-3"
   },
-  /* @__PURE__ */ React42.createElement("path", { d: "m15 18-6-6 6-6" })
+  /* @__PURE__ */ React53.createElement("path", { d: "m15 18-6-6 6-6" })
 );
-var ChevronRightIcon = () => /* @__PURE__ */ React42.createElement(
+var ChevronRightIcon2 = () => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3545,9 +3833,9 @@ var ChevronRightIcon = () => /* @__PURE__ */ React42.createElement(
     strokeLinejoin: "round",
     className: "w-3 h-3"
   },
-  /* @__PURE__ */ React42.createElement("path", { d: "m9 18 6-6-6-6" })
+  /* @__PURE__ */ React53.createElement("path", { d: "m9 18 6-6-6-6" })
 );
-var GitBranchIcon = () => /* @__PURE__ */ React42.createElement(
+var GitBranchIcon = () => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3559,12 +3847,12 @@ var GitBranchIcon = () => /* @__PURE__ */ React42.createElement(
     strokeLinejoin: "round",
     className: "w-3 h-3 mr-0.5 text-silver/50"
   },
-  /* @__PURE__ */ React42.createElement("line", { x1: "6", x2: "6", y1: "3", y2: "15" }),
-  /* @__PURE__ */ React42.createElement("circle", { cx: "18", cy: "6", r: "3" }),
-  /* @__PURE__ */ React42.createElement("circle", { cx: "6", cy: "18", r: "3" }),
-  /* @__PURE__ */ React42.createElement("path", { d: "M18 9a9 9 0 0 1-9 9" })
+  /* @__PURE__ */ React53.createElement("line", { x1: "6", x2: "6", y1: "3", y2: "15" }),
+  /* @__PURE__ */ React53.createElement("circle", { cx: "18", cy: "6", r: "3" }),
+  /* @__PURE__ */ React53.createElement("circle", { cx: "6", cy: "18", r: "3" }),
+  /* @__PURE__ */ React53.createElement("path", { d: "M18 9a9 9 0 0 1-9 9" })
 );
-var XIcon = () => /* @__PURE__ */ React42.createElement(
+var XIcon = () => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3576,10 +3864,10 @@ var XIcon = () => /* @__PURE__ */ React42.createElement(
     strokeLinejoin: "round",
     className: "w-4 h-4"
   },
-  /* @__PURE__ */ React42.createElement("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ React42.createElement("path", { d: "m6 6 12 12" })
+  /* @__PURE__ */ React53.createElement("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ React53.createElement("path", { d: "m6 6 12 12" })
 );
-var SendIcon = () => /* @__PURE__ */ React42.createElement(
+var SendIcon = () => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3591,10 +3879,10 @@ var SendIcon = () => /* @__PURE__ */ React42.createElement(
     strokeLinejoin: "round",
     className: "w-4 h-4"
   },
-  /* @__PURE__ */ React42.createElement("path", { d: "m22 2-7 20-4-9-9-4Z" }),
-  /* @__PURE__ */ React42.createElement("path", { d: "M22 2 11 13" })
+  /* @__PURE__ */ React53.createElement("path", { d: "m22 2-7 20-4-9-9-4Z" }),
+  /* @__PURE__ */ React53.createElement("path", { d: "M22 2 11 13" })
 );
-var Message = React42.forwardRef(
+var Message = React53.forwardRef(
   ({
     variant = "assistant",
     className,
@@ -3666,7 +3954,7 @@ var Message = React42.forwardRef(
       textarea.style.height = "auto";
       textarea.style.height = `${textarea.scrollHeight}px`;
     };
-    return /* @__PURE__ */ React42.createElement(
+    return /* @__PURE__ */ React53.createElement(
       "div",
       {
         ref,
@@ -3677,7 +3965,7 @@ var Message = React42.forwardRef(
         ),
         ...rest
       },
-      isUser && isEditing ? /* @__PURE__ */ React42.createElement("div", { className: "w-full max-w-11/12" }, /* @__PURE__ */ React42.createElement("div", { className: "relative bg-gold" }, /* @__PURE__ */ React42.createElement(
+      isUser && isEditing ? /* @__PURE__ */ React53.createElement("div", { className: "w-full max-w-11/12" }, /* @__PURE__ */ React53.createElement("div", { className: "relative bg-gold" }, /* @__PURE__ */ React53.createElement(
         "textarea",
         {
           ref: textareaRef,
@@ -3687,7 +3975,7 @@ var Message = React42.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__ */ React42.createElement("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex gap-0.5" }, /* @__PURE__ */ React42.createElement(
+      ), /* @__PURE__ */ React53.createElement("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex gap-0.5" }, /* @__PURE__ */ React53.createElement(
         "button",
         {
           type: "button",
@@ -3695,8 +3983,8 @@ var Message = React42.forwardRef(
           className: "p-1.5 text-obsidian/60 hover:text-obsidian transition-colors",
           "aria-label": "Cancel edit"
         },
-        /* @__PURE__ */ React42.createElement(XIcon, null)
-      ), /* @__PURE__ */ React42.createElement(
+        /* @__PURE__ */ React53.createElement(XIcon, null)
+      ), /* @__PURE__ */ React53.createElement(
         "button",
         {
           type: "button",
@@ -3705,8 +3993,8 @@ var Message = React42.forwardRef(
           className: "p-1.5 text-obsidian/60 hover:text-obsidian transition-colors disabled:opacity-30",
           "aria-label": "Submit edit"
         },
-        /* @__PURE__ */ React42.createElement(SendIcon, null)
-      )))) : /* @__PURE__ */ React42.createElement(
+        /* @__PURE__ */ React53.createElement(SendIcon, null)
+      )))) : /* @__PURE__ */ React53.createElement(
         "div",
         {
           className: cx(
@@ -3714,7 +4002,7 @@ var Message = React42.forwardRef(
             variantStyles2[variant]
           )
         },
-        /* @__PURE__ */ React42.createElement(
+        /* @__PURE__ */ React53.createElement(
           MarkdownContent,
           {
             content,
@@ -3724,17 +4012,17 @@ var Message = React42.forwardRef(
           }
         )
       ),
-      showActions && !isEditing && /* @__PURE__ */ React42.createElement("div", { className: cx(
+      showActions && !isEditing && /* @__PURE__ */ React53.createElement("div", { className: cx(
         "flex items-center gap-0.5 mt-1",
         isUser ? "mr-1" : "ml-1"
-      ) }, actions.showCopy !== false && /* @__PURE__ */ React42.createElement(
+      ) }, actions.showCopy !== false && /* @__PURE__ */ React53.createElement(
         ActionButton,
         {
           onClick: handleCopy,
           label: copied ? "Copied!" : "Copy message"
         },
-        copied ? /* @__PURE__ */ React42.createElement(CheckIcon, null) : /* @__PURE__ */ React42.createElement(CopyIcon, null)
-      ), isUser && actions.onEdit && /* @__PURE__ */ React42.createElement(ActionButton, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ React42.createElement(PencilIcon, null)), !isUser && actions.onRetry && /* @__PURE__ */ React42.createElement(ActionButton, { onClick: actions.onRetry, label: "Regenerate response" }, /* @__PURE__ */ React42.createElement(RetryIcon, null)), showBranchNav && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement("div", { className: "w-px h-4 bg-ash/40 mx-1" }), /* @__PURE__ */ React42.createElement("div", { className: "flex items-center gap-0.5 text-silver/70" }, /* @__PURE__ */ React42.createElement(GitBranchIcon, null), /* @__PURE__ */ React42.createElement(
+        copied ? /* @__PURE__ */ React53.createElement(CheckIcon, null) : /* @__PURE__ */ React53.createElement(CopyIcon, null)
+      ), isUser && actions.onEdit && /* @__PURE__ */ React53.createElement(ActionButton, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ React53.createElement(PencilIcon, null)), !isUser && actions.onRetry && /* @__PURE__ */ React53.createElement(ActionButton, { onClick: actions.onRetry, label: "Regenerate response" }, /* @__PURE__ */ React53.createElement(RetryIcon, null)), showBranchNav && /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement("div", { className: "w-px h-4 bg-ash/40 mx-1" }), /* @__PURE__ */ React53.createElement("div", { className: "flex items-center gap-0.5 text-silver/70" }, /* @__PURE__ */ React53.createElement(GitBranchIcon, null), /* @__PURE__ */ React53.createElement(
         "button",
         {
           type: "button",
@@ -3746,8 +4034,8 @@ var Message = React42.forwardRef(
           ),
           "aria-label": "Previous branch"
         },
-        /* @__PURE__ */ React42.createElement(ChevronLeftIcon, null)
-      ), /* @__PURE__ */ React42.createElement("span", { className: "text-xs tabular-nums min-w-6 text-center" }, branchInfo.current, "/", branchInfo.total), /* @__PURE__ */ React42.createElement(
+        /* @__PURE__ */ React53.createElement(ChevronLeftIcon2, null)
+      ), /* @__PURE__ */ React53.createElement("span", { className: "text-xs tabular-nums min-w-6 text-center" }, branchInfo.current, "/", branchInfo.total), /* @__PURE__ */ React53.createElement(
         "button",
         {
           type: "button",
@@ -3759,7 +4047,7 @@ var Message = React42.forwardRef(
           ),
           "aria-label": "Next branch"
         },
-        /* @__PURE__ */ React42.createElement(ChevronRightIcon, null)
+        /* @__PURE__ */ React53.createElement(ChevronRightIcon2, null)
       ))))
     );
   }
@@ -3767,15 +4055,15 @@ var Message = React42.forwardRef(
 Message.displayName = "Message";
 
 // src/components/StreamingCursor.tsx
-import React43 from "react";
-var StreamingCursor = React43.forwardRef(
+import React54 from "react";
+var StreamingCursor = React54.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__ */ React43.createElement(
+    return /* @__PURE__ */ React54.createElement(
       "span",
       {
         ref,
@@ -3793,10 +4081,10 @@ var StreamingCursor = React43.forwardRef(
 StreamingCursor.displayName = "StreamingCursor";
 
 // src/components/chat/ChatInterface.tsx
-import React51, { useCallback as useCallback15, useMemo as useMemo2, useState as useState16 } from "react";
+import React65, { useCallback as useCallback16, useMemo as useMemo3, useState as useState16 } from "react";
 
 // src/components/chat/ChatView.tsx
-import React45, { useEffect as useEffect9 } from "react";
+import React56, { useEffect as useEffect9 } from "react";
 
 // src/components/chat/hooks/useScrollAnchor.ts
 import { useCallback as useCallback11, useRef as useRef6 } from "react";
@@ -3912,7 +4200,7 @@ function useAdaptiveSpacer(options = {}) {
 }
 
 // src/components/chat/ThinkingIndicator.tsx
-import React44, { useEffect as useEffect8, useState as useState12 } from "react";
+import React55, { useEffect as useEffect8, useState as useState12 } from "react";
 var THINKING_PHRASES = [
   "Consulting the ancient tomes...",
   "Parsing the ineffable...",
@@ -3928,7 +4216,7 @@ var THINKING_PHRASES = [
   "Consulting my inner monologue...",
   "Summoning the muse..."
 ];
-var ThinkingIndicator = React44.forwardRef(
+var ThinkingIndicator = React55.forwardRef(
   ({
     isVisible = true,
     phraseInterval = 2500,
@@ -3956,7 +4244,7 @@ var ThinkingIndicator = React44.forwardRef(
     if (!isVisible) {
       return null;
     }
-    return /* @__PURE__ */ React44.createElement(
+    return /* @__PURE__ */ React55.createElement(
       "div",
       {
         ref,
@@ -3970,26 +4258,26 @@ var ThinkingIndicator = React44.forwardRef(
         "aria-live": "polite",
         ...rest
       },
-      /* @__PURE__ */ React44.createElement("div", { className: "flex gap-1", "aria-hidden": "true" }, /* @__PURE__ */ React44.createElement(
+      /* @__PURE__ */ React55.createElement("div", { className: "flex gap-1", "aria-hidden": "true" }, /* @__PURE__ */ React55.createElement(
         "span",
         {
           className: "w-1.5 h-1.5 bg-gold/60 rounded-full animate-pulse",
           style: { animationDelay: "0ms" }
         }
-      ), /* @__PURE__ */ React44.createElement(
+      ), /* @__PURE__ */ React55.createElement(
         "span",
         {
           className: "w-1.5 h-1.5 bg-gold/60 rounded-full animate-pulse",
           style: { animationDelay: "150ms" }
         }
-      ), /* @__PURE__ */ React44.createElement(
+      ), /* @__PURE__ */ React55.createElement(
         "span",
         {
           className: "w-1.5 h-1.5 bg-gold/60 rounded-full animate-pulse",
           style: { animationDelay: "300ms" }
         }
       )),
-      /* @__PURE__ */ React44.createElement(
+      /* @__PURE__ */ React55.createElement(
         "span",
         {
           className: cx(
@@ -4005,7 +4293,7 @@ var ThinkingIndicator = React44.forwardRef(
 ThinkingIndicator.displayName = "ThinkingIndicator";
 
 // src/components/chat/ChatView.tsx
-var ChatView = React45.forwardRef(
+var ChatView = React56.forwardRef(
   ({ messages, latestUserMessageIndex, isStreaming, isThinking, onScroll, className, ...rest }, ref) => {
     const { containerRef, anchorRef, scrollToAnchor } = useScrollAnchor({
       behavior: "smooth",
@@ -4027,7 +4315,7 @@ var ChatView = React45.forwardRef(
       return found;
     }, -1);
     const showThinking = isThinking && messages.length > 0 && messages[messages.length - 1]?.variant === "user";
-    return /* @__PURE__ */ React45.createElement(
+    return /* @__PURE__ */ React56.createElement(
       "div",
       {
         ref: (node) => {
@@ -4047,7 +4335,7 @@ var ChatView = React45.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ React45.createElement("div", { ref: contentRef, className: "relative flex flex-col gap-3" }, messages.map(({
+      /* @__PURE__ */ React56.createElement("div", { ref: contentRef, className: "relative flex flex-col gap-3" }, messages.map(({
         id,
         variant,
         className: messageClassName,
@@ -4060,14 +4348,14 @@ var ChatView = React45.forwardRef(
         const isLastMessage = index === messages.length - 1;
         const showStreaming = isLastMessage && isStreaming && variant === "assistant";
         const isMessageStreaming = showStreaming || !!nodeIsStreaming;
-        return /* @__PURE__ */ React45.createElement(
+        return /* @__PURE__ */ React56.createElement(
           "div",
           {
             key: id ?? `msg-${index}`,
             ref: isAnchor ? anchorRef : void 0,
             className: isAnchor ? "scroll-mt-4" : void 0
           },
-          /* @__PURE__ */ React45.createElement(
+          /* @__PURE__ */ React56.createElement(
             Message,
             {
               variant,
@@ -4080,8 +4368,8 @@ var ChatView = React45.forwardRef(
             }
           )
         );
-      }), showThinking && /* @__PURE__ */ React45.createElement(ThinkingIndicator, { isVisible: true })),
-      /* @__PURE__ */ React45.createElement(
+      }), showThinking && /* @__PURE__ */ React56.createElement(ThinkingIndicator, { isVisible: true })),
+      /* @__PURE__ */ React56.createElement(
         "div",
         {
           ref: spacerRef,
@@ -4096,7 +4384,7 @@ var ChatView = React45.forwardRef(
 ChatView.displayName = "ChatView";
 
 // src/components/chat/ChatInput.tsx
-import React46, { useCallback as useCallback13, useEffect as useEffect10, useRef as useRef8, useState as useState13 } from "react";
+import React57, { useCallback as useCallback13, useEffect as useEffect10, useRef as useRef8, useState as useState13 } from "react";
 import { Paperclip, Send, Square } from "lucide-react";
 
 // src/components/chat/types.ts
@@ -4265,7 +4553,7 @@ function isBranchPoint(tree, nodeId) {
 }
 
 // src/components/chat/ChatInput.tsx
-var ChatInput = React46.forwardRef(
+var ChatInput = React57.forwardRef(
   ({
     position = "bottom",
     placeholder = "Send a message...",
@@ -4399,7 +4687,7 @@ var ChatInput = React46.forwardRef(
     const isCentered = position === "centered";
     const hasAttachments = attachments.length > 0;
     const canSubmit = value.trim() && !disabled && !isStreaming;
-    return /* @__PURE__ */ React46.createElement(
+    return /* @__PURE__ */ React57.createElement(
       "div",
       {
         ref,
@@ -4411,8 +4699,8 @@ var ChatInput = React46.forwardRef(
         ),
         ...rest
       },
-      isCentered && helperText && /* @__PURE__ */ React46.createElement("p", { className: "text-silver text-sm mb-4 text-center" }, helperText),
-      /* @__PURE__ */ React46.createElement(
+      isCentered && helperText && /* @__PURE__ */ React57.createElement("p", { className: "text-silver text-sm mb-4 text-center" }, helperText),
+      /* @__PURE__ */ React57.createElement(
         "div",
         {
           className: cx(
@@ -4427,7 +4715,7 @@ var ChatInput = React46.forwardRef(
           onDragOver: showAttachmentButton ? handleDragOver : void 0,
           onDrop: showAttachmentButton ? handleDrop : void 0
         },
-        hasAttachments && /* @__PURE__ */ React46.createElement("div", { className: "px-3 pt-3 pb-1" }, /* @__PURE__ */ React46.createElement(
+        hasAttachments && /* @__PURE__ */ React57.createElement("div", { className: "px-3 pt-3 pb-1" }, /* @__PURE__ */ React57.createElement(
           AttachmentPreview,
           {
             attachments,
@@ -4435,14 +4723,14 @@ var ChatInput = React46.forwardRef(
             removable: !isStreaming
           }
         )),
-        isDragOver && /* @__PURE__ */ React46.createElement(
+        isDragOver && /* @__PURE__ */ React57.createElement(
           "div",
           {
             className: "absolute inset-0 bg-gold/10 flex items-center justify-center z-10 pointer-events-none"
           },
-          /* @__PURE__ */ React46.createElement("span", { className: "text-gold text-sm font-medium" }, "Drop files here")
+          /* @__PURE__ */ React57.createElement("span", { className: "text-gold text-sm font-medium" }, "Drop files here")
         ),
-        /* @__PURE__ */ React46.createElement("div", { className: "flex items-end" }, showAttachmentButton && /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
+        /* @__PURE__ */ React57.createElement("div", { className: "flex items-end" }, showAttachmentButton && /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
           "button",
           {
             type: "button",
@@ -4454,8 +4742,8 @@ var ChatInput = React46.forwardRef(
             ),
             "aria-label": "Attach file"
           },
-          /* @__PURE__ */ React46.createElement(Paperclip, { className: "w-5 h-5" })
-        ), /* @__PURE__ */ React46.createElement(
+          /* @__PURE__ */ React57.createElement(Paperclip, { className: "w-5 h-5" })
+        ), /* @__PURE__ */ React57.createElement(
           "input",
           {
             ref: fileInputRef,
@@ -4466,7 +4754,7 @@ var ChatInput = React46.forwardRef(
             className: "hidden",
             "aria-hidden": "true"
           }
-        )), /* @__PURE__ */ React46.createElement(
+        )), /* @__PURE__ */ React57.createElement(
           "textarea",
           {
             ref: textareaRef,
@@ -4484,7 +4772,7 @@ var ChatInput = React46.forwardRef(
             ),
             style: { maxHeight: 200 }
           }
-        ), isStreaming ? /* @__PURE__ */ React46.createElement(
+        ), isStreaming ? /* @__PURE__ */ React57.createElement(
           "button",
           {
             type: "button",
@@ -4495,8 +4783,8 @@ var ChatInput = React46.forwardRef(
             ),
             "aria-label": "Stop generation"
           },
-          /* @__PURE__ */ React46.createElement(Square, { className: "w-5 h-5 fill-current" })
-        ) : /* @__PURE__ */ React46.createElement(
+          /* @__PURE__ */ React57.createElement(Square, { className: "w-5 h-5 fill-current" })
+        ) : /* @__PURE__ */ React57.createElement(
           "button",
           {
             type: "button",
@@ -4509,7 +4797,7 @@ var ChatInput = React46.forwardRef(
             ),
             "aria-label": "Send message"
           },
-          /* @__PURE__ */ React46.createElement(Send, { className: "w-5 h-5" })
+          /* @__PURE__ */ React57.createElement(Send, { className: "w-5 h-5" })
         ))
       )
     );
@@ -4518,9 +4806,9 @@ var ChatInput = React46.forwardRef(
 ChatInput.displayName = "ChatInput";
 
 // src/components/chat/ConversationSidebar.tsx
-import React47 from "react";
-function HistoryIcon({ className }) {
-  return /* @__PURE__ */ React47.createElement(
+import React58 from "react";
+function HistoryIcon2({ className }) {
+  return /* @__PURE__ */ React58.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -4528,7 +4816,7 @@ function HistoryIcon({ className }) {
       fill: "currentColor",
       className
     },
-    /* @__PURE__ */ React47.createElement(
+    /* @__PURE__ */ React58.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4538,8 +4826,8 @@ function HistoryIcon({ className }) {
     )
   );
 }
-function ChevronLeftIcon2({ className }) {
-  return /* @__PURE__ */ React47.createElement(
+function ChevronLeftIcon3({ className }) {
+  return /* @__PURE__ */ React58.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -4547,7 +4835,7 @@ function ChevronLeftIcon2({ className }) {
       fill: "currentColor",
       className
     },
-    /* @__PURE__ */ React47.createElement(
+    /* @__PURE__ */ React58.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4557,7 +4845,7 @@ function ChevronLeftIcon2({ className }) {
     )
   );
 }
-var ConversationSidebar = React47.forwardRef(
+var ConversationSidebar = React58.forwardRef(
   ({
     conversations,
     isCollapsed = false,
@@ -4570,7 +4858,7 @@ var ConversationSidebar = React47.forwardRef(
     ...rest
   }, ref) => {
     if (isCollapsed) {
-      return /* @__PURE__ */ React47.createElement(
+      return /* @__PURE__ */ React58.createElement(
         "div",
         {
           ref,
@@ -4581,7 +4869,7 @@ var ConversationSidebar = React47.forwardRef(
           ),
           ...rest
         },
-        /* @__PURE__ */ React47.createElement(
+        /* @__PURE__ */ React58.createElement(
           "button",
           {
             onClick: onToggleCollapse,
@@ -4592,11 +4880,11 @@ var ConversationSidebar = React47.forwardRef(
             ),
             "aria-label": "Expand sidebar"
           },
-          /* @__PURE__ */ React47.createElement(HistoryIcon, { className: "w-5 h-5" })
+          /* @__PURE__ */ React58.createElement(HistoryIcon2, { className: "w-5 h-5" })
         )
       );
     }
-    return /* @__PURE__ */ React47.createElement(
+    return /* @__PURE__ */ React58.createElement(
       "div",
       {
         ref,
@@ -4607,10 +4895,10 @@ var ConversationSidebar = React47.forwardRef(
           "flex-shrink-0",
           className
         ),
-        style: width ? { width: `${width}px` } : void 0,
+        style: width ? { width } : void 0,
         ...rest
       },
-      /* @__PURE__ */ React47.createElement(
+      /* @__PURE__ */ React58.createElement(
         "div",
         {
           onMouseDown: onResizeStart,
@@ -4623,7 +4911,7 @@ var ConversationSidebar = React47.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ React47.createElement("div", { className: "p-3 border-b border-ash/40 flex-shrink-0 flex items-center gap-2" }, /* @__PURE__ */ React47.createElement(
+      /* @__PURE__ */ React58.createElement("div", { className: "p-3 border-b border-ash/40 flex-shrink-0 flex items-center gap-2" }, /* @__PURE__ */ React58.createElement(
         "button",
         {
           onClick: onToggleCollapse,
@@ -4634,8 +4922,8 @@ var ConversationSidebar = React47.forwardRef(
           ),
           "aria-label": "Collapse sidebar"
         },
-        /* @__PURE__ */ React47.createElement(ChevronLeftIcon2, { className: "w-5 h-5" })
-      ), /* @__PURE__ */ React47.createElement(
+        /* @__PURE__ */ React58.createElement(ChevronLeftIcon3, { className: "w-5 h-5" })
+      ), /* @__PURE__ */ React58.createElement(
         "button",
         {
           onClick: onNewChat,
@@ -4647,7 +4935,7 @@ var ConversationSidebar = React47.forwardRef(
             "transition-colors duration-200"
           )
         },
-        /* @__PURE__ */ React47.createElement(
+        /* @__PURE__ */ React58.createElement(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -4655,16 +4943,16 @@ var ConversationSidebar = React47.forwardRef(
             fill: "currentColor",
             className: "w-4 h-4"
           },
-          /* @__PURE__ */ React47.createElement(
+          /* @__PURE__ */ React58.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__ */ React47.createElement("span", { className: "text-sm font-medium" }, "New Chat")
+        /* @__PURE__ */ React58.createElement("span", { className: "text-sm font-medium" }, "New Chat")
       )),
-      /* @__PURE__ */ React47.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ React47.createElement("p", { className: "px-4 py-2 text-sm text-silver/60" }, "No conversations yet") : /* @__PURE__ */ React47.createElement("div", { className: "space-y-1 px-2" }, conversations.map((conversation) => /* @__PURE__ */ React47.createElement(
+      /* @__PURE__ */ React58.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ React58.createElement("p", { className: "px-4 py-2 text-sm text-silver/60" }, "No conversations yet") : /* @__PURE__ */ React58.createElement("div", { className: "space-y-1 px-2" }, conversations.map((conversation) => /* @__PURE__ */ React58.createElement(
         "button",
         {
           key: conversation.id,
@@ -4675,16 +4963,16 @@ var ConversationSidebar = React47.forwardRef(
             conversation.isActive ? "bg-ash/40 text-white" : "text-silver hover:bg-ash/20 hover:text-white"
           )
         },
-        /* @__PURE__ */ React47.createElement("p", { className: "text-sm font-medium truncate" }, conversation.title),
-        conversation.preview && /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.preview),
-        conversation.timestamp && /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-silver/40 mt-1" }, conversation.timestamp)
+        /* @__PURE__ */ React58.createElement("p", { className: "text-sm font-medium truncate" }, conversation.title),
+        conversation.preview && /* @__PURE__ */ React58.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.preview),
+        conversation.timestamp && /* @__PURE__ */ React58.createElement("p", { className: "text-xs text-silver/40 mt-1" }, conversation.timestamp)
       ))))
     );
   }
 );
 ConversationSidebar.displayName = "ConversationSidebar";
-var CollapsedSidebarToggle = React47.forwardRef(({ onExpand, className, ...rest }, ref) => {
-  return /* @__PURE__ */ React47.createElement(
+var CollapsedSidebarToggle = React58.forwardRef(({ onExpand, className, ...rest }, ref) => {
+  return /* @__PURE__ */ React58.createElement(
     "button",
     {
       ref,
@@ -4699,16 +4987,16 @@ var CollapsedSidebarToggle = React47.forwardRef(({ onExpand, className, ...rest
       "aria-label": "Expand sidebar",
       ...rest
     },
-    /* @__PURE__ */ React47.createElement(HistoryIcon, { className: "w-5 h-5" })
+    /* @__PURE__ */ React58.createElement(HistoryIcon2, { className: "w-5 h-5" })
   );
 });
 CollapsedSidebarToggle.displayName = "CollapsedSidebarToggle";
 
 // src/components/chat/ArtifactsPanel.tsx
-import React50, { useEffect as useEffect11, useState as useState14 } from "react";
+import React63, { useCallback as useCallback14, useEffect as useEffect11, useState as useState14 } from "react";
 
 // src/components/ImageCard.tsx
-import React48 from "react";
+import React59 from "react";
 var ASPECT_RATIO_PRESETS = {
   landscape: "3 / 2",
   portrait: "2 / 3",
@@ -4720,7 +5008,7 @@ function resolveAspectRatio(ratio) {
   }
   return ratio.replace("/", " / ");
 }
-var ImageCard = React48.forwardRef(
+var ImageCard = React59.forwardRef(
   ({
     src,
     alt,
@@ -4737,7 +5025,7 @@ var ImageCard = React48.forwardRef(
   }, ref) => {
     const hasAspectRatio = aspectRatio !== void 0;
     const isContain = objectFit === "contain";
-    return /* @__PURE__ */ React48.createElement(Card, { ref, className: cx("p-0 overflow-hidden group w-fit", className), ...props }, /* @__PURE__ */ React48.createElement(
+    return /* @__PURE__ */ React59.createElement(Card, { ref, className: cx("p-0 overflow-hidden group w-fit", className), ...props }, /* @__PURE__ */ React59.createElement(
       "div",
       {
         className: cx(
@@ -4747,7 +5035,7 @@ var ImageCard = React48.forwardRef(
         ),
         style: hasAspectRatio ? { aspectRatio: resolveAspectRatio(aspectRatio) } : void 0
       },
-      /* @__PURE__ */ React48.createElement(
+      /* @__PURE__ */ React59.createElement(
         "img",
         {
           src,
@@ -4760,20 +5048,20 @@ var ImageCard = React48.forwardRef(
           )
         }
       ),
-      overlay && /* @__PURE__ */ React48.createElement(
+      overlay && /* @__PURE__ */ React59.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
       )
-    ), (title || subtitle || children) && /* @__PURE__ */ React48.createElement("div", { className: cx("px-4 py-4", contentClassName) }, title && /* @__PURE__ */ React48.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ React48.createElement("p", { className: "text-sm text-silver leading-normal" }, subtitle), children));
+    ), (title || subtitle || children) && /* @__PURE__ */ React59.createElement("div", { className: cx("px-4 py-4", contentClassName) }, title && /* @__PURE__ */ React59.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ React59.createElement("p", { className: "text-sm text-silver leading-normal" }, subtitle), children));
   }
 );
 ImageCard.displayName = "ImageCard";
 
 // src/components/VideoCard.tsx
-import React49 from "react";
+import React60 from "react";
 import ReactPlayer2 from "react-player";
 var ASPECT_RATIO_PRESETS2 = {
   video: "16 / 9",
@@ -4786,7 +5074,7 @@ function resolveAspectRatio2(ratio) {
   }
   return ratio.replace("/", " / ");
 }
-var VideoCard = React49.forwardRef(
+var VideoCard = React60.forwardRef(
   ({
     src,
     title,
@@ -4806,7 +5094,7 @@ var VideoCard = React49.forwardRef(
     ...props
   }, ref) => {
     const hasAspectRatio = aspectRatio !== void 0;
-    return /* @__PURE__ */ React49.createElement(Card, { ref, className: cx("p-0 overflow-hidden group w-full", className), ...props }, /* @__PURE__ */ React49.createElement(
+    return /* @__PURE__ */ React60.createElement(Card, { ref, className: cx("p-0 overflow-hidden group w-full", className), ...props }, /* @__PURE__ */ React60.createElement(
       "div",
       {
         className: cx(
@@ -4815,7 +5103,7 @@ var VideoCard = React49.forwardRef(
         ),
         style: { aspectRatio: resolveAspectRatio2(aspectRatio) }
       },
-      /* @__PURE__ */ React49.createElement(
+      /* @__PURE__ */ React60.createElement(
         ReactPlayer2,
         {
           src,
@@ -4831,7 +5119,7 @@ var VideoCard = React49.forwardRef(
           ...playerProps
         }
       )
-    ), (title || subtitle || children) && /* @__PURE__ */ React49.createElement("div", { className: cx("px-4 py-4", contentClassName) }, title && /* @__PURE__ */ React49.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ React49.createElement(
+    ), (title || subtitle || children) && /* @__PURE__ */ React60.createElement("div", { className: cx("px-4 py-4", contentClassName) }, title && /* @__PURE__ */ React60.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ React60.createElement(
       "p",
       {
         className: "text-sm text-silver leading-normal mt-1"
@@ -4842,65 +5130,232 @@ var VideoCard = React49.forwardRef(
 );
 VideoCard.displayName = "VideoCard";
 
-// src/components/chat/ArtifactsPanel.tsx
-function LayersIcon({ className }) {
-  return /* @__PURE__ */ React50.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 20 20",
-      fill: "currentColor",
-      className
-    },
-    /* @__PURE__ */ React50.createElement(
-      "path",
+// src/components/AudioCard.tsx
+import React61 from "react";
+import ReactPlayer3 from "react-player";
+import { Music } from "lucide-react";
+var AudioCard = React61.forwardRef(
+  ({
+    src,
+    title,
+    subtitle,
+    playing = false,
+    controls = true,
+    volume,
+    muted = false,
+    loop = false,
+    mediaClassName,
+    contentClassName,
+    className,
+    children,
+    playerProps,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ React61.createElement(Card, { ref, className: cx("p-0 overflow-hidden group w-full", className), ...props }, /* @__PURE__ */ React61.createElement(
+      "div",
       {
-        d: "M3.196 12.87l-.825.483a.75.75 0 000 1.294l7.25 4.25a.75.75 0 00.758 0l7.25-4.25a.75.75 0 000-1.294l-.825-.484-5.666 3.322a2.25 2.25 0 01-2.276 0L3.196 12.87z"
-      }
-    ),
-    /* @__PURE__ */ React50.createElement(
-      "path",
+        className: cx(
+          "relative bg-obsidian py-8 flex flex-col items-center justify-center border-b border-ash",
+          mediaClassName
+        )
+      },
+      /* @__PURE__ */ React61.createElement("div", { className: "mb-4 text-gold" }, /* @__PURE__ */ React61.createElement(Music, { size: 48 })),
+      /* @__PURE__ */ React61.createElement("div", { className: "w-full px-4" }, /* @__PURE__ */ React61.createElement(
+        ReactPlayer3,
+        {
+          src,
+          playing,
+          controls,
+          volume,
+          muted,
+          loop,
+          width: "100%",
+          height: "40px",
+          style: { backgroundColor: "transparent" },
+          config: {
+            file: {
+              forceAudio: true,
+              attributes: {
+                style: { width: "100%", height: "40px" }
+              }
+            }
+          },
+          ...playerProps
+        }
+      ))
+    ), (title || subtitle || children) && /* @__PURE__ */ React61.createElement("div", { className: cx("px-4 py-4", contentClassName) }, title && /* @__PURE__ */ React61.createElement(
+      "h4",
       {
-        d: "M3.196 8.87l-.825.483a.75.75 0 000 1.294l7.25 4.25a.75.75 0 00.758 0l7.25-4.25a.75.75 0 000-1.294l-.825-.484-5.666 3.322a2.25 2.25 0 01-2.276 0L3.196 8.87z"
-      }
-    ),
-    /* @__PURE__ */ React50.createElement(
-      "path",
+        className: "text-lg font-semibold leading-tight"
+      },
+      title
+    ), subtitle && /* @__PURE__ */ React61.createElement(
+      "p",
       {
-        d: "M10.38 1.103a.75.75 0 00-.76 0l-7.25 4.25a.75.75 0 000 1.294l7.25 4.25a.75.75 0 00.76 0l7.25-4.25a.75.75 0 000-1.294l-7.25-4.25z"
-      }
-    )
-  );
+        className: "text-sm text-silver leading-normal mt-1"
+      },
+      subtitle
+    ), children));
+  }
+);
+AudioCard.displayName = "AudioCard";
+
+// src/components/ScriptCard.tsx
+import React62 from "react";
+function ScriptElementRenderer({ element }) {
+  switch (element.type) {
+    case "scene-heading":
+      return /* @__PURE__ */ React62.createElement("p", { className: "mt-4 mb-2 font-bold uppercase text-gold text-xs tracking-wide" }, element.content);
+    case "action":
+      return /* @__PURE__ */ React62.createElement("p", { className: "my-2 text-silver text-xs leading-relaxed" }, element.content);
+    case "character":
+      return /* @__PURE__ */ React62.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__ */ React62.createElement("p", { className: "ml-6 text-silver/70 text-xs italic" }, "(", element.content, ")");
+    case "dialogue":
+      return /* @__PURE__ */ React62.createElement("p", { className: "ml-4 mr-8 text-silver text-xs leading-relaxed" }, element.content);
+    case "transition":
+      return /* @__PURE__ */ React62.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__ */ React62.createElement("p", { className: "mt-6 mb-2 text-center font-bold text-gold text-sm" }, element.content);
+    case "subtitle":
+      return /* @__PURE__ */ React62.createElement("p", { className: "text-center italic text-gold/70 text-xs" }, element.content);
+    default:
+      return null;
+  }
 }
-function ChevronRightIcon2({ className }) {
-  return /* @__PURE__ */ React50.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 20 20",
-      fill: "currentColor",
-      className
-    },
-    /* @__PURE__ */ React50.createElement(
-      "path",
+var ScriptCard = React62.forwardRef(
+  ({ title, subtitle, elements, maxHeight = "16rem", className, style, ...rest }, ref) => {
+    return /* @__PURE__ */ React62.createElement(
+      "div",
       {
-        fillRule: "evenodd",
-        d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
-        clipRule: "evenodd"
-      }
-    )
-  );
-}
-function ArtifactSkeleton({ type }) {
+        ref,
+        className: cx(
+          "bg-charcoal border border-ash/40",
+          className
+        ),
+        ...rest
+      },
+      (title || subtitle) && /* @__PURE__ */ React62.createElement("div", { className: "px-4 py-3 border-b border-ash/40" }, title && /* @__PURE__ */ React62.createElement("h4", { className: "text-sm font-heading text-gold" }, title), subtitle && /* @__PURE__ */ React62.createElement("p", { className: "text-xs text-silver/60 mt-0.5" }, subtitle)),
+      /* @__PURE__ */ React62.createElement(
+        "div",
+        {
+          className: "px-4 py-3 font-mono overflow-y-auto",
+          style: { maxHeight, ...style }
+        },
+        elements.map((element, index) => /* @__PURE__ */ React62.createElement(ScriptElementRenderer, { key: index, element }))
+      )
+    );
+  }
+);
+ScriptCard.displayName = "ScriptCard";
+
+// src/components/chat/ArtifactsPanel.tsx
+function ArtifactSkeleton({ type, fullWidth }) {
+  const wrapperClass = fullWidth ? "col-span-full" : "";
   if (type === "image") {
-    return /* @__PURE__ */ React50.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React50.createElement(Skeleton, { className: "w-full h-48" }), /* @__PURE__ */ React50.createElement("div", { className: "p-4 bg-charcoal border border-ash/40 border-t-0" }, /* @__PURE__ */ React50.createElement(Skeleton, { className: "h-5 w-3/4 mb-2" }), /* @__PURE__ */ React50.createElement(Skeleton, { className: "h-4 w-1/2" })));
+    return /* @__PURE__ */ React63.createElement("div", { className: cx("overflow-hidden", wrapperClass) }, /* @__PURE__ */ React63.createElement(Skeleton, { className: "w-full h-48" }), /* @__PURE__ */ React63.createElement("div", { className: "p-4 bg-charcoal border border-ash/40 border-t-0" }, /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-5 w-3/4 mb-2" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-4 w-1/2" })));
   }
   if (type === "video") {
-    return /* @__PURE__ */ React50.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React50.createElement(Skeleton, { className: "w-full aspect-video" }), /* @__PURE__ */ React50.createElement("div", { className: "p-4 bg-charcoal border border-ash/40 border-t-0" }, /* @__PURE__ */ React50.createElement(Skeleton, { className: "h-5 w-3/4 mb-2" }), /* @__PURE__ */ React50.createElement(Skeleton, { className: "h-4 w-1/2" })));
+    return /* @__PURE__ */ React63.createElement("div", { className: cx("overflow-hidden", wrapperClass) }, /* @__PURE__ */ React63.createElement(Skeleton, { className: "w-full aspect-video" }), /* @__PURE__ */ React63.createElement("div", { className: "p-4 bg-charcoal border border-ash/40 border-t-0" }, /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-5 w-3/4 mb-2" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-4 w-1/2" })));
+  }
+  if (type === "audio") {
+    return /* @__PURE__ */ React63.createElement("div", { className: cx("overflow-hidden", wrapperClass) }, /* @__PURE__ */ React63.createElement(Skeleton, { className: "w-full h-32" }), /* @__PURE__ */ React63.createElement("div", { className: "p-4 bg-charcoal border border-ash/40 border-t-0" }, /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-5 w-3/4 mb-2" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-4 w-1/2" })));
   }
-  return /* @__PURE__ */ React50.createElement("div", { className: "p-4 bg-charcoal border border-ash/40 space-y-2" }, /* @__PURE__ */ React50.createElement(Skeleton, { className: "h-5 w-1/2" }), /* @__PURE__ */ React50.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ React50.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ React50.createElement(Skeleton, { className: "h-4 w-3/4" }));
+  if (type === "html") {
+    return /* @__PURE__ */ React63.createElement("div", { className: cx("p-4 bg-charcoal border border-ash/40 space-y-2", wrapperClass) }, /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-5 w-1/3 mb-4" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-3 w-2/3" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-3 w-full" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-3 w-3/4" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-3 w-full" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-3 w-1/2" }));
+  }
+  return /* @__PURE__ */ React63.createElement("div", { className: cx("p-4 bg-charcoal border border-ash/40 space-y-2", wrapperClass) }, /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-5 w-1/2" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ React63.createElement(Skeleton, { className: "h-4 w-3/4" }));
 }
-function ArtifactRenderer({ artifact, isLoading }) {
+function ArtifactModal({
+  artifact,
+  onClose
+}) {
+  useEffect11(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  const handleBackdropClick = useCallback14((e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  }, [onClose]);
+  return /* @__PURE__ */ React63.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__ */ React63.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__ */ React63.createElement(
+        "div",
+        {
+          className: "flex items-center justify-between p-4 border-b border-ash/40 shrink-0"
+        },
+        /* @__PURE__ */ React63.createElement("div", null, artifact.title && /* @__PURE__ */ React63.createElement("h3", { className: "text-sm font-semibold text-white" }, artifact.title), artifact.subtitle && /* @__PURE__ */ React63.createElement("p", { className: "text-xs text-silver" }, artifact.subtitle)),
+        /* @__PURE__ */ React63.createElement(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-2 text-silver hover:text-white hover:bg-ash/20 transition-colors",
+            "aria-label": "Close modal"
+          },
+          /* @__PURE__ */ React63.createElement(CloseIcon, { className: "w-5 h-5" })
+        )
+      ),
+      /* @__PURE__ */ React63.createElement("div", { className: "flex-1 overflow-auto p-4" }, artifact.type === "image" && /* @__PURE__ */ React63.createElement(
+        "img",
+        {
+          src: artifact.src,
+          alt: artifact.alt || "Artifact image",
+          className: "max-w-full max-h-full object-contain mx-auto"
+        }
+      ), artifact.type === "video" && /* @__PURE__ */ React63.createElement(
+        VideoCard,
+        {
+          src: artifact.src || "",
+          aspectRatio: "video",
+          controls: true,
+          className: "max-w-full max-h-full mx-auto"
+        }
+      ), artifact.type === "audio" && /* @__PURE__ */ React63.createElement(
+        AudioCard,
+        {
+          src: artifact.src || "",
+          controls: true,
+          className: "max-w-xl mx-auto"
+        }
+      ), artifact.type === "text" && /* @__PURE__ */ React63.createElement(
+        MarkdownContent,
+        {
+          content: artifact.content || "",
+          className: "prose-sm prose-invert max-w-none"
+        }
+      ), artifact.type === "html" && artifact.scriptElements && /* @__PURE__ */ React63.createElement(
+        ScriptCard,
+        {
+          elements: artifact.scriptElements,
+          maxHeight: "100%",
+          className: "max-w-3xl mx-auto border-0"
+        }
+      ))
+    )
+  );
+}
+function ArtifactRenderer({
+  artifact,
+  isLoading,
+  onExpand
+}) {
   const [imageLoaded, setImageLoaded] = useState14(false);
   const [minDelayPassed, setMinDelayPassed] = useState14(false);
   useEffect11(() => {
@@ -4911,76 +5366,146 @@ function ArtifactRenderer({ artifact, isLoading }) {
     }, 800);
     return () => clearTimeout(timer);
   }, [artifact.src, artifact.id]);
+  const fullWidthClass = artifact.fullWidth ? "col-span-full" : "";
   if (isLoading || artifact.isPending) {
-    return /* @__PURE__ */ React50.createElement(ArtifactSkeleton, { type: artifact.type });
+    return /* @__PURE__ */ React63.createElement(ArtifactSkeleton, { type: artifact.type, fullWidth: artifact.fullWidth });
   }
-  const showContent = imageLoaded && minDelayPassed;
+  const showContent = artifact.type !== "image" || imageLoaded && minDelayPassed;
+  const expandButton = onExpand && /* @__PURE__ */ React63.createElement(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        onExpand();
+      },
+      className: cx(
+        "absolute top-2 right-2 z-10 p-1.5",
+        "bg-obsidian/80 text-silver hover:text-white hover:bg-obsidian",
+        "opacity-0 group-hover:opacity-100 transition-opacity"
+      ),
+      "aria-label": "Expand artifact"
+    },
+    /* @__PURE__ */ React63.createElement(ExpandIcon, { className: "w-4 h-4" })
+  );
   switch (artifact.type) {
     case "image":
-      return /* @__PURE__ */ React50.createElement("div", { className: "relative" }, !showContent && /* @__PURE__ */ React50.createElement(ArtifactSkeleton, { type: "image" }), /* @__PURE__ */ React50.createElement(
-        ImageCard,
+      return /* @__PURE__ */ React63.createElement(
+        "div",
+        {
+          className: cx("relative group cursor-pointer", fullWidthClass),
+          onClick: onExpand
+        },
+        !showContent && /* @__PURE__ */ React63.createElement(ArtifactSkeleton, { type: "image" }),
+        expandButton,
+        /* @__PURE__ */ React63.createElement(
+          ImageCard,
+          {
+            src: artifact.src || "",
+            alt: artifact.alt || "Artifact image",
+            title: artifact.title,
+            subtitle: artifact.subtitle,
+            aspectRatio: "landscape",
+            className: cx(
+              "w-full transition-opacity duration-300",
+              showContent ? "opacity-100" : "opacity-0 absolute inset-0"
+            ),
+            onLoad: () => setImageLoaded(true)
+          }
+        )
+      );
+    case "video":
+      return /* @__PURE__ */ React63.createElement("div", { className: cx("relative group", fullWidthClass) }, expandButton, /* @__PURE__ */ React63.createElement(
+        VideoCard,
         {
           src: artifact.src || "",
-          alt: artifact.alt || "Artifact image",
           title: artifact.title,
           subtitle: artifact.subtitle,
-          aspectRatio: "landscape",
-          className: cx(
-            "w-full transition-opacity duration-300",
-            showContent ? "opacity-100" : "opacity-0 absolute inset-0"
-          ),
-          onLoad: () => setImageLoaded(true)
+          aspectRatio: "video",
+          controls: true,
+          className: "w-full"
         }
       ));
-    case "video":
-      return /* @__PURE__ */ React50.createElement(
-        VideoCard,
+    case "audio":
+      return /* @__PURE__ */ React63.createElement("div", { className: cx("relative group", fullWidthClass) }, expandButton, /* @__PURE__ */ React63.createElement(
+        AudioCard,
         {
           src: artifact.src || "",
           title: artifact.title,
           subtitle: artifact.subtitle,
-          aspectRatio: "video",
           controls: true,
           className: "w-full"
         }
+      ));
+    case "html":
+      return /* @__PURE__ */ React63.createElement(
+        "div",
+        {
+          className: cx("relative group cursor-pointer", fullWidthClass),
+          onClick: onExpand
+        },
+        expandButton,
+        /* @__PURE__ */ React63.createElement(
+          ScriptCard,
+          {
+            title: artifact.title,
+            subtitle: artifact.subtitle,
+            elements: artifact.scriptElements || [],
+            maxHeight: "16rem",
+            className: "w-full"
+          }
+        )
       );
     case "text":
-      return /* @__PURE__ */ React50.createElement("div", { className: "p-4 bg-charcoal border border-ash/40" }, artifact.title && /* @__PURE__ */ React50.createElement("h4", { className: "text-lg font-semibold text-white mb-2" }, artifact.title), /* @__PURE__ */ React50.createElement(
-        MarkdownContent,
+      return /* @__PURE__ */ React63.createElement(
+        "div",
         {
-          content: artifact.content || "",
-          className: "prose-sm prose-invert"
-        }
-      ));
+          className: cx(
+            "relative group cursor-pointer p-4 bg-charcoal border border-ash/40",
+            fullWidthClass
+          ),
+          onClick: onExpand
+        },
+        expandButton,
+        artifact.title && /* @__PURE__ */ React63.createElement("h4", { className: "text-sm font-semibold text-white mb-2" }, artifact.title),
+        /* @__PURE__ */ React63.createElement(
+          MarkdownContent,
+          {
+            content: artifact.content || "",
+            className: "prose-sm prose-invert max-h-48 overflow-y-auto"
+          }
+        )
+      );
     default:
       return null;
   }
 }
-var ArtifactsPanel = React50.forwardRef(
+var ArtifactsPanel = React63.forwardRef(
   ({
     artifacts,
     isOpen = false,
     onClose,
     isLoading = false,
     width,
+    widthPercent,
     onResizeStart,
     className,
     ...rest
   }, ref) => {
-    const columns = width && width > 800 ? 3 : width && width > 500 ? 2 : 1;
+    const [expandedArtifact, setExpandedArtifact] = useState14(null);
+    const columns = widthPercent && widthPercent > 55 ? 3 : widthPercent && widthPercent > 35 ? 2 : 1;
     if (!isOpen) {
-      return /* @__PURE__ */ React50.createElement(
+      return /* @__PURE__ */ React63.createElement(
         "div",
         {
           ref,
           className: cx(
             "h-full bg-charcoal/80 border-l border-ash/40 flex flex-col items-center py-3",
-            "w-12 flex-shrink-0",
+            "w-12 shrink-0",
             className
           ),
           ...rest
         },
-        /* @__PURE__ */ React50.createElement(
+        /* @__PURE__ */ React63.createElement(
           "button",
           {
             onClick: onClose,
@@ -4992,8 +5517,8 @@ var ArtifactsPanel = React50.forwardRef(
             ),
             "aria-label": "Expand artifacts panel"
           },
-          /* @__PURE__ */ React50.createElement(LayersIcon, { className: "w-5 h-5" }),
-          artifacts.length > 0 && /* @__PURE__ */ React50.createElement(
+          /* @__PURE__ */ React63.createElement(LayersIcon, { className: "w-5 h-5" }),
+          artifacts.length > 0 && /* @__PURE__ */ React63.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"
@@ -5003,7 +5528,7 @@ var ArtifactsPanel = React50.forwardRef(
         )
       );
     }
-    return /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(
       "div",
       {
         ref,
@@ -5011,13 +5536,13 @@ var ArtifactsPanel = React50.forwardRef(
         className: cx(
           "h-full bg-charcoal/50 border-l border-ash/40 flex flex-col relative",
           !width && "w-96",
-          "flex-shrink-0",
+          "shrink-0",
           className
         ),
-        style: width ? { width: `${width}px` } : void 0,
+        style: width ? { width } : void 0,
         ...rest
       },
-      /* @__PURE__ */ React50.createElement(
+      /* @__PURE__ */ React63.createElement(
         "div",
         {
           onMouseDown: onResizeStart,
@@ -5030,13 +5555,13 @@ var ArtifactsPanel = React50.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ React50.createElement(
+      /* @__PURE__ */ React63.createElement(
         "div",
         {
-          className: "flex items-center justify-between p-4 border-b border-ash/40 flex-shrink-0"
+          className: "flex items-center justify-between p-4 border-b border-ash/40 shrink-0"
         },
-        /* @__PURE__ */ React50.createElement("h3", { className: "text-lg font-semibold text-white" }, "Artifacts"),
-        /* @__PURE__ */ React50.createElement(
+        /* @__PURE__ */ React63.createElement("h3", { className: "text-sm font-semibold text-white" }, "Artifacts"),
+        /* @__PURE__ */ React63.createElement(
           "button",
           {
             onClick: onClose,
@@ -5047,10 +5572,10 @@ var ArtifactsPanel = React50.forwardRef(
             ),
             "aria-label": "Collapse artifacts panel"
           },
-          /* @__PURE__ */ React50.createElement(ChevronRightIcon2, { className: "w-5 h-5" })
+          /* @__PURE__ */ React63.createElement(ChevronRightIcon, { className: "w-5 h-5" })
         )
       ),
-      /* @__PURE__ */ React50.createElement(
+      /* @__PURE__ */ React63.createElement(
         "div",
         {
           "data-testid": "artifacts-grid",
@@ -5061,21 +5586,28 @@ var ArtifactsPanel = React50.forwardRef(
             columns === 3 && "grid-cols-3"
           )
         },
-        artifacts.length === 0 && !isLoading ? /* @__PURE__ */ React50.createElement("p", { className: "text-sm text-silver/60 text-center py-8" }, "No artifacts to display") : artifacts.map((artifact) => /* @__PURE__ */ React50.createElement(
+        artifacts.length === 0 && !isLoading ? /* @__PURE__ */ React63.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, "No artifacts to display") : artifacts.map((artifact) => /* @__PURE__ */ React63.createElement(
           ArtifactRenderer,
           {
             key: artifact.id,
             artifact,
-            isLoading
+            isLoading,
+            onExpand: () => setExpandedArtifact(artifact)
           }
         ))
       )
-    );
+    ), expandedArtifact && /* @__PURE__ */ React63.createElement(
+      ArtifactModal,
+      {
+        artifact: expandedArtifact,
+        onClose: () => setExpandedArtifact(null)
+      }
+    ));
   }
 );
 ArtifactsPanel.displayName = "ArtifactsPanel";
-var ArtifactsPanelToggle = React50.forwardRef(({ artifactCount = 0, onExpand, className, ...rest }, ref) => {
-  return /* @__PURE__ */ React50.createElement(
+var ArtifactsPanelToggle = React63.forwardRef(({ artifactCount = 0, onExpand, className, ...rest }, ref) => {
+  return /* @__PURE__ */ React63.createElement(
     "button",
     {
       ref,
@@ -5092,8 +5624,8 @@ var ArtifactsPanelToggle = React50.forwardRef(({ artifactCount = 0, onExpand, cl
       "aria-label": "Expand artifacts panel",
       ...rest
     },
-    /* @__PURE__ */ React50.createElement(LayersIcon, { className: "w-5 h-5" }),
-    artifactCount > 0 && /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React63.createElement(LayersIcon, { className: "w-5 h-5" }),
+    artifactCount > 0 && /* @__PURE__ */ React63.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"
@@ -5104,40 +5636,141 @@ var ArtifactsPanelToggle = React50.forwardRef(({ artifactCount = 0, onExpand, cl
 });
 ArtifactsPanelToggle.displayName = "ArtifactsPanelToggle";
 
+// src/components/chat/TodosList.tsx
+import React64, { useMemo as useMemo2 } from "react";
+function TaskIcon({ status }) {
+  switch (status) {
+    case "done":
+      return /* @__PURE__ */ React64.createElement(CheckSquareIcon, null);
+    case "in_progress":
+      return /* @__PURE__ */ React64.createElement(SquareLoaderIcon, null);
+    case "cancelled":
+      return /* @__PURE__ */ React64.createElement(CrossSquareIcon, { variant: "cancelled" });
+    case "failed":
+      return /* @__PURE__ */ React64.createElement(CrossSquareIcon, { variant: "failed" });
+    case "pending":
+    default:
+      return /* @__PURE__ */ React64.createElement(EmptySquareIcon, null);
+  }
+}
+function sortTasks(tasks) {
+  const normal = [];
+  const bottomItems = [];
+  for (const task of tasks) {
+    if (task.status === "cancelled" || task.status === "failed") {
+      bottomItems.push(task);
+    } else {
+      normal.push(task);
+    }
+  }
+  return [...normal, ...bottomItems];
+}
+function TaskItem({ task, depth = 0 }) {
+  const isTerminal = task.status === "done" || task.status === "cancelled" || task.status === "failed";
+  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__ */ React64.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React64.createElement(
+    "div",
+    {
+      className: cx(
+        "flex items-center gap-2 py-1",
+        depth > 0 && "pl-6"
+      )
+    },
+    /* @__PURE__ */ React64.createElement(TaskIcon, { status: task.status }),
+    /* @__PURE__ */ React64.createElement(
+      "span",
+      {
+        className: cx(
+          "text-xs leading-tight transition-colors",
+          isTerminal && "line-through",
+          isSubtle ? "text-silver/50" : "text-silver",
+          task.status === "in_progress" && "text-white",
+          task.status === "done" && "text-silver/70"
+        )
+      },
+      task.label,
+      task.status === "cancelled" && /* @__PURE__ */ React64.createElement("span", { className: "text-silver/40 ml-1" }, "(cancelled)"),
+      task.status === "failed" && /* @__PURE__ */ React64.createElement("span", { className: "text-error/60 ml-1" }, "(failed)")
+    )
+  ), showSubtasks && /* @__PURE__ */ React64.createElement("div", { className: "flex flex-col" }, sortedSubtasks.map((subtask) => /* @__PURE__ */ React64.createElement(TaskItem, { key: subtask.id, task: subtask, depth: depth + 1 }))));
+}
+var TodosList = React64.forwardRef(
+  ({ tasks, title = "Tasks", className, ...rest }, ref) => {
+    const sortedTasks = useMemo2(() => sortTasks(tasks), [tasks]);
+    const countCompleted = (taskList) => {
+      let count = 0;
+      for (const task of taskList) {
+        if (task.status === "done") count++;
+        if (task.subtasks) count += countCompleted(task.subtasks);
+      }
+      return count;
+    };
+    const countTotal = (taskList) => {
+      let count = taskList.length;
+      for (const task of taskList) {
+        if (task.subtasks) count += countTotal(task.subtasks);
+      }
+      return count;
+    };
+    if (tasks.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ React64.createElement(
+      "div",
+      {
+        ref,
+        className: cx(
+          "flex flex-col bg-charcoal/30 border-l border-ash/40",
+          "overflow-hidden",
+          className
+        ),
+        style: { maxHeight: "25vh" },
+        ...rest
+      },
+      /* @__PURE__ */ React64.createElement("div", { className: "flex items-center justify-between px-4 py-2 border-b border-ash/40 flex-shrink-0" }, /* @__PURE__ */ React64.createElement("h4", { className: "text-xs font-medium text-white" }, title), /* @__PURE__ */ React64.createElement("span", { className: "text-xs text-silver/60" }, countCompleted(tasks), "/", countTotal(tasks))),
+      /* @__PURE__ */ React64.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ React64.createElement(TaskItem, { key: task.id, task })))
+    );
+  }
+);
+TodosList.displayName = "TodosList";
+
 // src/components/chat/hooks/useResizable.ts
-import { useCallback as useCallback14, useEffect as useEffect12, useRef as useRef9, useState as useState15 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect12, useRef as useRef9, useState as useState15 } from "react";
 function useResizable({
-  initialWidth,
-  minWidth,
-  maxWidth,
+  initialWidthPercent,
+  minWidthPercent,
+  maxWidthPercent,
   direction
 }) {
-  const [width, setWidth] = useState15(initialWidth);
+  const [widthPercent, setWidthPercent] = useState15(initialWidthPercent);
   const [isResizing, setIsResizing] = useState15(false);
   const lastX = useRef9(null);
-  const startResizing = useCallback14((e) => {
+  const startResizing = useCallback15((e) => {
     e.preventDefault();
     setIsResizing(true);
     lastX.current = e.clientX;
   }, []);
-  const stopResizing = useCallback14(() => {
+  const stopResizing = useCallback15(() => {
     setIsResizing(false);
     lastX.current = null;
   }, []);
-  const resize = useCallback14(
+  const resize = useCallback15(
     (e) => {
       if (!isResizing || lastX.current === null) {
         return;
       }
       const deltaX = e.clientX - lastX.current;
       const factor = direction === "right" ? 1 : -1;
-      setWidth((prevWidth) => {
-        const newWidth = prevWidth + deltaX * factor;
-        return Math.min(Math.max(newWidth, minWidth), maxWidth);
+      const deltaPercent = deltaX / window.innerWidth * 100;
+      setWidthPercent((prevPercent) => {
+        const newPercent = prevPercent + deltaPercent * factor;
+        return Math.min(Math.max(newPercent, minWidthPercent), maxWidthPercent);
       });
       lastX.current = e.clientX;
     },
-    [isResizing, direction, minWidth, maxWidth]
+    [isResizing, direction, minWidthPercent, maxWidthPercent]
   );
   useEffect12(() => {
     if (isResizing) {
@@ -5158,11 +5791,12 @@ function useResizable({
       document.body.style.userSelect = "";
     };
   }, [isResizing, resize, stopResizing]);
-  return { width, isResizing, startResizing };
+  const width = `${widthPercent}vw`;
+  return { width, widthPercent, isResizing, startResizing };
 }
 
 // src/components/chat/ChatInterface.tsx
-var ChatInterface = React51.forwardRef(
+var ChatInterface = React65.forwardRef(
   ({
     messages = [],
     conversationTree,
@@ -5187,6 +5821,8 @@ var ChatInterface = React51.forwardRef(
     artifacts = [],
     isArtifactsPanelOpen,
     onArtifactsPanelOpenChange,
+    tasks = [],
+    tasksTitle,
     className,
     ...rest
   }, ref) => {
@@ -5196,26 +5832,25 @@ var ChatInterface = React51.forwardRef(
       width: sidebarWidth,
       startResizing: startResizingSidebar
     } = useResizable({
-      initialWidth: 256,
-      // w-64
-      minWidth: 200,
-      maxWidth: 500,
+      initialWidthPercent: 15,
+      minWidthPercent: 12,
+      maxWidthPercent: 25,
       direction: "right"
     });
     const {
       width: artifactsWidth,
+      widthPercent: artifactsWidthPercent,
       startResizing: startResizingArtifacts
     } = useResizable({
-      initialWidth: 384,
-      // w-96
-      minWidth: 300,
-      maxWidth: 1200,
+      initialWidthPercent: 50,
+      minWidthPercent: 25,
+      maxWidthPercent: 70,
       direction: "left"
     });
     const isPanelControlled = isArtifactsPanelOpen !== void 0;
     const artifactsPanelOpen = isPanelControlled ? isArtifactsPanelOpen : internalPanelOpen;
     const isTreeMode = !!conversationTree;
-    const effectiveMessages = useMemo2(() => {
+    const effectiveMessages = useMemo3(() => {
       if (isTreeMode && conversationTree) {
         const pathNodes = getActivePathMessages(conversationTree);
         return pathNodes.map((node) => ({
@@ -5227,7 +5862,7 @@ var ChatInterface = React51.forwardRef(
       }
       return messages;
     }, [isTreeMode, conversationTree, messages]);
-    const latestUserMessageIndex = useMemo2(() => {
+    const latestUserMessageIndex = useMemo3(() => {
       for (let i = effectiveMessages.length - 1; i >= 0; i--) {
         if (effectiveMessages[i].variant === "user") {
           return i;
@@ -5235,15 +5870,15 @@ var ChatInterface = React51.forwardRef(
       }
       return -1;
     }, [effectiveMessages]);
-    const hasPendingArtifact = useMemo2(() => {
+    const hasPendingArtifact = useMemo3(() => {
       return artifacts.some((a) => a.isPending);
     }, [artifacts]);
-    React51.useEffect(() => {
+    React65.useEffect(() => {
       if (!isPanelControlled && artifacts.length > 0) {
         setInternalPanelOpen(true);
       }
     }, [artifacts.length, isPanelControlled]);
-    const handleBranchSwitch = useCallback15(
+    const handleBranchSwitch = useCallback16(
       (nodeId, direction) => {
         if (!isTreeMode || !conversationTree || !onTreeChange) {
           return;
@@ -5253,7 +5888,7 @@ var ChatInterface = React51.forwardRef(
       },
       [isTreeMode, conversationTree, onTreeChange]
     );
-    const displayMessages = useMemo2(() => {
+    const displayMessages = useMemo3(() => {
       return effectiveMessages.map((msg) => {
         let branchInfo = void 0;
         if (isTreeMode && conversationTree) {
@@ -5287,16 +5922,16 @@ var ChatInterface = React51.forwardRef(
       onRetryMessage,
       handleBranchSwitch
     ]);
-    const handleSubmit = useCallback15(
+    const handleSubmit = useCallback16(
       (message, attachments) => {
         onMessageSubmit?.(message, attachments);
       },
       [onMessageSubmit]
     );
-    const toggleSidebar = useCallback15(() => {
+    const toggleSidebar = useCallback16(() => {
       setSidebarCollapsed((prev) => !prev);
     }, []);
-    const toggleArtifactsPanel = useCallback15(() => {
+    const toggleArtifactsPanel = useCallback16(() => {
       if (isPanelControlled) {
         onArtifactsPanelOpenChange?.(!artifactsPanelOpen);
       } else {
@@ -5304,14 +5939,14 @@ var ChatInterface = React51.forwardRef(
       }
     }, [isPanelControlled, artifactsPanelOpen, onArtifactsPanelOpenChange]);
     const isEmpty = effectiveMessages.length === 0;
-    return /* @__PURE__ */ React51.createElement(
+    return /* @__PURE__ */ React65.createElement(
       "div",
       {
         ref,
         className: cx("flex h-full w-full bg-obsidian overflow-hidden", className),
         ...rest
       },
-      /* @__PURE__ */ React51.createElement(
+      /* @__PURE__ */ React65.createElement(
         ConversationSidebar,
         {
           conversations,
@@ -5323,16 +5958,16 @@ var ChatInterface = React51.forwardRef(
           onResizeStart: startResizingSidebar
         }
       ),
-      /* @__PURE__ */ React51.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ React51.createElement("div", { className: cx(
+      /* @__PURE__ */ React65.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ React65.createElement("div", { className: cx(
         "flex-1 flex flex-col min-h-0 relative",
         isEmpty ? "justify-center" : "justify-start"
-      ) }, /* @__PURE__ */ React51.createElement("div", { className: cx(
+      ) }, /* @__PURE__ */ React65.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
-      ) }), /* @__PURE__ */ React51.createElement("div", { className: cx(
+      ) }), /* @__PURE__ */ React65.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__ */ React51.createElement(
+      ) }, /* @__PURE__ */ React65.createElement(
         ChatView,
         {
           messages: displayMessages,
@@ -5341,10 +5976,10 @@ var ChatInterface = React51.forwardRef(
           isThinking,
           className: "flex-1"
         }
-      )), /* @__PURE__ */ React51.createElement("div", { className: cx(
+      )), /* @__PURE__ */ React65.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out z-10 w-full",
         isEmpty ? "p-4" : "shrink-0 p-4 border-t border-ash/40 bg-obsidian"
-      ) }, isEmpty && emptyState ? /* @__PURE__ */ React51.createElement("div", { className: "flex justify-center" }, emptyState) : /* @__PURE__ */ React51.createElement(
+      ) }, isEmpty && emptyState ? /* @__PURE__ */ React65.createElement("div", { className: "flex justify-center" }, emptyState) : /* @__PURE__ */ React65.createElement(
         ChatInput,
         {
           position: isEmpty ? "centered" : "bottom",
@@ -5358,11 +5993,11 @@ var ChatInterface = React51.forwardRef(
           attachments: propsAttachments,
           onAttachmentsChange
         }
-      )), /* @__PURE__ */ React51.createElement("div", { className: cx(
+      )), /* @__PURE__ */ React65.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
       ) }))),
-      /* @__PURE__ */ React51.createElement(
+      /* @__PURE__ */ React65.createElement("div", { className: "h-full flex flex-col flex-shrink-0" }, /* @__PURE__ */ React65.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ React65.createElement(
         ArtifactsPanel,
         {
           artifacts,
@@ -5370,18 +6005,27 @@ var ChatInterface = React51.forwardRef(
           onClose: toggleArtifactsPanel,
           isLoading: isStreaming && hasPendingArtifact,
           width: artifactsWidth,
-          onResizeStart: startResizingArtifacts
+          widthPercent: artifactsWidthPercent,
+          onResizeStart: startResizingArtifacts,
+          className: "h-full"
         }
-      )
+      )), tasks.length > 0 && artifactsPanelOpen && /* @__PURE__ */ React65.createElement(
+        TodosList,
+        {
+          tasks,
+          title: tasksTitle,
+          style: { width: artifactsWidth }
+        }
+      ))
     );
   }
 );
 ChatInterface.displayName = "ChatInterface";
 
 // src/components/chat/MessageActions.tsx
-import React52, { useCallback as useCallback16, useState as useState17 } from "react";
+import React66, { useCallback as useCallback17, useState as useState17 } from "react";
 import { Check as Check3, Copy, Pencil, RotateCcw, Send as Send2, X as X5 } from "lucide-react";
-var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ React52.createElement(
+var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ React66.createElement(
   "button",
   {
     type: "button",
@@ -5397,7 +6041,7 @@ var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @_
   },
   children
 );
-var MessageActions = React52.forwardRef(
+var MessageActions = React66.forwardRef(
   ({
     variant,
     content,
@@ -5414,7 +6058,7 @@ var MessageActions = React52.forwardRef(
     const [copied, setCopied] = useState17(false);
     const isEditing = controlledIsEditing ?? localIsEditing;
     const editValue = controlledEditValue ?? localEditValue;
-    const setIsEditing = useCallback16(
+    const setIsEditing = useCallback17(
       (value) => {
         if (onEditingChange) {
           onEditingChange(value);
@@ -5424,10 +6068,10 @@ var MessageActions = React52.forwardRef(
       },
       [onEditingChange]
     );
-    const setEditValue = useCallback16((value) => {
+    const setEditValue = useCallback17((value) => {
       setLocalEditValue(value);
     }, []);
-    const handleCopy = useCallback16(async () => {
+    const handleCopy = useCallback17(async () => {
       try {
         await navigator.clipboard.writeText(content);
         setCopied(true);
@@ -5443,22 +6087,22 @@ var MessageActions = React52.forwardRef(
         setTimeout(() => setCopied(false), 2e3);
       }
     }, [content]);
-    const handleStartEdit = useCallback16(() => {
+    const handleStartEdit = useCallback17(() => {
       setLocalEditValue(content);
       setIsEditing(true);
     }, [content, setIsEditing]);
-    const handleCancelEdit = useCallback16(() => {
+    const handleCancelEdit = useCallback17(() => {
       setIsEditing(false);
       setLocalEditValue(content);
     }, [content, setIsEditing]);
-    const handleSubmitEdit = useCallback16(() => {
+    const handleSubmitEdit = useCallback17(() => {
       const trimmed = editValue.trim();
       if (trimmed && trimmed !== content) {
         onEdit?.(trimmed);
       }
       setIsEditing(false);
     }, [editValue, content, onEdit, setIsEditing]);
-    const handleEditKeyDown = useCallback16(
+    const handleEditKeyDown = useCallback17(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
@@ -5471,19 +6115,19 @@ var MessageActions = React52.forwardRef(
     );
     const isUser = variant === "user";
     if (isUser && isEditing) {
-      return /* @__PURE__ */ React52.createElement(
+      return /* @__PURE__ */ React66.createElement(
         "div",
         {
           ref,
           className: cx("mt-2", className),
           ...rest
         },
-        /* @__PURE__ */ React52.createElement(
+        /* @__PURE__ */ React66.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__ */ React52.createElement(
+          /* @__PURE__ */ React66.createElement(
             "textarea",
             {
               value: editValue,
@@ -5494,15 +6138,15 @@ var MessageActions = React52.forwardRef(
               rows: 2
             }
           ),
-          /* @__PURE__ */ React52.createElement("div", { className: "absolute right-2 bottom-2 flex gap-1" }, /* @__PURE__ */ React52.createElement(
+          /* @__PURE__ */ React66.createElement("div", { className: "absolute right-2 bottom-2 flex gap-1" }, /* @__PURE__ */ React66.createElement(
             ActionButton2,
             {
               onClick: handleCancelEdit,
               label: "Cancel edit",
               className: "text-silver/60 hover:text-error"
             },
-            /* @__PURE__ */ React52.createElement(X5, { className: "w-4 h-4" })
-          ), /* @__PURE__ */ React52.createElement(
+            /* @__PURE__ */ React66.createElement(X5, { className: "w-4 h-4" })
+          ), /* @__PURE__ */ React66.createElement(
             ActionButton2,
             {
               onClick: handleSubmitEdit,
@@ -5510,13 +6154,13 @@ var MessageActions = React52.forwardRef(
               className: "text-silver/60 hover:text-gold",
               disabled: !editValue.trim() || editValue.trim() === content
             },
-            /* @__PURE__ */ React52.createElement(Send2, { className: "w-4 h-4" })
+            /* @__PURE__ */ React66.createElement(Send2, { className: "w-4 h-4" })
           ))
         ),
-        /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-silver/50 mt-1" }, "Press Enter to submit, Esc to cancel. This will create a new branch.")
+        /* @__PURE__ */ React66.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__ */ React52.createElement(
+    return /* @__PURE__ */ React66.createElement(
       "div",
       {
         ref,
@@ -5527,18 +6171,18 @@ var MessageActions = React52.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ React52.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ React52.createElement(Check3, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ React52.createElement(Copy, { className: "w-3.5 h-3.5" })),
-      isUser && onEdit && /* @__PURE__ */ React52.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ React52.createElement(Pencil, { className: "w-3.5 h-3.5" })),
-      !isUser && onRetry && /* @__PURE__ */ React52.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ React52.createElement(RotateCcw, { className: "w-3.5 h-3.5" }))
+      /* @__PURE__ */ React66.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ React66.createElement(Check3, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ React66.createElement(Copy, { className: "w-3.5 h-3.5" })),
+      isUser && onEdit && /* @__PURE__ */ React66.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ React66.createElement(Pencil, { className: "w-3.5 h-3.5" })),
+      !isUser && onRetry && /* @__PURE__ */ React66.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ React66.createElement(RotateCcw, { className: "w-3.5 h-3.5" }))
     );
   }
 );
 MessageActions.displayName = "MessageActions";
 
 // src/components/chat/BranchNavigator.tsx
-import React53 from "react";
+import React67 from "react";
 import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, GitBranch } from "lucide-react";
-var BranchNavigator = React53.forwardRef(
+var BranchNavigator = React67.forwardRef(
   ({
     current,
     total,
@@ -5557,7 +6201,7 @@ var BranchNavigator = React53.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__ */ React53.createElement(
+    return /* @__PURE__ */ React67.createElement(
       "div",
       {
         ref,
@@ -5569,8 +6213,8 @@ var BranchNavigator = React53.forwardRef(
         "aria-label": "Branch navigation",
         ...rest
       },
-      showIcon && /* @__PURE__ */ React53.createElement(GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
-      /* @__PURE__ */ React53.createElement(
+      showIcon && /* @__PURE__ */ React67.createElement(GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
+      /* @__PURE__ */ React67.createElement(
         "button",
         {
           type: "button",
@@ -5583,10 +6227,10 @@ var BranchNavigator = React53.forwardRef(
           ),
           "aria-label": "Previous branch"
         },
-        /* @__PURE__ */ React53.createElement(ChevronLeft2, { className: iconSize })
+        /* @__PURE__ */ React67.createElement(ChevronLeft2, { className: iconSize })
       ),
-      /* @__PURE__ */ React53.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
-      /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React67.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
+      /* @__PURE__ */ React67.createElement(
         "button",
         {
           type: "button",
@@ -5599,7 +6243,7 @@ var BranchNavigator = React53.forwardRef(
           ),
           "aria-label": "Next branch"
         },
-        /* @__PURE__ */ React53.createElement(ChevronRight3, { className: iconSize })
+        /* @__PURE__ */ React67.createElement(ChevronRight3, { className: iconSize })
       )
     );
   }
@@ -5607,13 +6251,13 @@ var BranchNavigator = React53.forwardRef(
 BranchNavigator.displayName = "BranchNavigator";
 
 // src/components/chat/hooks/useArtifacts.ts
-import { useCallback as useCallback17, useState as useState18 } from "react";
+import { useCallback as useCallback18, useState as useState18 } from "react";
 function useArtifacts() {
   const [artifacts, setArtifacts] = useState18([]);
-  const scheduleArtifact = useCallback17((artifact) => {
+  const scheduleArtifact = useCallback18((artifact) => {
     setArtifacts((prev) => [...prev, { ...artifact, isPending: true }]);
   }, []);
-  const showArtifact = useCallback17(
+  const showArtifact = useCallback18(
     (artifactId, updates) => {
       setArtifacts((prev) => {
         const existingIndex = prev.findIndex((a) => a.id === artifactId);
@@ -5628,26 +6272,26 @@ function useArtifacts() {
     },
     []
   );
-  const removeArtifact = useCallback17((artifactId) => {
+  const removeArtifact = useCallback18((artifactId) => {
     setArtifacts((prev) => prev.filter((a) => a.id !== artifactId));
   }, []);
-  const clearArtifacts = useCallback17(() => {
+  const clearArtifacts = useCallback18(() => {
     setArtifacts([]);
   }, []);
   return { artifacts, scheduleArtifact, showArtifact, removeArtifact, clearArtifacts };
 }
 
 // src/components/BrandIcon.tsx
-import React54 from "react";
+import React68 from "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 = React54.forwardRef(
+var BrandIcon = React68.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__ */ React54.createElement(
+    return /* @__PURE__ */ React68.createElement(
       "div",
       {
         ref,
@@ -5666,17 +6310,17 @@ var BrandIcon = React54.forwardRef(
 BrandIcon.displayName = "BrandIcon";
 
 // src/components/ColorSwatch.tsx
-import React55 from "react";
-var ColorSwatch = React55.forwardRef(
+import React69 from "react";
+var ColorSwatch = React69.forwardRef(
   ({ color, label, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React55.createElement(
+    return /* @__PURE__ */ React69.createElement(
       "div",
       {
         ref,
         className: cx("flex flex-col items-center gap-2", className),
         ...rest
       },
-      /* @__PURE__ */ React55.createElement(
+      /* @__PURE__ */ React69.createElement(
         "div",
         {
           className: "h-16 w-16 border-2 border-ash rounded-none shadow-sm",
@@ -5684,22 +6328,22 @@ var ColorSwatch = React55.forwardRef(
           "aria-label": label || color
         }
       ),
-      label && /* @__PURE__ */ React55.createElement("span", { className: "text-xs text-silver font-medium" }, label)
+      label && /* @__PURE__ */ React69.createElement("span", { className: "text-xs text-silver font-medium" }, label)
     );
   }
 );
 ColorSwatch.displayName = "ColorSwatch";
 
 // src/components/SectionHeading.tsx
-import React56 from "react";
+import React70 from "react";
 var levelStyles = {
   h2: "text-2xl mb-4",
   h3: "text-xl mb-3"
 };
-var SectionHeading = React56.forwardRef(
+var SectionHeading = React70.forwardRef(
   ({ level = "h2", children, className, ...rest }, ref) => {
     const Component = level;
-    return /* @__PURE__ */ React56.createElement(
+    return /* @__PURE__ */ React70.createElement(
       Component,
       {
         ref,
@@ -5728,6 +6372,7 @@ export {
   ArtifactsPanel,
   ArtifactsPanelToggle,
   AttachmentPreview,
+  AudioCard,
   Avatar,
   Badge,
   BranchNavigator,
@@ -5740,17 +6385,25 @@ export {
   ChatInput,
   ChatInterface,
   ChatView,
+  CheckSquareIcon,
   Checkbox,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CloseIcon,
   Col,
   CollapsedSidebarToggle,
   ColorSwatch,
   ConfirmDialog,
   Container,
   ConversationSidebar,
+  CrossSquareIcon,
   Divider,
   Drawer,
+  EmptySquareIcon,
+  ExpandIcon,
   FileChip,
   HelperText,
+  HistoryIcon,
   ImageCard,
   Input,
   InputGroup,
@@ -5760,6 +6413,7 @@ export {
   InputRightElement,
   InputWrapper,
   Label,
+  LayersIcon,
   List,
   ListItem,
   ListItemText,
@@ -5781,16 +6435,19 @@ export {
   NavbarItem,
   NavbarLink,
   Pagination,
+  PlusIcon,
   Popover,
   Progress,
   PromptDialog,
   Radio,
   Row,
+  ScriptCard,
   SectionHeading,
   Select,
   Skeleton,
   Slider,
   Spinner,
+  SquareLoaderIcon,
   Stack,
   Stepper,
   StreamingCursor,
@@ -5810,6 +6467,7 @@ export {
   Textarea,
   ThinkingIndicator,
   ToastProvider,
+  TodosList,
   Tooltip,
   VideoCard,
   addMessageToTree,