@tutti-os/agent-gui 0.0.216 → 0.0.218

package/dist/workbench/tool-sidebar/index.js

@@ -198,6 +198,12 @@ function resolveAgentToolPanelPreferredWidth(input) {
 function shouldResizeAgentToolContainer(input) {
   return input.currentWidth !== input.requestedWidth && !(input.lastResize?.requestedWidth === input.requestedWidth && input.lastResize.actualWidth === input.currentWidth);
 }
+function shouldAutoCollapseAgentToolSidebar(input) {
+  if (!Number.isFinite(input.containerWidth) || input.containerWidth <= 0 || !Number.isFinite(input.mainContentMinWidth) || !Number.isFinite(input.sidebarWidth)) {
+    return false;
+  }
+  return input.containerWidth < Math.max(0, input.mainContentMinWidth) + Math.max(0, input.sidebarWidth);
+}
 function formatAgentToolReminderCount(value) {
   if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
     return null;
@@ -410,6 +416,7 @@ function AgentToolSidebarToolbar({
   panels,
   quickActionPanels = [],
   reminders = {},
+  showToggleButton = true,
   onAddPanel,
   onOpenPanel,
   onToggleExpansion,
@@ -428,7 +435,7 @@ function AgentToolSidebarToolbar({
         "nodrag pointer-events-auto flex h-[var(--agent-gui-workbench-header-height,44px)] items-center gap-1 [-webkit-app-region:no-drag]",
         activePanel === null && isOpen && "ml-auto"
       ),
-      "data-standalone-agent-tool-sidebar-toolbar": "true",
+      "data-agent-tool-sidebar-toolbar": "true",
       onDoubleClick: (event) => event.stopPropagation(),
       onPointerDown: (event) => event.stopPropagation(),
       children: [
@@ -481,7 +488,7 @@ function AgentToolSidebarToolbar({
                 "aria-label": labelByPanel.get(panel) ?? panel,
                 "aria-pressed": false,
                 className: "relative text-[var(--text-secondary)]",
-                "data-standalone-agent-tool-sidebar-quick-action": panel,
+                "data-agent-tool-sidebar-quick-action": panel,
                 size: "icon-sm",
                 type: "button",
                 variant: "chrome",
@@ -515,14 +522,14 @@ function AgentToolSidebarToolbar({
             children: isExpanded ? /* @__PURE__ */ jsx2(RestoreIcon, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx2(MaximizeIcon, { "aria-hidden": true, className: "size-3.5" })
           }
         ) : null,
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
+        showToggleButton ? /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
             Button,
             {
               "aria-label": label,
               "aria-pressed": isOpen,
               className: "relative",
-              "data-standalone-agent-tool-sidebar-toggle": "true",
+              "data-agent-tool-sidebar-toggle": "true",
               size: "icon-sm",
               type: "button",
               variant: isOpen && activePanel !== null ? "secondary" : "chrome",
@@ -531,7 +538,7 @@ function AgentToolSidebarToolbar({
             }
           ) }),
           /* @__PURE__ */ jsx2(TooltipContent, { side: "bottom", children: label })
-        ] })
+        ] }) : null
       ]
     }
   ) });
