@lukeashford/aurelius 4.1.0 → 4.3.0

package/dist/index.mjs

@@ -1320,42 +1320,84 @@ function getFileIcon(type) {
   }
   return 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 = React15.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__ */ React15.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__ */ React15.createElement("div", { className: "w-8 h-8 flex-shrink-0 overflow-hidden bg-slate" }, /* @__PURE__ */ React15.createElement(
         "img",
@@ -1366,10 +1408,11 @@ var FileChip = React15.forwardRef(
         }
       )) : /* @__PURE__ */ React15.createElement(Icon, { className: cx(
         "w-4 h-4 flex-shrink-0",
-        status === "error" ? "text-error" : "text-silver"
+        showError ? "text-error" : "text-silver"
       ) }),
-      /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col min-w-0 flex-1" }, /* @__PURE__ */ React15.createElement("span", { className: "truncate max-w-40", title: name }, name), size !== void 0 && status !== "error" && /* @__PURE__ */ React15.createElement("span", { className: "text-xs text-silver/60" }, formatBytes(size)), status === "error" && error && /* @__PURE__ */ React15.createElement("span", { className: "text-xs text-error truncate", title: error }, error)),
+      /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col min-w-0 flex-1" }, /* @__PURE__ */ React15.createElement("span", { className: "truncate max-w-40", title: name }, name), size !== void 0 && !showError && /* @__PURE__ */ React15.createElement("span", { className: "text-xs text-silver/60" }, formatBytes(size)), showError && error && /* @__PURE__ */ React15.createElement("span", { className: "text-xs text-error truncate", title: error }, error)),
       status === "uploading" && /* @__PURE__ */ React15.createElement(Loader2, { className: "w-3.5 h-3.5 text-gold animate-spin flex-shrink-0" }),
+      (status === "uploaded" || status === "analyzing") && /* @__PURE__ */ React15.createElement(Loader2, { className: "w-3.5 h-3.5 text-info animate-spin flex-shrink-0" }),
       status === "pending" && /* @__PURE__ */ React15.createElement("div", { className: "w-2 h-2 rounded-full bg-silver/50 flex-shrink-0" }),
       removable && onRemove && /* @__PURE__ */ React15.createElement(
         "button",
@@ -1402,6 +1445,7 @@ var AttachmentPreview = React16.forwardRef(
     onRemove,
     removable = true,
     maxVisible,
+    onOpen,
     className,
     ...rest
   }, ref) => {
@@ -1430,7 +1474,9 @@ var AttachmentPreview = React16.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__ */ React16.createElement(
@@ -3712,12 +3758,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 +3842,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 +3881,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);
       }
@@ -3885,6 +3936,8 @@ var Message = React55.forwardRef(
     branchInfo,
     actions,
     hideActions,
+    attachments,
+    onAttachmentOpen,
     ...rest
   }, ref) => {
     const isUser = variant === "user";
@@ -3952,6 +4005,14 @@ var Message = React55.forwardRef(
         ),
         ...rest
       },
+      attachments && attachments.length > 0 && /* @__PURE__ */ React55.createElement("div", { className: cx("mb-1.5", isUser ? "self-end" : "self-start") }, /* @__PURE__ */ React55.createElement(
+        AttachmentPreview,
+        {
+          attachments,
+          removable: false,
+          onOpen: onAttachmentOpen
+        }
+      )),
       isUser && isEditing ? /* @__PURE__ */ React55.createElement("div", { className: "w-full max-w-11/12" }, /* @__PURE__ */ React55.createElement("div", { className: "relative bg-gold" }, /* @__PURE__ */ React55.createElement(
         "textarea",
         {
@@ -4202,6 +4263,7 @@ var ThinkingIndicator = React57.forwardRef(
     isVisible = true,
     phraseInterval = 2500,
     phrases = THINKING_PHRASES,
+    manualLabel,
     className,
     ...rest
   }, ref) => {
@@ -4209,8 +4271,9 @@ var ThinkingIndicator = React57.forwardRef(
       () => Math.floor(Math.random() * phrases.length)
     );
     const [isTransitioning, setIsTransitioning] = useState13(false);
+    const isManual = manualLabel !== void 0;
     useEffect8(() => {
-      if (!isVisible || phrases.length <= 1) {
+      if (!isVisible || isManual || phrases.length <= 1) {
         return;
       }
       let fadeTimeout = null;
@@ -4228,7 +4291,7 @@ var ThinkingIndicator = React57.forwardRef(
           clearTimeout(fadeTimeout);
         }
       };
-    }, [isVisible, phrases.length, phraseInterval]);
+    }, [isVisible, isManual, phrases.length, phraseInterval]);
     if (!isVisible) {
       return null;
     }
@@ -4265,7 +4328,7 @@ var ThinkingIndicator = React57.forwardRef(
           style: { animationDelay: "300ms" }
         }
       )),
