@lukeashford/aurelius 2.21.0 → 3.1.0

package/dist/index.js

@@ -163,7 +163,6 @@ __export(index_exports, {
   switchBranch: () => switchBranch,
   updateNodeContent: () => updateNodeContent,
   useArtifactTreeNavigation: () => useArtifactTreeNavigation,
-  useArtifacts: () => useArtifacts,
   useResizable: () => useResizable,
   useScrollAnchor: () => useScrollAnchor,
   useToast: () => useToast,
@@ -4291,7 +4290,7 @@ var StreamingCursor = import_react55.default.forwardRef(
 StreamingCursor.displayName = "StreamingCursor";
 
 // src/components/chat/ChatInterface.tsx
-var import_react78 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 
 // src/components/chat/ChatView.tsx
 var import_react59 = __toESM(require("react"));
@@ -6031,7 +6030,6 @@ function NodeRenderer({
 var ArtifactsPanel = import_react72.default.forwardRef(
   ({
     nodes,
-    artifacts,
     loading,
     className,
     ...rest
@@ -6039,7 +6037,7 @@ var ArtifactsPanel = import_react72.default.forwardRef(
     const [expandedArtifact, setExpandedArtifact] = (0, import_react72.useState)(null);
     const [zoomIndex, setZoomIndex] = (0, import_react72.useState)(ZOOM_LEVELS.length - 1);
     const treeNav = useArtifactTreeNavigation(nodes || []);
-    const isTreeMode = !!nodes && nodes.length > 0;
+    const hasNodes = !!nodes && nodes.length > 0;
     const handleExpandArtifact = (0, import_react72.useCallback)((artifact) => {
       setExpandedArtifact(artifact);
     }, []);
@@ -6081,7 +6079,7 @@ var ArtifactsPanel = import_react72.default.forwardRef(
           className: "flex items-center justify-between p-4 border-b border-ash/40 shrink-0"
         },
         /* @__PURE__ */ import_react72.default.createElement("h3", { className: "text-sm font-semibold text-white" }, "Artifacts"),
-        isTreeMode && /* @__PURE__ */ import_react72.default.createElement(
+        hasNodes && /* @__PURE__ */ import_react72.default.createElement(
           "div",
           {
             className: "flex items-center gap-0.5",
@@ -6118,7 +6116,7 @@ var ArtifactsPanel = import_react72.default.forwardRef(
           )
         )
       ),
-      isTreeMode && !treeNav.isAtRoot && /* @__PURE__ */ import_react72.default.createElement(
+      hasNodes && !treeNav.isAtRoot && /* @__PURE__ */ import_react72.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",
@@ -6159,7 +6157,7 @@ var ArtifactsPanel = import_react72.default.forwardRef(
                 transformOrigin: "top center"
               } : void 0
             },
-            isTreeMode ? treeNav.currentNodes.length === 0 ? /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, "Empty group") : treeNav.currentNodes.map((node) => /* @__PURE__ */ import_react72.default.createElement(
+            treeNav.currentNodes.length === 0 ? /* @__PURE__ */ import_react72.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_react72.default.createElement(
               NodeRenderer,
               {
                 key: node.id,
@@ -6168,14 +6166,6 @@ var ArtifactsPanel = import_react72.default.forwardRef(
                 onExpandArtifact: handleExpandArtifact,
                 onGroupClick: handleGroupClick
               }
-            )) : (!artifacts || artifacts.length === 0) && !loading ? /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, "No artifacts to display") : artifacts?.map((artifact) => /* @__PURE__ */ import_react72.default.createElement(
-              ArtifactCard,
-              {
-                key: artifact.id,
-                artifact,
-                loading,
-                onExpand: handleExpandArtifact
-              }
             ))
           )
         )
@@ -6366,9 +6356,9 @@ function areAllTasksSettled(tasks) {
 // src/components/chat/ToolSidebar.tsx
 var import_react74 = __toESM(require("react"));
 var ToolSidebar = import_react74.default.forwardRef(
-  ({ tools, activeTools, onToggleTool, className, ...rest }, ref) => {
-    const topTools = tools.filter((t) => t.group === "top");
-    const bottomTools = tools.filter((t) => t.group === "bottom");
+  ({ 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}`);
     const isActive = (toolId) => {
       const tool = tools.find((t) => t.id === toolId);
       if (!tool) return false;
@@ -6396,7 +6386,8 @@ var ToolSidebar = import_react74.default.forwardRef(
       {
         ref,
         className: cx(
-          "h-full w-9 bg-charcoal/80 border-l border-ash/40 flex flex-col items-center shrink-0 py-2",
+          "h-full w-9 bg-charcoal/80 flex flex-col items-center shrink-0 py-2",
+          side === "left" ? "border-r border-ash/40" : "border-l border-ash/40",
           className
         ),
         ...rest
@@ -6412,7 +6403,7 @@ ToolSidebar.displayName = "ToolSidebar";
 // src/components/chat/ToolPanelContainer.tsx
 var import_react75 = __toESM(require("react"));
 var ToolPanelContainer = import_react75.default.forwardRef(
-  ({ topContent, bottomContent, width, onResizeStart, className, ...rest }, ref) => {
+  ({ topContent, bottomContent, width, onResizeStart, side = "right", className, ...rest }, ref) => {
     const [topPercent, setTopPercent] = (0, import_react75.useState)(60);
     const [isResizingHeight, setIsResizingHeight] = (0, import_react75.useState)(false);
     const containerRef = (0, import_react75.useRef)(null);
@@ -6470,7 +6461,8 @@ var ToolPanelContainer = import_react75.default.forwardRef(
           else if (ref) ref.current = node;
         },
         className: cx(
-          "h-full bg-charcoal/50 border-l border-ash/40 flex flex-col relative shrink-0",
+          "h-full bg-charcoal/50 flex flex-col relative shrink-0",
+          side === "left" ? "border-r border-ash/40" : "border-l border-ash/40",
           className
         ),
         style: width ? { width } : void 0,
@@ -6481,9 +6473,9 @@ var ToolPanelContainer = import_react75.default.forwardRef(
         {
           onMouseDown: onResizeStart,
           className: cx(
-            "absolute top-0 left-0 w-1 h-full cursor-col-resize z-50",
+            "absolute top-0 w-1 h-full cursor-col-resize z-50",
             "hover:bg-gold/50 transition-colors",
-            "after:absolute after:inset-y-0 after:-left-1 after:w-2"
+            side === "left" ? "right-0 after:absolute after:inset-y-0 after:-right-1 after:w-2" : "left-0 after:absolute after:inset-y-0 after:-left-1 after:w-2"
           )
         }
       ),
@@ -6520,58 +6512,27 @@ var ToolPanelContainer = import_react75.default.forwardRef(
 );
 ToolPanelContainer.displayName = "ToolPanelContainer";
 
-// src/components/chat/hooks/useArtifacts.ts
-var import_react76 = require("react");
-function useArtifacts() {
-  const [artifacts, setArtifacts] = (0, import_react76.useState)([]);
-  const scheduleArtifact = (0, import_react76.useCallback)((artifact) => {
-    setArtifacts((prev) => [...prev, { ...artifact, isPending: true }]);
-  }, []);
-  const showArtifact = (0, import_react76.useCallback)(
-    (artifactId, updates) => {
-      setArtifacts((prev) => {
-        const existingIndex = prev.findIndex((a) => a.id === artifactId);
-        if (existingIndex >= 0) {
-          return prev.map(
-            (a) => a.id === artifactId ? { ...a, ...updates, isPending: false } : a
-          );
-        } else {
-          return [...prev, { id: artifactId, ...updates, isPending: false }];
-        }
-      });
-    },
-    []
-  );
-  const removeArtifact = (0, import_react76.useCallback)((artifactId) => {
-    setArtifacts((prev) => prev.filter((a) => a.id !== artifactId));
-  }, []);
-  const clearArtifacts = (0, import_react76.useCallback)(() => {
-    setArtifacts([]);
-  }, []);
-  return { artifacts, scheduleArtifact, showArtifact, removeArtifact, clearArtifacts };
-}
-
 // src/components/chat/hooks/useResizable.ts
-var import_react77 = require("react");
+var import_react76 = require("react");
 function useResizable({
   initialWidthPercent,
   minWidthPercent,
   maxWidthPercent,
   direction
 }) {
-  const [widthPercent, setWidthPercent] = (0, import_react77.useState)(initialWidthPercent);
-  const [isResizing, setIsResizing] = (0, import_react77.useState)(false);
-  const lastX = (0, import_react77.useRef)(null);
-  const startResizing = (0, import_react77.useCallback)((e) => {
+  const [widthPercent, setWidthPercent] = (0, import_react76.useState)(initialWidthPercent);
+  const [isResizing, setIsResizing] = (0, import_react76.useState)(false);
+  const lastX = (0, import_react76.useRef)(null);
+  const startResizing = (0, import_react76.useCallback)((e) => {
     e.preventDefault();
     setIsResizing(true);
     lastX.current = e.clientX;
   }, []);
-  const stopResizing = (0, import_react77.useCallback)(() => {
+  const stopResizing = (0, import_react76.useCallback)(() => {
     setIsResizing(false);
     lastX.current = null;
   }, []);
-  const resize = (0, import_react77.useCallback)(
+  const resize = (0, import_react76.useCallback)(
     (e) => {
       if (!isResizing || lastX.current === null) {
         return;
@@ -6587,7 +6548,7 @@ function useResizable({
     },
     [isResizing, direction, minWidthPercent, maxWidthPercent]
   );
-  (0, import_react77.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     if (isResizing) {
       window.addEventListener("mousemove", resize);
       window.addEventListener("mouseup", stopResizing);
@@ -6611,7 +6572,7 @@ function useResizable({
 }
 
 // src/components/chat/ChatInterface.tsx
-var ChatInterface = import_react78.default.forwardRef(
+var ChatInterface = import_react77.default.forwardRef(
   ({
     messages = [],
     conversationTree,
@@ -6633,34 +6594,37 @@ var ChatInterface = import_react78.default.forwardRef(
     enableMessageActions = true,
     attachments: propsAttachments,
     onAttachmentsChange,
-    artifacts = [],
     artifactNodes,
     isArtifactsPanelOpen,
     onArtifactsPanelOpenChange,
     tasks = [],
     tasksTitle,
+    tools: externalTools = [],
     className,
     ...rest
   }, ref) => {
-    const [sidebarCollapsed, setSidebarCollapsed] = (0, import_react78.useState)(initialSidebarCollapsed);
-    const prevArtifactsRef = (0, import_react78.useRef)([]);
-    const prevTasksRef = (0, import_react78.useRef)([]);
-    const [internalTools, setInternalTools] = (0, import_react78.useState)({
-      top: null,
-      bottom: null
+    const [sidebarCollapsed, setSidebarCollapsed] = (0, import_react77.useState)(initialSidebarCollapsed);
+    const prevArtifactNodesRef = (0, import_react77.useRef)([]);
+    const prevTasksRef = (0, import_react77.useRef)([]);
+    const [internalTools, setInternalTools] = (0, import_react77.useState)({
+      "top-left": null,
+      "bottom-left": null,
+      "top-right": null,
+      "bottom-right": null
     });
-    const dismissedToolsRef = (0, import_react78.useRef)(/* @__PURE__ */ new Set());
+    const dismissedToolsRef = (0, import_react77.useRef)(/* @__PURE__ */ new Set());
     const isPanelControlled = isArtifactsPanelOpen !== void 0;
-    const activeTools = (0, import_react78.useMemo)(() => {
+    const activeTools = (0, import_react77.useMemo)(() => {
       if (isPanelControlled) {
         return {
-          top: isArtifactsPanelOpen ? "artifacts" : internalTools.top,
-          bottom: internalTools.bottom
+          ...internalTools,
+          "top-right": isArtifactsPanelOpen ? "artifacts" : internalTools["top-right"]
         };
       }
       return internalTools;
     }, [isPanelControlled, isArtifactsPanelOpen, internalTools]);
-    const isAnyToolOpen = activeTools.top !== null || activeTools.bottom !== null;
+    const isLeftPanelOpen = activeTools["top-left"] !== null || activeTools["bottom-left"] !== null;
+    const isRightPanelOpen = activeTools["top-right"] !== null || activeTools["bottom-right"] !== null;
     const {
       width: sidebarWidth,
       startResizing: startResizingSidebar
@@ -6671,20 +6635,44 @@ var ChatInterface = import_react78.default.forwardRef(
       direction: "right"
     });
     const {
-      width: toolsWidth,
-      startResizing: startResizingTools
+      width: rightToolsWidth,
+      startResizing: startResizingRightTools
     } = useResizable({
       initialWidthPercent: 50,
       minWidthPercent: 25,
       maxWidthPercent: 70,
       direction: "left"
     });
-    const toggleTool = (0, import_react78.useCallback)((toolId) => {
-      const toolDef = TOOL_DEFINITIONS.find((t) => t.id === toolId);
+    const {
+      width: leftToolsWidth,
+      startResizing: startResizingLeftTools
+    } = useResizable({
+      initialWidthPercent: 25,
+      minWidthPercent: 15,
+      maxWidthPercent: 40,
+      direction: "right"
+    });
+    const allSettled = tasks.length === 0 || areAllTasksSettled(tasks);
+    const allToolDefinitions = (0, import_react77.useMemo)(() => {
+      const builtIn = [
+        { id: "history", icon: /* @__PURE__ */ import_react77.default.createElement(HistoryIcon, null), label: "History", group: "top-left" },
+        { id: "artifacts", icon: /* @__PURE__ */ import_react77.default.createElement(MediaIcon, null), label: "Artifacts", group: "top-right" },
+        {
+          id: "todos",
+          icon: allSettled ? /* @__PURE__ */ import_react77.default.createElement(CheckSquareIcon, null) : /* @__PURE__ */ import_react77.default.createElement(SquareLoaderIcon, null),
+          label: "Tasks",
+          group: "bottom-right"
+        }
+      ];
+      const external = externalTools.map(({ content: _content, ...def }) => def);
+      return [...builtIn, ...external];
+    }, [allSettled, externalTools]);
+    const toggleTool = (0, import_react77.useCallback)((toolId) => {
+      const toolDef = allToolDefinitions.find((t) => t.id === toolId);
       if (!toolDef) return;
       const group = toolDef.group;
       if (toolId === "artifacts" && isPanelControlled) {
-        const isCurrentlyOpen = activeTools.top === "artifacts";
+        const isCurrentlyOpen = activeTools["top-right"] === "artifacts";
         if (isCurrentlyOpen) {
           dismissedToolsRef.current.add("artifacts");
         } else {
@@ -6705,9 +6693,9 @@ var ChatInterface = import_react78.default.forwardRef(
           [group]: isCurrentlyOpen ? null : toolId
         };
       });
-    }, [isPanelControlled, activeTools.top, onArtifactsPanelOpenChange]);
+    }, [allToolDefinitions, isPanelControlled, activeTools, onArtifactsPanelOpenChange]);
     const isTreeMode = !!conversationTree;
-    const effectiveMessages = (0, import_react78.useMemo)(() => {
+    const effectiveMessages = (0, import_react77.useMemo)(() => {
       if (isTreeMode && conversationTree) {
         const pathNodes = getActivePathMessages(conversationTree);
         return pathNodes.map((node) => ({
@@ -6719,23 +6707,18 @@ var ChatInterface = import_react78.default.forwardRef(
       }
       return messages;
     }, [isTreeMode, conversationTree, messages]);
-    const latestUserMessageIndex = (0, import_react78.useMemo)(() => {
+    const latestUserMessageIndex = (0, import_react77.useMemo)(() => {
       for (let i = effectiveMessages.length - 1; i >= 0; i--) {
         if (effectiveMessages[i].variant === "user") return i;
       }
       return -1;
     }, [effectiveMessages]);
-    (0, import_react78.useEffect)(() => {
-      const hasNewOrSignificantArtifact = artifacts.some((a) => {
-        const p = prevArtifactsRef.current.find((prev) => prev.id === a.id);
-        if (!p) return true;
-        if (p.isPending && !a.isPending) return true;
-        if (p.title !== a.title || p.type !== a.type) return true;
-        return false;
-      });
-      const hasNodes = artifactNodes && artifactNodes.length > 0;
-      if (!isPanelControlled && (hasNewOrSignificantArtifact || hasNodes) && !dismissedToolsRef.current.has("artifacts")) {
-        setInternalTools((prev) => ({ ...prev, top: "artifacts" }));
+    (0, import_react77.useEffect)(() => {
+      const nodes = artifactNodes || [];
+      const prevNodes = prevArtifactNodesRef.current;
+      const hasNewOrChangedNode = nodes.length !== prevNodes.length || nodes.some((n, i) => n.id !== prevNodes[i]?.id);
+      if (!isPanelControlled && hasNewOrChangedNode && nodes.length > 0 && !dismissedToolsRef.current.has("artifacts")) {
+        setInternalTools((prev) => ({ ...prev, "top-right": "artifacts" }));
       }
       const hasNewOrUpdatedTask = (curr, prev) => {
         return curr.some((c) => {
@@ -6747,12 +6730,12 @@ var ChatInterface = import_react78.default.forwardRef(
         });
       };
       if (hasNewOrUpdatedTask(tasks, prevTasksRef.current) && !dismissedToolsRef.current.has("todos")) {
-        setInternalTools((prev) => ({ ...prev, bottom: "todos" }));
+        setInternalTools((prev) => ({ ...prev, "bottom-right": "todos" }));
       }
-      prevArtifactsRef.current = artifacts;
+      prevArtifactNodesRef.current = nodes;
       prevTasksRef.current = tasks;
-    }, [artifacts, artifactNodes, tasks, isPanelControlled]);
-    const handleBranchSwitch = (0, import_react78.useCallback)(
+    }, [artifactNodes, tasks, isPanelControlled]);
+    const handleBranchSwitch = (0, import_react77.useCallback)(
       (nodeId, direction) => {
         if (!isTreeMode || !conversationTree || !onTreeChange) return;
         const newTree = switchBranch(conversationTree, nodeId, direction);
@@ -6760,7 +6743,7 @@ var ChatInterface = import_react78.default.forwardRef(
       },
       [isTreeMode, conversationTree, onTreeChange]
     );
-    const displayMessages = (0, import_react78.useMemo)(() => {
+    const displayMessages = (0, import_react77.useMemo)(() => {
       return effectiveMessages.map((msg) => {
         let branchInfo = void 0;
         if (isTreeMode && conversationTree) {
@@ -6790,57 +6773,69 @@ var ChatInterface = import_react78.default.forwardRef(
       onRetryMessage,
       handleBranchSwitch
     ]);
-    const handleSubmit = (0, import_react78.useCallback)(
+    const handleSubmit = (0, import_react77.useCallback)(
       (message, attachments) => {
         onMessageSubmit?.(message, attachments);
       },
       [onMessageSubmit]
     );
-    const toggleSidebar = (0, import_react78.useCallback)(() => {
+    const toggleSidebar = (0, import_react77.useCallback)(() => {
       setSidebarCollapsed((prev) => !prev);
     }, []);
     const isEmpty = effectiveMessages.length === 0;
-    const allSettled = tasks.length === 0 || areAllTasksSettled(tasks);
-    const toolDefinitions = (0, import_react78.useMemo)(() => [
-      {
-        id: "artifacts",
-        icon: /* @__PURE__ */ import_react78.default.createElement(MediaIcon, null),
-        label: "Artifacts",
-        group: "top"
-      },
-      {
-        id: "todos",
-        icon: allSettled ? /* @__PURE__ */ import_react78.default.createElement(CheckSquareIcon, null) : /* @__PURE__ */ import_react78.default.createElement(SquareLoaderIcon, null),
-        label: "Tasks",
-        group: "bottom"
-      }
-    ], [allSettled]);
+    const leftToolDefs = (0, import_react77.useMemo)(
+      () => allToolDefinitions.filter((t) => t.group === "top-left" || t.group === "bottom-left"),
+      [allToolDefinitions]
+    );
+    const rightToolDefs = (0, import_react77.useMemo)(
+      () => allToolDefinitions.filter((t) => t.group === "top-right" || t.group === "bottom-right"),
+      [allToolDefinitions]
+    );
+    const hasLeftTools = leftToolDefs.length > 0;
+    const hasRightTools = rightToolDefs.length > 0;
     const renderToolContent = (toolId) => {
       if (!toolId) return null;
       switch (toolId) {
+        case "history":
+          return /* @__PURE__ */ import_react77.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ import_react77.default.createElement("h3", { className: "text-xs font-medium text-white" }, "History")), /* @__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") : /* @__PURE__ */ import_react77.default.createElement("div", { className: "space-y-1 px-2" }, conversations.map((conversation) => /* @__PURE__ */ import_react77.default.createElement(
+            "button",
+            {
+              key: conversation.id,
+              onClick: () => onSelectConversation?.(conversation.id),
+              className: cx(
+                "w-full px-3 py-2 text-left",
+                "transition-colors duration-150",
+                conversation.isActive ? "bg-ash/40 text-white" : "text-silver hover:bg-ash/20 hover:text-white"
+              )
+            },
+            /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-sm font-medium truncate" }, conversation.title),
+            conversation.preview && /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.preview),
+            conversation.timestamp && /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-xs text-silver/40 mt-1" }, conversation.timestamp)
+          )))));
         case "artifacts":
-          return /* @__PURE__ */ import_react78.default.createElement(
+          return /* @__PURE__ */ import_react77.default.createElement(
             ArtifactsPanel,
             {
-              artifacts,
               nodes: artifactNodes,
               className: "h-full"
             }
           );
         case "todos":
-          return tasks.length > 0 ? /* @__PURE__ */ import_react78.default.createElement(TodosList, { tasks, title: tasksTitle, className: "h-full" }) : /* @__PURE__ */ import_react78.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ import_react78.default.createElement("h3", { className: "text-xs font-medium text-white" }, "Tasks")), /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react78.default.createElement("p", { className: "text-xs text-silver/60" }, "No tasks")));
-        default:
-          return null;
+          return tasks.length > 0 ? /* @__PURE__ */ import_react77.default.createElement(TodosList, { tasks, title: tasksTitle, className: "h-full" }) : /* @__PURE__ */ import_react77.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ import_react77.default.createElement("h3", { className: "text-xs font-medium text-white" }, "Tasks")), /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-xs text-silver/60" }, "No tasks")));
+        default: {
+          const externalTool = externalTools.find((t) => t.id === toolId);
+          return externalTool?.content ?? null;
+        }
       }
     };
-    return /* @__PURE__ */ import_react78.default.createElement(
+    return /* @__PURE__ */ import_react77.default.createElement(
       "div",
       {
         ref,
         className: cx("flex h-full w-full bg-obsidian overflow-hidden", className),
         ...rest
       },
-      /* @__PURE__ */ import_react78.default.createElement(
+      /* @__PURE__ */ import_react77.default.createElement(
         ConversationSidebar,
         {
           conversations,
@@ -6852,16 +6847,35 @@ var ChatInterface = import_react78.default.forwardRef(
           onResizeStart: startResizingSidebar
         }
       ),
-      /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
+      hasLeftTools && /* @__PURE__ */ import_react77.default.createElement(
+        ToolSidebar,
+        {
+          tools: leftToolDefs,
+          activeTools,
+          onToggleTool: toggleTool,
+          side: "left"
+        }
+      ),
+      isLeftPanelOpen && /* @__PURE__ */ import_react77.default.createElement(
+        ToolPanelContainer,
+        {
+          topContent: renderToolContent(activeTools["top-left"]),
+          bottomContent: renderToolContent(activeTools["bottom-left"]),
+          width: leftToolsWidth,
+          onResizeStart: startResizingLeftTools,
+          side: "left"
+        }
+      ),
+      /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ import_react77.default.createElement("div", { className: cx(
         "flex-1 flex flex-col min-h-0 relative",
         isEmpty ? "justify-center" : "justify-start"
-      ) }, /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
+      ) }, /* @__PURE__ */ import_react77.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
-      ) }), /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
+      ) }), /* @__PURE__ */ import_react77.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out overflow-hidden flex flex-col",
         isEmpty ? "flex-zero opacity-0" : "flex-1 opacity-100"
-      ) }, /* @__PURE__ */ import_react78.default.createElement(
+      ) }, /* @__PURE__ */ import_react77.default.createElement(
         ChatView,
         {
           messages: displayMessages,
@@ -6870,10 +6884,10 @@ var ChatInterface = import_react78.default.forwardRef(
           isThinking,
           className: "flex-1"
         }
-      )), /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
+      )), /* @__PURE__ */ import_react77.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out z-10 w-full flex flex-col items-center",
         isEmpty ? "p-4" : "shrink-0 p-4 border-t border-ash/40 bg-obsidian"
-      ) }, isEmpty && /* @__PURE__ */ import_react78.default.createElement("div", { className: "mb-8 text-center animate-fade-in duration-500" }, emptyState ? emptyState : /* @__PURE__ */ import_react78.default.createElement("h1", { className: "text-4xl md:text-5xl font-heading text-gold mb-2 tracking-tight" }, "Welcome!")), /* @__PURE__ */ import_react78.default.createElement(
+      ) }, isEmpty && /* @__PURE__ */ import_react77.default.createElement("div", { className: "mb-8 text-center animate-fade-in duration-500" }, emptyState ? emptyState : /* @__PURE__ */ import_react77.default.createElement("h1", { className: "text-4xl md:text-5xl font-heading text-gold mb-2 tracking-tight" }, "Welcome!")), /* @__PURE__ */ import_react77.default.createElement(
         ChatInput,
         {
           position: isEmpty ? "centered" : "bottom",
@@ -6887,40 +6901,38 @@ var ChatInterface = import_react78.default.forwardRef(
           attachments: propsAttachments,
           onAttachmentsChange
         }
-      )), /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
+      )), /* @__PURE__ */ import_react77.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
       ) }))),
-      isAnyToolOpen && /* @__PURE__ */ import_react78.default.createElement(
+      isRightPanelOpen && /* @__PURE__ */ import_react77.default.createElement(
         ToolPanelContainer,
         {
-          topContent: renderToolContent(activeTools.top),
-          bottomContent: renderToolContent(activeTools.bottom),
-          width: toolsWidth,
-          onResizeStart: startResizingTools
+          topContent: renderToolContent(activeTools["top-right"]),
+          bottomContent: renderToolContent(activeTools["bottom-right"]),
+          width: rightToolsWidth,
+          onResizeStart: startResizingRightTools,
+          side: "right"
         }
       ),
-      /* @__PURE__ */ import_react78.default.createElement(
+      hasRightTools && /* @__PURE__ */ import_react77.default.createElement(
         ToolSidebar,
         {
-          tools: toolDefinitions,
+          tools: rightToolDefs,
           activeTools,
-          onToggleTool: toggleTool
+          onToggleTool: toggleTool,
+          side: "right"
         }
       )
     );
   }
 );
 ChatInterface.displayName = "ChatInterface";
-var TOOL_DEFINITIONS = [
-  { id: "artifacts", icon: null, label: "Artifacts", group: "top" },
-  { id: "todos", icon: null, label: "Tasks", group: "bottom" }
-];
 
 // src/components/chat/MessageActions.tsx
-var import_react79 = __toESM(require("react"));
+var import_react78 = __toESM(require("react"));
 var import_lucide_react14 = require("lucide-react");
-var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ import_react79.default.createElement(
+var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ import_react78.default.createElement(
   "button",
   {
     type: "button",
@@ -6936,7 +6948,7 @@ var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @_
   },
   children
 );
-var MessageActions = import_react79.default.forwardRef(
+var MessageActions = import_react78.default.forwardRef(
   ({
     variant,
     content,
@@ -6948,12 +6960,12 @@ var MessageActions = import_react79.default.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [localIsEditing, setLocalIsEditing] = (0, import_react79.useState)(false);
-    const [localEditValue, setLocalEditValue] = (0, import_react79.useState)(content);
-    const [copied, setCopied] = (0, import_react79.useState)(false);
+    const [localIsEditing, setLocalIsEditing] = (0, import_react78.useState)(false);
+    const [localEditValue, setLocalEditValue] = (0, import_react78.useState)(content);
+    const [copied, setCopied] = (0, import_react78.useState)(false);
     const isEditing = controlledIsEditing ?? localIsEditing;
     const editValue = controlledEditValue ?? localEditValue;
-    const setIsEditing = (0, import_react79.useCallback)(
+    const setIsEditing = (0, import_react78.useCallback)(
       (value) => {
         if (onEditingChange) {
           onEditingChange(value);
@@ -6963,10 +6975,10 @@ var MessageActions = import_react79.default.forwardRef(
       },
       [onEditingChange]
     );
-    const setEditValue = (0, import_react79.useCallback)((value) => {
+    const setEditValue = (0, import_react78.useCallback)((value) => {
       setLocalEditValue(value);
     }, []);
-    const handleCopy = (0, import_react79.useCallback)(async () => {
+    const handleCopy = (0, import_react78.useCallback)(async () => {
       try {
         await navigator.clipboard.writeText(content);
         setCopied(true);
@@ -6982,22 +6994,22 @@ var MessageActions = import_react79.default.forwardRef(
         setTimeout(() => setCopied(false), 2e3);
       }
     }, [content]);
-    const handleStartEdit = (0, import_react79.useCallback)(() => {
+    const handleStartEdit = (0, import_react78.useCallback)(() => {
       setLocalEditValue(content);
       setIsEditing(true);
     }, [content, setIsEditing]);
-    const handleCancelEdit = (0, import_react79.useCallback)(() => {
+    const handleCancelEdit = (0, import_react78.useCallback)(() => {
       setIsEditing(false);
       setLocalEditValue(content);
     }, [content, setIsEditing]);
-    const handleSubmitEdit = (0, import_react79.useCallback)(() => {
+    const handleSubmitEdit = (0, import_react78.useCallback)(() => {
       const trimmed = editValue.trim();
       if (trimmed && trimmed !== content) {
         onEdit?.(trimmed);
       }
       setIsEditing(false);
     }, [editValue, content, onEdit, setIsEditing]);
-    const handleEditKeyDown = (0, import_react79.useCallback)(
+    const handleEditKeyDown = (0, import_react78.useCallback)(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
@@ -7010,19 +7022,19 @@ var MessageActions = import_react79.default.forwardRef(
     );
     const isUser = variant === "user";
     if (isUser && isEditing) {
-      return /* @__PURE__ */ import_react79.default.createElement(
+      return /* @__PURE__ */ import_react78.default.createElement(
         "div",
         {
           ref,
           className: cx("mt-2", className),
           ...rest
         },
-        /* @__PURE__ */ import_react79.default.createElement(
+        /* @__PURE__ */ import_react78.default.createElement(
           "div",
           {
             className: "relative bg-charcoal border border-ash/60 focus-within:border-gold/60 focus-within:ring-1 focus-within:ring-gold/20"
           },
-          /* @__PURE__ */ import_react79.default.createElement(
+          /* @__PURE__ */ import_react78.default.createElement(
             "textarea",
             {
               value: editValue,
@@ -7033,15 +7045,15 @@ var MessageActions = import_react79.default.forwardRef(
               rows: 2
             }
           ),
-          /* @__PURE__ */ import_react79.default.createElement("div", { className: "absolute right-2 bottom-2 flex gap-1" }, /* @__PURE__ */ import_react79.default.createElement(
+          /* @__PURE__ */ import_react78.default.createElement("div", { className: "absolute right-2 bottom-2 flex gap-1" }, /* @__PURE__ */ import_react78.default.createElement(
             ActionButton2,
             {
               onClick: handleCancelEdit,
               label: "Cancel edit",
               className: "text-silver/60 hover:text-error"
             },
-            /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.X, { className: "w-4 h-4" })
-          ), /* @__PURE__ */ import_react79.default.createElement(
+            /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.X, { className: "w-4 h-4" })
+          ), /* @__PURE__ */ import_react78.default.createElement(
             ActionButton2,
             {
               onClick: handleSubmitEdit,
@@ -7049,13 +7061,13 @@ var MessageActions = import_react79.default.forwardRef(
               className: "text-silver/60 hover:text-gold",
               disabled: !editValue.trim() || editValue.trim() === content
             },
-            /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.Send, { className: "w-4 h-4" })
+            /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.Send, { className: "w-4 h-4" })
           ))
         ),
-        /* @__PURE__ */ import_react79.default.createElement("p", { className: "text-xs text-silver/50 mt-1" }, "Press Enter to submit, Esc to cancel. This will create a new branch.")
+        /* @__PURE__ */ import_react78.default.createElement("p", { className: "text-xs text-silver/50 mt-1" }, "Press Enter to submit, Esc to cancel. This will create a new branch.")
       );
     }
-    return /* @__PURE__ */ import_react79.default.createElement(
+    return /* @__PURE__ */ import_react78.default.createElement(
       "div",
       {
         ref,
@@ -7066,18 +7078,18 @@ var MessageActions = import_react79.default.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ import_react79.default.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.Copy, { className: "w-3.5 h-3.5" })),
-      isUser && onEdit && /* @__PURE__ */ import_react79.default.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.Pencil, { className: "w-3.5 h-3.5" })),
-      !isUser && onRetry && /* @__PURE__ */ import_react79.default.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.RotateCcw, { className: "w-3.5 h-3.5" }))
+      /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.Copy, { className: "w-3.5 h-3.5" })),
+      isUser && onEdit && /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.Pencil, { className: "w-3.5 h-3.5" })),
+      !isUser && onRetry && /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.RotateCcw, { className: "w-3.5 h-3.5" }))
     );
   }
 );
 MessageActions.displayName = "MessageActions";
 
 // src/components/chat/BranchNavigator.tsx
-var import_react80 = __toESM(require("react"));
+var import_react79 = __toESM(require("react"));
 var import_lucide_react15 = require("lucide-react");
-var BranchNavigator = import_react80.default.forwardRef(
+var BranchNavigator = import_react79.default.forwardRef(
   ({
     current,
     total,
@@ -7096,7 +7108,7 @@ var BranchNavigator = import_react80.default.forwardRef(
     const buttonSize = size === "sm" ? "p-0.5" : "p-1";
     const iconSize = size === "sm" ? "w-3 h-3" : "w-4 h-4";
     const textSize = size === "sm" ? "text-xs" : "text-sm";
-    return /* @__PURE__ */ import_react80.default.createElement(
+    return /* @__PURE__ */ import_react79.default.createElement(
       "div",
       {
         ref,
@@ -7108,8 +7120,8 @@ var BranchNavigator = import_react80.default.forwardRef(
         "aria-label": "Branch navigation",
         ...rest
       },
-      showIcon && /* @__PURE__ */ import_react80.default.createElement(import_lucide_react15.GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
-      /* @__PURE__ */ import_react80.default.createElement(
+      showIcon && /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
+      /* @__PURE__ */ import_react79.default.createElement(
         "button",
         {
           type: "button",
@@ -7122,10 +7134,10 @@ var BranchNavigator = import_react80.default.forwardRef(
           ),
           "aria-label": "Previous branch"
         },
-        /* @__PURE__ */ import_react80.default.createElement(import_lucide_react15.ChevronLeft, { className: iconSize })
+        /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.ChevronLeft, { className: iconSize })
       ),
-      /* @__PURE__ */ import_react80.default.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
-      /* @__PURE__ */ import_react80.default.createElement(
+      /* @__PURE__ */ import_react79.default.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
+      /* @__PURE__ */ import_react79.default.createElement(
         "button",
         {
           type: "button",
@@ -7138,7 +7150,7 @@ var BranchNavigator = import_react80.default.forwardRef(
           ),
           "aria-label": "Next branch"
         },
-        /* @__PURE__ */ import_react80.default.createElement(import_lucide_react15.ChevronRight, { className: iconSize })
+        /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.ChevronRight, { className: iconSize })
       )
     );
   }
@@ -7146,16 +7158,16 @@ var BranchNavigator = import_react80.default.forwardRef(
 BranchNavigator.displayName = "BranchNavigator";
 
 // src/components/BrandIcon.tsx
-var import_react81 = __toESM(require("react"));
+var import_react80 = __toESM(require("react"));
 var sizeMap2 = {
   sm: "h-8 w-8 text-sm",
   md: "h-12 w-12 text-base",
   lg: "h-16 w-16 text-lg"
 };
-var BrandIcon = import_react81.default.forwardRef(
+var BrandIcon = import_react80.default.forwardRef(
   ({ size = "md", variant = "solid", children, className, ...rest }, ref) => {
     const variantClasses = variant === "solid" ? "bg-gold text-obsidian border-2 border-gold" : "bg-transparent text-gold border-2 border-gold";
-    return /* @__PURE__ */ import_react81.default.createElement(
+    return /* @__PURE__ */ import_react80.default.createElement(
       "div",
       {
         ref,
@@ -7174,17 +7186,17 @@ var BrandIcon = import_react81.default.forwardRef(
 BrandIcon.displayName = "BrandIcon";
 
 // src/components/ColorSwatch.tsx
-var import_react82 = __toESM(require("react"));
-var ColorSwatch = import_react82.default.forwardRef(
+var import_react81 = __toESM(require("react"));
+var ColorSwatch = import_react81.default.forwardRef(
   ({ color, label, className, ...rest }, ref) => {
-    return /* @__PURE__ */ import_react82.default.createElement(
+    return /* @__PURE__ */ import_react81.default.createElement(
       "div",
       {
         ref,
         className: cx("flex flex-col items-center gap-2", className),
         ...rest
       },
-      /* @__PURE__ */ import_react82.default.createElement(
+      /* @__PURE__ */ import_react81.default.createElement(
         "div",
         {
           className: "h-16 w-16 border-2 border-ash rounded-none shadow-sm",
@@ -7192,22 +7204,22 @@ var ColorSwatch = import_react82.default.forwardRef(
           "aria-label": label || color
         }
       ),
-      label && /* @__PURE__ */ import_react82.default.createElement("span", { className: "text-xs text-silver font-medium" }, label)
+      label && /* @__PURE__ */ import_react81.default.createElement("span", { className: "text-xs text-silver font-medium" }, label)
     );
   }
 );
 ColorSwatch.displayName = "ColorSwatch";
 
 // src/components/SectionHeading.tsx
-var import_react83 = __toESM(require("react"));
+var import_react82 = __toESM(require("react"));
 var levelStyles = {
   h2: "text-2xl mb-4",
   h3: "text-xl mb-3"
 };
-var SectionHeading = import_react83.default.forwardRef(
+var SectionHeading = import_react82.default.forwardRef(
   ({ level = "h2", children, className, ...rest }, ref) => {
     const Component = level;
-    return /* @__PURE__ */ import_react83.default.createElement(
+    return /* @__PURE__ */ import_react82.default.createElement(
       Component,
       {
         ref,
@@ -7368,7 +7380,6 @@ var version = "2.0.0";
   switchBranch,
   updateNodeContent,
   useArtifactTreeNavigation,
-  useArtifacts,
   useResizable,
   useScrollAnchor,
   useToast,