@@ -560,7 +567,7 @@ function AgentToolSidebarPicker({
     "div",
     {
       className: "flex h-full min-h-0 items-center justify-center overflow-auto px-6 py-10",
-      "data-standalone-agent-tool-sidebar-picker": "true",
+      "data-agent-tool-sidebar-picker": "true",
       children: /* @__PURE__ */ jsx3("div", { className: "flex w-full max-w-[340px] flex-col gap-2", children: panels.map((panel) => /* @__PURE__ */ jsxs2(
         Button2,
         {
@@ -869,6 +876,7 @@ function useAgentToolSidebarLayout({
     handleResizePointerMove,
     isActivePanelExpanded,
     resetContainerResizeBaseline,
+    resetPanelExpansion,
     resizeForPanel,
     stopResizing,
     togglePanelExpansion
@@ -956,6 +964,18 @@ function useAgentToolSidebarController({
     setIsEmptySidebarClosing(false);
     setIsSidebarOpen(true);
   }, []);
+  const collapseSidebarForContainerConstraint = useCallback3(() => {
+    setIsEmptySidebarClosing(false);
+    setIsSidebarOpen(false);
+    dispatch({ type: "close" });
+    onActivePanelChange?.(null);
+    layout.resetPanelExpansion(null);
+    layout.resetContainerResizeBaseline();
+  }, [
+    layout.resetContainerResizeBaseline,
+    layout.resetPanelExpansion,
+    onActivePanelChange
+  ]);
   const markContentReady = useCallback3((tabId) => {
     if (prefersReducedMotion()) {
       setContentReadyTabIds(
@@ -1200,6 +1220,7 @@ function useAgentToolSidebarController({
     bindLayoutWidthProjection,
     bindLifecycle,
     closePanel,
+    collapseSidebarForContainerConstraint,
     closePanelTab,
     contentReadyTabIds,
     ensurePanel,
@@ -1240,17 +1261,16 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
   children,
   containerWidth,
   copy,
-  headerDrag,
-  headerPlacement = "inline",
+  header,
   mainContentMinWidthPx,
   panels: unfilteredPanels,
   quickActionPanels,
   reminders,
-  renderHeader,
   renderLoading,
   renderPanel,
   renderTabIcon,
   resolveTabLabel,
+  showToggleButton,
   resizeContainerContentWidth,
   onActivePanelChange,
   onLayoutWidthChange,
@@ -1276,6 +1296,7 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
     bindLayoutWidthProjection,
     bindLifecycle,
     closePanel,
+    collapseSidebarForContainerConstraint,
     closePanelTab,
     contentReadyTabIds,
     ensurePanel,
@@ -1308,47 +1329,33 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
     () => ({
       addPanel,
       close: closePanel,
+      collapseForContainerConstraint: collapseSidebarForContainerConstraint,
       closeTab: closePanelTab,
       ensurePanel,
       openPanel
     }),
-    [addPanel, closePanel, closePanelTab, ensurePanel, openPanel]
+    [
+      addPanel,
+      closePanel,
+      closePanelTab,
+      collapseSidebarForContainerConstraint,
+      ensurePanel,
+      openPanel
+    ]
   );
-  const isHostHeaderDrag = headerDrag?.mode === "host";
-  const handleHeaderDoubleClick = (event) => {
-    if (isAgentToolSidebarHeaderControl(event.target)) {
-      event.stopPropagation();
-      return;
-    }
-    if (headerDrag?.mode === "host") {
-      event.stopPropagation();
-      headerDrag.onDoubleClick?.(event);
-    }
-  };
-  const handleHeaderPointerDown = (event) => {
-    if (isAgentToolSidebarHeaderControl(event.target)) {
-      event.stopPropagation();
-      return;
-    }
-    if (headerDrag?.mode === "host") {
-      event.stopPropagation();
-      headerDrag.onPointerDown?.(event);
-    }
-  };
+  const isHostOwnedHeader = header.owner === "host";
   const toolActions = /* @__PURE__ */ jsxs3(
     "div",
     {
       className: cn2(
         "flex h-[var(--agent-gui-workbench-header-height,44px)] min-w-0 max-w-full shrink-0 cursor-grab items-center pr-[var(--agent-gui-workbench-header-padding-x)] active:cursor-grabbing",
-        isHostHeaderDrag ? "[-webkit-app-region:no-drag]" : "[-webkit-app-region:drag]",
+        isHostOwnedHeader ? "[-webkit-app-region:no-drag]" : "[-webkit-app-region:drag]",
         isSidebarOpen && "border-b border-[var(--border-1)]"
       ),
-      "data-standalone-agent-tool-sidebar-drag-region": "true",
-      "data-standalone-agent-tool-sidebar-header": "true",
+      "data-agent-tool-sidebar-drag-region": "true",
+      "data-agent-tool-sidebar-header": "true",
       ref: measureToolActions,
       style: isSidebarOpen ? { width: `${activePanelWidth}px`, maxWidth: "100%" } : void 0,
-      onDoubleClick: isHostHeaderDrag ? handleHeaderDoubleClick : void 0,
-      onPointerDown: isHostHeaderDrag ? handleHeaderPointerDown : void 0,
       children: [
         activeTabId ? /* @__PURE__ */ jsx4(
           ToolSidebarTabBar,
@@ -1373,6 +1380,7 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
             panels,
             quickActionPanels,
             reminders,
+            showToggleButton,
             onAddPanel: addPanel,
             onOpenPanel: openPanel,
             onToggleExpansion: () => {
@@ -1384,17 +1392,21 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
       ]
     }
   );
+  const headerLayout = {
+    actions: toolActions,
+    isSidebarOpen,
+    layoutWidthPx: isSidebarOpen ? activePanelLayoutWidth : toolActionsWidth
+  };
+  const renderedHeader = header.render(headerLayout);
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    headerPlacement === "external" || headerPlacement === "panel" ? renderHeader(
-      headerPlacement === "panel" && isSidebarOpen ? null : toolActions
-    ) : /* @__PURE__ */ jsx4(
+    header.owner === "host" ? renderedHeader : /* @__PURE__ */ jsx4(
       "div",
       {
         className: "workbench-window__header workbench-window__header--custom",
         style: {
-          "--agent-gui-tool-sidebar-layout-width": isSidebarOpen ? `${activePanelLayoutWidth}px` : `${toolActionsWidth}px`
+          "--agent-gui-tool-sidebar-layout-width": `${headerLayout.layoutWidthPx}px`
         },
-        children: renderHeader(toolActions)
+        children: renderedHeader
       }
     ),
     /* @__PURE__ */ jsx4(
@@ -1402,7 +1414,7 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
       {
         className: cn2(
           "flex h-full min-h-0 min-w-0 flex-col overflow-hidden",
-          headerPlacement === "inline" && "workbench-window__body"
+          header.owner === "window" && "workbench-window__body"
         ),
         ref: bindLifecycle,
         children: /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 min-w-0 flex-1 overflow-hidden", children: [
@@ -1417,7 +1429,7 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
                 isActivePanelExpanded && "border-l border-[var(--line-1)]",
                 !isSidebarOpen && "pointer-events-none"
               ),
-              "data-standalone-agent-tool-sidebar": "true",
+              "data-agent-tool-sidebar": "true",
               ref: bindLayoutWidthProjection,
               style: {
                 width: isSidebarOpen ? `${activePanelLayoutWidth}px` : "0px",
@@ -1446,7 +1458,7 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
                         "aria-valuemin": activePanelMinWidth,
                         "aria-valuenow": activePanelWidth,
                         className: "absolute top-0 left-0 z-20 h-full w-2 cursor-col-resize touch-none outline-none before:absolute before:left-0 before:h-full before:w-px before:bg-transparent hover:before:bg-[var(--border-focus)] focus-visible:before:bg-[var(--border-focus)]",
-                        "data-standalone-agent-tool-sidebar-resize-handle": "true",
+                        "data-agent-tool-sidebar-resize-handle": "true",
                         role: "separator",
                         tabIndex: 0,
                         onKeyDown: handleResizeKeyDown,
@@ -1456,13 +1468,12 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
                         onPointerUp: stopResizing
                       }
                     ) : null,
-                    isSidebarOpen && headerPlacement === "panel" ? toolActions : null,
-                    isSidebarOpen && headerPlacement === "inline" ? /* @__PURE__ */ jsx4(
+                    isSidebarOpen && header.layout === "overlay" ? /* @__PURE__ */ jsx4(
                       "div",
                       {
                         "aria-hidden": true,
                         className: "shrink-0",
-                        "data-standalone-agent-tool-sidebar-header-spacer": "true",
+                        "data-agent-tool-sidebar-header-spacer": "true",
                         style: {
                           height: "var(--agent-gui-workbench-header-height, 44px)"
                         }
@@ -1527,7 +1538,7 @@ function ToolSidebarTabBar({
     {
       "aria-label": copy.tool,
       className: "flex h-[var(--agent-gui-workbench-header-height,44px)] min-w-0 flex-1 cursor-grab items-center gap-1 overflow-hidden px-2 active:cursor-grabbing",
-      "data-standalone-agent-tool-tab-list": "true",
+      "data-agent-tool-tab-list": "true",
       role: "tablist",
       children: /* @__PURE__ */ jsx4("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto", children: mountedTabs.map((tab) => {
         const defaultLabel = labelByPanel.get(tab.panel) ?? tab.panel;
@@ -1545,11 +1556,13 @@ function ToolSidebarTabBar({
                 {
                   "aria-selected": activeTabId === tab.id,
                   className: "nodrag flex h-full min-w-0 flex-1 items-center gap-1.5 overflow-hidden px-2 text-left outline-none [-webkit-app-region:no-drag] focus-visible:ring-2 focus-visible:ring-[var(--border-focus)]",
-                  "data-standalone-agent-tool-tab": tab.panel,
-                  "data-standalone-agent-tool-tab-id": tab.id,
+                  "data-agent-tool-tab": tab.panel,
+                  "data-agent-tool-tab-id": tab.id,
                   role: "tab",
                   type: "button",
                   onClick: () => onOpenPanel(tab),
+                  onDoubleClick: (event) => event.stopPropagation(),
+                  onPointerDown: (event) => event.stopPropagation(),
                   children: [
                     renderTabIcon?.(tab) ?? /* @__PURE__ */ jsx4(
                       AgentToolPanelIcon,
@@ -1570,6 +1583,8 @@ function ToolSidebarTabBar({
                   className: "nodrag mr-1 rounded p-0.5 opacity-100 hover:bg-[var(--transparency-block)] [-webkit-app-region:no-drag]",
                   type: "button",
                   onClick: () => onClosePanel(tab.id),
+                  onDoubleClick: (event) => event.stopPropagation(),
+                  onPointerDown: (event) => event.stopPropagation(),
                   children: /* @__PURE__ */ jsx4(CloseIcon, { "aria-hidden": true, className: "size-3" })
                 }
               )
@@ -1581,11 +1596,6 @@ function ToolSidebarTabBar({
     }
   );
 }
-function isAgentToolSidebarHeaderControl(target) {
-  return target instanceof Element && target.closest(
-    '.nodrag, button, a, input, textarea, select, option, [role="button"], [role="menuitem"], [contenteditable="true"]'
-  ) !== null;
-}
 export {
   AgentToolBrowserPanel,
   AgentToolPanelIcon,
@@ -1612,6 +1622,7 @@ export {
   resolveAgentToolPanelPreferredWidth,
   resolveAgentToolSidebarLayoutWidth,
   resolveAgentToolSidebarWidth,
+  shouldAutoCollapseAgentToolSidebar,
   shouldResizeAgentToolContainer
 };
 //# sourceMappingURL=index.js.map