@terrariumlabs/core 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrariumlabs/core",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "A complete EVM chain inside the page, presented to your dapp as a wallet. revm in WebAssembly, real receipts, byte-identical to Anvil.",
   "type": "module",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "@ethereumjs/util": "^10.1.3",
     "@ethereumjs/mpt": "^10.1.3",
     "@ethereumjs/rlp": "^10.0.0",
-    "@terrariumlabs/evm": "^0.5.0"
+    "@terrariumlabs/evm": "^0.7.0"
   },
   "peerDependencies": {
     "viem": "^2.0.0",

package/src/devbar.ts

@@ -1,38 +1,55 @@
 // devbar.ts — the dev overlay. Plain DOM, own styles, talks to the chain only through provider.request(), so it works
-// on top of any dapp (React or not) and never touches the dapp's code. Three parts: the bar (grouped controls: scenario,
-// chain, wallet, the scenario's own buttons, explorer / reset / hide), the transaction explorer (a panel above it listing
-// every transaction with its receipt, decoded call, events and revert reason, fed by `terrarium_transactions`), and the
-// scenario selector (`terrarium_scenarios` / `terrarium_selectScenario`) when the Worker runs a list of scenarios.
+// on top of any dapp (React or not) and never touches the dapp's code. Parts: the bar (grouped controls: scenario, chain,
+// wallet, the scenario's own buttons, explorer / reset / hide), the transaction explorer (a panel above it listing every
+// transaction with its receipt, decoded call, events and revert reason, fed by `terrarium_transactions`), the scenario
+// selector (`terrarium_scenarios` / `terrarium_selectScenario`) when the Worker runs a list, toasts for every action, and
+// two keyboard shortcuts (Alt+Shift+T: the bar, Alt+Shift+X: the explorer).
 type Provider = { request(a: { method: string; params?: unknown[] }): Promise<any> };
 
 const HIDDEN_KEY = 'terrarium:devbar-hidden';
 const CSS = `
 #terrarium-devbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; padding: 8px 16px; background: #14231b; color: #dfe9e3; font: 12.5px/1.4 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; box-shadow: 0 -1px 0 rgba(255,255,255,0.08); }
-#terrarium-devbar[hidden], #terrarium-explorer[hidden], #terrarium-devbar-show[hidden] { display: none; }
+#terrarium-devbar[hidden], #terrarium-explorer[hidden], #terrarium-devbar-show[hidden], #terrarium-devbar-menu[hidden] { display: none; }
+#terrarium-devbar *:focus-visible, #terrarium-explorer *:focus-visible, #terrarium-devbar-show:focus-visible { outline: 2px solid #e8c547; outline-offset: 1px; }
 #terrarium-devbar .brand { display: flex; align-items: center; gap: 8px; }
 #terrarium-devbar .tag { background: #e8c547; color: #14231b; font-weight: 700; padding: 2px 8px; border-radius: 6px; letter-spacing: 0.01em; }
 #terrarium-devbar .name { color: #fff; font-weight: 600; }
 #terrarium-devbar select { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; padding: 5px 8px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; max-width: 260px; }
-#terrarium-devbar .status { color: rgba(223,233,227,0.72); white-space: nowrap; }
+#terrarium-devbar .status { display: flex; align-items: center; gap: 10px; color: rgba(223,233,227,0.72); white-space: nowrap; }
 #terrarium-devbar .status b { color: #fff; font-weight: 600; }
 #terrarium-devbar .status .warn { color: #e8c547; }
+#terrarium-devbar .status .shift { color: #e8c547; font-weight: 600; }
 #terrarium-devbar .spacer { flex: 1; min-width: 8px; }
-#terrarium-devbar .group { display: flex; align-items: center; gap: 4px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.12); }
+#terrarium-devbar .group { display: flex; align-items: center; gap: 4px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.12); position: relative; }
 #terrarium-devbar .group[hidden] { display: none; }
 #terrarium-devbar .glabel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(223,233,227,0.45); margin-right: 4px; user-select: none; }
 #terrarium-devbar .glabel:empty { display: none; }
-#terrarium-devbar button { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: #fff; padding: 5px 9px; border-radius: 8px; font: inherit; cursor: pointer; white-space: nowrap; }
+@media (max-width: 1280px) { #terrarium-devbar .glabel { display: none; } #terrarium-devbar { gap: 6px 10px; padding: 6px 12px; } }
+#terrarium-devbar button, #terrarium-devbar-menu button { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: #fff; padding: 5px 9px; border-radius: 8px; font: inherit; cursor: pointer; white-space: nowrap; }
 #terrarium-devbar button:hover { background: rgba(255,255,255,0.15); }
 #terrarium-devbar button.on { background: #1f6f5c; border-color: #2b8a73; }
 #terrarium-devbar button.armed { background: #7a3b2a; border-color: #b3452c; }
 #terrarium-devbar button.danger { border-color: rgba(255,140,110,0.4); color: #ffb5a0; }
+#terrarium-devbar button.danger.armed { background: #b3452c; border-color: #ff8c6e; color: #fff; }
 #terrarium-devbar button.quiet { background: transparent; border-color: transparent; color: rgba(223,233,227,0.6); }
 #terrarium-devbar button.quiet:hover { color: #fff; background: rgba(255,255,255,0.08); }
+#terrarium-devbar button .badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,0.14); font-size: 11px; line-height: 16px; }
+#terrarium-devbar button .badge.bad { background: #b3452c; }
+#terrarium-devbar-menu { position: fixed; z-index: 2147483001; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: #1b2e24; color: #dfe9e3; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.4); font: 12.5px/1.4 ui-sans-serif, system-ui, sans-serif; }
+#terrarium-devbar-menu button { text-align: left; background: transparent; border-color: transparent; }
+#terrarium-devbar-menu button:hover { background: rgba(255,255,255,0.1); }
 #terrarium-devbar-show { position: fixed; right: 12px; bottom: 12px; z-index: 2147483000; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: #14231b; color: #e8c547; font: 16px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
+#terrarium-toast { position: fixed; right: 16px; z-index: 2147483001; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; font: 12.5px/1.4 ui-sans-serif, system-ui, sans-serif; }
+#terrarium-toast div { background: #1b2e24; color: #dfe9e3; border: 1px solid rgba(255,255,255,0.14); border-left: 3px solid #e8c547; border-radius: 8px; padding: 6px 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); opacity: 1; transition: opacity 0.3s; max-width: 420px; }
+#terrarium-toast div.bad { border-left-color: #ff8c6e; }
+#terrarium-toast div.fade { opacity: 0; }
 #terrarium-explorer { position: fixed; left: 0; right: 0; z-index: 2147483000; max-height: 60vh; overflow: auto; background: #0f1a14; color: #dfe9e3; border-top: 1px solid rgba(255,255,255,0.12); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
-#terrarium-explorer .head { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font: 13px ui-sans-serif, system-ui, sans-serif; color: rgba(223,233,227,0.8); position: sticky; top: 0; background: #0f1a14; border-bottom: 1px solid rgba(255,255,255,0.08); }
+#terrarium-explorer.tall { max-height: 90vh; }
+#terrarium-explorer .head { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font: 13px ui-sans-serif, system-ui, sans-serif; color: rgba(223,233,227,0.8); position: sticky; top: 0; background: #0f1a14; border-bottom: 1px solid rgba(255,255,255,0.08); }
 #terrarium-explorer .head b { color: #fff; }
-#terrarium-explorer .head select { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; padding: 3px 6px; border-radius: 6px; font: inherit; }
+#terrarium-explorer .head select, #terrarium-explorer .head input, #terrarium-explorer .head button { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; padding: 3px 8px; border-radius: 6px; font: inherit; }
+#terrarium-explorer .head input { width: 220px; } #terrarium-explorer .head input::placeholder { color: rgba(223,233,227,0.45); }
+#terrarium-explorer .head button { cursor: pointer; } #terrarium-explorer .head button:hover { background: rgba(255,255,255,0.15); }
 #terrarium-explorer table { width: 100%; border-collapse: collapse; }
 #terrarium-explorer th { text-align: left; font-weight: 600; color: rgba(223,233,227,0.6); padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; }
 #terrarium-explorer th:first-child, #terrarium-explorer td:first-child { padding-left: 16px; }
@@ -42,6 +59,7 @@ const CSS = `
 #terrarium-explorer tr.tx.open td { background: rgba(255,255,255,0.06); border-bottom-color: transparent; }
 #terrarium-explorer .ok { color: #7fd3a8; } #terrarium-explorer .bad { color: #ff9c80; } #terrarium-explorer .wait { color: #e8c547; }
 #terrarium-explorer .hash, #terrarium-explorer .addr { color: #9ecbff; }
+#terrarium-explorer .hash { cursor: copy; } #terrarium-explorer .hash:hover { text-decoration: underline dotted; }
 #terrarium-explorer .name { color: #e8c547; }
 #terrarium-explorer .dim { color: rgba(223,233,227,0.55); }
 #terrarium-explorer .detail td { padding: 10px 16px 14px 40px; white-space: normal; background: rgba(0,0,0,0.25); }
@@ -66,6 +84,8 @@ export const formatEth = (hex: string | null | undefined) => {
 const formatGwei = (hex: string | null | undefined) => { if (!hex) return '0'; const wei = BigInt(hex), whole = wei / 10n ** 9n, frac = (wei % 10n ** 9n).toString().padStart(9, '0').slice(0, 3).replace(/0+$/, ''); return frac ? `${whole}.${frac}` : whole.toString(); };
 const fmtArgs = (args: any): string => Array.isArray(args) ? args.map(fmtArgs).join(', ') : args && typeof args === 'object' ? Object.entries(args).map(([k, v]) => `${k}: ${fmtArgs(v)}`).join(', ') : String(args);
 const time = (hex: string | null) => (hex ? new Date(Number(BigInt(hex)) * 1000).toLocaleTimeString() : '');
+/** a duration in seconds as "+1h 30m" / "-2d" */
+const span = (s: number) => { const a = Math.abs(s), sign = s < 0 ? '-' : '+'; if (a < 3600) return `${sign}${Math.round(a / 60)}m`; if (a < 86400) { const h = Math.floor(a / 3600), m = Math.round((a % 3600) / 60); return `${sign}${h}h${m ? ` ${m}m` : ''}`; } const d = Math.floor(a / 86400), h = Math.round((a % 86400) / 3600); return `${sign}${d}d${h ? ` ${h}h` : ''}`; };
 
 export interface DevBarOptions {
   /** start collapsed to the leaf (default false). A Hide/Show click is remembered in localStorage and overrides this */
@@ -76,69 +96,90 @@ export function mountDevBar(provider: Provider, opts: DevBarOptions = {}) {
   if (document.getElementById('terrarium-devbar')) return;
   const rpc = (method: string, params: unknown[] = []) => provider.request({ method, params });
   const bar = document.createElement('footer');
-  bar.id = 'terrarium-devbar'; bar.dataset.testid = 'devbar';
+  bar.id = 'terrarium-devbar'; bar.dataset.testid = 'devbar'; bar.setAttribute('role', 'toolbar'); bar.setAttribute('aria-label', 'Terrarium dev bar');
   const style = document.createElement('style'); style.textContent = CSS;
   bar.append(style);
   const el = (html: string) => { const t = document.createElement('template'); t.innerHTML = html.trim(); return t.content.firstElementChild as HTMLElement; };
-  const btn = (label: string, testid: string, title: string, onClick: () => Promise<unknown> | void) => { const b = el(`<button data-testid="${testid}" title="${esc(title)}">${label}</button>`); b.onclick = () => Promise.resolve(onClick()).catch((e) => console.warn('[terrarium]', e)); return b; };
-  const group = (label: string, testid: string, ...children: HTMLElement[]) => { const g = el(`<div class="group" data-testid="${testid}"><span class="glabel">${label}</span></div>`); g.append(...children); return g; };
+  const btn = (label: string, testid: string, title: string, onClick: () => Promise<unknown> | void) => { const b = el(`<button data-testid="${testid}" title="${esc(title)}" aria-label="${esc(title)}">${label}</button>`); b.onclick = () => Promise.resolve(onClick()).catch((e) => { console.warn('[terrarium]', e); toast(e?.message ?? String(e), true); }); return b; };
+  const group = (label: string, testid: string, ...children: HTMLElement[]) => { const g = el(`<div class="group" data-testid="${testid}" role="group" aria-label="${esc(label || 'tools')}"><span class="glabel">${label}</span></div>`); g.append(...children); return g; };
+
+  // ---- toasts: every action says what it did --------------------------------------------------------------------------------
+  const toasts = el('<div id="terrarium-toast" data-testid="toast" aria-live="polite"></div>');
+  const toast = (msg: string, bad = false) => {
+    const t = el(`<div${bad ? ' class="bad"' : ''}>${esc(msg)}</div>`); toasts.append(t);
+    setTimeout(() => { t.classList.add('fade'); setTimeout(() => t.remove(), 350); }, bad ? 5000 : 2200);
+  };
 
   // ---- brand + scenario selector + status ---------------------------------------------------------------------------
   const brand = el(`<span class="brand"><span class="tag">Terrarium</span><span class="name" data-testid="scenario-name" hidden></span></span>`);
-  const scenarioSelect = el(`<select data-testid="scenario" title="Which scenario the chain runs: switching stores the choice and reloads the page; each scenario keeps its own chain" hidden></select>`) as HTMLSelectElement;
+  const scenarioSelect = el(`<select data-testid="scenario" aria-label="Scenario" title="Which scenario the chain runs: switching stores the choice and reloads the page; each scenario keeps its own chain" hidden></select>`) as HTMLSelectElement;
   brand.append(scenarioSelect);
   let scenariosKey = '';
-  scenarioSelect.onchange = () => rpc('terrarium_selectScenario', [scenarioSelect.value]).catch((e) => console.warn('[terrarium]', e));
-  const status = el(`<span class="status">block <b data-testid="block" data-f="block">…</b> · chain <span data-f="chain">…</span><span data-f="engine"></span></span>`);
+  scenarioSelect.onchange = () => { toast(`Switching to “${scenarioSelect.value}”…`); rpc('terrarium_selectScenario', [scenarioSelect.value]).catch((e) => { console.warn('[terrarium]', e); toast(e?.message ?? String(e), true); }); };
+  const status = el(`<span class="status"><span>block <b data-testid="block" data-f="block">…</b></span><span>chain <span data-f="chain">…</span></span><span data-testid="clock" data-f="clock" title="The chain's clock: the timestamp the next block gets. Yellow when it has been shifted away from wall time (deadlines and oracles see this clock, not yours)"></span><span data-f="engine"></span></span>`);
 
   // ---- chain ------------------------------------------------------------------------------------------------------------
-  let mining: 'auto' | 'interval' = 'auto', snap: string | null = null;
+  let mining: 'auto' | 'interval' = 'auto', snap: { id: string; block: number } | null = null, head = 0;
   const bMining = btn('Blocks: instant', 'mining', 'Auto: a block per transaction. Interval: a block every 3s, so you can watch pending states', async () => {
     mining = mining === 'auto' ? 'interval' : 'auto';
     await (mining === 'auto' ? rpc('evm_setAutomine', [true]) : rpc('evm_setIntervalMining', [3000]));
     bMining.textContent = mining === 'auto' ? 'Blocks: instant' : 'Blocks: every 3s'; bMining.classList.toggle('on', mining === 'interval');
+    toast(mining === 'auto' ? 'A block per transaction again' : 'A block every 3 seconds: transactions stay pending in between');
   });
   const bSnap = btn('Snapshot', 'snapshot', 'Snapshot the chain; revert brings blocks, receipts, journal and the UI history back', async () => {
-    if (snap) { await rpc('evm_revert', [snap]); snap = null; bSnap.textContent = 'Snapshot'; bSnap.classList.remove('on'); }
-    else { snap = await rpc('evm_snapshot'); bSnap.textContent = 'Revert to snapshot'; bSnap.classList.add('on'); }
+    if (snap) { await rpc('evm_revert', [snap.id]); toast(`Reverted to block ${snap.block}`); snap = null; bSnap.textContent = 'Snapshot'; bSnap.classList.remove('on'); }
+    else { const id = await rpc('evm_snapshot'); snap = { id, block: head }; bSnap.textContent = `Revert to block ${head}`; bSnap.classList.add('on'); toast(`Snapshot at block ${head}: the next click reverts to it`); }
+  });
+  const timeMenu = el('<div id="terrarium-devbar-menu" data-testid="time-menu" role="menu" aria-label="Move the chain clock" hidden></div>');   // on the body: a menu inside the bar was clipped by its layout
+  const shift = (seconds: number, label: string, testid: string) => btn(label, testid, `Move the chain clock forward ${label.slice(1)} and mine a block`, async () => { timeMenu.hidden = true; await rpc('evm_increaseTime', [seconds]); await rpc('evm_mine'); toast(`Chain clock moved ${label}; a block sealed at the new time`); });
+  timeMenu.append(shift(60, '+1 minute', 'plus-minute'), shift(3600, '+1 hour', 'plus-hour'), shift(86400, '+1 day', 'plus-day'), shift(7 * 86400, '+1 week', 'plus-week'));
+  const bTime = btn('Time ▾', 'time', 'Move the chain clock forward: deadlines expire, oracles go stale, interest accrues', () => {
+    timeMenu.hidden = !timeMenu.hidden;
+    if (!timeMenu.hidden) { const r = bTime.getBoundingClientRect(); timeMenu.style.left = `${r.left}px`; timeMenu.style.bottom = `${window.innerHeight - r.top + 6}px`; }
   });
+  bTime.setAttribute('aria-haspopup', 'menu');
   const gChain = group('chain', 'group-chain',
-    btn('Mine a block', 'mine', 'Mine one empty block', () => rpc('evm_mine')),
-    btn('+1 hour', 'plus-hour', 'Move the chain clock forward one hour', async () => { await rpc('evm_increaseTime', [3600]); await rpc('evm_mine'); }),
-    bMining, bSnap);
+    btn('Mine a block', 'mine', 'Mine one empty block', async () => { await rpc('evm_mine'); toast(`Mined block ${head + 1}`); }),
+    bTime, bMining, bSnap);
+  document.addEventListener('click', (e) => { if (!timeMenu.hidden && !bTime.contains(e.target as Node) && !timeMenu.contains(e.target as Node)) timeMenu.hidden = true; });
 
   // ---- wallet -----------------------------------------------------------------------------------------------------------
-  const bReject = btn('Reject next tx', 'reject-next', 'The wallet rejects the next signature request (EIP-1193 error 4001), like a user hitting Cancel', () => rpc('terrarium_setWallet', [{ rejectNext: 1 }]));
-  const bLatency = btn('Wallet: instant', 'wallet-latency', 'Make the wallet take 2 seconds to answer, like a real one', async () => { const w = await rpc('terrarium_getWallet'); await rpc('terrarium_setWallet', [{ latencyMs: w.latencyMs ? 0 : 2000 }]); });
-  const bLag = btn('Receipts: instant', 'receipt-lag', 'Receipts appear 3 seconds after the block, like a node that has not caught up', async () => { const w = await rpc('terrarium_getWallet'); await rpc('terrarium_setWallet', [{ receiptLagMs: w.receiptLagMs ? 0 : 3000 }]); });
+  const bReject = btn('Reject next tx', 'reject-next', 'The wallet rejects the next signature request (EIP-1193 error 4001), like a user hitting Cancel', async () => { await rpc('terrarium_setWallet', [{ rejectNext: 1 }]); toast('The wallet will reject the next signature request'); });
+  const bLatency = btn('Wallet: instant', 'wallet-latency', 'Make the wallet take 2 seconds to answer, like a real one', async () => { const w = await rpc('terrarium_getWallet'); await rpc('terrarium_setWallet', [{ latencyMs: w.latencyMs ? 0 : 2000 }]); toast(w.latencyMs ? 'The wallet answers instantly again' : 'The wallet now takes 2 seconds to answer'); });
+  const bLag = btn('Receipts: instant', 'receipt-lag', 'Receipts appear 3 seconds after the block, like a node that has not caught up', async () => { const w = await rpc('terrarium_getWallet'); await rpc('terrarium_setWallet', [{ receiptLagMs: w.receiptLagMs ? 0 : 3000 }]); toast(w.receiptLagMs ? 'Receipts are immediate again' : 'Receipts now arrive 3 seconds after the block'); });
   const gWallet = group('wallet', 'group-wallet', bReject, bLatency, bLag);
 
   // ---- the scenario's own knobs: actors + controls ------------------------------------------------------------------------
-  const bActors = btn('Actors off', 'actors', 'Scripted actors: other users, keepers, arbitrageurs trading on their own', () => rpc('terrarium_actors'));
+  const bActors = btn('Actors off', 'actors', 'Scripted actors: other users, keepers, arbitrageurs trading on their own', async () => { const on = await rpc('terrarium_actors'); toast(on ? `${actorsLabel} on: other actors are trading now` : `${actorsLabel} off`); });
+  let actorsLabel = 'Actors';
   const controls = el('<span class="controls" style="display:contents"></span>'); let controlsKey = '';
   const gScenario = group('scenario', 'group-scenario', bActors, controls);
 
   // ---- the transaction explorer -----------------------------------------------------------------------------------------
-  const panel = el(`<section id="terrarium-explorer" data-testid="explorer" hidden></section>`);
+  const panel = el(`<section id="terrarium-explorer" data-testid="explorer" role="region" aria-label="Transactions" hidden></section>`);
   const open = new Set<string>();   // expanded rows, by hash, kept across refreshes
-  let lastRender = '', filter: 'all' | 'mine' | 'failed' = 'all', me: string | null = null;   // `me`: accounts[0] from terrarium_status
-  const bTxs = btn('Transactions', 'txs', 'Every transaction on this chain, like a block explorer: receipt, decoded call, events, revert reason', async () => {
-    panel.hidden = !panel.hidden; bTxs.classList.toggle('on', !panel.hidden); lastRender = '';
-    if (!panel.hidden) await refreshTxs();
-  });
-  const place = () => { panel.style.bottom = `${bar.offsetHeight}px`; };
+  let lastRender = '', lastTxKey = '', filter: 'all' | 'mine' | 'failed' = 'all', search = '', me: string | null = null;   // `me`: accounts[0] from terrarium_status; `lastTxKey`: the counts the open explorer last saw
+  const bTxs = btn('Transactions', 'txs', 'Every transaction on this chain, like a block explorer: receipt, decoded call, events, revert reason (Alt+Shift+X)', () => togglePanel());
+  const togglePanel = async (show: boolean = !!panel.hidden) => { panel.hidden = !show; bTxs.classList.toggle('on', show); lastRender = ''; if (show) { await refreshTxs(); panel.querySelector<HTMLInputElement>('[data-testid=tx-search]')?.focus(); } place(); };
+  const place = () => { panel.style.bottom = `${bar.offsetHeight}px`; toasts.style.bottom = `${bar.offsetHeight + (panel.hidden ? 0 : panel.offsetHeight) + 12}px`; };   // toasts sit above whatever is open
   const statusCell = (s: string) => s === 'success' ? '<span class="ok" title="success">✓</span>' : s === 'pending' ? '<span class="wait" title="pending">⏳</span>' : `<span class="bad" title="${s}">✗</span>`;
   const who = (labels: Record<string, string>, a: string | null) => a ? `<span class="addr" title="${a}">${esc(labels[a.toLowerCase()] ?? short(a))}</span>` : '<span class="dim">contract creation</span>';
+  const matches = (t: any, L: Record<string, string>) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    const hay = [t.hash, t.from, t.to, L[t.from?.toLowerCase()], L[t.to?.toLowerCase()], t.method?.name, t.method?.selector, t.revert?.name, t.status, ...(t.logs ?? []).flatMap((l: any) => [l.decoded?.name, L[l.address?.toLowerCase()], l.address])].filter(Boolean).join(' ').toLowerCase();
+    return hay.includes(q);
+  };
   const render = (data: { total: number; labels: Record<string, string>; transactions: any[] }) => {
-    const key = JSON.stringify([data.total, data.transactions.map((t) => [t.hash, t.status]), [...open], filter, me]);
+    const key = JSON.stringify([data.total, data.transactions.map((t) => [t.hash, t.status]), [...open], filter, search, me]);
     if (key === lastRender) return; lastRender = key;
     const L = data.labels ?? {};
-    const shown = data.transactions.filter((t) => filter === 'all' ? true : filter === 'failed' ? t.status !== 'success' && t.status !== 'pending' : !!me && t.from?.toLowerCase() === me.toLowerCase());
+    const shown = data.transactions.filter((t) => (filter === 'all' ? true : filter === 'failed' ? t.status !== 'success' && t.status !== 'pending' : !!me && t.from?.toLowerCase() === me.toLowerCase()) && matches(t, L));
     const rows = shown.map((t) => {
       const method = t.method ? (t.method.name ? `<span class="name">${esc(t.method.name)}</span>` : `<span class="dim">${esc(t.method.selector)}</span>`) : '<span class="dim">transfer</span>';
       const isOpen = open.has(t.hash);
       const detail = !isOpen ? '' : `<tr class="detail" data-testid="tx-detail"><td colspan="10"><dl>
-        <dt>hash</dt><dd class="hash">${esc(t.hash)}</dd>
+        <dt>hash</dt><dd class="hash" data-copy="${t.hash}" title="click to copy">${esc(t.hash)}</dd>
         <dt>status</dt><dd>${esc(t.status)}${t.status === 'reverted' || t.status === 'dropped' ? ` <span class="bad">· ${t.revert ? esc(t.revert.name) + '(' + esc(fmtArgs(t.revert.args)) + ')' : esc(t.error ?? '')}</span>` : ''}</dd>
         <dt>block</dt><dd>${t.receipt ? `${num(t.receipt.blockNumber)} · ${esc(time(t.timestamp))} · index ${num(t.receipt.transactionIndex)}` : 'pending'}</dd>
         <dt>from</dt><dd>${who(L, t.from)} <span class="dim">${esc(t.from)}</span></dd>
@@ -153,42 +194,65 @@ export function mountDevBar(provider: Provider, opts: DevBarOptions = {}) {
       </td></tr>`;
       return `<tr class="tx${isOpen ? ' open' : ''}" data-testid="tx-row" data-hash="${t.hash}" data-status="${t.status}">
         <td>${statusCell(t.status)}</td><td>${t.receipt ? num(t.receipt.blockNumber) : '<span class="dim">pending</span>'}</td><td class="dim">${esc(time(t.timestamp))}</td>
-        <td class="hash" title="${t.hash}">${short(t.hash)}</td><td>${method}</td><td>${who(L, t.from)}</td><td>${who(L, t.to)}</td>
+        <td class="hash" data-copy="${t.hash}" title="${t.hash} (click to copy)">${short(t.hash)}</td><td>${method}</td><td>${who(L, t.from)}</td><td>${who(L, t.to)}</td>
         <td>${formatEth(t.value)} ETH</td><td class="dim">${t.receipt ? num(t.receipt.gasUsed) : ''}</td><td class="dim">${t.logs?.length ? `${t.logs.length} event${t.logs.length === 1 ? '' : 's'}` : ''}</td></tr>${detail}`;
     }).join('');
-    panel.innerHTML = `<div class="head"><b>Transactions</b> <span>${data.total} on this chain, newest first${data.total > data.transactions.length ? ` (showing ${data.transactions.length})` : ''}${filter !== 'all' ? `, ${shown.length} ${filter === 'mine' ? 'from you' : 'failed'}` : ''}</span>
-      <select data-testid="tx-filter" title="Which transactions to list"><option value="all"${filter === 'all' ? ' selected' : ''}>all</option><option value="mine"${filter === 'mine' ? ' selected' : ''}>mine (account #0)</option><option value="failed"${filter === 'failed' ? ' selected' : ''}>failed</option></select>
-      <span class="spacer" style="flex:1"></span><span class="dim">click a row for the receipt, the decoded call and the events</span></div>`
-      + (rows ? `<table><thead><tr><th></th><th>block</th><th>time</th><th>hash</th><th>method</th><th>from</th><th>to</th><th>value</th><th>gas used</th><th>events</th></tr></thead><tbody>${rows}</tbody></table>` : `<div class="empty">${data.total ? 'Nothing matches this filter.' : 'No transactions yet. Do something in the dapp and it appears here.'}</div>`);
+    const headEl = panel.querySelector('.head');
+    const headHtml = `<b>Transactions</b> <span data-testid="explorer-count">${data.total} on this chain${data.total > data.transactions.length ? ` (showing ${data.transactions.length})` : ''}${filter !== 'all' || search ? `, ${shown.length} shown` : ''}</span>
+      <input data-testid="tx-search" type="search" placeholder="filter: hash, address, name, method, event…" aria-label="Filter transactions" value="${esc(search)}">
+      <select data-testid="tx-filter" aria-label="Which transactions" title="Which transactions to list"><option value="all"${filter === 'all' ? ' selected' : ''}>all</option><option value="mine"${filter === 'mine' ? ' selected' : ''}>mine (account #0)</option><option value="failed"${filter === 'failed' ? ' selected' : ''}>failed</option></select>
+      <span class="spacer" style="flex:1"></span><span class="dim">click a row for the receipt, the decoded call and the events · Esc closes</span>
+      <button data-testid="explorer-size" title="Taller / shorter panel">${panel.classList.contains('tall') ? '⇩ shorter' : '⇧ taller'}</button>`;
+    const body = rows ? `<table><thead><tr><th></th><th>block</th><th>time</th><th>hash</th><th>method</th><th>from</th><th>to</th><th>value</th><th>gas used</th><th>events</th></tr></thead><tbody>${rows}</tbody></table>` : `<div class="empty">${data.total ? 'Nothing matches.' : 'No transactions yet. Do something in the dapp and it appears here.'}</div>`;
+    if (headEl && document.activeElement === headEl.querySelector('[data-testid=tx-search]')) {
+      // keep the focused search box: update its neighbours only
+      headEl.querySelector('[data-testid=explorer-count]')!.textContent = `${data.total} on this chain${filter !== 'all' || search ? `, ${shown.length} shown` : ''}`;
+      panel.querySelector('table, .empty')?.remove(); panel.insertAdjacentHTML('beforeend', body);
+    } else panel.innerHTML = `<div class="head">${headHtml}</div>${body}`;
     place();
   };
   panel.addEventListener('change', (e) => { const sel = e.target as HTMLSelectElement; if (sel.dataset.testid === 'tx-filter') { filter = sel.value as typeof filter; lastRender = ''; refreshTxs(); } });
+  panel.addEventListener('input', (e) => { const inp = e.target as HTMLInputElement; if (inp.dataset.testid === 'tx-search') { search = inp.value.trim(); lastRender = ''; refreshTxs(); } });
   panel.addEventListener('click', (e) => {
-    const row = (e.target as HTMLElement).closest<HTMLElement>('tr.tx'); if (!row) return;
+    const target = e.target as HTMLElement;
+    const copy = target.closest<HTMLElement>('[data-copy]');
+    if (copy) { e.stopPropagation(); navigator.clipboard?.writeText(copy.dataset.copy!).then(() => toast(`Copied ${short(copy.dataset.copy!)}`), () => toast('Clipboard unavailable', true)); return; }
+    if (target.closest('[data-testid=explorer-size]')) { panel.classList.toggle('tall'); lastRender = ''; refreshTxs(); return; }
+    const row = target.closest<HTMLElement>('tr.tx'); if (!row) return;
     const h = row.dataset.hash!; open.has(h) ? open.delete(h) : open.add(h); lastRender = ''; refreshTxs();
   });
   const refreshTxs = async () => { const data = await rpc('terrarium_transactions', [{ limit: 200 }]).catch(() => null); if (data) render(data); };
 
-  // ---- reset, hide / show -------------------------------------------------------------------------------------------------
-  const bReset = btn('Reset', 'reset', 'Wipe this scenario\'s chain and boot it again from scratch', async () => { await rpc('terrarium_reset'); location.reload(); });
+  // ---- reset (two clicks), hide / show ------------------------------------------------------------------------------------
+  let resetArmed: ReturnType<typeof setTimeout> | null = null;
+  const bReset = btn('Reset', 'reset', 'Wipe this scenario\'s chain and boot it again from scratch (click twice)', async () => {
+    if (!resetArmed) { bReset.textContent = 'Really reset?'; bReset.classList.add('armed'); toast('Click Reset again within 3 seconds to wipe this scenario\'s chain'); resetArmed = setTimeout(() => { resetArmed = null; bReset.textContent = 'Reset'; bReset.classList.remove('armed'); }, 3000); return; }
+    clearTimeout(resetArmed); resetArmed = null; bReset.textContent = 'Resetting…';
+    await rpc('terrarium_reset'); location.reload();
+  });
   bReset.classList.add('danger');
-  const pill = el(`<button id="terrarium-devbar-show" data-testid="show" title="Show the Terrarium dev bar" hidden>🌱</button>`);
+  const pill = el(`<button id="terrarium-devbar-show" data-testid="show" title="Show the Terrarium dev bar (Alt+Shift+T)" aria-label="Show the Terrarium dev bar" hidden>🌱</button>`);
   const remember = (hidden: boolean) => { try { localStorage.setItem(HIDDEN_KEY, hidden ? '1' : '0'); } catch {} };
-  const setHidden = (hidden: boolean) => {
-    bar.hidden = hidden; pill.hidden = !hidden;
-    if (hidden) { panel.hidden = true; bTxs.classList.remove('on'); }
-    document.body.style.paddingBottom = hidden ? '' : '56px';
-    remember(hidden);
-  };
-  const bHide = btn('Hide', 'hide', 'Hide the dev bar (the chain keeps running); the leaf at the bottom right brings it back', () => setHidden(true));
+  const apply = (hidden: boolean) => { bar.hidden = hidden; pill.hidden = !hidden; if (hidden) { panel.hidden = true; bTxs.classList.remove('on'); } document.body.style.paddingBottom = hidden ? '' : '56px'; toasts.style.bottom = hidden ? '60px' : `${(bar.offsetHeight || 48) + 12}px`; };
+  const setHidden = (hidden: boolean) => { apply(hidden); remember(hidden); };
+  const bHide = btn('Hide', 'hide', 'Hide the dev bar (the chain keeps running); the leaf at the bottom right or Alt+Shift+T brings it back', () => setHidden(true));
   bHide.classList.add('quiet');
   pill.onclick = () => setHidden(false);
   const gTools = group('', 'group-tools', bTxs, bReset, bHide);
 
   bar.append(brand, status, el('<span class="spacer"></span>'), gChain, gWallet, gScenario, gTools, panel);
-  document.body.append(bar, pill);
+  document.body.append(bar, pill, toasts, timeMenu);
   let startHidden = !!opts.hidden; try { const v = localStorage.getItem(HIDDEN_KEY); if (v !== null) startHidden = v === '1'; } catch {}
-  bar.hidden = startHidden; pill.hidden = !startHidden; document.body.style.paddingBottom = startHidden ? '' : '56px';   // apply without remembering: the default is not a choice
+  apply(startHidden);   // without remembering: the default is not a choice
+
+  // ---- keyboard: Alt+Shift+T the bar, Alt+Shift+X the explorer, Esc closes the explorer / the time menu -----------------------------
+  const onKey = (e: KeyboardEvent) => {
+    if (!document.getElementById('terrarium-devbar')) { document.removeEventListener('keydown', onKey); return; }
+    if (e.altKey && e.shiftKey && (e.code === 'KeyT')) { e.preventDefault(); setHidden(!bar.hidden); }
+    else if (e.altKey && e.shiftKey && (e.code === 'KeyX')) { e.preventDefault(); if (bar.hidden) setHidden(false); togglePanel(); }
+    else if (e.key === 'Escape') { if (!panel.hidden) togglePanel(false); timeMenu.hidden = true; }
+  };
+  document.addEventListener('keydown', onKey);
 
   // ---- polling: status every 500 ms, the explorer while open, the scenario list now and then -----------------------------------
   const refreshScenarios = async () => {
@@ -205,32 +269,42 @@ export function mountDevBar(provider: Provider, opts: DevBarOptions = {}) {
   };
   const refresh = async () => {
     const s = await rpc('terrarium_status').catch(() => null); if (!s) return;
-    me = s.accounts?.[0] ?? me;
+    me = s.accounts?.[0] ?? me; head = parseInt(s.block, 16); actorsLabel = s.actorsLabel ?? actorsLabel;
     status.querySelector('[data-f=chain]')!.textContent = String(s.chainId);
-    status.querySelector('[data-f=block]')!.textContent = String(parseInt(s.block, 16));
+    status.querySelector('[data-f=block]')!.textContent = String(head);
+    if (s.now) {
+      const chainNow = Number(BigInt(s.now)), drift = chainNow - Math.floor(Date.now() / 1000);
+      const clock = status.querySelector<HTMLElement>('[data-f=clock]')!;
+      clock.innerHTML = Math.abs(drift) > 90 ? `clock ${esc(new Date(chainNow * 1000).toLocaleString())} <span class="shift">${esc(span(drift))}</span>` : `clock ${esc(new Date(chainNow * 1000).toLocaleTimeString())}`;
+    }
     const notes: string[] = [];
     if (s.fork) notes.push(`fork @${s.fork.blockNumber}${s.fork.offline ? ' offline' : ''}${s.fork.misses ? ` · <span class="warn">${s.fork.misses} MISSES</span>` : ''}`);
     if (s.http?.routes) notes.push(`${s.http.routes} HTTP route${s.http.routes === 1 ? '' : 's'}, ${s.http.hits} answered`);
     if (s.restoredFromPersistence) notes.push(`${s.localBlocks} block${s.localBlocks === 1 ? '' : 's'} restored`);
-    status.querySelector('[data-f=engine]')!.innerHTML = notes.length ? ' · ' + notes.join(' · ') : '';
+    status.querySelector('[data-f=engine]')!.innerHTML = notes.map((n) => `<span>${n}</span>`).join('');
     status.title = `revm/wasm · the chain persists in IndexedDB${s.restoredFromPersistence ? ' (Reset to start clean)' : ''}`;
+    const txKey = JSON.stringify(s.txs ?? s.block);
+    if (s.txs) { const bad = s.txs.failed ? `<span class="badge bad" title="${s.txs.failed} failed">${s.txs.failed} ✗</span>` : ''; const pend = s.txs.pending ? `<span class="badge" title="${s.txs.pending} pending">${s.txs.pending} ⏳</span>` : ''; bTxs.innerHTML = `Transactions<span class="badge">${s.txs.total}</span>${pend}${bad}`; }
     const ck = JSON.stringify(s.controls ?? []);
-    if (ck !== controlsKey) { controlsKey = ck; controls.replaceChildren(...(s.controls ?? []).map((c: any, i: number) => btn(c.label, `control-${i}`, c.title ?? c.method, () => rpc(c.method, c.params ?? [])))); }
+    if (ck !== controlsKey) { controlsKey = ck; controls.replaceChildren(...(s.controls ?? []).map((c: any, i: number) => btn(c.label, `control-${i}`, c.title ?? c.method, async () => { const r = await rpc(c.method, c.params ?? []); toast(`${c.label}${r !== undefined && r !== null && typeof r !== 'object' ? ` → ${r}` : ''}`); }))); }
     bActors.hidden = !s.hasActors; bActors.textContent = `${s.actorsLabel} ${s.actors ? 'on' : 'off'}`; bActors.classList.toggle('on', s.actors);
     gScenario.hidden = !s.hasActors && !(s.controls?.length);
     bReject.textContent = s.wallet.rejectNext > 0 ? `Reject next tx · armed (${s.wallet.rejectNext})` : 'Reject next tx'; bReject.classList.toggle('armed', s.wallet.rejectNext > 0);
     bLatency.textContent = s.wallet.latencyMs ? `Wallet: ${s.wallet.latencyMs / 1000}s delay` : 'Wallet: instant'; bLatency.classList.toggle('on', !!s.wallet.latencyMs);
     bLag.textContent = s.wallet.receiptLagMs ? `Receipts: ${s.wallet.receiptLagMs / 1000}s late` : 'Receipts: instant'; bLag.classList.toggle('on', !!s.wallet.receiptLagMs);
-    if (!panel.hidden) { await refreshTxs(); place(); }
+    if (!bar.hidden) place();
+    if (!panel.hidden && txKey !== lastTxKey) { lastTxKey = txKey; await refreshTxs(); }   // refetch the list only when the chain's counts moved; clicks refetch on their own
   };
   refresh(); refreshScenarios();
   let ticks = 0;
   const timer = setInterval(() => { if (!document.getElementById('terrarium-devbar')) return clearInterval(timer); refresh(); if (++ticks % 10 === 0) refreshScenarios(); }, 500);
 }
 
-/** Remove the dev bar, its explorer and the show pill; restore the page's bottom padding. Idempotent. */
+/** Remove the dev bar, its explorer, the toasts and the show pill; restore the page's bottom padding. Idempotent. */
 export function unmountDevBar() {
   document.getElementById('terrarium-devbar')?.remove();
   document.getElementById('terrarium-devbar-show')?.remove();
+  document.getElementById('terrarium-toast')?.remove();
+  document.getElementById('terrarium-devbar-menu')?.remove();
   document.body?.style.removeProperty('padding-bottom');
 }

package/src/engine.js

@@ -191,7 +191,7 @@ export async function createTerrarium(opts = {}) {
   // (account) or is zero (slot). No round trip, no re-run. With a fork the truth may be remote: load it (recorded).
   const local = stateMode !== 'rpc';
   const revmHost = {
-    account(address) {
+    account(address, wantCode = true) {
       const key = address.toLowerCase(); let a = mirrorGet('accounts', key);
       if (a === undefined) {
         if (local) { mirror[0].accounts.set(key, null); a = null; }
@@ -205,8 +205,9 @@ export async function createTerrarium(opts = {}) {
         }
       }
       if (a === null) return null;
-      let code = '0x';
-      if (a.codeHash !== KECCAK_EMPTY) { code = mirrorGet('code', key); if (code === undefined) { misses.push(() => mirrorLoad('code', key)); throw { missing: true }; } }
+      if (a.codeHash === KECCAK_EMPTY) return { balance: hex(a.balance), nonce: hex(a.nonce), codeHash: a.codeHash, code: '0x' };
+      if (!wantCode) return { balance: hex(a.balance), nonce: hex(a.nonce), codeHash: a.codeHash };   // no `code` key: wasm has it cached by hash, or asks again with wantCode
+      const code = mirrorGet('code', key); if (code === undefined) { misses.push(() => mirrorLoad('code', key)); throw { missing: true }; }
       return { balance: hex(a.balance), nonce: hex(a.nonce), codeHash: a.codeHash, code };
     },
     storage(address, slot) { const key = `${address.toLowerCase()}:${slot.toLowerCase()}`; const v = mirrorGet('storage', key); if (v !== undefined) return v; if (local) { mirror[0].storage.set(key, ZERO32); return ZERO32; } misses.push(() => mirrorLoad('storage', key)); throw { missing: true }; },
@@ -221,24 +222,32 @@ export async function createTerrarium(opts = {}) {
       for (const [slot, value] of c.storage) await sm.putStorage(a, hexToBytes(slot), hexToBytes(value));
     }
   }
-  async function execRevm({ tx, msg, block, flags = {} }) {
+  function revmRequest({ tx, msg, block, flags = {} }) {
     let m = tx ? msgOf(tx) : { ...msg, gasPrice: 0n, priorityFee: 0n, nonce: 0n };
     if (!tx) flags = { ...flags, skipBalance: true, skipNonce: true, noBaseFee: true, skipEip3607: true };
-    const req = JSON.stringify({ tx: { from: m.from, to: m.to, value: hex(m.value), data: m.data, gasLimit: hex(m.gasLimit), gasPrice: hex(m.gasPrice), priorityFee: hex(m.priorityFee), nonce: hex(m.nonce), txType: 2 },
+    return JSON.stringify({ tx: { from: m.from, to: m.to, value: hex(m.value), data: m.data, gasLimit: hex(m.gasLimit), gasPrice: hex(m.gasPrice), priorityFee: hex(m.priorityFee), nonce: hex(m.nonce), txType: 2 },
       block: { number: hex(block.header.number), timestamp: hex(block.header.timestamp), gasLimit: hex(block.header.gasLimit), baseFee: hex(block.header.baseFeePerGas ?? 0n) },
       cfg: { chainId, spec: String(hardfork), skipBalance: !!flags.skipBalance, skipNonce: !!flags.skipNonce, skipBlockGasLimit: true, noBaseFee: !!flags.noBaseFee, skipEip3607: !!flags.skipEip3607, traceSloads: !!flags.traceSloads } });
-    stats.runs++;
+  }
+  /** one wasm call (`run` or `estimate`), re-issued after each round of state fetching in fork mode */
+  async function revmCall(fn, req) {
     for (let round = 0; ; round++) {
       misses.length = 0; stats.rounds++;
-      let out;
       const t0 = Date.now();
-      try { out = JSON.parse(revm.run(revmHost, req)); stats.wasmMs += Date.now() - t0; }
+      try { const out = JSON.parse(fn(revmHost, req)); stats.wasmMs += Date.now() - t0; return out; }
       catch (e) {
         stats.wasmMs += Date.now() - t0;
         if (misses.length) { if (round > 100000) throw new Error('revm: state loading did not converge'); for (const load of misses.splice(0)) await load(); continue; }
         const message = String(e?.message ?? e);
         throw new Error(message.startsWith('invalid:') ? message : `revm: ${message}`);
       }
+    }
+  }
+  async function execRevm(args) {
+    const req = revmRequest(args);
+    stats.runs++;
+    {
+      const out = await revmCall(revm.run, req);
       await applyRevmState(out.state);
       return { success: out.success, error: out.success ? null : out.reason, gasUsed: BigInt(out.gasUsed), gasRefund: BigInt(out.gasRefunded), returnValue: hexToBytes(out.output), logs: out.logs.map((l) => [hexToBytes(l.address), l.topics.map(hexToBytes), hexToBytes(l.data)]), createdAddress: out.created, sloads: out.sloads.map(([address, slot]) => ({ address: address.toLowerCase(), slot })) };
     }
@@ -262,6 +271,11 @@ export async function createTerrarium(opts = {}) {
   let recording = true;
   const tsQueue = [];          // block timestamps to reuse during replay (determinism)
   let persister = null, persistKey = null, persistTimer = null;
+  // incremental persistence: blocks are stored in chunks of PERSIST_CHUNK under `<key>:b<i>`; `dirtyFrom` is the lowest block
+  // index changed since the last save (Infinity: none), `persistedChunks` how many chunk keys the store holds
+  const PERSIST_CHUNK = 64;
+  let dirtyFrom = Infinity, persistedChunks = 0;
+  const markDirty = (index) => { if (index < dirtyFrom) dirtyFrom = index; };
   const dealtSlots = new Map(); // token -> balance slot discovered by probing
   const impersonated = new Set();
   const exclusive = createLock();
@@ -273,7 +287,7 @@ export async function createTerrarium(opts = {}) {
 
   function pushBlock(header, txHashes, receipts) {
     const b = { ...header, transactions: txHashes, receipts };
-    blocks.push(b);
+    markDirty(blocks.length); blocks.push(b);
     return b;
   }
   const stateRootOf = async () => (stateMode === 'merkle' ? bytesToHex(await sm.getStateRoot()) : (opts.stateRoot ?? ZERO32));
@@ -425,40 +439,43 @@ export async function createTerrarium(opts = {}) {
 
   /** Execute a hypothetical tx with a given gas limit on a rollback — real transaction semantics (intrinsic gas,
    *  63/64 rule for sub-calls, refunds), no state change. */
-  async function simulateTx(p, gasLimit) {
-    const from = getAddress(p.from ?? accounts[0].address);
-    const acct = (await sm.getAccount(createAddressFromString(from))) ?? new Account();
-    const tx = impersonatedTx({ chainId: BigInt(chainId), nonce: acct.nonce, maxFeePerGas: baseFee * 2n, maxPriorityFeePerGas: 1n, gasLimit, to: p.to ?? undefined, value: p.value ? hexToBigInt(p.value) : 0n, data: p.data ?? p.input ?? '0x' }, from);
-    return withRollback(() => exec({ tx, block: pendingBlock(), flags: { skipNonce: true, skipBalance: true } }));
-  }
-  /** geth/anvil-style estimation: one full run, an optimistic 64/63 probe, then binary search if needed. */
+  /** reth-style estimation, run inside the wasm engine in ONE call: a run at the cap (a revert there is the answer),
+   *  the optimistic (used + refunded + stipend) · 64/63 probe, then a bisection that starts near 3× the gas used and stops
+   *  within 1.5 %. The runs share a read cache and commit nothing, so the state manager is never touched. */
   async function estimateGas(p) {
     const cap = p.gas ? hexToBigInt(p.gas) : gasLimit;
-    const first = await simulateTx(p, cap);
-    if (!first.success) throw revertError(first);
-    const ok = async (g) => { try { const r = await simulateTx(p, g); return r.success; } catch { return false; } };
-    let lo = first.gasUsed - 1n, hi = cap;
-    const optimistic = ((first.gasUsed + first.gasRefund) * 64n) / 63n + 1n;   // usually exact
-    if (optimistic < hi && (await ok(optimistic))) hi = optimistic;
-    while (lo + 1n < hi) {                                                             // shrink to the minimum that succeeds
-      if (hi - lo <= hi / 64n) break;                                                  // 1.5 % tolerance like geth
-      const mid = (lo + hi) / 2n;
-      if (await ok(mid)) hi = mid; else lo = mid;
-    }
-    return hi;
+    const from = getAddress(p.from ?? accounts[0].address);
+    const acct = (await sm.getAccount(createAddressFromString(from))) ?? new Account();
+    const tx = impersonatedTx({ chainId: BigInt(chainId), nonce: acct.nonce, maxFeePerGas: baseFee * 2n, maxPriorityFeePerGas: 1n, gasLimit: cap, to: p.to ?? undefined, value: p.value ? hexToBigInt(p.value) : 0n, data: p.data ?? p.input ?? '0x' }, from);
+    const out = await revmCall(revm.estimate, revmRequest({ tx, block: pendingBlock(), flags: { skipNonce: true, skipBalance: true } }));
+    stats.runs += out.runs;
+    if (!out.success) throw revertError({ error: out.reason, returnValue: hexToBytes(out.output), gasUsed: BigInt(out.gasUsed) });
+    return BigInt(out.gas);
   }
 
   /** Transactions newest first, as an explorer lists them: the RPC tx merged with its receipt, a `status` word, the
    *  revert reason and data of a failed one, and the block timestamp. Pending (interval mining) come first. */
+  // the counts are polled (the dev bar's status, twice a second): recomputed only when the chain changed
+  let txCounts = { key: '', failed: 0 };
+  function countTxs() {
+    const key = `${txs.size}:${pending.length}:${blocks.length}`;
+    if (txCounts.key !== key) { let failed = 0; for (const t of txs.values()) if (t.receipt && t.receipt.status !== '0x1') failed++; txCounts = { key, failed }; }
+    return { total: txs.size, pending: pending.length, failed: txCounts.failed };
+  }
+  function describeTx(t) {
+    const mined = !!t.receipt, n = mined ? hexToBigInt(t.receipt.blockNumber) : null;
+    const b = mined ? blocks[blocks.length - 1 - Number(latest().number - n)] ?? blocks.find((b) => BigInt(b.number) === n) : null;
+    const status = !mined ? 'pending' : t.receipt.status === '0x1' ? 'success' : t.dropped ? 'dropped' : 'reverted';
+    return { ...t.rpc, status, receipt: t.receipt, timestamp: b && BigInt(b.number) === n ? hex(b.timestamp) : null, error: t.error ?? null, revertData: t.revertData ?? null };
+  }
   function listTransactions({ limit = 50, before } = {}) {
-    const all = [...txs.values()].reverse().map((t) => {
-      const mined = !!t.receipt, n = mined ? hexToBigInt(t.receipt.blockNumber) : null;
-      const b = mined ? blocks.find((b) => BigInt(b.number) === n) : null;
-      const status = !mined ? 'pending' : t.receipt.status === '0x1' ? 'success' : t.dropped ? 'dropped' : 'reverted';
-      return { ...t.rpc, status, receipt: t.receipt, timestamp: b ? hex(b.timestamp) : null, error: t.error ?? null, revertData: t.revertData ?? null };
-    });
-    const from = before ? all.findIndex((t) => t.hash === before) + 1 : 0;
-    return { total: all.length, transactions: all.slice(from, from + Math.max(0, limit)) };
+    const all = [...txs.values()], out = [];   // only the requested page is built: newest first, after `before` if given
+    let started = !before;
+    for (let i = all.length - 1; i >= 0 && out.length < Math.max(0, limit); i--) {
+      if (!started) { if (all[i].rpc.hash === before) started = true; continue; }
+      out.push(describeTx(all[i]));
+    }
+    return { ...countTxs(), transactions: out };
   }
 
   // ---- RPC formatting ----------------------------------------------------------------------------
@@ -607,7 +624,7 @@ export async function createTerrarium(opts = {}) {
     const i = snapshots.findIndex((s) => s.id === id); if (i < 0) return false;
     let target;
     while (snapshots.length > i) { target = snapshots.pop(); await sm.revert(); }
-    blocks.length = target.blocksLen; journal.length = target.journalLen; pending.length = 0;
+    markDirty(target.blocksLen); blocks.length = target.blocksLen; journal.length = target.journalLen; pending.length = 0;
     timeOffset = target.timeOffset; nextTimestamp = target.nextTimestamp; baseFee = target.baseFee;   // the clock is state too
     const head = latest().number;
     for (const [h, t] of txs) if (!t.receipt || hexToBigInt(t.receipt.blockNumber) > head) txs.delete(h);
@@ -744,7 +761,9 @@ export async function createTerrarium(opts = {}) {
   // ---- persistence: dump the diff, restore it, or replay the journal -------------------------------
   const serBlock = (b) => ({ ...b, number: hex(b.number), timestamp: hex(b.timestamp), gasLimit: hex(b.gasLimit), gasUsed: hex(b.gasUsed), baseFeePerGas: hex(b.baseFeePerGas) });
   const deserBlock = (b) => ({ ...b, number: hexToBigInt(b.number), timestamp: hexToBigInt(b.timestamp), gasLimit: hexToBigInt(b.gasLimit), gasUsed: hexToBigInt(b.gasUsed), baseFeePerGas: hexToBigInt(b.baseFeePerGas) });
-  async function dumpState() {
+  async function dumpState() { const core = await dumpCore(); return { ...core, chain: { ...core.chain, blocks: blocks.map(serBlock) } }; }
+  /** everything but the blocks (the part the incremental save rewrites every time) */
+  async function dumpCore() {
     const keepFrom = latest().number - BigInt(opts.persist?.maxTxBlocks ?? 2000);
     const accountsOut = {};
     for (const a of touched.accounts) { const acct = await sm.getAccount(createAddressFromString(a)); accountsOut[a] = acct ? { nonce: hex(acct.nonce), balance: hex(acct.balance), codeHash: bytesToHex(acct.codeHash) } : null; }
@@ -753,7 +772,7 @@ export async function createTerrarium(opts = {}) {
     const remote = sm.remote ? { accounts: Object.fromEntries([...sm.remote.accounts].map(([a, acct]) => [a, acct ? { nonce: hex(acct.nonce), balance: hex(acct.balance), codeHash: bytesToHex(acct.codeHash) } : null])), code: Object.fromEntries([...sm.remote.code].map(([a, c]) => [a, bytesToHex(c)])), storage: Object.fromEntries([...sm.remote.storage].map(([k, v]) => [k, bytesToHex(v)])) } : undefined;
     return { version: 1, chainId, savedAt: Date.now(), state: { accounts: accountsOut, code: codeOut, storage: storageOut }, remote,
       // tx bodies: only the most recent blocks' worth (like a pruned node), and without their logs (rebuilt from block logs on load)
-      chain: { blocks: blocks.map(serBlock), txs: Object.fromEntries([...txs].filter(([, t]) => !t.receipt || hexToBigInt(t.receipt.blockNumber) >= keepFrom).map(([h, t]) => [h, { rpc: t.rpc, receipt: t.receipt ? { ...t.receipt, logs: undefined } : null, error: t.error, revertData: t.revertData, dropped: t.dropped }])), timeOffset: hex(timeOffset), baseFee: hex(baseFee), mining, impersonated: [...impersonated], dealtSlots: Object.fromEntries(dealtSlots) },
+      chain: { txs: Object.fromEntries([...txs].filter(([, t]) => !t.receipt || hexToBigInt(t.receipt.blockNumber) >= keepFrom).map(([h, t]) => [h, { rpc: t.rpc, receipt: t.receipt ? { ...t.receipt, logs: undefined } : null, error: t.error, revertData: t.revertData, dropped: t.dropped }])), timeOffset: hex(timeOffset), baseFee: hex(baseFee), mining, impersonated: [...impersonated], dealtSlots: Object.fromEntries(dealtSlots) },
       journal: { entries: journal, timestamps: blocks.slice(1).map((b) => hex(b.timestamp)) } };
   }
   async function seedState({ accounts: accs = {}, code = {}, storage = {} }) {
@@ -767,7 +786,7 @@ export async function createTerrarium(opts = {}) {
       for (const [k, v] of Object.entries(dump.remote.storage)) { const [a, slot] = k.split('_'); await sm.putStorage(createAddressFromString(a), hexToBytes(slot), hexToBytes(v)); }
     }
     await seedState(dump.state);
-    blocks.length = 0; for (const b of dump.chain.blocks) blocks.push(deserBlock(b));
+    markDirty(0); blocks.length = 0; for (const b of dump.chain.blocks) blocks.push(deserBlock(b));
     txs.clear(); for (const [h, t] of Object.entries(dump.chain.txs)) { if (t.receipt) t.receipt.logs = []; txs.set(h, t); }
     for (const b of blocks) for (const l of b.logs) { const t = txs.get(l.transactionHash); if (t?.receipt) t.receipt.logs.push(l); }
     timeOffset = hexToBigInt(dump.chain.timeOffset); baseFee = hexToBigInt(dump.chain.baseFee); mining = dump.chain.mining;
@@ -780,16 +799,46 @@ export async function createTerrarium(opts = {}) {
     recording = false; tsQueue.push(...(j.timestamps ?? []).map(hexToBigInt));
     try { for (const e of j.entries) await dispatch(e); } finally { recording = true; tsQueue.length = 0; }
   }
+  /** write what changed: the dirty block chunks, chunks past the head removed (a revert), then the core with the block count.
+   *  Chunks first, core last, so a crash in between leaves a core that never points past what the store holds. */
+  async function persistNow() {
+    if (!persister) return;
+    const key = persistKey, store = persister;
+    const nChunks = Math.ceil(blocks.length / PERSIST_CHUNK);
+    const firstDirty = dirtyFrom === Infinity ? nChunks : Math.floor(Math.min(dirtyFrom, blocks.length) / PERSIST_CHUNK);
+    for (let i = firstDirty; i < nChunks; i++) await store.setItem(`${key}:b${i}`, JSON.stringify(blocks.slice(i * PERSIST_CHUNK, (i + 1) * PERSIST_CHUNK).map(serBlock)));
+    for (let i = nChunks; i < persistedChunks; i++) await store.removeItem(`${key}:b${i}`);
+    const core = await dumpCore();
+    await store.setItem(key, JSON.stringify({ ...core, chain: { ...core.chain, blockCount: blocks.length, chunk: PERSIST_CHUNK } }));
+    persistedChunks = nChunks; dirtyFrom = Infinity;
+  }
+  /** the persisted chain: a core + block chunks (or a whole dump, the pre-0.7 format) → a full dump, or null */
+  async function readPersisted(store, key) {
+    const raw = await store.getItem(key); if (!raw) return null;
+    const saved = typeof raw === 'string' ? JSON.parse(raw) : raw;
+    if (saved.chain?.blocks) return saved;   // legacy: everything in one value
+    const all = [], n = Math.ceil((saved.chain?.blockCount ?? 0) / (saved.chain?.chunk ?? PERSIST_CHUNK));
+    for (let i = 0; i < n; i++) { const c = await store.getItem(`${key}:b${i}`); if (!c) break; all.push(...(typeof c === 'string' ? JSON.parse(c) : c)); }
+    return { ...saved, chain: { ...saved.chain, blocks: all.slice(0, saved.chain.blockCount) } };
+  }
+  /** remove everything this engine persisted under its key (the core and every block chunk) */
+  async function clearPersisted() {
+    if (!persister) return;
+    const raw = await persister.getItem(persistKey); const saved = raw ? (typeof raw === 'string' ? JSON.parse(raw) : raw) : null;
+    const n = Math.max(persistedChunks, Math.ceil((saved?.chain?.blockCount ?? 0) / (saved?.chain?.chunk ?? PERSIST_CHUNK)));
+    for (let i = 0; i < n; i++) await persister.removeItem(`${persistKey}:b${i}`);
+    await persister.removeItem(persistKey); persistedChunks = 0; dirtyFrom = 0;
+  }
   function schedulePersist() {
     if (!persister) return;
     clearTimeout(persistTimer);
-    persistTimer = setTimeout(() => exclusive(async () => persister.setItem(persistKey, JSON.stringify(await dumpState()))).catch((e) => console.warn('terrarium persist failed', e)), opts.persist?.debounceMs ?? 50);
+    persistTimer = setTimeout(() => exclusive(persistNow).catch((e) => console.warn('terrarium persist failed', e)), opts.persist?.debounceMs ?? 50);
   }
   let restoredFromPersistence = false;
   if (opts.persist) {
     persister = opts.persist.storage; persistKey = opts.persist.key ?? `terrarium:${chainId}`;
-    const saved = await persister.getItem(persistKey);
-    if (saved) { await loadState(typeof saved === 'string' ? JSON.parse(saved) : saved); restoredFromPersistence = true; }
+    const saved = await readPersisted(persister, persistKey);
+    if (saved) { await loadState(saved); restoredFromPersistence = true; if (!saved.chain.chunk) { dirtyFrom = 0; persistedChunks = 0; } else { dirtyFrom = Infinity; persistedChunks = Math.ceil(blocks.length / PERSIST_CHUNK); } }   // a legacy dump is rewritten in chunks on the next save
   }
   if (!restoredFromPersistence && opts.restore) await loadState(opts.restore);   // a recorded fixture as the baseline
 
@@ -808,9 +857,11 @@ export async function createTerrarium(opts = {}) {
     slotFromLayout,
     /** Persistence: dump the diff (+ fork fixture), restore, or replay the journal onto new bytecode. */
     dumpState: () => exclusive(dumpState), loadState: (d) => exclusive(() => loadState(d)), replayJournal: (j) => exclusive(() => replayJournal(j)),
-    get journal() { return journal.slice(); }, flush: () => { clearTimeout(persistTimer); return persister ? exclusive(async () => persister.setItem(persistKey, JSON.stringify(await dumpState()))) : Promise.resolve(); },
+    get journal() { return journal.slice(); }, flush: () => { clearTimeout(persistTimer); return persister ? exclusive(persistNow) : Promise.resolve(); },
+    /** remove this engine's persisted chain (core + block chunks) from the store */
+    clearPersisted: () => exclusive(clearPersisted),
     get blockNumber() { return latest().number; },
-    /** transactions newest first ({ total, transactions }): tx + receipt + status word + revert reason/data + block timestamp */
+    /** transactions newest first ({ total, pending, failed, transactions }): tx + receipt + status word + revert reason/data + block timestamp */
     transactions: (o) => listTransactions(o),
     /** React to on-chain events with scripted actors (keepers, oracles, other users, bridges...). */
     onLog(filter, handler) { const l = { filter, handler }; logListeners.push(l); return () => logListeners.splice(logListeners.indexOf(l), 1); },

package/src/worker-runtime.ts

@@ -108,7 +108,7 @@ export async function runScenario(input: ScenarioInput, opts: { storage?: Storag
 
   // ---- generic controls, reachable through the provider like any RPC method -----------------------------------
   sim.addMethod('terrarium_actors', async (on?: boolean) => { await actors.toggle(on ?? !actors.enabled); return actors.enabled; });
-  sim.addMethod('terrarium_status', async () => ({ scenario: scenarioName, chainId, engine: sim.engine, block: toHex(sim.blockNumber), accounts: ctx.accounts, actors: actors.enabled, actorsLabel: config.actorsLabel ?? 'Actors', hasActors: toggled.length > 0, wallet: { ...sim.wallet }, controls: config.controls ?? [], restoredFromPersistence: sim.restoredFromPersistence, localBlocks: Number(sim.blockNumber) - (config.fork ? config.fork.blockNumber + 1 : 0), http: { routes: httpRoutes.length, hits: httpHits }, fork: config.fork ? { blockNumber: config.fork.blockNumber, offline: !!config.fork.offline, misses: sim.offlineMisses.length } : null, ...(await config.status?.(ctx)) }));
+  sim.addMethod('terrarium_status', async () => ({ scenario: scenarioName, chainId, engine: sim.engine, block: toHex(sim.blockNumber), now: toHex(sim.now()), txs: (({ total, pending, failed }) => ({ total, pending, failed }))(sim.transactions({ limit: 0 })), accounts: ctx.accounts, actors: actors.enabled, actorsLabel: config.actorsLabel ?? 'Actors', hasActors: toggled.length > 0, wallet: { ...sim.wallet }, controls: config.controls ?? [], restoredFromPersistence: sim.restoredFromPersistence, localBlocks: Number(sim.blockNumber) - (config.fork ? config.fork.blockNumber + 1 : 0), http: { routes: httpRoutes.length, hits: httpHits }, fork: config.fork ? { blockNumber: config.fork.blockNumber, offline: !!config.fork.offline, misses: sim.offlineMisses.length } : null, ...(await config.status?.(ctx)) }));
   // ---- the transaction explorer: the engine's list, decoded (address's own ABI, then `abis`, then the known set) and labelled
   const configAbi = (config.abis ?? []).flat() as Abi;
   const abisFor = (address: string | null): Abi[] => [registry.get((address ?? '').toLowerCase())?.abi, configAbi, KNOWN_ABI].filter((a): a is Abi => !!a && a.length > 0);
@@ -127,8 +127,8 @@ export async function runScenario(input: ScenarioInput, opts: { storage?: Storag
   // events: every candidate with the log's topic0 is tried (ERC-20 and ERC-721 Transfer share it and differ in indexed params)
   const decodeLog = (l: { address: string; topics: Hex[]; data: Hex }) => first(abisFor(l.address), (abi: Abi) => first(abi.filter((i) => i.type === 'event' && toEventSelector(i as any) === l.topics[0]), (item: any) => { const d: any = decodeEventLog({ abi: [item], data: l.data, topics: l.topics as [Hex, ...Hex[]] }); return { name: d.eventName as string, args: plain(d.args ?? {}) }; }));
   sim.addMethod('terrarium_transactions', (opts?: { limit?: number; before?: string }) => {
-    const { total, transactions } = sim.transactions(opts ?? {});
-    return { total, labels: labelsOf(), transactions: transactions.map((t: any) => {
+    const { total, pending, failed, transactions } = sim.transactions(opts ?? {});
+    return { total, pending, failed, labels: labelsOf(), transactions: transactions.map((t: any) => {
       const hasData = t.input && t.input.length >= 10;
       const method = !t.to ? { name: 'create', args: [] } : hasData ? decodeCall(t.to, t.input) ?? { name: null, selector: t.input.slice(0, 10) } : null;
       const revert = t.status === 'reverted' && t.revertData && t.revertData !== '0x' ? decodeRevert(t.to, t.revertData) : null;
@@ -137,7 +137,7 @@ export async function runScenario(input: ScenarioInput, opts: { storage?: Storag
     }) };
   });
   // reset wipes this scenario's chain (its key and its actors flag); other scenarios and the selection stay
-  sim.addMethod('terrarium_reset', async () => { await actors.toggle(false); sim.stop(); if (storage && key) { await storage.removeItem(key); await storage.removeItem(actorsKey); } return true; });
+  sim.addMethod('terrarium_reset', async () => { await actors.toggle(false); if (storage && key) { await sim.clearPersisted(); await storage.removeItem(actorsKey); } sim.stop(); return true; });
   // several scenarios: the list for the selector, and the switch (stored, then the page reloads and boots the chosen one)
   sim.addMethod('terrarium_scenarios', () => ({ active: scenarioName, scenarios: list.map((s, i) => ({ name: names[i], description: s.description ?? null, persist: s.persist === false ? null : (s.persist ?? (list.length > 1 ? slug(names[i]) : 'default')) })) }));
   sim.addMethod('terrarium_selectScenario', async (name: string) => {