@tutti-os/agent-gui 0.0.133 → 0.0.134

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

@@ -0,0 +1,1492 @@
+// workbench/tool-sidebar/model.ts
+var agentToolPanelIds = [
+  "files",
+  "terminal",
+  "browser",
+  "tasks",
+  "apps",
+  "messages"
+];
+var supportedPanelIds = new Set(agentToolPanelIds);
+function isAgentToolPanelId(value) {
+  return supportedPanelIds.has(value);
+}
+function filterAgentToolPanels(panels) {
+  const seen = /* @__PURE__ */ new Set();
+  const filtered = [];
+  for (const panel of panels) {
+    if (!isAgentToolPanelId(panel.id) || seen.has(panel.id)) {
+      continue;
+    }
+    seen.add(panel.id);
+    filtered.push({ id: panel.id, label: panel.label });
+  }
+  return filtered;
+}
+var adjacentPanelDefaultWidth = 720;
+var agentToolEmptySidebarWidth = Math.round(
+  adjacentPanelDefaultWidth * 0.6
+);
+var agentToolMainMinWidth = 280;
+var agentToolPanelDefaultWidthById = {
+  apps: adjacentPanelDefaultWidth,
+  browser: adjacentPanelDefaultWidth,
+  files: adjacentPanelDefaultWidth,
+  messages: 440,
+  tasks: 860,
+  terminal: adjacentPanelDefaultWidth
+};
+var agentToolPanelMinWidthById = {
+  apps: 420,
+  browser: 420,
+  files: 480,
+  messages: 320,
+  tasks: 420,
+  terminal: 420
+};
+var agentToolPanelMaxWidthById = {
+  apps: 1200,
+  browser: 1200,
+  files: Number.MAX_SAFE_INTEGER,
+  messages: 1200,
+  tasks: 1200,
+  terminal: 1200
+};
+function createAgentToolSidebarState(initial) {
+  const activePanel = initial?.activePanel ?? null;
+  const mountedTabs = initial?.mountedTabs ?? [];
+  const activeTabId = initial?.activeTabId ?? (activePanel === null ? null : findLastTab(mountedTabs, activePanel)?.id ?? null);
+  return {
+    activePanel: activeTabId === null ? null : activePanel,
+    activeTabId,
+    mountedTabs
+  };
+}
+function reduceAgentToolSidebarState(state, action) {
+  switch (action.type) {
+    case "close":
+      return state.activeTabId === null ? state : { ...state, activePanel: null, activeTabId: null };
+    case "close-tab": {
+      const closingIndex = state.mountedTabs.findIndex(
+        (tab) => tab.id === action.tabId
+      );
+      if (closingIndex < 0) {
+        return state;
+      }
+      const mountedTabs = state.mountedTabs.filter(
+        (tab) => tab.id !== action.tabId
+      );
+      if (state.activeTabId !== action.tabId) {
+        return { ...state, mountedTabs };
+      }
+      const nextTab = mountedTabs[Math.max(0, closingIndex - 1)] ?? mountedTabs[0] ?? null;
+      return {
+        activePanel: nextTab?.panel ?? null,
+        activeTabId: nextTab?.id ?? null,
+        mountedTabs
+      };
+    }
+    case "activate-tab": {
+      const tab = state.mountedTabs.find(
+        (candidate) => candidate.id === action.tabId
+      );
+      return tab ? { ...state, activePanel: tab.panel, activeTabId: tab.id } : state;
+    }
+    case "add-panel":
+      return addTab(state, action);
+    case "open-panel": {
+      const existing = findLastTab(
+        state.mountedTabs,
+        action.panel,
+        action.resourceId
+      );
+      return existing ? { ...state, activePanel: existing.panel, activeTabId: existing.id } : addTab(state, action);
+    }
+  }
+}
+function addTab(state, tab) {
+  const nextTab = {
+    id: tab.tabId,
+    panel: tab.panel,
+    ...tab.resourceId ? { resourceId: tab.resourceId } : {}
+  };
+  return {
+    activePanel: nextTab.panel,
+    activeTabId: nextTab.id,
+    mountedTabs: state.mountedTabs.some(
+      (candidate) => candidate.id === nextTab.id
+    ) ? state.mountedTabs : [...state.mountedTabs, nextTab]
+  };
+}
+function findLastTab(tabs, panel, resourceId) {
+  for (let index = tabs.length - 1; index >= 0; index -= 1) {
+    const tab = tabs[index];
+    if (tab?.panel === panel && (tab.resourceId ?? void 0) === resourceId) {
+      return tab;
+    }
+  }
+  return null;
+}
+function resolveAgentToolPanelExpansionReset(input) {
+  if (input.expandedPanel === null || input.expandedPanel === input.nextPanel) {
+    return null;
+  }
+  return {
+    panel: input.expandedPanel,
+    width: typeof input.widthBeforeExpansion === "number" && Number.isFinite(input.widthBeforeExpansion) ? input.widthBeforeExpansion : agentToolPanelDefaultWidthById[input.expandedPanel]
+  };
+}
+function resolveAgentToolPanelExpansionTransfer(input) {
+  const reset = resolveAgentToolPanelExpansionReset(input);
+  if (!reset || input.nextPanel === null) {
+    return null;
+  }
+  return {
+    expandedPanel: input.nextPanel,
+    nextPanelWidthBeforeExpansion: Number.isFinite(input.nextPanelWidth) && input.nextPanelWidth > 0 ? input.nextPanelWidth : agentToolPanelDefaultWidthById[input.nextPanel],
+    previousPanel: reset.panel,
+    previousPanelWidth: reset.width
+  };
+}
+function resolveAgentToolPanelMaxWidth(panel, viewportWidth, allowFullWidth = false, mainContentMinWidth = agentToolMainMinWidth) {
+  const resolvedMainMin = Number.isFinite(mainContentMinWidth) ? Math.max(0, mainContentMinWidth) : agentToolMainMinWidth;
+  const resolvedViewport = Number.isFinite(viewportWidth) ? viewportWidth : resolvedMainMin + agentToolPanelMinWidthById[panel];
+  return Math.max(
+    0,
+    Math.min(
+      allowFullWidth ? Number.MAX_SAFE_INTEGER : agentToolPanelMaxWidthById[panel],
+      resolvedViewport - resolvedMainMin
+    )
+  );
+}
+function clampAgentToolPanelWidth(input) {
+  const maxWidth = resolveAgentToolPanelMaxWidth(
+    input.panel,
+    input.viewportWidth,
+    input.allowFullWidth,
+    input.mainContentMinWidth
+  );
+  const minWidth = Math.min(agentToolPanelMinWidthById[input.panel], maxWidth);
+  const width = Number.isFinite(input.width) ? input.width : agentToolPanelDefaultWidthById[input.panel];
+  return Math.round(Math.min(maxWidth, Math.max(minWidth, width)));
+}
+function resolveAgentToolSidebarWidth(input) {
+  const baseline = Number.isFinite(input.baselineViewportWidth) ? Math.max(0, input.baselineViewportWidth) : input.viewportWidth;
+  return clampAgentToolPanelWidth({
+    allowFullWidth: input.allowFullWidth,
+    mainContentMinWidth: input.mainContentMinWidth,
+    panel: input.panel,
+    viewportWidth: input.viewportWidth,
+    width: Math.max(input.preferredWidth, input.viewportWidth - baseline)
+  });
+}
+function resolveAgentToolSidebarLayoutWidth(input) {
+  return Math.round(Math.max(0, input.panelWidth));
+}
+function resolveAgentToolPanelPreferredWidth(input) {
+  return !input.isExpanded && typeof input.manuallyResizedWidth === "number" && Number.isFinite(input.manuallyResizedWidth) ? input.manuallyResizedWidth : input.panelWidth;
+}
+function shouldResizeAgentToolContainer(input) {
+  return input.currentWidth !== input.requestedWidth && !(input.lastResize?.requestedWidth === input.requestedWidth && input.lastResize.actualWidth === input.currentWidth);
+}
+function formatAgentToolReminderCount(value) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+    return null;
+  }
+  const count = Math.floor(value);
+  return count > 99 ? "99+" : String(count);
+}
+
+// workbench/tool-sidebar/AgentToolBrowserPanel.tsx
+import { lazy, Suspense, useMemo, useState } from "react";
+import {
+  createBrowserNodeFeature,
+  isBrowserNodeSurfaceEvent
+} from "@tutti-os/browser-node";
+import { jsx } from "react/jsx-runtime";
+var LazyBrowserNode = lazy(
+  () => import("@tutti-os/browser-node/react").then(({ BrowserNode }) => ({
+    default: BrowserNode
+  }))
+);
+var agentToolBrowserDefaultUrl = "https://www.google.com/";
+function AgentToolBrowserPanel({
+  browserApi,
+  defaultUrl = agentToolBrowserDefaultUrl,
+  hidden,
+  i18n,
+  loadingFallback = null,
+  navigationActions,
+  nodeIdPrefix = "browser:agent-tool",
+  profileId = null,
+  sessionMode = "shared",
+  sessionPartition = null
+}) {
+  const [nodeId] = useState(() => createAgentToolBrowserNodeId(nodeIdPrefix));
+  const feature = useMemo(
+    () => createAgentToolBrowserFeature({ browserApi, i18n, nodeId }),
+    [browserApi, i18n, nodeId]
+  );
+  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,
+      children: /* @__PURE__ */ jsx(Suspense, { fallback: loadingFallback, children: /* @__PURE__ */ jsx(
+        LazyBrowserNode,
+        {
+          defaultUrl,
+          feature,
+          hidden,
+          navigationActions,
+          nodeId,
+          profileId,
+          sessionMode,
+          sessionPartition,
+          syncDefaultUrl: true,
+          tabs: true
+        }
+      ) })
+    }
+  );
+}
+function createAgentToolBrowserFeature(input) {
+  return createBrowserNodeFeature({
+    hostApi: createScopedAgentToolBrowserHostApi(
+      input.browserApi,
+      input.nodeId
+    ),
+    i18n: input.i18n,
+    resolveSearchUrl: resolveAgentToolBrowserSearchUrl
+  });
+}
+function createScopedAgentToolBrowserHostApi(browserApi, nodeId) {
+  return {
+    ...browserApi,
+    onEvent(listener) {
+      return browserApi.onEvent((event) => {
+        if (isBrowserNodeSurfaceEvent(nodeId, event)) {
+          listener(event);
+        }
+      });
+    }
+  };
+}
+function resolveAgentToolBrowserSearchUrl(query) {
+  const searchUrl = new URL("https://www.google.com/search");
+  searchUrl.searchParams.set("q", query);
+  return searchUrl.toString();
+}
+function createAgentToolBrowserNodeId(prefix) {
+  const instanceId = typeof globalThis.crypto?.randomUUID === "function" ? globalThis.crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+  return `${prefix}:${instanceId}`;
+}
+
+// workbench/tool-sidebar/AgentToolSidebar.tsx
+import {
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import { CloseIcon, cn as cn2 } from "@tutti-os/ui-system";
+
+// workbench/tool-sidebar/Picker.tsx
+import { Button as Button2 } from "@tutti-os/ui-system";
+
+// workbench/tool-sidebar/Toolbar.tsx
+import {
+  AddLinedIcon,
+  Button,
+  ChatIcon,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  FolderIcon,
+  MaximizeIcon,
+  NavApplicationsLinedIcon,
+  PanelIcon,
+  RestoreIcon,
+  TaskIcon,
+  TerminalLinedIcon,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  WebIcon
+} from "@tutti-os/ui-system";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var iconByPanel = {
+  apps: NavApplicationsLinedIcon,
+  browser: WebIcon,
+  files: FolderIcon,
+  messages: ChatIcon,
+  tasks: TaskIcon,
+  terminal: TerminalLinedIcon
+};
+function AgentToolPanelIcon({
+  panel,
+  ...iconProps
+}) {
+  const Icon = iconByPanel[panel];
+  return /* @__PURE__ */ jsx2(Icon, { ...iconProps });
+}
+function AgentToolSidebarToolbar({
+  activePanel,
+  copy,
+  isExpanded,
+  isOpen,
+  panels,
+  quickActionPanels = [],
+  reminders = {},
+  onAddPanel,
+  onOpenPanel,
+  onToggleExpansion,
+  onToggleSidebar
+}) {
+  const label = isOpen ? copy.closeRightPanel : copy.openRightPanel;
+  const labelByPanel = new Map(panels.map((panel) => [panel.id, panel.label]));
+  const quickActions = quickActionPanels.filter(
+    (panel) => labelByPanel.has(panel)
+  );
+  return /* @__PURE__ */ jsx2(TooltipProvider, { children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": copy.tool,
+      className: cn(
+        "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",
+      onDoubleClick: (event) => event.stopPropagation(),
+      onPointerDown: (event) => event.stopPropagation(),
+      children: [
+        activePanel ? /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+          /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+            Button,
+            {
+              "aria-label": copy.newTab,
+              className: "text-[var(--text-secondary)]",
+              size: "icon-sm",
+              type: "button",
+              variant: "chrome",
+              children: /* @__PURE__ */ jsx2(AddLinedIcon, { "aria-hidden": true, className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(
+            DropdownMenuContent,
+            {
+              align: "end",
+              className: "min-w-36",
+              style: { zIndex: "var(--z-panel-popover)" },
+              children: panels.map((panel) => /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  onSelect: () => onAddPanel(panel.id),
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      AgentToolPanelIcon,
+                      {
+                        "aria-hidden": true,
+                        className: "size-4",
+                        panel: panel.id
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("span", { children: panel.label })
+                  ]
+                },
+                panel.id
+              ))
+            }
+          )
+        ] }) : null,
+        activePanel === null && !isOpen ? quickActions.map((panel) => /* @__PURE__ */ jsx2(
+          ToolbarQuickActionTooltip,
+          {
+            label: labelByPanel.get(panel) ?? panel,
+            children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                "aria-label": labelByPanel.get(panel) ?? panel,
+                "aria-pressed": false,
+                className: "relative text-[var(--text-secondary)]",
+                "data-standalone-agent-tool-sidebar-quick-action": panel,
+                size: "icon-sm",
+                type: "button",
+                variant: "chrome",
+                onClick: () => onOpenPanel(panel),
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    AgentToolPanelIcon,
+                    {
+                      "aria-hidden": true,
+                      className: "size-4",
+                      panel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(ReminderBadge, { count: reminders[panel] })
+                ]
+              }
+            )
+          },
+          panel
+        )) : null,
+        activePanel ? /* @__PURE__ */ jsx2(
+          Button,
+          {
+            "aria-label": `${isExpanded ? copy.shrink : copy.expand} ${labelByPanel.get(activePanel) ?? activePanel}`,
+            "aria-pressed": isExpanded,
+            className: "text-[var(--text-secondary)]",
+            size: "icon-sm",
+            type: "button",
+            variant: "chrome",
+            onClick: onToggleExpansion,
+            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: [
+          /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+            Button,
+            {
+              "aria-label": label,
+              "aria-pressed": isOpen,
+              className: "relative",
+              "data-standalone-agent-tool-sidebar-toggle": "true",
+              size: "icon-sm",
+              type: "button",
+              variant: isOpen && activePanel !== null ? "secondary" : "chrome",
+              onClick: onToggleSidebar,
+              children: /* @__PURE__ */ jsx2(PanelIcon, { "aria-hidden": true, className: "size-[18px] -scale-x-100" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(TooltipContent, { side: "bottom", children: label })
+        ] })
+      ]
+    }
+  ) });
+}
+function ToolbarQuickActionTooltip({
+  children,
+  label
+}) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx2(TooltipContent, { side: "bottom", children: label })
+  ] });
+}
+function ReminderBadge({ count }) {
+  const label = formatAgentToolReminderCount(count);
+  return label ? /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 inline-flex min-w-4 items-center justify-center rounded-full bg-[var(--state-danger)] px-1 text-[9px] leading-4 font-semibold text-[var(--white-stationary)]", children: label }) : null;
+}
+
+// workbench/tool-sidebar/Picker.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function AgentToolSidebarPicker({
+  panels,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx3(
+    "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",
+      children: /* @__PURE__ */ jsx3("div", { className: "flex w-full max-w-[340px] flex-col gap-2", children: panels.map((panel) => /* @__PURE__ */ jsxs2(
+        Button2,
+        {
+          className: "h-12 w-full justify-start gap-2.5 rounded-lg border border-[var(--line-1)] bg-[var(--background-fronted)] px-2.5 text-left text-[14px] font-medium text-[var(--text-primary)] shadow-none hover:border-[var(--line-2)] hover:bg-[var(--transparency-hover)]",
+          type: "button",
+          variant: "ghost",
+          onClick: () => onSelect(panel.id),
+          children: [
+            /* @__PURE__ */ jsx3("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-[7px] bg-[var(--transparency-block)] text-[var(--text-secondary)] group-hover/button:text-[var(--text-primary)]", children: /* @__PURE__ */ jsx3(
+              AgentToolPanelIcon,
+              {
+                "aria-hidden": true,
+                className: "size-4",
+                panel: panel.id
+              }
+            ) }),
+            /* @__PURE__ */ jsx3("span", { children: panel.label })
+          ]
+        },
+        panel.id
+      )) })
+    }
+  );
+}
+
+// workbench/tool-sidebar/useAgentToolSidebarController.ts
+import {
+  useCallback as useCallback2,
+  useReducer,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+
+// workbench/tool-sidebar/useAgentToolSidebarLayout.ts
+import {
+  useCallback,
+  useRef,
+  useState as useState2
+} from "react";
+function useAgentToolSidebarLayout({
+  activePanel,
+  activePanelPreferredWidth,
+  containerWidth,
+  mainContentMinWidthPx,
+  resizeContainerContentWidth
+}) {
+  const [containerResolution, setContainerResolution] = useState2(() => ({
+    resolved: containerWidth,
+    source: containerWidth
+  }));
+  if (containerResolution.source !== containerWidth) {
+    setContainerResolution({
+      resolved: containerWidth,
+      source: containerWidth
+    });
+  }
+  const resolvedContainerWidth = containerResolution.resolved;
+  const [panelWidths, setPanelWidths] = useState2(() => ({
+    ...agentToolPanelDefaultWidthById
+  }));
+  const [manuallyResizedWidth, setManuallyResizedWidth] = useState2(null);
+  const [expandedPanel, setExpandedPanel] = useState2(
+    null
+  );
+  const expandedPanelRef = useRef(null);
+  const baselineContainerWidthRef = useRef(null);
+  const panelWidthBeforeExpandRef = useRef({});
+  const resizeRequestRef = useRef(0);
+  const lastContainerResizeRef = useRef(null);
+  const dragRef = useRef(null);
+  const resizeStyleRef = useRef(
+    null
+  );
+  const isActivePanelExpanded = activePanel !== null && expandedPanel === activePanel;
+  const activePanelMaxWidth = activePanel ? resolveAgentToolPanelMaxWidth(
+    activePanel,
+    resolvedContainerWidth,
+    isActivePanelExpanded,
+    mainContentMinWidthPx
+  ) : 0;
+  const activePanelMinWidth = activePanel ? Math.min(agentToolPanelMinWidthById[activePanel], activePanelMaxWidth) : 0;
+  const activePanelWidth = activePanel ? resolveActivePanelWidth({
+    activePanel,
+    activePanelMaxWidth,
+    activePanelPreferredWidth,
+    baselineContainerWidth: baselineContainerWidthRef.current ?? resolvedContainerWidth,
+    containerWidth: resolvedContainerWidth,
+    isActivePanelExpanded,
+    mainContentMinWidthPx,
+    panelWidth: resolveAgentToolPanelPreferredWidth({
+      isExpanded: isActivePanelExpanded,
+      manuallyResizedWidth,
+      panelWidth: panelWidths[activePanel]
+    })
+  }) : 0;
+  const activePanelLayoutWidth = activePanel ? resolveAgentToolSidebarLayoutWidth({
+    baselineContainerWidth: baselineContainerWidthRef.current ?? resolvedContainerWidth,
+    containerWidth: resolvedContainerWidth,
+    panelWidth: activePanelWidth
+  }) : 0;
+  const resetPanelExpansion = useCallback(
+    (nextPanel) => {
+      const reset = resolveAgentToolPanelExpansionReset({
+        expandedPanel: expandedPanelRef.current,
+        nextPanel,
+        widthBeforeExpansion: expandedPanelRef.current === null ? void 0 : panelWidthBeforeExpandRef.current[expandedPanelRef.current]
+      });
+      if (!reset) return null;
+      if (nextPanel !== null) {
+        const transfer = resolveAgentToolPanelExpansionTransfer({
+          expandedPanel: expandedPanelRef.current,
+          nextPanel,
+          nextPanelWidth: resolveAgentToolPanelPreferredWidth({
+            isExpanded: false,
+            manuallyResizedWidth,
+            panelWidth: panelWidths[nextPanel]
+          }),
+          widthBeforeExpansion: panelWidthBeforeExpandRef.current[expandedPanelRef.current] ?? manuallyResizedWidth ?? void 0
+        });
+        if (!transfer) return null;
+        expandedPanelRef.current = transfer.expandedPanel;
+        setExpandedPanel(transfer.expandedPanel);
+        setPanelWidths((current) => ({
+          ...current,
+          [transfer.previousPanel]: transfer.previousPanelWidth,
+          [transfer.expandedPanel]: Number.MAX_SAFE_INTEGER
+        }));
+        panelWidthBeforeExpandRef.current[transfer.expandedPanel] = transfer.nextPanelWidthBeforeExpansion;
+        delete panelWidthBeforeExpandRef.current[transfer.previousPanel];
+        return "transferred";
+      }
+      expandedPanelRef.current = null;
+      setExpandedPanel(null);
+      setPanelWidths((current) => ({ ...current, [reset.panel]: reset.width }));
+      delete panelWidthBeforeExpandRef.current[reset.panel];
+      return "reset";
+    },
+    [manuallyResizedWidth, panelWidths]
+  );
+  const resizeForPanel = useCallback(
+    async (nextPanel, preferredWidth, options) => {
+      const requestId = ++resizeRequestRef.current;
+      const expansionTransition = resetPanelExpansion(nextPanel);
+      if (expansionTransition === "transferred" || nextPanel !== null && expandedPanelRef.current === nextPanel) {
+        return true;
+      }
+      if (nextPanel !== null && baselineContainerWidthRef.current === null) {
+        baselineContainerWidthRef.current = resolvedContainerWidth;
+      }
+      const baseline = baselineContainerWidthRef.current;
+      const requestedWidth = nextPanel === null ? baseline : (baseline ?? resolvedContainerWidth) + resolvePreferredWidth(
+        preferredWidth,
+        resolveAgentToolPanelPreferredWidth({
+          isExpanded: expandedPanelRef.current === nextPanel,
+          manuallyResizedWidth,
+          panelWidth: panelWidths[nextPanel]
+        })
+      );
+      if (requestedWidth !== null && shouldResizeAgentToolContainer({
+        currentWidth: resolvedContainerWidth,
+        lastResize: lastContainerResizeRef.current,
+        requestedWidth
+      })) {
+        try {
+          const result = await resizeContainerContentWidth(
+            requestedWidth,
+            options?.animateContainer
+          );
+          if (requestId !== resizeRequestRef.current) return false;
+          if (result.width > 0) {
+            lastContainerResizeRef.current = {
+              actualWidth: result.width,
+              requestedWidth
+            };
+            setContainerResolution((current) => ({
+              ...current,
+              resolved: result.width
+            }));
+          }
+        } catch {
+          if (requestId !== resizeRequestRef.current) return false;
+        }
+      }
+      if (nextPanel === null && options?.preserveBaseline !== true) {
+        baselineContainerWidthRef.current = null;
+      }
+      return true;
+    },
+    [
+      manuallyResizedWidth,
+      panelWidths,
+      resetPanelExpansion,
+      resizeContainerContentWidth,
+      resolvedContainerWidth
+    ]
+  );
+  const resetContainerResizeBaseline = useCallback(() => {
+    baselineContainerWidthRef.current = null;
+  }, []);
+  const updatePanelWidth = useCallback(
+    (panel, width) => {
+      const nextWidth = clampAgentToolPanelWidth({
+        allowFullWidth: expandedPanel === panel,
+        mainContentMinWidth: mainContentMinWidthPx,
+        panel,
+        viewportWidth: resolvedContainerWidth,
+        width
+      });
+      setManuallyResizedWidth(nextWidth);
+      setPanelWidths((current) => ({ ...current, [panel]: nextWidth }));
+    },
+    [expandedPanel, mainContentMinWidthPx, resolvedContainerWidth]
+  );
+  const togglePanelExpansion = useCallback(
+    (panel) => {
+      if (expandedPanelRef.current === panel) {
+        resetPanelExpansion(null);
+        return;
+      }
+      resetPanelExpansion(panel);
+      expandedPanelRef.current = panel;
+      setExpandedPanel(panel);
+      setPanelWidths((current) => {
+        panelWidthBeforeExpandRef.current[panel] = resolveAgentToolPanelPreferredWidth({
+          isExpanded: false,
+          manuallyResizedWidth,
+          panelWidth: current[panel]
+        });
+        return { ...current, [panel]: Number.MAX_SAFE_INTEGER };
+      });
+    },
+    [manuallyResizedWidth, resetPanelExpansion]
+  );
+  const stopResizing = useCallback(() => {
+    dragRef.current = null;
+    const styles = resizeStyleRef.current;
+    if (!styles) return;
+    document.body.style.cursor = styles.cursor;
+    document.body.style.userSelect = styles.userSelect;
+    resizeStyleRef.current = null;
+  }, []);
+  const bindLayoutRoot = useCallback(
+    (node) => {
+      if (!node) stopResizing();
+    },
+    [stopResizing]
+  );
+  const handleResizePointerDown = useCallback(
+    (event) => {
+      if (event.button !== 0 || activePanel === null) return;
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      dragRef.current = {
+        panel: activePanel,
+        pointerId: event.pointerId,
+        startClientX: event.clientX,
+        startWidth: activePanelWidth
+      };
+      resizeStyleRef.current = {
+        cursor: document.body.style.cursor,
+        userSelect: document.body.style.userSelect
+      };
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [activePanel, activePanelWidth]
+  );
+  const handleResizePointerMove = useCallback(
+    (event) => {
+      const resizeState = dragRef.current;
+      if (!resizeState || resizeState.pointerId !== event.pointerId) return;
+      updatePanelWidth(
+        resizeState.panel,
+        resizeState.startWidth + resizeState.startClientX - event.clientX
+      );
+    },
+    [updatePanelWidth]
+  );
+  const handleResizeKeyDown = useCallback(
+    (event) => {
+      if (activePanel === null) return;
+      if (event.key === "Home") {
+        event.preventDefault();
+        updatePanelWidth(activePanel, activePanelMinWidth);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        updatePanelWidth(activePanel, Number.MAX_SAFE_INTEGER);
+      } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        updatePanelWidth(
+          activePanel,
+          activePanelWidth + (event.key === "ArrowLeft" ? 24 : -24)
+        );
+      }
+    },
+    [activePanel, activePanelMinWidth, activePanelWidth, updatePanelWidth]
+  );
+  return {
+    activePanelLayoutWidth,
+    activePanelMaxWidth,
+    activePanelMinWidth,
+    activePanelWidth,
+    bindLayoutRoot,
+    handleResizeKeyDown,
+    handleResizePointerDown,
+    handleResizePointerMove,
+    isActivePanelExpanded,
+    resetContainerResizeBaseline,
+    resizeForPanel,
+    stopResizing,
+    togglePanelExpansion
+  };
+}
+function resolveActivePanelWidth(input) {
+  if (typeof input.activePanelPreferredWidth === "number" && Number.isFinite(input.activePanelPreferredWidth)) {
+    return Math.round(
+      Math.max(
+        0,
+        Math.min(input.activePanelMaxWidth, input.activePanelPreferredWidth)
+      )
+    );
+  }
+  return resolveAgentToolSidebarWidth({
+    allowFullWidth: input.isActivePanelExpanded,
+    baselineViewportWidth: input.baselineContainerWidth,
+    mainContentMinWidth: input.mainContentMinWidthPx,
+    panel: input.activePanel,
+    preferredWidth: input.panelWidth,
+    viewportWidth: input.containerWidth
+  });
+}
+function resolvePreferredWidth(preferredWidth, fallbackWidth) {
+  return typeof preferredWidth === "number" && Number.isFinite(preferredWidth) ? Math.max(0, Math.round(preferredWidth)) : fallbackWidth;
+}
+
+// workbench/tool-sidebar/useAgentToolSidebarController.ts
+var collapsedToolActionsWidthPx = 132;
+function useAgentToolSidebarController({
+  containerWidth,
+  mainContentMinWidthPx,
+  panels,
+  resizeContainerContentWidth,
+  onActivePanelChange,
+  onLayoutWidthChange,
+  onPanelOpen,
+  onTabsChange,
+  onTabClose
+}) {
+  const panelIds = new Set(panels.map((panel) => panel.id));
+  const [state, dispatch] = useReducer(
+    reduceAgentToolSidebarState,
+    void 0,
+    createAgentToolSidebarState
+  );
+  const [isSidebarOpen, setIsSidebarOpen] = useState3(false);
+  const [isEmptySidebarClosing, setIsEmptySidebarClosing] = useState3(false);
+  const [contentReadyTabIds, setContentReadyTabIds] = useState3([]);
+  const [toolActionsWidth, setToolActionsWidth] = useState3(
+    collapsedToolActionsWidthPx
+  );
+  const activePanel = state.activePanel;
+  const activeTabId = state.activeTabId;
+  const fallbackPanel = panels[0]?.id ?? null;
+  const isEmptySidebar = isSidebarOpen && state.mountedTabs.length === 0;
+  const isEmptySidebarSurface = (isSidebarOpen || isEmptySidebarClosing) && state.mountedTabs.length === 0;
+  const layoutPanel = activePanel ?? (isEmptySidebarSurface ? fallbackPanel : null);
+  const isActivePanelContentReady = activeTabId !== null && contentReadyTabIds.includes(activeTabId);
+  const shouldAnimateSidebarLayout = state.mountedTabs.length === 0 || isActivePanelContentReady;
+  const shouldAnimateSidebarWidth = isEmptySidebarSurface;
+  const layout = useAgentToolSidebarLayout({
+    activePanel: layoutPanel,
+    activePanelPreferredWidth: isEmptySidebarSurface ? agentToolEmptySidebarWidth : void 0,
+    containerWidth,
+    mainContentMinWidthPx,
+    resizeContainerContentWidth
+  });
+  const resizeAnimationFrameRef = useRef2(null);
+  const contentAnimationFrameIdsRef = useRef2(/* @__PURE__ */ new Set());
+  const toolActionsResizeObserverRef = useRef2(null);
+  const scheduleResizeForPanel = useCallback2(
+    (panel, preferredWidth, options) => {
+      if (resizeAnimationFrameRef.current !== null) {
+        window.cancelAnimationFrame(resizeAnimationFrameRef.current);
+      }
+      resizeAnimationFrameRef.current = window.requestAnimationFrame(() => {
+        resizeAnimationFrameRef.current = null;
+        void layout.resizeForPanel(panel, preferredWidth, options);
+      });
+    },
+    [layout.resizeForPanel]
+  );
+  const showSidebar = useCallback2(() => {
+    setIsEmptySidebarClosing(false);
+    setIsSidebarOpen(true);
+  }, []);
+  const markContentReady = useCallback2((tabId) => {
+    if (prefersReducedMotion()) {
+      setContentReadyTabIds(
+        (current) => current.includes(tabId) ? current : [...current, tabId]
+      );
+      return;
+    }
+    let completedSynchronously = false;
+    let frameId = 0;
+    frameId = window.requestAnimationFrame(() => {
+      completedSynchronously = true;
+      contentAnimationFrameIdsRef.current.delete(frameId);
+      setContentReadyTabIds(
+        (current) => current.includes(tabId) ? current : [...current, tabId]
+      );
+    });
+    if (!completedSynchronously) {
+      contentAnimationFrameIdsRef.current.add(frameId);
+    }
+  }, []);
+  const closePanel = useCallback2(() => {
+    setIsSidebarOpen(false);
+    dispatch({ type: "close" });
+    onActivePanelChange?.(null);
+    if (state.mountedTabs.length > 0 || prefersReducedMotion()) {
+      setIsEmptySidebarClosing(false);
+      scheduleResizeForPanel(null);
+      return;
+    }
+    setIsEmptySidebarClosing(true);
+    scheduleResizeForPanel(null, void 0, {
+      animateContainer: true,
+      preserveBaseline: true
+    });
+  }, [onActivePanelChange, scheduleResizeForPanel, state.mountedTabs.length]);
+  const openPanel = useCallback2(
+    (panel, resourceId) => {
+      if (!panelIds.has(panel)) return null;
+      showSidebar();
+      onPanelOpen?.(panel, resourceId);
+      const tabId = resolveToolTabId(state.mountedTabs, panel, resourceId);
+      const action = { panel, resourceId, tabId, type: "open-panel" };
+      const nextState = reduceAgentToolSidebarState(state, action);
+      dispatch(action);
+      onActivePanelChange?.(panel);
+      if (nextState.mountedTabs !== state.mountedTabs) {
+        onTabsChange?.(nextState.mountedTabs);
+      }
+      markContentReady(tabId);
+      scheduleResizeForPanel(panel);
+      return tabId;
+    },
+    [
+      markContentReady,
+      onActivePanelChange,
+      onPanelOpen,
+      onTabsChange,
+      panelIds,
+      scheduleResizeForPanel,
+      showSidebar,
+      state
+    ]
+  );
+  const addPanel = useCallback2(
+    (panel, resourceId) => {
+      if (!panelIds.has(panel)) return null;
+      showSidebar();
+      onPanelOpen?.(panel, resourceId);
+      const tabId = createToolTabId(panel);
+      const action = { panel, resourceId, tabId, type: "add-panel" };
+      const nextState = reduceAgentToolSidebarState(state, action);
+      dispatch(action);
+      onActivePanelChange?.(panel);
+      onTabsChange?.(nextState.mountedTabs);
+      markContentReady(tabId);
+      scheduleResizeForPanel(panel);
+      return tabId;
+    },
+    [
+      markContentReady,
+      onActivePanelChange,
+      onPanelOpen,
+      onTabsChange,
+      panelIds,
+      scheduleResizeForPanel,
+      showSidebar,
+      state
+    ]
+  );
+  const closePanelTab = useCallback2(
+    (tabId) => {
+      const closingIndex = state.mountedTabs.findIndex(
+        (tab) => tab.id === tabId
+      );
+      const closingTab = state.mountedTabs[closingIndex];
+      if (!closingTab) return;
+      const action = { tabId, type: "close-tab" };
+      const nextState = reduceAgentToolSidebarState(state, action);
+      setIsSidebarOpen(true);
+      dispatch(action);
+      onTabClose?.(closingTab);
+      onActivePanelChange?.(nextState.activePanel);
+      onTabsChange?.(nextState.mountedTabs);
+      if (nextState.activePanel === null) {
+        if (fallbackPanel) {
+          scheduleResizeForPanel(fallbackPanel, agentToolEmptySidebarWidth, {
+            animateContainer: !prefersReducedMotion()
+          });
+        }
+        return;
+      }
+      scheduleResizeForPanel(nextState.activePanel);
+    },
+    [
+      fallbackPanel,
+      onActivePanelChange,
+      onTabClose,
+      onTabsChange,
+      scheduleResizeForPanel,
+      state
+    ]
+  );
+  const activatePanelTab = useCallback2(
+    (tab) => {
+      onPanelOpen?.(tab.panel, tab.resourceId);
+      dispatch({ tabId: tab.id, type: "activate-tab" });
+      onActivePanelChange?.(tab.panel);
+      markContentReady(tab.id);
+      scheduleResizeForPanel(tab.panel);
+    },
+    [markContentReady, onActivePanelChange, onPanelOpen, scheduleResizeForPanel]
+  );
+  const toggleSidebar = useCallback2(() => {
+    const nextPanel = activePanel ?? fallbackPanel;
+    if (isSidebarOpen) {
+      closePanel();
+      return;
+    }
+    if (!nextPanel) return;
+    showSidebar();
+    if (state.mountedTabs.length === 0) {
+      scheduleResizeForPanel(nextPanel, agentToolEmptySidebarWidth, {
+        animateContainer: !prefersReducedMotion()
+      });
+      return;
+    }
+    const tabId = resolveToolTabId(state.mountedTabs, nextPanel);
+    dispatch({ panel: nextPanel, tabId, type: "open-panel" });
+    onActivePanelChange?.(nextPanel);
+    markContentReady(tabId);
+    scheduleResizeForPanel(nextPanel);
+  }, [
+    activePanel,
+    closePanel,
+    fallbackPanel,
+    isSidebarOpen,
+    markContentReady,
+    onActivePanelChange,
+    scheduleResizeForPanel,
+    showSidebar,
+    state.mountedTabs
+  ]);
+  const handleSidebarTransitionEnd = useCallback2(
+    (event) => {
+      if (event.currentTarget !== event.target || event.propertyName !== "width" || isSidebarOpen || !isEmptySidebarClosing) {
+        return;
+      }
+      setIsEmptySidebarClosing(false);
+      layout.resetContainerResizeBaseline();
+    },
+    [isEmptySidebarClosing, isSidebarOpen, layout.resetContainerResizeBaseline]
+  );
+  const bindLayoutWidthProjection = useCallback2(
+    (node) => {
+      if (node) {
+        onLayoutWidthChange?.(
+          isSidebarOpen ? layout.activePanelLayoutWidth : 0
+        );
+      }
+    },
+    [isSidebarOpen, layout.activePanelLayoutWidth, onLayoutWidthChange]
+  );
+  const bindLifecycle = useCallback2(
+    (node) => {
+      if (node) return;
+      if (resizeAnimationFrameRef.current !== null) {
+        window.cancelAnimationFrame(resizeAnimationFrameRef.current);
+        resizeAnimationFrameRef.current = null;
+      }
+      for (const frameId of contentAnimationFrameIdsRef.current) {
+        window.cancelAnimationFrame(frameId);
+      }
+      contentAnimationFrameIdsRef.current.clear();
+      toolActionsResizeObserverRef.current?.disconnect();
+      toolActionsResizeObserverRef.current = null;
+      layout.bindLayoutRoot(null);
+    },
+    [layout.bindLayoutRoot]
+  );
+  const measureToolActions = useCallback2((node) => {
+    toolActionsResizeObserverRef.current?.disconnect();
+    toolActionsResizeObserverRef.current = null;
+    if (!node) return;
+    const measure = () => {
+      const width = Math.ceil(node.getBoundingClientRect().width);
+      if (width > 0) setToolActionsWidth(width);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    toolActionsResizeObserverRef.current = observer;
+  }, []);
+  return {
+    ...layout,
+    activePanel,
+    activeTabId,
+    activatePanelTab,
+    addPanel,
+    bindLayoutWidthProjection,
+    bindLifecycle,
+    closePanel,
+    closePanelTab,
+    contentReadyTabIds,
+    handleSidebarTransitionEnd,
+    isEmptySidebar,
+    isEmptySidebarClosing,
+    isSidebarOpen,
+    markContentReady,
+    measureToolActions,
+    mountedTabs: state.mountedTabs,
+    openPanel,
+    shouldAnimateSidebarLayout,
+    shouldAnimateSidebarWidth,
+    toolActionsWidth,
+    toggleSidebar
+  };
+}
+function resolveToolTabId(tabs, panel, resourceId) {
+  for (let index = tabs.length - 1; index >= 0; index -= 1) {
+    const tab = tabs[index];
+    if (tab?.panel === panel && (resourceId === void 0 || tab.resourceId === resourceId)) {
+      return tab.id;
+    }
+  }
+  return createToolTabId(panel);
+}
+function createToolTabId(panel) {
+  const instanceId = typeof globalThis.crypto?.randomUUID === "function" ? globalThis.crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+  return `${panel}:${instanceId}`;
+}
+function prefersReducedMotion() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+}
+
+// workbench/tool-sidebar/AgentToolSidebar.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var AgentToolSidebar = forwardRef(function AgentToolSidebar2({
+  children,
+  containerWidth,
+  copy,
+  headerPlacement = "inline",
+  mainContentMinWidthPx,
+  panels: unfilteredPanels,
+  quickActionPanels,
+  reminders,
+  renderHeader,
+  renderLoading,
+  renderPanel,
+  renderTabIcon,
+  resolveTabLabel,
+  resizeContainerContentWidth,
+  onActivePanelChange,
+  onLayoutWidthChange,
+  onPanelOpen,
+  onTabsChange,
+  onTabClose
+}, ref) {
+  const panels = filterAgentToolPanels(unfilteredPanels);
+  const labelByPanel = new Map(panels.map((panel) => [panel.id, panel.label]));
+  const {
+    activePanelLayoutWidth,
+    activePanelMaxWidth,
+    activePanelMinWidth,
+    activePanelWidth,
+    handleResizeKeyDown,
+    handleResizePointerDown,
+    handleResizePointerMove,
+    isActivePanelExpanded,
+    activePanel,
+    activeTabId,
+    activatePanelTab,
+    addPanel,
+    bindLayoutWidthProjection,
+    bindLifecycle,
+    closePanel,
+    closePanelTab,
+    contentReadyTabIds,
+    handleSidebarTransitionEnd,
+    isEmptySidebar,
+    isEmptySidebarClosing,
+    isSidebarOpen,
+    measureToolActions,
+    mountedTabs,
+    openPanel,
+    shouldAnimateSidebarLayout,
+    shouldAnimateSidebarWidth,
+    stopResizing,
+    toolActionsWidth,
+    toggleSidebar,
+    togglePanelExpansion
+  } = useAgentToolSidebarController({
+    containerWidth,
+    mainContentMinWidthPx,
+    onActivePanelChange,
+    onLayoutWidthChange,
+    onPanelOpen,
+    onTabClose,
+    onTabsChange,
+    panels,
+    resizeContainerContentWidth
+  });
+  useImperativeHandle(
+    ref,
+    () => ({
+      addPanel,
+      close: closePanel,
+      closeTab: closePanelTab,
+      openPanel
+    }),
+    [addPanel, closePanel, closePanelTab, openPanel]
+  );
+  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 [-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",
+      ref: measureToolActions,
+      style: isSidebarOpen ? { width: `${activePanelWidth}px`, maxWidth: "100%" } : void 0,
+      children: [
+        activeTabId ? /* @__PURE__ */ jsx4(
+          ToolSidebarTabBar,
+          {
+            activeTabId,
+            copy,
+            labelByPanel,
+            mountedTabs,
+            renderTabIcon,
+            resolveTabLabel,
+            onClosePanel: closePanelTab,
+            onOpenPanel: activatePanelTab
+          }
+        ) : null,
+        /* @__PURE__ */ jsx4(
+          AgentToolSidebarToolbar,
+          {
+            activePanel,
+            copy,
+            isExpanded: isActivePanelExpanded,
+            isOpen: isSidebarOpen,
+            panels,
+            quickActionPanels,
+            reminders,
+            onAddPanel: addPanel,
+            onOpenPanel: openPanel,
+            onToggleExpansion: () => {
+              if (activePanel) togglePanelExpansion(activePanel);
+            },
+            onToggleSidebar: toggleSidebar
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    headerPlacement === "external" || headerPlacement === "panel" ? renderHeader(
+      headerPlacement === "panel" && isSidebarOpen ? null : toolActions
+    ) : /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: "workbench-window__header workbench-window__header--custom",
+        style: {
+          "--agent-gui-tool-sidebar-layout-width": isSidebarOpen ? `${activePanelLayoutWidth}px` : `${toolActionsWidth}px`
+        },
+        children: renderHeader(toolActions)
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: cn2(
+          "flex h-full min-h-0 min-w-0 flex-col overflow-hidden",
+          headerPlacement === "inline" && "workbench-window__body"
+        ),
+        ref: bindLifecycle,
+        children: /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 min-w-0 flex-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-full min-w-0 flex-1 overflow-hidden", children }),
+          /* @__PURE__ */ jsx4(
+            "aside",
+            {
+              "aria-hidden": !isSidebarOpen,
+              className: cn2(
+                "relative h-full min-h-0 shrink-0 overflow-hidden [contain:layout_paint]",
+                shouldAnimateSidebarWidth && "motion-safe:transition-[width] motion-safe:duration-[260ms] motion-safe:ease-in-out motion-reduce:transition-none",
+                isActivePanelExpanded && "border-l border-[var(--line-1)]",
+                !isSidebarOpen && "pointer-events-none"
+              ),
+              "data-standalone-agent-tool-sidebar": "true",
+              ref: bindLayoutWidthProjection,
+              style: {
+                width: isSidebarOpen ? `${activePanelLayoutWidth}px` : "0px",
+                zIndex: "var(--z-panel)"
+              },
+              onTransitionEnd: handleSidebarTransitionEnd,
+              children: /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  className: cn2(
+                    "absolute inset-y-0 right-0 flex flex-col bg-[var(--background-session-sidepanel)]",
+                    isSidebarOpen && !shouldAnimateSidebarLayout && "motion-safe:animate-in motion-safe:slide-in-from-right-3 motion-safe:duration-[160ms] motion-safe:ease-out motion-reduce:animate-none",
+                    !isSidebarOpen && !isEmptySidebarClosing && "invisible"
+                  ),
+                  style: {
+                    "--background-panel": "var(--background-session-sidepanel)",
+                    width: `${activePanelWidth}px`
+                  },
+                  children: [
+                    isSidebarOpen && !isEmptySidebar ? /* @__PURE__ */ jsx4(
+                      "div",
+                      {
+                        "aria-label": copy.resizeSidebar,
+                        "aria-orientation": "vertical",
+                        "aria-valuemax": activePanelMaxWidth,
+                        "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",
+                        role: "separator",
+                        tabIndex: 0,
+                        onKeyDown: handleResizeKeyDown,
+                        onLostPointerCapture: stopResizing,
+                        onPointerDown: handleResizePointerDown,
+                        onPointerMove: handleResizePointerMove,
+                        onPointerUp: stopResizing
+                      }
+                    ) : null,
+                    isSidebarOpen && headerPlacement === "panel" ? toolActions : null,
+                    isSidebarOpen && headerPlacement === "inline" ? /* @__PURE__ */ jsx4(
+                      "div",
+                      {
+                        "aria-hidden": true,
+                        className: "shrink-0",
+                        "data-standalone-agent-tool-sidebar-header-spacer": "true",
+                        style: {
+                          height: "var(--agent-gui-workbench-header-height, 44px)"
+                        }
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsxs3("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [
+                      isEmptySidebar || isEmptySidebarClosing ? /* @__PURE__ */ jsx4(
+                        AgentToolSidebarPicker,
+                        {
+                          panels,
+                          onSelect: openPanel
+                        }
+                      ) : null,
+                      mountedTabs.map((tab) => /* @__PURE__ */ jsx4(
+                        "div",
+                        {
+                          "aria-hidden": activeTabId !== tab.id,
+                          className: cn2(
+                            "absolute inset-0 min-h-0 overflow-hidden",
+                            activeTabId !== tab.id && "invisible pointer-events-none"
+                          ),
+                          children: contentReadyTabIds.includes(tab.id) ? /* @__PURE__ */ jsx4(
+                            "div",
+                            {
+                              className: cn2(
+                                "h-full min-h-0",
+                                tab.panel !== "terminal" && "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:duration-150 motion-reduce:animate-none"
+                              ),
+                              children: renderPanel({
+                                active: activeTabId === tab.id,
+                                closeSidebar: closePanel,
+                                tab
+                              })
+                            }
+                          ) : activeTabId === tab.id ? renderLoading?.(tab) ?? null : null
+                        },
+                        tab.id
+                      ))
+                    ] })
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+});
+function ToolSidebarTabBar({
+  activeTabId,
+  copy,
+  labelByPanel,
+  mountedTabs,
+  renderTabIcon,
+  resolveTabLabel,
+  onClosePanel,
+  onOpenPanel
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "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 [-webkit-app-region:drag]",
+      "data-standalone-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;
+        const label = resolveTabLabel?.(tab, defaultLabel) ?? defaultLabel;
+        return /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: cn2(
+              "group flex h-7 max-w-44 shrink-0 items-center rounded-sm overflow-hidden border text-xs text-[var(--text-tertiary)]",
+              activeTabId === tab.id ? "border-[var(--line-2)] bg-[var(--background-fronted)] text-[var(--text-primary)]" : "border-transparent"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  "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,
+                  role: "tab",
+                  type: "button",
+                  onClick: () => onOpenPanel(tab),
+                  children: [
+                    renderTabIcon?.(tab) ?? /* @__PURE__ */ jsx4(
+                      AgentToolPanelIcon,
+                      {
+                        "aria-hidden": true,
+                        className: "size-3.5 shrink-0",
+                        panel: tab.panel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4("span", { className: "truncate", children: label })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  "aria-label": `${copy.close} ${label}`,
+                  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),
+                  children: /* @__PURE__ */ jsx4(CloseIcon, { "aria-hidden": true, className: "size-3" })
+                }
+              )
+            ]
+          },
+          tab.id
+        );
+      }) })
+    }
+  );
+}
+export {
+  AgentToolBrowserPanel,
+  AgentToolPanelIcon,
+  AgentToolSidebar,
+  AgentToolSidebarPicker,
+  AgentToolSidebarToolbar,
+  agentToolBrowserDefaultUrl,
+  agentToolEmptySidebarWidth,
+  agentToolMainMinWidth,
+  agentToolPanelDefaultWidthById,
+  agentToolPanelIds,
+  agentToolPanelMaxWidthById,
+  agentToolPanelMinWidthById,
+  clampAgentToolPanelWidth,
+  createAgentToolBrowserFeature,
+  createAgentToolSidebarState,
+  filterAgentToolPanels,
+  formatAgentToolReminderCount,
+  isAgentToolPanelId,
+  reduceAgentToolSidebarState,
+  resolveAgentToolPanelExpansionReset,
+  resolveAgentToolPanelExpansionTransfer,
+  resolveAgentToolPanelMaxWidth,
+  resolveAgentToolPanelPreferredWidth,
+  resolveAgentToolSidebarLayoutWidth,
+  resolveAgentToolSidebarWidth,
+  shouldResizeAgentToolContainer
+};
+//# sourceMappingURL=index.js.map