-      /* @__PURE__ */ React57.createElement(
+      isManual ? /* @__PURE__ */ React57.createElement("span", { className: "text-sm italic" }, manualLabel) : /* @__PURE__ */ React57.createElement(
         "span",
         {
           className: cx(
@@ -4289,19 +4352,22 @@ import {
   GitBranch as GitBranch2,
   GitCommitVertical,
   GitMerge,
-  PencilLine
+  PencilLine,
+  Upload
 } from "lucide-react";
 var KIND_ICONS = {
   task: GitBranch2,
   submit: GitMerge,
   rename: PencilLine,
-  init: GitCommitVertical
+  init: GitCommitVertical,
+  ingest: 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 = React58.forwardRef(
   function Checkpoint2({ name, executionKind, status = "completed", isActive, muted, branchInfo, onJumpHere }, ref) {
@@ -4450,7 +4516,16 @@ GreyedDivider.displayName = "GreyedDivider";
 
 // src/components/chat/ChatView.tsx
 var ChatView = React60.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"
@@ -4533,7 +4608,7 @@ var ChatView = React60.forwardRef(
             }
           )
         );
-      }), showThinking && /* @__PURE__ */ React60.createElement(ThinkingIndicator, { isVisible: true })),
+      }), showThinking && /* @__PURE__ */ React60.createElement(ThinkingIndicator, { isVisible: true, manualLabel: thinkingLabel })),
       /* @__PURE__ */ React60.createElement(
         "div",
         {
@@ -4718,8 +4793,8 @@ var ChatInput = React61.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__ */ React61.createElement(
       "div",
       {
@@ -4856,7 +4931,7 @@ var ChatInput = React61.forwardRef(
 ChatInput.displayName = "ChatInput";
 
 // src/components/chat/ArtifactsPanel.tsx
-import React71, { useCallback as useCallback17, useEffect as useEffect12, useRef as useRef11, useState as useState17 } from "react";
+import React71, { useCallback as useCallback18, useEffect as useEffect13, useRef as useRef12, useState as useState18 } from "react";
 import { Image } from "lucide-react";
 
 // src/components/ArtifactCard.tsx
@@ -5514,10 +5589,69 @@ var ArtifactVariantStack = React70.forwardRef(
 );
 ArtifactVariantStack.displayName = "ArtifactVariantStack";
 
+// src/components/chat/hooks/useResizable.ts
+import { useCallback as useCallback16, useEffect as useEffect12, useRef as useRef11, useState as useState16 } from "react";
+function useResizable({
+  initialWidthPercent,
+  minWidthPercent,
+  maxWidthPercent,
+  direction
+}) {
+  const [widthPercent, setWidthPercent] = useState16(initialWidthPercent);
+  const [isResizing, setIsResizing] = useState16(false);
+  const lastX = useRef11(null);
+  const startResizing = useCallback16((e) => {
+    e.preventDefault();
+    setIsResizing(true);
+    lastX.current = e.clientX;
+  }, []);
+  const stopResizing = useCallback16(() => {
+    setIsResizing(false);
+    lastX.current = null;
+  }, []);
+  const resize = useCallback16(
+    (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]
+  );
+  useEffect12(() => {
+    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
-import { useCallback as useCallback16, useMemo as useMemo2, useState as useState16 } from "react";
+import { useCallback as useCallback17, useMemo as useMemo2, useState as useState17 } from "react";
 function useArtifactTreeNavigation(rootNodes) {
-  const [stack, setStack] = useState16([]);
+  const [stack, setStack] = useState17([]);
   const currentNodes = useMemo2(() => {
     if (stack.length === 0) return rootNodes;
     return stack[stack.length - 1].children;
@@ -5530,13 +5664,13 @@ function useArtifactTreeNavigation(rootNodes) {
     return entries;
   }, [stack]);
   const isAtRoot = stack.length === 0;
-  const navigateInto = useCallback16((node) => {
+  const navigateInto = useCallback17((node) => {
     setStack((prev) => [...prev, node]);
   }, []);
-  const navigateTo = useCallback16((index) => {
+  const navigateTo = useCallback17((index) => {
     setStack((prev) => prev.slice(0, index));
   }, []);
-  const navigateBack = useCallback16(() => {
+  const navigateBack = useCallback17(() => {
     setStack((prev) => prev.slice(0, -1));
   }, []);
   return {
@@ -5556,7 +5690,7 @@ function ArtifactModal({
   onClose
 }) {
   useEscapeKey(onClose);
-  const handleBackdropClick = useCallback17((e) => {
+  const handleBackdropClick = useCallback18((e) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
@@ -5637,6 +5771,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,
@@ -5672,31 +5820,48 @@ var ArtifactsPanel = React71.forwardRef(
   ({
     nodes,
     loading,
+    openArtifactId,
+    onArtifactClosed,
     className,
     ...rest
   }, ref) => {
-    const [expandedArtifact, setExpandedArtifact] = useState17(null);
-    const [zoomIndex, setZoomIndex] = useState17(ZOOM_LEVELS.length - 1);
+    const [expandedArtifact, setExpandedArtifact] = useState18(null);
+    const [zoomIndex, setZoomIndex] = useState18(ZOOM_LEVELS.length - 1);
     const treeNav = useArtifactTreeNavigation(nodes || []);
     const hasNodes = !!nodes && nodes.length > 0;
-    const handleExpandArtifact = useCallback17((artifact) => {
+    const handleExpandArtifact = useCallback18((artifact) => {
       setExpandedArtifact(artifact);
     }, []);
-    const handleGroupClick = useCallback17((node) => {
+    const handleGroupClick = useCallback18((node) => {
       treeNav.navigateInto(node);
     }, [treeNav]);
-    const zoomIn = useCallback17(() => {
+    useEffect13(() => {
+      if (!openArtifactId || !nodes) {
+        return;
+      }
+      const found = findArtifactInNodes(nodes, openArtifactId);
+      if (found) {
+        setExpandedArtifact(found);
+      }
+    }, [openArtifactId, nodes]);
+    const handleModalClose = useCallback18(() => {
+      setExpandedArtifact(null);
+      onArtifactClosed?.();
+    }, [onArtifactClosed]);
+    const zoomIn = useCallback18(() => {
       setZoomIndex((prev) => Math.min(prev + 1, ZOOM_LEVELS.length - 1));
     }, []);
-    const zoomOut = useCallback17(() => {
+    const zoomOut = useCallback18(() => {
       setZoomIndex((prev) => Math.max(prev - 1, 0));
     }, []);
     const currentZoom = ZOOM_LEVELS[zoomIndex];
-    const contentRef = useRef11(null);
-    const [contentHeight, setContentHeight] = useState17(void 0);
-    useEffect12(() => {
+    const contentRef = useRef12(null);
+    const [contentHeight, setContentHeight] = useState18(void 0);
+    useEffect13(() => {
       const el = contentRef.current;
-      if (!el) return;
+      if (!el) {
+        return;
+      }
       const observer = new ResizeObserver(([entry]) => {
         setContentHeight(entry.contentRect.height);
       });
@@ -5740,7 +5905,15 @@ var ArtifactsPanel = React71.forwardRef(
             },
             "\u2212"
           ),
-          /* @__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(
+            "span",
+            {
+              className: "text-xs text-silver w-8 text-center tabular-nums",
+              "data-testid": "zoom-level"
+            },
+            Math.round(currentZoom * 100),
+            "%"
+          ),
           /* @__PURE__ */ React71.createElement(
             "button",
             {
@@ -5815,7 +5988,7 @@ var ArtifactsPanel = React71.forwardRef(
       ArtifactModal,
       {
         artifact: expandedArtifact,
-        onClose: () => setExpandedArtifact(null)
+        onClose: handleModalClose
       }
     ));
   }
@@ -5852,7 +6025,7 @@ var ArtifactsPanelToggle = React71.forwardRef(({ artifactCount = 0, onExpand, cl
 ArtifactsPanelToggle.displayName = "ArtifactsPanelToggle";
 
 // src/components/chat/HistoryPanel.tsx
-import React72, { useCallback as useCallback18, useEffect as useEffect13, useMemo as useMemo3, useRef as useRef12, useState as useState18 } from "react";
+import React72, { useCallback as useCallback19, useEffect as useEffect14, useMemo as useMemo3, useRef as useRef13, useState as useState19 } from "react";
 import { ChevronDown as ChevronDown2, Pencil as Pencil2 } from "lucide-react";
 function parseTimestamp(ts) {
   if (ts == null) {
@@ -5895,9 +6068,9 @@ function ProjectFilter({
   onChange,
   className
 }) {
-  const [open, setOpen] = useState18(false);
-  const ref = useRef12(null);
-  const closeFilter = useCallback18(() => setOpen(false), []);
+  const [open, setOpen] = useState19(false);
+  const ref = useRef13(null);
+  const closeFilter = useCallback19(() => setOpen(false), []);
   useClickOutside(ref, closeFilter, open);
   const label = value ?? "All projects";
   return /* @__PURE__ */ React72.createElement("div", { className: cx("relative min-w-0", className), ref }, /* @__PURE__ */ React72.createElement(
@@ -5972,28 +6145,28 @@ function ConversationRow({
   onSelect,
   onRename
 }) {
-  const [isEditing, setIsEditing] = useState18(false);
-  const [draft, setDraft] = useState18(conversation.title);
-  const inputRef = useRef12(null);
-  useEffect13(() => {
+  const [isEditing, setIsEditing] = useState19(false);
+  const [draft, setDraft] = useState19(conversation.title);
+  const inputRef = useRef13(null);
+  useEffect14(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
     }
   }, [isEditing]);
-  const startEdit = useCallback18((e) => {
+  const startEdit = useCallback19((e) => {
     e.stopPropagation();
     setDraft(conversation.title);
     setIsEditing(true);
   }, [conversation.title]);
-  const commit = useCallback18(() => {
+  const commit = useCallback19(() => {
     const trimmed = draft.trim();
     if (trimmed && trimmed !== conversation.title) {
       onRename?.(conversation.id, trimmed);
     }
     setIsEditing(false);
   }, [draft, conversation.id, conversation.title, onRename]);
-  const cancel = useCallback18(() => {
+  const cancel = useCallback19(() => {
     setDraft(conversation.title);
     setIsEditing(false);
   }, [conversation.title]);
@@ -6077,7 +6250,7 @@ function HistoryPanel({
   onNewChat,
   onRenameConversation
 }) {
-  const [projectFilter, setProjectFilter] = useState18(null);
+  const [projectFilter, setProjectFilter] = useState19(null);
   const projects = useMemo3(() => {
     const set = /* @__PURE__ */ new Set();
     for (const c of conversations) {
@@ -6087,7 +6260,7 @@ function HistoryPanel({
     }
     return Array.from(set).sort((a, b) => a.localeCompare(b));
   }, [conversations]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (projectFilter && !projects.includes(projectFilter)) {
       setProjectFilter(null);
     }
@@ -6143,7 +6316,7 @@ function HistoryPanel({
 }
 
 // src/components/chat/TodosList.tsx
-import React73, { useCallback as useCallback19, useMemo as useMemo4, useState as useState19 } from "react";
+import React73, { useCallback as useCallback20, useMemo as useMemo4, useState as useState20 } from "react";
 import { Loader2 as Loader22, Square as Square2 } from "lucide-react";
 var TASK_STATUSES = {
   PENDING: "pending",
@@ -6222,8 +6395,8 @@ function hasInProgressTask(tasks) {
 var TodosList = React73.forwardRef(
   ({ tasks, title = "Tasks", onStopAllTasks, className, ...rest }, ref) => {
     const sortedTasks = useMemo4(() => sortTasks(tasks), [tasks]);
-    const [isStopping, setIsStopping] = useState19(false);
-    const handleStopClick = useCallback19(async () => {
+    const [isStopping, setIsStopping] = useState20(false);
+    const handleStopClick = useCallback20(async () => {
       if (!onStopAllTasks || isStopping) {
         return;
       }
@@ -6348,7 +6521,7 @@ var ToolSidebar = React74.forwardRef(
 ToolSidebar.displayName = "ToolSidebar";
 
 // src/components/chat/ToolPanelContainer.tsx
-import React75, { useCallback as useCallback20, useEffect as useEffect14, useRef as useRef13, useState as useState20 } from "react";
+import React75, { useCallback as useCallback21, useEffect as useEffect15, useRef as useRef14, useState as useState21 } from "react";
 var ToolPanelContainer = React75.forwardRef(
   ({
     topContent,
@@ -6360,21 +6533,21 @@ var ToolPanelContainer = React75.forwardRef(
     initialTopPercent = 60,
     ...rest
   }, ref) => {
-    const [topPercent, setTopPercent] = useState20(initialTopPercent);
-    const [isResizingHeight, setIsResizingHeight] = useState20(false);
-    const containerRef = useRef13(null);
-    const lastY = useRef13(null);
+    const [topPercent, setTopPercent] = useState21(initialTopPercent);
+    const [isResizingHeight, setIsResizingHeight] = useState21(false);
+    const containerRef = useRef14(null);
+    const lastY = useRef14(null);
     const hasBoth = topContent !== null && bottomContent !== null;
-    const startHeightResize = useCallback20((e) => {
+    const startHeightResize = useCallback21((e) => {
       e.preventDefault();
       setIsResizingHeight(true);
       lastY.current = e.clientY;
     }, []);
-    const stopHeightResize = useCallback20(() => {
+    const stopHeightResize = useCallback21(() => {
       setIsResizingHeight(false);
       lastY.current = null;
     }, []);
-    const resizeHeight = useCallback20(
+    const resizeHeight = useCallback21(
       (e) => {
         if (!isResizingHeight || lastY.current === null || !containerRef.current) {
           return;
@@ -6393,7 +6566,7 @@ var ToolPanelContainer = React75.forwardRef(
       },
       [isResizingHeight]
     );
-    useEffect14(() => {
+    useEffect15(() => {
       if (isResizingHeight) {
         window.addEventListener("mousemove", resizeHeight);
         window.addEventListener("mouseup", stopHeightResize);
@@ -6468,65 +6641,6 @@ var ToolPanelContainer = React75.forwardRef(
 );
 ToolPanelContainer.displayName = "ToolPanelContainer";
 
-// src/components/chat/hooks/useResizable.ts
-import { useCallback as useCallback21, useEffect as useEffect15, useRef as useRef14, useState as useState21 } from "react";
-function useResizable({
-  initialWidthPercent,
-  minWidthPercent,
-  maxWidthPercent,
-  direction
-}) {
-  const [widthPercent, setWidthPercent] = useState21(initialWidthPercent);
-  const [isResizing, setIsResizing] = useState21(false);
-  const lastX = useRef14(null);
-  const startResizing = useCallback21((e) => {
-    e.preventDefault();
-    setIsResizing(true);
-    lastX.current = e.clientX;
-  }, []);
-  const stopResizing = useCallback21(() => {
-    setIsResizing(false);
-    lastX.current = null;
-  }, []);
-  const resize = useCallback21(
-    (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]
-  );
-  useEffect15(() => {
-    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 };
@@ -6687,6 +6801,7 @@ var ChatInterface = React76.forwardRef(
     onRenameConversation,
     isStreaming = false,
     isThinking = false,
+    thinkingLabel,
     placeholder = "Send a message...",
     emptyStateHelper = "Let's talk.",
     emptyState,
@@ -6695,6 +6810,7 @@ var ChatInterface = React76.forwardRef(
     attachments: propsAttachments,
     onAttachmentsChange,
     onAttachmentRemove,
+    onAttachmentOpen,
     artifactNodes,
     isArtifactsPanelOpen,
     onArtifactsPanelOpenChange,
@@ -6711,6 +6827,14 @@ var ChatInterface = React76.forwardRef(
   }, ref) => {
     const prevArtifactNodesRef = useRef15([]);
     const prevTasksRef = useRef15([]);
+    const [panelOpenArtifactId, setPanelOpenArtifactId] = useState22(null);
+    const handleAttachmentOpen = useCallback22((artifactId) => {
+      setPanelOpenArtifactId(artifactId);
+      onAttachmentOpen?.(artifactId);
+    }, [onAttachmentOpen]);
+    const handleArtifactPanelClosed = useCallback22(() => {
+      setPanelOpenArtifactId(null);
+    }, []);
     const [internalTools, setInternalTools] = useState22({
       "top-left": "history",
       "bottom-left": null,
@@ -6898,7 +7022,15 @@ var ChatInterface = React76.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
         };
       },
       [
@@ -6908,7 +7040,8 @@ var ChatInterface = React76.forwardRef(
         onEditMessage,
         onRetryMessage,
         handleBranchSwitch,
-        handleJumpToCheckpoint
+        handleJumpToCheckpoint,
+        handleAttachmentOpen
       ]
     );
     const displayItems = useMemo5(() => {
@@ -6977,6 +7110,8 @@ var ChatInterface = React76.forwardRef(
             ArtifactsPanel,
             {
               nodes: artifactNodes,
+              openArtifactId: panelOpenArtifactId,
+              onArtifactClosed: handleArtifactPanelClosed,
               className: "h-full"
             }
           );
@@ -7039,6 +7174,7 @@ var ChatInterface = React76.forwardRef(
           latestUserMessageIndex,
           isStreaming,
           isThinking,
+          thinkingLabel,
           className: "flex-1"
         }
       )), /* @__PURE__ */ React76.createElement("div", { className: cx(