@dimina-kit/devtools 0.3.2-dev.20260525152421 → 0.3.2-dev.20260610082053

package/dist/main/services/views/view-manager.js

@@ -1,8 +1,14 @@
-import { WebContentsView, webContents } from 'electron';
+import { ipcMain, shell, WebContentsView, webContents } from 'electron';
 import path from 'path';
-import { mainPreloadPath } from '../../utils/paths.js';
-import { applyNavigationHardening } from '../../windows/navigation-hardening.js';
+import { cjsSiblingPreloadPath, hostToolbarPreloadPath, mainPreloadPath } from '../../utils/paths.js';
+import { applyNavigationHardening, handleWindowOpenExternal, } from '../../windows/navigation-hardening.js';
+import { SimulatorCustomApiBridgeChannel } from '../../../shared/ipc-channels.js';
+import { OPEN_IN_EDITOR_SCHEME, decodeOpenInEditorUrl, resourceUrlToProjectRelativePath, } from '../../../shared/open-in-editor.js';
+import { createSafeAreaController } from '../safe-area/index.js';
+import { buildCustomizeTabsScript } from './devtools-tabs.js';
+import { installElementsForward } from '../elements-forward/index.js';
 import * as layout from '../layout/index.js';
+import { handleCustomApiBridgeRequest, } from '../simulator/custom-apis.js';
 import { getDefaultTab } from '../workbench-context.js';
 /**
  * Build a ViewManager bound to the given context. The returned object is the
@@ -15,14 +21,71 @@ export function createViewManager(ctx) {
     // Resolve once: full WorkbenchContext always provides headerHeight; partial
     // test contexts may omit it, in which case fall back to the default 40.
     const headerHeight = ctx.headerHeight ?? 40;
+    // CSS env(safe-area-inset-*) simulation for render-host guests (per device).
+    // Driven from did-attach-webview below; re-pushed on device change via
+    // reapplySafeArea. Torn down in disposeAll.
+    const safeArea = createSafeAreaController({ connections: ctx.connections });
     // ── Private mutable state ───────────────────────────────────────────────
     let simulatorView = null;
     let simulatorViewAdded = false;
+    // NATIVE-HOST ONLY: the simulator content WebContentsView (the DeviceShell
+    // host). In the default path the simulator is a renderer `<webview>` and this
+    // stays null. Positioned in the simulator panel region (left of the splitter)
+    // while `simulatorView` above hosts its DevTools in the right panel region.
+    let nativeSimulatorView = null;
+    let nativeSimulatorViewAdded = false;
+    // Model A: the renderer's measured inner-screen rect is the SOLE authority for
+    // the native simulator WCV bounds (see docs/simulator-render-architecture.md).
+    // Cache the last rect so a report that lands before attachNativeSimulator (the
+    // project-open ordering) is not lost — attach replays it instead of using a
+    // coarse panel-size fallback (which raced and caused the clip/surround flips).
+    let lastRendererRect = null;
+    // NATIVE-HOST ONLY. The `ipcMain.on` listener that services the
+    // `__diminaCustomApis` bridge for the current native simulator webContents
+    // (see `attachNativeCustomApiBridge`). Tracked so we can remove it before
+    // tearing down / re-attaching the view (otherwise listeners leak across
+    // relaunch cycles).
+    let nativeCustomApiBridgeHandler = null;
+    // NATIVE-HOST ONLY. The current device zoom as a factor (zoomPercent/100),
+    // last reported by the renderer via setNativeSimulatorViewBounds. Stored so
+    // nested render-host `<webview>` guests attached AFTER a zoom change still
+    // pick up the correct scale in `did-attach-webview`. Defaults to 1 (100%).
+    let currentZoomFactor = 1;
     let settingsView = null;
     let settingsViewAdded = false;
     let popoverView = null;
     let lastSimWidth = 375;
     let simulatorWebContentsId = null;
+    // NATIVE-HOST ONLY. The webContents the right-panel Chrome DevTools front-end
+    // currently inspects. We point it at the SERVICE HOST (logic layer) — the
+    // hidden BrowserWindow where the mini-app's page code runs (`console.log`,
+    // `wx.request`, Sources/Network(fetch) all live there). The UI/view layer
+    // (Elements/Styles/WXML tree) is served separately by the native WXML panel +
+    // render-guest highlight chain (`simulator-storage`/`simulator-wxml`), so a
+    // single DevTools front-end is enough. The service window can be swapped on
+    // respawn (pre-warm pool recycles it), so this is re-resolved fresh via
+    // `ctx.bridge.getServiceWc()` and re-pointed on every render-side event.
+    let nativeDevtoolsSourceWc = null;
+    let unsubscribeNativeRenderEvents = null;
+    // Disposer for the Elements-forward feature (routes the front-end's Elements
+    // CDP traffic at the active render guest). Installed in
+    // `attachNativeSimulatorDevtoolsHost`, stopped on detach / host destroyed.
+    let stopElementsForward = null;
+    let nativeDevtoolsRetryTimer = null;
+    let nativeDevtoolsRetryToken = 0;
+    // Renderer-driven overlay bounds for the simulator DevTools view. When
+    // non-null this takes precedence over the legacy layout computed from the
+    // window content size. A zero-area rectangle means "hide" — the overlay is
+    // removed from the contentView but its WebContents stays alive.
+    let simulatorBoundsOverride = null;
+    // ── Host-controllable toolbar WebContentsView ───────────────────────────
+    // A strip above the devtools header that the downstream host loads its own
+    // content into and fully controls. Bounds come from a renderer DOM anchor
+    // (forward anchor, like the simulator DevTools overlay); its height is
+    // dynamic via a reverse size-advertiser the toolbar's own renderer drives.
+    let hostToolbarView = null;
+    let hostToolbarPreloadOverride = null;
+    let hostToolbarViewAdded = false;
     // ── Internal helpers ────────────────────────────────────────────────────
     function destroyViewInternal(view) {
         if (!view)
@@ -43,9 +106,160 @@ export function createViewManager(ctx) {
     function applySimulatorBounds(simWidth) {
         if (!simulatorView || ctx.windows.mainWindow.isDestroyed())
             return;
+        if (simulatorBoundsOverride) {
+            simulatorView.setBounds(simulatorBoundsOverride);
+            return;
+        }
         const [w = 0, h = 0] = ctx.windows.mainWindow.getContentSize();
         simulatorView.setBounds(layout.computeSimulatorBounds(w, h, simWidth, headerHeight));
     }
+    // Renderer publishes width/height = 0 to mean "hide overlay" — the
+    // surrounding React panel is unmounted/collapsed. We keep the cached
+    // value (so future republishes win over legacy layout) but remove the
+    // child view from the contentView until a non-empty rect arrives.
+    function isHidden(b) {
+        return b.width <= 0 || b.height <= 0;
+    }
+    function setSimulatorDevtoolsBounds(bounds) {
+        simulatorBoundsOverride = bounds;
+        if (!simulatorView || simulatorView.webContents.isDestroyed())
+            return;
+        if (ctx.windows.mainWindow.isDestroyed())
+            return;
+        if (isHidden(bounds)) {
+            if (simulatorViewAdded) {
+                try {
+                    ctx.windows.mainWindow.contentView.removeChildView(simulatorView);
+                }
+                catch { /* already removed */ }
+                simulatorViewAdded = false;
+            }
+            return;
+        }
+        if (!simulatorViewAdded) {
+            ctx.windows.mainWindow.contentView.addChildView(simulatorView);
+            simulatorViewAdded = true;
+        }
+        simulatorView.setBounds(bounds);
+    }
+    // ── Host-controllable toolbar WebContentsView ───────────────────────────
+    // Lazily create the host-toolbar view. Mirrors `showSettings` for the
+    // webPreferences shape and the native simulator for nav hardening +
+    // background color (the host may load arbitrary URLs / content). Idempotent.
+    function ensureHostToolbarView() {
+        if (hostToolbarView && !hostToolbarView.webContents.isDestroyed()) {
+            return hostToolbarView;
+        }
+        // Rebuilding after the host destroyed the underlying webContents: detach the
+        // dead view from the contentView and reset the added-flag so the new view
+        // gets re-mounted (otherwise the `hostToolbarViewAdded` guard would skip the
+        // addChildView and the toolbar would silently disappear).
+        if (hostToolbarView && hostToolbarViewAdded) {
+            try {
+                ctx.windows.mainWindow.contentView.removeChildView(hostToolbarView);
+            }
+            catch { /* already removed */ }
+            hostToolbarViewAdded = false;
+        }
+        const view = new WebContentsView({
+            webPreferences: {
+                nodeIntegration: false,
+                contextIsolation: true,
+                sandbox: false,
+                // Default: the reverse size-advertiser preload that measures the host
+                // content's intrinsic height and posts it on the advertise channel so
+                // main reserves exactly that strip height (dynamic height via
+                // ViewAnchor). When the host-shell supplies its own toolbar preload
+                // (workbench config.toolbar.preloadPath), use that instead — the host
+                // owns the bridge and may install the advertiser itself.
+                preload: hostToolbarPreloadOverride ?? hostToolbarPreloadPath,
+            },
+        });
+        hostToolbarView = view;
+        // Paint the surface a neutral color so growing the reserved strip never
+        // flashes white before the host content paints (mirrors the native
+        // simulator's setBackgroundColor anti-flash).
+        try {
+            view.setBackgroundColor('#121212');
+        }
+        catch { /* stub may lack it */ }
+        // The host may load arbitrary URLs; route popups + cross-origin in-place
+        // navigation to the OS browser (mirror the native simulator hardening).
+        try {
+            view.webContents.setWindowOpenHandler(({ url }) => handleWindowOpenExternal(url));
+        }
+        catch { /* stub may lack it */ }
+        return view;
+    }
+    function setHostToolbarBounds(bounds) {
+        if (ctx.windows.mainWindow.isDestroyed())
+            return;
+        // Zero-area rect means "hide" — remove the child view but keep its
+        // WebContents (and the host's loaded content) alive. Do NOT create the
+        // view just to immediately hide it.
+        if (isHidden(bounds)) {
+            if (hostToolbarView && hostToolbarViewAdded && !hostToolbarView.webContents.isDestroyed()) {
+                try {
+                    ctx.windows.mainWindow.contentView.removeChildView(hostToolbarView);
+                }
+                catch { /* already removed */ }
+            }
+            hostToolbarViewAdded = false;
+            return;
+        }
+        const view = ensureHostToolbarView();
+        if (!hostToolbarViewAdded) {
+            // addChildView appends = topmost z-order, which is correct for a strip
+            // that sits above the devtools header.
+            ctx.windows.mainWindow.contentView.addChildView(view);
+            hostToolbarViewAdded = true;
+        }
+        view.setBounds(bounds);
+    }
+    function setHostToolbarHeight(extent) {
+        // Push the reserved height back to the main-window renderer so its
+        // placeholder div resizes (closing the dynamic-height loop). The height is
+        // not retained in main — the renderer placeholder is the single source of
+        // truth, and the forward anchor re-reports bounds from it.
+        ctx.notify.hostToolbarHeightChanged(extent);
+    }
+    function hideHostToolbar() {
+        if (hostToolbarView && hostToolbarViewAdded && !ctx.windows.mainWindow.isDestroyed()) {
+            try {
+                ctx.windows.mainWindow.contentView.removeChildView(hostToolbarView);
+            }
+            catch { /* already removed */ }
+        }
+        hostToolbarViewAdded = false;
+        // Collapse the renderer placeholder to 0 too. Otherwise its anchor keeps a
+        // non-zero reserved height and re-publishes bounds on the next window
+        // resize, silently re-adding the view we just hid (unstable hide). Zeroing
+        // the height flips the anchor to `present:false` so it stops re-publishing.
+        ctx.notify.hostToolbarHeightChanged(0);
+    }
+    const hostToolbar = {
+        async loadURL(url) {
+            const view = ensureHostToolbarView();
+            await view.webContents.loadURL(url);
+        },
+        async loadFile(filePath) {
+            const view = ensureHostToolbarView();
+            await view.webContents.loadFile(filePath);
+        },
+        get webContents() {
+            if (!hostToolbarView)
+                return null;
+            if (hostToolbarView.webContents.isDestroyed())
+                return null;
+            return hostToolbarView.webContents;
+        },
+        hide() {
+            hideHostToolbar();
+        },
+        setPreloadPath(path) {
+            hostToolbarPreloadOverride = path;
+        },
+    };
     function applySettingsBounds() {
         if (!settingsView || ctx.windows.mainWindow.isDestroyed())
             return;
@@ -58,6 +272,242 @@ export function createViewManager(ctx) {
         const [w = 0, h = 0] = ctx.windows.mainWindow.getContentSize();
         popoverView.setBounds(layout.computePopoverBounds(w, h, headerHeight));
     }
+    function clearNativeDevtoolsRetry() {
+        nativeDevtoolsRetryToken++;
+        if (nativeDevtoolsRetryTimer) {
+            clearTimeout(nativeDevtoolsRetryTimer);
+            nativeDevtoolsRetryTimer = null;
+        }
+    }
+    function closeNativeDevtoolsSource() {
+        const source = nativeDevtoolsSourceWc;
+        nativeDevtoolsSourceWc = null;
+        if (!source || source.isDestroyed())
+            return;
+        try {
+            if (source.isDevToolsOpened()) {
+                source.closeDevTools();
+            }
+        }
+        catch { /* source may be mid-destroy */ }
+    }
+    function stopFollowingNativeServiceHost() {
+        clearNativeDevtoolsRetry();
+        if (unsubscribeNativeRenderEvents) {
+            try {
+                unsubscribeNativeRenderEvents();
+            }
+            catch { /* ignore */ }
+            unsubscribeNativeRenderEvents = null;
+        }
+        closeNativeDevtoolsSource();
+    }
+    // ── Open-in-editor: click a console file link → built-in Monaco ──────────
+    // The right-panel console is the embedded Chromium DevTools front-end. Once a
+    // sourcemap maps a console frame back to source (restored by the service-host
+    // importScripts sourcemap rewrite), we redirect a source-link click to OUR
+    // Monaco editor instead of the DevTools Sources panel: install an "open
+    // resource handler" in the front-end realm that encodes (url, line, col) into
+    // a sentinel URL and asks the front-end to open it; Electron surfaces that as
+    // `devtools-open-url` on the inspected (service-host) wc, which we decode,
+    // map to a project-relative path, and broadcast to the renderer's Monaco.
+    const openInEditorWiredWcIds = new Set();
+    function injectOpenResourceHandler(devtoolsWc) {
+        // `setOpenResourceHandler` is the official Chromium DevTools hook IDEs use
+        // to route source-link clicks to an external editor. We poll for the host
+        // (it appears once the front-end finishes bootstrapping, like `UI` above)
+        // and register a handler that re-emits an encoded sentinel via
+        // `openInNewTab` → Electron `devtools-open-url`. Best-effort: wrapped in
+        // try/catch and a bounded poll so a missing API never throws.
+        const scheme = JSON.stringify(OPEN_IN_EDITOR_SCHEME);
+        devtoolsWc.executeJavaScript(`
+      (function() {
+        try {
+          let tries = 0
+          const timer = setInterval(() => {
+            tries++
+            try {
+              const Host = globalThis.Host
+              const host = Host && Host.InspectorFrontendHost
+              if (host && typeof host.setOpenResourceHandler === 'function'
+                       && typeof host.openInNewTab === 'function') {
+                host.setOpenResourceHandler((url, lineNumber, columnNumber) => {
+                  try {
+                    const p = new URLSearchParams()
+                    p.set('u', String(url))
+                    if (typeof lineNumber === 'number') p.set('l', String(lineNumber))
+                    if (typeof columnNumber === 'number') p.set('c', String(columnNumber))
+                    host.openInNewTab(${scheme} + ':?' + p.toString())
+                  } catch (_) {}
+                })
+                clearInterval(timer)
+                return
+              }
+            } catch (_) {}
+            if (tries > 80) clearInterval(timer)
+          }, 50)
+        } catch (_) {}
+      })()
+    `).catch(() => { });
+    }
+    // ── DevTools tab customization: keep only Elements/Console/Network ──────────
+    // Inject into the same DevTools front-end host wc that the console/network
+    // injectors target. Reorders Elements/Console/Network to the front and closes
+    // every other panel tab by driving the front-end's UI.ViewManager /
+    // InspectorView.tabbedLocation (see ./devtools-tabs.ts). Best-effort: the
+    // injected script bounded-polls for the lazily-registered panels, wraps
+    // everything in try/catch, and silently no-ops if the API never appears —
+    // DevTools default tab behaviour is preserved on any failure. Re-injected on
+    // every (re)point so a re-`openDevTools` (service-host pool swap) re-applies.
+    function customizeDevtoolsTabs(devtoolsWc) {
+        try {
+            if (devtoolsWc.isDestroyed())
+                return;
+            const inject = () => {
+                if (devtoolsWc.isDestroyed())
+                    return;
+                try {
+                    void devtoolsWc.executeJavaScript(buildCustomizeTabsScript()).catch(() => { });
+                }
+                catch { /* wc torn down mid-call */ }
+            };
+            if (devtoolsWc.isLoading()) {
+                devtoolsWc.once('dom-ready', inject);
+            }
+            else {
+                inject();
+            }
+        }
+        catch { /* wc surface incomplete / torn down; degrade silently */ }
+    }
+    function wireOpenInEditor(serviceWc, devtoolsWc) {
+        // Inject the front-end handler on every (re)attach — the DevTools front-end
+        // wc is recreated per simulatorView, so a fresh host needs the handler set.
+        if (!devtoolsWc.isDestroyed()) {
+            if (devtoolsWc.isLoading()) {
+                devtoolsWc.once('dom-ready', () => injectOpenResourceHandler(devtoolsWc));
+            }
+            else {
+                injectOpenResourceHandler(devtoolsWc);
+            }
+        }
+        // Attach the `devtools-open-url` decoder to the inspected service wc once
+        // (the listener is keyed off the encoded sentinel scheme, so it only acts on
+        // OUR redirected links; any other devtools "open in new tab" falls through).
+        if (openInEditorWiredWcIds.has(serviceWc.id))
+            return;
+        openInEditorWiredWcIds.add(serviceWc.id);
+        const onOpenUrl = (_event, url) => {
+            const req = decodeOpenInEditorUrl(url);
+            if (!req)
+                return; // not our sentinel — leave it to Electron's default path
+            const rel = resourceUrlToProjectRelativePath(req.url);
+            if (!rel)
+                return;
+            // DevTools reports 0-based line/column; Monaco is 1-based.
+            const line = typeof req.line === 'number' ? req.line + 1 : undefined;
+            const column = typeof req.column === 'number' ? req.column + 1 : undefined;
+            ctx.notify.editorOpenFile({ path: rel, line, column });
+        };
+        serviceWc.on('devtools-open-url', onOpenUrl);
+        // Consolidate teardown onto the connection layer (foundation.md §4 / P2),
+        // but as a wc-LIFETIME resource: the open-in-editor wiring inspects this
+        // service-host wc and must SURVIVE pool reuse (`reset`) — the dedup set
+        // entry + listener stay valid across sessions reusing the same wc, and the
+        // early-return dedup above correctly skips re-wiring after a reset. So we
+        // register on `'closed'` (fires only on real wc destroy), NOT `own()`
+        // (which also fires on `reset` and would leave the wc un-wired after reuse
+        // because re-pointing the same wc.id early-returns). acquire() is
+        // idempotent — bridge-router owning session-scoped resources on the same
+        // serviceWc connection coexists cleanly.
+        const conn = ctx.connections.acquire(serviceWc);
+        conn.on('closed', () => {
+            openInEditorWiredWcIds.delete(serviceWc.id);
+            try {
+                serviceWc.removeListener('devtools-open-url', onOpenUrl);
+            }
+            catch { /* wc gone */ }
+        });
+    }
+    // Point the right-panel Chrome DevTools front-end at `next` — the SERVICE HOST
+    // webContents (logic layer). Idempotent: if we already inspect this wc, no-op.
+    function pointNativeDevtoolsAtServiceWc(next) {
+        if (!simulatorView || simulatorView.webContents.isDestroyed())
+            return true;
+        if (nativeDevtoolsSourceWc?.id === next.id && !nativeDevtoolsSourceWc.isDestroyed()) {
+            return true;
+        }
+        closeNativeDevtoolsSource();
+        nativeDevtoolsSourceWc = next;
+        try {
+            next.setDevToolsWebContents(simulatorView.webContents);
+            // DevTools renders into the right-panel host view (simulatorView); with a
+            // custom host the `mode` is overridden, and `activate:false` prevents it
+            // stealing focus — this re-points whenever the service window is swapped,
+            // so a focusing window would yank focus repeatedly (disrupting the user /
+            // e2e).
+            next.openDevTools({ mode: 'detach', activate: false });
+            // Redirect console source-link clicks to the built-in Monaco editor.
+            wireOpenInEditor(next, simulatorView.webContents);
+            // Keep only Elements/Console/Network tabs (front-most, in that order).
+            // Re-applied on every re-point so a service-host pool swap (fresh
+            // openDevTools) re-asserts the custom tab bar.
+            customizeDevtoolsTabs(simulatorView.webContents);
+            return true;
+        }
+        catch {
+            if (nativeDevtoolsSourceWc?.id === next.id) {
+                nativeDevtoolsSourceWc = null;
+            }
+            return false;
+        }
+    }
+    // Resolve the SERVICE HOST webContents for the active (or named) app. This is
+    // the hidden service BrowserWindow's wc — a top-level wc that CAN host a
+    // Chrome DevTools front-end (unlike a `<webview>` guest's). Re-resolved fresh
+    // so a pre-warm-pool swap on respawn is tolerated.
+    function pointNativeDevtoolsAtActiveServiceHost(appId) {
+        if (!ctx.bridge?.isNativeHost())
+            return true;
+        if (!simulatorView || simulatorView.webContents.isDestroyed())
+            return true;
+        const wc = ctx.bridge.getServiceWc(appId);
+        if (!wc || wc.isDestroyed())
+            return false;
+        return pointNativeDevtoolsAtServiceWc(wc);
+    }
+    function scheduleNativeDevtoolsFollow(appId, attempt = 0) {
+        if (attempt >= 20)
+            return;
+        if (!ctx.bridge?.isNativeHost())
+            return;
+        const token = nativeDevtoolsRetryToken;
+        if (nativeDevtoolsRetryTimer)
+            clearTimeout(nativeDevtoolsRetryTimer);
+        nativeDevtoolsRetryTimer = setTimeout(() => {
+            nativeDevtoolsRetryTimer = null;
+            if (token !== nativeDevtoolsRetryToken)
+                return;
+            if (pointNativeDevtoolsAtActiveServiceHost(appId))
+                return;
+            scheduleNativeDevtoolsFollow(appId, attempt + 1);
+        }, 50);
+    }
+    function followNativeDevtoolsServiceHost(appId) {
+        clearNativeDevtoolsRetry();
+        if (pointNativeDevtoolsAtActiveServiceHost(appId))
+            return;
+        scheduleNativeDevtoolsFollow(appId);
+    }
+    // Render-side activity (a page DOM mounting / the visible page changing)
+    // always follows a spawn or respawn, by which point the service window exists
+    // (and may have been swapped by the pool). Re-resolve + re-point the DevTools
+    // at the now-current service host on every such event.
+    function onNativeRenderEvent(event) {
+        if (event.kind !== 'activePage' && event.kind !== 'domReady')
+            return;
+        followNativeDevtoolsServiceHost(event.appId);
+    }
     // ── ViewManager methods ─────────────────────────────────────────────────
     function attachSimulator(simWcId, simWidth) {
         const sim = webContents.fromId(simWcId);
@@ -80,12 +530,20 @@ export function createViewManager(ctx) {
         }
         simulatorView = new WebContentsView();
         sim.setDevToolsWebContents(simulatorView.webContents);
-        sim.openDevTools();
+        // Embedded in the right-panel host view; never bring it to the foreground
+        // (would steal focus from the user / disrupt e2e).
+        sim.openDevTools({ mode: 'detach', activate: false });
         // Default DevTools to Console panel (Chrome DevTools defaults to Elements).
-        // The DevTools UI renders inside simulatorView.webContents; we click the
-        // Console tab once its header is laid out, and persist the choice via
-        // localStorage so subsequent reloads honor it.
+        // The DevTools UI lives inside closed shadow roots, so a light-DOM
+        // querySelector('[role="tab"]') cannot reach the tab bar to click it.
+        // Instead drive the front-end's own view manager: the bundled DevTools
+        // exposes `UI.ViewManager.instance().showView(id)` on `globalThis.UI`
+        // once the front-end has finished bootstrapping. We poll for it and
+        // request the `console` view, and also persist the choice via the
+        // `panel-selectedTab` localStorage key so subsequent reloads honor it.
         const devtoolsWc = simulatorView.webContents;
+        // Keep only Elements/Console/Network tabs (front-most, in that order).
+        customizeDevtoolsTabs(devtoolsWc);
         devtoolsWc.once('dom-ready', () => {
             devtoolsWc.executeJavaScript(`
         (function() {
@@ -93,27 +551,380 @@ export function createViewManager(ctx) {
           let tries = 0
           const timer = setInterval(() => {
             tries++
-            const tabs = document.querySelectorAll('[role="tab"], .tabbed-pane-header-tab')
-            for (const tab of tabs) {
-              const label = (tab.getAttribute('aria-label') || tab.textContent || '').trim().toLowerCase()
-              if (label === 'console' || label.startsWith('console')) {
-                tab.click()
+            try {
+              const UI = globalThis.UI
+              const vm = UI && UI.ViewManager && typeof UI.ViewManager.instance === 'function'
+                ? UI.ViewManager.instance()
+                : null
+              if (vm && typeof vm.showView === 'function') {
+                vm.showView('console')
                 clearInterval(timer)
                 return
               }
+            } catch {}
+            if (tries > 80) clearInterval(timer)
+          }, 50)
+        })()
+      `).catch(() => { });
+        });
+        if (getDefaultTab(ctx) === 'simulator') {
+            if (simulatorBoundsOverride) {
+                if (!isHidden(simulatorBoundsOverride)) {
+                    ctx.windows.mainWindow.contentView.addChildView(simulatorView);
+                    simulatorViewAdded = true;
+                    simulatorView.setBounds(simulatorBoundsOverride);
+                }
+            }
+            else {
+                ctx.windows.mainWindow.contentView.addChildView(simulatorView);
+                simulatorViewAdded = true;
+                applySimulatorBounds(simWidth);
+            }
+        }
+    }
+    function attachNativeSimulatorDevtoolsHost(simWidth) {
+        stopFollowingNativeServiceHost();
+        // Destroy old simulatorView to prevent WebContentsView leak
+        if (simulatorView) {
+            hideSimulator();
+            try {
+                if (!simulatorView.webContents.isDestroyed()) {
+                    simulatorView.webContents.close();
+                }
             }
-            if (tries > 40) clearInterval(timer)
-          }, 100)
+            catch { /* ignore */ }
+            simulatorView = null;
+        }
+        simulatorView = new WebContentsView();
+        // Default DevTools to Console panel (Chrome DevTools defaults to Elements).
+        // The DevTools UI lives inside closed shadow roots, so a light-DOM
+        // querySelector('[role="tab"]') cannot reach the tab bar to click it.
+        // Instead drive the front-end's own view manager: the bundled DevTools
+        // exposes `UI.ViewManager.instance().showView(id)` on `globalThis.UI`
+        // once the front-end has finished bootstrapping. We poll for it and
+        // request the `console` view, and also persist the choice via the
+        // `panel-selectedTab` localStorage key so subsequent reloads honor it.
+        const devtoolsWc = simulatorView.webContents;
+        // Hand the network forwarder THIS front-end host wc — it injects the
+        // simulator WCV's Network.* CDP events into `window.DevToolsAPI.dispatchMessage`
+        // here so the native Network tab renders them (falls back to the service-host
+        // console line when null / the API never appears). Cleared on detach.
+        ctx.networkForward?.setDevtoolsHost(devtoolsWc);
+        // Elements forwarding (production, always on for the native simulator): route
+        // the front-end's Elements-panel CDP traffic (DOM/CSS/Overlay/DOMSnapshot/
+        // DOMDebugger) onto the ACTIVE RENDER GUEST so the panel reflects the page's
+        // live DOM tree instead of the service host it natively inspects. Reuses the
+        // safe-area-attached debugger session (never detaches one it doesn't own);
+        // Emulation.* and every other domain stay on the service-host path. Degrades
+        // to the native service-host DOM if the front-end hook is unavailable. The
+        // disposer is stopped on detach / host destroyed.
+        if (ctx.bridge) {
+            try {
+                stopElementsForward?.();
+            }
+            catch { /* prior disposer already gone */ }
+            stopElementsForward = installElementsForward({ devtoolsWc, bridge: ctx.bridge, connections: ctx.connections });
+            devtoolsWc.once('destroyed', () => {
+                try {
+                    stopElementsForward?.();
+                }
+                catch { /* already stopped */ }
+                stopElementsForward = null;
+            });
+        }
+        devtoolsWc.once('dom-ready', () => {
+            devtoolsWc.executeJavaScript(`
+        (function() {
+          try { localStorage.setItem('panel-selectedTab', '"console"') } catch {}
+          let tries = 0
+          const timer = setInterval(() => {
+            tries++
+            try {
+              const UI = globalThis.UI
+              const vm = UI && UI.ViewManager && typeof UI.ViewManager.instance === 'function'
+                ? UI.ViewManager.instance()
+                : null
+              if (vm && typeof vm.showView === 'function') {
+                vm.showView('console')
+                clearInterval(timer)
+                return
+              }
+            } catch {}
+            if (tries > 80) clearInterval(timer)
+          }, 50)
         })()
       `).catch(() => { });
         });
         if (getDefaultTab(ctx) === 'simulator') {
-            ctx.windows.mainWindow.contentView.addChildView(simulatorView);
-            simulatorViewAdded = true;
-            applySimulatorBounds(simWidth);
+            if (simulatorBoundsOverride) {
+                if (!isHidden(simulatorBoundsOverride)) {
+                    ctx.windows.mainWindow.contentView.addChildView(simulatorView);
+                    simulatorViewAdded = true;
+                    simulatorView.setBounds(simulatorBoundsOverride);
+                }
+            }
+            else {
+                ctx.windows.mainWindow.contentView.addChildView(simulatorView);
+                simulatorViewAdded = true;
+                applySimulatorBounds(simWidth);
+            }
+        }
+        if (ctx.bridge?.isNativeHost()) {
+            unsubscribeNativeRenderEvents = ctx.bridge.onRenderEvent(onNativeRenderEvent);
+            followNativeDevtoolsServiceHost();
+        }
+    }
+    /**
+     * Remove the custom-apis bridge `ipcMain.on` listener, if any. Idempotent.
+     */
+    function detachNativeCustomApiBridge() {
+        if (nativeCustomApiBridgeHandler) {
+            ipcMain.removeListener(SimulatorCustomApiBridgeChannel.Request, nativeCustomApiBridgeHandler);
+            nativeCustomApiBridgeHandler = null;
+        }
+    }
+    /**
+     * NATIVE-HOST ONLY. The native simulator is a top-level WebContentsView with
+     * NO embedder renderer, so the simulator-side `__diminaCustomApis` bridge
+     * (`src/preload/runtime/custom-apis.ts`) cannot reach the host via
+     * `ipcRenderer.sendToHost` — that only delivers to a `<webview>`'s embedder,
+     * which is how the default path's `useCustomApiProxy` answered it. A
+     * top-level WebContentsView has no embedder, and `sendToHost` does NOT loop
+     * back as `ipc-message-host` on itself, so that channel never fires here.
+     *
+     * Under native-host the bridge instead talks to `ipcMain` directly (the same
+     * way `installNativeHostBridge` issues SPAWN/PAGE_OPEN): the preload sends
+     * `SimulatorCustomApiBridgeChannel.Request` via `ipcRenderer.send`, this
+     * `ipcMain.on` listener answers it. We do NOT route through `IpcRegistry` /
+     * the sender-policy white-list (the simulator is deliberately kept off it);
+     * instead we accept the message ONLY when `event.sender` is THIS precise
+     * simWc — the same trust model bridge-router uses for the simulator's own
+     * SPAWN messages. The result is dispatched through the shared
+     * `ctx.simulatorApis` registry and the id-correlated `Response` is posted
+     * back via `simWc.send`, which the preload's `ipcRenderer.on(Response)`
+     * listener settles.
+     */
+    function attachNativeCustomApiBridge(simWc) {
+        // Re-attach defensively: a stale listener from a prior simWc must never
+        // linger. (attachNativeSimulator already tears the old view down first.)
+        detachNativeCustomApiBridge();
+        const apis = ctx.simulatorApis;
+        if (!apis)
+            return;
+        const simWcId = simWc.id;
+        const handler = (event, req) => {
+            // Trust gate: only the exact native simulator webContents may drive this.
+            if (event.sender.id !== simWcId)
+                return;
+            const r = req;
+            if (!r || typeof r.id !== 'number')
+                return;
+            void handleCustomApiBridgeRequest(apis, r).then((response) => {
+                if (simWc.isDestroyed())
+                    return;
+                simWc.send(SimulatorCustomApiBridgeChannel.Response, response);
+            }).catch(() => { });
+        };
+        nativeCustomApiBridgeHandler = handler;
+        ipcMain.on(SimulatorCustomApiBridgeChannel.Request, handler);
+        // Consolidate this per-webContents teardown onto the connection layer
+        // (foundation.md §4 / P1 DoD #3): acquiring the simWc connection makes the
+        // registry track this trusted webContents, and `own()`-ing the detach ties
+        // the ipcMain listener's lifetime to the connection so it's torn down
+        // deterministically when the wc is destroyed (or the connection is reset),
+        // instead of a bespoke `once('destroyed')`. The detach stays idempotent, so
+        // the defensive re-attach path calling it directly remains safe.
+        ctx.connections.acquire(simWc).own(detachNativeCustomApiBridge);
+    }
+    function attachNativeSimulator(simulatorUrl, simWidth) {
+        if (!ctx.preloadPath) {
+            console.error('[workbench] attachNativeSimulator — preloadPath unset; cannot mount native simulator');
+            return;
+        }
+        lastSimWidth = simWidth;
+        // Tear down any previous native simulator view (relaunch / re-open).
+        if (nativeSimulatorView) {
+            detachNativeCustomApiBridge();
+            if (nativeSimulatorViewAdded) {
+                try {
+                    ctx.windows.mainWindow.contentView.removeChildView(nativeSimulatorView);
+                }
+                catch { /* already removed */ }
+                nativeSimulatorViewAdded = false;
+            }
+            try {
+                if (!nativeSimulatorView.webContents.isDestroyed()) {
+                    nativeSimulatorView.webContents.close();
+                }
+            }
+            catch { /* ignore */ }
+            nativeSimulatorView = null;
         }
+        // The simulator preload is a CJS bundle; webPreferences.preload obeys the
+        // `.js` + "type":"module" ESM rule (require would be undefined), so hand the
+        // top-level WebContentsView the `.cjs` sibling. contextIsolation:false +
+        // sandbox:false + webviewTag:true mirror what the default `<webview>` guest
+        // runs with, and `partition:'persist:simulator'` shares storage + the
+        // session-registered preload/CORS rules with the rest of the simulator.
+        const view = new WebContentsView({
+            webPreferences: {
+                nodeIntegration: false,
+                contextIsolation: false,
+                sandbox: false,
+                webviewTag: true,
+                preload: cjsSiblingPreloadPath(ctx.preloadPath),
+                partition: 'persist:simulator',
+            },
+        });
+        nativeSimulatorView = view;
+        // Paint the WCV surface the simulator-panel background (≈ --color-sim-bg
+        // hsl(0 0% 7%)) so a height-resize that grows the region never flashes white
+        // in the newly-exposed strip before DeviceShell's desk repaints — the WCV,
+        // the desk, and the renderer placeholder behind it are all the same color.
+        view.setBackgroundColor('#121212');
+        const simWc = view.webContents;
+        // Service the simulator-side `__diminaCustomApis` bridge: this top-level
+        // WebContentsView has no embedder renderer to proxy through, so dispatch its
+        // `sendToHost` requests straight to `ctx.simulatorApis` from main.
+        attachNativeCustomApiBridge(simWc);
+        // DeviceShell mounts per-page render-host `<webview>`s INSIDE this view.
+        // Mirror windows/main-window/create.ts: pin them onto persist:simulator and
+        // run them with contextIsolation/sandbox off so the render runtime + its
+        // preload share the page realm. (A top-level WebContentsView can host these
+        // guests; a `<webview>` guest cannot — that's the whole point of Option A.)
+        simWc.on('will-attach-webview', (_event, webPreferences, params) => {
+            ;
+            webPreferences.partition = 'persist:simulator';
+            params.partition = 'persist:simulator';
+            webPreferences.contextIsolation = false;
+            webPreferences.sandbox = false;
+        });
+        simWc.on('did-attach-webview', (_event, guestWc) => {
+            // Scale the nested render-host page with the device zoom. The host WCV is
+            // sized to the SCALED bezel rect and runs at `currentZoomFactor`, so the
+            // guest must run at the same factor to lay the page out at the logical
+            // device width and paint at the right scale. At 100% (default) this is a
+            // no-op identity (factor 1). Newly-attached guests pick up the latest
+            // zoom here; live zoom changes re-apply via setNativeSimulatorViewBounds.
+            try {
+                guestWc.setZoomFactor(currentZoomFactor);
+            }
+            catch { /* guest not ready; setNativeSimulatorViewBounds re-applies */ }
+            // Simulate this device's CSS env(safe-area-inset-*) on the fresh guest
+            // before it paints, so notch-aware page layout resolves correctly.
+            safeArea.applyToGuest(guestWc, ctx.bridge?.getDevice() ?? null);
+            guestWc.setWindowOpenHandler(({ url }) => handleWindowOpenExternal(url));
+            guestWc.on('will-navigate', (e, url) => {
+                try {
+                    const u = new URL(url);
+                    if (u.protocol === 'about:')
+                        return;
+                    if ((u.protocol === 'http:' || u.protocol === 'https:')
+                        && (u.hostname === 'localhost' || u.hostname === '127.0.0.1')) {
+                        return;
+                    }
+                    if (u.protocol === 'file:')
+                        return;
+                    e.preventDefault();
+                    if (u.protocol === 'http:' || u.protocol === 'https:') {
+                        void shell.openExternal(url);
+                    }
+                }
+                catch {
+                    e.preventDefault();
+                }
+            });
+            // A render-host guest only attaches after a spawn, so the service window
+            // exists by now — (re)point the right-panel DevTools at it. Belt-and-braces
+            // with the `onRenderEvent` path in case its emit lost the attach race.
+            followNativeDevtoolsServiceHost();
+        });
+        // The simulator loads http://localhost:<port>/simulator.html. Harden popups
+        // + in-place navigation: allow the dev server origin (and about:blank /
+        // file:// render hosts), route everything else to the OS browser.
+        simWc.setWindowOpenHandler(({ url }) => handleWindowOpenExternal(url));
+        simWc.on('will-navigate', (e, url) => {
+            try {
+                const u = new URL(url);
+                if (u.protocol === 'about:')
+                    return;
+                if (u.protocol === 'file:')
+                    return;
+                if ((u.protocol === 'http:' || u.protocol === 'https:')
+                    && (u.hostname === 'localhost' || u.hostname === '127.0.0.1')) {
+                    return;
+                }
+                e.preventDefault();
+                if (u.protocol === 'http:' || u.protocol === 'https:') {
+                    void shell.openExternal(url);
+                }
+            }
+            catch {
+                e.preventDefault();
+            }
+        });
+        void simWc.loadURL(simulatorUrl).catch((err) => {
+            console.error('[workbench] attachNativeSimulator — loadURL failed', err);
+        });
+        // This WebContentsView's webContents IS the simulator: the native-host
+        // preload runs here and issues SPAWN, so bridge-router resolves
+        // ap.simulatorWc = event.sender = this wc, and SIMULATOR_EVENTS flow back.
+        simulatorWebContentsId = simWc.id;
+        // Forward this WCV's network requests (wx.request/download/upload run here,
+        // not in the service host) into the service-host console so they show in the
+        // embedded DevTools the right panel hosts. Attaches the CDP debugger; no-op
+        // if the forwarder is unwired (partial test ctx) or the debugger is claimed.
+        ctx.networkForward?.attachSimulator(simWc);
+        // Model A: bounds come ONLY from the renderer's measured inner-screen rect.
+        // If a report already landed before this attach (project-open ordering),
+        // replay it now — setNativeSimulatorViewBounds adds + sizes the view. Else
+        // the view stays unadded until the next reportBounds. No coarse fallback.
+        if (lastRendererRect) {
+            setNativeSimulatorViewBounds(lastRendererRect);
+        }
+        // Native-host page code (console.log / wx.request / Sources) runs in the
+        // hidden SERVICE HOST window, not this DeviceShell host nor the render-host
+        // guests. Keep the right-panel DevTools host view stable and point it at the
+        // service host so its Console/Network(fetch)/Sources reflect the logic layer.
+        // (The UI/view layer's Elements equivalent is the native WXML panel +
+        // render-guest highlight chain, which targets the active render guest.)
+        attachNativeSimulatorDevtoolsHost(simWidth);
     }
     function detachSimulator() {
+        stopFollowingNativeServiceHost();
+        detachNativeCustomApiBridge();
+        // Stop Elements forwarding (detaches only the debugger sessions IT attached;
+        // safe-area's sessions are untouched). Idempotent — the host 'destroyed'
+        // handler may have already run.
+        try {
+            stopElementsForward?.();
+        }
+        catch { /* already stopped */ }
+        stopElementsForward = null;
+        // Stop forwarding the simulator WCV's network (its debugger is detached as
+        // the view is closed below, but drop our session deterministically first).
+        // Also drop the DevTools front-end host — its wc is destroyed below; a stale
+        // ref would make the forwarder dispatch into a dead wc instead of falling
+        // back to the console.
+        ctx.networkForward?.detachSimulator();
+        ctx.networkForward?.setDevtoolsHost(null);
+        // Native-host simulator content view (no-op in the default path).
+        if (nativeSimulatorView) {
+            if (nativeSimulatorViewAdded && !ctx.windows.mainWindow.isDestroyed()) {
+                try {
+                    ctx.windows.mainWindow.contentView.removeChildView(nativeSimulatorView);
+                }
+                catch { /* already removed */ }
+            }
+            try {
+                if (!nativeSimulatorView.webContents.isDestroyed()) {
+                    nativeSimulatorView.webContents.close();
+                }
+            }
+            catch { /* ignore */ }
+            nativeSimulatorView = null;
+            nativeSimulatorViewAdded = false;
+        }
         hidePopover();
         // Drop the settings view too — the previous detachAllViews() did.
         destroyViewInternal(settingsView);
@@ -123,6 +934,13 @@ export function createViewManager(ctx) {
         simulatorView = null;
         simulatorViewAdded = false;
         simulatorWebContentsId = null;
+        // Drop the renderer-published rect so a stale "hidden" override doesn't
+        // suppress the next view before its renderer republishes.
+        simulatorBoundsOverride = null;
+        // Also drop the cached native-simulator rect: attachNativeSimulator replays
+        // lastRendererRect on attach, so a leftover rect/offset from a torn-down
+        // session must not be replayed onto a fresh re-attach (stale slice/offset).
+        lastRendererRect = null;
     }
     function showSimulator(simWidth) {
         lastSimWidth = simWidth;
@@ -204,6 +1022,8 @@ export function createViewManager(ctx) {
         }
     }
     function repositionAll() {
+        // Native simulator: bounds owned by the renderer's reportBounds (Model A);
+        // its window-resize listener re-measures, so no coarse re-apply here.
         if (simulatorView && simulatorViewAdded)
             applySimulatorBounds(lastSimWidth);
         if (settingsView && settingsViewAdded)
@@ -213,9 +1033,67 @@ export function createViewManager(ctx) {
     }
     function disposeAll() {
         detachSimulator();
+        // Host-controllable toolbar view: removed from the contentView + its
+        // WebContents closed (the host's loaded content is torn down on app exit).
+        destroyViewInternal(hostToolbarView);
+        hostToolbarView = null;
+        hostToolbarViewAdded = false;
+        safeArea.dispose();
+    }
+    function setNativeSimulatorViewBounds(params) {
+        // Cache unconditionally so attachNativeSimulator can replay a report that
+        // landed before the view existed (project-open ordering). This rect is the
+        // ONLY authority for the native WCV bounds.
+        lastRendererRect = params;
+        if (ctx.windows.mainWindow.isDestroyed() || !nativeSimulatorView)
+            return;
+        const p = layout.computeNativeSimulatorViewParams(params, params.zoom);
+        currentZoomFactor = p.zoomFactor;
+        // A zero-area rect means "hide" — the renderer reports this when the
+        // simulator panel/cell is toggled off or unmounts (toolbar toggle only
+        // mutates renderer layout state, so without this the WCV would stay
+        // painted over its old region). Mirror `setSimulatorDevtoolsBounds`:
+        // remove the child view from the contentView but keep its WebContents
+        // alive, so re-showing doesn't re-pay the simulator bootstrap.
+        if (isHidden(p.bounds)) {
+            if (nativeSimulatorViewAdded) {
+                try {
+                    ctx.windows.mainWindow.contentView.removeChildView(nativeSimulatorView);
+                }
+                catch { /* already removed */ }
+                nativeSimulatorViewAdded = false;
+            }
+            return;
+        }
+        if (!nativeSimulatorViewAdded) {
+            ctx.windows.mainWindow.contentView.addChildView(nativeSimulatorView);
+            nativeSimulatorViewAdded = true;
+        }
+        nativeSimulatorView.setBounds(p.bounds);
+        const simWc = nativeSimulatorView.webContents;
+        if (!simWc.isDestroyed()) {
+            simWc.setZoomFactor(p.zoomFactor);
+        }
+        // Propagate zoom to any already-attached nested render-host guests so the
+        // page rescales live on zoom change (newly-attached guests get it in
+        // did-attach-webview). `webContents.getAllWebContents()` includes guests;
+        // filter to those hosted by this simulator wc.
+        try {
+            for (const wc of webContents.getAllWebContents()) {
+                if (wc.isDestroyed())
+                    continue;
+                if (wc.hostWebContents === simWc) {
+                    wc.setZoomFactor(p.zoomFactor);
+                }
+            }
+        }
+        catch { /* hostWebContents unavailable; guests get zoom on attach */ }
     }
     function resize(simWidth) {
         lastSimWidth = simWidth;
+        // Native simulator bounds are owned solely by the renderer's reportBounds
+        // (Model A) — its ResizeObserver/window-resize listeners re-measure on this
+        // same resize. No coarse panel-size re-apply here (it raced the precise rect).
         if (simulatorViewAdded)
             applySimulatorBounds(simWidth);
         if (settingsViewAdded)
@@ -234,7 +1112,9 @@ export function createViewManager(ctx) {
     }
     return {
         attachSimulator,
+        attachNativeSimulator,
         detachSimulator,
+        reapplySafeArea: (device) => safeArea.reapplyAll(device),
         showSimulator,
         hideSimulator,
         showSettings,
@@ -274,8 +1154,20 @@ export function createViewManager(ctx) {
                 return null;
             return popoverView.webContents.id;
         },
+        getHostToolbarWebContentsId: () => {
+            if (!hostToolbarView)
+                return null;
+            if (hostToolbarView.webContents.isDestroyed())
+                return null;
+            return hostToolbarView.webContents.id;
+        },
+        setNativeSimulatorViewBounds,
         resize,
         setVisible,
+        setSimulatorDevtoolsBounds,
+        setHostToolbarBounds,
+        setHostToolbarHeight,
+        hostToolbar,
     };
 }
 //# sourceMappingURL=view-manager.js.map