@lukeashford/aurelius 3.9.0 → 4.1.0

package/dist/index.mjs

@@ -92,6 +92,147 @@ Input.displayName = "Input";
 import React4, { createContext, useContext } from "react";
 import { Check } from "lucide-react";
 
+// src/utils/clipboard.ts
+async function copyToClipboard(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+    }
+  }
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const textArea = document.createElement("textarea");
+  textArea.value = text;
+  textArea.setAttribute("readonly", "");
+  textArea.setAttribute("aria-hidden", "true");
+  textArea.style.position = "fixed";
+  textArea.style.opacity = "0";
+  textArea.style.pointerEvents = "none";
+  document.body.appendChild(textArea);
+  try {
+    textArea.select();
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(textArea);
+  }
+}
+
+// src/utils/hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ;
+        ref.current = node;
+      }
+    }
+  };
+}
+var scrollLockCount = 0;
+var scrollLockOriginalOverflow = null;
+var scrollLockOriginalPaddingRight = null;
+function useScrollLock(isLocked) {
+  useEffect(() => {
+    if (!isLocked || typeof document === "undefined") {
+      return;
+    }
+    if (scrollLockCount === 0) {
+      scrollLockOriginalOverflow = document.body.style.overflow;
+      scrollLockOriginalPaddingRight = document.body.style.paddingRight;
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+      }
+    }
+    scrollLockCount++;
+    return () => {
+      scrollLockCount--;
+      if (scrollLockCount === 0) {
+        document.body.style.overflow = scrollLockOriginalOverflow ?? "";
+        document.body.style.paddingRight = scrollLockOriginalPaddingRight ?? "";
+        scrollLockOriginalOverflow = null;
+        scrollLockOriginalPaddingRight = null;
+      }
+    };
+  }, [isLocked]);
+}
+function useEscapeKey(onEscape, isActive = true) {
+  useEffect(() => {
+    if (!isActive || typeof window === "undefined") {
+      return;
+    }
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        onEscape();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onEscape, isActive]);
+}
+function useClickOutside(ref, handler, isActive = true) {
+  useEffect(() => {
+    if (!isActive || typeof document === "undefined") {
+      return;
+    }
+    const listener = (event) => {
+      const node = ref.current;
+      if (node && !node.contains(event.target)) {
+        handler(event);
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    return () => document.removeEventListener("mousedown", listener);
+  }, [ref, handler, isActive]);
+}
+function useCopyToClipboard(resetMs = 2e3) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(null);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  const copy = useCallback(async (text) => {
+    const ok = await copyToClipboard(text);
+    if (!mountedRef.current) {
+      return ok;
+    }
+    if (ok) {
+      setCopied(true);
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        if (mountedRef.current) {
+          setCopied(false);
+        }
+      }, resetMs);
+    }
+    return ok;
+  }, [resetMs]);
+  return { copied, copy };
+}
+
 // src/components/Skeleton.tsx
 import React3 from "react";
 var Skeleton = React3.forwardRef(
@@ -116,8 +257,7 @@ function slotLoading(loading, path) {
     return false;
   }
   if (Array.isArray(path)) {
-    const [section, field] = path;
-    return !!loading[section]?.[field];
+    return !!loading.header?.[path[1]];
   }
   return !!loading[path];
 }
