@dimina-kit/devtools 0.4.0-dev.20260717120050 → 0.4.0-dev.20260718085557

package/dist/main/services/render-inspect/index.d.ts

@@ -17,6 +17,7 @@ import type { WebContents } from 'electron';
 import type { ConnectionRegistry } from '@dimina-kit/electron-deck/main';
 import type { ElementInspection } from '../../../shared/ipc-channels.js';
 import type { WxmlNode } from '@dimina-kit/inspect';
+import { type CdpSessionBroker } from '../cdp-session/index.js';
 export interface RenderInspector {
     /** Inject (once per wc) the inspector IIFE, then read the WXML tree. */
     getWxml(wc: WebContents): Promise<WxmlNode | null>;
@@ -45,6 +46,15 @@ export interface RenderInspectorOptions {
      * back to the direct `once('destroyed')`).
      */
     connections?: ConnectionRegistry;
+    /**
+     * Shared CDP session broker (see cdp-session/index.ts) that owns every
+     * render-guest debugger session's attach/detach lifecycle — safe-area,
+     * elements-forward and network-forward acquire leases from the same
+     * instance. Absent → a private broker is created (never explicitly torn
+     * down here, matching this module's existing lack of a `dispose()`; the
+     * shared instance IS disposed at the app-context level).
+     */
+    broker?: CdpSessionBroker;
 }
 export declare function createRenderInspector(options?: RenderInspectorOptions): RenderInspector;
 //# sourceMappingURL=index.d.ts.map

package/dist/main/services/render-inspect/index.js

@@ -1,6 +1,7 @@
 import { readFileSync } from 'node:fs';
 import path from 'node:path';
 import { devtoolsPackageRoot } from '../../utils/paths.js';
