fix(browser): stop idle native pane layout polling

application/state/useAutoSync.monitorPanels.test.ts

@@ -195,82 +195,3 @@ test("normal manual and debounced auto-sync upload panel creation, edits and del
     Object.assign(manager, originals);
   }
 });
-
-test("pending-sync indication coalesces edit bursts without repeatedly collecting the vault", async () => {
-  const manager = getCloudSyncManager();
-  const snapshot = {
-    ...manager.getState(),
-    securityState: "UNLOCKED" as const,
-    syncState: "IDLE" as const,
-    autoSyncEnabled: true,
-    providers: {
-      ...manager.getState().providers,
-      webdav: { provider: "webdav" as const, status: "connected" as const },
-    },
-  };
-  const originals = {
-    getState: manager.getState,
-    loadSyncBase: manager.loadSyncBase,
-    inspectProviderRemote: manager.inspectProviderRemote,
-    setPendingLocalSync: manager.setPendingLocalSync,
-    setAvailablePluginSyncProviders: manager.setAvailablePluginSyncProviders,
-  };
-  manager.getState = () => snapshot;
-  manager.loadSyncBase = async () => null;
-  manager.inspectProviderRemote = async () => ({ remoteFile: null, payload: null, remoteChanged: false });
-  const pending: boolean[] = [];
-  manager.setPendingLocalSync = (value) => { pending.push(value); };
-  manager.setAvailablePluginSyncProviders = () => {};
-  let collects = 0;
-  let collectBarrier: Promise<void> | undefined;
-  Object.defineProperty(window, "netcatty", { configurable: true, value: {
-    collectPluginSyncSidecars: async () => { collects++; await collectBarrier; return { version: 1, entries: [] }; },
-  } });
-  const apply = async () => {};
-  const config = { hosts: [], keys: [], snippets: [], customGroups: ["fixture"], startupReady: true,
-    onApplyPayload: apply, onApplyConvergentPayload: apply };
-  function Probe({ enabled = true }: { enabled?: boolean }) { useAutoSync({ ...config, enabled }); return null; }
-  let renderer: ReactTestRenderer | undefined;
-  const wait = async (ms: number) => { await act(async () => { await new Promise((resolve) => setTimeout(resolve, ms)); }); };
-  try {
-    store.clear();
-    writeMonitorPanels([{ id: "burst", name: "Before", description: "", hostIds: ["h"], view: "list", interval: 5, range: 15, sort: "manual" }]);
-    await act(async () => { renderer = create(React.createElement(Probe)); });
-    await wait(500);
-    const initial = collects;
-    assert.ok(initial > 0, "startup still collects a real sync baseline");
-    for (let i = 0; i < 10; i++) {
-      await act(async () => {
-        writeMonitorPanels([{ id: "burst", name: `Edit ${i}`, description: "", hostIds: ["h"], view: "list", interval: 5, range: 15, sort: "manual" }]);
-        await new Promise((resolve) => setTimeout(resolve, 5));
-      });
-    }
-    assert.equal(collects, initial, "editing must not repeatedly collect all sync data");
-    await wait(350);
-    assert.equal(collects, initial + 1, "the final edit updates the pending indicator once");
-    assert.equal(pending.at(-1), true);
-    writeMonitorPanels([]);
-    await wait(10);
-    await act(async () => { renderer!.update(React.createElement(Probe, { enabled: false })); });
-    const disabled = collects;
-    await wait(350);
-    assert.equal(collects, disabled, "disabling sync cancels the pending collection");
-    assert.equal(pending.at(-1), false);
-    await act(async () => { renderer!.update(React.createElement(Probe)); });
-    await wait(350);
-    let releaseCollection!: () => void;
-    collectBarrier = new Promise<void>((resolve) => { releaseCollection = resolve; });
-    const beforeInflight = collects;
-    writeMonitorPanels([{ id: "burst", name: "New edit", description: "", hostIds: ["h"], view: "list", interval: 5, range: 15, sort: "manual" }]);
-    await wait(10);
-    await wait(350);
-    assert.equal(collects, beforeInflight + 1, "the pending collection has started");
-    await act(async () => { renderer!.update(React.createElement(Probe, { enabled: false })); });
-    await act(async () => { releaseCollection(); });
-    assert.equal(pending.at(-1), false, "an old collection cannot re-enable the indicator after disabling sync");
-  } finally {
-    await act(async () => renderer?.unmount());
-    Reflect.deleteProperty(window, "netcatty");
-    Object.assign(manager, originals);
-  }
-});

application/state/useAutoSync.ts

@@ -603,7 +603,7 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     getDataHashRef.current = getDataHash;
   }, [getDataHash]);
 
