[codex] Handle browser passthrough during v2 resize

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/useBrowserShellInteractionPassthrough/index.ts

@@ -0,0 +1 @@
+export { useBrowserShellInteractionPassthrough } from "./useBrowserShellInteractionPassthrough";

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/useBrowserShellInteractionPassthrough/useBrowserShellInteractionPassthrough.ts

@@ -0,0 +1,64 @@
+import type { WorkspaceInteractionState } from "@superset/panes";
+import { useCallback, useEffect, useRef } from "react";
+import { browserRuntimeRegistry } from "../usePaneRegistry/components/BrowserPane";
+
+interface UseBrowserShellInteractionPassthroughArgs {
+	sidebarOpen: boolean;
+}
+
+export function useBrowserShellInteractionPassthrough({
+	sidebarOpen,
+}: UseBrowserShellInteractionPassthroughArgs) {
+	const workspaceResizeActiveRef = useRef(false);
+	const sidebarResizeActiveRef = useRef(false);
+
+	const syncBrowserShellInteractionPassthrough = useCallback(() => {
+		browserRuntimeRegistry.setShellInteractionPassthrough(
+			workspaceResizeActiveRef.current || sidebarResizeActiveRef.current,
+		);
+	}, []);
+
+	const onWorkspaceInteractionStateChange = useCallback(
+		(state: WorkspaceInteractionState) => {
+			workspaceResizeActiveRef.current = state.resizeActive;
+			syncBrowserShellInteractionPassthrough();
+		},
+		[syncBrowserShellInteractionPassthrough],
+	);
+
+	const onSidebarResizeDragging = useCallback(
+		(isDragging: boolean) => {
+			sidebarResizeActiveRef.current = isDragging;
+			syncBrowserShellInteractionPassthrough();
+		},
+		[syncBrowserShellInteractionPassthrough],
+	);
+
+	const clearBrowserShellInteractionPassthrough = useCallback(() => {
+		workspaceResizeActiveRef.current = false;
+		sidebarResizeActiveRef.current = false;
+		browserRuntimeRegistry.setShellInteractionPassthrough(false);
+	}, []);
+
+	useEffect(() => {
+		window.addEventListener("blur", clearBrowserShellInteractionPassthrough);
+		return () => {
+			window.removeEventListener(
+				"blur",
+				clearBrowserShellInteractionPassthrough,
+			);
+			clearBrowserShellInteractionPassthrough();
+		};
+	}, [clearBrowserShellInteractionPassthrough]);
+
+	useEffect(() => {
+		if (sidebarOpen || !sidebarResizeActiveRef.current) return;
+		sidebarResizeActiveRef.current = false;
+		syncBrowserShellInteractionPassthrough();
+	}, [sidebarOpen, syncBrowserShellInteractionPassthrough]);
+
+	return {
+		onSidebarResizeDragging,
+		onWorkspaceInteractionStateChange,
+	};
+}

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/BrowserPane/browserRuntimeRegistry.ts