+import { createCdpSessionBroker } from '../cdp-session/index.js';
 const DEFAULT_SOURCE_PATH = 'dist/render-host/render-inspect.js';
 /**
  * Chrome DevTools' default Elements-panel highlight palette (content / padding /
@@ -36,13 +37,9 @@ export function createRenderInspector(options = {}) {
         (() => readFileSync(path.join(devtoolsPackageRoot, DEFAULT_SOURCE_PATH), 'utf8'));
     let cachedSource = null;
     const injected = new Set();
-    // Debugger sessions THIS service attached itself (nobody else owned one). Only
-    // these are detached on guest-destroy; sessions safe-area / Elements-forward
-    // own are never touched (single-owner per wc).
-    const selfAttached = new Set();
-    // Per-wc `DOM.enable → Overlay.enable` handshake, started once and reused so a
-    // burst of hovers shares one enable. Cleared when the guest is destroyed.
-    const enablePromises = new Map();
+    // Shared CDP session broker — owns attach/detach/enable-domain bookkeeping
+    // (see cdp-session/index.ts); this module no longer tracks any of that itself.
+    const broker = options.broker ?? createCdpSessionBroker({ connections: options.connections });
     function source() {
         if (cachedSource === null)
             cachedSource = loadSource();
@@ -75,7 +72,6 @@ export function createRenderInspector(options = {}) {
         // bespoke `once('destroyed')` only when omitted (focused unit tests).
         const forget = () => {
             injected.delete(wc.id);
-            enablePromises.delete(wc.id);
         };
         if (options.connections) {
             options.connections.acquire(wc).own(forget);
@@ -122,16 +118,17 @@ export function createRenderInspector(options = {}) {
     /**
      * Paint the Chrome-style native highlight over the guest via CDP — the same
      * `Overlay.highlightNode` the embedded Elements panel uses, so the WXML panel's
-     * hover box matches it exactly. Reuses the guest's existing debugger session
-     * (single-owner per wc; safe-area / Elements-forward has usually already
-     * attached it) and only attaches itself when nobody has.
+     * hover box matches it exactly. Acquires a lease from the shared broker (see
+     * cdp-session/index.ts), which reuses the guest's existing debugger session
+     * (safe-area / elements-forward has usually already attached it) and only
+     * attaches itself when nobody has.
      *
      * `Overlay.highlightNode` paints only while the Overlay domain is enabled, and
      * Chromium rejects `Overlay.enable` with "DOM should be enabled first" unless
      * DOM is enabled first. On a cold/self-attached session (WXML hovered without
      * the Elements panel ever enabling Overlay) the highlight would silently no-op
-     * if the command raced ahead of the enable, so we AWAIT the `DOM.enable →
-     * Overlay.enable` handshake before highlighting — but only up to
+     * if the command raced ahead of the enable, so we AWAIT the broker's
+     * `ensureRenderDomains()` handshake before highlighting — but only up to
      * `ENABLE_HANDSHAKE_TIMEOUT_MS`, so a hung `DOM.enable` degrades to a missed
      * paint rather than a stuck hover.
      *
@@ -142,14 +139,15 @@ export function createRenderInspector(options = {}) {
     async function drawNativeHighlight(wc, sid) {
         if (wc.isDestroyed())
             return;
-        if (!ensureGuestDebugger(wc))
+        const lease = broker.acquire(wc);
+        if (!lease)
             return;
-        await withTimeout(ensureDomainsEnabled(wc), ENABLE_HANDSHAKE_TIMEOUT_MS);
+        await withTimeout(lease.ensureRenderDomains(), ENABLE_HANDSHAKE_TIMEOUT_MS);
         if (wc.isDestroyed())
             return;
         const expression = `window.__diminaRenderInspect && window.__diminaRenderInspect.elementFor(${JSON.stringify(sid)})`;
         try {
-            const evaluated = await wc.debugger.sendCommand('Runtime.evaluate', {
+            const evaluated = await lease.send('Runtime.evaluate', {
                 expression,
                 returnByValue: false,
                 objectGroup: HOVER_OBJECT_GROUP,
@@ -157,7 +155,7 @@ export function createRenderInspector(options = {}) {
             const objectId = evaluated?.result?.objectId;
             if (!objectId)
                 return;
-            await wc.debugger.sendCommand('Overlay.highlightNode', {
+            await lease.send('Overlay.highlightNode', {
                 objectId,
                 highlightConfig: HIGHLIGHT_CONFIG,
             });
@@ -165,90 +163,11 @@ export function createRenderInspector(options = {}) {
         finally {
             // Drop the hover's remote DOM reference so repeated hovers don't accumulate
             // live wrappers in the guest context.
-            wc.debugger
-                .sendCommand('Runtime.releaseObjectGroup', { objectGroup: HOVER_OBJECT_GROUP })
+            lease
+                .send('Runtime.releaseObjectGroup', { objectGroup: HOVER_OBJECT_GROUP })
                 .catch(() => { });
         }
     }
-    /**
-     * Ensure the guest's debugger is usable WITHOUT opening a second session: a
-     * webContents debugger is single-owner, so reuse the already-attached session
-     * (Elements-forward / safe-area) and only `attach('1.3')` when nobody has. The
-     * sessions we open ourselves are tracked so guest-destroy detaches only ours.
-     * Returns false when the debugger can't be made usable.
-     */
-    function ensureGuestDebugger(wc) {
-        try {
-            if (wc.debugger.isAttached())
-                return true;
-        }
-        catch {
-            return false;
-        }
-        try {
-            wc.debugger.attach('1.3');
-            trackSelfAttached(wc);
-            return true;
-        }
-        catch {
-            // A concurrent attach (race) leaves it usable; anything else is a failure.
-            try {
-                return wc.debugger.isAttached();
-            }
-            catch {
-                return false;
-            }
-        }
-    }
-    /** Record a self-attached session and detach it when the guest is destroyed. */
-    function trackSelfAttached(wc) {
-        if (selfAttached.has(wc.id))
-            return;
-        selfAttached.add(wc.id);
-        const detach = () => {
-            selfAttached.delete(wc.id);
-            try {
-                if (!wc.isDestroyed() && wc.debugger.isAttached())
-                    wc.debugger.detach();
-            }
-            catch { /* already gone */ }
-        };
-        if (options.connections)
-            options.connections.acquire(wc).own(detach);
-        else {
-            try {
-                wc.once('destroyed', () => selfAttached.delete(wc.id));
-            }
-            catch { /* fake wc */ }
-        }
-    }
-    /**
-     * Enable the DOM + Overlay render domains in dependency order, ONCE per guest
-     * (the promise is cached + reused across hovers). `Overlay.enable` is sent ONLY
-     * AFTER `DOM.enable` resolves (Chromium rejects it otherwise). Resolves when
-     * Overlay is enabled; a rejection at any step is swallowed (the guest may be
-     * mid-teardown) and the cache entry is dropped so a later hover can retry.
-     */
-    function ensureDomainsEnabled(wc) {
-        const cached = enablePromises.get(wc.id);
-        if (cached)
-            return cached;
-        wc.debugger.sendCommand('CSS.enable').catch(() => { });
-        const handshake = wc.debugger
-            .sendCommand('DOM.enable')
-            .then(() => {
-            if (wc.isDestroyed())
-                return;
-            return wc.debugger.sendCommand('Overlay.enable');
-        })
-            .then(() => undefined)
-            .catch(() => {
-            // Allow a retry on the next hover (e.g. the guest was mid-destroy).
-            enablePromises.delete(wc.id);
-        });
-        enablePromises.set(wc.id, handshake);
-        return handshake;
-    }
     async function unhighlight(wc) {
         if (wc.isDestroyed())
             return;

package/dist/main/services/safe-area/index.d.ts

@@ -1,6 +1,7 @@
 import type { WebContents } from 'electron';
 import type { ConnectionRegistry } from '@dimina-kit/electron-deck/main';
 import type { NativeDeviceInfo } from '../../../shared/ipc-channels.js';
+import { type CdpSessionBroker } from '../cdp-session/index.js';
 export interface SafeAreaController {
     /** Attach the debugger to a freshly-attached render-host guest and push the
      *  current device's insets. `isTabPage` selects the bottom-inset policy (0 for
@@ -10,10 +11,12 @@ export interface SafeAreaController {
     /** Re-push insets to every still-attached guest after a device change (each
      *  guest keeps the page type it attached with). */
     reapplyAll(device: NativeDeviceInfo | null): void;
-    /** Detach from all guests (teardown). */
+    /** Release this controller's session leases (teardown). Does not itself
+     *  detach the shared debugger session — see cdp-session/index.ts. */
     dispose(): void;
 }
 export declare function createSafeAreaController(options?: {
     connections?: ConnectionRegistry;
+    broker?: CdpSessionBroker;
 }): SafeAreaController;
 //# sourceMappingURL=index.d.ts.map

package/dist/main/services/safe-area/index.js

@@ -1,3 +1,4 @@
+import { createCdpSessionBroker } from '../cdp-session/index.js';
 function guestInsets(device, isTabPage) {
     const top = device?.safeAreaInsets.top ?? 0;
     // A tab page's content sits above the shell-drawn tabBar (which fills the
@@ -8,57 +9,84 @@ function guestInsets(device, isTabPage) {
     return { top, topMax: top, right: 0, rightMax: 0, bottom, bottomMax: bottom, left: 0, leftMax: 0 };
 }
 export function createSafeAreaController(options = {}) {
-    // Guests we successfully attached `wc.debugger` to (value = the page's
-    // `isTabPage`, fixed for the guest's life — it's one page). So we don't
-    // re-attach (throws), and a device-change reapply reuses the same policy.
-    const attached = new Map();
+    // Own (and dispose on this controller's own dispose()) a private broker
+    // only when the caller didn't supply a shared one.
+    const ownsBroker = !options.broker;
+    // The shared CDP session broker (see cdp-session/index.ts) — reused across
+    // safe-area/elements-forward/render-inspect/network-forward when the caller
+    // passes one; falls back to a private instance so this module stays
+    // independently testable/usable.
+    const broker = options.broker ?? createCdpSessionBroker({ connections: options.connections });
+    // Each guest's page type, fixed for its life — tracked SEPARATELY from the
+    // lease so a lost session (external detach) doesn't lose the policy: a
+    // later `override`/`reapplyAll` can reacquire and keep applying the same
+    // isTabPage this guest attached with.
+    const pageType = new Map();
+    // Current lease per guest, if any. Cleared (not just left stale) on
+    // `lease.onDetach` — an external detach or a real Chrome DevTools window
+    // stealing the session — so the next `override` reacquires instead of
+    // sending through a dead lease forever.
+    const leases = new Map();
+    /** Get-or-reacquire this guest's lease. Null when the session is unavailable. */
+    function ensureLease(wc) {
+        const existing = leases.get(wc);
+        if (existing)
+            return existing;
+        const lease = broker.acquire(wc);
+        if (!lease)
+            return null;
+        leases.set(wc, lease);
+        lease.onDetach(() => { leases.delete(wc); });
+        return lease;
+    }
     function override(wc, device, isTabPage) {
         if (wc.isDestroyed())
             return;
-        void wc.debugger
-            .sendCommand('Emulation.setSafeAreaInsetsOverride', { insets: guestInsets(device, isTabPage) })
+        const lease = ensureLease(wc);
+        if (!lease) {
+            // Exclusively held elsewhere (e.g. a real Chrome DevTools window via
+            // --remote-debugging-port). Degrade: leave env at 0 rather than fail
+            // the page.
+            console.warn('[safe-area] debugger session unavailable; env(safe-area-inset-*) stays 0');
+            return;
+        }
+        void lease
+            .send('Emulation.setSafeAreaInsetsOverride', { insets: guestInsets(device, isTabPage) })
             .catch((err) => {
             console.warn('[safe-area] setSafeAreaInsetsOverride failed:', err instanceof Error ? err.message : err);
         });
     }
     return {
         applyToGuest: (wc, device, isTabPage) => {
-            if (!wc || wc.isDestroyed() || attached.has(wc)) {
-                if (wc && !wc.isDestroyed() && attached.has(wc))
-                    override(wc, device, isTabPage);
-                return;
-            }
-            try {
-                wc.debugger.attach('1.3');
-            }
-            catch (err) {
-                // Already attached by an external --remote-debugging-port client (or
-                // DevTools). Degrade: leave env at 0 rather than fail the page.
-                console.warn('[safe-area] debugger.attach failed; env(safe-area-inset-*) stays 0:', err instanceof Error ? err.message : err);
+            if (!wc || wc.isDestroyed())
                 return;
-            }
-            attached.set(wc, isTabPage);
-            if (options.connections) {
-                options.connections.acquire(wc).own(() => attached.delete(wc));
-            }
-            else {
-                wc.once('destroyed', () => attached.delete(wc));
+            const isFirstTime = !pageType.has(wc);
+            pageType.set(wc, isTabPage);
+            if (isFirstTime) {
+                const forget = () => { pageType.delete(wc); leases.delete(wc); };
+                if (options.connections) {
+                    options.connections.acquire(wc).own(forget);
+                }
+                else {
+                    wc.once('destroyed', forget);
+                }
             }
             override(wc, device, isTabPage);
         },
         reapplyAll: (device) => {
-            for (const [wc, isTabPage] of attached)
+            for (const [wc, isTabPage] of pageType)
                 override(wc, device, isTabPage);
         },
         dispose: () => {
-            for (const wc of attached.keys()) {
-                try {
-                    if (!wc.isDestroyed())
-                        wc.debugger.detach();
-                }
-                catch { /* already detached / destroyed */ }
-            }
-            attached.clear();
+            // Release our leases only — the shared session's actual detach is the
+            // broker's own top-level dispose() to decide (another consumer may
+            // still be using it).
+            for (const lease of leases.values())
+                lease.dispose();
+            leases.clear();
+            pageType.clear();
+            if (ownsBroker)
+                broker.dispose();
         },
     };
 }

package/dist/main/services/simulator-storage/index.d.ts

@@ -2,16 +2,22 @@
  * SimulatorStorageWatcher
  *
  * Attaches the Chrome DevTools Protocol debugger to the simulator <webview>
- * and forwards `DOMStorage.*` events to the renderer host.
+ * and forwards `DOMStorage.*` events to the renderer host. The SAME simulator
+ * wc's debugger session is independently captured by network-forward
+ * (Network.* events); both acquire a lease from the shared `CdpSessionBroker`
+ * (see cdp-session/index.ts) rather than each attaching/detaching directly —
+ * releasing our own lease never forces a physical detach that would kill the
+ * other's capture.
  *
  * Trade-offs vs a preload-side localStorage.setItem hook:
  *   + Uses standard browser protocol; no preload injection
  *   + Captures every change including ones bypassing wx (api-compat fallback,
  *     direct localStorage.setItem from devtools, etc.)
  *   + Decouples panel UI from dimina runtime's wx implementation
- *   - debugger.attach is mutually exclusive with Chrome DevTools (F12).
- *     If a user opens DevTools on the simulator the debugger detaches and
- *     events stop flowing until they close it.
+ *   - debugger.attach is mutually exclusive with a REAL Chrome DevTools window
+ *     (F12) attaching to the same target from outside the broker. If a user
+ *     opens one, the shared session detaches externally and events stop
+ *     flowing until they close it.
  */
 import { type WebContents } from 'electron';
 import { type ConnectionRegistry, type Disposable } from '@dimina-kit/electron-deck/main';
@@ -19,6 +25,7 @@ import { type SyncStorageChange } from '../../../shared/ipc-channels.js';
 import { type SenderPolicy } from '../../utils/ipc-registry.js';
 import type { BridgeRouterHandle } from '../../ipc/bridge-router.js';
 import type { RenderInspector } from '../render-inspect/index.js';
+import { type CdpSessionBroker } from '../cdp-session/index.js';
 /**
  * Runtime async-storage handler (native-host). bridge-router routes async
  * `wx.setStorage`/`getStorage`/… here so they hit the SAME service-host `file://`
@@ -78,6 +85,17 @@ export interface SimulatorStorageOptions {
      * not adopted the connection layer compile and behave unchanged.
      */
     connections?: ConnectionRegistry;
+    /**
+     * Shared CDP session broker (see cdp-session/index.ts) that owns the
+     * simulator wc's debugger session lifecycle — network-forward independently
+     * captures Network.* events on the SAME simulator wc, and an unconditional
+     * `debugger.detach()` here (the pre-migration behavior) would kill ITS
+     * capture too, exactly as an unconditional detach on its side would kill
+     * ours. Absent → a private broker is created and owned for this module's
+     * lifetime (torn down on `dispose()`), so existing standalone callers/tests
+     * compile and behave unchanged, just without cross-module session sharing.
+     */
+    broker?: CdpSessionBroker;
 }
 export declare function setupSimulatorStorage(host: WebContents, options: SimulatorStorageOptions): SimulatorStorageHandle;
 //# sourceMappingURL=index.d.ts.map

package/dist/main/services/simulator-storage/index.js

@@ -2,22 +2,29 @@
  * SimulatorStorageWatcher
  *
  * Attaches the Chrome DevTools Protocol debugger to the simulator <webview>
- * and forwards `DOMStorage.*` events to the renderer host.
+ * and forwards `DOMStorage.*` events to the renderer host. The SAME simulator
+ * wc's debugger session is independently captured by network-forward
+ * (Network.* events); both acquire a lease from the shared `CdpSessionBroker`
+ * (see cdp-session/index.ts) rather than each attaching/detaching directly —
+ * releasing our own lease never forces a physical detach that would kill the
+ * other's capture.
  *
  * Trade-offs vs a preload-side localStorage.setItem hook:
  *   + Uses standard browser protocol; no preload injection
  *   + Captures every change including ones bypassing wx (api-compat fallback,
  *     direct localStorage.setItem from devtools, etc.)
  *   + Decouples panel UI from dimina runtime's wx implementation
- *   - debugger.attach is mutually exclusive with Chrome DevTools (F12).
- *     If a user opens DevTools on the simulator the debugger detaches and
- *     events stop flowing until they close it.
+ *   - debugger.attach is mutually exclusive with a REAL Chrome DevTools window
+ *     (F12) attaching to the same target from outside the broker. If a user
+ *     opens one, the shared session detaches externally and events stop
+ *     flowing until they close it.
  */
 import { app, webContents as wcStatic } from 'electron';
 import { DisposableRegistry } from '@dimina-kit/electron-deck/main';
 import { SimulatorElementChannel, SimulatorStorageChannel, } from '../../../shared/ipc-channels.js';
 import { IpcRegistry } from '../../utils/ipc-registry.js';
 import { decodeStorageValue, encodeStorageValue, serviceStorage } from './service-storage-ops.js';
+import { createCdpSessionBroker } from '../cdp-session/index.js';
 /** Async wx storage API names routed through the unified service-window store. */
 export const STORAGE_API_NAMES = new Set([
     'setStorage',
@@ -55,8 +62,12 @@ export function setupSimulatorStorage(host, options) {
             return null;
         return options.bridge.getServiceWc(getActiveAppId() ?? undefined);
     }
+    // Own (and dispose on this module's own dispose()) a private broker only
+    // when the caller didn't supply a shared one.
+    const ownsBroker = !options.broker;
+    const broker = options.broker ?? createCdpSessionBroker({ connections: options.connections });
     let attachedWc = null;
-    let attachDisposables = null;
+    let attachedLease = null;
     /**
      * Cached origin discovered via `executeJavaScript('location.origin')` on
      * first use. The simulator <webview> loads `simulator.html` from a stable
@@ -69,24 +80,21 @@ export function setupSimulatorStorage(host, options) {
         const appId = getActiveAppId();
         return appId ? `${appId}_` : null;
     }
+    /**
+     * Release OUR OWN lease on the simulator wc's shared session — never a
+     * physical `debugger.detach()`. The SAME wc is independently captured by
+     * network-forward (Network.* events); an unconditional detach here would
+     * kill its capture too. The broker (cdp-session/index.ts) alone decides
+     * when an actual detach happens.
+     */
     function detachFromSim() {
         if (!attachedWc)
             return;
-        const wc = attachedWc;
         attachedWc = null;
         cachedOrigin = null;
-        const ad = attachDisposables;
-        attachDisposables = null;
-        if (ad)
-            void ad.disposeAll().catch(() => { });
-        try {
-            if (!wc.isDestroyed() && wc.debugger.isAttached()) {
-                wc.debugger.detach();
-            }
-        }
-        catch {
-            // best-effort
-        }
+        const lease = attachedLease;
+        attachedLease = null;
+        lease?.dispose();
     }
     async function attachToSim(wc) {
         if (attachedWc === wc)
@@ -94,57 +102,30 @@ export function setupSimulatorStorage(host, options) {
         if (wc.isDestroyed())
             return;
         detachFromSim();
+        const lease = broker.acquire(wc);
+        if (!lease) {
+            console.warn('[storage-watcher] attach failed: debugger session unavailable');
+            return;
+        }
         try {
-            if (!wc.debugger.isAttached()) {
-                wc.debugger.attach('1.3');
-            }
-            await wc.debugger.sendCommand('DOMStorage.enable');
-            const attach = new DisposableRegistry();
-            attachDisposables = attach;
-            const onMessage = (_event, method, params) => forwardCdpMessage(method, params);
-            wc.debugger.on('message', onMessage);
-            attach.add(() => safeOff(wc.debugger, 'message', onMessage));
-            const onDetach = () => {
-                if (attachedWc === wc)
-                    attachedWc = null;
-            };
-            wc.debugger.on('detach', onDetach);
-            attach.add(() => safeOff(wc.debugger, 'detach', onDetach));
-            const onDestroyed = () => {
-                // When the attached wc is destroyed, the lingering attachDisposables
-                // hold listener refs to a wc that will never emit again. Dispose the
-                // registry here so debugger/wc listeners are removed deterministically
-                // and a subsequent attachToSim() starts from a clean slate.
-                if (attachedWc === wc) {
-                    attachedWc = null;
-                    const ad = attachDisposables;
-                    attachDisposables = null;
-                    if (ad)
-                        void ad.disposeAll().catch(() => { });
-                }
-            };
-            if (options.connections) {
-                // Route through the connection layer: own() disposes onDestroyed
-                // deterministically on wc destroy / connection reset, and the returned
-                // Disposable lets us release it early when this attach segment tears
-                // down (detach / re-attach).
-                const owned = options.connections.acquire(wc).own(onDestroyed);
-                attach.add(() => owned.dispose());
-            }
-            else {
-                try {
-                    wc.once('destroyed', onDestroyed);
-                }
-                catch {
-                    // fake-wc safety (unit tests pass a wc without a real emitter)
-                }
-                attach.add(() => safeOff(wc, 'destroyed', onDestroyed));
-            }
-            attachedWc = wc;
+            await lease.send('DOMStorage.enable');
         }
         catch (e) {
             console.warn('[storage-watcher] attach failed:', e.message);
+            lease.dispose();
+            return;
         }
+        lease.onMessage((method, params) => forwardCdpMessage(method, params));
+        // Fires on external detach OR the wc being destroyed (see cdp-session's
+        // design doc) — either way our tracking of this wc as "attached" is stale.
+        lease.onDetach(() => {
+            if (attachedWc === wc) {
+                attachedWc = null;
+                attachedLease = null;
+            }
+        });
+        attachedWc = wc;
+        attachedLease = lease;
     }
     function forwardCdpMessage(method, params) {
         if (host.isDestroyed())
@@ -520,6 +501,12 @@ export function setupSimulatorStorage(host, options) {
     registry.add(ipc);
     // Detach active CDP session last
     registry.add(() => detachFromSim());
+    // Only detach sessions we self-attached if we own the broker's lifecycle —
+    // a shared/injected broker keeps serving other consumers past our dispose().
+    registry.add(() => {
+        if (ownsBroker)
+            broker.dispose();
+    });
     // ── Runtime async-storage unification (native-host) ───────────────────────
     // bridge-router routes async wx.setStorage/etc. here so they hit the SAME
     // service-host file:// store as the sync APIs (no more split origin). After a

package/dist/main/services/views/native-simulator-devtools-host.js

@@ -377,7 +377,18 @@ export function createDevtoolsHost(ctx, reconciler, deps) {
             // instance (its reconcile loop never gets to install the hook, so Elements
             // falls back to the natively-inspected service host). Stop only this wc's own
             // forward, and clear the module pointer only while it still points here.
-            const thisForward = installElementsForward({ devtoolsWc, bridge: ctx.bridge, connections: ctx.connections });
+            const thisForward = installElementsForward({
+                devtoolsWc,
+                bridge: ctx.bridge,
+                connections: ctx.connections,
+                // Shared session broker (see cdp-session/index.ts) — undefined falls
+                // back to a private instance owned by this call.
+                broker: ctx.cdpSessionBroker,
+                // Body/post-data lookups for the virtual requestIds the network
+                // forwarder injects — answered from its prefetch cache when the
+                // front-end's Response tab round-trips Network.getResponseBody.
+                network: ctx.networkForward?.bodies,
+            });
             stopElementsForward = thisForward;
             devtoolsWc.once('destroyed', () => {
                 try {

package/dist/main/services/views/native-simulator-view.js

@@ -281,6 +281,12 @@ export function createNativeSimulatorView(ctx, reconciler, deps) {
             // render-host URL in will-attach (FIFO).
             const isTabGuest = pendingGuestIsTab.shift() ?? false;
             safeArea.applyToGuest(guestWc, ctx.bridge?.getDevice() ?? null, isTabGuest);
+            // Page-level resource loads (images/fonts/page fetch) run in THIS guest's
+            // network stack, never the simulator's — without this, only wx.request
+            // (forwarded to the simulator) shows in the Network panel and everything
+            // the page itself loads is invisible. Shares the already-attached
+            // safe-area debugger session (never a second attach/detach owner).
+            ctx.networkForward?.attachRenderGuest(guestWc);
             guestWc.setWindowOpenHandler(({ url }) => handleWindowOpenExternal(url));
             guestWc.on('will-navigate', (e, url) => {
                 try {

package/dist/main/services/views/view-manager.d.ts

@@ -20,6 +20,15 @@ export interface ViewManagerContext {
      * `createWorkbenchContext` always supplies it.
      */
     connections: WorkbenchContext['connections'];
+    /**
+     * Shared CDP session broker (see cdp-session/index.ts). safe-area acquires
+     * render-guest debugger leases through it instead of attaching directly, so
+     * it shares sessions with elements-forward/render-inspect/network-forward
+     * rather than fighting them for exclusive ownership. Optional so partial
+     * test contexts compile (safe-area falls back to a private broker
+     * instance); `createWorkbenchContext` always supplies the real one.
+     */
+    cdpSessionBroker?: WorkbenchContext['cdpSessionBroker'];
     /** Active project root used to validate/open console source locations. */
     workspace?: WorkbenchContext['workspace'];
     /**

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

@@ -17,7 +17,7 @@ export function createViewManager(ctx) {
     // CSS env(safe-area-inset-*) simulation for render-host guests (per device).
     // Driven from did-attach-webview in the simulator domain and re-pushed on
     // device change via reapplySafeArea. Torn down in disposeAll.
-    const safeArea = createSafeAreaController({ connections: ctx.connections });
+    const safeArea = createSafeAreaController({ connections: ctx.connections, broker: ctx.cdpSessionBroker });
     // The single level-triggered placement reconciler every view domain shares —
     // the sole owner of placement state (docs/view-placement-reconciler.md). Each
     // domain registers exactly one view slot with it.