-  const refreshPendingLocalSync = useCallback(async (isCurrent = () => true) => {
+  const refreshPendingLocalSync = useCallback(async () => {
     if (
       !enabled
       || convergentSyncPaused
@@ -618,7 +618,6 @@ export const useAutoSync = (config: AutoSyncConfig) => {
     }
     try {
       const currentHash = await getDataHashRef.current();
-      if (!isCurrent()) return;
       const hashDecision = resolveAutoSyncHashDecision({
         currentHash,
         lastSyncedHash: lastSyncedDataRef.current,
@@ -1149,27 +1148,13 @@ export const useAutoSync = (config: AutoSyncConfig) => {
 
   // Reflect unsynced local edits in the top-bar cloud indicator.
   useEffect(() => {
-    if (!enabled || convergentSyncPaused || !sync.hasAnyConnectedProvider || !sync.isUnlocked) {
-      manager.setPendingLocalSync(false);
-      return;
-    }
-    // Collecting the pending hash builds the same full payload as an upload.
-    // Let rapid edits settle before doing that work, even with auto-sync off.
-    let cancelled = false;
-    const timer = setTimeout(() => {
-      void refreshPendingLocalSync(() => !cancelled);
-    }, 200);
-    return () => {
-      cancelled = true;
-      clearTimeout(timer);
-    };
+    void refreshPendingLocalSync();
   }, [
     refreshPendingLocalSync,
     getDataHash,
     sync.hasAnyConnectedProvider,
     sync.isUnlocked,
     sync.isSyncing,
-    convergentSyncPaused,
     config.settingsVersion,
     enabled,
     bookmarksVersion,

application/state/useHostBrowserPanel.test.ts

@@ -21,6 +21,17 @@ async function fixture(t: test.TestContext) {
     value: (callback: FrameRequestCallback) => { frames.set(++frameId, callback); return frameId; } });
   Object.defineProperty(globalThis, 'cancelAnimationFrame', { configurable: true,
     value: (id: number) => frames.delete(id) });
+  const resizeObservers = new Map<ResizeObserver, Set<Element>>();
+  const resizeCallbacks = new Map<ResizeObserver, ResizeObserverCallback>();
+  class LayoutResizeObserver implements ResizeObserver {
+    constructor(callback: ResizeObserverCallback) { resizeCallbacks.set(this, callback); resizeObservers.set(this, new Set()); }
+    observe(target: Element) { resizeObservers.get(this)?.add(target); }
+    unobserve(target: Element) { resizeObservers.get(this)?.delete(target); }
+    disconnect() { resizeObservers.delete(this); resizeCallbacks.delete(this); }
+  }
+  Object.defineProperty(env.window, 'ResizeObserver', { configurable: true, value: LayoutResizeObserver });
+  const fonts = Object.assign(new env.window.EventTarget(), { status: 'loaded' });
+  Object.defineProperty(env.document, 'fonts', { configurable: true, value: fonts });
   const style = env.document.createElement('div').style;
   style.colorScheme = 'dark';
   globalThis.getComputedStyle = () => style;
@@ -40,8 +51,11 @@ async function fixture(t: test.TestContext) {
       isVisible: visible });
     return React.createElement('div', { ref: panel.elementRef });
   }
-  const element = { isConnected: true, closest: () => null,
-    getBoundingClientRect: () => new env.window.DOMRect(200, 100, 500, 600) };
+  const element = env.document.createElement('div');
+  env.document.body.append(element);
+  let bounds = new env.window.DOMRect(200, 100, 500, 600);
+  let reads = 0;
+  element.getBoundingClientRect = () => { reads += 1; return bounds; };
   let renderer: ReturnType<typeof create>;
   t.after(async () => {
     if (renderer) await act(async () => renderer.unmount());
@@ -62,11 +76,15 @@ async function fixture(t: test.TestContext) {
   };
   const tick = async () => {
     await act(async () => {
+      await Promise.resolve();
       const pending = [...frames.values()]; frames.clear();
       for (const callback of pending) callback(0);
     });
   };
-  return { layouts, overlay, tick, panel: () => panel,
+  return { layouts, overlay, tick, panel: () => panel, pendingFrames: () => frames.size,
+    env, element, style, fonts, reads: () => reads, setBounds: (next: DOMRect) => { bounds = next; },
+    observerCount: () => resizeObservers.size,
+    resize: () => { for (const [observer, callback] of resizeCallbacks) callback([], observer); },
     respond: (callback: typeof respond) => { respond = callback; },
     hide: async () => { await act(async () => renderer.update(React.createElement(Panel, { visible: false }))); } };
 }
@@ -128,3 +146,103 @@ test('hiding or locking the pane clears pictures without taking another capture'
   await f.hide();
   assert.deepEqual(f.panel().snapshot, []);
 });
+
+
+test('a stationary visible browser leaves no repeating layout work', async (t) => {
+  const f = await fixture(t);
+  for (let index = 0; index < 600; index += 1) await f.tick();
+  assert.equal(f.layouts.length, 1);
+  assert.equal(f.pendingFrames(), 0, 'idle browser must stop scheduling document/style/geometry scans');
+});
+
+
+test('layout, scroll, font, stylesheet and theme changes coalesce without resuming idle scans', async (t) => {
+  const f = await fixture(t);
+  const reads = f.reads();
+  f.setBounds(new f.env.window.DOMRect(100, 50, 400, 500));
+  for (let index = 0; index < 20; index += 1) {
+    f.resize();
+    f.env.window.dispatchEvent(new f.env.window.Event('resize'));
+    f.element.dispatchEvent(new f.env.window.Event('scroll', { bubbles: true }));
+  }
+  f.fonts.dispatchEvent(new f.env.window.Event('loadingdone'));
+  f.env.document.dispatchEvent(new f.env.window.Event('load'));
+  f.style.colorScheme = 'light';
+  f.env.document.documentElement.classList.add('light');
+  assert.equal(f.reads(), reads, 'bursts do not synchronously force repeated layout reads');
+  await f.tick();
+  assert.equal(f.reads(), reads + 1);
+  assert.deepEqual(f.layouts.at(-1)?.bounds, { x: 100, y: 50, width: 400, height: 500 });
+  assert.equal(f.layouts.at(-1)?.theme, 'light');
+  assert.equal(f.pendingFrames(), 0);
+  f.env.document.body.setAttribute('inert', ''); await f.tick();
+  assert.equal(f.layouts.at(-1)?.visible, false);
+  f.env.document.body.removeAttribute('inert'); await f.tick();
+  assert.equal(f.layouts.at(-1)?.visible, true);
+});
+
+test('resize observation follows a moving overlay and is released while hidden', async (t) => {
+  const f = await fixture(t);
+  const popper = f.overlay(tooltip, 10, 10); await f.tick();
+  assert.equal(f.layouts.at(-1)?.occluded, false);
+  popper.firstElementChild!.getBoundingClientRect = () => new f.env.window.DOMRect(220, 110, 150, 40);
+  f.resize(); await f.tick();
+  assert.equal(f.layouts.at(-1)?.occluded, true);
+  await f.hide();
+  assert.equal(f.observerCount(), 0);
+  const reads = f.reads();
+  f.overlay('<div role="dialog" aria-modal="true"></div>');
+  f.env.window.dispatchEvent(new f.env.window.Event('resize'));
+  f.fonts.dispatchEvent(new f.env.window.Event('loadingdone'));
+  await f.tick();
+  assert.equal(f.pendingFrames(), 0);
+  assert.equal(f.reads(), reads);
+});
+
+test('only pane/ancestor and overlay motion follows frames, then stops at settlement', async (t) => {
+  const f = await fixture(t);
+  const animation = { pending: false, playState: 'running' };
+  f.element.getAnimations = () => [animation as unknown as Animation];
+  f.element.dispatchEvent(new f.env.window.Event('transitionrun', { bubbles: true }));
+  const reads = f.reads();
+  for (let index = 0; index < 5; index += 1) {
+    f.setBounds(new f.env.window.DOMRect(200 + index * 10, 100, 500, 600));
+    await f.tick();
+  }
+  assert.equal(f.reads(), reads + 5);
+  assert.equal(f.layouts.at(-1)?.bounds?.x, 240);
+  animation.playState = 'finished'; await f.tick();
+  assert.equal(f.pendingFrames(), 0);
+
+  const spinner = f.env.document.createElement('div'); f.env.document.body.append(spinner); await f.tick();
+  spinner.getAnimations = () => [animation as unknown as Animation];
+  const settledReads = f.reads();
+  spinner.dispatchEvent(new f.env.window.Event('animationstart', { bubbles: true }));
+  await f.tick();
+  assert.equal(f.reads(), settledReads, 'unrelated cursor/spinner animation does not wake the browser');
+});
+
+test('removing an animating overlay cannot leave an endless layout loop', async (t) => {
+  const f = await fixture(t);
+  const popper = f.overlay(tooltip);
+  popper.firstElementChild!.getAnimations = () => [{ pending: false, playState: 'running' } as Animation];
+  await f.tick();
+  assert.equal(f.pendingFrames(), 1);
+  popper.remove(); await f.tick();
+  assert.equal(f.pendingFrames(), 0);
+  assert.equal(f.layouts.at(-1)?.occluded, false);
+});
+
+test('an old capture stays obsolete when an identical overlay is opened again', async (t) => {
+  const f = await fixture(t);
+  const captures: ((result: Result) => void)[] = [];
+  f.respond((layout) => layout.occluded ? new Promise((resolve) => { captures.push(resolve); }) : Promise.resolve(true));
+  const first = f.overlay(tooltip); await f.tick();
+  first.remove(); await f.tick();
+  f.overlay(tooltip); await f.tick();
+  assert.equal(captures.length, 2);
+  await act(async () => captures[0]({ layers }));
+  assert.deepEqual(f.panel().snapshot, [], 'the first A capture must not become valid after A -> B -> A');
+  await act(async () => captures[1]({ layers }));
+  assert.deepEqual(f.panel().snapshot, layers);
+});

application/state/useHostBrowserPanel.ts

@@ -38,9 +38,33 @@ export function useHostBrowserPanel(options: BrowserPanelOptions) {
 
   useLayoutEffect(() => {
     const bridge = netcattyBridge.get();
-    let frame = 0;
+    let frame: number | null = null;
     let previous = '';
     let disposed = false;
+    let layoutRevision = 0;
+    const element = elementRef.current;
+    const doc = element?.ownerDocument;
+    const view = doc?.defaultView;
+    const observed = new Set<Element>();
+    const animations = new Map<Animation, Element>();
+    const schedule = () => {
+      if (disposed || frame !== null) return;
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        for (const [animation, target] of animations) {
+          if (!target.isConnected || (!animation.pending && animation.playState !== 'running')) animations.delete(animation);
+        }
+        update();
+        if (animations.size > 0) schedule();
+      });
+    };
+    const trackAnimations = (target: Element) => {
+      for (const animation of target.getAnimations?.() ?? []) {
+        if (!animation.pending && animation.playState !== 'running') continue;
+        animations.set(animation, target);
+      }
+    };
+    const resizeObserver = isVisible && view?.ResizeObserver ? new view.ResizeObserver(schedule) : null;
     const update = () => {
       const element = elementRef.current;
       const rect = element?.getBoundingClientRect();
@@ -48,9 +72,21 @@ export function useHostBrowserPanel(options: BrowserPanelOptions) {
       // to yield; dialogs are modal even when their content is beside the pane.
       const locked = !!document.querySelector('[data-app-lock-overlay]');
       const modal = !!document.querySelector('[role="dialog"][aria-modal="true"], [role="alertdialog"]');
-      const covered = modal || (!!rect && Array.from(document.querySelectorAll(
-        '[role="dialog"], [role="menu"][data-state="open"], [data-radix-popper-content-wrapper] > *',
-      )).some((overlay) => overlapsBrowser(rect, overlay)));
+      const overlays = Array.from(document.querySelectorAll(
+        '[role="dialog"], [role="alertdialog"], [role="menu"][data-state="open"], [data-radix-popper-content-wrapper] > *',
+      ));
+      const covered = modal || (!!rect && overlays.some((overlay) => overlapsBrowser(rect, overlay)));
+      const targets = new Set<Element>(overlays);
+      for (let target: Element | null = element; target; target = target.parentElement) targets.add(target);
+      for (const target of observed) {
+        if (!targets.has(target)) { resizeObserver?.unobserve(target); observed.delete(target); }
+      }
+      for (const target of targets) {
+        if (observed.has(target)) continue;
+        observed.add(target);
+        resizeObserver?.observe(target);
+        trackAnimations(target);
+      }
       const visible = isVisible && !!element?.isConnected && !!rect
         && rect.width > 0 && rect.height > 0 && !element?.closest('[inert]') && !locked;
       if (!visible) setSnapshot(null);
@@ -63,17 +99,59 @@ export function useHostBrowserPanel(options: BrowserPanelOptions) {
       const next = JSON.stringify(layout);
       if (next !== previous) {
         previous = next;
+        const revision = ++layoutRevision;
         void bridge?.setHostBrowserPanelLayout?.(layout).then((result) => {
-          if (disposed || previous !== next) return;
+          if (disposed || layoutRevision !== revision) return;
           setSnapshot(visible && covered && typeof result === 'object' ? { browserId, layers: result.layers } : null);
         }).catch(() => {});
       }
-      if (isVisible) frame = requestAnimationFrame(update);
     };
+    if (!isVisible) {
+      setSnapshot(null);
+      void bridge?.setHostBrowserPanelLayout?.({ browserId, visible: false }).catch(() => {});
+      return;
+    }
+
+    // Layout, theme and portal changes coalesce into a single frame. Keep
+    // following only running animations on the pane's ancestors or overlay
+    // containers; unrelated spinner/cursor animations must not restart polling.
+    const mutationObserver = view?.MutationObserver ? new view.MutationObserver(schedule) : null;
+    if (doc) mutationObserver?.observe(doc.documentElement, {
+      subtree: true, childList: true, attributes: true,
+      attributeFilter: ['style', 'class', 'hidden', 'inert', 'role', 'aria-modal', 'data-state',
+        'data-app-lock-overlay', 'data-radix-popper-content-wrapper', 'href', 'media', 'disabled'],
+    });
+    const onMotion = (event: Event) => {
+      const target = event.target;
+      if (!element || !view || !(target instanceof view.Element)) return;
+      if (!target.contains(element) && !target.matches(
+        '[role="dialog"], [role="alertdialog"], [role="menu"], [data-app-lock-overlay], '
+        + '[data-radix-popper-content-wrapper], [data-radix-popper-content-wrapper] > *',
+      )) return;
+      trackAnimations(target);
+      schedule();
+    };
+    const motionEvents = ['transitionrun', 'transitionend', 'transitioncancel', 'animationstart', 'animationend', 'animationcancel'];
+    for (const event of motionEvents) doc?.addEventListener(event, onMotion, true);
+    doc?.addEventListener('scroll', schedule, true);
+    doc?.addEventListener('load', schedule, true);
+    view?.addEventListener('resize', schedule);
+    doc?.fonts?.addEventListener('loadingdone', schedule);
+    doc?.fonts?.addEventListener('loadingerror', schedule);
+    if (doc?.fonts?.status === 'loading') void doc.fonts.ready.then(schedule);
     update();
+    if (animations.size > 0) schedule();
     return () => {
       disposed = true;
-      cancelAnimationFrame(frame);
+      if (frame !== null) cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      for (const event of motionEvents) doc?.removeEventListener(event, onMotion, true);
+      doc?.removeEventListener('scroll', schedule, true);
+      doc?.removeEventListener('load', schedule, true);
+      view?.removeEventListener('resize', schedule);
+      doc?.fonts?.removeEventListener('loadingdone', schedule);
+      doc?.fonts?.removeEventListener('loadingerror', schedule);
       void bridge?.setHostBrowserPanelLayout?.({ browserId, visible: false }).catch(() => {});
     };
   }, [browserId, isVisible]);

docs/research/sync-pending-indicator-performance.md

@@ -1,18 +0,0 @@
-# Pending sync indicator performance
-
-The pending-local-sync indicator independently collected and serialized the full sync payload after every local edit. Upload debounce did not cover this path. New monitor panel and portable chat changes also trigger it. No competing open repair was found during the 2026-10-18 audit.
-
-A production React hook in an isolated Electron renderer, with 2,000 synthetic hosts and mocked cloud network edges, received 50 monitor-name edits spaced 5 ms apart:
-
-| Checkpoint | Before | After |
-| --- | --- | --- |
-| Collections during the edit burst | 50 | 0 |
-| Collections for the settled indicator | 0 additional | 1 |
-| Uploads after the existing upload debounce | 1 | 1 |
-| Pending indicator after edits | true | true |
-
-The indicator now waits 200 ms after the latest change before collecting. Disabling, locking, losing the provider, pausing, or unmounting cancels pending work; stale in-flight indicator results are ignored. Startup baseline collection and explicit/manual sync keep their existing timing. The change does not alter cloud payloads or conflict/merge decisions.
-
-`application/state/useAutoSync.monitorPanels.test.ts` exercises the actual hook, adapter notifications, and sidecar collection boundary. It failed before the fix (13 collections vs 3 startup collections after ten edits), and passes after the fix. It also checks settled pending state, cancellation before collection, and cancellation while collection is in flight. Existing panel create/edit/delete upload and sync baseline tests continue to pass.
-
-Validation: 47 related tests passed, full lint has zero errors (eight existing warnings), and production build passed. Full-platform CI must be checked at the final PR head. The fixture does not claim to reproduce the Windows long-running terminal report or to benchmark a real cloud provider.

electron/hostBrowser/hostBrowser.renderer.live.test.cjs

@@ -35,11 +35,24 @@ async function capture(file, selector) {
   fs.writeFileSync(file, (await owner.webContents.capturePage(bounds)).toPNG());
 }
 async function click(selector) {
+  // Electron requires native focus before sendInputEvent can deliver a click.
+  app.focus({ steal: true }); owner.focus(); owner.webContents.focus();
+  await until(() => owner.isFocused(), true, 'acceptance window has native focus for click');
   const rect = await run(`(() => { const element = document.querySelector(${JSON.stringify(selector)}); element?.scrollIntoView({block:'nearest'}); const r = element?.getBoundingClientRect(); return r && {x:r.x+r.width/2,y:r.y+r.height/2}; })()`);
   assert.ok(rect, `missing ${selector}`);
+  owner.webContents.sendInputEvent({ type: 'mouseMove', x: Math.round(rect.x), y: Math.round(rect.y) });
+  await run('new Promise(resolve => requestAnimationFrame(resolve))');
   for (const type of ['mouseDown', 'mouseUp']) owner.webContents.sendInputEvent({ type, button: 'left', clickCount: 1, x: Math.round(rect.x), y: Math.round(rect.y) });
   await run('new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))');
 }
+async function pressEscape() {
+  app.focus({ steal: true }); owner.focus(); owner.webContents.focus();
+  await until(() => owner.isFocused(), true, 'acceptance window has native focus for Escape');
+  await run('new Promise(resolve => requestAnimationFrame(resolve))');
+  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  owner.webContents.sendInputEvent({ type: 'keyUp', keyCode: 'Escape' });
+  await run('new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))');
+}
 async function input(selector, value) {
   await until(() => run(`!!document.querySelector(${JSON.stringify(selector)})`), true, `input exists: ${selector}`);
   await run(`(() => { const element = document.querySelector(${JSON.stringify(selector)}); Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set.call(element,${JSON.stringify(value)}); element.dispatchEvent(new Event('input',{bubbles:true})); })()`);
@@ -93,6 +106,65 @@ async function main() {
   assert.ok(root); assert.equal(root.children.length, 1, 'only the website is a separate native view');
   const page = root.children[0].webContents;
   await page.executeJavaScript("document.getElementById('draft').value='Unsaved browser input'");
+  // A visible but stationary browser must not spend every frame reading the
+  // whole renderer. Settle startup/FontFaceSet work before observing idle time.
+  await wait(300);
+  const assertIdleLayout = async () => {
+    await run(`(() => {
+      const query=document.querySelector.bind(document),queryAll=document.querySelectorAll.bind(document),style=getComputedStyle;
+      window.layoutReads={queries:0,styles:0};
+      document.querySelector=(...args)=>{window.layoutReads.queries++;return query(...args)};
+      document.querySelectorAll=(...args)=>{window.layoutReads.queries++;return queryAll(...args)};
+      window.getComputedStyle=(...args)=>{window.layoutReads.styles++;return style(...args)};
+      window.restoreLayoutReads=()=>{document.querySelector=query;document.querySelectorAll=queryAll;window.getComputedStyle=style;};
+    })()`);
+    await wait(250);
+    const reads=await run('window.restoreLayoutReads();window.layoutReads');
+    assert.deepEqual(reads,{queries:0,styles:0},'idle browser leaves no repeated overlay/style scans');
+  };
+  await assertIdleLayout();
+
+  // Position-only CSS motion does not fire ResizeObserver on the viewport.
+  // Follow its real animation frames, then release the frame loop again.
+  await run(`(() => {const parent=document.querySelector('[data-section=host-browser-root]').parentElement;parent.id='moving-browser-fixture';parent.style.transition='transform 300ms linear';parent.style.transform='translateX(32px)';})()`);
+  const positions=[];
+  for(let index=0;index<15;index++){await wait(25);positions.push(root.getBounds().x);}
+  assert.ok(new Set(positions).size>=4,'the native browser follows intermediate transform positions');
+  const expectedX=await run('Math.round(document.querySelector("[data-section=host-browser-panel]").getBoundingClientRect().x)');
+  assert.equal(root.getBounds().x,expectedX,'native browser reaches the final CSS position');
+  await assertIdleLayout();
+  await run('document.getElementById("moving-browser-fixture").style.transform="none"');await wait(350);
+
+  // Exercise continuous pointer-driven size updates through the same hook and
+  // native view. No application session or real SSH host is involved.
+  await run(`(() => {
+    const handle=document.createElement('div');handle.id='browser-drag-fixture';handle.style.cssText='position:fixed;left:2px;top:100px;width:8px;height:200px;z-index:99999';
+    const parent=document.getElementById('moving-browser-fixture');
+    handle.onmousedown=()=>{const move=event=>{parent.style.width=Math.max(300,event.clientX-parent.getBoundingClientRect().x)+'px'};const up=()=>{window.removeEventListener('mousemove',move);window.removeEventListener('mouseup',up)};window.addEventListener('mousemove',move);window.addEventListener('mouseup',up)};
+    document.body.append(handle);
+  })()`);
+  owner.webContents.sendInputEvent({type:'mouseDown',button:'left',clickCount:1,x:6,y:150});
+  for(const x of [850,750,650,550]){owner.webContents.sendInputEvent({type:'mouseMove',x,y:150});await wait(30);}
+  owner.webContents.sendInputEvent({type:'mouseUp',button:'left',clickCount:1,x:550,y:150});await wait(80);
+  const expectedWidth=await run('Math.round(document.querySelector("[data-section=host-browser-panel]").getBoundingClientRect().width)');
+  assert.equal(root.getBounds().width,expectedWidth,'drag-driven viewport width reaches the native browser');
+  assert.ok(expectedWidth<600,'the pointer drag actually resized the fixture');
+  await run('document.getElementById("moving-browser-fixture").style.width="";document.getElementById("browser-drag-fixture").remove()');await wait(100);
+
+  await run('document.documentElement.style.colorScheme="light";document.documentElement.style.setProperty("--background","40 70% 90%")');
+  await until(()=>manager.getPanelState(event,browserId).theme,'light','theme reaches native browser without a frame poll');
+  await run('document.documentElement.style.colorScheme="dark";document.documentElement.style.setProperty("--background","210 25% 18%")');
+  await until(()=>manager.getPanelState(event,browserId).theme,'dark','theme restores');
+  await run(`document.body.insertAdjacentHTML('beforeend','<div id="modal-layout-fixture" role="dialog" aria-modal="true" style="position:fixed;left:0;top:0;width:1px;height:1px"></div>')`);
+  await until(()=>owner.contentView.children.includes(root),false,'modal beside the viewport still covers native content');
+  await run('document.getElementById("modal-layout-fixture").remove()');
+  await until(()=>owner.contentView.children.includes(root),true,'closing modal restores native content');
+  await run(`document.body.insertAdjacentHTML('beforeend','<div id="lock-layout-fixture" data-app-lock-overlay></div>')`);
+  await until(()=>owner.contentView.children.includes(root),false,'app lock hides native content');
+  await run('document.getElementById("lock-layout-fixture").remove()');
+  await until(()=>owner.contentView.children.includes(root),true,'unlock restores native content');
+  assert.equal(await page.executeJavaScript("document.getElementById('draft').value"),'Unsaved browser input');
+
   for (let index = 0; index < 2; index++) {
     app.focus({ steal: true });
     owner.focus(); owner.webContents.focus();
@@ -110,7 +182,7 @@ async function main() {
     assert.equal(owner.contentView.children.includes(root), false, 'the split menu is above the native content');
     await click(`#choice-${index}-0`);
     await until(() => run(`document.getElementById('choice-${index}-0').dataset.chosen`), 'true', 'split menu choices are clickable');
-    owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+    await pressEscape();
     owner.webContents.sendInputEvent({ type: 'mouseMove', x: 980, y: 740 });
     await until(() => owner.contentView.children.includes(root), true, 'closing menu restores live content');
     assert.equal(await page.executeJavaScript("document.getElementById('draft').value"), 'Unsaved browser input');
@@ -204,7 +276,7 @@ async function main() {
   await until(() => owner.contentView.children.includes(root), true, 'bookmark navigation attaches the website again');
   await click('[aria-label="下载"]');
   await until(() => run('document.body.textContent.includes("暂无下载")'), true, 'downloads use the app popover');
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   fs.writeFileSync(path.join(downloadsPath, 'report.txt'), 'Keep the existing file');
   const activePage = root.children[0].webContents;
   await activePage.executeJavaScript("document.getElementById('download').click()");
@@ -218,15 +290,15 @@ async function main() {
   await until(() => fs.existsSync(savedCopy), true, 'Save as writes a separate copy');
   assert.equal(fs.readFileSync(savedCopy, 'utf8'), 'Netcatty automatic download\n');
   assert.equal(fs.existsSync(path.join(downloadsPath, 'report (1).txt')), true, 'Save as retains the original downloaded file');
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   await click('[title="在文件夹中显示"]');
   assert.deepEqual(shellActions.at(-1), ['reveal', path.join(downloadsPath, 'report (1).txt')]);
   await click('[aria-label="打开下载文件夹"]');
   assert.deepEqual(shellActions.at(-1), ['open', downloadsPath]);
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   await activePage.executeJavaScript("document.getElementById('download').click()");
   await until(() => run('document.body.textContent.includes("report (2).txt") && document.querySelectorAll("[data-download-id]").length === 2'), true, 'a second download also gets a new name and reopens the list');
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   activePage.downloadURL(`${url}slow.bin`);
   await until(() => run('!!document.querySelector("[aria-label=取消下载]") && document.body.textContent.includes("正在下载")'), true, 'progress is visible while the server is still sending the file');
   await until(() => !owner.contentView.children.includes(root), true, 'the progress popover has acquired the webpage surface');
@@ -237,7 +309,7 @@ async function main() {
   await click('[aria-label="下载"]');
   await click('[aria-label="取消下载"]');
   await until(() => run('document.body.textContent.includes("已取消")'), true, 'download can be cancelled from the list');
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   await activePage.executeJavaScript("(() => { const a=document.createElement('a');a.href='/inline.pdf';document.body.append(a);a.click();a.remove(); })()");
   await until(() => run('document.body.textContent.includes("慢速报告.pdf") && !!document.querySelector("[aria-label=取消下载]") && document.body.textContent.includes("正在下载")'), true, 'inline PDF navigation opens progress before the response finishes');
   assert.equal(pendingPdf.writableEnded, false, 'the server has not sent the rest of the PDF');
@@ -246,7 +318,7 @@ async function main() {
   await capture(pdfProgressScreenshot);
   await click('[aria-label="取消下载"]');
   await until(() => pendingPdf.destroyed, true, 'cancelling an inline PDF stops the network transfer');
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   pendingPdf = undefined;
   await input('[aria-label="输入网址"]', `${url}inline.pdf`);
   await run('document.querySelector("[aria-label=输入网址]").form.requestSubmit()');
@@ -258,11 +330,19 @@ async function main() {
   assert.equal(await run('document.body.textContent.includes("ERR_FAILED")'), false, 'address-bar downloads do not show a false page error');
   const downloadScreenshot=path.join(userData,'automatic-downloads.png');
   await capture(downloadScreenshot);
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  // Close the list through its own trigger before testing independent
+  // navigation focus. A prior Escape may leave the baseline list open.
+  await click('[aria-label="下载"]');
+  await until(() => run('!!document.querySelector("[data-radix-popper-content-wrapper] > [role=dialog]")'), false, 'download list is closed before starting navigation');
   await input('[aria-label="输入网址"]', `${url}slow-page`);
   await run('document.querySelector("[aria-label=输入网址]").form.requestSubmit()');
   await until(() => !!pendingNavigation, true, 'slow navigation is waiting for its response to finish');
-  await click('[aria-label="新标签页"]');
+  assert.equal(activePage.isLoading(), true, 'the response remains unfinished while switching tabs');
+  // Exercise the native page shortcut while its response remains unfinished.
+  // The new-tab button is covered above with the same real mouse input helper.
+  activePage.focus();
+  activePage.sendInputEvent({ type: 'keyDown', keyCode: 'T', modifiers: [process.platform === 'darwin' ? 'meta' : 'control'] });
+  activePage.sendInputEvent({ type: 'keyUp', keyCode: 'T', modifiers: [process.platform === 'darwin' ? 'meta' : 'control'] });
   await until(() => run('document.activeElement.getAttribute("aria-label")'), '输入网址', 'new tab receives input focus while the previous page is loading');
   await input('[aria-label="输入网址"]', 'keep my address draft');
   pendingNavigation.end();
@@ -289,7 +369,7 @@ async function main() {
   const screenshot = path.join(userData, 'unified-browser.png');
   fs.writeFileSync(screenshot, (await owner.webContents.capturePage()).toPNG());
   assert.deepEqual(errors, [], 'no renderer errors');
-  console.log(JSON.stringify({ ok: true, rendererChrome: true, hoverKeepsPageLive: true, splitMenusClickable: true, tabs: true, addressAndHistory: true, shortcuts: true, bookmarks: true, iconUpload: true, imageResize: true, imageReplaceAndRemove: true, editPersistence: true, downloads: true, automaticDownloads: true, duplicateNames: true, saveAs: true, downloadProgressAndCancel: true, inlinePdfProgressAndCancel: true, hiddenRestore: true, narrowLayout: true, locales: 5, screenshot, editorScreenshot, editorTextScreenshot, downloadScreenshot, pdfProgressScreenshot }));
+  console.log(JSON.stringify({ ok: true, rendererChrome: true, idleLayout: true, animatedLayout: true, dragLayout: true, themeLayout: true, modalAndLockLayout: true, hoverKeepsPageLive: true, splitMenusClickable: true, tabs: true, addressAndHistory: true, shortcuts: true, bookmarks: true, iconUpload: true, imageResize: true, imageReplaceAndRemove: true, editPersistence: true, downloads: true, automaticDownloads: true, duplicateNames: true, saveAs: true, downloadProgressAndCancel: true, inlinePdfProgressAndCancel: true, hiddenRestore: true, narrowLayout: true, locales: 5, screenshot, editorScreenshot, editorTextScreenshot, downloadScreenshot, pdfProgressScreenshot }));
 }
 app.whenReady().then(main).catch(async (error) => { console.error(error); if (owner && !owner.isDestroyed()) { const screenshot=path.join(userData,'failure.png'); fs.writeFileSync(screenshot,(await owner.webContents.capturePage()).toPNG()); console.error(screenshot); } process.exitCode = 1; }).finally(async () => {
   clearTimeout(watchdog);