@@ -1393,29 +1533,28 @@ var Select = React20.forwardRef(
 Select.displayName = "Select";
 
 // src/components/Checkbox.tsx
-import React21, { useCallback } from "react";
+import React21, { useCallback as useCallback2, useId } from "react";
 var checkmarkSvg = `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A1A1A' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")`;
 var Checkbox = React21.forwardRef(
-  ({ className, label, id, ...rest }, ref) => {
-    const inputId = id || rest.name || Math.random().toString(36).substr(2, 9);
-    const setRef = useCallback((node) => {
-      if (node) {
-        if (node.checked) {
-          node.style.backgroundImage = checkmarkSvg;
-        }
-      }
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
+  ({ className, label, id, onChange, ...rest }, ref) => {
+    const generatedId = useId();
+    const inputId = id || rest.name || generatedId;
+    const initBackground = useCallback2((node) => {
+      if (node && node.checked) {
+        node.style.backgroundImage = checkmarkSvg;
       }
-    }, [ref]);
+    }, []);
+    const handleChange = useCallback2((e) => {
+      e.currentTarget.style.backgroundImage = e.currentTarget.checked ? checkmarkSvg : "none";
+      onChange?.(e);
+    }, [onChange]);
     return /* @__PURE__ */ React21.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React21.createElement(
       "input",
       {
+        ...rest,
         type: "checkbox",
         id: inputId,
-        ref: setRef,
+        ref: composeRefs(initBackground, ref),
         className: cx(
           "appearance-none h-4 w-4 border border-ash bg-graphite",
           "checked:bg-gold checked:border-gold",
@@ -1429,16 +1568,7 @@ var Checkbox = React21.forwardRef(
           backgroundSize: "contain",
           backgroundRepeat: "no-repeat"
         },
-        onChange: (e) => {
-          const input = e.currentTarget;
-          if (input.checked) {
-            input.style.backgroundImage = checkmarkSvg;
-          } else {
-            input.style.backgroundImage = "none";
-          }
-          rest.onChange?.(e);
-        },
-        ...rest
+        onChange: handleChange
       }
     ), label && /* @__PURE__ */ React21.createElement(
       "label",
@@ -1453,29 +1583,44 @@ var Checkbox = React21.forwardRef(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Radio.tsx
-import React22, { useCallback as useCallback2 } from "react";
+import React22, { useCallback as useCallback3, useId as useId2 } from "react";
 var radioDotSvg = `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A1A1A' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")`;
 var Radio = React22.forwardRef(
-  ({ className, label, id, ...rest }, ref) => {
-    const inputId = id || rest.name || Math.random().toString(36).substr(2, 9);
-    const setRef = useCallback2((node) => {
-      if (node) {
-        if (node.checked) {
-          node.style.backgroundImage = radioDotSvg;
-        }
+  ({ className, label, id, onChange, ...rest }, ref) => {
+    const generatedId = useId2();
+    const inputId = id || rest.name || generatedId;
+    const initBackground = useCallback3((node) => {
+      if (node && node.checked) {
+        node.style.backgroundImage = radioDotSvg;
       }
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
+    }, []);
+    const handleChange = useCallback3((e) => {
+      const input = e.currentTarget;
+      if (input.checked) {
+        input.style.backgroundImage = radioDotSvg;
+        if (input.name) {
+          const escaped = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(input.name) : input.name.replace(/["\\\]]/g, "\\$&");
+          const radios = input.ownerDocument.querySelectorAll(
+            `input[type="radio"][name="${escaped}"]`
+          );
+          radios.forEach((radio) => {
+            if (radio !== input) {
+              radio.style.backgroundImage = "none";
+            }
+          });
+        }
+      } else {
+        input.style.backgroundImage = "none";
       }
-    }, [ref]);
+      onChange?.(e);
+    }, [onChange]);
     return /* @__PURE__ */ React22.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React22.createElement(
       "input",
       {
+        ...rest,
         type: "radio",
         id: inputId,
-        ref: setRef,
+        ref: composeRefs(initBackground, ref),
         className: cx(
           "appearance-none h-4 w-4 border border-ash rounded-full bg-graphite",
           "checked:bg-gold checked:border-gold",
@@ -1489,26 +1634,7 @@ var Radio = React22.forwardRef(
           backgroundSize: "contain",
           backgroundRepeat: "no-repeat"
         },
-        onChange: (e) => {
-          const input = e.currentTarget;
-          if (input.checked) {
-            input.style.backgroundImage = radioDotSvg;
-            if (input.name) {
-              const radios = document.querySelectorAll(
-                `input[type="radio"][name="${input.name}"]`
-              );
-              radios.forEach((radio) => {
-                if (radio !== input) {
-                  radio.style.backgroundImage = "none";
-                }
-              });
-            }
-          } else {
-            input.style.backgroundImage = "none";
-          }
-          rest.onChange?.(e);
-        },
-        ...rest
+        onChange: handleChange
       }
     ), label && /* @__PURE__ */ React22.createElement(
       "label",
@@ -1523,7 +1649,7 @@ var Radio = React22.forwardRef(
 Radio.displayName = "Radio";
 
 // src/components/Switch.tsx
-import React23, { useCallback as useCallback3, useRef, useState } from "react";
+import React23, { useCallback as useCallback4, useRef as useRef2, useState as useState2 } from "react";
 var Switch = React23.forwardRef(
   ({
     checked: controlledChecked,
@@ -1534,11 +1660,11 @@ var Switch = React23.forwardRef(
     label,
     ...rest
   }, ref) => {
-    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = useState2(defaultChecked);
     const isControlled = controlledChecked !== void 0;
     const checked = isControlled ? controlledChecked : internalChecked;
-    const buttonRef = useRef(null);
-    const setRefs = useCallback3(
+    const buttonRef = useRef2(null);
+    const setRefs = useCallback4(
       (node) => {
         buttonRef.current = node;
         if (typeof ref === "function") {
@@ -1608,7 +1734,7 @@ var Switch = React23.forwardRef(
 Switch.displayName = "Switch";
 
 // src/components/Slider.tsx
-import React24, { useCallback as useCallback4, useRef as useRef2, useState as useState2 } from "react";
+import React24, { useCallback as useCallback5, useRef as useRef3, useState as useState3 } from "react";
 var SIZE_TRACK = {
   sm: "h-1",
   md: "h-2",
@@ -1635,13 +1761,13 @@ var Slider = React24.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = useState2(defaultValue);
-    const [isDragging, setIsDragging] = useState2(false);
-    const trackRef = useRef2(null);
+    const [internalValue, setInternalValue] = useState3(defaultValue);
+    const [isDragging, setIsDragging] = useState3(false);
+    const trackRef = useRef3(null);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
     const percentage = (value - min) / (max - min) * 100;
-    const updateValue = useCallback4(
+    const updateValue = useCallback5(
       (clientX) => {
         if (!trackRef.current || disabled) {
           return;
@@ -1997,16 +2123,21 @@ var Progress = React28.forwardRef(
 Progress.displayName = "Progress";
 
 // src/components/Toast.tsx
-import React29, { createContext as createContext2, useCallback as useCallback5, useContext as useContext2, useEffect, useState as useState3 } from "react";
+import React29, { createContext as createContext2, useCallback as useCallback6, useContext as useContext2, useEffect as useEffect2, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import { AlertCircle, AlertTriangle as AlertTriangle2, CheckCircle as CheckCircle2, Info as Info2, X as X2 } from "lucide-react";
+var toastCounter = 0;
+function createToastId() {
+  toastCounter += 1;
+  return `toast-${Date.now().toString(36)}-${toastCounter}`;
+}
 var ToastContext = createContext2(null);
 function useToast() {
   const context = useContext2(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
-  const toast = useCallback5(
+  const toast = useCallback6(
     (options) => {
       return context.addToast(options);
     },
@@ -2022,14 +2153,14 @@ var ToastProvider = ({
   position = "bottom-right",
   defaultDuration = 5e3
 }) => {
-  const [toasts, setToasts] = useState3([]);
-  const [mounted, setMounted] = useState3(false);
-  useEffect(() => {
+  const [toasts, setToasts] = useState4([]);
+  const [mounted, setMounted] = useState4(false);
+  useEffect2(() => {
     setMounted(true);
   }, []);
-  const addToast = useCallback5(
+  const addToast = useCallback6(
     (toast) => {
-      const id = Math.random().toString(36).substr(2, 9);
+      const id = createToastId();
       const newToast = {
         ...toast,
         id,
@@ -2040,33 +2171,33 @@ var ToastProvider = ({
     },
     [defaultDuration]
   );
-  const removeToast = useCallback5((id) => {
+  const removeToast = useCallback6((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ React29.createElement(ToastContext.Provider, { value: { toasts, addToast, removeToast, position } }, children, mounted && /* @__PURE__ */ React29.createElement(ToastViewport, null));
 };
 ToastProvider.displayName = "ToastProvider";
+var POSITION_CLASSES = {
+  "top-right": "top-4 right-4",
+  "top-left": "top-4 left-4",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+};
 var ToastViewport = () => {
   const context = useContext2(ToastContext);
   if (!context) {
     return null;
   }
   const { toasts, position } = context;
-  const positionClasses = {
-    "top-right": "top-4 right-4",
-    "top-left": "top-4 left-4",
-    "bottom-right": "bottom-4 right-4",
-    "bottom-left": "bottom-4 left-4",
-    "top-center": "top-4 left-1/2 -translate-x-1/2",
-    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
-  };
   return createPortal(
     /* @__PURE__ */ React29.createElement(
       "div",
       {
         className: cx(
           "fixed z-50 flex flex-col gap-2 pointer-events-none",
-          positionClasses[position]
+          POSITION_CLASSES[position]
         )
       },
       toasts.map((toast) => /* @__PURE__ */ React29.createElement(Toast, { key: toast.id, ...toast }))
@@ -2097,7 +2228,7 @@ var Toast = ({
   action
 }) => {
   const context = useContext2(ToastContext);
-  useEffect(() => {
+  useEffect2(() => {
     if (duration && duration > 0) {
       const timer = setTimeout(() => {
         context?.removeToast(id);
@@ -2129,41 +2260,17 @@ var Toast = ({
 Toast.displayName = "Toast";
 
 // src/components/Modal.tsx
-import React30, { useEffect as useEffect2, useState as useState4 } from "react";
+import React30, { useEffect as useEffect3, useState as useState5 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { X as X3 } from "lucide-react";
 var Modal = ({ isOpen, onClose, title, children, className }) => {
-  const [mounted, setMounted] = useState4(false);
-  useEffect2(() => {
+  const [mounted, setMounted] = useState5(false);
+  useEffect3(() => {
     setMounted(true);
   }, []);
-  useEffect2(() => {
-    if (isOpen) {
-      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-      document.body.style.overflow = "hidden";
-      document.body.style.paddingRight = `${scrollbarWidth}px`;
-    } else {
-      document.body.style.overflow = "unset";
-      document.body.style.paddingRight = "0px";
-    }
-    return () => {
-      document.body.style.overflow = "unset";
-      document.body.style.paddingRight = "0px";
-    };
-  }, [isOpen]);
-  useEffect2(() => {
-    const handleEsc = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleEsc);
-    return () => window.removeEventListener("keydown", handleEsc);
-  }, [onClose]);
-  if (!mounted) {
-    return null;
-  }
-  if (!isOpen) {
+  useScrollLock(isOpen);
+  useEscapeKey(onClose, isOpen);
+  if (!mounted || !isOpen) {
     return null;
   }
   const content = /* @__PURE__ */ React30.createElement(
@@ -2202,7 +2309,7 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
 Modal.displayName = "Modal";
 
 // src/components/Drawer.tsx
-import React31, { useEffect as useEffect3, useState as useState5 } from "react";
+import React31, { useEffect as useEffect4, useState as useState6 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { X as X4 } from "lucide-react";
 var SIZE_MAP2 = {
@@ -2237,7 +2344,7 @@ var SIZE_MAP2 = {
     bottom: "h-full"
   }
 };
-var POSITION_CLASSES = {
+var POSITION_CLASSES2 = {
   left: "left-0 top-0 h-full",
   right: "right-0 top-0 h-full",
   top: "top-0 left-0 w-full",
@@ -2258,33 +2365,12 @@ var Drawer = ({
   children,
   className
 }) => {
-  const [mounted, setMounted] = useState5(false);
-  useEffect3(() => {
+  const [mounted, setMounted] = useState6(false);
+  useEffect4(() => {
     setMounted(true);
   }, []);
-  useEffect3(() => {
-    if (isOpen) {
-      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-      document.body.style.overflow = "hidden";
-      document.body.style.paddingRight = `${scrollbarWidth}px`;
-    } else {
-      document.body.style.overflow = "unset";
-      document.body.style.paddingRight = "0px";
-    }
-    return () => {
-      document.body.style.overflow = "unset";
-      document.body.style.paddingRight = "0px";
-    };
-  }, [isOpen]);
-  useEffect3(() => {
-    const handleEsc = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleEsc);
-    return () => window.removeEventListener("keydown", handleEsc);
-  }, [onClose]);
+  useScrollLock(isOpen);
+  useEscapeKey(onClose, isOpen);
   if (!mounted) {
     return null;
   }
@@ -2315,7 +2401,7 @@ var Drawer = ({
         className: cx(
           "fixed bg-charcoal border-ash shadow-2xl flex flex-col",
           "transition-transform duration-300 ease-out",
-          POSITION_CLASSES[position],
+          POSITION_CLASSES2[position],
           SIZE_MAP2[size][position],
           position === "left" && "border-r",
           position === "right" && "border-l",
@@ -2342,8 +2428,8 @@ var Drawer = ({
 Drawer.displayName = "Drawer";
 
 // src/components/Popover.tsx
-import React32, { useCallback as useCallback6, useEffect as useEffect4, useId, useRef as useRef3, useState as useState6 } from "react";
-var POSITION_CLASSES2 = {
+import React32, { useCallback as useCallback7, useId as useId3, useRef as useRef4, useState as useState7 } from "react";
+var POSITION_CLASSES3 = {
   top: {
     start: "bottom-full left-0 mb-2",
     center: "bottom-full left-1/2 -translate-x-1/2 mb-2",
@@ -2374,12 +2460,12 @@ var Popover = ({
   onOpenChange,
   closeOnClickOutside = true
 }) => {
-  const [internalOpen, setInternalOpen] = useState6(false);
+  const [internalOpen, setInternalOpen] = useState7(false);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
-  const containerRef = useRef3(null);
-  const baseId = useId();
-  const setIsOpen = useCallback6(
+  const containerRef = useRef4(null);
+  const baseId = useId3();
+  const setIsOpen = useCallback7(
     (newOpen) => {
       if (!isControlled) {
         setInternalOpen(newOpen);
@@ -2388,30 +2474,9 @@ var Popover = ({
     },
     [isControlled, onOpenChange]
   );
-  useEffect4(() => {
-    if (!isOpen || !closeOnClickOutside) {
-      return;
-    }
-    const handleClickOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isOpen, closeOnClickOutside, setIsOpen]);
-  useEffect4(() => {
-    if (!isOpen) {
-      return;
-    }
-    const handleEscape = (e) => {
-      if (e.key === "Escape") {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, setIsOpen]);
+  const close = useCallback7(() => setIsOpen(false), [setIsOpen]);
+  useClickOutside(containerRef, close, isOpen && closeOnClickOutside);
+  useEscapeKey(close, isOpen);
   const handleTriggerClick = () => {
     setIsOpen(!isOpen);
   };
@@ -2432,7 +2497,7 @@ var Popover = ({
         "absolute z-50 min-w-48 p-4",
         "bg-charcoal border border-ash shadow-lg",
         "animate-fade-in",
-        POSITION_CLASSES2[position][align]
+        POSITION_CLASSES3[position][align]
       )
     },
     children
@@ -2441,7 +2506,7 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/Dialog.tsx
-import React33, { useCallback as useCallback7 } from "react";
+import React33, { useCallback as useCallback8 } from "react";
 var ConfirmDialog = ({
   title = "Confirm",
   description,
@@ -2454,11 +2519,11 @@ var ConfirmDialog = ({
   isLoading = false,
   ...props
 }) => {
-  const handleCancel = useCallback7(() => {
+  const handleCancel = useCallback8(() => {
     onCancel?.();
     onClose();
   }, [onCancel, onClose]);
-  const handleConfirm = useCallback7(async () => {
+  const handleConfirm = useCallback8(async () => {
     await onConfirm();
     onClose();
   }, [onConfirm, onClose]);
@@ -2502,11 +2567,11 @@ var PromptDialog = ({
   ...props
 }) => {
   const [value, setValue] = React33.useState(defaultValue);
-  const handleCancel = useCallback7(() => {
+  const handleCancel = useCallback8(() => {
     onCancel?.();
     onClose();
   }, [onCancel, onClose]);
-  const handleSubmit = useCallback7(
+  const handleSubmit = useCallback8(
     async (e) => {
       e.preventDefault();
       await onSubmit(value);
@@ -2543,7 +2608,7 @@ var PromptDialog = ({
 PromptDialog.displayName = "PromptDialog";
 
 // src/components/Tabs.tsx
-import React34, { createContext as createContext3, useCallback as useCallback8, useContext as useContext3, useId as useId2, useState as useState7 } from "react";
+import React34, { createContext as createContext3, useCallback as useCallback9, useContext as useContext3, useId as useId4, useState as useState8 } from "react";
 var TabsContext = createContext3(null);
 function useTabsContext() {
   const context = useContext3(TabsContext);
@@ -2554,11 +2619,11 @@ function useTabsContext() {
 }
 var Tabs = React34.forwardRef(
   ({ defaultValue, value, onValueChange, children, className, ...props }, ref) => {
-    const [internalValue, setInternalValue] = useState7(defaultValue ?? "");
+    const [internalValue, setInternalValue] = useState8(defaultValue ?? "");
     const isControlled = value !== void 0;
     const activeTab = isControlled ? value : internalValue;
-    const baseId = useId2();
-    const setActiveTab = useCallback8(
+    const baseId = useId4();
+    const setActiveTab = useCallback9(
       (id) => {
         if (!isControlled) {
           setInternalValue(id);
@@ -2654,7 +2719,7 @@ var TabPanel = React34.forwardRef(
 TabPanel.displayName = "TabPanel";
 
 // src/components/Accordion.tsx
-import React35, { createContext as createContext4, useCallback as useCallback9, useContext as useContext4, useId as useId3, useState as useState8 } from "react";
+import React35, { createContext as createContext4, useCallback as useCallback10, useContext as useContext4, useId as useId5, useState as useState9 } from "react";
 import { ChevronDown } from "lucide-react";
 var AccordionContext = createContext4(null);
 function useAccordionContext() {
@@ -2666,7 +2731,7 @@ function useAccordionContext() {
 }
 var Accordion = React35.forwardRef(
   ({ type = "single", defaultValue, value, onValueChange, children, className, ...props }, ref) => {
-    const [internalValue, setInternalValue] = useState8(() => {
+    const [internalValue, setInternalValue] = useState9(() => {
       if (defaultValue) {
         return new Set(Array.isArray(defaultValue) ? defaultValue : [defaultValue]);
       }
@@ -2674,7 +2739,7 @@ var Accordion = React35.forwardRef(
     });
     const isControlled = value !== void 0;
     const expandedItems = isControlled ? new Set(Array.isArray(value) ? value : [value]) : internalValue;
-    const toggleItem = useCallback9(
+    const toggleItem = useCallback10(
       (id) => {
         const newSet = new Set(expandedItems);
         if (newSet.has(id)) {
@@ -2725,7 +2790,7 @@ var AccordionTrigger = React35.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { expandedItems, toggleItem } = useAccordionContext();
     const itemContext = useContext4(AccordionItemContext);
-    const baseId = useId3();
+    const baseId = useId5();
     if (!itemContext) {
       throw new Error("AccordionTrigger must be used within an AccordionItem");
     }
@@ -2770,7 +2835,7 @@ var AccordionContent = React35.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { expandedItems } = useAccordionContext();
     const itemContext = useContext4(AccordionItemContext);
-    const baseId = useId3();
+    const baseId = useId5();
     if (!itemContext) {
       throw new Error("AccordionContent must be used within an AccordionItem");
     }
@@ -2800,12 +2865,12 @@ AccordionContent.displayName = "AccordionContent";
 // src/components/Menu.tsx
 import React36, {
   createContext as createContext5,
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useContext as useContext5,
   useEffect as useEffect5,
-  useId as useId4,
-  useRef as useRef4,
-  useState as useState9
+  useId as useId6,
+  useRef as useRef5,
+  useState as useState10
 } from "react";
 var MenuContext = createContext5(null);
 function useMenuContext() {
@@ -2816,11 +2881,11 @@ function useMenuContext() {
   return context;
 }
 var Menu = ({ children, open, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = useState9(false);
+  const [internalOpen, setInternalOpen] = useState10(false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : internalOpen;
-  const baseId = useId4();
-  const setIsOpen = useCallback10(
+  const baseId = useId6();
+  const setIsOpen = useCallback11(
     (newOpen) => {
       if (!isControlled) {
         setInternalOpen(newOpen);
@@ -2872,55 +2937,42 @@ var MenuTrigger = React36.forwardRef(
   }
 );
 MenuTrigger.displayName = "MenuTrigger";
+var MENU_ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+var MENU_SIDE_CLASSES = {
+  top: "bottom-full mb-1",
+  bottom: "top-full mt-1"
+};
 var MenuContent = React36.forwardRef(
   ({ children, className, align = "start", side = "bottom", ...props }, ref) => {
     const { isOpen, setIsOpen, triggerId, menuId } = useMenuContext();
-    const menuRef = useRef4(null);
+    const menuRef = useRef5(null);
+    const close = useCallback11(() => setIsOpen(false), [setIsOpen]);
+    useEscapeKey(close, isOpen);
     useEffect5(() => {
       if (!isOpen) {
         return;
       }
       const handleClickOutside = (e) => {
+        const target = e.target;
         const trigger = document.getElementById(triggerId);
-        if (menuRef.current && !menuRef.current.contains(e.target) && trigger && !trigger.contains(e.target)) {
-          setIsOpen(false);
-        }
-      };
-      const handleEscape = (e) => {
-        if (e.key === "Escape") {
+        if (menuRef.current && !menuRef.current.contains(target) && !trigger?.contains(target)) {
           setIsOpen(false);
         }
       };
       document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-        document.removeEventListener("keydown", handleEscape);
-      };
+      return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isOpen, setIsOpen, triggerId]);
     if (!isOpen) {
       return null;
     }
-    const alignmentClasses = {
-      start: "left-0",
-      center: "left-1/2 -translate-x-1/2",
-      end: "right-0"
-    };
-    const sideClasses = {
-      top: "bottom-full mb-1",
-      bottom: "top-full mt-1"
-    };
     return /* @__PURE__ */ React36.createElement(
       "div",
       {
-        ref: (node) => {
-          menuRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-        },
+        ref: composeRefs(menuRef, ref),
         id: menuId,
         role: "menu",
         "aria-labelledby": triggerId,
@@ -2928,8 +2980,8 @@ var MenuContent = React36.forwardRef(
           "absolute z-50 min-w-40 py-1",
           "bg-charcoal border border-ash shadow-lg",
           "animate-fade-in",
-          alignmentClasses[align],
-          sideClasses[side],
+          MENU_ALIGN_CLASSES[align],
+          MENU_SIDE_CLASSES[side],
           className
         ),
         ...props
@@ -3653,12 +3705,19 @@ function SquareLoaderIcon({ className, ...props }) {
 }
 
 // src/components/Message.tsx
-import React55, { useEffect as useEffect6, useRef as useRef5, useState as useState10 } from "react";
+import React55, { useCallback as useCallback12, useEffect as useEffect6, useRef as useRef6, useState as useState11 } from "react";
+import { Check as Check3, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, Copy, GitBranch, Pencil, RotateCcw, Send, X as X5 } from "lucide-react";
 
 // src/components/MarkdownContent.tsx
 import React54, { useMemo } from "react";
 import DOMPurify from "dompurify";
 import { marked } from "marked";
+DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+  if (node.tagName === "A") {
+    node.setAttribute("target", "_blank");
+    node.setAttribute("rel", "noopener noreferrer");
+  }
+});
 var DEFAULT_SANITIZE_CONFIG = {
   ALLOWED_TAGS: [
     "h1",
@@ -3726,16 +3785,6 @@ var DEFAULT_SANITIZE_CONFIG = {
   ADD_ATTR: ["target", "rel"],
   ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i
 };
-function useDOMPurifySetup() {
-  useMemo(() => {
-    DOMPurify.addHook("afterSanitizeAttributes", (node) => {
-      if (node.tagName === "A") {
-        node.setAttribute("target", "_blank");
-        node.setAttribute("rel", "noopener noreferrer");
-      }
-    });
-  }, []);
-}
 var CURSOR_BASE_CLASSES = "inline-block bg-current animate-cursor-blink w-0.5 h-cursor translate-y-cursor-offset";
 function injectStreamingCursor(html, cursorClassName) {
   if (!html.trim()) {
@@ -3765,7 +3814,6 @@ function injectStreamingCursor(html, cursorClassName) {
 }
 var MarkdownContent = React54.forwardRef(
   ({ className, content, isMarkdown = true, sanitizeConfig, isStreaming, cursorClassName, ...rest }, ref) => {
-    useDOMPurifySetup();
     const sanitizedHtml = useMemo(() => {
       if (!content && !isStreaming) {
         return "";
@@ -3787,7 +3835,7 @@ var MarkdownContent = React54.forwardRef(
         return injectStreamingCursor(sanitized, cursorClassName);
       }
       return sanitized;
-    }, [content, sanitizeConfig, isStreaming, cursorClassName]);
+    }, [content, isMarkdown, sanitizeConfig, isStreaming, cursorClassName]);
     return /* @__PURE__ */ React54.createElement(
       "div",
       {
@@ -3802,162 +3850,32 @@ var MarkdownContent = React54.forwardRef(
 MarkdownContent.displayName = "MarkdownContent";
 
 // src/components/Message.tsx
-var variantStyles2 = {
+var VARIANT_STYLES3 = {
   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__ */ React55.createElement(
-  "button",
-  {
-    type: "button",
-    onClick,
-    disabled,
-    className: cx(
-      "p-1.5 text-silver/60 hover:text-silver transition-colors duration-150",
-      "hover:bg-white/5",
-      "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-      className
-    ),
-    "aria-label": label
-  },
-  children
-);
-var CopyIcon = () => /* @__PURE__ */ React55.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-3.5 h-3.5"
-  },
-  /* @__PURE__ */ React55.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-  /* @__PURE__ */ React55.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__ */ React55.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-3.5 h-3.5 text-success"
-  },
-  /* @__PURE__ */ React55.createElement("polyline", { points: "20 6 9 17 4 12" })
-);
-var PencilIcon = () => /* @__PURE__ */ React55.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-3.5 h-3.5"
-  },
-  /* @__PURE__ */ React55.createElement("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
-  /* @__PURE__ */ React55.createElement("path", { d: "m15 5 4 4" })
-);
-var RetryIcon = () => /* @__PURE__ */ React55.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-3.5 h-3.5"
-  },
-  /* @__PURE__ */ React55.createElement("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-  /* @__PURE__ */ React55.createElement("path", { d: "M21 3v5h-5" }),
-  /* @__PURE__ */ React55.createElement("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-  /* @__PURE__ */ React55.createElement("path", { d: "M8 16H3v5" })
-);
-var ChevronLeftIcon2 = () => /* @__PURE__ */ React55.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-3 h-3"
-  },
-  /* @__PURE__ */ React55.createElement("path", { d: "m15 18-6-6 6-6" })
-);
-var ChevronRightIcon2 = () => /* @__PURE__ */ React55.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-3 h-3"
-  },
-  /* @__PURE__ */ React55.createElement("path", { d: "m9 18 6-6-6-6" })
+var ACTION_BUTTON_CLASSES = cx(
+  "p-1.5 text-silver/60 hover:text-silver transition-colors duration-150",
+  "hover:bg-white/5",
+  "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
 );
-var GitBranchIcon = () => /* @__PURE__ */ React55.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-3 h-3 mr-0.5 text-silver/50"
-  },
-  /* @__PURE__ */ React55.createElement("line", { x1: "6", x2: "6", y1: "3", y2: "15" }),
-  /* @__PURE__ */ React55.createElement("circle", { cx: "18", cy: "6", r: "3" }),
-  /* @__PURE__ */ React55.createElement("circle", { cx: "6", cy: "18", r: "3" }),
-  /* @__PURE__ */ React55.createElement("path", { d: "M18 9a9 9 0 0 1-9 9" })
-);
-var XIcon = () => /* @__PURE__ */ React55.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-4 h-4"
-  },
-  /* @__PURE__ */ React55.createElement("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ React55.createElement("path", { d: "m6 6 12 12" })
-);
-var SendIcon = () => /* @__PURE__ */ React55.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-4 h-4"
-  },
-  /* @__PURE__ */ React55.createElement("path", { d: "m22 2-7 20-4-9-9-4Z" }),
-  /* @__PURE__ */ React55.createElement("path", { d: "M22 2 11 13" })
+var BRANCH_BUTTON_CLASSES = cx(
+  "p-0.5 hover:text-white hover:bg-white/10 transition-colors",
+  "disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-silver/70"
 );
+function ActionButton({ onClick, label, children, disabled }) {
+  return /* @__PURE__ */ React55.createElement(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      className: ACTION_BUTTON_CLASSES,
+      "aria-label": label
+    },
+    children
+  );
+}
 var Message = React55.forwardRef(
   ({
     variant = "assistant",
@@ -3970,10 +3888,10 @@ var Message = React55.forwardRef(
     ...rest
   }, ref) => {
     const isUser = variant === "user";
-    const [copied, setCopied] = useState10(false);
-    const [isEditing, setIsEditing] = useState10(false);
-    const [editValue, setEditValue] = useState10(typeof content === "string" ? content : "");
-    const textareaRef = useRef5(null);
+    const { copied, copy } = useCopyToClipboard();
+    const [isEditing, setIsEditing] = useState11(false);
+    const [editValue, setEditValue] = useState11(typeof content === "string" ? content : "");
+    const textareaRef = useRef6(null);
     const showBranchNav = branchInfo && branchInfo.total > 1;
     const showActions = actions && !hideActions && !isStreaming;
     useEffect6(() => {
@@ -3985,25 +3903,11 @@ var Message = React55.forwardRef(
         textarea.setSelectionRange(textarea.value.length, textarea.value.length);
       }
     }, [isEditing]);
-    const handleCopy = async () => {
-      if (typeof content !== "string") {
-        return;
-      }
-      try {
-        await navigator.clipboard.writeText(content);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
-      } catch {
-        const textArea = document.createElement("textarea");
-        textArea.value = content;
-        document.body.appendChild(textArea);
-        textArea.select();
-        document.execCommand("copy");
-        document.body.removeChild(textArea);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
+    const handleCopy = useCallback12(() => {
+      if (typeof content === "string") {
+        void copy(content);
       }
-    };
+    }, [copy, content]);
     const handleStartEdit = () => {
       if (typeof content === "string") {
         setEditValue(content);
@@ -4066,7 +3970,7 @@ var Message = React55.forwardRef(
           className: "p-1.5 text-obsidian/60 hover:text-obsidian transition-colors",
           "aria-label": "Cancel edit"
         },
-        /* @__PURE__ */ React55.createElement(XIcon, null)
+        /* @__PURE__ */ React55.createElement(X5, { className: "w-4 h-4" })
       ), /* @__PURE__ */ React55.createElement(
         "button",
         {
@@ -4076,13 +3980,13 @@ var Message = React55.forwardRef(
           className: "p-1.5 text-obsidian/60 hover:text-obsidian transition-colors disabled:opacity-30",
           "aria-label": "Submit edit"
         },
-        /* @__PURE__ */ React55.createElement(SendIcon, null)
+        /* @__PURE__ */ React55.createElement(Send, { className: "w-4 h-4" })
       )))) : /* @__PURE__ */ React55.createElement(
         "div",
         {
           className: cx(
             "px-3 py-2 w-fit max-w-11/12",
-            variantStyles2[variant]
+            VARIANT_STYLES3[variant]
           )
         },
         typeof content === "string" ? /* @__PURE__ */ React55.createElement(
@@ -4104,33 +4008,27 @@ var Message = React55.forwardRef(
           onClick: handleCopy,
           label: copied ? "Copied!" : "Copy message"
         },
-        copied ? /* @__PURE__ */ React55.createElement(CheckIcon, null) : /* @__PURE__ */ React55.createElement(CopyIcon, null)
-      ), isUser && actions.onEdit && typeof content === "string" && /* @__PURE__ */ React55.createElement(ActionButton, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ React55.createElement(PencilIcon, null)), !isUser && actions.onRetry && /* @__PURE__ */ React55.createElement(ActionButton, { onClick: actions.onRetry, label: "Regenerate response" }, /* @__PURE__ */ React55.createElement(RetryIcon, null)), showBranchNav && /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement("div", { className: "w-px h-4 bg-ash/40 mx-1" }), /* @__PURE__ */ React55.createElement("div", { className: "flex items-center gap-0.5 text-silver/70" }, /* @__PURE__ */ React55.createElement(GitBranchIcon, null), /* @__PURE__ */ React55.createElement(
+        copied ? /* @__PURE__ */ React55.createElement(Check3, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ React55.createElement(Copy, { className: "w-3.5 h-3.5" })
+      ), isUser && actions.onEdit && typeof content === "string" && /* @__PURE__ */ React55.createElement(ActionButton, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ React55.createElement(Pencil, { className: "w-3.5 h-3.5" })), !isUser && actions.onRetry && /* @__PURE__ */ React55.createElement(ActionButton, { onClick: actions.onRetry, label: "Regenerate response" }, /* @__PURE__ */ React55.createElement(RotateCcw, { className: "w-3.5 h-3.5" })), showBranchNav && /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement("div", { className: "w-px h-4 bg-ash/40 mx-1" }), /* @__PURE__ */ React55.createElement("div", { className: "flex items-center gap-0.5 text-silver/70" }, /* @__PURE__ */ React55.createElement(GitBranch, { className: "w-3 h-3 mr-0.5 text-silver/50" }), /* @__PURE__ */ React55.createElement(
         "button",
         {
           type: "button",
           onClick: branchInfo.onPrevious,
           disabled: branchInfo.current <= 1,
-          className: cx(
-            "p-0.5 hover:text-white hover:bg-white/10 transition-colors",
-            "disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-silver/70"
-          ),
+          className: BRANCH_BUTTON_CLASSES,
           "aria-label": "Previous branch"
         },
-        /* @__PURE__ */ React55.createElement(ChevronLeftIcon2, null)
+        /* @__PURE__ */ React55.createElement(ChevronLeft2, { className: "w-3 h-3" })
       ), /* @__PURE__ */ React55.createElement("span", { className: "text-xs tabular-nums min-w-6 text-center" }, branchInfo.current, "/", branchInfo.total), /* @__PURE__ */ React55.createElement(
         "button",
         {
           type: "button",
           onClick: branchInfo.onNext,
           disabled: branchInfo.current >= branchInfo.total,
-          className: cx(
-            "p-0.5 hover:text-white hover:bg-white/10 transition-colors",
-            "disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-silver/70"
-          ),
+          className: BRANCH_BUTTON_CLASSES,
           "aria-label": "Next branch"
         },
-        /* @__PURE__ */ React55.createElement(ChevronRightIcon2, null)
+        /* @__PURE__ */ React55.createElement(ChevronRight3, { className: "w-3 h-3" })
       ))))
     );
   }
@@ -4141,7 +4039,7 @@ Message.displayName = "Message";
 import React56 from "react";
 var StreamingCursor = React56.forwardRef(
   ({ className, variant = "line", ...rest }, ref) => {
-    const variantStyles3 = {
+    const variantStyles2 = {
       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"
@@ -4152,7 +4050,7 @@ var StreamingCursor = React56.forwardRef(
         ref,
         className: cx(
           "inline-block bg-current animate-cursor-blink",
-          variantStyles3[variant],
+          variantStyles2[variant],
           className
         ),
         "aria-hidden": "true",
@@ -4164,18 +4062,18 @@ var StreamingCursor = React56.forwardRef(
 StreamingCursor.displayName = "StreamingCursor";
 
 // src/components/chat/ChatInterface.tsx
-import React74, { useCallback as useCallback20, useEffect as useEffect16, useMemo as useMemo5, useRef as useRef14, useState as useState21 } from "react";
+import React76, { useCallback as useCallback22, useEffect as useEffect16, useMemo as useMemo5, useRef as useRef15, useState as useState22 } from "react";
 
 // src/components/chat/ChatView.tsx
-import React58, { useEffect as useEffect9 } from "react";
+import React60, { useEffect as useEffect9 } from "react";
 
 // src/components/chat/hooks/useScrollAnchor.ts
-import { useCallback as useCallback11, useRef as useRef6 } from "react";
+import { useCallback as useCallback13, useRef as useRef7 } from "react";
 function useScrollAnchor(options = {}) {
   const { behavior = "smooth", block = "start" } = options;
-  const containerRef = useRef6(null);
-  const anchorRef = useRef6(null);
-  const scrollToAnchor = useCallback11(() => {
+  const containerRef = useRef7(null);
+  const anchorRef = useRef7(null);
+  const scrollToAnchor = useCallback13(() => {
     const el = anchorRef.current;
     if (!el) {
       return;
@@ -4186,7 +4084,7 @@ function useScrollAnchor(options = {}) {
       });
     });
   }, [behavior, block]);
-  const scrollToBottom = useCallback11(() => {
+  const scrollToBottom = useCallback13(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -4197,7 +4095,7 @@ function useScrollAnchor(options = {}) {
       container.scrollTop = container.scrollHeight;
     }
   }, [behavior]);
-  const isScrolledToBottom = useCallback11(() => {
+  const isScrolledToBottom = useCallback13(() => {
     const container = containerRef.current;
     if (!container) {
       return true;
@@ -4216,15 +4114,15 @@ function useScrollAnchor(options = {}) {
 }
 
 // src/components/chat/hooks/useAdaptiveSpacer.ts
-import { useCallback as useCallback12, useEffect as useEffect7, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect7, useRef as useRef8, useState as useState12 } from "react";
 function useAdaptiveSpacer(options = {}) {
   const { minHeight = 0, containerRef: externalContainerRef, anchorRef } = options;
-  const internalContainerRef = useRef7(null);
+  const internalContainerRef = useRef8(null);
   const containerRef = externalContainerRef ?? internalContainerRef;
-  const contentRef = useRef7(null);
-  const spacerRef = useRef7(null);
-  const [spacerHeight, setSpacerHeight] = useState11(0);
-  const recalculate = useCallback12(() => {
+  const contentRef = useRef8(null);
+  const spacerRef = useRef8(null);
+  const [spacerHeight, setSpacerHeight] = useState12(0);
+  const recalculate = useCallback14(() => {
     const container = containerRef.current;
     const content = contentRef.current;
     if (!container || !content) {
@@ -4283,7 +4181,7 @@ function useAdaptiveSpacer(options = {}) {
 }
 
 // src/components/chat/ThinkingIndicator.tsx
-import React57, { useEffect as useEffect8, useState as useState12 } from "react";
+import React57, { useEffect as useEffect8, useState as useState13 } from "react";
 var THINKING_PHRASES = [
   "Consulting the ancient tomes...",
   "Parsing the ineffable...",
@@ -4307,22 +4205,29 @@ var ThinkingIndicator = React57.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [currentIndex, setCurrentIndex] = useState12(
+    const [currentIndex, setCurrentIndex] = useState13(
       () => Math.floor(Math.random() * phrases.length)
     );
-    const [isTransitioning, setIsTransitioning] = useState12(false);
+    const [isTransitioning, setIsTransitioning] = useState13(false);
     useEffect8(() => {
       if (!isVisible || phrases.length <= 1) {
         return;
       }
+      let fadeTimeout = null;
       const interval = setInterval(() => {
         setIsTransitioning(true);
-        setTimeout(() => {
+        fadeTimeout = setTimeout(() => {
           setCurrentIndex((prev) => (prev + 1) % phrases.length);
           setIsTransitioning(false);
+          fadeTimeout = null;
         }, 200);
       }, phraseInterval);
-      return () => clearInterval(interval);
+      return () => {
+        clearInterval(interval);
+        if (fadeTimeout !== null) {
+          clearTimeout(fadeTimeout);
+        }
+      };
     }, [isVisible, phrases.length, phraseInterval]);
     if (!isVisible) {
       return null;
@@ -4375,73 +4280,250 @@ var ThinkingIndicator = React57.forwardRef(
 );
 ThinkingIndicator.displayName = "ThinkingIndicator";
 
-// src/components/chat/ChatView.tsx
-var ChatView = React58.forwardRef(
-  ({ messages, latestUserMessageIndex, isStreaming, isThinking, onScroll, className, ...rest }, ref) => {
-    const { containerRef, anchorRef, scrollToAnchor } = useScrollAnchor({
-      behavior: "smooth",
-      block: "start"
-    });
-    const { contentRef, spacerRef, spacerHeight } = useAdaptiveSpacer({
-      containerRef,
-      anchorRef
-    });
-    useEffect9(() => {
-      if (latestUserMessageIndex !== void 0 && latestUserMessageIndex >= 0) {
-        scrollToAnchor();
-      }
-    }, [latestUserMessageIndex, scrollToAnchor]);
-    const latestUserIdx = latestUserMessageIndex ?? messages.reduceRight((found, msg, idx) => {
-      if (found === -1 && msg.variant === "user") {
-        return idx;
-      }
-      return found;
-    }, -1);
-    const showThinking = isThinking && messages.length > 0 && messages[messages.length - 1]?.variant === "user";
+// src/components/chat/Checkpoint.tsx
+import React58 from "react";
+import {
+  ArrowLeft,
+  ChevronLeft as ChevronLeft3,
+  ChevronRight as ChevronRight4,
+  GitBranch as GitBranch2,
+  GitCommitVertical,
+  GitMerge,
+  PencilLine
+} from "lucide-react";
+var KIND_ICONS = {
+  task: GitBranch2,
+  submit: GitMerge,
+  rename: PencilLine,
+  init: GitCommitVertical
+};
+var KIND_ARIA_LABELS = {
+  task: "Task checkpoint",
+  submit: "Submit checkpoint",
+  rename: "Rename checkpoint",
+  init: "Project head checkpoint"
+};
+var Checkpoint = React58.forwardRef(
+  function Checkpoint2({ name, executionKind, status = "completed", isActive, muted, branchInfo, onJumpHere }, ref) {
+    const KindIcon = KIND_ICONS[executionKind];
+    const isFailed = status === "failed";
+    const isCancelled = status === "cancelled";
+    const isInteractive = !isActive && !!onJumpHere;
+    const iconColor = isActive ? "text-gold" : isFailed ? "text-error-muted" : "text-silver/50";
+    const nameClasses = cx(
+      "transition-colors text-xs",
+      isActive ? "text-silver font-medium" : isInteractive ? "text-silver/70 hover:text-white underline decoration-silver/30 underline-offset-4 decoration-dotted hover:decoration-silver/70" : "text-silver/50"
+    );
     return /* @__PURE__ */ React58.createElement(
       "div",
       {
-        ref: (node) => {
-          ;
-          containerRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-        },
-        onScroll,
+        ref,
+        role: "group",
+        "aria-label": KIND_ARIA_LABELS[executionKind],
         className: cx(
-          "flex flex-col w-full h-full overflow-y-auto scroll-smooth",
-          "px-4 py-6 overscroll-contain",
-          className
-        ),
-        ...rest
+          "group/checkpoint flex items-center gap-2 py-1.5 select-none",
+          muted && "opacity-60"
+        )
       },
-      /* @__PURE__ */ React58.createElement("div", { ref: contentRef, className: "relative flex flex-col gap-3" }, messages.map(({
-        id,
-        variant,
-        className: messageClassName,
-        branchInfo,
-        actions,
-        isStreaming: nodeIsStreaming,
-        ...messageProps
-      }, index) => {
-        const isAnchor = index === latestUserIdx;
-        const isLastMessage = index === messages.length - 1;
-        const showStreaming = isLastMessage && isStreaming && variant === "assistant";
-        const isMessageStreaming = showStreaming || !!nodeIsStreaming;
-        return /* @__PURE__ */ React58.createElement(
-          "div",
-          {
-            key: id ?? `msg-${index}`,
-            ref: isAnchor ? anchorRef : void 0,
-            className: isAnchor ? "scroll-mt-4" : void 0
-          },
-          /* @__PURE__ */ React58.createElement(
-            Message,
-            {
-              variant,
+      /* @__PURE__ */ React58.createElement(KindIcon, { className: cx("w-3.5 h-3.5 shrink-0", iconColor), "aria-hidden": "true" }),
+      /* @__PURE__ */ React58.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: isInteractive ? onJumpHere : void 0,
+          disabled: !isInteractive,
+          className: cx(
+            nameClasses,
+            "truncate text-left",
+            !isInteractive && "cursor-default"
+          ),
+          "aria-label": isInteractive ? `Jump to checkpoint ${name}` : name
+        },
+        /* @__PURE__ */ React58.createElement("span", { className: "truncate" }, name),
+        isFailed && /* @__PURE__ */ React58.createElement("span", { className: "ml-1.5 text-error-muted" }, "\xB7 failed"),
+        isCancelled && /* @__PURE__ */ React58.createElement("span", { className: "ml-1.5 text-silver/40" }, "\xB7 cancelled")
+      ),
+      isInteractive && /* @__PURE__ */ React58.createElement(
+        "span",
+        {
+          className: cx(
+            "ml-1 inline-flex items-center gap-1 text-xs text-silver/40",
+            "opacity-0 group-hover/checkpoint:opacity-100 transition-opacity",
+            "pointer-events-none"
+          ),
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React58.createElement(ArrowLeft, { className: "w-3 h-3" }),
+        "Jump here"
+      ),
+      branchInfo && branchInfo.total > 1 && /* @__PURE__ */ React58.createElement(
+        "div",
+        {
+          className: "ml-auto inline-flex items-center gap-0.5 text-silver/70 text-xs",
+          role: "navigation",
+          "aria-label": "Switch sibling checkpoint"
+        },
+        /* @__PURE__ */ React58.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: branchInfo.onPrevious,
+            disabled: branchInfo.current <= 1,
+            className: cx(
+              "p-0.5 hover:text-white hover:bg-white/10 transition-colors",
+              "disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-silver/70"
+            ),
+            "aria-label": "Previous sibling checkpoint"
+          },
+          /* @__PURE__ */ React58.createElement(ChevronLeft3, { className: "w-3 h-3" })
+        ),
+        /* @__PURE__ */ React58.createElement("span", { className: "tabular-nums min-w-6 text-center" }, branchInfo.current, "/", branchInfo.total),
+        /* @__PURE__ */ React58.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: branchInfo.onNext,
+            disabled: branchInfo.current >= branchInfo.total,
+            className: cx(
+              "p-0.5 hover:text-white hover:bg-white/10 transition-colors",
+              "disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-silver/70"
+            ),
+            "aria-label": "Next sibling checkpoint"
+          },
+          /* @__PURE__ */ React58.createElement(ChevronRight4, { className: "w-3 h-3" })
+        )
+      )
+    );
+  }
+);
+Checkpoint.displayName = "Checkpoint";
+
+// src/components/chat/GreyedDivider.tsx
+import React59 from "react";
+import { ArrowDown } from "lucide-react";
+function pluralize(n, singular, plural) {
+  return `${n} ${n === 1 ? singular : plural}`;
+}
+function summarize(messageCount, checkpointCount) {
+  const parts = [];
+  if (messageCount > 0) {
+    parts.push(pluralize(messageCount, "message", "messages"));
+  }
+  if (checkpointCount > 0) {
+    parts.push(pluralize(checkpointCount, "checkpoint", "checkpoints"));
+  }
+  return parts.length > 0 ? parts.join(", ") : "no items";
+}
+var GreyedDivider = React59.forwardRef(
+  function GreyedDivider2({ messageCount, checkpointCount, onJumpToLatest }, ref) {
+    if (messageCount === 0 && checkpointCount === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ React59.createElement(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-label": "Start of rewound timeline",
+        className: "flex items-center gap-3 py-2 text-xs text-silver/50 select-none"
+      },
+      /* @__PURE__ */ React59.createElement("div", { className: "flex-1 h-px bg-ash/40", "aria-hidden": "true" }),
+      /* @__PURE__ */ React59.createElement("span", { className: "inline-flex items-center gap-1.5 whitespace-nowrap" }, /* @__PURE__ */ React59.createElement(ArrowDown, { className: "w-3 h-3", "aria-hidden": "true" }), "Later in this conversation \xB7 ", summarize(messageCount, checkpointCount)),
+      /* @__PURE__ */ React59.createElement("div", { className: "flex-1 h-px bg-ash/40", "aria-hidden": "true" }),
+      onJumpToLatest && /* @__PURE__ */ React59.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: onJumpToLatest,
+          className: cx(
+            "shrink-0 transition-colors",
+            "text-silver/60 hover:text-white",
+            "underline decoration-silver/30 underline-offset-4 decoration-dotted hover:decoration-silver/70"
+          )
+        },
+        "Jump to latest \u2192"
+      )
+    );
+  }
+);
+GreyedDivider.displayName = "GreyedDivider";
+
+// src/components/chat/ChatView.tsx
+var ChatView = React60.forwardRef(
+  function ChatView2({ items, latestUserMessageIndex, isStreaming, isThinking, onScroll, className, ...rest }, ref) {
+    const { containerRef, anchorRef, scrollToAnchor } = useScrollAnchor({
+      behavior: "smooth",
+      block: "start"
+    });
+    const { contentRef, spacerRef, spacerHeight } = useAdaptiveSpacer({
+      containerRef,
+      anchorRef
+    });
+    const latestUserIdx = latestUserMessageIndex ?? items.reduceRight((found, item, idx) => {
+      if (found === -1 && item.kind === "message" && item.variant === "user") {
+        return idx;
+      }
+      return found;
+    }, -1);
+    useEffect9(() => {
+      if (latestUserMessageIndex !== void 0 && latestUserMessageIndex >= 0) {
+        scrollToAnchor();
+      }
+    }, [latestUserMessageIndex, scrollToAnchor]);
+    const lastMessageIdx = items.reduceRight((found, item, idx) => {
+      return found === -1 && item.kind === "message" ? idx : found;
+    }, -1);
+    const lastMessage = lastMessageIdx >= 0 ? items[lastMessageIdx] : null;
+    const showThinking = isThinking && lastMessage?.kind === "message" && lastMessage.variant === "user";
+    return /* @__PURE__ */ React60.createElement(
+      "div",
+      {
+        ref: composeRefs(containerRef, ref),
+        onScroll,
+        className: cx(
+          "flex flex-col w-full h-full overflow-y-auto scroll-smooth",
+          "px-4 py-6 overscroll-contain",
+          className
+        ),
+        ...rest
+      },
+      /* @__PURE__ */ React60.createElement("div", { ref: contentRef, className: "relative flex flex-col gap-3" }, items.map((item, index) => {
+        const isAnchor = index === latestUserIdx;
+        const wrapperRef = isAnchor ? anchorRef : void 0;
+        const wrapperClass = isAnchor ? "scroll-mt-4" : void 0;
+        if (item.kind === "divider") {
+          const { kind: _k2, id: id2, ...dividerProps } = item;
+          return /* @__PURE__ */ React60.createElement("div", { key: id2 }, /* @__PURE__ */ React60.createElement(GreyedDivider, { ...dividerProps }));
+        }
+        if (item.kind === "checkpoint") {
+          const { kind: _k2, id: id2, ...checkpointProps } = item;
+          return /* @__PURE__ */ React60.createElement("div", { key: id2, ref: wrapperRef, className: wrapperClass }, /* @__PURE__ */ React60.createElement(Checkpoint, { ...checkpointProps }));
+        }
+        const {
+          kind: _k,
+          id,
+          variant,
+          muted,
+          className: messageClassName,
+          branchInfo,
+          actions,
+          isStreaming: nodeIsStreaming,
+          ...messageProps
+        } = item;
+        const isLastMessage = index === lastMessageIdx;
+        const showStreaming = isLastMessage && isStreaming && variant === "assistant";
+        const isMessageStreaming = showStreaming || !!nodeIsStreaming;
+        return /* @__PURE__ */ React60.createElement(
+          "div",
+          {
+            key: id,
+            ref: wrapperRef,
+            className: cx(wrapperClass, muted && "opacity-60")
+          },
+          /* @__PURE__ */ React60.createElement(
+            Message,
+            {
+              variant,
               isStreaming: isMessageStreaming,
               className: messageClassName,
               branchInfo,
@@ -4451,8 +4533,8 @@ var ChatView = React58.forwardRef(
             }
           )
         );
-      }), showThinking && /* @__PURE__ */ React58.createElement(ThinkingIndicator, { isVisible: true })),
-      /* @__PURE__ */ React58.createElement(
+      }), showThinking && /* @__PURE__ */ React60.createElement(ThinkingIndicator, { isVisible: true })),
+      /* @__PURE__ */ React60.createElement(
         "div",
         {
           ref: spacerRef,
@@ -4467,8 +4549,8 @@ var ChatView = React58.forwardRef(
 ChatView.displayName = "ChatView";
 
 // src/components/chat/ChatInput.tsx
-import React59, { useCallback as useCallback13, useEffect as useEffect10, useRef as useRef8, useState as useState13 } from "react";
-import { Paperclip, Send, Square, X as X5 } from "lucide-react";
+import React61, { useCallback as useCallback15, useEffect as useEffect10, useRef as useRef9, useState as useState14 } from "react";
+import { Paperclip, Send as Send2, Square, X as X6 } from "lucide-react";
 
 // src/components/chat/types.ts
 function isImageFile(file) {
@@ -4486,155 +4568,14 @@ function revokePreviewUrl(url) {
   }
 }
 function generateId() {
-  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-}
-function createEmptyTree() {
-  return {
-    nodes: {},
-    rootIds: [],
-    activeLeafId: null
-  };
-}
-function addMessageToTree(tree, message, parentId = null) {
-  const newNodes = { ...tree.nodes };
-  const newRootIds = [...tree.rootIds];
-  let branchIndex = 0;
-  if (parentId && newNodes[parentId]) {
-    branchIndex = newNodes[parentId].children.length;
-  } else if (!parentId) {
-    branchIndex = newRootIds.length;
-  }
-  newNodes[message.id] = {
-    ...message,
-    parentId,
-    children: [],
-    branchIndex,
-    createdAt: message.createdAt ?? Date.now()
-  };
-  if (parentId && newNodes[parentId]) {
-    newNodes[parentId] = {
-      ...newNodes[parentId],
-      children: [...newNodes[parentId].children, message.id]
-    };
-  } else {
-    newRootIds.push(message.id);
-  }
-  return {
-    nodes: newNodes,
-    rootIds: newRootIds,
-    activeLeafId: message.id
-  };
-}
-function getActivePathMessages(tree) {
-  if (!tree.activeLeafId) {
-    return [];
-  }
-  const path = [];
-  let currentId = tree.activeLeafId;
-  while (currentId) {
-    const node = tree.nodes[currentId];
-    if (!node) {
-      break;
-    }
-    path.unshift(node);
-    currentId = node.parentId;
-  }
-  return path;
-}
-function getSiblingInfo(tree, nodeId) {
-  const node = tree.nodes[nodeId];
-  if (!node) {
-    return { total: 1, current: 1 };
-  }
-  if (node.parentId) {
-    const parent = tree.nodes[node.parentId];
-    if (parent) {
-      const index = parent.children.indexOf(nodeId);
-      return {
-        total: parent.children.length,
-        current: index + 1
-      };
-    }
-  } else {
-    const index = tree.rootIds.indexOf(nodeId);
-    return {
-      total: tree.rootIds.length,
-      current: index + 1
-    };
-  }
-  return { total: 1, current: 1 };
-}
-function switchBranch(tree, nodeId, direction) {
-  const node = tree.nodes[nodeId];
-  if (!node) {
-    return tree;
-  }
-  let siblings;
-  let currentIndex;
-  if (node.parentId) {
-    const parent = tree.nodes[node.parentId];
-    if (!parent) {
-      return tree;
-    }
-    siblings = parent.children;
-    currentIndex = siblings.indexOf(nodeId);
-  } else {
-    siblings = tree.rootIds;
-    currentIndex = siblings.indexOf(nodeId);
-  }
-  if (siblings.length <= 1) {
-    return tree;
-  }
-  const newIndex = direction === "next" ? (currentIndex + 1) % siblings.length : (currentIndex - 1 + siblings.length) % siblings.length;
-  let leafId = siblings[newIndex];
-  let currentNode = tree.nodes[leafId];
-  while (currentNode && currentNode.children.length > 0) {
-    leafId = currentNode.children[0];
-    currentNode = tree.nodes[leafId];
-  }
-  return {
-    ...tree,
-    activeLeafId: leafId
-  };
-}
-function updateNodeContent(tree, nodeId, content, isStreaming) {
-  const node = tree.nodes[nodeId];
-  if (!node) {
-    return tree;
-  }
-  return {
-    ...tree,
-    nodes: {
-      ...tree.nodes,
-      [nodeId]: {
-        ...node,
-        content,
-        isStreaming: isStreaming ?? node.isStreaming
-      }
-    }
-  };
-}
-function messagesToTree(messages) {
-  let tree = createEmptyTree();
-  for (const msg of messages) {
-    const parentId = tree.activeLeafId;
-    tree = addMessageToTree(tree, {
-      id: msg.id,
-      role: msg.role,
-      content: msg.content,
-      parentId,
-      isStreaming: msg.isStreaming
-    }, parentId);
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
   }
-  return tree;
-}
-function isBranchPoint(tree, nodeId) {
-  const node = tree.nodes[nodeId];
-  return node ? node.children.length > 1 : false;
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
 }
 
 // src/components/chat/ChatInput.tsx
-var ChatInput = React59.forwardRef(
+var ChatInput = React61.forwardRef(
   ({
     position = "bottom",
     placeholder = "Send a message...",
@@ -4656,13 +4597,13 @@ var ChatInput = React59.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [value, setValue] = useState13(initialInputValue);
-    const [localAttachments, setLocalAttachments] = useState13([]);
-    const [isDragOver, setIsDragOver] = useState13(false);
-    const textareaRef = useRef8(null);
-    const fileInputRef = useRef8(null);
+    const [value, setValue] = useState14(initialInputValue);
+    const [localAttachments, setLocalAttachments] = useState14([]);
+    const [isDragOver, setIsDragOver] = useState14(false);
+    const textareaRef = useRef9(null);
+    const fileInputRef = useRef9(null);
     const attachments = controlledAttachments ?? localAttachments;
-    const setAttachments = useCallback13(
+    const setAttachments = useCallback15(
       (newAttachments) => {
         if (onAttachmentsChange) {
           if (typeof newAttachments === "function") {
@@ -4676,7 +4617,7 @@ var ChatInput = React59.forwardRef(
       },
       [attachments, onAttachmentsChange]
     );
-    const handleSubmit = useCallback13(() => {
+    const handleSubmit = useCallback15(() => {
       const trimmed = value.trim();
       if (!trimmed || disabled || isStreaming) {
         return;
@@ -4688,7 +4629,7 @@ var ChatInput = React59.forwardRef(
         textareaRef.current.style.height = "auto";
       }
     }, [value, disabled, isStreaming, onSubmit, attachments, setAttachments]);
-    const handleKeyDown = useCallback13(
+    const handleKeyDown = useCallback15(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
@@ -4697,7 +4638,7 @@ var ChatInput = React59.forwardRef(
       },
       [handleSubmit]
     );
-    const handleChange = useCallback13((e) => {
+    const handleChange = useCallback15((e) => {
       setValue(e.target.value);
       onInputChange?.(e.target.value);
       const textarea = e.target;
@@ -4709,7 +4650,7 @@ var ChatInput = React59.forwardRef(
         textareaRef.current.focus();
       }
     }, [disabled, isStreaming, autoFocus]);
-    const addFiles = useCallback13(
+    const addFiles = useCallback15(
       (files) => {
         const newAttachments = Array.from(files).map((file) => ({
           id: generateId(),
@@ -4721,7 +4662,7 @@ var ChatInput = React59.forwardRef(
       },
       [setAttachments]
     );
-    const handleFileSelect = useCallback13(
+    const handleFileSelect = useCallback15(
       (e) => {
         const files = e.target.files;
         if (files && files.length > 0) {
@@ -4731,7 +4672,7 @@ var ChatInput = React59.forwardRef(
       },
       [addFiles]
     );
-    const handleRemoveAttachment = useCallback13(
+    const handleRemoveAttachment = useCallback15(
       (id) => {
         const attachment = attachments.find((a) => a.id === id);
         if (attachment && onAttachmentRemove) {
@@ -4747,23 +4688,23 @@ var ChatInput = React59.forwardRef(
       },
       [attachments, onAttachmentRemove, setAttachments]
     );
-    const handleDragEnter = useCallback13((e) => {
+    const handleDragEnter = useCallback15((e) => {
       e.preventDefault();
       e.stopPropagation();
       setIsDragOver(true);
     }, []);
-    const handleDragLeave = useCallback13((e) => {
+    const handleDragLeave = useCallback15((e) => {
       e.preventDefault();
       e.stopPropagation();
       if (!e.currentTarget.contains(e.relatedTarget)) {
         setIsDragOver(false);
       }
     }, []);
-    const handleDragOver = useCallback13((e) => {
+    const handleDragOver = useCallback15((e) => {
       e.preventDefault();
       e.stopPropagation();
     }, []);
-    const handleDrop = useCallback13(
+    const handleDrop = useCallback15(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -4779,7 +4720,7 @@ var ChatInput = React59.forwardRef(
     const hasAttachments = attachments.length > 0;
     const isUploading = attachments.some((a) => a.status === "uploading");
     const canSubmit = value.trim() && !disabled && !isStreaming && !isUploading;
-    return /* @__PURE__ */ React59.createElement(
+    return /* @__PURE__ */ React61.createElement(
       "div",
       {
         ref,
@@ -4791,12 +4732,12 @@ var ChatInput = React59.forwardRef(
         ),
         ...rest
       },
-      isCentered && helperText && /* @__PURE__ */ React59.createElement("p", { className: "text-silver text-sm mb-4 text-center" }, helperText),
-      notice && /* @__PURE__ */ React59.createElement("div", { className: cx(
+      isCentered && helperText && /* @__PURE__ */ React61.createElement("p", { className: "text-silver text-sm mb-4 text-center" }, helperText),
+      notice && /* @__PURE__ */ React61.createElement("div", { className: cx(
         "w-full flex items-start gap-2 px-3 py-2 mb-1 text-xs",
         isCentered && "max-w-lg",
         notice.variant === "warning" ? "bg-gold/5 border border-gold/20 text-gold/80" : "bg-error/10 border border-error/30 text-error"
-      ) }, /* @__PURE__ */ React59.createElement("span", { className: "flex-1" }, notice.content), (notice.dismissible ?? notice.variant === "warning") && notice.onDismiss && /* @__PURE__ */ React59.createElement(
+      ) }, /* @__PURE__ */ React61.createElement("span", { className: "flex-1" }, notice.content), (notice.dismissible ?? notice.variant === "warning") && notice.onDismiss && /* @__PURE__ */ React61.createElement(
         "button",
         {
           type: "button",
@@ -4807,9 +4748,9 @@ var ChatInput = React59.forwardRef(
             notice.variant === "warning" ? "text-gold" : "text-error"
           )
         },
-        /* @__PURE__ */ React59.createElement(X5, { className: "w-3 h-3" })
+        /* @__PURE__ */ React61.createElement(X6, { className: "w-3 h-3" })
       )),
-      /* @__PURE__ */ React59.createElement(
+      /* @__PURE__ */ React61.createElement(
         "div",
         {
           className: cx(
@@ -4824,7 +4765,7 @@ var ChatInput = React59.forwardRef(
           onDragOver: showAttachmentButton ? handleDragOver : void 0,
           onDrop: showAttachmentButton ? handleDrop : void 0
         },
-        hasAttachments && /* @__PURE__ */ React59.createElement("div", { className: "px-3 pt-3 pb-1" }, /* @__PURE__ */ React59.createElement(
+        hasAttachments && /* @__PURE__ */ React61.createElement("div", { className: "px-3 pt-3 pb-1" }, /* @__PURE__ */ React61.createElement(
           AttachmentPreview,
           {
             attachments,
@@ -4832,14 +4773,14 @@ var ChatInput = React59.forwardRef(
             removable: !isStreaming
           }
         )),
-        isDragOver && /* @__PURE__ */ React59.createElement(
+        isDragOver && /* @__PURE__ */ React61.createElement(
           "div",
           {
             className: "absolute inset-0 bg-gold/10 flex items-center justify-center z-10 pointer-events-none"
           },
-          /* @__PURE__ */ React59.createElement("span", { className: "text-gold text-sm font-medium" }, "Drop files here")
+          /* @__PURE__ */ React61.createElement("span", { className: "text-gold text-sm font-medium" }, "Drop files here")
         ),
-        /* @__PURE__ */ React59.createElement("div", { className: "flex items-end" }, showAttachmentButton && /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(
+        /* @__PURE__ */ React61.createElement("div", { className: "flex items-end" }, showAttachmentButton && /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(
           "button",
           {
             type: "button",
@@ -4851,8 +4792,8 @@ var ChatInput = React59.forwardRef(
             ),
             "aria-label": "Attach file"
           },
-          /* @__PURE__ */ React59.createElement(Paperclip, { className: "w-5 h-5" })
-        ), /* @__PURE__ */ React59.createElement(
+          /* @__PURE__ */ React61.createElement(Paperclip, { className: "w-5 h-5" })
+        ), /* @__PURE__ */ React61.createElement(
           "input",
           {
             ref: fileInputRef,
@@ -4863,7 +4804,7 @@ var ChatInput = React59.forwardRef(
             className: "hidden",
             "aria-hidden": "true"
           }
-        )), /* @__PURE__ */ React59.createElement(
+        )), /* @__PURE__ */ React61.createElement(
           "textarea",
           {
             ref: textareaRef,
@@ -4881,7 +4822,7 @@ var ChatInput = React59.forwardRef(
             ),
             style: { maxHeight: 200 }
           }
-        ), isStreaming ? /* @__PURE__ */ React59.createElement(
+        ), isStreaming ? /* @__PURE__ */ React61.createElement(
           "button",
           {
             type: "button",
@@ -4892,8 +4833,8 @@ var ChatInput = React59.forwardRef(
             ),
             "aria-label": "Stop generation"
           },
-          /* @__PURE__ */ React59.createElement(Square, { className: "w-5 h-5 fill-current" })
-        ) : /* @__PURE__ */ React59.createElement(
+          /* @__PURE__ */ React61.createElement(Square, { className: "w-5 h-5 fill-current" })
+        ) : /* @__PURE__ */ React61.createElement(
           "button",
           {
             type: "button",
@@ -4906,7 +4847,7 @@ var ChatInput = React59.forwardRef(
             ),
             "aria-label": "Send message"
           },
-          /* @__PURE__ */ React59.createElement(Send, { className: "w-5 h-5" })
+          /* @__PURE__ */ React61.createElement(Send2, { className: "w-5 h-5" })
         ))
       )
     );
@@ -4915,13 +4856,14 @@ var ChatInput = React59.forwardRef(
 ChatInput.displayName = "ChatInput";
 
 // src/components/chat/ArtifactsPanel.tsx
-import React69, { useCallback as useCallback15, useEffect as useEffect12, useRef as useRef10, useState as useState16 } from "react";
+import React71, { useCallback as useCallback17, useEffect as useEffect12, useRef as useRef11, useState as useState17 } from "react";
+import { Image } from "lucide-react";
 
 // src/components/ArtifactCard.tsx
-import React66 from "react";
+import React68 from "react";
 
 // src/components/ImageCard.tsx
-import React60 from "react";
+import React62 from "react";
 var ASPECT_RATIO_PRESETS = {
   landscape: "3 / 2",
   portrait: "2 / 3",
@@ -4933,7 +4875,7 @@ function resolveAspectRatio(ratio) {
   }
   return ratio.replace("/", " / ");
 }
-var ImageCard = React60.forwardRef(
+var ImageCard = React62.forwardRef(
   ({
     src,
     alt = "",
@@ -4949,7 +4891,7 @@ var ImageCard = React60.forwardRef(
     loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React60.createElement(
+    return /* @__PURE__ */ React62.createElement(
       Card,
       {
         ref,
@@ -4957,13 +4899,13 @@ var ImageCard = React60.forwardRef(
         loading,
         ...props
       },
-      /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React62.createElement(
         Card.Media,
         {
           className: mediaClassName,
           style: { aspectRatio: resolveAspectRatio(aspectRatio) }
         },
-        /* @__PURE__ */ React60.createElement(React60.Fragment, null, src && /* @__PURE__ */ React60.createElement(
+        /* @__PURE__ */ React62.createElement(React62.Fragment, null, src && /* @__PURE__ */ React62.createElement(
           "img",
           {
             src,
@@ -4973,7 +4915,7 @@ var ImageCard = React60.forwardRef(
               objectFit === "cover" ? "object-cover" : "object-contain"
             )
           }
-        ), overlay && /* @__PURE__ */ React60.createElement(
+        ), overlay && /* @__PURE__ */ React62.createElement(
           "div",
           {
             className: "absolute inset-0 bg-obsidian/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center"
@@ -4981,7 +4923,7 @@ var ImageCard = React60.forwardRef(
           overlay
         ))
       ),
-      /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React62.createElement(
         Card.Header,
         {
           title,
@@ -4989,14 +4931,14 @@ var ImageCard = React60.forwardRef(
           className: contentClassName
         }
       ),
-      children && /* @__PURE__ */ React60.createElement(Card.Body, { className: contentClassName }, children)
+      children && /* @__PURE__ */ React62.createElement(Card.Body, { className: contentClassName }, children)
     );
   }
 );
 ImageCard.displayName = "ImageCard";
 
 // src/components/VideoCard.tsx
-import React61 from "react";
+import React63 from "react";
 import ReactPlayer from "react-player";
 var ASPECT_RATIO_PRESETS2 = {
   video: "16 / 9",
@@ -5009,7 +4951,7 @@ function resolveAspectRatio2(ratio) {
   }
   return ratio.replace("/", " / ");
 }
-var VideoCard = React61.forwardRef(
+var VideoCard = React63.forwardRef(
   ({
     src,
     title,
@@ -5029,7 +4971,7 @@ var VideoCard = React61.forwardRef(
     loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React61.createElement(
+    return /* @__PURE__ */ React63.createElement(
       Card,
       {
         ref,
@@ -5037,13 +4979,13 @@ var VideoCard = React61.forwardRef(
         loading,
         ...props
       },
-      /* @__PURE__ */ React61.createElement(
+      /* @__PURE__ */ React63.createElement(
         Card.Media,
         {
           className: mediaClassName,
           style: { aspectRatio: resolveAspectRatio2(aspectRatio) }
         },
-        src && /* @__PURE__ */ React61.createElement(
+        src && /* @__PURE__ */ React63.createElement(
           ReactPlayer,
           {
             src,
@@ -5060,7 +5002,7 @@ var VideoCard = React61.forwardRef(
           }
         )
       ),
-      /* @__PURE__ */ React61.createElement(
+      /* @__PURE__ */ React63.createElement(
         Card.Header,
         {
           title,
@@ -5068,17 +5010,17 @@ var VideoCard = React61.forwardRef(
           className: contentClassName
         }
       ),
-      children && /* @__PURE__ */ React61.createElement(Card.Body, { className: contentClassName }, children)
+      children && /* @__PURE__ */ React63.createElement(Card.Body, { className: contentClassName }, children)
     );
   }
 );
 VideoCard.displayName = "VideoCard";
 
 // src/components/AudioCard.tsx
-import React62 from "react";
+import React64 from "react";
 import ReactPlayer2 from "react-player";
 import { Music } from "lucide-react";
-var AudioCard = React62.forwardRef(
+var AudioCard = React64.forwardRef(
   ({
     src,
     title,
@@ -5097,7 +5039,7 @@ var AudioCard = React62.forwardRef(
     loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React62.createElement(
+    return /* @__PURE__ */ React64.createElement(
       Card,
       {
         ref,
@@ -5105,10 +5047,10 @@ var AudioCard = React62.forwardRef(
         loading,
         ...props
       },
-      /* @__PURE__ */ React62.createElement(Card.Media, { className: cx(
+      /* @__PURE__ */ React64.createElement(Card.Media, { className: cx(
         "bg-obsidian py-8 flex flex-col items-center justify-center",
         mediaClassName
-      ) }, /* @__PURE__ */ React62.createElement("div", { className: "mb-4 text-gold" }, /* @__PURE__ */ React62.createElement(Music, { size: 48 })), src && /* @__PURE__ */ React62.createElement("div", { className: "w-full px-4" }, /* @__PURE__ */ React62.createElement(
+      ) }, /* @__PURE__ */ React64.createElement("div", { className: "mb-4 text-gold" }, /* @__PURE__ */ React64.createElement(Music, { size: 48 })), src && /* @__PURE__ */ React64.createElement("div", { className: "w-full px-4" }, /* @__PURE__ */ React64.createElement(
         ReactPlayer2,
         {
           src,
@@ -5119,19 +5061,11 @@ var AudioCard = React62.forwardRef(
           loop,
           width: "100%",
           height,
-          style: { backgroundColor: "transparent" },
-          config: {
-            file: {
-              forceAudio: true,
-              attributes: {
-                style: { width: "100%", height }
-              }
-            }
-          },
+          style: { backgroundColor: "transparent", width: "100%", height },
           ...playerProps
         }
       ))),
-      /* @__PURE__ */ React62.createElement(
+      /* @__PURE__ */ React64.createElement(
         Card.Header,
         {
           title,
@@ -5139,16 +5073,16 @@ var AudioCard = React62.forwardRef(
           className: contentClassName
         }
       ),
-      children && /* @__PURE__ */ React62.createElement(Card.Body, { className: contentClassName }, children)
+      children && /* @__PURE__ */ React64.createElement(Card.Body, { className: contentClassName }, children)
     );
   }
 );
 AudioCard.displayName = "AudioCard";
 
 // src/components/PdfCard.tsx
-import React63 from "react";
+import React65 from "react";
 import { FileText as FileText2 } from "lucide-react";
-var PdfCard = React63.forwardRef(
+var PdfCard = React65.forwardRef(
   ({
     src,
     title,
@@ -5161,7 +5095,7 @@ var PdfCard = React63.forwardRef(
     loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React63.createElement(
+    return /* @__PURE__ */ React65.createElement(
       Card,
       {
         ref,
@@ -5169,13 +5103,13 @@ var PdfCard = React63.forwardRef(
         loading,
         ...props
       },
-      /* @__PURE__ */ React63.createElement(
+      /* @__PURE__ */ React65.createElement(
         Card.Media,
         {
           className: cx("bg-obsidian", mediaClassName),
           style: { height }
         },
-        src && /* @__PURE__ */ React63.createElement(
+        src && /* @__PURE__ */ React65.createElement(
           "iframe",
           {
             src: `${src}#view=FitH`,
@@ -5184,23 +5118,23 @@ var PdfCard = React63.forwardRef(
           }
         )
       ),
-      /* @__PURE__ */ React63.createElement(
+      /* @__PURE__ */ React65.createElement(
         Card.Header,
         {
           title,
           subtitle,
           className: contentClassName,
-          action: /* @__PURE__ */ React63.createElement("div", { className: "p-2 bg-ash/20 text-gold shrink-0" }, /* @__PURE__ */ React63.createElement(FileText2, { size: 20 }))
+          action: /* @__PURE__ */ React65.createElement("div", { className: "p-2 bg-ash/20 text-gold shrink-0" }, /* @__PURE__ */ React65.createElement(FileText2, { size: 20 }))
         }
       ),
-      children && /* @__PURE__ */ React63.createElement(Card.Body, { className: contentClassName }, children)
+      children && /* @__PURE__ */ React65.createElement(Card.Body, { className: contentClassName }, children)
     );
   }
 );
 PdfCard.displayName = "PdfCard";
 
 // src/components/ScriptCard.tsx
-import React64 from "react";
+import React66 from "react";
 var SCRIPT_ELEMENT_TYPES = {
   SCENE_HEADING: "scene-heading",
   ACTION: "action",
@@ -5214,28 +5148,28 @@ var SCRIPT_ELEMENT_TYPES = {
 function ScriptElementRenderer({ element }) {
   switch (element.type) {
     case "scene-heading":
-      return /* @__PURE__ */ React64.createElement("p", { className: "mt-4 mb-2 font-bold uppercase text-gold text-xs tracking-wide" }, element.content);
+      return /* @__PURE__ */ React66.createElement("p", { className: "mt-4 mb-2 font-bold uppercase text-gold text-xs tracking-wide" }, element.content);
     case "action":
-      return /* @__PURE__ */ React64.createElement("p", { className: "my-2 text-silver text-xs leading-relaxed" }, element.content);
+      return /* @__PURE__ */ React66.createElement("p", { className: "my-2 text-silver text-xs leading-relaxed" }, element.content);
     case "character":
-      return /* @__PURE__ */ React64.createElement("p", { className: "mt-4 mb-0.5 ml-8 font-bold text-white text-xs uppercase tracking-wide" }, element.content);
+      return /* @__PURE__ */ React66.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__ */ React64.createElement("p", { className: "ml-6 text-silver/70 text-xs italic" }, "(", element.content, ")");
+      return /* @__PURE__ */ React66.createElement("p", { className: "ml-6 text-silver/70 text-xs italic" }, "(", element.content, ")");
     case "dialogue":
-      return /* @__PURE__ */ React64.createElement("p", { className: "ml-4 mr-8 text-silver text-xs leading-relaxed" }, element.content);
+      return /* @__PURE__ */ React66.createElement("p", { className: "ml-4 mr-8 text-silver text-xs leading-relaxed" }, element.content);
     case "transition":
-      return /* @__PURE__ */ React64.createElement("p", { className: "mt-4 mb-2 text-right font-bold uppercase text-gold/80 text-xs tracking-wide" }, element.content);
+      return /* @__PURE__ */ React66.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__ */ React64.createElement("p", { className: "mt-6 mb-2 text-center font-bold text-gold text-sm" }, element.content);
+      return /* @__PURE__ */ React66.createElement("p", { className: "mt-6 mb-2 text-center font-bold text-gold text-sm" }, element.content);
     case "subtitle":
-      return /* @__PURE__ */ React64.createElement("p", { className: "text-center italic text-gold/70 text-xs" }, element.content);
+      return /* @__PURE__ */ React66.createElement("p", { className: "text-center italic text-gold/70 text-xs" }, element.content);
     default:
       return null;
   }
 }
-var ScriptCard = React64.forwardRef(
+var ScriptCard = React66.forwardRef(
   ({ title, subtitle, elements, maxHeight = "16rem", className, style, loading, ...rest }, ref) => {
-    return /* @__PURE__ */ React64.createElement(
+    return /* @__PURE__ */ React66.createElement(
       Card,
       {
         ref,
@@ -5243,20 +5177,20 @@ var ScriptCard = React64.forwardRef(
         loading,
         ...rest
       },
-      /* @__PURE__ */ React64.createElement(
+      /* @__PURE__ */ React66.createElement(
         Card.Header,
         {
           title,
           subtitle
         }
       ),
-      /* @__PURE__ */ React64.createElement(
+      /* @__PURE__ */ React66.createElement(
         Card.Body,
         {
           className: "font-mono overflow-y-auto",
           style: { maxHeight, ...style }
         },
-        elements.map((element, index) => /* @__PURE__ */ React64.createElement(ScriptElementRenderer, { key: index, element }))
+        elements.map((element, index) => /* @__PURE__ */ React66.createElement(ScriptElementRenderer, { key: index, element }))
       )
     );
   }
@@ -5264,8 +5198,8 @@ var ScriptCard = React64.forwardRef(
 ScriptCard.displayName = "ScriptCard";
 
 // src/components/TextCard.tsx
-import React65 from "react";
-var TextCard = React65.forwardRef(
+import React67 from "react";
+var TextCard = React67.forwardRef(
   ({
     content,
     title,
@@ -5277,7 +5211,7 @@ var TextCard = React65.forwardRef(
     loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React65.createElement(
+    return /* @__PURE__ */ React67.createElement(
       Card,
       {
         ref,
@@ -5285,20 +5219,20 @@ var TextCard = React65.forwardRef(
         loading,
         ...props
       },
-      /* @__PURE__ */ React65.createElement(
+      /* @__PURE__ */ React67.createElement(
         Card.Header,
         {
           title,
           subtitle
         }
       ),
-      /* @__PURE__ */ React65.createElement(
+      /* @__PURE__ */ React67.createElement(
         Card.Body,
         {
           className: cx("overflow-y-auto", contentClassName),
           style: { maxHeight }
         },
-        /* @__PURE__ */ React65.createElement(
+        /* @__PURE__ */ React67.createElement(
           MarkdownContent,
           {
             content,
@@ -5336,7 +5270,7 @@ var ARTIFACT_TYPES = {
   SCRIPT: "SCRIPT",
   PDF: "PDF"
 };
-var ArtifactCard = React66.forwardRef(
+var ArtifactCard = React68.forwardRef(
   ({ artifact, onExpand, loading, className, ...props }, ref) => {
     const derivedLoading = deriveCardSlotLoading(artifact);
     const commonProps = {
@@ -5354,7 +5288,7 @@ var ArtifactCard = React66.forwardRef(
     const renderContent = () => {
       switch (artifact.type) {
         case "IMAGE":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             ImageCard,
             {
               ...commonProps,
@@ -5364,7 +5298,7 @@ var ArtifactCard = React66.forwardRef(
             }
           );
         case "VIDEO":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             VideoCard,
             {
               ...commonProps,
@@ -5374,7 +5308,7 @@ var ArtifactCard = React66.forwardRef(
             }
           );
         case "AUDIO":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             AudioCard,
             {
               ...commonProps,
@@ -5383,7 +5317,7 @@ var ArtifactCard = React66.forwardRef(
             }
           );
         case "PDF":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             PdfCard,
             {
               ...commonProps,
@@ -5391,7 +5325,7 @@ var ArtifactCard = React66.forwardRef(
             }
           );
         case "SCRIPT":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             ScriptCard,
             {
               ...commonProps,
@@ -5400,7 +5334,7 @@ var ArtifactCard = React66.forwardRef(
             }
           );
         case "TEXT":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             TextCard,
             {
               ...commonProps,
@@ -5411,12 +5345,14 @@ var ArtifactCard = React66.forwardRef(
               )
             }
           );
-        default:
-          return null;
+        default: {
+          const _exhaustive = artifact.type;
+          return _exhaustive;
+        }
       }
     };
     const isCardExpandable = !!onExpand && (artifact.type === "IMAGE" || artifact.type === "PDF" || artifact.type === "SCRIPT" || artifact.type === "TEXT");
-    return /* @__PURE__ */ React66.createElement(
+    return /* @__PURE__ */ React68.createElement(
       "div",
       {
         ref,
@@ -5429,7 +5365,7 @@ var ArtifactCard = React66.forwardRef(
         onClick: isCardExpandable ? handleExpand : void 0,
         ...props
       },
-      onExpand && /* @__PURE__ */ React66.createElement(
+      onExpand && /* @__PURE__ */ React68.createElement(
         "button",
         {
           onClick: handleExpand,
@@ -5440,7 +5376,7 @@ var ArtifactCard = React66.forwardRef(
           ),
           "aria-label": "Expand artifact"
         },
-        /* @__PURE__ */ React66.createElement(ExpandIcon, { className: "w-4 h-4" })
+        /* @__PURE__ */ React68.createElement(ExpandIcon, { className: "w-4 h-4" })
       ),
       renderContent()
     );
@@ -5449,16 +5385,16 @@ var ArtifactCard = React66.forwardRef(
 ArtifactCard.displayName = "ArtifactCard";
 
 // src/components/ArtifactGroup.tsx
-import React67, { useEffect as useEffect11, useRef as useRef9, useState as useState14 } from "react";
+import React69, { useEffect as useEffect11, useRef as useRef10, useState as useState15 } from "react";
 var LAYER_OFFSET = "8px";
 var LAYER_OFFSET_2X = "16px";
-var ArtifactGroup = React67.forwardRef(
+var ArtifactGroup = React69.forwardRef(
   ({ node, onClick, className, ...props }, ref) => {
     const children = node.children;
     const count = children.length;
     const frontChild = children[0];
-    const prevCountRef = useRef9(count);
-    const [badgePing, setBadgePing] = useState14(false);
+    const prevCountRef = useRef10(count);
+    const [badgePing, setBadgePing] = useState15(false);
     useEffect11(() => {
       if (count !== prevCountRef.current) {
         prevCountRef.current = count;
@@ -5474,21 +5410,21 @@ var ArtifactGroup = React67.forwardRef(
     };
     const renderFrontContent = () => {
       if (!frontChild) {
-        return /* @__PURE__ */ React67.createElement("div", { className: "w-full aspect-video bg-graphite border border-ash/40 flex items-center justify-center" }, /* @__PURE__ */ React67.createElement("span", { className: "text-silver text-sm" }, "Empty group"));
+        return /* @__PURE__ */ React69.createElement("div", { className: "w-full aspect-video bg-graphite border border-ash/40 flex items-center justify-center" }, /* @__PURE__ */ React69.createElement("span", { className: "text-silver text-sm" }, "Empty group"));
       }
       if (frontChild.type === "ARTIFACT" && frontChild.artifact) {
-        return /* @__PURE__ */ React67.createElement(ArtifactCard, { artifact: frontChild.artifact, className: "w-full" });
+        return /* @__PURE__ */ React69.createElement(ArtifactCard, { artifact: frontChild.artifact, className: "w-full" });
       }
-      return /* @__PURE__ */ React67.createElement(
+      return /* @__PURE__ */ React69.createElement(
         "div",
         {
           className: "w-full aspect-video bg-graphite border border-gold/30 flex flex-col items-center justify-center gap-2 p-4"
         },
-        /* @__PURE__ */ React67.createElement("span", { className: "text-sm text-silver uppercase tracking-wider" }, frontChild.type === "GROUP" ? "Group" : "Variants"),
-        /* @__PURE__ */ React67.createElement("span", { className: "text-white font-semibold" }, frontChild.label)
+        /* @__PURE__ */ React69.createElement("span", { className: "text-sm text-silver uppercase tracking-wider" }, frontChild.type === "GROUP" ? "Group" : "Variants"),
+        /* @__PURE__ */ React69.createElement("span", { className: "text-white font-semibold" }, frontChild.label)
       );
     };
-    return /* @__PURE__ */ React67.createElement(
+    return /* @__PURE__ */ React69.createElement(
       "div",
       {
         ref,
@@ -5508,21 +5444,21 @@ var ArtifactGroup = React67.forwardRef(
         "aria-label": `${node.label} \u2014 ${count} items`,
         ...props
       },
-      /* @__PURE__ */ React67.createElement(Card, { noPadding: true, className: "p-5" }, /* @__PURE__ */ React67.createElement("h3", { className: "text-lg font-semibold text-white m-0 mb-4" }, node.label), /* @__PURE__ */ React67.createElement("div", { style: { paddingRight: LAYER_OFFSET_2X, paddingBottom: LAYER_OFFSET_2X } }, /* @__PURE__ */ React67.createElement("div", { className: "relative" }, /* @__PURE__ */ React67.createElement(
+      /* @__PURE__ */ React69.createElement(Card, { noPadding: true, className: "p-5" }, /* @__PURE__ */ React69.createElement("h3", { className: "text-lg font-semibold text-white m-0 mb-4" }, node.label), /* @__PURE__ */ React69.createElement("div", { style: { paddingRight: LAYER_OFFSET_2X, paddingBottom: LAYER_OFFSET_2X } }, /* @__PURE__ */ React69.createElement("div", { className: "relative" }, /* @__PURE__ */ React69.createElement(
         "div",
         {
           className: "absolute inset-0 bg-charcoal border border-ash/30 pointer-events-none",
           style: { transform: `translate(${LAYER_OFFSET_2X}, ${LAYER_OFFSET_2X})` },
           "aria-hidden": "true"
         }
-      ), /* @__PURE__ */ React67.createElement(
+      ), /* @__PURE__ */ React69.createElement(
         "div",
         {
           className: "absolute inset-0 bg-charcoal border border-ash/40 pointer-events-none",
           style: { transform: `translate(${LAYER_OFFSET}, ${LAYER_OFFSET})` },
           "aria-hidden": "true"
         }
-      ), /* @__PURE__ */ React67.createElement("div", { className: "relative transition-transform duration-200 group-hover:-translate-y-0.5" }, renderFrontContent()), /* @__PURE__ */ React67.createElement(
+      ), /* @__PURE__ */ React69.createElement("div", { className: "relative transition-transform duration-200 group-hover:-translate-y-0.5" }, renderFrontContent()), /* @__PURE__ */ React69.createElement(
         "div",
         {
           className: "absolute -top-2 -right-2 z-10 min-w-6 h-6 px-1.5 flex items-center justify-center bg-gold text-obsidian text-xs font-bold",
@@ -5536,13 +5472,13 @@ var ArtifactGroup = React67.forwardRef(
 ArtifactGroup.displayName = "ArtifactGroup";
 
 // src/components/ArtifactVariantStack.tsx
-import React68 from "react";
-var ArtifactVariantStack = React68.forwardRef(
+import React70 from "react";
+var ArtifactVariantStack = React70.forwardRef(
   ({ node, onExpandArtifact, onGroupClick, className, ...props }, ref) => {
     const children = node.children;
     const renderChild = (child) => {
       if (child.type === "ARTIFACT" && child.artifact) {
-        return /* @__PURE__ */ React68.createElement("div", { key: child.id, className: "flex-1 min-w-0" }, /* @__PURE__ */ React68.createElement(
+        return /* @__PURE__ */ React70.createElement("div", { key: child.id, className: "flex-1 min-w-0" }, /* @__PURE__ */ React70.createElement(
           ArtifactCard,
           {
             artifact: child.artifact,
@@ -5552,18 +5488,18 @@ var ArtifactVariantStack = React68.forwardRef(
         ));
       }
       if (child.type === "GROUP") {
-        return /* @__PURE__ */ React68.createElement("div", { key: child.id, className: "flex-1 min-w-0" }, /* @__PURE__ */ React68.createElement(ArtifactGroup, { node: child, onClick: onGroupClick }));
+        return /* @__PURE__ */ React70.createElement("div", { key: child.id, className: "flex-1 min-w-0" }, /* @__PURE__ */ React70.createElement(ArtifactGroup, { node: child, onClick: onGroupClick }));
       }
-      return /* @__PURE__ */ React68.createElement("div", { key: child.id, className: "flex-1 min-w-0" }, /* @__PURE__ */ React68.createElement(
+      return /* @__PURE__ */ React70.createElement("div", { key: child.id, className: "flex-1 min-w-0" }, /* @__PURE__ */ React70.createElement(
         "div",
         {
           className: "aspect-video bg-graphite border border-gold/30 flex flex-col items-center justify-center gap-2 p-4"
         },
-        /* @__PURE__ */ React68.createElement("span", { className: "text-xs text-silver uppercase tracking-wider" }, "Variants"),
-        /* @__PURE__ */ React68.createElement("span", { className: "text-sm text-white font-semibold truncate max-w-full" }, child.label)
+        /* @__PURE__ */ React70.createElement("span", { className: "text-xs text-silver uppercase tracking-wider" }, "Variants"),
+        /* @__PURE__ */ React70.createElement("span", { className: "text-sm text-white font-semibold truncate max-w-full" }, child.label)
       ));
     };
-    return /* @__PURE__ */ React68.createElement(
+    return /* @__PURE__ */ React70.createElement(
       Card,
       {
         ref,
@@ -5571,17 +5507,17 @@ var ArtifactVariantStack = React68.forwardRef(
         className: cx("w-full p-5", className),
         ...props
       },
-      /* @__PURE__ */ React68.createElement("h3", { className: "text-lg font-semibold text-white m-0 mb-4" }, node.label),
-      /* @__PURE__ */ React68.createElement("div", { className: "flex gap-3" }, children.map(renderChild))
+      /* @__PURE__ */ React70.createElement("h3", { className: "text-lg font-semibold text-white m-0 mb-4" }, node.label),
+      /* @__PURE__ */ React70.createElement("div", { className: "flex gap-3" }, children.map(renderChild))
     );
   }
 );
 ArtifactVariantStack.displayName = "ArtifactVariantStack";
 
 // src/components/chat/hooks/useArtifactTreeNavigation.ts
-import { useCallback as useCallback14, useMemo as useMemo2, useState as useState15 } from "react";
+import { useCallback as useCallback16, useMemo as useMemo2, useState as useState16 } from "react";
 function useArtifactTreeNavigation(rootNodes) {
-  const [stack, setStack] = useState15([]);
+  const [stack, setStack] = useState16([]);
   const currentNodes = useMemo2(() => {
     if (stack.length === 0) return rootNodes;
     return stack[stack.length - 1].children;
@@ -5594,13 +5530,13 @@ function useArtifactTreeNavigation(rootNodes) {
     return entries;
   }, [stack]);
   const isAtRoot = stack.length === 0;
-  const navigateInto = useCallback14((node) => {
+  const navigateInto = useCallback16((node) => {
     setStack((prev) => [...prev, node]);
   }, []);
-  const navigateTo = useCallback14((index) => {
+  const navigateTo = useCallback16((index) => {
     setStack((prev) => prev.slice(0, index));
   }, []);
-  const navigateBack = useCallback14(() => {
+  const navigateBack = useCallback16(() => {
     setStack((prev) => prev.slice(0, -1));
   }, []);
   return {
@@ -5619,55 +5555,47 @@ function ArtifactModal({
   artifact,
   onClose
 }) {
-  useEffect12(() => {
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
-  const handleBackdropClick = useCallback15((e) => {
+  useEscapeKey(onClose);
+  const handleBackdropClick = useCallback17((e) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   }, [onClose]);
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React71.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__ */ React69.createElement(
+    /* @__PURE__ */ React71.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__ */ React69.createElement(
+      /* @__PURE__ */ React71.createElement(
         "div",
         {
           className: "flex items-center justify-between p-4 border-b border-ash/40 shrink-0"
         },
-        /* @__PURE__ */ React69.createElement("div", null, artifact.title && /* @__PURE__ */ React69.createElement("h3", { className: "text-sm font-semibold text-white" }, artifact.title), artifact.subtitle && /* @__PURE__ */ React69.createElement("p", { className: "text-xs text-silver" }, artifact.subtitle)),
-        /* @__PURE__ */ React69.createElement(
+        /* @__PURE__ */ React71.createElement("div", null, artifact.title && /* @__PURE__ */ React71.createElement("h3", { className: "text-sm font-semibold text-white" }, artifact.title), artifact.subtitle && /* @__PURE__ */ React71.createElement("p", { className: "text-xs text-silver" }, artifact.subtitle)),
+        /* @__PURE__ */ React71.createElement(
           "button",
           {
             onClick: onClose,
             className: "p-2 text-silver hover:text-white hover:bg-ash/20 transition-colors",
             "aria-label": "Close modal"
           },
-          /* @__PURE__ */ React69.createElement(CloseIcon, { className: "w-5 h-5" })
+          /* @__PURE__ */ React71.createElement(CloseIcon, { className: "w-5 h-5" })
         )
       ),
-      /* @__PURE__ */ React69.createElement("div", { className: "flex-1 overflow-auto p-4" }, artifact.type === "IMAGE" && /* @__PURE__ */ React69.createElement(
+      /* @__PURE__ */ React71.createElement("div", { className: "flex-1 overflow-auto p-4" }, artifact.type === "IMAGE" && /* @__PURE__ */ React71.createElement(
         "img",
         {
           src: artifact.url,
           alt: artifact.alt || "Artifact image",
           className: "max-w-full max-h-full object-contain mx-auto"
         }
-      ), artifact.type === "VIDEO" && /* @__PURE__ */ React69.createElement(
+      ), artifact.type === "VIDEO" && /* @__PURE__ */ React71.createElement(
         VideoCard,
         {
           src: artifact.url || "",
@@ -5675,20 +5603,20 @@ function ArtifactModal({
           controls: true,
           className: "max-w-full max-h-full mx-auto"
         }
-      ), artifact.type === "AUDIO" && /* @__PURE__ */ React69.createElement(
+      ), artifact.type === "AUDIO" && /* @__PURE__ */ React71.createElement(
         AudioCard,
         {
           src: artifact.url || "",
           controls: true,
           className: "max-w-xl mx-auto"
         }
-      ), artifact.type === "PDF" && /* @__PURE__ */ React69.createElement(
+      ), artifact.type === "PDF" && /* @__PURE__ */ React71.createElement(
         PdfCard,
         {
           src: artifact.url || "",
           className: "h-full border-0"
         }
-      ), artifact.type === "TEXT" && /* @__PURE__ */ React69.createElement(
+      ), artifact.type === "TEXT" && /* @__PURE__ */ React71.createElement(
         MarkdownContent,
         {
           content: artifact.inlineContent || "",
@@ -5698,7 +5626,7 @@ function ArtifactModal({
             artifact.mimeType === "text/plain" && "whitespace-pre-wrap"
           )
         }
-      ), artifact.type === "SCRIPT" && artifact.scriptElements && /* @__PURE__ */ React69.createElement(
+      ), artifact.type === "SCRIPT" && artifact.scriptElements && /* @__PURE__ */ React71.createElement(
         ScriptCard,
         {
           elements: artifact.scriptElements,
@@ -5716,7 +5644,7 @@ function NodeRenderer({
   onGroupClick
 }) {
   if (node.type === "ARTIFACT" && node.artifact) {
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React71.createElement(
       ArtifactCard,
       {
         artifact: node.artifact,
@@ -5726,10 +5654,10 @@ function NodeRenderer({
     );
   }
   if (node.type === "GROUP") {
-    return /* @__PURE__ */ React69.createElement(ArtifactGroup, { node, onClick: onGroupClick });
+    return /* @__PURE__ */ React71.createElement(ArtifactGroup, { node, onClick: onGroupClick });
   }
   if (node.type === "VARIANT_SET") {
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React71.createElement(
       ArtifactVariantStack,
       {
         node,
@@ -5740,32 +5668,32 @@ function NodeRenderer({
   }
   return null;
 }
-var ArtifactsPanel = React69.forwardRef(
+var ArtifactsPanel = React71.forwardRef(
   ({
     nodes,
     loading,
     className,
     ...rest
   }, ref) => {
-    const [expandedArtifact, setExpandedArtifact] = useState16(null);
-    const [zoomIndex, setZoomIndex] = useState16(ZOOM_LEVELS.length - 1);
+    const [expandedArtifact, setExpandedArtifact] = useState17(null);
+    const [zoomIndex, setZoomIndex] = useState17(ZOOM_LEVELS.length - 1);
     const treeNav = useArtifactTreeNavigation(nodes || []);
     const hasNodes = !!nodes && nodes.length > 0;
-    const handleExpandArtifact = useCallback15((artifact) => {
+    const handleExpandArtifact = useCallback17((artifact) => {
       setExpandedArtifact(artifact);
     }, []);
-    const handleGroupClick = useCallback15((node) => {
+    const handleGroupClick = useCallback17((node) => {
       treeNav.navigateInto(node);
     }, [treeNav]);
-    const zoomIn = useCallback15(() => {
+    const zoomIn = useCallback17(() => {
       setZoomIndex((prev) => Math.min(prev + 1, ZOOM_LEVELS.length - 1));
     }, []);
-    const zoomOut = useCallback15(() => {
+    const zoomOut = useCallback17(() => {
       setZoomIndex((prev) => Math.max(prev - 1, 0));
     }, []);
     const currentZoom = ZOOM_LEVELS[zoomIndex];
-    const contentRef = useRef10(null);
-    const [contentHeight, setContentHeight] = useState16(void 0);
+    const contentRef = useRef11(null);
+    const [contentHeight, setContentHeight] = useState17(void 0);
     useEffect12(() => {
       const el = contentRef.current;
       if (!el) return;
@@ -5775,7 +5703,7 @@ var ArtifactsPanel = React69.forwardRef(
       observer.observe(el);
       return () => observer.disconnect();
     }, []);
-    return /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(
       "div",
       {
         ref,
@@ -5786,19 +5714,19 @@ var ArtifactsPanel = React69.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ React69.createElement(
+      /* @__PURE__ */ React71.createElement(
         "div",
         {
           className: "flex items-center justify-between p-4 border-b border-ash/40 shrink-0"
         },
-        /* @__PURE__ */ React69.createElement("h3", { className: "text-sm font-semibold text-white" }, "Artifacts"),
-        hasNodes && /* @__PURE__ */ React69.createElement(
+        /* @__PURE__ */ React71.createElement("h3", { className: "text-sm font-semibold text-white" }, "Artifacts"),
+        hasNodes && /* @__PURE__ */ React71.createElement(
           "div",
           {
             className: "flex items-center gap-0.5",
             "data-testid": "zoom-controls"
           },
-          /* @__PURE__ */ React69.createElement(
+          /* @__PURE__ */ React71.createElement(
             "button",
             {
               onClick: zoomOut,
@@ -5812,8 +5740,8 @@ var ArtifactsPanel = React69.forwardRef(
             },
             "\u2212"
           ),
-          /* @__PURE__ */ React69.createElement("span", { className: "text-xs text-silver w-8 text-center tabular-nums", "data-testid": "zoom-level" }, Math.round(currentZoom * 100), "%"),
-          /* @__PURE__ */ React69.createElement(
+          /* @__PURE__ */ React71.createElement("span", { className: "text-xs text-silver w-8 text-center tabular-nums", "data-testid": "zoom-level" }, Math.round(currentZoom * 100), "%"),
+          /* @__PURE__ */ React71.createElement(
             "button",
             {
               onClick: zoomIn,
@@ -5829,7 +5757,7 @@ var ArtifactsPanel = React69.forwardRef(
           )
         )
       ),
-      hasNodes && !treeNav.isAtRoot && /* @__PURE__ */ React69.createElement(
+      hasNodes && !treeNav.isAtRoot && /* @__PURE__ */ React71.createElement(
         "nav",
         {
           className: "flex items-center gap-1 px-4 py-2 border-b border-ash/40 shrink-0 overflow-x-auto text-xs",
@@ -5838,7 +5766,7 @@ var ArtifactsPanel = React69.forwardRef(
         },
         treeNav.breadcrumbs.map((crumb, i) => {
           const isLast = i === treeNav.breadcrumbs.length - 1;
-          return /* @__PURE__ */ React69.createElement("span", { key: i, className: "flex items-center gap-1 shrink-0" }, i > 0 && /* @__PURE__ */ React69.createElement(ChevronRightIcon, { className: "w-3 h-3 text-silver/50", "aria-hidden": true }), isLast ? /* @__PURE__ */ React69.createElement("span", { className: "text-gold font-medium" }, crumb.label) : /* @__PURE__ */ React69.createElement(
+          return /* @__PURE__ */ React71.createElement("span", { key: i, className: "flex items-center gap-1 shrink-0" }, i > 0 && /* @__PURE__ */ React71.createElement(ChevronRightIcon, { className: "w-3 h-3 text-silver/50", "aria-hidden": true }), isLast ? /* @__PURE__ */ React71.createElement("span", { className: "text-gold font-medium" }, crumb.label) : /* @__PURE__ */ React71.createElement(
             "button",
             {
               onClick: () => treeNav.navigateTo(i),
@@ -5848,18 +5776,18 @@ var ArtifactsPanel = React69.forwardRef(
           ));
         })
       ),
-      /* @__PURE__ */ React69.createElement(
+      /* @__PURE__ */ React71.createElement(
         "div",
         {
           className: "flex-1 overflow-auto relative",
           "data-testid": "artifacts-scroll-area"
         },
-        /* @__PURE__ */ React69.createElement(
+        /* @__PURE__ */ React71.createElement(
           "div",
           {
             style: currentZoom !== 1 && contentHeight !== void 0 ? { height: contentHeight * currentZoom } : void 0
           },
-          /* @__PURE__ */ React69.createElement(
+          /* @__PURE__ */ React71.createElement(
             "div",
             {
               ref: contentRef,
@@ -5870,7 +5798,7 @@ var ArtifactsPanel = React69.forwardRef(
                 transformOrigin: "top center"
               } : void 0
             },
-            treeNav.currentNodes.length === 0 ? /* @__PURE__ */ React69.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, hasNodes ? "Empty group" : "No artifacts to display") : treeNav.currentNodes.map((node) => /* @__PURE__ */ React69.createElement(
+            treeNav.currentNodes.length === 0 ? /* @__PURE__ */ React71.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, hasNodes ? "Empty group" : "No artifacts to display") : treeNav.currentNodes.map((node) => /* @__PURE__ */ React71.createElement(
               NodeRenderer,
               {
                 key: node.id,
@@ -5883,7 +5811,7 @@ var ArtifactsPanel = React69.forwardRef(
           )
         )
       )
-    ), expandedArtifact && /* @__PURE__ */ React69.createElement(
+    ), expandedArtifact && /* @__PURE__ */ React71.createElement(
       ArtifactModal,
       {
         artifact: expandedArtifact,
@@ -5893,8 +5821,8 @@ var ArtifactsPanel = React69.forwardRef(
   }
 );
 ArtifactsPanel.displayName = "ArtifactsPanel";
-var ArtifactsPanelToggle = React69.forwardRef(({ artifactCount = 0, onExpand, className, ...rest }, ref) => {
-  return /* @__PURE__ */ React69.createElement(
+var ArtifactsPanelToggle = React71.forwardRef(({ artifactCount = 0, onExpand, className, ...rest }, ref) => {
+  return /* @__PURE__ */ React71.createElement(
     "button",
     {
       ref,
@@ -5911,24 +5839,8 @@ var ArtifactsPanelToggle = React69.forwardRef(({ artifactCount = 0, onExpand, cl
       "aria-label": "Expand artifacts panel",
       ...rest
     },
-    /* @__PURE__ */ React69.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 20 20",
-        fill: "currentColor",
-        className: "w-5 h-5"
-      },
-      /* @__PURE__ */ React69.createElement(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M2 4.5A1.5 1.5 0 013.5 3h13A1.5 1.5 0 0118 4.5v11a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 012 15.5v-11zM4 5v1h1V5H4zm2 0v1h1V5H6zm7 0v1h1V5h-1zm2 0v1h1V5h-1zM4 14v1h1v-1H4zm2 0v1h1v-1H6zm7 0v1h1v-1h-1zm2 0v1h1v-1h-1zM8 8.118a.5.5 0 01.757-.429l4 2.382a.5.5 0 010 .858l-4 2.382A.5.5 0 018 12.882V8.118z",
-          clipRule: "evenodd"
-        }
-      )
-    ),
-    artifactCount > 0 && /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React71.createElement(Image, { className: "w-5 h-5", "aria-hidden": true }),
+    artifactCount > 0 && /* @__PURE__ */ React71.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"
@@ -5940,7 +5852,8 @@ var ArtifactsPanelToggle = React69.forwardRef(({ artifactCount = 0, onExpand, cl
 ArtifactsPanelToggle.displayName = "ArtifactsPanelToggle";
 
 // src/components/chat/HistoryPanel.tsx
-import React70, { useCallback as useCallback16, useEffect as useEffect13, useMemo as useMemo3, useRef as useRef11, useState as useState17 } from "react";
+import React72, { useCallback as useCallback18, useEffect as useEffect13, useMemo as useMemo3, useRef as useRef12, useState as useState18 } from "react";
+import { ChevronDown as ChevronDown2, Pencil as Pencil2 } from "lucide-react";
 function parseTimestamp(ts) {
   if (ts == null) {
     return null;
@@ -5976,66 +5889,18 @@ function groupConversations(conversations) {
     { key: "older", label: "Older", conversations: olderList }
   ].filter((g) => g.conversations.length > 0);
 }
-function ChevronDownIcon({ className }) {
-  return /* @__PURE__ */ React70.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 20 20",
-      fill: "currentColor",
-      className,
-      "aria-hidden": "true"
-    },
-    /* @__PURE__ */ React70.createElement(
-      "path",
-      {
-        fillRule: "evenodd",
-        d: "M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z",
-        clipRule: "evenodd"
-      }
-    )
-  );
-}
-function PencilIcon2({ className }) {
-  return /* @__PURE__ */ React70.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 20 20",
-      fill: "currentColor",
-      className,
-      "aria-hidden": "true"
-    },
-    /* @__PURE__ */ React70.createElement(
-      "path",
-      {
-        d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
-      }
-    )
-  );
-}
 function ProjectFilter({
   projects,
   value,
   onChange,
   className
 }) {
-  const [open, setOpen] = useState17(false);
-  const ref = useRef11(null);
-  useEffect13(() => {
-    if (!open) {
-      return;
-    }
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
+  const [open, setOpen] = useState18(false);
+  const ref = useRef12(null);
+  const closeFilter = useCallback18(() => setOpen(false), []);
+  useClickOutside(ref, closeFilter, open);
   const label = value ?? "All projects";
-  return /* @__PURE__ */ React70.createElement("div", { className: cx("relative min-w-0", className), ref }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React72.createElement("div", { className: cx("relative min-w-0", className), ref }, /* @__PURE__ */ React72.createElement(
     "button",
     {
       type: "button",
@@ -6051,9 +5916,9 @@ function ProjectFilter({
         "transition-colors duration-150 min-w-0"
       )
     },
-    /* @__PURE__ */ React70.createElement("span", { className: "truncate" }, label),
-    /* @__PURE__ */ React70.createElement(ChevronDownIcon, { className: "w-3 h-3 shrink-0" })
-  ), open && /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React72.createElement("span", { className: "truncate" }, label),
+    /* @__PURE__ */ React72.createElement(ChevronDown2, { className: "w-3 h-3 shrink-0", "aria-hidden": true })
+  ), open && /* @__PURE__ */ React72.createElement(
     "div",
     {
       role: "listbox",
@@ -6063,7 +5928,7 @@ function ProjectFilter({
         "max-h-60 overflow-y-auto"
       )
     },
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React72.createElement(
       "button",
       {
         type: "button",
@@ -6081,7 +5946,7 @@ function ProjectFilter({
       },
       "All projects"
     ),
-    projects.map((p) => /* @__PURE__ */ React70.createElement(
+    projects.map((p) => /* @__PURE__ */ React72.createElement(
       "button",
       {
         key: p,
@@ -6107,33 +5972,33 @@ function ConversationRow({
   onSelect,
   onRename
 }) {
-  const [isEditing, setIsEditing] = useState17(false);
-  const [draft, setDraft] = useState17(conversation.title);
-  const inputRef = useRef11(null);
+  const [isEditing, setIsEditing] = useState18(false);
+  const [draft, setDraft] = useState18(conversation.title);
+  const inputRef = useRef12(null);
   useEffect13(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
     }
   }, [isEditing]);
-  const startEdit = useCallback16((e) => {
+  const startEdit = useCallback18((e) => {
     e.stopPropagation();
     setDraft(conversation.title);
     setIsEditing(true);
   }, [conversation.title]);
-  const commit = useCallback16(() => {
+  const commit = useCallback18(() => {
     const trimmed = draft.trim();
     if (trimmed && trimmed !== conversation.title) {
       onRename?.(conversation.id, trimmed);
     }
     setIsEditing(false);
   }, [draft, conversation.id, conversation.title, onRename]);
-  const cancel = useCallback16(() => {
+  const cancel = useCallback18(() => {
     setDraft(conversation.title);
     setIsEditing(false);
   }, [conversation.title]);
   if (isEditing) {
-    return /* @__PURE__ */ React70.createElement(
+    return /* @__PURE__ */ React72.createElement(
       "div",
       {
         className: cx(
@@ -6141,7 +6006,7 @@ function ConversationRow({
           conversation.isActive ? "bg-ash/40" : "bg-ash/20"
         )
       },
-      /* @__PURE__ */ React70.createElement(
+      /* @__PURE__ */ React72.createElement(
         "input",
         {
           ref: inputRef,
@@ -6166,10 +6031,10 @@ function ConversationRow({
           "aria-label": "Conversation title"
         }
       ),
-      conversation.project && /* @__PURE__ */ React70.createElement("p", { className: "text-xs text-silver/60 truncate mt-1" }, conversation.project)
+      conversation.project && /* @__PURE__ */ React72.createElement("p", { className: "text-xs text-silver/60 truncate mt-1" }, conversation.project)
     );
   }
-  return /* @__PURE__ */ React70.createElement("div", { className: "relative group" }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React72.createElement("div", { className: "relative group" }, /* @__PURE__ */ React72.createElement(
     "button",
     {
       onClick: () => onSelect?.(conversation.id),
@@ -6179,7 +6044,7 @@ function ConversationRow({
         conversation.isActive ? "bg-ash/40 text-white" : "text-silver hover:bg-ash/20 hover:text-white"
       )
     },
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React72.createElement(
       "p",
       {
         className: cx(
@@ -6189,8 +6054,8 @@ function ConversationRow({
       },
       conversation.title
     ),
-    conversation.project && /* @__PURE__ */ React70.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.project)
-  ), onRename && /* @__PURE__ */ React70.createElement(
+    conversation.project && /* @__PURE__ */ React72.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.project)
+  ), onRename && /* @__PURE__ */ React72.createElement(
     "button",
     {
       type: "button",
@@ -6203,7 +6068,7 @@ function ConversationRow({
         "transition-opacity duration-150"
       )
     },
-    /* @__PURE__ */ React70.createElement(PencilIcon2, { className: "w-3.5 h-3.5" })
+    /* @__PURE__ */ React72.createElement(Pencil2, { className: "w-3.5 h-3.5", "aria-hidden": true })
   ));
 }
 function HistoryPanel({
@@ -6212,7 +6077,7 @@ function HistoryPanel({
   onNewChat,
   onRenameConversation
 }) {
-  const [projectFilter, setProjectFilter] = useState17(null);
+  const [projectFilter, setProjectFilter] = useState18(null);
   const projects = useMemo3(() => {
     const set = /* @__PURE__ */ new Set();
     for (const c of conversations) {
@@ -6238,7 +6103,7 @@ function HistoryPanel({
     [filteredConversations]
   );
   const hasFilter = projects.length > 0;
-  return /* @__PURE__ */ React70.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ React70.createElement("div", { className: "px-4 py-3 border-b border-ash/40 shrink-0 flex items-center gap-2" }, /* @__PURE__ */ React70.createElement("h3", { className: "text-xs font-medium text-white shrink-0" }, "History"), (hasFilter || onNewChat) && /* @__PURE__ */ React70.createElement("div", { className: "flex items-center gap-2 flex-1 min-w-0" }, hasFilter && /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement("div", { className: "w-px h-3 bg-ash/40 shrink-0 mx-1" }), /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React72.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ React72.createElement("div", { className: "px-4 py-3 border-b border-ash/40 shrink-0 flex items-center gap-2" }, /* @__PURE__ */ React72.createElement("h3", { className: "text-xs font-medium text-white shrink-0" }, "History"), (hasFilter || onNewChat) && /* @__PURE__ */ React72.createElement("div", { className: "flex items-center gap-2 flex-1 min-w-0" }, hasFilter && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { className: "w-px h-3 bg-ash/40 shrink-0 mx-1" }), /* @__PURE__ */ React72.createElement(
     ProjectFilter,
     {
       projects,
@@ -6246,7 +6111,7 @@ function HistoryPanel({
       onChange: setProjectFilter,
       className: "flex-1"
     }
-  )), onNewChat && /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement("div", { className: "w-px h-3 bg-ash/40 shrink-0 mx-1" }), /* @__PURE__ */ React70.createElement(
+  )), onNewChat && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { className: "w-px h-3 bg-ash/40 shrink-0 mx-1" }), /* @__PURE__ */ React72.createElement(
     "button",
     {
       onClick: onNewChat,
@@ -6258,15 +6123,15 @@ function HistoryPanel({
         "transition-colors duration-200"
       )
     },
-    /* @__PURE__ */ React70.createElement(PlusIcon, { className: "w-4 h-4" }),
-    /* @__PURE__ */ React70.createElement("span", { className: "truncate" }, "New Chat")
-  )))), /* @__PURE__ */ React70.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ React70.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations yet") : groups.length === 0 ? /* @__PURE__ */ React70.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations match this filter") : /* @__PURE__ */ React70.createElement("div", null, groups.map((group, index) => /* @__PURE__ */ React70.createElement("section", { key: group.key, className: cx(index > 0 && "mt-3") }, /* @__PURE__ */ React70.createElement("div", { className: "flex items-center gap-2 px-3 pb-2" }, /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React72.createElement(PlusIcon, { className: "w-4 h-4" }),
+    /* @__PURE__ */ React72.createElement("span", { className: "truncate" }, "New Chat")
+  )))), /* @__PURE__ */ React72.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ React72.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations yet") : groups.length === 0 ? /* @__PURE__ */ React72.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations match this filter") : /* @__PURE__ */ React72.createElement("div", null, groups.map((group, index) => /* @__PURE__ */ React72.createElement("section", { key: group.key, className: cx(index > 0 && "mt-3") }, /* @__PURE__ */ React72.createElement("div", { className: "flex items-center gap-2 px-3 pb-2" }, /* @__PURE__ */ React72.createElement(
     "span",
     {
       className: "text-xs font-medium uppercase tracking-wider text-gold/70"
     },
     group.label
-  ), /* @__PURE__ */ React70.createElement("div", { className: "flex-1 h-px bg-gold/20" })), /* @__PURE__ */ React70.createElement("div", { className: "space-y-1 px-2" }, group.conversations.map((conversation) => /* @__PURE__ */ React70.createElement(
+  ), /* @__PURE__ */ React72.createElement("div", { className: "flex-1 h-px bg-gold/20" })), /* @__PURE__ */ React72.createElement("div", { className: "space-y-1 px-2" }, group.conversations.map((conversation) => /* @__PURE__ */ React72.createElement(
     ConversationRow,
     {
       key: conversation.id,
@@ -6278,7 +6143,7 @@ function HistoryPanel({
 }
 
 // src/components/chat/TodosList.tsx
-import React71, { useCallback as useCallback17, useMemo as useMemo4, useState as useState18 } from "react";
+import React73, { useCallback as useCallback19, useMemo as useMemo4, useState as useState19 } from "react";
 import { Loader2 as Loader22, Square as Square2 } from "lucide-react";
 var TASK_STATUSES = {
   PENDING: "pending",
@@ -6290,16 +6155,16 @@ var TASK_STATUSES = {
 function TaskIcon({ status }) {
   switch (status) {
     case "done":
-      return /* @__PURE__ */ React71.createElement(CheckSquareIcon, null);
+      return /* @__PURE__ */ React73.createElement(CheckSquareIcon, null);
     case "in_progress":
-      return /* @__PURE__ */ React71.createElement(SquareLoaderIcon, null);
+      return /* @__PURE__ */ React73.createElement(SquareLoaderIcon, null);
     case "cancelled":
-      return /* @__PURE__ */ React71.createElement(CrossSquareIcon, { variant: "cancelled" });
+      return /* @__PURE__ */ React73.createElement(CrossSquareIcon, { variant: "cancelled" });
     case "failed":
-      return /* @__PURE__ */ React71.createElement(CrossSquareIcon, { variant: "failed" });
+      return /* @__PURE__ */ React73.createElement(CrossSquareIcon, { variant: "failed" });
     case "pending":
     default:
-      return /* @__PURE__ */ React71.createElement(EmptySquareIcon, null);
+      return /* @__PURE__ */ React73.createElement(EmptySquareIcon, null);
   }
 }
 function sortTasks(tasks) {
@@ -6319,14 +6184,14 @@ function TaskItem({ task, depth = 0 }) {
   const isSubtle = task.status === "cancelled" || task.status === "failed";
   const showSubtasks = task.subtasks && task.subtasks.length > 0;
   const sortedSubtasks = showSubtasks ? sortTasks(task.subtasks) : [];
-  return /* @__PURE__ */ React71.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React73.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React73.createElement(
     "div",
     {
       className: "flex items-center gap-2 py-1",
       style: { paddingLeft: `${depth * 1.5}rem` }
     },
-    /* @__PURE__ */ React71.createElement(TaskIcon, { status: task.status }),
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React73.createElement(TaskIcon, { status: task.status }),
+    /* @__PURE__ */ React73.createElement(
       "span",
       {
         className: cx(
@@ -6338,10 +6203,10 @@ function TaskItem({ task, depth = 0 }) {
         )
       },
       task.label,
-      task.status === "cancelled" && /* @__PURE__ */ React71.createElement("span", { className: "text-silver/40 ml-1" }, "(cancelled)"),
-      task.status === "failed" && /* @__PURE__ */ React71.createElement("span", { className: "text-error/60 ml-1" }, "(failed)")
+      task.status === "cancelled" && /* @__PURE__ */ React73.createElement("span", { className: "text-silver/40 ml-1" }, "(cancelled)"),
+      task.status === "failed" && /* @__PURE__ */ React73.createElement("span", { className: "text-error/60 ml-1" }, "(failed)")
     )
-  ), showSubtasks && /* @__PURE__ */ React71.createElement("div", { className: "flex flex-col" }, sortedSubtasks.map((subtask) => /* @__PURE__ */ React71.createElement(TaskItem, { key: subtask.id, task: subtask, depth: depth + 1 }))));
+  ), showSubtasks && /* @__PURE__ */ React73.createElement("div", { className: "flex flex-col" }, sortedSubtasks.map((subtask) => /* @__PURE__ */ React73.createElement(TaskItem, { key: subtask.id, task: subtask, depth: depth + 1 }))));
 }
 function hasInProgressTask(tasks) {
   return tasks.some((t) => {
@@ -6354,11 +6219,11 @@ function hasInProgressTask(tasks) {
     return false;
   });
 }
-var TodosList = React71.forwardRef(
+var TodosList = React73.forwardRef(
   ({ tasks, title = "Tasks", onStopAllTasks, className, ...rest }, ref) => {
     const sortedTasks = useMemo4(() => sortTasks(tasks), [tasks]);
-    const [isStopping, setIsStopping] = useState18(false);
-    const handleStopClick = useCallback17(async () => {
+    const [isStopping, setIsStopping] = useState19(false);
+    const handleStopClick = useCallback19(async () => {
       if (!onStopAllTasks || isStopping) {
         return;
       }
@@ -6379,7 +6244,7 @@ var TodosList = React71.forwardRef(
     if (tasks.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React73.createElement(
       "div",
       {
         ref,
@@ -6390,16 +6255,16 @@ var TodosList = React71.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ React71.createElement(
+      /* @__PURE__ */ React73.createElement(
         "div",
         {
           className: "flex items-center justify-between px-4 py-2 border-b border-ash/40 flex-shrink-0"
         },
-        /* @__PURE__ */ React71.createElement("h4", { className: "text-xs font-medium text-white" }, title),
-        /* @__PURE__ */ React71.createElement("span", { className: "text-xs text-silver/60" }, countCompleted(tasks), "/", countTotal(tasks))
+        /* @__PURE__ */ React73.createElement("h4", { className: "text-xs font-medium text-white" }, title),
+        /* @__PURE__ */ React73.createElement("span", { className: "text-xs text-silver/60" }, countCompleted(tasks), "/", countTotal(tasks))
       ),
-      /* @__PURE__ */ React71.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ React71.createElement(TaskItem, { key: task.id, task }))),
-      showStopButton && /* @__PURE__ */ React71.createElement("div", { className: "px-4 py-2 border-t border-ash/40 flex-shrink-0" }, /* @__PURE__ */ React71.createElement(
+      /* @__PURE__ */ React73.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ React73.createElement(TaskItem, { key: task.id, task }))),
+      showStopButton && /* @__PURE__ */ React73.createElement("div", { className: "px-4 py-2 border-t border-ash/40 flex-shrink-0" }, /* @__PURE__ */ React73.createElement(
         "button",
         {
           type: "button",
@@ -6416,7 +6281,7 @@ var TodosList = React71.forwardRef(
             isStopping ? "cursor-not-allowed opacity-70" : "hover:bg-error/20"
           )
         },
-        isStopping ? /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(Loader22, { className: "w-3 h-3 animate-spin" }), "Stopping tasks") : /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(Square2, { className: "w-3 h-3 fill-current" }), "Stop All Tasks")
+        isStopping ? /* @__PURE__ */ React73.createElement(React73.Fragment, null, /* @__PURE__ */ React73.createElement(Loader22, { className: "w-3 h-3 animate-spin" }), "Stopping tasks") : /* @__PURE__ */ React73.createElement(React73.Fragment, null, /* @__PURE__ */ React73.createElement(Square2, { className: "w-3 h-3 fill-current" }), "Stop All Tasks")
       ))
     );
   }
@@ -6436,8 +6301,8 @@ function areAllTasksSettled(tasks) {
 }
 
 // src/components/chat/ToolSidebar.tsx
-import React72 from "react";
-var ToolSidebar = React72.forwardRef(
+import React74 from "react";
+var ToolSidebar = React74.forwardRef(
   ({ tools, activeTools, onToggleTool, side, className, ...rest }, ref) => {
     const topTools = tools.filter((t) => t.group === `top-${side}`);
     const bottomTools = tools.filter((t) => t.group === `bottom-${side}`);
@@ -6448,7 +6313,7 @@ var ToolSidebar = React72.forwardRef(
     };
     const renderButton = (tool) => {
       const active = isActive(tool.id);
-      return /* @__PURE__ */ React72.createElement(
+      return /* @__PURE__ */ React74.createElement(
         "button",
         {
           key: tool.id,
@@ -6460,10 +6325,10 @@ var ToolSidebar = React72.forwardRef(
           "aria-label": tool.label,
           "aria-pressed": active
         },
-        /* @__PURE__ */ React72.createElement("span", { className: "w-4 h-4 block" }, tool.icon)
+        /* @__PURE__ */ React74.createElement("span", { className: "w-4 h-4 block" }, tool.icon)
       );
     };
-    return /* @__PURE__ */ React72.createElement(
+    return /* @__PURE__ */ React74.createElement(
       "div",
       {
         ref,
@@ -6474,17 +6339,17 @@ var ToolSidebar = React72.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ React72.createElement("div", { className: "flex flex-col items-center gap-1" }, topTools.map(renderButton)),
-      /* @__PURE__ */ React72.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ React72.createElement("div", { className: "w-5 border-t border-ash/30" })),
-      /* @__PURE__ */ React72.createElement("div", { className: "flex flex-col items-center gap-1" }, bottomTools.map(renderButton))
+      /* @__PURE__ */ React74.createElement("div", { className: "flex flex-col items-center gap-1" }, topTools.map(renderButton)),
+      /* @__PURE__ */ React74.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ React74.createElement("div", { className: "w-5 border-t border-ash/30" })),
+      /* @__PURE__ */ React74.createElement("div", { className: "flex flex-col items-center gap-1" }, bottomTools.map(renderButton))
     );
   }
 );
 ToolSidebar.displayName = "ToolSidebar";
 
 // src/components/chat/ToolPanelContainer.tsx
-import React73, { useCallback as useCallback18, useEffect as useEffect14, useRef as useRef12, useState as useState19 } from "react";
-var ToolPanelContainer = React73.forwardRef(
+import React75, { useCallback as useCallback20, useEffect as useEffect14, useRef as useRef13, useState as useState20 } from "react";
+var ToolPanelContainer = React75.forwardRef(
   ({
     topContent,
     bottomContent,
@@ -6495,21 +6360,21 @@ var ToolPanelContainer = React73.forwardRef(
     initialTopPercent = 60,
     ...rest
   }, ref) => {
-    const [topPercent, setTopPercent] = useState19(initialTopPercent);
-    const [isResizingHeight, setIsResizingHeight] = useState19(false);
-    const containerRef = useRef12(null);
-    const lastY = useRef12(null);
+    const [topPercent, setTopPercent] = useState20(initialTopPercent);
+    const [isResizingHeight, setIsResizingHeight] = useState20(false);
+    const containerRef = useRef13(null);
+    const lastY = useRef13(null);
     const hasBoth = topContent !== null && bottomContent !== null;
-    const startHeightResize = useCallback18((e) => {
+    const startHeightResize = useCallback20((e) => {
       e.preventDefault();
       setIsResizingHeight(true);
       lastY.current = e.clientY;
     }, []);
-    const stopHeightResize = useCallback18(() => {
+    const stopHeightResize = useCallback20(() => {
       setIsResizingHeight(false);
       lastY.current = null;
     }, []);
-    const resizeHeight = useCallback18(
+    const resizeHeight = useCallback20(
       (e) => {
         if (!isResizingHeight || lastY.current === null || !containerRef.current) {
           return;
@@ -6547,17 +6412,10 @@ var ToolPanelContainer = React73.forwardRef(
         document.body.style.userSelect = "";
       };
     }, [isResizingHeight, resizeHeight, stopHeightResize]);
-    return /* @__PURE__ */ React73.createElement(
+    return /* @__PURE__ */ React75.createElement(
       "div",
       {
-        ref: (node) => {
-          containerRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-        },
+        ref: composeRefs(containerRef, ref),
         className: cx(
           "h-full bg-charcoal/50 flex flex-col relative shrink-0",
           side === "left" ? "border-r border-ash/40" : "border-l border-ash/40",
@@ -6566,7 +6424,7 @@ var ToolPanelContainer = React73.forwardRef(
         style: width ? { width } : void 0,
         ...rest
       },
-      /* @__PURE__ */ React73.createElement(
+      /* @__PURE__ */ React75.createElement(
         "div",
         {
           onMouseDown: onResizeStart,
@@ -6577,7 +6435,7 @@ var ToolPanelContainer = React73.forwardRef(
           )
         }
       ),
-      topContent !== null && /* @__PURE__ */ React73.createElement(
+      topContent !== null && /* @__PURE__ */ React75.createElement(
         "div",
         {
           className: "min-h-0 overflow-hidden flex flex-col",
@@ -6585,7 +6443,7 @@ var ToolPanelContainer = React73.forwardRef(
         },
         topContent
       ),
-      hasBoth && /* @__PURE__ */ React73.createElement(
+      hasBoth && /* @__PURE__ */ React75.createElement(
         "div",
         {
           onMouseDown: startHeightResize,
@@ -6597,7 +6455,7 @@ var ToolPanelContainer = React73.forwardRef(
           )
         }
       ),
-      bottomContent !== null && /* @__PURE__ */ React73.createElement(
+      bottomContent !== null && /* @__PURE__ */ React75.createElement(
         "div",
         {
           className: "min-h-0 overflow-hidden flex flex-col",
@@ -6611,26 +6469,26 @@ var ToolPanelContainer = React73.forwardRef(
 ToolPanelContainer.displayName = "ToolPanelContainer";
 
 // src/components/chat/hooks/useResizable.ts
-import { useCallback as useCallback19, useEffect as useEffect15, useRef as useRef13, useState as useState20 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect15, useRef as useRef14, useState as useState21 } from "react";
 function useResizable({
   initialWidthPercent,
   minWidthPercent,
   maxWidthPercent,
   direction
 }) {
-  const [widthPercent, setWidthPercent] = useState20(initialWidthPercent);
-  const [isResizing, setIsResizing] = useState20(false);
-  const lastX = useRef13(null);
-  const startResizing = useCallback19((e) => {
+  const [widthPercent, setWidthPercent] = useState21(initialWidthPercent);
+  const [isResizing, setIsResizing] = useState21(false);
+  const lastX = useRef14(null);
+  const startResizing = useCallback21((e) => {
     e.preventDefault();
     setIsResizing(true);
     lastX.current = e.clientX;
   }, []);
-  const stopResizing = useCallback19(() => {
+  const stopResizing = useCallback21(() => {
     setIsResizing(false);
     lastX.current = null;
   }, []);
-  const resize = useCallback19(
+  const resize = useCallback21(
     (e) => {
       if (!isResizing || lastX.current === null) {
         return;
@@ -6669,8 +6527,150 @@ function useResizable({
   return { width, widthPercent, isResizing, startResizing };
 }
 
+// src/components/chat/tree.ts
+function createEmptyTree() {
+  return { nodes: {}, rootIds: [], activeLeafId: null, lastLeafId: null };
+}
+function addNodeToTree(tree, node, parentId = null) {
+  const newNodes = { ...tree.nodes };
+  const newRootIds = [...tree.rootIds];
+  const branchIndex = parentId ? newNodes[parentId]?.children.length ?? 0 : newRootIds.length;
+  newNodes[node.id] = {
+    ...node,
+    parentId,
+    children: [],
+    branchIndex,
+    createdAt: node.createdAt ?? Date.now()
+  };
+  if (parentId && newNodes[parentId]) {
+    newNodes[parentId] = {
+      ...newNodes[parentId],
+      children: [...newNodes[parentId].children, node.id]
+    };
+  } else {
+    newRootIds.push(node.id);
+  }
+  return {
+    nodes: newNodes,
+    rootIds: newRootIds,
+    activeLeafId: node.id,
+    lastLeafId: node.id
+  };
+}
+function getActivePath(tree) {
+  return walkUp(tree, tree.activeLeafId).reverse();
+}
+function findAncestor(tree, fromId, predicate) {
+  let id = fromId;
+  while (id) {
+    const node = tree.nodes[id];
+    if (!node) return null;
+    if (predicate(node)) return node;
+    id = node.parentId;
+  }
+  return null;
+}
+function getSiblingInfo(tree, nodeId) {
+  const siblings = siblingsOf(tree, nodeId);
+  const index = siblings.indexOf(nodeId);
+  if (index < 0) return { total: 1, current: 1 };
+  return { total: siblings.length, current: index + 1 };
+}
+function isBranchPoint(tree, nodeId) {
+  return (tree.nodes[nodeId]?.children.length ?? 0) > 1;
+}
+function switchBranch(tree, nodeId, direction) {
+  const siblings = siblingsOf(tree, nodeId);
+  if (siblings.length <= 1) return tree;
+  const currentIndex = siblings.indexOf(nodeId);
+  const newIndex = direction === "next" ? (currentIndex + 1) % siblings.length : (currentIndex - 1 + siblings.length) % siblings.length;
+  const leafId = deepestLeafOf(tree, siblings[newIndex]);
+  return { ...tree, activeLeafId: leafId, lastLeafId: leafId };
+}
+function setActiveLeaf(tree, leafId) {
+  if (!leafId || !tree.nodes[leafId]) {
+    return { ...tree, activeLeafId: leafId, lastLeafId: leafId };
+  }
+  const lastLeafId = tree.lastLeafId && isAncestor(tree, leafId, tree.lastLeafId) ? tree.lastLeafId : leafId;
+  return { ...tree, activeLeafId: leafId, lastLeafId };
+}
+function getGreyedFuture(tree) {
+  const { activeLeafId, lastLeafId } = tree;
+  if (!activeLeafId || !lastLeafId || activeLeafId === lastLeafId) return [];
+  const path = [];
+  let id = lastLeafId;
+  while (id && id !== activeLeafId) {
+    const node = tree.nodes[id];
+    if (!node) return [];
+    path.unshift(node);
+    id = node.parentId;
+  }
+  return id === activeLeafId ? path : [];
+}
+function messagesToTree(messages) {
+  let tree = createEmptyTree();
+  for (const msg of messages) {
+    const parentId = tree.activeLeafId;
+    tree = addNodeToTree(
+      tree,
+      { ...msg, kind: "message", parentId },
+      parentId
+    );
+  }
+  return tree;
+}
+function updateMessageContent(tree, nodeId, content, isStreaming) {
+  const node = tree.nodes[nodeId];
+  if (!node || node.kind !== "message") return tree;
+  const updated = {
+    ...node,
+    content,
+    isStreaming: isStreaming ?? node.isStreaming
+  };
+  return {
+    ...tree,
+    nodes: {
+      ...tree.nodes,
+      [nodeId]: updated
+    }
+  };
+}
+function walkUp(tree, fromId) {
+  const out = [];
+  let id = fromId;
+  while (id) {
+    const node = tree.nodes[id];
+    if (!node) break;
+    out.push(node);
+    id = node.parentId;
+  }
+  return out;
+}
+function siblingsOf(tree, nodeId) {
+  const node = tree.nodes[nodeId];
+  if (!node) return [];
+  return node.parentId ? tree.nodes[node.parentId]?.children ?? [] : tree.rootIds;
+}
+function deepestLeafOf(tree, nodeId) {
+  let id = nodeId;
+  let node = tree.nodes[id];
+  while (node && node.children.length > 0) {
+    id = node.children[node.children.length - 1];
+    node = tree.nodes[id];
+  }
+  return id;
+}
+function isAncestor(tree, ancestorId, descendantId) {
+  let id = descendantId;
+  while (id) {
+    if (id === ancestorId) return true;
+    id = tree.nodes[id]?.parentId ?? null;
+  }
+  return false;
+}
+
 // src/components/chat/ChatInterface.tsx
-var ChatInterface = React74.forwardRef(
+var ChatInterface = React76.forwardRef(
   ({
     messages = [],
     conversationTree,
@@ -6679,6 +6679,8 @@ var ChatInterface = React74.forwardRef(
     onMessageSubmit,
     onEditMessage,
     onRetryMessage,
+    onJumpToCheckpoint,
+    onJumpToLatest,
     onStop,
     onSelectConversation,
     onNewChat,
@@ -6707,15 +6709,15 @@ var ChatInterface = React74.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const prevArtifactNodesRef = useRef14([]);
-    const prevTasksRef = useRef14([]);
-    const [internalTools, setInternalTools] = useState21({
+    const prevArtifactNodesRef = useRef15([]);
+    const prevTasksRef = useRef15([]);
+    const [internalTools, setInternalTools] = useState22({
       "top-left": "history",
       "bottom-left": null,
       "top-right": null,
       "bottom-right": null
     });
-    const dismissedToolsRef = useRef14(/* @__PURE__ */ new Set());
+    const dismissedToolsRef = useRef15(/* @__PURE__ */ new Set());
     const isPanelControlled = isArtifactsPanelOpen !== void 0;
     const activeTools = useMemo5(() => {
       if (isPanelControlled) {
@@ -6749,11 +6751,11 @@ var ChatInterface = React74.forwardRef(
     const allSettled = tasks.length === 0 || areAllTasksSettled(tasks);
     const allToolDefinitions = useMemo5(() => {
       const builtIn = [
-        { id: "history", icon: /* @__PURE__ */ React74.createElement(ChatBubbleIcon, null), label: "History", group: "top-left" },
-        { id: "artifacts", icon: /* @__PURE__ */ React74.createElement(MediaIcon, null), label: "Artifacts", group: "top-right" },
+        { id: "history", icon: /* @__PURE__ */ React76.createElement(ChatBubbleIcon, null), label: "History", group: "top-left" },
+        { id: "artifacts", icon: /* @__PURE__ */ React76.createElement(MediaIcon, null), label: "Artifacts", group: "top-right" },
         {
           id: "todos",
-          icon: allSettled ? /* @__PURE__ */ React74.createElement(CheckSquareIcon, null) : /* @__PURE__ */ React74.createElement(SquareLoaderIcon, null),
+          icon: allSettled ? /* @__PURE__ */ React76.createElement(CheckSquareIcon, null) : /* @__PURE__ */ React76.createElement(SquareLoaderIcon, null),
           label: "Tasks",
           group: "bottom-right"
         }
@@ -6761,7 +6763,7 @@ var ChatInterface = React74.forwardRef(
       const external = externalTools.map(({ content: _content, ...def }) => def);
       return [...builtIn, ...external];
     }, [allSettled, externalTools]);
-    const toggleTool = useCallback20((toolId) => {
+    const toggleTool = useCallback22((toolId) => {
       const toolDef = allToolDefinitions.find((t) => t.id === toolId);
       if (!toolDef) {
         return;
@@ -6791,20 +6793,24 @@ var ChatInterface = React74.forwardRef(
       });
     }, [allToolDefinitions, isPanelControlled, activeTools, onArtifactsPanelOpenChange]);
     const isTreeMode = !!conversationTree;
-    const effectiveMessages = useMemo5(() => {
-      if (isTreeMode && conversationTree) {
-        return getActivePathMessages(conversationTree);
-      }
-      return messages || [];
-    }, [isTreeMode, conversationTree, messages]);
-    const latestUserMessageIndex = useMemo5(() => {
-      for (let i = effectiveMessages.length - 1; i >= 0; i--) {
-        if (effectiveMessages[i].role === "user") {
-          return i;
-        }
-      }
-      return -1;
-    }, [effectiveMessages]);
+    const tree = isTreeMode ? conversationTree : null;
+    const activePath = useMemo5(() => {
+      if (tree) return getActivePath(tree);
+      return (messages || []).map((m) => ({ ...m, children: [], branchIndex: 0 }));
+    }, [tree, messages]);
+    const greyedFuture = useMemo5(
+      () => tree ? getGreyedFuture(tree) : [],
+      [tree]
+    );
+    const activeCheckpointId = useMemo5(() => {
+      if (!tree) return null;
+      const found = findAncestor(
+        tree,
+        tree.activeLeafId,
+        (n) => n.kind === "checkpoint"
+      );
+      return found?.id ?? null;
+    }, [tree]);
     useEffect16(() => {
       const nodes = artifactNodes || [];
       const prevNodes = prevArtifactNodesRef.current;
@@ -6830,66 +6836,115 @@ var ChatInterface = React74.forwardRef(
       prevArtifactNodesRef.current = nodes;
       prevTasksRef.current = tasks;
     }, [artifactNodes, tasks, isPanelControlled]);
-    const handleBranchSwitch = useCallback20(
+    const handleBranchSwitch = useCallback22(
       (nodeId, direction) => {
-        if (!isTreeMode || !conversationTree || !onTreeChange) {
+        if (!tree || !onTreeChange) {
           return;
         }
-        const newTree = switchBranch(conversationTree, nodeId, direction);
-        onTreeChange(newTree);
+        onTreeChange(switchBranch(tree, nodeId, direction));
       },
-      [isTreeMode, conversationTree, onTreeChange]
+      [tree, onTreeChange]
     );
-    const displayMessages = useMemo5(() => {
-      return effectiveMessages.map((msg) => {
-        let branchInfo = void 0;
-        if (isTreeMode && conversationTree) {
-          const siblingInfo = getSiblingInfo(conversationTree, msg.id);
-          if (siblingInfo.total > 1) {
-            branchInfo = {
-              current: siblingInfo.current,
-              total: siblingInfo.total,
-              onPrevious: () => handleBranchSwitch(msg.id, "prev"),
-              onNext: () => handleBranchSwitch(msg.id, "next")
-            };
-          }
+    const handleJumpToCheckpoint = useCallback22((checkpointId) => {
+      if (!tree) return;
+      if (onJumpToCheckpoint) {
+        onJumpToCheckpoint(checkpointId);
+        return;
+      }
+      if (onTreeChange) {
+        onTreeChange(setActiveLeaf(tree, checkpointId));
+      }
+    }, [tree, onTreeChange, onJumpToCheckpoint]);
+    const handleJumpToLatest = useCallback22(() => {
+      if (!tree) return;
+      if (onJumpToLatest) {
+        onJumpToLatest();
+        return;
+      }
+      if (onTreeChange && tree.lastLeafId) {
+        onTreeChange(setActiveLeaf(tree, tree.lastLeafId));
+      }
+    }, [tree, onTreeChange, onJumpToLatest]);
+    const buildItem = useCallback22(
+      (node, opts) => {
+        const branchInfo = tree && getSiblingInfo(tree, node.id).total > 1 ? {
+          ...getSiblingInfo(tree, node.id),
+          onPrevious: () => handleBranchSwitch(node.id, "prev"),
+          onNext: () => handleBranchSwitch(node.id, "next")
+        } : void 0;
+        if (node.kind === "checkpoint") {
+          return {
+            kind: "checkpoint",
+            id: node.id,
+            name: node.name,
+            executionKind: node.executionKind,
+            status: node.status,
+            isActive: node.id === activeCheckpointId && !opts.muted,
+            muted: opts.muted,
+            branchInfo,
+            onJumpHere: () => handleJumpToCheckpoint(node.id)
+          };
         }
         const actions = enableMessageActions ? {
           showCopy: true,
-          onEdit: msg.role === "user" && onEditMessage ? (newContent) => onEditMessage(msg.id, newContent) : void 0,
-          onRetry: msg.role === "assistant" && onRetryMessage ? () => onRetryMessage(msg.id) : void 0
+          onEdit: node.role === "user" && onEditMessage ? (newContent) => onEditMessage(node.id, newContent) : void 0,
+          onRetry: node.role === "assistant" && onRetryMessage ? () => onRetryMessage(node.id) : void 0
         } : void 0;
-        const {
-          role,
-          parentId,
-          children,
-          branchIndex,
-          createdAt,
-          ...rest2
-        } = msg;
         return {
-          ...rest2,
-          variant: role,
+          kind: "message",
+          id: node.id,
+          variant: node.role,
+          content: node.content,
+          isStreaming: node.isStreaming,
+          muted: opts.muted,
           branchInfo,
           actions
         };
-      });
-    }, [
-      effectiveMessages,
-      isTreeMode,
-      conversationTree,
-      enableMessageActions,
-      onEditMessage,
-      onRetryMessage,
-      handleBranchSwitch
-    ]);
-    const handleSubmit = useCallback20(
+      },
+      [
+        tree,
+        activeCheckpointId,
+        enableMessageActions,
+        onEditMessage,
+        onRetryMessage,
+        handleBranchSwitch,
+        handleJumpToCheckpoint
+      ]
+    );
+    const displayItems = useMemo5(() => {
+      const items = activePath.map((n) => buildItem(n, { muted: false }));
+      if (greyedFuture.length > 0) {
+        const messageCount = greyedFuture.filter((n) => n.kind === "message").length;
+        const checkpointCount = greyedFuture.filter((n) => n.kind === "checkpoint").length;
+        items.push({
+          kind: "divider",
+          id: "__greyed_divider__",
+          messageCount,
+          checkpointCount,
+          onJumpToLatest: handleJumpToLatest
+        });
+        for (const n of greyedFuture) {
+          items.push(buildItem(n, { muted: true }));
+        }
+      }
+      return items;
+    }, [activePath, greyedFuture, buildItem, handleJumpToLatest]);
+    const latestUserMessageIndex = useMemo5(() => {
+      for (let i = displayItems.length - 1; i >= 0; i--) {
+        const item = displayItems[i];
+        if (item.kind === "message" && item.variant === "user" && !item.muted) {
+          return i;
+        }
+      }
+      return -1;
+    }, [displayItems]);
+    const handleSubmit = useCallback22(
       (message, attachments) => {
         onMessageSubmit?.(message, attachments);
       },
       [onMessageSubmit]
     );
-    const isEmpty = effectiveMessages.length === 0;
+    const isEmpty = displayItems.length === 0;
     const leftToolDefs = useMemo5(
       () => allToolDefinitions.filter((t) => t.group === "top-left" || t.group === "bottom-left"),
       [allToolDefinitions]
@@ -6908,7 +6963,7 @@ var ChatInterface = React74.forwardRef(
       }
       switch (toolId) {
         case "history":
-          return /* @__PURE__ */ React74.createElement(
+          return /* @__PURE__ */ React76.createElement(
             HistoryPanel,
             {
               conversations,
@@ -6918,7 +6973,7 @@ var ChatInterface = React74.forwardRef(
             }
           );
         case "artifacts":
-          return /* @__PURE__ */ React74.createElement(
+          return /* @__PURE__ */ React76.createElement(
             ArtifactsPanel,
             {
               nodes: artifactNodes,
@@ -6926,7 +6981,7 @@ var ChatInterface = React74.forwardRef(
             }
           );
         case "todos":
-          return tasks.length > 0 ? /* @__PURE__ */ React74.createElement(
+          return tasks.length > 0 ? /* @__PURE__ */ React76.createElement(
             TodosList,
             {
               tasks,
@@ -6934,21 +6989,21 @@ var ChatInterface = React74.forwardRef(
               onStopAllTasks,
               className: "h-full"
             }
-          ) : /* @__PURE__ */ React74.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ React74.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ React74.createElement("h3", { className: "text-xs font-medium text-white" }, "Tasks")), /* @__PURE__ */ React74.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ React74.createElement("p", { className: "text-xs text-silver/60" }, "No tasks")));
+          ) : /* @__PURE__ */ React76.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ React76.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ React76.createElement("h3", { className: "text-xs font-medium text-white" }, "Tasks")), /* @__PURE__ */ React76.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ React76.createElement("p", { className: "text-xs text-silver/60" }, "No tasks")));
         default: {
           const externalTool = externalTools.find((t) => t.id === toolId);
           return externalTool?.content ?? null;
         }
       }
     };
-    return /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React76.createElement(
       "div",
       {
         ref,
         className: cx("flex h-full w-full bg-obsidian overflow-hidden", className),
         ...rest
       },
-      hasLeftTools && /* @__PURE__ */ React74.createElement(
+      hasLeftTools && /* @__PURE__ */ React76.createElement(
         ToolSidebar,
         {
           tools: leftToolDefs,
@@ -6957,7 +7012,7 @@ var ChatInterface = React74.forwardRef(
           side: "left"
         }
       ),
-      isLeftPanelOpen && /* @__PURE__ */ React74.createElement(
+      isLeftPanelOpen && /* @__PURE__ */ React76.createElement(
         ToolPanelContainer,
         {
           topContent: renderToolContent(activeTools["top-left"]),
@@ -6968,28 +7023,28 @@ var ChatInterface = React74.forwardRef(
           initialTopPercent: 30
         }
       ),
-      /* @__PURE__ */ React74.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ React74.createElement("div", { className: cx(
+      /* @__PURE__ */ React76.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ React76.createElement("div", { className: cx(
         "flex-1 flex flex-col min-h-0 relative",
         isEmpty ? "justify-center" : "justify-start"
-      ) }, /* @__PURE__ */ React74.createElement("div", { className: cx(
+      ) }, /* @__PURE__ */ React76.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
-      ) }), /* @__PURE__ */ React74.createElement("div", { className: cx(
+      ) }), /* @__PURE__ */ React76.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__ */ React74.createElement(
+      ) }, /* @__PURE__ */ React76.createElement(
         ChatView,
         {
-          messages: displayMessages,
+          items: displayItems,
           latestUserMessageIndex,
           isStreaming,
           isThinking,
           className: "flex-1"
         }
-      )), /* @__PURE__ */ React74.createElement("div", { className: cx(
+      )), /* @__PURE__ */ React76.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out z-10 w-full flex flex-col items-center",
         isEmpty ? "p-4" : "shrink-0 p-4 border-t border-ash/40 bg-obsidian"
-      ) }, isEmpty && /* @__PURE__ */ React74.createElement("div", { className: "mb-8 text-center animate-fade-in duration-500" }, emptyState ? emptyState : /* @__PURE__ */ React74.createElement("h1", { className: "text-4xl md:text-5xl font-heading text-gold mb-2 tracking-tight" }, "Welcome!")), /* @__PURE__ */ React74.createElement(
+      ) }, isEmpty && /* @__PURE__ */ React76.createElement("div", { className: "mb-8 text-center animate-fade-in duration-500" }, emptyState ? emptyState : /* @__PURE__ */ React76.createElement("h1", { className: "text-4xl md:text-5xl font-heading text-gold mb-2 tracking-tight" }, "Welcome!")), /* @__PURE__ */ React76.createElement(
         ChatInput,
         {
           position: isEmpty ? "centered" : "bottom",
@@ -7008,11 +7063,11 @@ var ChatInterface = React74.forwardRef(
           initialInputValue,
           autoFocus
         }
-      )), /* @__PURE__ */ React74.createElement("div", { className: cx(
+      )), /* @__PURE__ */ React76.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
       ) }))),
-      isRightPanelOpen && /* @__PURE__ */ React74.createElement(
+      isRightPanelOpen && /* @__PURE__ */ React76.createElement(
         ToolPanelContainer,
         {
           topContent: renderToolContent(activeTools["top-right"]),
@@ -7023,7 +7078,7 @@ var ChatInterface = React74.forwardRef(
           initialTopPercent: 70
         }
       ),
-      hasRightTools && /* @__PURE__ */ React74.createElement(
+      hasRightTools && /* @__PURE__ */ React76.createElement(
         ToolSidebar,
         {
           tools: rightToolDefs,
@@ -7038,9 +7093,9 @@ var ChatInterface = React74.forwardRef(
 ChatInterface.displayName = "ChatInterface";
 
 // src/components/chat/MessageActions.tsx
-import React75, { useCallback as useCallback21, useState as useState22 } from "react";
-import { Check as Check3, Copy, Pencil, RotateCcw, Send as Send2, X as X6 } from "lucide-react";
-var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ React75.createElement(
+import React77, { useCallback as useCallback23, useState as useState23 } from "react";
+import { Check as Check4, Copy as Copy2, Pencil as Pencil3, RotateCcw as RotateCcw2, Send as Send3, X as X7 } from "lucide-react";
+var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ React77.createElement(
   "button",
   {
     type: "button",
@@ -7056,7 +7111,7 @@ var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @_
   },
   children
 );
-var MessageActions = React75.forwardRef(
+var MessageActions = React77.forwardRef(
   ({
     variant,
     content,
@@ -7068,12 +7123,12 @@ var MessageActions = React75.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [localIsEditing, setLocalIsEditing] = useState22(false);
-    const [localEditValue, setLocalEditValue] = useState22(content);
-    const [copied, setCopied] = useState22(false);
+    const [localIsEditing, setLocalIsEditing] = useState23(false);
+    const [localEditValue, setLocalEditValue] = useState23(content);
+    const { copied, copy } = useCopyToClipboard();
     const isEditing = controlledIsEditing ?? localIsEditing;
     const editValue = controlledEditValue ?? localEditValue;
-    const setIsEditing = useCallback21(
+    const setIsEditing = useCallback23(
       (value) => {
         if (onEditingChange) {
           onEditingChange(value);
@@ -7083,41 +7138,28 @@ var MessageActions = React75.forwardRef(
       },
       [onEditingChange]
     );
-    const setEditValue = useCallback21((value) => {
+    const setEditValue = useCallback23((value) => {
       setLocalEditValue(value);
     }, []);
-    const handleCopy = useCallback21(async () => {
-      try {
-        await navigator.clipboard.writeText(content);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
-      } catch {
-        const textArea = document.createElement("textarea");
-        textArea.value = content;
-        document.body.appendChild(textArea);
-        textArea.select();
-        document.execCommand("copy");
-        document.body.removeChild(textArea);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
-      }
-    }, [content]);
-    const handleStartEdit = useCallback21(() => {
+    const handleCopy = useCallback23(() => {
+      void copy(content);
+    }, [copy, content]);
+    const handleStartEdit = useCallback23(() => {
       setLocalEditValue(content);
       setIsEditing(true);
     }, [content, setIsEditing]);
-    const handleCancelEdit = useCallback21(() => {
+    const handleCancelEdit = useCallback23(() => {
       setIsEditing(false);
       setLocalEditValue(content);
     }, [content, setIsEditing]);
-    const handleSubmitEdit = useCallback21(() => {
+    const handleSubmitEdit = useCallback23(() => {
       const trimmed = editValue.trim();
       if (trimmed && trimmed !== content) {
         onEdit?.(trimmed);
       }
       setIsEditing(false);
     }, [editValue, content, onEdit, setIsEditing]);
-    const handleEditKeyDown = useCallback21(
+    const handleEditKeyDown = useCallback23(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
@@ -7130,19 +7172,19 @@ var MessageActions = React75.forwardRef(
     );
     const isUser = variant === "user";
     if (isUser && isEditing) {
-      return /* @__PURE__ */ React75.createElement(
+      return /* @__PURE__ */ React77.createElement(
         "div",
         {
           ref,
           className: cx("mt-2", className),
           ...rest
         },
-        /* @__PURE__ */ React75.createElement(
+        /* @__PURE__ */ React77.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__ */ React75.createElement(
+          /* @__PURE__ */ React77.createElement(
             "textarea",
             {
               value: editValue,
@@ -7153,15 +7195,15 @@ var MessageActions = React75.forwardRef(
               rows: 2
             }
           ),
-          /* @__PURE__ */ React75.createElement("div", { className: "absolute right-2 bottom-2 flex gap-1" }, /* @__PURE__ */ React75.createElement(
+          /* @__PURE__ */ React77.createElement("div", { className: "absolute right-2 bottom-2 flex gap-1" }, /* @__PURE__ */ React77.createElement(
             ActionButton2,
             {
               onClick: handleCancelEdit,
               label: "Cancel edit",
               className: "text-silver/60 hover:text-error"
             },
-            /* @__PURE__ */ React75.createElement(X6, { className: "w-4 h-4" })
-          ), /* @__PURE__ */ React75.createElement(
+            /* @__PURE__ */ React77.createElement(X7, { className: "w-4 h-4" })
+          ), /* @__PURE__ */ React77.createElement(
             ActionButton2,
             {
               onClick: handleSubmitEdit,
@@ -7169,13 +7211,13 @@ var MessageActions = React75.forwardRef(
               className: "text-silver/60 hover:text-gold",
               disabled: !editValue.trim() || editValue.trim() === content
             },
-            /* @__PURE__ */ React75.createElement(Send2, { className: "w-4 h-4" })
+            /* @__PURE__ */ React77.createElement(Send3, { className: "w-4 h-4" })
           ))
         ),
-        /* @__PURE__ */ React75.createElement("p", { className: "text-xs text-silver/50 mt-1" }, "Press Enter to submit, Esc to cancel. This will create a new branch.")
+        /* @__PURE__ */ React77.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__ */ React75.createElement(
+    return /* @__PURE__ */ React77.createElement(
       "div",
       {
         ref,
@@ -7186,18 +7228,18 @@ var MessageActions = React75.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ React75.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ React75.createElement(Check3, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ React75.createElement(Copy, { className: "w-3.5 h-3.5" })),
-      isUser && onEdit && /* @__PURE__ */ React75.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ React75.createElement(Pencil, { className: "w-3.5 h-3.5" })),
-      !isUser && onRetry && /* @__PURE__ */ React75.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ React75.createElement(RotateCcw, { className: "w-3.5 h-3.5" }))
+      /* @__PURE__ */ React77.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ React77.createElement(Check4, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ React77.createElement(Copy2, { className: "w-3.5 h-3.5" })),
+      isUser && onEdit && /* @__PURE__ */ React77.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ React77.createElement(Pencil3, { className: "w-3.5 h-3.5" })),
+      !isUser && onRetry && /* @__PURE__ */ React77.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ React77.createElement(RotateCcw2, { className: "w-3.5 h-3.5" }))
     );
   }
 );
 MessageActions.displayName = "MessageActions";
 
 // src/components/chat/BranchNavigator.tsx
-import React76 from "react";
-import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, GitBranch } from "lucide-react";
-var BranchNavigator = React76.forwardRef(
+import React78 from "react";
+import { ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight5, GitBranch as GitBranch3 } from "lucide-react";
+var BranchNavigator = React78.forwardRef(
   ({
     current,
     total,
@@ -7216,7 +7258,7 @@ var BranchNavigator = React76.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__ */ React76.createElement(
+    return /* @__PURE__ */ React78.createElement(
       "div",
       {
         ref,
@@ -7228,8 +7270,8 @@ var BranchNavigator = React76.forwardRef(
         "aria-label": "Branch navigation",
         ...rest
       },
-      showIcon && /* @__PURE__ */ React76.createElement(GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
-      /* @__PURE__ */ React76.createElement(
+      showIcon && /* @__PURE__ */ React78.createElement(GitBranch3, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
+      /* @__PURE__ */ React78.createElement(
         "button",
         {
           type: "button",
@@ -7242,10 +7284,10 @@ var BranchNavigator = React76.forwardRef(
           ),
           "aria-label": "Previous branch"
         },
-        /* @__PURE__ */ React76.createElement(ChevronLeft2, { className: iconSize })
+        /* @__PURE__ */ React78.createElement(ChevronLeft4, { className: iconSize })
       ),
-      /* @__PURE__ */ React76.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
-      /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React78.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
+      /* @__PURE__ */ React78.createElement(
         "button",
         {
           type: "button",
@@ -7258,7 +7300,7 @@ var BranchNavigator = React76.forwardRef(
           ),
           "aria-label": "Next branch"
         },
-        /* @__PURE__ */ React76.createElement(ChevronRight3, { className: iconSize })
+        /* @__PURE__ */ React78.createElement(ChevronRight5, { className: iconSize })
       )
     );
   }
@@ -7266,16 +7308,16 @@ var BranchNavigator = React76.forwardRef(
 BranchNavigator.displayName = "BranchNavigator";
 
 // src/components/BrandIcon.tsx
-import React77 from "react";
+import React79 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 = React77.forwardRef(
+var BrandIcon = React79.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__ */ React77.createElement(
+    return /* @__PURE__ */ React79.createElement(
       "div",
       {
         ref,
@@ -7294,17 +7336,17 @@ var BrandIcon = React77.forwardRef(
 BrandIcon.displayName = "BrandIcon";
 
 // src/components/ColorSwatch.tsx
-import React78 from "react";
-var ColorSwatch = React78.forwardRef(
+import React80 from "react";
+var ColorSwatch = React80.forwardRef(
   ({ color, label, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React78.createElement(
+    return /* @__PURE__ */ React80.createElement(
       "div",
       {
         ref,
         className: cx("flex flex-col items-center gap-2", className),
         ...rest
       },
-      /* @__PURE__ */ React78.createElement(
+      /* @__PURE__ */ React80.createElement(
         "div",
         {
           className: "h-16 w-16 border-2 border-ash rounded-none shadow-sm",
@@ -7312,22 +7354,22 @@ var ColorSwatch = React78.forwardRef(
           "aria-label": label || color
         }
       ),
-      label && /* @__PURE__ */ React78.createElement("span", { className: "text-xs text-silver font-medium" }, label)
+      label && /* @__PURE__ */ React80.createElement("span", { className: "text-xs text-silver font-medium" }, label)
     );
   }
 );
 ColorSwatch.displayName = "ColorSwatch";
 
 // src/components/SectionHeading.tsx
-import React79 from "react";
+import React81 from "react";
 var levelStyles = {
   h2: "text-2xl mb-4",
   h3: "text-xl mb-3"
 };
-var SectionHeading = React79.forwardRef(
+var SectionHeading = React81.forwardRef(
   ({ level = "h2", children, className, ...rest }, ref) => {
     const Component = level;
-    return /* @__PURE__ */ React79.createElement(
+    return /* @__PURE__ */ React81.createElement(
       Component,
       {
         ref,
@@ -7383,6 +7425,7 @@ export {
   ChatView,
   CheckSquareIcon,
   Checkbox,
+  Checkpoint,
   ChevronLeftIcon,
   ChevronRightIcon,
   CloseIcon,
@@ -7396,6 +7439,7 @@ export {
   EmptySquareIcon,
   ExpandIcon,
   FileChip,
+  GreyedDivider,
   HelperText,
   HistoryIcon,
   HistoryPanel,
@@ -7473,19 +7517,22 @@ export {
   ToolSidebar,
   Tooltip,
   VideoCard,
-  addMessageToTree,
+  addNodeToTree,
   areAllTasksSettled,
   createEmptyTree,
   createPreviewUrl,
+  findAncestor,
   generateId,
-  getActivePathMessages,
+  getActivePath,
+  getGreyedFuture,
   getSiblingInfo,
   isBranchPoint,
   isImageFile,
   messagesToTree,
   revokePreviewUrl,
+  setActiveLeaf,
   switchBranch,
-  updateNodeContent,
+  updateMessageContent,
   useArtifactTreeNavigation,
   useResizable,
   useScrollAnchor,