@lukeashford/aurelius 4.1.0 → 4.3.0

package/dist/index.js

@@ -1487,42 +1487,84 @@ function getFileIcon(type) {
   }
   return import_lucide_react2.File;
 }
-var statusStyles = {
+var statusBorderClass = {
   pending: "border-silver/30",
   uploading: "border-gold/50",
-  complete: "border-success/50",
-  error: "border-error/50"
+  uploaded: "border-info/50",
+  analyzing: "border-info/50",
+  analyzed: "border-success/50",
+  upload_failed: "border-error/50",
+  analysis_failed: "border-error/50"
 };
+var statusHoverLabel = {
+  pending: null,
+  uploading: "Uploading...",
+  uploaded: "Upload complete. Analyzing...",
+  analyzing: "Upload complete. Analyzing...",
+  analyzed: null,
+  upload_failed: "Upload failed. Remove and try again.",
+  analysis_failed: "Analysis failed. Provide a description in your next message."
+};
+function isErrorStatus(status) {
+  return status === "upload_failed" || status === "analysis_failed";
+}
 var FileChip = import_react16.default.forwardRef(
   ({
     name,
     size,
     type,
-    status = "complete",
+    status = "analyzed",
     previewUrl,
     onRemove,
     removable = true,
     error,
+    artifactId,
+    onOpen,
     className,
+    title,
     ...rest
   }, ref) => {
     const Icon = getFileIcon(type);
     const isImage = type?.startsWith("image/");
     const showPreview = isImage && previewUrl;
+    const clickable = !!(artifactId && onOpen);
+    const hoverLabel = statusHoverLabel[status];
+    const tooltip = title ?? hoverLabel ?? name;
+    const showError = isErrorStatus(status);
+    const handleClick = () => {
+      if (clickable) {
+        onOpen(artifactId);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (!clickable) {
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onOpen(artifactId);
+      }
+    };
     return /* @__PURE__ */ import_react16.default.createElement(
       "div",
       {
+        ...rest,
         ref,
         className: cx(
           "group relative inline-flex items-center gap-2 px-2 py-1.5",
           "bg-charcoal border text-sm text-white",
           "transition-colors duration-150",
-          statusStyles[status],
-          status === "error" && "bg-error/10",
+          statusBorderClass[status],
+          showError && "bg-error/10",
+          clickable && "cursor-pointer hover:bg-graphite",
           className
         ),
-        role: "listitem",
-        ...rest
+        role: clickable ? "button" : "listitem",
+        tabIndex: clickable ? 0 : void 0,
+        onClick: clickable ? handleClick : void 0,
+        onKeyDown: clickable ? handleKeyDown : void 0,
+        title: tooltip,
+        "aria-label": hoverLabel ? `${name}: ${hoverLabel}` : name
       },
       showPreview ? /* @__PURE__ */ import_react16.default.createElement("div", { className: "w-8 h-8 flex-shrink-0 overflow-hidden bg-slate" }, /* @__PURE__ */ import_react16.default.createElement(
         "img",
@@ -1533,10 +1575,11 @@ var FileChip = import_react16.default.forwardRef(
         }
       )) : /* @__PURE__ */ import_react16.default.createElement(Icon, { className: cx(
         "w-4 h-4 flex-shrink-0",
-        status === "error" ? "text-error" : "text-silver"
+        showError ? "text-error" : "text-silver"
       ) }),
-      /* @__PURE__ */ import_react16.default.createElement("div", { className: "flex flex-col min-w-0 flex-1" }, /* @__PURE__ */ import_react16.default.createElement("span", { className: "truncate max-w-40", title: name }, name), size !== void 0 && status !== "error" && /* @__PURE__ */ import_react16.default.createElement("span", { className: "text-xs text-silver/60" }, formatBytes(size)), status === "error" && error && /* @__PURE__ */ import_react16.default.createElement("span", { className: "text-xs text-error truncate", title: error }, error)),
+      /* @__PURE__ */ import_react16.default.createElement("div", { className: "flex flex-col min-w-0 flex-1" }, /* @__PURE__ */ import_react16.default.createElement("span", { className: "truncate max-w-40", title: name }, name), size !== void 0 && !showError && /* @__PURE__ */ import_react16.default.createElement("span", { className: "text-xs text-silver/60" }, formatBytes(size)), showError && error && /* @__PURE__ */ import_react16.default.createElement("span", { className: "text-xs text-error truncate", title: error }, error)),
       status === "uploading" && /* @__PURE__ */ import_react16.default.createElement(import_lucide_react2.Loader2, { className: "w-3.5 h-3.5 text-gold animate-spin flex-shrink-0" }),
+      (status === "uploaded" || status === "analyzing") && /* @__PURE__ */ import_react16.default.createElement(import_lucide_react2.Loader2, { className: "w-3.5 h-3.5 text-info animate-spin flex-shrink-0" }),
       status === "pending" && /* @__PURE__ */ import_react16.default.createElement("div", { className: "w-2 h-2 rounded-full bg-silver/50 flex-shrink-0" }),
       removable && onRemove && /* @__PURE__ */ import_react16.default.createElement(
         "button",
@@ -1569,6 +1612,7 @@ var AttachmentPreview = import_react17.default.forwardRef(
     onRemove,
     removable = true,
     maxVisible,
+    onOpen,
     className,
     ...rest
   }, ref) => {
@@ -1597,7 +1641,9 @@ var AttachmentPreview = import_react17.default.forwardRef(
           previewUrl: attachment.previewUrl,
           error: attachment.error,
           removable,
-          onRemove: onRemove ? () => onRemove(attachment.id) : void 0
+          onRemove: onRemove ? () => onRemove(attachment.id) : void 0,
+          artifactId: attachment.artifactId,
+          onOpen
         }
       )),
       hiddenCount > 0 && /* @__PURE__ */ import_react17.default.createElement(
@@ -3871,12 +3917,14 @@ var import_lucide_react11 = require("lucide-react");
 var import_react55 = __toESM(require("react"));
 var import_dompurify = __toESM(require("dompurify"));
 var import_marked = require("marked");
-import_dompurify.default.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName === "A") {
-    node.setAttribute("target", "_blank");
-    node.setAttribute("rel", "noopener noreferrer");
-  }
-});
+if (typeof window !== "undefined" && typeof import_dompurify.default.addHook === "function") {
+  import_dompurify.default.addHook("afterSanitizeAttributes", (node) => {
+    if (node.tagName === "A") {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+  });
+}
 var DEFAULT_SANITIZE_CONFIG = {
   ALLOWED_TAGS: [
     "h1",
@@ -3953,6 +4001,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;
@@ -3989,7 +4040,7 @@ var MarkdownContent = import_react55.default.forwardRef(
       } else {
         htmlContent = content;
       }
-      const sanitized = htmlContent ? import_dompurify.default.sanitize(htmlContent, config) : "";
+      const sanitized = htmlContent && typeof import_dompurify.default.sanitize === "function" ? import_dompurify.default.sanitize(htmlContent, config) : htmlContent || "";
       if (isStreaming) {
         return injectStreamingCursor(sanitized, cursorClassName);
       }
@@ -4044,6 +4095,8 @@ var Message = import_react56.default.forwardRef(
     branchInfo,
     actions,
     hideActions,
+    attachments,
+    onAttachmentOpen,
     ...rest
   }, ref) => {
     const isUser = variant === "user";
@@ -4111,6 +4164,14 @@ var Message = import_react56.default.forwardRef(
         ),
         ...rest
       },
+      attachments && attachments.length > 0 && /* @__PURE__ */ import_react56.default.createElement("div", { className: cx("mb-1.5", isUser ? "self-end" : "self-start") }, /* @__PURE__ */ import_react56.default.createElement(
+        AttachmentPreview,
+        {
+          attachments,
+          removable: false,
+          onOpen: onAttachmentOpen
+        }
+      )),
       isUser && isEditing ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "w-full max-w-11/12" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "relative bg-gold" }, /* @__PURE__ */ import_react56.default.createElement(
         "textarea",
         {
@@ -4361,6 +4422,7 @@ var ThinkingIndicator = import_react60.default.forwardRef(
     isVisible = true,
     phraseInterval = 2500,
     phrases = THINKING_PHRASES,
+    manualLabel,
     className,
     ...rest
   }, ref) => {
@@ -4368,8 +4430,9 @@ var ThinkingIndicator = import_react60.default.forwardRef(
       () => Math.floor(Math.random() * phrases.length)
     );
     const [isTransitioning, setIsTransitioning] = (0, import_react60.useState)(false);
+    const isManual = manualLabel !== void 0;
     (0, import_react60.useEffect)(() => {
-      if (!isVisible || phrases.length <= 1) {
+      if (!isVisible || isManual || phrases.length <= 1) {
         return;
       }
       let fadeTimeout = null;
@@ -4387,7 +4450,7 @@ var ThinkingIndicator = import_react60.default.forwardRef(
           clearTimeout(fadeTimeout);
         }
       };
-    }, [isVisible, phrases.length, phraseInterval]);
+    }, [isVisible, isManual, phrases.length, phraseInterval]);
     if (!isVisible) {
       return null;
     }
@@ -4424,7 +4487,7 @@ var ThinkingIndicator = import_react60.default.forwardRef(
           style: { animationDelay: "300ms" }
         }
       )),
-      /* @__PURE__ */ import_react60.default.createElement(
+      isManual ? /* @__PURE__ */ import_react60.default.createElement("span", { className: "text-sm italic" }, manualLabel) : /* @__PURE__ */ import_react60.default.createElement(
         "span",
         {
           className: cx(
@@ -4446,13 +4509,15 @@ var KIND_ICONS = {
   task: import_lucide_react12.GitBranch,
   submit: import_lucide_react12.GitMerge,
   rename: import_lucide_react12.PencilLine,
-  init: import_lucide_react12.GitCommitVertical
+  init: import_lucide_react12.GitCommitVertical,
+  ingest: import_lucide_react12.Upload
 };
 var KIND_ARIA_LABELS = {
   task: "Task checkpoint",
   submit: "Submit checkpoint",
   rename: "Rename checkpoint",
-  init: "Project head checkpoint"
+  init: "Project head checkpoint",
+  ingest: "Upload batch checkpoint"
 };
 var Checkpoint = import_react61.default.forwardRef(
   function Checkpoint2({ name, executionKind, status = "completed", isActive, muted, branchInfo, onJumpHere }, ref) {
@@ -4601,7 +4666,16 @@ GreyedDivider.displayName = "GreyedDivider";
 
 // src/components/chat/ChatView.tsx
 var ChatView = import_react63.default.forwardRef(
-  function ChatView2({ items, latestUserMessageIndex, isStreaming, isThinking, onScroll, className, ...rest }, ref) {
+  function ChatView2({
+    items,
+    latestUserMessageIndex,
+    isStreaming,
+    isThinking,
+    thinkingLabel,
+    onScroll,
+    className,
+    ...rest
+  }, ref) {
     const { containerRef, anchorRef, scrollToAnchor } = useScrollAnchor({
       behavior: "smooth",
       block: "start"
@@ -4684,7 +4758,7 @@ var ChatView = import_react63.default.forwardRef(
             }
           )
         );
-      }), showThinking && /* @__PURE__ */ import_react63.default.createElement(ThinkingIndicator, { isVisible: true })),
+      }), showThinking && /* @__PURE__ */ import_react63.default.createElement(ThinkingIndicator, { isVisible: true, manualLabel: thinkingLabel })),
       /* @__PURE__ */ import_react63.default.createElement(
         "div",
         {
@@ -4869,8 +4943,8 @@ var ChatInput = import_react64.default.forwardRef(
     );
     const isCentered = position === "centered";
     const hasAttachments = attachments.length > 0;
-    const isUploading = attachments.some((a) => a.status === "uploading");
-    const canSubmit = value.trim() && !disabled && !isStreaming && !isUploading;
+    const isUploadIncomplete = attachments.some((a) => a.status === "pending" || a.status === "uploading" || a.status === "upload_failed");
+    const canSubmit = value.trim() && !disabled && !isStreaming && !isUploadIncomplete;
     return /* @__PURE__ */ import_react64.default.createElement(
       "div",
       {
@@ -5007,7 +5081,7 @@ var ChatInput = import_react64.default.forwardRef(
 ChatInput.displayName = "ChatInput";
 
 // src/components/chat/ArtifactsPanel.tsx
-var import_react75 = __toESM(require("react"));
+var import_react76 = __toESM(require("react"));
 var import_lucide_react17 = require("lucide-react");
 
 // src/components/ArtifactCard.tsx
@@ -5665,15 +5739,74 @@ var ArtifactVariantStack = import_react73.default.forwardRef(
 );
 ArtifactVariantStack.displayName = "ArtifactVariantStack";
 
-// src/components/chat/hooks/useArtifactTreeNavigation.ts
+// src/components/chat/hooks/useResizable.ts
 var import_react74 = require("react");
+function useResizable({
+  initialWidthPercent,
+  minWidthPercent,
+  maxWidthPercent,
+  direction
+}) {
+  const [widthPercent, setWidthPercent] = (0, import_react74.useState)(initialWidthPercent);
+  const [isResizing, setIsResizing] = (0, import_react74.useState)(false);
+  const lastX = (0, import_react74.useRef)(null);
+  const startResizing = (0, import_react74.useCallback)((e) => {
+    e.preventDefault();
+    setIsResizing(true);
+    lastX.current = e.clientX;
+  }, []);
+  const stopResizing = (0, import_react74.useCallback)(() => {
+    setIsResizing(false);
+    lastX.current = null;
+  }, []);
+  const resize = (0, import_react74.useCallback)(
+    (e) => {
+      if (!isResizing || lastX.current === null) {
+        return;
+      }
+      const deltaX = e.clientX - lastX.current;
+      const factor = direction === "right" ? 1 : -1;
+      const deltaPercent = deltaX / window.innerWidth * 100;
+      setWidthPercent((prevPercent) => {
+        const newPercent = prevPercent + deltaPercent * factor;
+        return Math.min(Math.max(newPercent, minWidthPercent), maxWidthPercent);
+      });
+      lastX.current = e.clientX;
+    },
+    [isResizing, direction, minWidthPercent, maxWidthPercent]
+  );
+  (0, import_react74.useEffect)(() => {
+    if (isResizing) {
+      window.addEventListener("mousemove", resize);
+      window.addEventListener("mouseup", stopResizing);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      window.removeEventListener("mousemove", resize);
+      window.removeEventListener("mouseup", stopResizing);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    }
+    return () => {
+      window.removeEventListener("mousemove", resize);
+      window.removeEventListener("mouseup", stopResizing);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isResizing, resize, stopResizing]);
+  const width = `${widthPercent}vw`;
+  return { width, widthPercent, isResizing, startResizing };
+}
+
+// src/components/chat/hooks/useArtifactTreeNavigation.ts
+var import_react75 = require("react");
 function useArtifactTreeNavigation(rootNodes) {
-  const [stack, setStack] = (0, import_react74.useState)([]);
-  const currentNodes = (0, import_react74.useMemo)(() => {
+  const [stack, setStack] = (0, import_react75.useState)([]);
+  const currentNodes = (0, import_react75.useMemo)(() => {
     if (stack.length === 0) return rootNodes;
     return stack[stack.length - 1].children;
   }, [rootNodes, stack]);
-  const breadcrumbs = (0, import_react74.useMemo)(() => {
+  const breadcrumbs = (0, import_react75.useMemo)(() => {
     const entries = [{ label: "Project", node: null }];
     for (const node of stack) {
       entries.push({ label: node.label, node });
@@ -5681,13 +5814,13 @@ function useArtifactTreeNavigation(rootNodes) {
     return entries;
   }, [stack]);
   const isAtRoot = stack.length === 0;
-  const navigateInto = (0, import_react74.useCallback)((node) => {
+  const navigateInto = (0, import_react75.useCallback)((node) => {
     setStack((prev) => [...prev, node]);
   }, []);
-  const navigateTo = (0, import_react74.useCallback)((index) => {
+  const navigateTo = (0, import_react75.useCallback)((index) => {
     setStack((prev) => prev.slice(0, index));
   }, []);
-  const navigateBack = (0, import_react74.useCallback)(() => {
+  const navigateBack = (0, import_react75.useCallback)(() => {
     setStack((prev) => prev.slice(0, -1));
   }, []);
   return {
@@ -5707,46 +5840,46 @@ function ArtifactModal({
   onClose
 }) {
   useEscapeKey(onClose);
-  const handleBackdropClick = (0, import_react75.useCallback)((e) => {
+  const handleBackdropClick = (0, import_react76.useCallback)((e) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   }, [onClose]);
-  return /* @__PURE__ */ import_react75.default.createElement(
+  return /* @__PURE__ */ import_react76.default.createElement(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center bg-void/90 backdrop-blur-sm animate-fade-in",
       onClick: handleBackdropClick
     },
-    /* @__PURE__ */ import_react75.default.createElement(
+    /* @__PURE__ */ import_react76.default.createElement(
       "div",
       {
         className: "relative w-11/12 h-5/6 max-w-6xl bg-charcoal border border-ash/40 flex flex-col overflow-hidden"
       },
-      /* @__PURE__ */ import_react75.default.createElement(
+      /* @__PURE__ */ import_react76.default.createElement(
         "div",
         {
           className: "flex items-center justify-between p-4 border-b border-ash/40 shrink-0"
         },
-        /* @__PURE__ */ import_react75.default.createElement("div", null, artifact.title && /* @__PURE__ */ import_react75.default.createElement("h3", { className: "text-sm font-semibold text-white" }, artifact.title), artifact.subtitle && /* @__PURE__ */ import_react75.default.createElement("p", { className: "text-xs text-silver" }, artifact.subtitle)),
-        /* @__PURE__ */ import_react75.default.createElement(
+        /* @__PURE__ */ import_react76.default.createElement("div", null, artifact.title && /* @__PURE__ */ import_react76.default.createElement("h3", { className: "text-sm font-semibold text-white" }, artifact.title), artifact.subtitle && /* @__PURE__ */ import_react76.default.createElement("p", { className: "text-xs text-silver" }, artifact.subtitle)),
+        /* @__PURE__ */ import_react76.default.createElement(
           "button",
           {
             onClick: onClose,
             className: "p-2 text-silver hover:text-white hover:bg-ash/20 transition-colors",
             "aria-label": "Close modal"
           },
-          /* @__PURE__ */ import_react75.default.createElement(CloseIcon, { className: "w-5 h-5" })
+          /* @__PURE__ */ import_react76.default.createElement(CloseIcon, { className: "w-5 h-5" })
         )
       ),
-      /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex-1 overflow-auto p-4" }, artifact.type === "IMAGE" && /* @__PURE__ */ import_react75.default.createElement(
+      /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex-1 overflow-auto p-4" }, artifact.type === "IMAGE" && /* @__PURE__ */ import_react76.default.createElement(
         "img",
         {
           src: artifact.url,
           alt: artifact.alt || "Artifact image",
           className: "max-w-full max-h-full object-contain mx-auto"
         }
-      ), artifact.type === "VIDEO" && /* @__PURE__ */ import_react75.default.createElement(
+      ), artifact.type === "VIDEO" && /* @__PURE__ */ import_react76.default.createElement(
         VideoCard,
         {
           src: artifact.url || "",
@@ -5754,20 +5887,20 @@ function ArtifactModal({
           controls: true,
           className: "max-w-full max-h-full mx-auto"
         }
-      ), artifact.type === "AUDIO" && /* @__PURE__ */ import_react75.default.createElement(
+      ), artifact.type === "AUDIO" && /* @__PURE__ */ import_react76.default.createElement(
         AudioCard,
         {
           src: artifact.url || "",
           controls: true,
           className: "max-w-xl mx-auto"
         }
-      ), artifact.type === "PDF" && /* @__PURE__ */ import_react75.default.createElement(
+      ), artifact.type === "PDF" && /* @__PURE__ */ import_react76.default.createElement(
         PdfCard,
         {
           src: artifact.url || "",
           className: "h-full border-0"
         }
-      ), artifact.type === "TEXT" && /* @__PURE__ */ import_react75.default.createElement(
+      ), artifact.type === "TEXT" && /* @__PURE__ */ import_react76.default.createElement(
         MarkdownContent,
         {
           content: artifact.inlineContent || "",
@@ -5777,7 +5910,7 @@ function ArtifactModal({
             artifact.mimeType === "text/plain" && "whitespace-pre-wrap"
           )
         }
-      ), artifact.type === "SCRIPT" && artifact.scriptElements && /* @__PURE__ */ import_react75.default.createElement(
+      ), artifact.type === "SCRIPT" && artifact.scriptElements && /* @__PURE__ */ import_react76.default.createElement(
         ScriptCard,
         {
           elements: artifact.scriptElements,
@@ -5788,6 +5921,20 @@ function ArtifactModal({
     )
   );
 }
+function findArtifactInNodes(nodes, artifactId) {
+  for (const node of nodes) {
+    if (node.type === "ARTIFACT" && node.artifact?.id === artifactId) {
+      return node.artifact;
+    }
+    if (node.children && node.children.length > 0) {
+      const found = findArtifactInNodes(node.children, artifactId);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
 function NodeRenderer({
   node,
   loading,
@@ -5795,7 +5942,7 @@ function NodeRenderer({
   onGroupClick
 }) {
   if (node.type === "ARTIFACT" && node.artifact) {
-    return /* @__PURE__ */ import_react75.default.createElement(
+    return /* @__PURE__ */ import_react76.default.createElement(
       ArtifactCard,
       {
         artifact: node.artifact,
@@ -5805,10 +5952,10 @@ function NodeRenderer({
     );
   }
   if (node.type === "GROUP") {
-    return /* @__PURE__ */ import_react75.default.createElement(ArtifactGroup, { node, onClick: onGroupClick });
+    return /* @__PURE__ */ import_react76.default.createElement(ArtifactGroup, { node, onClick: onGroupClick });
   }
   if (node.type === "VARIANT_SET") {
-    return /* @__PURE__ */ import_react75.default.createElement(
+    return /* @__PURE__ */ import_react76.default.createElement(
       ArtifactVariantStack,
       {
         node,
@@ -5819,42 +5966,59 @@ function NodeRenderer({
   }
   return null;
 }
-var ArtifactsPanel = import_react75.default.forwardRef(
+var ArtifactsPanel = import_react76.default.forwardRef(
   ({
     nodes,
     loading,
+    openArtifactId,
+    onArtifactClosed,
     className,
     ...rest
   }, ref) => {
-    const [expandedArtifact, setExpandedArtifact] = (0, import_react75.useState)(null);
-    const [zoomIndex, setZoomIndex] = (0, import_react75.useState)(ZOOM_LEVELS.length - 1);
+    const [expandedArtifact, setExpandedArtifact] = (0, import_react76.useState)(null);
+    const [zoomIndex, setZoomIndex] = (0, import_react76.useState)(ZOOM_LEVELS.length - 1);
     const treeNav = useArtifactTreeNavigation(nodes || []);
     const hasNodes = !!nodes && nodes.length > 0;
-    const handleExpandArtifact = (0, import_react75.useCallback)((artifact) => {
+    const handleExpandArtifact = (0, import_react76.useCallback)((artifact) => {
       setExpandedArtifact(artifact);
     }, []);
-    const handleGroupClick = (0, import_react75.useCallback)((node) => {
+    const handleGroupClick = (0, import_react76.useCallback)((node) => {
       treeNav.navigateInto(node);
     }, [treeNav]);
-    const zoomIn = (0, import_react75.useCallback)(() => {
+    (0, import_react76.useEffect)(() => {
+      if (!openArtifactId || !nodes) {
+        return;
+      }
+      const found = findArtifactInNodes(nodes, openArtifactId);
+      if (found) {
+        setExpandedArtifact(found);
+      }
+    }, [openArtifactId, nodes]);
+    const handleModalClose = (0, import_react76.useCallback)(() => {
+      setExpandedArtifact(null);
+      onArtifactClosed?.();
+    }, [onArtifactClosed]);
+    const zoomIn = (0, import_react76.useCallback)(() => {
       setZoomIndex((prev) => Math.min(prev + 1, ZOOM_LEVELS.length - 1));
     }, []);
-    const zoomOut = (0, import_react75.useCallback)(() => {
+    const zoomOut = (0, import_react76.useCallback)(() => {
       setZoomIndex((prev) => Math.max(prev - 1, 0));
     }, []);
     const currentZoom = ZOOM_LEVELS[zoomIndex];
-    const contentRef = (0, import_react75.useRef)(null);
-    const [contentHeight, setContentHeight] = (0, import_react75.useState)(void 0);
-    (0, import_react75.useEffect)(() => {
+    const contentRef = (0, import_react76.useRef)(null);
+    const [contentHeight, setContentHeight] = (0, import_react76.useState)(void 0);
+    (0, import_react76.useEffect)(() => {
       const el = contentRef.current;
-      if (!el) return;
+      if (!el) {
+        return;
+      }
       const observer = new ResizeObserver(([entry]) => {
         setContentHeight(entry.contentRect.height);
       });
       observer.observe(el);
       return () => observer.disconnect();
     }, []);
-    return /* @__PURE__ */ import_react75.default.createElement(import_react75.default.Fragment, null, /* @__PURE__ */ import_react75.default.createElement(
+    return /* @__PURE__ */ import_react76.default.createElement(import_react76.default.Fragment, null, /* @__PURE__ */ import_react76.default.createElement(
       "div",
       {
         ref,
@@ -5865,19 +6029,19 @@ var ArtifactsPanel = import_react75.default.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ import_react75.default.createElement(
+      /* @__PURE__ */ import_react76.default.createElement(
         "div",
         {
           className: "flex items-center justify-between p-4 border-b border-ash/40 shrink-0"
         },
-        /* @__PURE__ */ import_react75.default.createElement("h3", { className: "text-sm font-semibold text-white" }, "Artifacts"),
-        hasNodes && /* @__PURE__ */ import_react75.default.createElement(
+        /* @__PURE__ */ import_react76.default.createElement("h3", { className: "text-sm font-semibold text-white" }, "Artifacts"),
+        hasNodes && /* @__PURE__ */ import_react76.default.createElement(
           "div",
           {
             className: "flex items-center gap-0.5",
             "data-testid": "zoom-controls"
           },
-          /* @__PURE__ */ import_react75.default.createElement(
+          /* @__PURE__ */ import_react76.default.createElement(
             "button",
             {
               onClick: zoomOut,
@@ -5891,8 +6055,16 @@ var ArtifactsPanel = import_react75.default.forwardRef(
             },
             "\u2212"
           ),
-          /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-silver w-8 text-center tabular-nums", "data-testid": "zoom-level" }, Math.round(currentZoom * 100), "%"),
-          /* @__PURE__ */ import_react75.default.createElement(
+          /* @__PURE__ */ import_react76.default.createElement(
+            "span",
+            {
+              className: "text-xs text-silver w-8 text-center tabular-nums",
+              "data-testid": "zoom-level"
+            },
+            Math.round(currentZoom * 100),
+            "%"
+          ),
+          /* @__PURE__ */ import_react76.default.createElement(
             "button",
             {
               onClick: zoomIn,
@@ -5908,7 +6080,7 @@ var ArtifactsPanel = import_react75.default.forwardRef(
           )
         )
       ),
-      hasNodes && !treeNav.isAtRoot && /* @__PURE__ */ import_react75.default.createElement(
+      hasNodes && !treeNav.isAtRoot && /* @__PURE__ */ import_react76.default.createElement(
         "nav",
         {
           className: "flex items-center gap-1 px-4 py-2 border-b border-ash/40 shrink-0 overflow-x-auto text-xs",
@@ -5917,7 +6089,7 @@ var ArtifactsPanel = import_react75.default.forwardRef(
         },
         treeNav.breadcrumbs.map((crumb, i) => {
           const isLast = i === treeNav.breadcrumbs.length - 1;
-          return /* @__PURE__ */ import_react75.default.createElement("span", { key: i, className: "flex items-center gap-1 shrink-0" }, i > 0 && /* @__PURE__ */ import_react75.default.createElement(ChevronRightIcon, { className: "w-3 h-3 text-silver/50", "aria-hidden": true }), isLast ? /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-gold font-medium" }, crumb.label) : /* @__PURE__ */ import_react75.default.createElement(
+          return /* @__PURE__ */ import_react76.default.createElement("span", { key: i, className: "flex items-center gap-1 shrink-0" }, i > 0 && /* @__PURE__ */ import_react76.default.createElement(ChevronRightIcon, { className: "w-3 h-3 text-silver/50", "aria-hidden": true }), isLast ? /* @__PURE__ */ import_react76.default.createElement("span", { className: "text-gold font-medium" }, crumb.label) : /* @__PURE__ */ import_react76.default.createElement(
             "button",
             {
               onClick: () => treeNav.navigateTo(i),
@@ -5927,18 +6099,18 @@ var ArtifactsPanel = import_react75.default.forwardRef(
           ));
         })
       ),
-      /* @__PURE__ */ import_react75.default.createElement(
+      /* @__PURE__ */ import_react76.default.createElement(
         "div",
         {
           className: "flex-1 overflow-auto relative",
           "data-testid": "artifacts-scroll-area"
         },
-        /* @__PURE__ */ import_react75.default.createElement(
+        /* @__PURE__ */ import_react76.default.createElement(
           "div",
           {
             style: currentZoom !== 1 && contentHeight !== void 0 ? { height: contentHeight * currentZoom } : void 0
           },
-          /* @__PURE__ */ import_react75.default.createElement(
+          /* @__PURE__ */ import_react76.default.createElement(
             "div",
             {
               ref: contentRef,
@@ -5949,7 +6121,7 @@ var ArtifactsPanel = import_react75.default.forwardRef(
                 transformOrigin: "top center"
               } : void 0
             },
-            treeNav.currentNodes.length === 0 ? /* @__PURE__ */ import_react75.default.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, hasNodes ? "Empty group" : "No artifacts to display") : treeNav.currentNodes.map((node) => /* @__PURE__ */ import_react75.default.createElement(
+            treeNav.currentNodes.length === 0 ? /* @__PURE__ */ import_react76.default.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, hasNodes ? "Empty group" : "No artifacts to display") : treeNav.currentNodes.map((node) => /* @__PURE__ */ import_react76.default.createElement(
               NodeRenderer,
               {
                 key: node.id,
@@ -5962,18 +6134,18 @@ var ArtifactsPanel = import_react75.default.forwardRef(
           )
         )
       )
-    ), expandedArtifact && /* @__PURE__ */ import_react75.default.createElement(
+    ), expandedArtifact && /* @__PURE__ */ import_react76.default.createElement(
       ArtifactModal,
       {
         artifact: expandedArtifact,
-        onClose: () => setExpandedArtifact(null)
+        onClose: handleModalClose
       }
     ));
   }
 );
 ArtifactsPanel.displayName = "ArtifactsPanel";
-var ArtifactsPanelToggle = import_react75.default.forwardRef(({ artifactCount = 0, onExpand, className, ...rest }, ref) => {
-  return /* @__PURE__ */ import_react75.default.createElement(
+var ArtifactsPanelToggle = import_react76.default.forwardRef(({ artifactCount = 0, onExpand, className, ...rest }, ref) => {
+  return /* @__PURE__ */ import_react76.default.createElement(
     "button",
     {
       ref,
@@ -5990,8 +6162,8 @@ var ArtifactsPanelToggle = import_react75.default.forwardRef(({ artifactCount =
       "aria-label": "Expand artifacts panel",
       ...rest
     },
-    /* @__PURE__ */ import_react75.default.createElement(import_lucide_react17.Image, { className: "w-5 h-5", "aria-hidden": true }),
-    artifactCount > 0 && /* @__PURE__ */ import_react75.default.createElement(
+    /* @__PURE__ */ import_react76.default.createElement(import_lucide_react17.Image, { className: "w-5 h-5", "aria-hidden": true }),
+    artifactCount > 0 && /* @__PURE__ */ import_react76.default.createElement(
       "span",
       {
         className: "absolute -top-1 -right-1 w-4 h-4 bg-gold text-obsidian text-xs font-medium flex items-center justify-center"
@@ -6003,7 +6175,7 @@ var ArtifactsPanelToggle = import_react75.default.forwardRef(({ artifactCount =
 ArtifactsPanelToggle.displayName = "ArtifactsPanelToggle";
 
 // src/components/chat/HistoryPanel.tsx
-var import_react76 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 var import_lucide_react18 = require("lucide-react");
 function parseTimestamp(ts) {
   if (ts == null) {
@@ -6046,12 +6218,12 @@ function ProjectFilter({
   onChange,
   className
 }) {
-  const [open, setOpen] = (0, import_react76.useState)(false);
-  const ref = (0, import_react76.useRef)(null);
-  const closeFilter = (0, import_react76.useCallback)(() => setOpen(false), []);
+  const [open, setOpen] = (0, import_react77.useState)(false);
+  const ref = (0, import_react77.useRef)(null);
+  const closeFilter = (0, import_react77.useCallback)(() => setOpen(false), []);
   useClickOutside(ref, closeFilter, open);
   const label = value ?? "All projects";
-  return /* @__PURE__ */ import_react76.default.createElement("div", { className: cx("relative min-w-0", className), ref }, /* @__PURE__ */ import_react76.default.createElement(
+  return /* @__PURE__ */ import_react77.default.createElement("div", { className: cx("relative min-w-0", className), ref }, /* @__PURE__ */ import_react77.default.createElement(
     "button",
     {
       type: "button",
@@ -6067,9 +6239,9 @@ function ProjectFilter({
         "transition-colors duration-150 min-w-0"
       )
     },
-    /* @__PURE__ */ import_react76.default.createElement("span", { className: "truncate" }, label),
-    /* @__PURE__ */ import_react76.default.createElement(import_lucide_react18.ChevronDown, { className: "w-3 h-3 shrink-0", "aria-hidden": true })
-  ), open && /* @__PURE__ */ import_react76.default.createElement(
+    /* @__PURE__ */ import_react77.default.createElement("span", { className: "truncate" }, label),
+    /* @__PURE__ */ import_react77.default.createElement(import_lucide_react18.ChevronDown, { className: "w-3 h-3 shrink-0", "aria-hidden": true })
+  ), open && /* @__PURE__ */ import_react77.default.createElement(
     "div",
     {
       role: "listbox",
@@ -6079,7 +6251,7 @@ function ProjectFilter({
         "max-h-60 overflow-y-auto"
       )
     },
-    /* @__PURE__ */ import_react76.default.createElement(
+    /* @__PURE__ */ import_react77.default.createElement(
       "button",
       {
         type: "button",
@@ -6097,7 +6269,7 @@ function ProjectFilter({
       },
       "All projects"
     ),
-    projects.map((p) => /* @__PURE__ */ import_react76.default.createElement(
+    projects.map((p) => /* @__PURE__ */ import_react77.default.createElement(
       "button",
       {
         key: p,
@@ -6123,33 +6295,33 @@ function ConversationRow({
   onSelect,
   onRename
 }) {
-  const [isEditing, setIsEditing] = (0, import_react76.useState)(false);
-  const [draft, setDraft] = (0, import_react76.useState)(conversation.title);
-  const inputRef = (0, import_react76.useRef)(null);
-  (0, import_react76.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react77.useState)(false);
+  const [draft, setDraft] = (0, import_react77.useState)(conversation.title);
+  const inputRef = (0, import_react77.useRef)(null);
+  (0, import_react77.useEffect)(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
     }
   }, [isEditing]);
-  const startEdit = (0, import_react76.useCallback)((e) => {
+  const startEdit = (0, import_react77.useCallback)((e) => {
     e.stopPropagation();
     setDraft(conversation.title);
     setIsEditing(true);
   }, [conversation.title]);
-  const commit = (0, import_react76.useCallback)(() => {
+  const commit = (0, import_react77.useCallback)(() => {
     const trimmed = draft.trim();
     if (trimmed && trimmed !== conversation.title) {
       onRename?.(conversation.id, trimmed);
     }
     setIsEditing(false);
   }, [draft, conversation.id, conversation.title, onRename]);
-  const cancel = (0, import_react76.useCallback)(() => {
+  const cancel = (0, import_react77.useCallback)(() => {
     setDraft(conversation.title);
     setIsEditing(false);
   }, [conversation.title]);
   if (isEditing) {
-    return /* @__PURE__ */ import_react76.default.createElement(
+    return /* @__PURE__ */ import_react77.default.createElement(
       "div",
       {
         className: cx(
@@ -6157,7 +6329,7 @@ function ConversationRow({
           conversation.isActive ? "bg-ash/40" : "bg-ash/20"
         )
       },
-      /* @__PURE__ */ import_react76.default.createElement(
+      /* @__PURE__ */ import_react77.default.createElement(
         "input",
         {
           ref: inputRef,
@@ -6182,10 +6354,10 @@ function ConversationRow({
           "aria-label": "Conversation title"
         }
       ),
-      conversation.project && /* @__PURE__ */ import_react76.default.createElement("p", { className: "text-xs text-silver/60 truncate mt-1" }, conversation.project)
+      conversation.project && /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-xs text-silver/60 truncate mt-1" }, conversation.project)
     );
   }
-  return /* @__PURE__ */ import_react76.default.createElement("div", { className: "relative group" }, /* @__PURE__ */ import_react76.default.createElement(
+  return /* @__PURE__ */ import_react77.default.createElement("div", { className: "relative group" }, /* @__PURE__ */ import_react77.default.createElement(
     "button",
     {
       onClick: () => onSelect?.(conversation.id),
@@ -6195,7 +6367,7 @@ function ConversationRow({
         conversation.isActive ? "bg-ash/40 text-white" : "text-silver hover:bg-ash/20 hover:text-white"
       )
     },
-    /* @__PURE__ */ import_react76.default.createElement(
+    /* @__PURE__ */ import_react77.default.createElement(
       "p",
       {
         className: cx(
@@ -6205,8 +6377,8 @@ function ConversationRow({
       },
       conversation.title
     ),
-    conversation.project && /* @__PURE__ */ import_react76.default.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.project)
-  ), onRename && /* @__PURE__ */ import_react76.default.createElement(
+    conversation.project && /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.project)
+  ), onRename && /* @__PURE__ */ import_react77.default.createElement(
     "button",
     {
       type: "button",
@@ -6219,7 +6391,7 @@ function ConversationRow({
         "transition-opacity duration-150"
       )
     },
-    /* @__PURE__ */ import_react76.default.createElement(import_lucide_react18.Pencil, { className: "w-3.5 h-3.5", "aria-hidden": true })
+    /* @__PURE__ */ import_react77.default.createElement(import_lucide_react18.Pencil, { className: "w-3.5 h-3.5", "aria-hidden": true })
   ));
 }
 function HistoryPanel({
@@ -6228,8 +6400,8 @@ function HistoryPanel({
   onNewChat,
   onRenameConversation
 }) {
-  const [projectFilter, setProjectFilter] = (0, import_react76.useState)(null);
-  const projects = (0, import_react76.useMemo)(() => {
+  const [projectFilter, setProjectFilter] = (0, import_react77.useState)(null);
+  const projects = (0, import_react77.useMemo)(() => {
     const set = /* @__PURE__ */ new Set();
     for (const c of conversations) {
       if (c.project) {
@@ -6238,23 +6410,23 @@ function HistoryPanel({
     }
     return Array.from(set).sort((a, b) => a.localeCompare(b));
   }, [conversations]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (projectFilter && !projects.includes(projectFilter)) {
       setProjectFilter(null);
     }
   }, [projects, projectFilter]);
-  const filteredConversations = (0, import_react76.useMemo)(() => {
+  const filteredConversations = (0, import_react77.useMemo)(() => {
     if (!projectFilter) {
       return conversations;
     }
     return conversations.filter((c) => c.project === projectFilter);
   }, [conversations, projectFilter]);
-  const groups = (0, import_react76.useMemo)(
+  const groups = (0, import_react77.useMemo)(
     () => groupConversations(filteredConversations),
     [filteredConversations]
   );
   const hasFilter = projects.length > 0;
-  return /* @__PURE__ */ import_react76.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react76.default.createElement("div", { className: "px-4 py-3 border-b border-ash/40 shrink-0 flex items-center gap-2" }, /* @__PURE__ */ import_react76.default.createElement("h3", { className: "text-xs font-medium text-white shrink-0" }, "History"), (hasFilter || onNewChat) && /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex items-center gap-2 flex-1 min-w-0" }, hasFilter && /* @__PURE__ */ import_react76.default.createElement(import_react76.default.Fragment, null, /* @__PURE__ */ import_react76.default.createElement("div", { className: "w-px h-3 bg-ash/40 shrink-0 mx-1" }), /* @__PURE__ */ import_react76.default.createElement(
+  return /* @__PURE__ */ import_react77.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react77.default.createElement("div", { className: "px-4 py-3 border-b border-ash/40 shrink-0 flex items-center gap-2" }, /* @__PURE__ */ import_react77.default.createElement("h3", { className: "text-xs font-medium text-white shrink-0" }, "History"), (hasFilter || onNewChat) && /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center gap-2 flex-1 min-w-0" }, hasFilter && /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, /* @__PURE__ */ import_react77.default.createElement("div", { className: "w-px h-3 bg-ash/40 shrink-0 mx-1" }), /* @__PURE__ */ import_react77.default.createElement(
     ProjectFilter,
     {
       projects,
@@ -6262,7 +6434,7 @@ function HistoryPanel({
       onChange: setProjectFilter,
       className: "flex-1"
     }
-  )), onNewChat && /* @__PURE__ */ import_react76.default.createElement(import_react76.default.Fragment, null, /* @__PURE__ */ import_react76.default.createElement("div", { className: "w-px h-3 bg-ash/40 shrink-0 mx-1" }), /* @__PURE__ */ import_react76.default.createElement(
+  )), onNewChat && /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, /* @__PURE__ */ import_react77.default.createElement("div", { className: "w-px h-3 bg-ash/40 shrink-0 mx-1" }), /* @__PURE__ */ import_react77.default.createElement(
     "button",
     {
       onClick: onNewChat,
@@ -6274,15 +6446,15 @@ function HistoryPanel({
         "transition-colors duration-200"
       )
     },
-    /* @__PURE__ */ import_react76.default.createElement(PlusIcon, { className: "w-4 h-4" }),
-    /* @__PURE__ */ import_react76.default.createElement("span", { className: "truncate" }, "New Chat")
-  )))), /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ import_react76.default.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations yet") : groups.length === 0 ? /* @__PURE__ */ import_react76.default.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations match this filter") : /* @__PURE__ */ import_react76.default.createElement("div", null, groups.map((group, index) => /* @__PURE__ */ import_react76.default.createElement("section", { key: group.key, className: cx(index > 0 && "mt-3") }, /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex items-center gap-2 px-3 pb-2" }, /* @__PURE__ */ import_react76.default.createElement(
+    /* @__PURE__ */ import_react77.default.createElement(PlusIcon, { className: "w-4 h-4" }),
+    /* @__PURE__ */ import_react77.default.createElement("span", { className: "truncate" }, "New Chat")
+  )))), /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ import_react77.default.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations yet") : groups.length === 0 ? /* @__PURE__ */ import_react77.default.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations match this filter") : /* @__PURE__ */ import_react77.default.createElement("div", null, groups.map((group, index) => /* @__PURE__ */ import_react77.default.createElement("section", { key: group.key, className: cx(index > 0 && "mt-3") }, /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center gap-2 px-3 pb-2" }, /* @__PURE__ */ import_react77.default.createElement(
     "span",
     {
       className: "text-xs font-medium uppercase tracking-wider text-gold/70"
     },
     group.label
-  ), /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex-1 h-px bg-gold/20" })), /* @__PURE__ */ import_react76.default.createElement("div", { className: "space-y-1 px-2" }, group.conversations.map((conversation) => /* @__PURE__ */ import_react76.default.createElement(
+  ), /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex-1 h-px bg-gold/20" })), /* @__PURE__ */ import_react77.default.createElement("div", { className: "space-y-1 px-2" }, group.conversations.map((conversation) => /* @__PURE__ */ import_react77.default.createElement(
     ConversationRow,
     {
       key: conversation.id,
@@ -6294,7 +6466,7 @@ function HistoryPanel({
 }
 
 // src/components/chat/TodosList.tsx
-var import_react77 = __toESM(require("react"));
+var import_react78 = __toESM(require("react"));
 var import_lucide_react19 = require("lucide-react");
 var TASK_STATUSES = {
   PENDING: "pending",
@@ -6306,16 +6478,16 @@ var TASK_STATUSES = {
 function TaskIcon({ status }) {
   switch (status) {
     case "done":
-      return /* @__PURE__ */ import_react77.default.createElement(CheckSquareIcon, null);
+      return /* @__PURE__ */ import_react78.default.createElement(CheckSquareIcon, null);
     case "in_progress":
-      return /* @__PURE__ */ import_react77.default.createElement(SquareLoaderIcon, null);
+      return /* @__PURE__ */ import_react78.default.createElement(SquareLoaderIcon, null);
     case "cancelled":
-      return /* @__PURE__ */ import_react77.default.createElement(CrossSquareIcon, { variant: "cancelled" });
+      return /* @__PURE__ */ import_react78.default.createElement(CrossSquareIcon, { variant: "cancelled" });
     case "failed":
-      return /* @__PURE__ */ import_react77.default.createElement(CrossSquareIcon, { variant: "failed" });
+      return /* @__PURE__ */ import_react78.default.createElement(CrossSquareIcon, { variant: "failed" });
     case "pending":
     default:
-      return /* @__PURE__ */ import_react77.default.createElement(EmptySquareIcon, null);
+      return /* @__PURE__ */ import_react78.default.createElement(EmptySquareIcon, null);
   }
 }
 function sortTasks(tasks) {
@@ -6335,14 +6507,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__ */ import_react77.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react77.default.createElement(
+  return /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react78.default.createElement(
     "div",
     {
       className: "flex items-center gap-2 py-1",
       style: { paddingLeft: `${depth * 1.5}rem` }
     },
-    /* @__PURE__ */ import_react77.default.createElement(TaskIcon, { status: task.status }),
-    /* @__PURE__ */ import_react77.default.createElement(
+    /* @__PURE__ */ import_react78.default.createElement(TaskIcon, { status: task.status }),
+    /* @__PURE__ */ import_react78.default.createElement(
       "span",
       {
         className: cx(
@@ -6354,10 +6526,10 @@ function TaskItem({ task, depth = 0 }) {
         )
       },
       task.label,
-      task.status === "cancelled" && /* @__PURE__ */ import_react77.default.createElement("span", { className: "text-silver/40 ml-1" }, "(cancelled)"),
-      task.status === "failed" && /* @__PURE__ */ import_react77.default.createElement("span", { className: "text-error/60 ml-1" }, "(failed)")
+      task.status === "cancelled" && /* @__PURE__ */ import_react78.default.createElement("span", { className: "text-silver/40 ml-1" }, "(cancelled)"),
+      task.status === "failed" && /* @__PURE__ */ import_react78.default.createElement("span", { className: "text-error/60 ml-1" }, "(failed)")
     )
-  ), showSubtasks && /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex flex-col" }, sortedSubtasks.map((subtask) => /* @__PURE__ */ import_react77.default.createElement(TaskItem, { key: subtask.id, task: subtask, depth: depth + 1 }))));
+  ), showSubtasks && /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex flex-col" }, sortedSubtasks.map((subtask) => /* @__PURE__ */ import_react78.default.createElement(TaskItem, { key: subtask.id, task: subtask, depth: depth + 1 }))));
 }
 function hasInProgressTask(tasks) {
   return tasks.some((t) => {
@@ -6370,11 +6542,11 @@ function hasInProgressTask(tasks) {
     return false;
   });
 }
-var TodosList = import_react77.default.forwardRef(
+var TodosList = import_react78.default.forwardRef(
   ({ tasks, title = "Tasks", onStopAllTasks, className, ...rest }, ref) => {
-    const sortedTasks = (0, import_react77.useMemo)(() => sortTasks(tasks), [tasks]);
-    const [isStopping, setIsStopping] = (0, import_react77.useState)(false);
-    const handleStopClick = (0, import_react77.useCallback)(async () => {
+    const sortedTasks = (0, import_react78.useMemo)(() => sortTasks(tasks), [tasks]);
+    const [isStopping, setIsStopping] = (0, import_react78.useState)(false);
+    const handleStopClick = (0, import_react78.useCallback)(async () => {
       if (!onStopAllTasks || isStopping) {
         return;
       }
@@ -6395,7 +6567,7 @@ var TodosList = import_react77.default.forwardRef(
     if (tasks.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ import_react77.default.createElement(
+    return /* @__PURE__ */ import_react78.default.createElement(
       "div",
       {
         ref,
@@ -6406,16 +6578,16 @@ var TodosList = import_react77.default.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ import_react77.default.createElement(
+      /* @__PURE__ */ import_react78.default.createElement(
         "div",
         {
           className: "flex items-center justify-between px-4 py-2 border-b border-ash/40 flex-shrink-0"
         },
-        /* @__PURE__ */ import_react77.default.createElement("h4", { className: "text-xs font-medium text-white" }, title),
-        /* @__PURE__ */ import_react77.default.createElement("span", { className: "text-xs text-silver/60" }, countCompleted(tasks), "/", countTotal(tasks))
+        /* @__PURE__ */ import_react78.default.createElement("h4", { className: "text-xs font-medium text-white" }, title),
+        /* @__PURE__ */ import_react78.default.createElement("span", { className: "text-xs text-silver/60" }, countCompleted(tasks), "/", countTotal(tasks))
       ),
-      /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ import_react77.default.createElement(TaskItem, { key: task.id, task }))),
-      showStopButton && /* @__PURE__ */ import_react77.default.createElement("div", { className: "px-4 py-2 border-t border-ash/40 flex-shrink-0" }, /* @__PURE__ */ import_react77.default.createElement(
+      /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ import_react78.default.createElement(TaskItem, { key: task.id, task }))),
+      showStopButton && /* @__PURE__ */ import_react78.default.createElement("div", { className: "px-4 py-2 border-t border-ash/40 flex-shrink-0" }, /* @__PURE__ */ import_react78.default.createElement(
         "button",
         {
           type: "button",
@@ -6432,7 +6604,7 @@ var TodosList = import_react77.default.forwardRef(
             isStopping ? "cursor-not-allowed opacity-70" : "hover:bg-error/20"
           )
         },
-        isStopping ? /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, /* @__PURE__ */ import_react77.default.createElement(import_lucide_react19.Loader2, { className: "w-3 h-3 animate-spin" }), "Stopping tasks") : /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, /* @__PURE__ */ import_react77.default.createElement(import_lucide_react19.Square, { className: "w-3 h-3 fill-current" }), "Stop All Tasks")
+        isStopping ? /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, /* @__PURE__ */ import_react78.default.createElement(import_lucide_react19.Loader2, { className: "w-3 h-3 animate-spin" }), "Stopping tasks") : /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, /* @__PURE__ */ import_react78.default.createElement(import_lucide_react19.Square, { className: "w-3 h-3 fill-current" }), "Stop All Tasks")
       ))
     );
   }
@@ -6452,8 +6624,8 @@ function areAllTasksSettled(tasks) {
 }
 
 // src/components/chat/ToolSidebar.tsx
-var import_react78 = __toESM(require("react"));
-var ToolSidebar = import_react78.default.forwardRef(
+var import_react79 = __toESM(require("react"));
+var ToolSidebar = import_react79.default.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}`);
@@ -6464,7 +6636,7 @@ var ToolSidebar = import_react78.default.forwardRef(
     };
     const renderButton = (tool) => {
       const active = isActive(tool.id);
-      return /* @__PURE__ */ import_react78.default.createElement(
+      return /* @__PURE__ */ import_react79.default.createElement(
         "button",
         {
           key: tool.id,
@@ -6476,10 +6648,10 @@ var ToolSidebar = import_react78.default.forwardRef(
           "aria-label": tool.label,
           "aria-pressed": active
         },
-        /* @__PURE__ */ import_react78.default.createElement("span", { className: "w-4 h-4 block" }, tool.icon)
+        /* @__PURE__ */ import_react79.default.createElement("span", { className: "w-4 h-4 block" }, tool.icon)
       );
     };
-    return /* @__PURE__ */ import_react78.default.createElement(
+    return /* @__PURE__ */ import_react79.default.createElement(
       "div",
       {
         ref,
@@ -6490,17 +6662,17 @@ var ToolSidebar = import_react78.default.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex flex-col items-center gap-1" }, topTools.map(renderButton)),
-      /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react78.default.createElement("div", { className: "w-5 border-t border-ash/30" })),
-      /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex flex-col items-center gap-1" }, bottomTools.map(renderButton))
+      /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex flex-col items-center gap-1" }, topTools.map(renderButton)),
+      /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "w-5 border-t border-ash/30" })),
+      /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex flex-col items-center gap-1" }, bottomTools.map(renderButton))
     );
   }
 );
 ToolSidebar.displayName = "ToolSidebar";
 
 // src/components/chat/ToolPanelContainer.tsx
-var import_react79 = __toESM(require("react"));
-var ToolPanelContainer = import_react79.default.forwardRef(
+var import_react80 = __toESM(require("react"));
+var ToolPanelContainer = import_react80.default.forwardRef(
   ({
     topContent,
     bottomContent,
@@ -6511,21 +6683,21 @@ var ToolPanelContainer = import_react79.default.forwardRef(
     initialTopPercent = 60,
     ...rest
   }, ref) => {
-    const [topPercent, setTopPercent] = (0, import_react79.useState)(initialTopPercent);
-    const [isResizingHeight, setIsResizingHeight] = (0, import_react79.useState)(false);
-    const containerRef = (0, import_react79.useRef)(null);
-    const lastY = (0, import_react79.useRef)(null);
+    const [topPercent, setTopPercent] = (0, import_react80.useState)(initialTopPercent);
+    const [isResizingHeight, setIsResizingHeight] = (0, import_react80.useState)(false);
+    const containerRef = (0, import_react80.useRef)(null);
+    const lastY = (0, import_react80.useRef)(null);
     const hasBoth = topContent !== null && bottomContent !== null;
-    const startHeightResize = (0, import_react79.useCallback)((e) => {
+    const startHeightResize = (0, import_react80.useCallback)((e) => {
       e.preventDefault();
       setIsResizingHeight(true);
       lastY.current = e.clientY;
     }, []);
-    const stopHeightResize = (0, import_react79.useCallback)(() => {
+    const stopHeightResize = (0, import_react80.useCallback)(() => {
       setIsResizingHeight(false);
       lastY.current = null;
     }, []);
-    const resizeHeight = (0, import_react79.useCallback)(
+    const resizeHeight = (0, import_react80.useCallback)(
       (e) => {
         if (!isResizingHeight || lastY.current === null || !containerRef.current) {
           return;
@@ -6544,7 +6716,7 @@ var ToolPanelContainer = import_react79.default.forwardRef(
       },
       [isResizingHeight]
     );
-    (0, import_react79.useEffect)(() => {
+    (0, import_react80.useEffect)(() => {
       if (isResizingHeight) {
         window.addEventListener("mousemove", resizeHeight);
         window.addEventListener("mouseup", stopHeightResize);
@@ -6563,7 +6735,7 @@ var ToolPanelContainer = import_react79.default.forwardRef(
         document.body.style.userSelect = "";
       };
     }, [isResizingHeight, resizeHeight, stopHeightResize]);
-    return /* @__PURE__ */ import_react79.default.createElement(
+    return /* @__PURE__ */ import_react80.default.createElement(
       "div",
       {
         ref: composeRefs(containerRef, ref),
@@ -6575,7 +6747,7 @@ var ToolPanelContainer = import_react79.default.forwardRef(
         style: width ? { width } : void 0,
         ...rest
       },
-      /* @__PURE__ */ import_react79.default.createElement(
+      /* @__PURE__ */ import_react80.default.createElement(
         "div",
         {
           onMouseDown: onResizeStart,
@@ -6586,7 +6758,7 @@ var ToolPanelContainer = import_react79.default.forwardRef(
           )
         }
       ),
-      topContent !== null && /* @__PURE__ */ import_react79.default.createElement(
+      topContent !== null && /* @__PURE__ */ import_react80.default.createElement(
         "div",
         {
           className: "min-h-0 overflow-hidden flex flex-col",
@@ -6594,7 +6766,7 @@ var ToolPanelContainer = import_react79.default.forwardRef(
         },
         topContent
       ),
-      hasBoth && /* @__PURE__ */ import_react79.default.createElement(
+      hasBoth && /* @__PURE__ */ import_react80.default.createElement(
         "div",
         {
           onMouseDown: startHeightResize,
@@ -6606,7 +6778,7 @@ var ToolPanelContainer = import_react79.default.forwardRef(
           )
         }
       ),
-      bottomContent !== null && /* @__PURE__ */ import_react79.default.createElement(
+      bottomContent !== null && /* @__PURE__ */ import_react80.default.createElement(
         "div",
         {
           className: "min-h-0 overflow-hidden flex flex-col",
@@ -6619,65 +6791,6 @@ var ToolPanelContainer = import_react79.default.forwardRef(
 );
 ToolPanelContainer.displayName = "ToolPanelContainer";
 
-// src/components/chat/hooks/useResizable.ts
-var import_react80 = require("react");
-function useResizable({
-  initialWidthPercent,
-  minWidthPercent,
-  maxWidthPercent,
-  direction
-}) {
-  const [widthPercent, setWidthPercent] = (0, import_react80.useState)(initialWidthPercent);
-  const [isResizing, setIsResizing] = (0, import_react80.useState)(false);
-  const lastX = (0, import_react80.useRef)(null);
-  const startResizing = (0, import_react80.useCallback)((e) => {
-    e.preventDefault();
-    setIsResizing(true);
-    lastX.current = e.clientX;
-  }, []);
-  const stopResizing = (0, import_react80.useCallback)(() => {
-    setIsResizing(false);
-    lastX.current = null;
-  }, []);
-  const resize = (0, import_react80.useCallback)(
-    (e) => {
-      if (!isResizing || lastX.current === null) {
-        return;
-      }
-      const deltaX = e.clientX - lastX.current;
-      const factor = direction === "right" ? 1 : -1;
-      const deltaPercent = deltaX / window.innerWidth * 100;
-      setWidthPercent((prevPercent) => {
-        const newPercent = prevPercent + deltaPercent * factor;
-        return Math.min(Math.max(newPercent, minWidthPercent), maxWidthPercent);
-      });
-      lastX.current = e.clientX;
-    },
-    [isResizing, direction, minWidthPercent, maxWidthPercent]
-  );
-  (0, import_react80.useEffect)(() => {
-    if (isResizing) {
-      window.addEventListener("mousemove", resize);
-      window.addEventListener("mouseup", stopResizing);
-      document.body.style.cursor = "col-resize";
-      document.body.style.userSelect = "none";
-    } else {
-      window.removeEventListener("mousemove", resize);
-      window.removeEventListener("mouseup", stopResizing);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-    }
-    return () => {
-      window.removeEventListener("mousemove", resize);
-      window.removeEventListener("mouseup", stopResizing);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-    };
-  }, [isResizing, resize, stopResizing]);
-  const width = `${widthPercent}vw`;
-  return { width, widthPercent, isResizing, startResizing };
-}
-
 // src/components/chat/tree.ts
 function createEmptyTree() {
   return { nodes: {}, rootIds: [], activeLeafId: null, lastLeafId: null };
@@ -6838,6 +6951,7 @@ var ChatInterface = import_react81.default.forwardRef(
     onRenameConversation,
     isStreaming = false,
     isThinking = false,
+    thinkingLabel,
     placeholder = "Send a message...",
     emptyStateHelper = "Let's talk.",
     emptyState,
@@ -6846,6 +6960,7 @@ var ChatInterface = import_react81.default.forwardRef(
     attachments: propsAttachments,
     onAttachmentsChange,
     onAttachmentRemove,
+    onAttachmentOpen,
     artifactNodes,
     isArtifactsPanelOpen,
     onArtifactsPanelOpenChange,
@@ -6862,6 +6977,14 @@ var ChatInterface = import_react81.default.forwardRef(
   }, ref) => {
     const prevArtifactNodesRef = (0, import_react81.useRef)([]);
     const prevTasksRef = (0, import_react81.useRef)([]);
+    const [panelOpenArtifactId, setPanelOpenArtifactId] = (0, import_react81.useState)(null);
+    const handleAttachmentOpen = (0, import_react81.useCallback)((artifactId) => {
+      setPanelOpenArtifactId(artifactId);
+      onAttachmentOpen?.(artifactId);
+    }, [onAttachmentOpen]);
+    const handleArtifactPanelClosed = (0, import_react81.useCallback)(() => {
+      setPanelOpenArtifactId(null);
+    }, []);
     const [internalTools, setInternalTools] = (0, import_react81.useState)({
       "top-left": "history",
       "bottom-left": null,
@@ -7049,7 +7172,15 @@ var ChatInterface = import_react81.default.forwardRef(
           isStreaming: node.isStreaming,
           muted: opts.muted,
           branchInfo,
-          actions
+          actions,
+          attachments: node.attachments ? node.attachments.map((a) => ({
+            id: a.id,
+            file: { name: a.name, size: a.size ?? 0, type: a.type },
+            previewUrl: a.previewUrl,
+            artifactId: a.artifactId,
+            status: a.status ?? "analyzed"
+          })) : void 0,
+          onAttachmentOpen: handleAttachmentOpen
         };
       },
       [
@@ -7059,7 +7190,8 @@ var ChatInterface = import_react81.default.forwardRef(
         onEditMessage,
         onRetryMessage,
         handleBranchSwitch,
-        handleJumpToCheckpoint
+        handleJumpToCheckpoint,
+        handleAttachmentOpen
       ]
     );
     const displayItems = (0, import_react81.useMemo)(() => {
@@ -7128,6 +7260,8 @@ var ChatInterface = import_react81.default.forwardRef(
             ArtifactsPanel,
             {
               nodes: artifactNodes,
+              openArtifactId: panelOpenArtifactId,
+              onArtifactClosed: handleArtifactPanelClosed,
               className: "h-full"
             }
           );
@@ -7190,6 +7324,7 @@ var ChatInterface = import_react81.default.forwardRef(
           latestUserMessageIndex,
           isStreaming,
           isThinking,
+          thinkingLabel,
           className: "flex-1"
         }
       )), /* @__PURE__ */ import_react81.default.createElement("div", { className: cx(