@lukeashford/aurelius 4.0.0 → 4.2.0

package/dist/index.mjs

@@ -3712,12 +3712,14 @@ import { Check as Check3, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRi
 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");
-  }
-});
+if (typeof window !== "undefined" && typeof DOMPurify.addHook === "function") {
+  DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+    if (node.tagName === "A") {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+  });
+}
 var DEFAULT_SANITIZE_CONFIG = {
   ALLOWED_TAGS: [
     "h1",
@@ -3794,6 +3796,9 @@ function injectStreamingCursor(html, cursorClassName) {
     CURSOR_BASE_CLASSES,
     cursorClassName
   )}" aria-hidden="true"></span>`;
+  if (typeof DOMParser === "undefined") {
+    return html + cursorHtml;
+  }
   const parser = new DOMParser();
   const doc = parser.parseFromString(`<div>${html}</div>`, "text/html");
   const container = doc.body.firstChild;
@@ -3830,7 +3835,7 @@ var MarkdownContent = React54.forwardRef(
       } else {
         htmlContent = content;
       }
-      const sanitized = htmlContent ? DOMPurify.sanitize(htmlContent, config) : "";
+      const sanitized = htmlContent && typeof DOMPurify.sanitize === "function" ? DOMPurify.sanitize(htmlContent, config) : htmlContent || "";
       if (isStreaming) {
         return injectStreamingCursor(sanitized, cursorClassName);
       }
@@ -4062,10 +4067,10 @@ var StreamingCursor = React56.forwardRef(
 StreamingCursor.displayName = "StreamingCursor";
 
 // src/components/chat/ChatInterface.tsx
-import React74, { useCallback as useCallback22, useEffect as useEffect16, useMemo as useMemo5, useRef as useRef15, useState as useState22 } 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 useCallback13, useRef as useRef7 } from "react";
@@ -4280,9 +4285,177 @@ var ThinkingIndicator = React57.forwardRef(
 );
 ThinkingIndicator.displayName = "ThinkingIndicator";
 
+// 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,
+        role: "group",
+        "aria-label": KIND_ARIA_LABELS[executionKind],
+        className: cx(
+          "group/checkpoint flex items-center gap-2 py-1.5 select-none",
+          muted && "opacity-60"
+        )
+      },
+      /* @__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 = React58.forwardRef(
-  ({ messages, latestUserMessageIndex, isStreaming, isThinking, onScroll, className, ...rest }, ref) => {
+var ChatView = React60.forwardRef(
+  function ChatView2({ items, latestUserMessageIndex, isStreaming, isThinking, onScroll, className, ...rest }, ref) {
     const { containerRef, anchorRef, scrollToAnchor } = useScrollAnchor({
       behavior: "smooth",
       block: "start"
@@ -4291,19 +4464,23 @@ var ChatView = React58.forwardRef(
       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 latestUserIdx = latestUserMessageIndex ?? messages.reduceRight((found, msg, idx) => {
-      if (found === -1 && msg.variant === "user") {
-        return idx;
-      }
-      return found;
+    const lastMessageIdx = items.reduceRight((found, item, idx) => {
+      return found === -1 && item.kind === "message" ? idx : found;
     }, -1);
-    const showThinking = isThinking && messages.length > 0 && messages[messages.length - 1]?.variant === "user";
-    return /* @__PURE__ */ React58.createElement(
+    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),
@@ -4315,27 +4492,40 @@ var ChatView = React58.forwardRef(
         ),
         ...rest
       },
