[eric] browser: Chrome-style suspend capsules (sessionStorage+scroll survive), last-visible-frame snapshots, 20s working grace

This commit is contained in:
ciregenz
2026-07-07 22:52:28 -07:00
parent f7b4e91dd2
commit 161c65cdcd
6 changed files with 168 additions and 5 deletions
@@ -51,6 +51,7 @@ import {
type BrowserWebview,
} from '@/shared/browserRegistry';
import { setLastInteractedBrowser } from '@/shared/browserFocus';
import { registerCapsuleForRestore } from '@/shared/browserStateCapsule';
import BrowserFindBar from './BrowserFindBar';
import { useBrowserActivity } from '@/shared/useBrowserActivity';
import { getActionLabel } from '@/shared/browserCommandHandler';
@@ -313,6 +314,8 @@ const BrowserCard: React.FC<Props> = ({
const doLoad = () => {
// Reaching dom-ready proves the webview survived Chromium's commit phase (the historical Windows mount segfault). Clear the crash-safety marker.
if (isWindows) markWindowsWebviewSurvived();
// Registered BEFORE loadURL so the guest preload can sync-take it at document-start: a resumed tab gets its sessionStorage back Chrome-style instead of a logged-out reload. No-op when no capsule exists.
registerCapsuleForRestore(wv, tabId);
wv.loadURL(targetUrl).catch(() => {});
try {
(wv as any).setVisualZoomLevelLimits?.(1, 1);
@@ -7,8 +7,9 @@ import {
type BrowserCardPosition,
} from '@/shared/state/dashboardLayoutSlice';
import { getWebview } from '@/shared/browserRegistry';
import { getActivity } from '@/shared/browserCommandHandler';
import { getActivity, isAnyBrowserBusy } from '@/shared/browserCommandHandler';
import { isKeepAliveBrowser } from '@/shared/browserFocus';
import { captureTabCapsule } from '@/shared/browserStateCapsule';
const isElectron = typeof navigator !== 'undefined' && navigator.userAgent.includes('Electron');
@@ -39,8 +40,21 @@ function cardIntersectsViewport(card: BrowserCardPosition, vp: Viewport, marginP
return card.x < vx + vw && card.x + card.width > vx && card.y < vy + vh && card.y + card.height > vy;
}
function sessionIsWorking(s: { status?: string } | undefined): boolean {
return !!s && (s.status === 'running' || s.status === 'waiting_approval');
// Grace after terminal so an agent whose status blips completed->running between back-to-back turns can't lose its browser in the gap.
const WORKING_GRACE_MS = 20_000;
const lastWorkingAt = new Map<string, number>();
function sessionIsWorking(s: { id?: string; status?: string } | undefined): boolean {
if (!s) return false;
if (s.status === 'running' || s.status === 'waiting_approval') {
if (s.id) lastWorkingAt.set(s.id, Date.now());
return true;
}
const t = s.id ? lastWorkingAt.get(s.id) : undefined;
if (lastWorkingAt.size > 300) {
for (const [k, v] of lastWorkingAt) if (Date.now() - v > WORKING_GRACE_MS) lastWorkingAt.delete(k);
}
return t !== undefined && Date.now() - t < WORKING_GRACE_MS;
}
function agentNeedsLive(browserId: string, card: BrowserCardPosition): boolean {
@@ -126,12 +140,13 @@ export function useWebviewSuspend(
const timer = setTimeout(async () => {
const isSuspended = (id: string) => !!store.getState().dashboardLayout.suspendedBrowserCards[id];
await refreshVisibleFrames(browserCards, isSuspended, vpRef.current);
for (const [id, card] of Object.entries(browserCards)) {
if (isSuspended(id)) continue;
if (cardIntersectsViewport(card, vpRef.current, SUSPEND_MARGIN_PX)) continue;
if (mustStayLive(id, card)) continue;
// An empty dataUrl still suspends (placeholder renders): a card whose capture hangs/fails must not keep its renderer alive forever.
const dataUrl = await captureCard(id, card);
const dataUrl = await captureForSuspend(id, card);
// The capture await yielded; conditions may have changed under us.
if (cardIntersectsViewport(card, vpRef.current, SUSPEND_MARGIN_PX) || mustStayLive(id, card)) continue;
dispatch(suspendBrowserCard({ browserId: id, dataUrl }));
@@ -144,7 +159,7 @@ export function useWebviewSuspend(
.sort((a, b) => distFromCenter(b[1], vpRef.current) - distFromCenter(a[1], vpRef.current));
for (const [id, card] of candidates) {
if (countLive() <= MAX_LIVE_WEBVIEWS) break;
const dataUrl = await captureCard(id, card);
const dataUrl = await captureForSuspend(id, card);
if (mustStayLive(id, card)) continue;
dispatch(suspendBrowserCard({ browserId: id, dataUrl }));
}
@@ -166,6 +181,49 @@ function distFromCenter(card: BrowserCardPosition, vp: Viewport): number {
// capturePage on an already-off-screen webview can HANG forever (Electron 42/Viz stops producing frames for unpainted guests), and one hung await used to wedge the whole suspend pass, silently disabling suspension for every card. Bound it hard.
const CAPTURE_TIMEOUT_MS = 1500;
// Last frame grabbed while each card was still VISIBLE: off-screen webviews can't produce frames, so this cache is what makes suspended cards show a real screenshot instead of the bare title placeholder.
const lastFrames = new Map<string, { dataUrl: string; at: number }>();
const FRAME_TTL_MS = 45_000;
const FRAME_CACHE_CAP = 30;
function rememberFrame(id: string, dataUrl: string): void {
lastFrames.set(id, { dataUrl, at: Date.now() });
if (lastFrames.size > FRAME_CACHE_CAP) {
const oldest = [...lastFrames.entries()].sort((a, b) => a[1].at - b[1].at)[0];
if (oldest) lastFrames.delete(oldest[0]);
}
}
async function refreshVisibleFrames(
cards: Record<string, BrowserCardPosition>,
isSuspended: (id: string) => boolean,
vp: Viewport,
): Promise<void> {
// Capturing while an agent drives a webview is the SharedImage-mailbox crash class; skip the whole pass.
if (isAnyBrowserBusy()) return;
for (const [id, card] of Object.entries(cards)) {
if (isSuspended(id)) continue;
if (!cardIntersectsViewport(card, vp, 0)) continue;
const prev = lastFrames.get(id);
if (prev && Date.now() - prev.at < FRAME_TTL_MS) continue;
const dataUrl = await captureCard(id, card);
if (dataUrl) rememberFrame(id, dataUrl);
}
}
async function captureForSuspend(id: string, card: BrowserCardPosition): Promise<string> {
// Chrome-style state capsules first (sessionStorage + scroll per tab), so resume restores logins instead of wiping them; JS still runs off-screen even when frames don't.
for (const tab of card.tabs ?? []) {
await captureTabCapsule(getWebview(id, tab.id), tab.id);
}
const live = await captureCard(id, card);
if (live) {
rememberFrame(id, live);
return live;
}
return lastFrames.get(id)?.dataUrl ?? '';
}
async function captureCard(id: string, card: BrowserCardPosition): Promise<string> {
const wv = getWebview(id, card.activeTabId);
if (!wv) return '';