@@ -46,6 +46,8 @@ class BrowserRuntimeRegistryImpl {
 	private listenersByPaneId = new Map<string, Set<() => void>>();
 	private rootContainer: HTMLDivElement | null = null;
 	private globalListenersInstalled = false;
+	private windowDragPassthrough = false;
+	private shellInteractionPassthrough = false;
 
 	private getListeners(paneId: string): Set<() => void> {
 		let set = this.listenersByPaneId.get(paneId);
@@ -57,12 +59,16 @@ class BrowserRuntimeRegistryImpl {
 	}
 
 	private ensureRootContainer(): HTMLDivElement {
-		if (this.rootContainer?.isConnected) return this.rootContainer;
+		if (this.rootContainer?.isConnected) {
+			this.installGlobalListeners();
+			return this.rootContainer;
+		}
 		const existing = document.getElementById(
 			ROOT_CONTAINER_ID,
 		) as HTMLDivElement | null;
 		if (existing) {
 			this.rootContainer = existing;
+			this.installGlobalListeners();
 			return existing;
 		}
 		const root = document.createElement("div");
@@ -84,15 +90,22 @@ class BrowserRuntimeRegistryImpl {
 		if (this.globalListenersInstalled) return;
 		this.globalListenersInstalled = true;
 
-		const setPassthrough = (passthrough: boolean) => {
-			for (const entry of this.entries.values()) {
-				if (!entry.visible) continue;
-				entry.webview.style.pointerEvents = passthrough ? "none" : "auto";
-			}
-		};
-		window.addEventListener("dragstart", () => setPassthrough(true), true);
-		window.addEventListener("dragend", () => setPassthrough(false), true);
-		window.addEventListener("drop", () => setPassthrough(false), true);
+		window.addEventListener(
+			"dragstart",
+			() => this.setWindowDragPassthrough(true),
+			true,
+		);
+		window.addEventListener(
+			"dragend",
+			() => this.setWindowDragPassthrough(false),
+			true,
+		);
+		window.addEventListener(
+			"drop",
+			() => this.setWindowDragPassthrough(false),
+			true,
+		);
+		window.addEventListener("blur", () => this.setWindowDragPassthrough(false));
 
 		window.addEventListener("resize", () => {
 			for (const entry of this.entries.values()) {
@@ -101,6 +114,35 @@ class BrowserRuntimeRegistryImpl {
 		});
 	}
 
+	private setWindowDragPassthrough(passthrough: boolean) {
+		const wasActive = this.isPointerPassthroughActive();
+		this.windowDragPassthrough = passthrough;
+		this.applyPointerPassthroughIfChanged(wasActive);
+	}
+
+	setShellInteractionPassthrough(passthrough: boolean): void {
+		const wasActive = this.isPointerPassthroughActive();
+		this.shellInteractionPassthrough = passthrough;
+		this.applyPointerPassthroughIfChanged(wasActive);
+	}
+
+	private isPointerPassthroughActive() {
+		return this.windowDragPassthrough || this.shellInteractionPassthrough;
+	}
+
+	private applyPointerPassthroughIfChanged(wasActive: boolean) {
+		const isActive = this.isPointerPassthroughActive();
+		if (wasActive !== isActive) this.applyPointerPassthrough();
+	}
+
+	private applyPointerPassthrough() {
+		const passthrough = this.isPointerPassthroughActive();
+		for (const entry of this.entries.values()) {
+			if (!entry.visible) continue;
+			entry.webview.style.pointerEvents = passthrough ? "none" : "auto";
+		}
+	}
+
 	private updateLayout(entry: RegistryEntry) {
 		if (!entry.placeholder) return;
 		const rect = entry.placeholder.getBoundingClientRect();
@@ -349,6 +391,7 @@ class BrowserRuntimeRegistryImpl {
 
 		this.updateLayout(entry);
 		entry.webview.style.visibility = "visible";
+		this.applyPointerPassthrough();
 	}
 
 	detach(paneId: string): void {

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/page.tsx

@@ -39,6 +39,7 @@ import { V2NotificationStatusIndicator } from "./components/V2NotificationStatus
 import { V2PresetsBar } from "./components/V2PresetsBar";
 import { WorkspaceEmptyState } from "./components/WorkspaceEmptyState";
 import { WorkspaceSidebar } from "./components/WorkspaceSidebar";
+import { useBrowserShellInteractionPassthrough } from "./hooks/useBrowserShellInteractionPassthrough";
 import { useConsumeAutomationRunLink } from "./hooks/useConsumeAutomationRunLink";
 import { useConsumeOpenUrlRequest } from "./hooks/useConsumeOpenUrlRequest";
 import { useConsumePendingLaunch } from "./hooks/useConsumePendingLaunch";
@@ -482,6 +483,8 @@ function WorkspaceContent({
 	);
 
 	const sidebarOpen = v2UserPreferences.rightSidebarOpen;
+	const { onSidebarResizeDragging, onWorkspaceInteractionStateChange } =
+		useBrowserShellInteractionPassthrough({ sidebarOpen });
 
 	useWorkspaceHotkeys({
 		store,
@@ -593,13 +596,14 @@ function WorkspaceContent({
 									});
 								});
 							}}
+							onInteractionStateChange={onWorkspaceInteractionStateChange}
 							store={store}
 						/>
 					</div>
 				</ResizablePanel>
 				{sidebarOpen && (
 					<>
-						<ResizableHandle />
+						<ResizableHandle onDragging={onSidebarResizeDragging} />
 						<ResizablePanel
 							className="min-w-[220px]"
 							defaultSize={20}

packages/panes/src/index.ts

@@ -15,6 +15,7 @@ export type {
 	PaneRegistry,
 	RendererContext,
 	TabContext,
+	WorkspaceInteractionState,
 	WorkspaceProps,
 } from "./react";
 export { resolveTabTitle, Workspace } from "./react";

packages/panes/src/react/components/Workspace/Workspace.tsx

@@ -5,6 +5,7 @@ import type { Pane } from "../../../types";
 import type { WorkspaceProps } from "../../types";
 import { Tab } from "./components/Tab";
 import { TabBar } from "./components/TabBar";
+import { useWorkspaceInteractionState } from "./hooks/useWorkspaceInteractionState";
 import { resolveTabTitle } from "./utils/resolveTabTitle";
 
 export function Workspace<TData>({
@@ -17,12 +18,16 @@ export function Workspace<TData>({
 	renderAddTabMenu,
 	renderBelowTabBar,
 	onBeforeCloseTab,
+	onInteractionStateChange,
 	paneActions,
 	contextMenuActions,
 }: WorkspaceProps<TData>) {
 	const tabs = useStore(store, (s) => s.tabs);
 	const activeTabId = useStore(store, (s) => s.activeTabId);
 	const activeTab = tabs.find((t) => t.id === activeTabId) ?? null;
+	const { onSplitResizeDragging } = useWorkspaceInteractionState({
+		onInteractionStateChange,
+	});
 
 	const previousPanesRef = useRef<Map<string, Pane<TData>>>(new Map());
 	useEffect(() => {
@@ -91,6 +96,7 @@ export function Workspace<TData>({
 					registry={registry}
 					paneActions={paneActions}
 					contextMenuActions={contextMenuActions}
+					onSplitResizeDragging={onSplitResizeDragging}
 				/>
 			) : (
 				<div className="flex min-h-0 min-w-0 flex-1 items-center justify-center text-sm text-muted-foreground">

packages/panes/src/react/components/Workspace/components/Tab/Tab.tsx

@@ -3,7 +3,7 @@ import {
 	ResizablePanel,
 	ResizablePanelGroup,
 } from "@superset/ui/resizable";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import type { StoreApi } from "zustand/vanilla";
 import type { WorkspaceStore } from "../../../../../core/store";
 import type {
@@ -30,6 +30,7 @@ interface TabProps<TData> {
 	contextMenuActions?:
 		| ContextMenuActionConfig<TData>[]
 		| ((context: RendererContext<TData>) => ContextMenuActionConfig<TData>[]);
+	onSplitResizeDragging?: (sourceId: string, isDragging: boolean) => void;
 }
 
 function SplitView<TData>({
@@ -40,6 +41,7 @@ function SplitView<TData>({
 	registry,
 	paneActions,
 	contextMenuActions,
+	onSplitResizeDragging,
 }: {
 	store: StoreApi<WorkspaceStore<TData>>;
 	tab: TabType<TData>;
@@ -48,10 +50,18 @@ function SplitView<TData>({
 	registry: PaneRegistry<TData>;
 	paneActions?: TabProps<TData>["paneActions"];
 	contextMenuActions?: TabProps<TData>["contextMenuActions"];
+	onSplitResizeDragging?: TabProps<TData>["onSplitResizeDragging"];
 }) {
 	const groupRef = useRef<React.ComponentRef<typeof ResizablePanelGroup>>(null);
 	const firstSize = node.splitPercentage ?? 50;
 	const secondSize = 100 - firstSize;
+	const resizeSourceId = `${tab.id}:${path.join(".") || "root"}`;
+
+	useEffect(() => {
+		return () => {
+			onSplitResizeDragging?.(resizeSourceId, false);
+		};
+	}, [onSplitResizeDragging, resizeSourceId]);
 
 	return (
 		<ResizablePanelGroup
@@ -84,10 +94,15 @@ function SplitView<TData>({
 					registry={registry}
 					paneActions={paneActions}
 					contextMenuActions={contextMenuActions}
+					onSplitResizeDragging={onSplitResizeDragging}
 					parentDirection={node.direction}
 				/>
 			</ResizablePanel>
-			<ResizableHandle />
+			<ResizableHandle
+				onDragging={(isDragging) =>
+					onSplitResizeDragging?.(resizeSourceId, isDragging)
+				}
+			/>
 			<ResizablePanel
 				className={PANE_MIN_SIZE_CLASS_NAME}
 				defaultSize={secondSize}
@@ -100,6 +115,7 @@ function SplitView<TData>({
 					registry={registry}
 					paneActions={paneActions}
 					contextMenuActions={contextMenuActions}
+					onSplitResizeDragging={onSplitResizeDragging}
 					parentDirection={node.direction}
 				/>
 			</ResizablePanel>
@@ -115,6 +131,7 @@ function LayoutNodeView<TData>({
 	registry,
 	paneActions,
 	contextMenuActions,
+	onSplitResizeDragging,
 	parentDirection = null,
 }: {
 	store: StoreApi<WorkspaceStore<TData>>;
@@ -124,6 +141,7 @@ function LayoutNodeView<TData>({
 	registry: PaneRegistry<TData>;
 	paneActions?: TabProps<TData>["paneActions"];
 	contextMenuActions?: TabProps<TData>["contextMenuActions"];
+	onSplitResizeDragging?: TabProps<TData>["onSplitResizeDragging"];
 	parentDirection?: "horizontal" | "vertical" | null;
 }) {
 	if (node.type === "pane") {
@@ -153,6 +171,7 @@ function LayoutNodeView<TData>({
 			registry={registry}
 			paneActions={paneActions}
 			contextMenuActions={contextMenuActions}
+			onSplitResizeDragging={onSplitResizeDragging}
 		/>
 	);
 }
@@ -163,6 +182,7 @@ export function Tab<TData>({
 	registry,
 	paneActions,
 	contextMenuActions,
+	onSplitResizeDragging,
 }: TabProps<TData>) {
 	if (!tab.layout) {
 		return (
@@ -182,6 +202,7 @@ export function Tab<TData>({
 				registry={registry}
 				paneActions={paneActions}
 				contextMenuActions={contextMenuActions}
+				onSplitResizeDragging={onSplitResizeDragging}
 			/>
 		</div>
 	);

packages/panes/src/react/components/Workspace/hooks/useWorkspaceInteractionState/index.ts

@@ -0,0 +1 @@
+export { useWorkspaceInteractionState } from "./useWorkspaceInteractionState";