@tutti-os/agent-gui 0.0.156 → 0.0.158

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

@@ -94,6 +94,14 @@ function reduceAgentToolSidebarState(state, action) {
     }
     case "add-panel":
       return addTab(state, action);
+    case "ensure-panel": {
+      const existing = findLastTab(
+        state.mountedTabs,
+        action.panel,
+        action.resourceId
+      );
+      return existing ? state : addTab(state, action, { activate: false });
+    }
     case "open-panel": {
       const existing = findLastTab(
         state.mountedTabs,
@@ -104,15 +112,16 @@ function reduceAgentToolSidebarState(state, action) {
     }
   }
 }
-function addTab(state, tab) {
+function addTab(state, tab, options = {}) {
   const nextTab = {
     id: tab.tabId,
     panel: tab.panel,
     ...tab.resourceId ? { resourceId: tab.resourceId } : {}
   };
+  const activate = options.activate !== false;
   return {
-    activePanel: nextTab.panel,
-    activeTabId: nextTab.id,
+    activePanel: activate ? nextTab.panel : state.activePanel,
+    activeTabId: activate ? nextTab.id : state.activeTabId,
     mountedTabs: state.mountedTabs.some(
       (candidate) => candidate.id === nextTab.id
     ) ? state.mountedTabs : [...state.mountedTabs, nextTab]
@@ -198,8 +207,15 @@ function formatAgentToolReminderCount(value) {
 }
 
 // workbench/tool-sidebar/AgentToolBrowserPanel.tsx
-import { lazy, Suspense, useMemo, useState } from "react";
 import {
+  lazy,
+  Suspense,
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+import {
+  closeBrowserNodeTab,
   createBrowserNodeFeature,
   isBrowserNodeSurfaceEvent
 } from "@tutti-os/browser-node";
@@ -211,6 +227,7 @@ var LazyBrowserNode = lazy(
 );
 var agentToolBrowserDefaultUrl = "https://www.google.com/";
 function AgentToolBrowserPanel({
+  automationTarget = null,
   browserApi,
   chromeCookieImportPrompt,
   defaultUrl = agentToolBrowserDefaultUrl,
@@ -219,6 +236,7 @@ function AgentToolBrowserPanel({
   loadingFallback = null,
   navigationActions,
   nodeIdPrefix = "browser:agent-tool",
+  onControllerReady,
   profileId = null,
   sessionMode = "shared",
   sessionPartition = null
@@ -233,15 +251,60 @@ function AgentToolBrowserPanel({
     }),
     [browserApi, chromeCookieImportPrompt, i18n, nodeId]
   );
+  const controller = useMemo(() => {
+    const getPage = (pageNodeId) => {
+      const state = feature.tabsStore.getSurfaceState(nodeId);
+      const tab = state?.tabs.find(
+        (candidate) => candidate.nodeId === pageNodeId
+      );
+      return state && tab ? { state, tab } : null;
+    };
+    return {
+      closePage(pageNodeId) {
+        const page = getPage(pageNodeId);
+        if (!page) return "not-found";
+        if (page.state.tabs.length === 1) return "last-page";
+        closeBrowserNodeTab(feature, nodeId, page.tab.id);
+        return "closed";
+      },
+      createPage(url) {
+        const resolvedUrl = url?.trim() || "about:blank";
+        const state = feature.tabsStore.ensureSurface(nodeId, defaultUrl);
+        const activeTab = state.tabs.find(
+          (tab) => tab.id === state.activeTabId
+        );
+        const activeRuntime = activeTab ? feature.runtimeStore.getNodeState(activeTab.nodeId) : null;
+        if (state.tabs.length === 1 && activeTab?.defaultUrl === "about:blank" && !activeRuntime?.url) {
+          feature.tabsStore.syncDefaultUrl(nodeId, resolvedUrl);
+          return activeTab.nodeId;
+        }
+        return feature.tabsStore.addTab(nodeId, resolvedUrl).nodeId;
+      },
+      ownsPage: (pageNodeId) => getPage(pageNodeId) !== null,
+      selectPage(pageNodeId) {
+        const page = getPage(pageNodeId);
+        if (!page) return false;
+        feature.tabsStore.selectTab(nodeId, page.tab.id);
+        return true;
+      },
+      surfaceNodeId: nodeId
+    };
+  }, [defaultUrl, feature, nodeId]);
+  const bindController = useCallback(
+    (node) => onControllerReady?.(node ? controller : null),
+    [controller, onControllerReady]
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: "relative h-full min-h-0 overflow-hidden",
       "data-agent-tool-browser-surface": "true",
       "data-agent-tool-browser-surface-id": nodeId,
+      ref: bindController,
       children: /* @__PURE__ */ jsx(Suspense, { fallback: loadingFallback, children: /* @__PURE__ */ jsx(
         LazyBrowserNode,
         {
+          automationTarget: automationTarget ? { ...automationTarget, focused: !hidden } : null,
           defaultUrl,
           feature,
           hidden,
@@ -525,7 +588,7 @@ function AgentToolSidebarPicker({
 
 // workbench/tool-sidebar/useAgentToolSidebarController.ts
 import {
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useReducer,
   useRef as useRef2,
   useState as useState3
@@ -533,7 +596,7 @@ import {
 
 // workbench/tool-sidebar/useAgentToolSidebarLayout.ts
 import {
-  useCallback,
+  useCallback as useCallback2,
   useRef,
   useState as useState2
 } from "react";
@@ -598,7 +661,7 @@ function useAgentToolSidebarLayout({
     containerWidth: resolvedContainerWidth,
     panelWidth: activePanelWidth
   }) : 0;
-  const resetPanelExpansion = useCallback(
+  const resetPanelExpansion = useCallback2(
     (nextPanel) => {
       const reset = resolveAgentToolPanelExpansionReset({
         expandedPanel: expandedPanelRef.current,
@@ -637,7 +700,7 @@ function useAgentToolSidebarLayout({
     },
     [manuallyResizedWidth, panelWidths]
   );
-  const resizeForPanel = useCallback(
+  const resizeForPanel = useCallback2(
     async (nextPanel, preferredWidth, options) => {
       const requestId = ++resizeRequestRef.current;
       const expansionTransition = resetPanelExpansion(nextPanel);
@@ -694,10 +757,10 @@ function useAgentToolSidebarLayout({
       resolvedContainerWidth
     ]
   );
-  const resetContainerResizeBaseline = useCallback(() => {
+  const resetContainerResizeBaseline = useCallback2(() => {
     baselineContainerWidthRef.current = null;
   }, []);
-  const updatePanelWidth = useCallback(
+  const updatePanelWidth = useCallback2(
     (panel, width) => {
       const nextWidth = clampAgentToolPanelWidth({
         allowFullWidth: expandedPanel === panel,
@@ -711,7 +774,7 @@ function useAgentToolSidebarLayout({
     },
     [expandedPanel, mainContentMinWidthPx, resolvedContainerWidth]
   );
-  const togglePanelExpansion = useCallback(
+  const togglePanelExpansion = useCallback2(
     (panel) => {
       if (expandedPanelRef.current === panel) {
         resetPanelExpansion(null);
@@ -731,7 +794,7 @@ function useAgentToolSidebarLayout({
     },
     [manuallyResizedWidth, resetPanelExpansion]
   );
-  const stopResizing = useCallback(() => {
+  const stopResizing = useCallback2(() => {
     dragRef.current = null;
     const styles = resizeStyleRef.current;
     if (!styles) return;
@@ -739,13 +802,13 @@ function useAgentToolSidebarLayout({
     document.body.style.userSelect = styles.userSelect;
     resizeStyleRef.current = null;
   }, []);
-  const bindLayoutRoot = useCallback(
+  const bindLayoutRoot = useCallback2(
     (node) => {
       if (!node) stopResizing();
     },
     [stopResizing]
   );
-  const handleResizePointerDown = useCallback(
+  const handleResizePointerDown = useCallback2(
     (event) => {
       if (event.button !== 0 || activePanel === null) return;
       event.preventDefault();
@@ -765,7 +828,7 @@ function useAgentToolSidebarLayout({
     },
     [activePanel, activePanelWidth]
   );
-  const handleResizePointerMove = useCallback(
+  const handleResizePointerMove = useCallback2(
     (event) => {
       const resizeState = dragRef.current;
       if (!resizeState || resizeState.pointerId !== event.pointerId) return;
@@ -776,7 +839,7 @@ function useAgentToolSidebarLayout({
     },
     [updatePanelWidth]
   );
-  const handleResizeKeyDown = useCallback(
+  const handleResizeKeyDown = useCallback2(
     (event) => {
       if (activePanel === null) return;
       if (event.key === "Home") {
@@ -877,7 +940,7 @@ function useAgentToolSidebarController({
   const resizeAnimationFrameRef = useRef2(null);
   const contentAnimationFrameIdsRef = useRef2(/* @__PURE__ */ new Set());
   const toolActionsResizeObserverRef = useRef2(null);
-  const scheduleResizeForPanel = useCallback2(
+  const scheduleResizeForPanel = useCallback3(
     (panel, preferredWidth, options) => {
       if (resizeAnimationFrameRef.current !== null) {
         window.cancelAnimationFrame(resizeAnimationFrameRef.current);
@@ -889,11 +952,11 @@ function useAgentToolSidebarController({
     },
     [layout.resizeForPanel]
   );
-  const showSidebar = useCallback2(() => {
+  const showSidebar = useCallback3(() => {
     setIsEmptySidebarClosing(false);
     setIsSidebarOpen(true);
   }, []);
-  const markContentReady = useCallback2((tabId) => {
+  const markContentReady = useCallback3((tabId) => {
     if (prefersReducedMotion()) {
       setContentReadyTabIds(
         (current) => current.includes(tabId) ? current : [...current, tabId]
@@ -913,7 +976,7 @@ function useAgentToolSidebarController({
       contentAnimationFrameIdsRef.current.add(frameId);
     }
   }, []);
-  const closePanel = useCallback2(() => {
+  const closePanel = useCallback3(() => {
     setIsSidebarOpen(false);
     dispatch({ type: "close" });
     onActivePanelChange?.(null);
@@ -928,7 +991,7 @@ function useAgentToolSidebarController({
       preserveBaseline: true
     });
   }, [onActivePanelChange, scheduleResizeForPanel, state.mountedTabs.length]);
-  const openPanel = useCallback2(
+  const openPanel = useCallback3(
     (panel, resourceId) => {
       if (!panelIds.has(panel)) return null;
       showSidebar();
@@ -956,7 +1019,7 @@ function useAgentToolSidebarController({
       state
     ]
   );
-  const addPanel = useCallback2(
+  const addPanel = useCallback3(
     (panel, resourceId) => {
       if (!panelIds.has(panel)) return null;
       showSidebar();
@@ -982,7 +1045,29 @@ function useAgentToolSidebarController({
       state
     ]
   );
-  const closePanelTab = useCallback2(
+  const ensurePanel = useCallback3(
+    (panel, resourceId) => {
+      if (!panelIds.has(panel)) return null;
+      const existing = state.mountedTabs.find(
+        (tab) => tab.panel === panel && (tab.resourceId ?? void 0) === resourceId
+      );
+      if (existing) return existing.id;
+      const tabId = createToolTabId(panel);
+      const action = {
+        panel,
+        resourceId,
+        tabId,
+        type: "ensure-panel"
+      };
+      const nextState = reduceAgentToolSidebarState(state, action);
+      dispatch(action);
+      onTabsChange?.(nextState.mountedTabs);
+      markContentReady(tabId);
+      return tabId;
+    },
+    [markContentReady, onTabsChange, panelIds, state]
+  );
+  const closePanelTab = useCallback3(
     (tabId) => {
       const closingIndex = state.mountedTabs.findIndex(
         (tab) => tab.id === tabId
@@ -1015,7 +1100,7 @@ function useAgentToolSidebarController({
       state
     ]
   );
-  const activatePanelTab = useCallback2(
+  const activatePanelTab = useCallback3(
     (tab) => {
       onPanelOpen?.(tab.panel, tab.resourceId);
       dispatch({ tabId: tab.id, type: "activate-tab" });
@@ -1025,7 +1110,7 @@ function useAgentToolSidebarController({
     },
     [markContentReady, onActivePanelChange, onPanelOpen, scheduleResizeForPanel]
   );
-  const toggleSidebar = useCallback2(() => {
+  const toggleSidebar = useCallback3(() => {
     const nextPanel = activePanel ?? fallbackPanel;
     if (isSidebarOpen) {
       closePanel();
@@ -1055,7 +1140,7 @@ function useAgentToolSidebarController({
     showSidebar,
     state.mountedTabs
   ]);
-  const handleSidebarTransitionEnd = useCallback2(
+  const handleSidebarTransitionEnd = useCallback3(
     (event) => {
       if (event.currentTarget !== event.target || event.propertyName !== "width" || isSidebarOpen || !isEmptySidebarClosing) {
         return;
@@ -1065,7 +1150,7 @@ function useAgentToolSidebarController({
     },
     [isEmptySidebarClosing, isSidebarOpen, layout.resetContainerResizeBaseline]
   );
-  const bindLayoutWidthProjection = useCallback2(
+  const bindLayoutWidthProjection = useCallback3(
     (node) => {
       if (node) {
         onLayoutWidthChange?.(
@@ -1075,7 +1160,7 @@ function useAgentToolSidebarController({
     },
     [isSidebarOpen, layout.activePanelLayoutWidth, onLayoutWidthChange]
   );
-  const bindLifecycle = useCallback2(
+  const bindLifecycle = useCallback3(
     (node) => {
       if (node) return;
       if (resizeAnimationFrameRef.current !== null) {
@@ -1092,7 +1177,7 @@ function useAgentToolSidebarController({
     },
     [layout.bindLayoutRoot]
   );
-  const measureToolActions = useCallback2((node) => {
+  const measureToolActions = useCallback3((node) => {
     toolActionsResizeObserverRef.current?.disconnect();
     toolActionsResizeObserverRef.current = null;
     if (!node) return;
@@ -1117,6 +1202,7 @@ function useAgentToolSidebarController({
     closePanel,
     closePanelTab,
     contentReadyTabIds,
+    ensurePanel,
     handleSidebarTransitionEnd,
     isEmptySidebar,
     isEmptySidebarClosing,
@@ -1192,6 +1278,7 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
     closePanel,
     closePanelTab,
     contentReadyTabIds,
+    ensurePanel,
     handleSidebarTransitionEnd,
     isEmptySidebar,
     isEmptySidebarClosing,
@@ -1222,9 +1309,10 @@ var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
       addPanel,
       close: closePanel,
       closeTab: closePanelTab,
+      ensurePanel,
       openPanel
     }),
-    [addPanel, closePanel, closePanelTab, openPanel]
+    [addPanel, closePanel, closePanelTab, ensurePanel, openPanel]
   );
   const isHostHeaderDrag = headerDrag?.mode === "host";
   const handleHeaderDoubleClick = (event) => {