-      /* @__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) => {
+      /* @__PURE__ */ React60.createElement("div", { ref: contentRef, className: "relative flex flex-col gap-3" }, items.map((item, index) => {
         const isAnchor = index === latestUserIdx;
-        const isLastMessage = index === messages.length - 1;
+        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__ */ React58.createElement(
+        return /* @__PURE__ */ React60.createElement(
           "div",
           {
-            key: id ?? `msg-${index}`,
-            ref: isAnchor ? anchorRef : void 0,
-            className: isAnchor ? "scroll-mt-4" : void 0
+            key: id,
+            ref: wrapperRef,
+            className: cx(wrapperClass, muted && "opacity-60")
           },
-          /* @__PURE__ */ React58.createElement(
+          /* @__PURE__ */ React60.createElement(
             Message,
             {
               variant,
@@ -4348,8 +4538,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,
@@ -4364,7 +4554,7 @@ var ChatView = React58.forwardRef(
 ChatView.displayName = "ChatView";
 
 // src/components/chat/ChatInput.tsx
-import React59, { useCallback as useCallback15, useEffect as useEffect10, useRef as useRef9, useState as useState14 } from "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
@@ -4377,159 +4567,20 @@ function createPreviewUrl(file) {
   }
   return void 0;
 }
+function revokePreviewUrl(url) {
+  if (url) {
+    URL.revokeObjectURL(url);
+  }
+}
 function generateId() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return crypto.randomUUID();
   }
   return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
 }
-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);
-  }
-  return tree;
-}
-function isBranchPoint(tree, nodeId) {
-  const node = tree.nodes[nodeId];
-  return node ? node.children.length > 1 : false;
-}
 
 // src/components/chat/ChatInput.tsx
-var ChatInput = React59.forwardRef(
+var ChatInput = React61.forwardRef(
   ({
     position = "bottom",
     placeholder = "Send a message...",
@@ -4674,7 +4725,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,
@@ -4686,12 +4737,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",
@@ -4702,9 +4753,9 @@ var ChatInput = React59.forwardRef(
             notice.variant === "warning" ? "text-gold" : "text-error"
           )
         },
-        /* @__PURE__ */ React59.createElement(X6, { className: "w-3 h-3" })
+        /* @__PURE__ */ React61.createElement(X6, { className: "w-3 h-3" })
       )),
-      /* @__PURE__ */ React59.createElement(
+      /* @__PURE__ */ React61.createElement(
         "div",
         {
           className: cx(
@@ -4719,7 +4770,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,
@@ -4727,14 +4778,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",
@@ -4746,8 +4797,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,
@@ -4758,7 +4809,7 @@ var ChatInput = React59.forwardRef(
             className: "hidden",
             "aria-hidden": "true"
           }
-        )), /* @__PURE__ */ React59.createElement(
+        )), /* @__PURE__ */ React61.createElement(
           "textarea",
           {
             ref: textareaRef,
@@ -4776,7 +4827,7 @@ var ChatInput = React59.forwardRef(
             ),
             style: { maxHeight: 200 }
           }
-        ), isStreaming ? /* @__PURE__ */ React59.createElement(
+        ), isStreaming ? /* @__PURE__ */ React61.createElement(
           "button",
           {
             type: "button",
@@ -4787,8 +4838,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",
@@ -4801,7 +4852,7 @@ var ChatInput = React59.forwardRef(
             ),
             "aria-label": "Send message"
           },
-          /* @__PURE__ */ React59.createElement(Send2, { className: "w-5 h-5" })
+          /* @__PURE__ */ React61.createElement(Send2, { className: "w-5 h-5" })
         ))
       )
     );
@@ -4810,14 +4861,14 @@ var ChatInput = React59.forwardRef(
 ChatInput.displayName = "ChatInput";
 
 // src/components/chat/ArtifactsPanel.tsx
-import React69, { useCallback as useCallback17, useEffect as useEffect12, useRef as useRef11, useState as useState17 } 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",
@@ -4829,7 +4880,7 @@ function resolveAspectRatio(ratio) {
   }
   return ratio.replace("/", " / ");
 }
-var ImageCard = React60.forwardRef(
+var ImageCard = React62.forwardRef(
   ({
     src,
     alt = "",
@@ -4845,7 +4896,7 @@ var ImageCard = React60.forwardRef(
     loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React60.createElement(
+    return /* @__PURE__ */ React62.createElement(
       Card,
       {
         ref,
@@ -4853,13 +4904,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,
@@ -4869,7 +4920,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"
@@ -4877,7 +4928,7 @@ var ImageCard = React60.forwardRef(
           overlay
         ))
       ),
-      /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React62.createElement(
         Card.Header,
         {
           title,
@@ -4885,14 +4936,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",
@@ -4905,7 +4956,7 @@ function resolveAspectRatio2(ratio) {
   }
   return ratio.replace("/", " / ");
 }
-var VideoCard = React61.forwardRef(
+var VideoCard = React63.forwardRef(
   ({
     src,
     title,
@@ -4925,7 +4976,7 @@ var VideoCard = React61.forwardRef(
     loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React61.createElement(
+    return /* @__PURE__ */ React63.createElement(
       Card,
       {
         ref,
@@ -4933,13 +4984,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,
@@ -4956,7 +5007,7 @@ var VideoCard = React61.forwardRef(
           }
         )
       ),
-      /* @__PURE__ */ React61.createElement(
+      /* @__PURE__ */ React63.createElement(
         Card.Header,
         {
           title,
@@ -4964,17 +5015,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,
@@ -4993,7 +5044,7 @@ var AudioCard = React62.forwardRef(
     loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React62.createElement(
+    return /* @__PURE__ */ React64.createElement(
       Card,
       {
         ref,
@@ -5001,10 +5052,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,
@@ -5019,7 +5070,7 @@ var AudioCard = React62.forwardRef(
           ...playerProps
         }
       ))),
-      /* @__PURE__ */ React62.createElement(
+      /* @__PURE__ */ React64.createElement(
         Card.Header,
         {
           title,
@@ -5027,16 +5078,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,
@@ -5049,7 +5100,7 @@ var PdfCard = React63.forwardRef(
     loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React63.createElement(
+    return /* @__PURE__ */ React65.createElement(
       Card,
       {
         ref,
@@ -5057,13 +5108,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`,
@@ -5072,23 +5123,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",
@@ -5102,28 +5153,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,
@@ -5131,20 +5182,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 }))
       )
     );
   }
@@ -5152,8 +5203,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,
@@ -5165,7 +5216,7 @@ var TextCard = React65.forwardRef(
     loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React65.createElement(
+    return /* @__PURE__ */ React67.createElement(
       Card,
       {
         ref,
@@ -5173,20 +5224,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,
@@ -5224,7 +5275,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 = {
@@ -5242,7 +5293,7 @@ var ArtifactCard = React66.forwardRef(
     const renderContent = () => {
       switch (artifact.type) {
         case "IMAGE":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             ImageCard,
             {
               ...commonProps,
@@ -5252,7 +5303,7 @@ var ArtifactCard = React66.forwardRef(
             }
           );
         case "VIDEO":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             VideoCard,
             {
               ...commonProps,
@@ -5262,7 +5313,7 @@ var ArtifactCard = React66.forwardRef(
             }
           );
         case "AUDIO":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             AudioCard,
             {
               ...commonProps,
@@ -5271,7 +5322,7 @@ var ArtifactCard = React66.forwardRef(
             }
           );
         case "PDF":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             PdfCard,
             {
               ...commonProps,
@@ -5279,7 +5330,7 @@ var ArtifactCard = React66.forwardRef(
             }
           );
         case "SCRIPT":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             ScriptCard,
             {
               ...commonProps,
@@ -5288,7 +5339,7 @@ var ArtifactCard = React66.forwardRef(
             }
           );
         case "TEXT":
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             TextCard,
             {
               ...commonProps,
@@ -5306,7 +5357,7 @@ var ArtifactCard = React66.forwardRef(
       }
     };
     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,
@@ -5319,7 +5370,7 @@ var ArtifactCard = React66.forwardRef(
         onClick: isCardExpandable ? handleExpand : void 0,
         ...props
       },
-      onExpand && /* @__PURE__ */ React66.createElement(
+      onExpand && /* @__PURE__ */ React68.createElement(
         "button",
         {
           onClick: handleExpand,
@@ -5330,7 +5381,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()
     );
@@ -5339,10 +5390,10 @@ var ArtifactCard = React66.forwardRef(
 ArtifactCard.displayName = "ArtifactCard";
 
 // src/components/ArtifactGroup.tsx
-import React67, { useEffect as useEffect11, useRef as useRef10, useState as useState15 } 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;
@@ -5364,21 +5415,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,
@@ -5398,21 +5449,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",
@@ -5426,13 +5477,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,
@@ -5442,18 +5493,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,
@@ -5461,8 +5512,8 @@ 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))
     );
   }
 );
@@ -5515,41 +5566,41 @@ function ArtifactModal({
       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 || "",
@@ -5557,20 +5608,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 || "",
@@ -5580,7 +5631,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,
@@ -5598,7 +5649,7 @@ function NodeRenderer({
   onGroupClick
 }) {
   if (node.type === "ARTIFACT" && node.artifact) {
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React71.createElement(
       ArtifactCard,
       {
         artifact: node.artifact,
@@ -5608,10 +5659,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,
@@ -5622,7 +5673,7 @@ function NodeRenderer({
   }
   return null;
 }
-var ArtifactsPanel = React69.forwardRef(
+var ArtifactsPanel = React71.forwardRef(
   ({
     nodes,
     loading,
@@ -5657,7 +5708,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,
@@ -5668,19 +5719,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,
@@ -5694,8 +5745,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,
@@ -5711,7 +5762,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",
@@ -5720,7 +5771,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),
@@ -5730,18 +5781,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,
@@ -5752,7 +5803,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,
@@ -5765,7 +5816,7 @@ var ArtifactsPanel = React69.forwardRef(
           )
         )
       )
-    ), expandedArtifact && /* @__PURE__ */ React69.createElement(
+    ), expandedArtifact && /* @__PURE__ */ React71.createElement(
       ArtifactModal,
       {
         artifact: expandedArtifact,
@@ -5775,8 +5826,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,
@@ -5793,8 +5844,8 @@ var ArtifactsPanelToggle = React69.forwardRef(({ artifactCount = 0, onExpand, cl
       "aria-label": "Expand artifacts panel",
       ...rest
     },
-    /* @__PURE__ */ React69.createElement(Image, { className: "w-5 h-5", "aria-hidden": true }),
-    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"
@@ -5806,7 +5857,7 @@ var ArtifactsPanelToggle = React69.forwardRef(({ artifactCount = 0, onExpand, cl
 ArtifactsPanelToggle.displayName = "ArtifactsPanelToggle";
 
 // src/components/chat/HistoryPanel.tsx
-import React70, { useCallback as useCallback18, useEffect as useEffect13, useMemo as useMemo3, useRef as useRef12, useState as useState18 } 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) {
@@ -5854,7 +5905,7 @@ function ProjectFilter({
   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",
@@ -5870,9 +5921,9 @@ function ProjectFilter({
         "transition-colors duration-150 min-w-0"
       )
     },
-    /* @__PURE__ */ React70.createElement("span", { className: "truncate" }, label),
-    /* @__PURE__ */ React70.createElement(ChevronDown2, { className: "w-3 h-3 shrink-0", "aria-hidden": true })
-  ), 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",
@@ -5882,7 +5933,7 @@ function ProjectFilter({
         "max-h-60 overflow-y-auto"
       )
     },
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React72.createElement(
       "button",
       {
         type: "button",
@@ -5900,7 +5951,7 @@ function ProjectFilter({
       },
       "All projects"
     ),
-    projects.map((p) => /* @__PURE__ */ React70.createElement(
+    projects.map((p) => /* @__PURE__ */ React72.createElement(
       "button",
       {
         key: p,
@@ -5952,7 +6003,7 @@ function ConversationRow({
     setIsEditing(false);
   }, [conversation.title]);
   if (isEditing) {
-    return /* @__PURE__ */ React70.createElement(
+    return /* @__PURE__ */ React72.createElement(
       "div",
       {
         className: cx(
@@ -5960,7 +6011,7 @@ function ConversationRow({
           conversation.isActive ? "bg-ash/40" : "bg-ash/20"
         )
       },
-      /* @__PURE__ */ React70.createElement(
+      /* @__PURE__ */ React72.createElement(
         "input",
         {
           ref: inputRef,
@@ -5985,10 +6036,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),
@@ -5998,7 +6049,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(
@@ -6008,8 +6059,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",
@@ -6022,7 +6073,7 @@ function ConversationRow({
         "transition-opacity duration-150"
       )
     },
-    /* @__PURE__ */ React70.createElement(Pencil2, { className: "w-3.5 h-3.5", "aria-hidden": true })
+    /* @__PURE__ */ React72.createElement(Pencil2, { className: "w-3.5 h-3.5", "aria-hidden": true })
   ));
 }
 function HistoryPanel({
@@ -6057,7 +6108,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,
@@ -6065,7 +6116,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,
@@ -6077,15 +6128,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,
@@ -6097,7 +6148,7 @@ function HistoryPanel({
 }
 
 // src/components/chat/TodosList.tsx
-import React71, { useCallback as useCallback19, useMemo as useMemo4, useState as useState19 } 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",
@@ -6109,16 +6160,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) {
@@ -6138,14 +6189,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(
@@ -6157,10 +6208,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) => {
@@ -6173,7 +6224,7 @@ 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] = useState19(false);
@@ -6198,7 +6249,7 @@ var TodosList = React71.forwardRef(
     if (tasks.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React73.createElement(
       "div",
       {
         ref,
@@ -6209,16 +6260,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",
@@ -6235,7 +6286,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")
       ))
     );
   }
@@ -6255,8 +6306,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}`);
@@ -6267,7 +6318,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,
@@ -6279,10 +6330,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,
@@ -6293,17 +6344,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 useCallback20, useEffect as useEffect14, useRef as useRef13, useState as useState20 } 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,
@@ -6366,7 +6417,7 @@ var ToolPanelContainer = React73.forwardRef(
         document.body.style.userSelect = "";
       };
     }, [isResizingHeight, resizeHeight, stopHeightResize]);
-    return /* @__PURE__ */ React73.createElement(
+    return /* @__PURE__ */ React75.createElement(
       "div",
       {
         ref: composeRefs(containerRef, ref),
@@ -6378,7 +6429,7 @@ var ToolPanelContainer = React73.forwardRef(
         style: width ? { width } : void 0,
         ...rest
       },
-      /* @__PURE__ */ React73.createElement(
+      /* @__PURE__ */ React75.createElement(
         "div",
         {
           onMouseDown: onResizeStart,
@@ -6389,7 +6440,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",
@@ -6397,7 +6448,7 @@ var ToolPanelContainer = React73.forwardRef(
         },
         topContent
       ),
-      hasBoth && /* @__PURE__ */ React73.createElement(
+      hasBoth && /* @__PURE__ */ React75.createElement(
         "div",
         {
           onMouseDown: startHeightResize,
@@ -6409,7 +6460,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",
@@ -6481,8 +6532,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,
@@ -6491,6 +6684,8 @@ var ChatInterface = React74.forwardRef(
     onMessageSubmit,
     onEditMessage,
     onRetryMessage,
+    onJumpToCheckpoint,
+    onJumpToLatest,
     onStop,
     onSelectConversation,
     onNewChat,
@@ -6561,11 +6756,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"
         }
@@ -6603,20 +6798,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;
@@ -6644,64 +6843,113 @@ var ChatInterface = React74.forwardRef(
     }, [artifactNodes, tasks, isPanelControlled]);
     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
-    ]);
+      },
+      [
+        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]
@@ -6720,7 +6968,7 @@ var ChatInterface = React74.forwardRef(
       }
       switch (toolId) {
         case "history":
-          return /* @__PURE__ */ React74.createElement(
+          return /* @__PURE__ */ React76.createElement(
             HistoryPanel,
             {
               conversations,
@@ -6730,7 +6978,7 @@ var ChatInterface = React74.forwardRef(
             }
           );
         case "artifacts":
-          return /* @__PURE__ */ React74.createElement(
+          return /* @__PURE__ */ React76.createElement(
             ArtifactsPanel,
             {
               nodes: artifactNodes,
@@ -6738,7 +6986,7 @@ var ChatInterface = React74.forwardRef(
             }
           );
         case "todos":
-          return tasks.length > 0 ? /* @__PURE__ */ React74.createElement(
+          return tasks.length > 0 ? /* @__PURE__ */ React76.createElement(
             TodosList,
             {
               tasks,
@@ -6746,21 +6994,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,
@@ -6769,7 +7017,7 @@ var ChatInterface = React74.forwardRef(
           side: "left"
         }
       ),
-      isLeftPanelOpen && /* @__PURE__ */ React74.createElement(
+      isLeftPanelOpen && /* @__PURE__ */ React76.createElement(
         ToolPanelContainer,
         {
           topContent: renderToolContent(activeTools["top-left"]),
@@ -6780,28 +7028,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",
@@ -6820,11 +7068,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"]),
@@ -6835,7 +7083,7 @@ var ChatInterface = React74.forwardRef(
           initialTopPercent: 70
         }
       ),
-      hasRightTools && /* @__PURE__ */ React74.createElement(
+      hasRightTools && /* @__PURE__ */ React76.createElement(
         ToolSidebar,
         {
           tools: rightToolDefs,
@@ -6850,9 +7098,9 @@ var ChatInterface = React74.forwardRef(
 ChatInterface.displayName = "ChatInterface";
 
 // src/components/chat/MessageActions.tsx
-import React75, { useCallback as useCallback23, useState as useState23 } from "react";
+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__ */ React75.createElement(
+var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ React77.createElement(
   "button",
   {
     type: "button",
@@ -6868,7 +7116,7 @@ var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @_
   },
   children
 );
-var MessageActions = React75.forwardRef(
+var MessageActions = React77.forwardRef(
   ({
     variant,
     content,
@@ -6929,19 +7177,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,
@@ -6952,15 +7200,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(X7, { className: "w-4 h-4" })
-          ), /* @__PURE__ */ React75.createElement(
+            /* @__PURE__ */ React77.createElement(X7, { className: "w-4 h-4" })
+          ), /* @__PURE__ */ React77.createElement(
             ActionButton2,
             {
               onClick: handleSubmitEdit,
@@ -6968,13 +7216,13 @@ var MessageActions = React75.forwardRef(
               className: "text-silver/60 hover:text-gold",
               disabled: !editValue.trim() || editValue.trim() === content
             },
-            /* @__PURE__ */ React75.createElement(Send3, { 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,
@@ -6985,18 +7233,18 @@ var MessageActions = React75.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ React75.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ React75.createElement(Check4, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ React75.createElement(Copy2, { className: "w-3.5 h-3.5" })),
-      isUser && onEdit && /* @__PURE__ */ React75.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ React75.createElement(Pencil3, { className: "w-3.5 h-3.5" })),
-      !isUser && onRetry && /* @__PURE__ */ React75.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ React75.createElement(RotateCcw2, { 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 ChevronLeft3, ChevronRight as ChevronRight4, GitBranch as GitBranch2 } 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,
@@ -7015,7 +7263,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,
@@ -7027,8 +7275,8 @@ var BranchNavigator = React76.forwardRef(
         "aria-label": "Branch navigation",
         ...rest
       },
-      showIcon && /* @__PURE__ */ React76.createElement(GitBranch2, { 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",
@@ -7041,10 +7289,10 @@ var BranchNavigator = React76.forwardRef(
           ),
           "aria-label": "Previous branch"
         },
-        /* @__PURE__ */ React76.createElement(ChevronLeft3, { 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",
@@ -7057,7 +7305,7 @@ var BranchNavigator = React76.forwardRef(
           ),
           "aria-label": "Next branch"
         },
-        /* @__PURE__ */ React76.createElement(ChevronRight4, { className: iconSize })
+        /* @__PURE__ */ React78.createElement(ChevronRight5, { className: iconSize })
       )
     );
   }
@@ -7065,16 +7313,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,
@@ -7093,17 +7341,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",
@@ -7111,22 +7359,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,
@@ -7182,6 +7430,7 @@ export {
   ChatView,
   CheckSquareIcon,
   Checkbox,
+  Checkpoint,
   ChevronLeftIcon,
   ChevronRightIcon,
   CloseIcon,
@@ -7195,6 +7444,7 @@ export {
   EmptySquareIcon,
   ExpandIcon,
   FileChip,
+  GreyedDivider,
   HelperText,
   HistoryIcon,
   HistoryPanel,
@@ -7272,16 +7522,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,