fix: hide native web view behind AI overlay

packages/web-proxy/src/WebProxySurface.vue

@@ -92,8 +92,10 @@ let unlistenRecordingState: (() => void) | undefined;
 let overlayObserver: MutationObserver | undefined;
 
 // Nuxt UI teleports interactive overlays into the main webview, but desktop child
-// webviews always render above that DOM. Tooltips are intentionally excluded.
+// webviews always render above that DOM. Custom floating panels opt in with
+// data-native-view-overlay. Tooltips are intentionally excluded.
 const OVERLAY_SELECTOR = [
+  "[data-native-view-overlay]",
   '[role="menu"][data-state="open"]',
   '[role="dialog"][data-state="open"]',
   '[role="alertdialog"][data-state="open"]',

ui/components/RightPanel/AiOverlayPanel.vue

@@ -63,6 +63,7 @@ onDeactivated(resetPosition);
   <div
     id="workspace-ai-overlay"
     ref="host"
+    data-native-view-overlay
     data-ai-context="preserve"
     class="pointer-events-none absolute inset-0 z-50"
   >

ui/koko/components/SftpIde/index.vue

@@ -74,7 +74,7 @@ const explorerRef = useTemplateRef<{
   openUploadPicker: () => void;
   scrollQuickOpenActive: () => void;
 }>("explorer");
-const editorLayout = ref<HTMLElement | null>(null);
+const editorLayout = shallowRef<HTMLElement | null>(null);
 const alertDialogOpen = ref(false);
 const alertTarget = ref<AlertTarget | null>(null);
 const alertSubmitting = ref(false);

ui/workspaces/WebProxySessionSurface.test.ts

@@ -2,8 +2,9 @@ import ts from "typescript";
 import { expect, it, vi } from "vitest";
 import { computed, effectScope, nextTick, reactive, ref, toRaw, watch } from "vue";
 import source from "../../packages/web-proxy/src/WebProxySurface.vue?raw";
+import aiPanelSource from "../components/RightPanel/AiOverlayPanel.vue?raw";
 
-function setupSurface(safeMode = false, observe = false) {
+function setupSurface(safeMode = false, observe = false, dom?: Document) {
   const desktopWebProxy = {
     create: vi.fn(async (request: Record<string, unknown>) => structuredClone(request)),
     onState: vi.fn(async () => vi.fn()),
@@ -70,16 +71,18 @@ function setupSurface(safeMode = false, observe = false) {
     useWorkspaceTabs: () => ({ activeTabId: ref("tab"), tabs: ref([]), markSessionConnected, closeSession }),
     usePlatform: () => ({}),
     registerWorkspaceSessionCloseGuard: vi.fn(),
-    document: {
+    document: dom ?? {
       visibilityState: "visible",
       querySelector: vi.fn(),
       addEventListener: vi.fn(),
       removeEventListener: vi.fn()
     },
-    MutationObserver: class {
-      observe() {}
-      disconnect() {}
-    },
+    MutationObserver: dom
+      ? MutationObserver
+      : class {
+          observe() {}
+          disconnect() {}
+        },
     ResizeObserver: class {
       observe() {}
       disconnect() {}
@@ -114,6 +117,45 @@ function setupSurface(safeMode = false, observe = false) {
   };
 }
 
+it.skipIf(typeof document === "undefined")(
+  "backgrounds the native website for AI and menus, restoring only the active tab",
+  async () => {
+    const { surface, desktopWebProxy, props, mount, stop } = setupSurface(false, true, document);
+    const host = document.createElement("div");
+    document.body.append(host);
+    try {
+      await mount();
+      expect(desktopWebProxy.setActive).toHaveBeenLastCalledWith(surface.viewLabel, true);
+      // Use the actual AI host markup so losing its overlay marker regresses this check.
+      host.innerHTML = `${aiPanelSource.match(/<div\s+id="workspace-ai-overlay"[^>]*>/)![0]}</div>`;
+      await vi.waitFor(() => expect(desktopWebProxy.setActive).toHaveBeenLastCalledWith(surface.viewLabel, false));
+
+      host.insertAdjacentHTML("beforeend", '<div role="menu" data-state="open"></div>');
+      host.firstElementChild!.remove();
+      await nextTick();
+      expect(desktopWebProxy.setActive).toHaveBeenLastCalledWith(surface.viewLabel, false);
+      host.replaceChildren();
+      await vi.waitFor(() => expect(desktopWebProxy.setActive).toHaveBeenLastCalledWith(surface.viewLabel, true));
+
+      props.active = false;
+      await nextTick();
+      expect(desktopWebProxy.setActive).toHaveBeenLastCalledWith(surface.viewLabel, false);
+      host.innerHTML = "<div data-native-view-overlay></div>";
+      await nextTick();
+      host.replaceChildren();
+      await nextTick();
+      expect(desktopWebProxy.setActive).toHaveBeenLastCalledWith(surface.viewLabel, false);
+      props.active = true;
+      await vi.waitFor(() => expect(desktopWebProxy.setActive).toHaveBeenLastCalledWith(surface.viewLabel, true));
+      expect(desktopWebProxy.create).toHaveBeenCalledOnce();
+      expect(desktopWebProxy.close).not.toHaveBeenCalled();
+    } finally {
+      stop();
+      host.remove();
+    }
+  }
+);
+
 it.each([undefined, [], ["https://sso.test", "https://asset.test:8443"]].map((allowedUrls) => ({ allowedUrls })))(
   "creates a view from reactive session data with allowed URLs $allowedUrls",
   async ({ allowedUrls }) => {