@hienlh/ppm 0.18.9 → 0.18.11

package/.spike/pip-spike-key-probe.ts

@@ -0,0 +1,34 @@
+// Debug: which keyboard events reach the xterm textarea (main doc) under CDP input; effect of focus emulation.
+import { connectApp, saveResults, sleep } from "./pip-spike-common";
+
+const TAB = "terminal:1@panel-8281c2e3";
+const Q = `document.querySelector('[data-tab-pool-id="${TAB}"]')`;
+const R: Record<string, unknown> = {};
+const h = await connectApp();
+const { ev, cdp, sid } = h;
+
+await ev(`(() => { const S = window.__spike; if (S.pip && !S.pip.closed) { if (S.tw && S.tw.ownerDocument !== document) S.moveBack(S.tw); S.pip.close(); } S.pip = null; return 'reset'; })()`);
+await h.openViaUrl("/project/ppm/terminal/1");
+await h.waitFor(`${Q} && ${Q}.style.display !== 'none'`, 15000, "terminal visible");
+await ev(`window.__spike.tw = ${Q}; (() => { const S = window.__spike; const ta = S.tw.querySelector('.xterm-helper-textarea'); S.keyLog = [];
+  if (!S.keyProbe) { for (const t of ['keydown','keypress','input','beforeinput','keyup']) ta.addEventListener(t, e => S.keyLog.push(t + ':' + (e.key ?? e.data ?? '') + ':' + e.isTrusted)); S.keyProbe = true; }
+  return 'probe'; })()`);
+
+async function probe(label: string) {
+  await ev(`window.__spike.keyLog = []; window.__spike.dataLog = []; window.__spike.tw.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+  await cdp.typeText(sid, "ab");
+  await sleep(300);
+  R[label] = await ev(`({ hasFocus: document.hasFocus(), vis: document.visibilityState, active: document.activeElement && document.activeElement.className, keyLog: window.__spike.keyLog, dataLog: window.__spike.dataLog })`);
+}
+await probe("noEmulation");
+await cdp.send("Page.bringToFront", {}, sid);
+await sleep(300);
+await probe("afterBringToFront");
+await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, sid);
+await sleep(300);
+await probe("withFocusEmulation");
+// Clean the typed junk from the shell line
+await cdp.pressKey(sid, "Escape", "Escape", 27);
+for (let i = 0; i < 8; i++) await cdp.pressKey(sid, "Backspace", "Backspace", 8);
+await saveResults("pip-results-key-probe.json", R);
+cdp.close();

package/.spike/pip-spike-listener-survival.ts

@@ -0,0 +1,54 @@
+// Verify: do node-level event listeners survive adoption into a Document PiP window? Minimal, controlled.
+import { connectApp, saveResults, sleep } from "./pip-spike-common";
+
+const R: Record<string, unknown> = {};
+const h = await connectApp();
+const { ev, cdp, sid } = h;
+
+async function listenersOf(expr: string) {
+  const r = await cdp.send("Runtime.evaluate", { expression: expr }, sid);
+  if (!r.result?.objectId) return "no object";
+  const l = await cdp.send("DOMDebugger.getEventListeners", { objectId: r.result.objectId }, sid);
+  return (l.listeners as any[]).map((x) => `${x.type}${x.useCapture ? "(c)" : ""}`).sort();
+}
+
+// Fresh probe nodes in the main doc with listeners; a plain iframe-less popup for comparison is not possible w/o gesture, so PiP only.
+await ev(`(() => { const S = window.__spike; S.probeDiv = document.createElement('div'); S.probeTa = document.createElement('textarea'); S.probeDiv.append(S.probeTa);
+  S.probeHits = { div: 0, ta: 0 }; S.probeDiv.addEventListener('click', () => S.probeHits.div++, true); S.probeTa.addEventListener('keydown', () => S.probeHits.ta++); S.probeTa.addEventListener('input', () => S.probeHits.ta++, true);
+  document.body.append(S.probeDiv); return 'ok'; })()`);
+R.before = { div: await listenersOf("window.__spike.probeDiv"), ta: await listenersOf("window.__spike.probeTa") };
+
+// Also take the fresh terminal wrapper (tw2) along, checking its listeners right after adoption while PiP is open
+R.tw2Before = { ta: await listenersOf("window.__spike.tw2.querySelector('.xterm-helper-textarea')"), xterm: await listenersOf("window.__spike.tw2.querySelector('.xterm')") };
+
+R.move = await h.runGesture("pip-listener-test", `async () => {
+  const S = window.__spike; if (S.pip && !S.pip.closed) S.pip.close();
+  const pip = await documentPictureInPicture.requestWindow({ width: 800, height: 500 }); S.pip = pip; S.copyStyles(pip.document);
+  pip.document.body.append(S.probeDiv);
+  const moved = S.moveToPip(pip, S.tw2);
+  await new Promise(r => setTimeout(r, 300));
+  // Fire synthetic events on the adopted probe nodes: do the listeners run?
+  S.probeHits = { div: 0, ta: 0 }; S.probeDiv.dispatchEvent(new MouseEvent('click', { bubbles: true })); S.probeTa.dispatchEvent(new KeyboardEvent('keydown', { key: 'a', bubbles: true })); S.probeTa.dispatchEvent(new InputEvent('input', { data: 'a', inputType: 'insertText', bubbles: true }));
+  return { moved, probeDivDoc: S.probeDiv.ownerDocument === pip.document, hitsAfterAdoption: { ...S.probeHits } };
+}`);
+R.afterAdoption = { div: await listenersOf("window.__spike.probeDiv"), ta: await listenersOf("window.__spike.probeTa") };
+R.tw2AfterAdoption = { ta: await listenersOf("window.__spike.tw2.querySelector('.xterm-helper-textarea')"), xterm: await listenersOf("window.__spike.tw2.querySelector('.xterm')") };
+
+// Type into the adopted fresh terminal via its PiP target (trusted)
+const pipSid = await h.attachPip();
+if (pipSid) {
+  await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, pipSid);
+  await cdp.eval(pipSid, `document.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+  await ev(`window.__spike.dataLog2 = []; 'r'`);
+  await cdp.typeText(pipSid, "echo PIP-FRESH");
+  await cdp.pressKey(pipSid, "Enter", "Enter", 13, "\r");
+  await sleep(1200);
+  R.tw2TypingInPip = await ev(`({ dataLog: window.__spike.dataLog2.join(''), echoed: window.__spike.termText(window.__spike.t2, 60).includes('PIP-FRESH') })`);
+}
+// Move back while the PiP is still open, then check listeners again
+R.back = await ev(`(() => { const S = window.__spike; const r = S.moveBack(S.tw2); document.body.append(S.probeDiv); S.probeHits = { div: 0, ta: 0 }; S.probeDiv.dispatchEvent(new MouseEvent('click', { bubbles: true })); S.probeTa.dispatchEvent(new KeyboardEvent('keydown', { key: 'a', bubbles: true })); return { ...r, hitsAfterReturn: { ...S.probeHits } }; })()`);
+R.afterReturn = { div: await listenersOf("window.__spike.probeDiv"), ta: await listenersOf("window.__spike.probeTa") };
+R.tw2AfterReturn = { ta: await listenersOf("window.__spike.tw2.querySelector('.xterm-helper-textarea')") };
+await ev(`window.__spike.pip.close(); 'c'`);
+await saveResults("pip-results-listener-survival.json", R);
+cdp.close();

package/.spike/pip-spike-listeners.ts

@@ -0,0 +1,19 @@
+// Debug: compare registered DOM listeners on the round-tripped vs fresh xterm textarea (DOMDebugger.getEventListeners).
+import { connectApp, saveResults } from "./pip-spike-common";
+
+const R: Record<string, unknown> = {};
+const h = await connectApp();
+const { cdp, sid } = h;
+
+async function listeners(label: string, expr: string) {
+  const r = await cdp.send("Runtime.evaluate", { expression: expr }, sid);
+  if (!r.result?.objectId) { R[label] = "no object: " + JSON.stringify(r.result); return; }
+  const l = await cdp.send("DOMDebugger.getEventListeners", { objectId: r.result.objectId }, sid);
+  R[label] = (l.listeners as any[]).map((x) => `${x.type}${x.useCapture ? "(capture)" : ""}${x.passive ? "(passive)" : ""} @${x.lineNumber}:${x.columnNumber}`).sort();
+}
+await listeners("roundTrippedTextarea", `window.__spike.tw.querySelector('.xterm-helper-textarea')`);
+await listeners("freshTextarea", `window.__spike.tw2.querySelector('.xterm-helper-textarea')`);
+await listeners("roundTrippedXtermEl", `window.__spike.tw.querySelector('.xterm')`);
+await listeners("freshXtermEl", `window.__spike.tw2.querySelector('.xterm')`);
+await saveResults("pip-results-listeners.json", R);
+cdp.close();

package/.spike/pip-spike-pagehide.ts

@@ -0,0 +1,59 @@
+// Debug: does a synchronous moveBack inside the PiP 'pagehide' handler preserve listeners? Plus canvas inventory.
+import { connectApp, saveResults, sleep } from "./pip-spike-common";
+
+const R: Record<string, unknown> = {};
+const h = await connectApp();
+const { ev, cdp, sid } = h;
+await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, sid);
+
+async function listenersOf(expr: string) {
+  const r = await cdp.send("Runtime.evaluate", { expression: expr }, sid);
+  if (!r.result?.objectId) return "no object";
+  const l = await cdp.send("DOMDebugger.getEventListeners", { objectId: r.result.objectId }, sid);
+  return (l.listeners as any[]).map((x) => `${x.type}${x.useCapture ? "(c)" : ""}`).sort();
+}
+R.t2TextareaListenersNow = await listenersOf("window.__spike.tw2.querySelector('.xterm-helper-textarea')");
+R.t2Canvases = await ev(`[...window.__spike.tw2.querySelectorAll('canvas')].map(c => ({ cls: c.className, parent: c.parentElement.className, w: c.width, h: c.height, gl: !!c.getContext('webgl2') }))`);
+
+// Fresh terminal 3 for a clean pagehide test
+await h.openViaUrl("/project/ppm/terminal/3");
+const Q3 = `document.querySelector('[data-tab-pool-id^="terminal:3"]')`;
+await h.waitFor(`${Q3} && ${Q3}.style.display !== 'none' && ${Q3}.querySelector('.xterm-helper-textarea')`, 15000, "terminal 3");
+await sleep(2500);
+await ev(`window.__spike.tw3 = ${Q3}; window.__spike.t3 = window.__spike.findTerminal(window.__spike.tw3); 'ok'`);
+R.t3Before = await listenersOf("window.__spike.tw3.querySelector('.xterm-helper-textarea')");
+async function typeMarker(marker: string) {
+  await ev(`window.__spike.tw3.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+  await cdp.typeText(sid, `echo ${marker}`);
+  await cdp.pressKey(sid, "Enter", "Enter", 13, "\r");
+  await sleep(1300);
+  return ev(`window.__spike.termText(window.__spike.t3, 60).includes(${JSON.stringify(marker)})`);
+}
+R.t3Baseline = await typeMarker("T3-BASE");
+
+// A: pagehide handler moves back synchronously, then pip.close()
+R.pagehideA = await h.runGesture("pip-pagehide-a", `async () => {
+  const S = window.__spike; const w = S.tw3; S.phLog = [];
+  const pip = await documentPictureInPicture.requestWindow({ width: 800, height: 500 }); S.pip = pip; S.copyStyles(pip.document); S.moveToPip(pip, w);
+  pip.addEventListener('pagehide', (e) => { S.phLog.push('pagehide owner=' + (w.ownerDocument === pip.document ? 'pip' : 'other') + ' persisted=' + e.persisted); S.moveBack(w); S.phLog.push('moved back, owner main=' + (w.ownerDocument === document)); });
+  pip.addEventListener('unload', () => S.phLog.push('unload'));
+  await new Promise(r => setTimeout(r, 400));
+  const beforeClose = { owner: w.ownerDocument === pip.document ? 'pip' : 'main' };
+  pip.close();
+  await new Promise(r => setTimeout(r, 400));
+  return { beforeClose, phLog: S.phLog, ownerAfter: w.ownerDocument === document ? 'main' : 'other', closed: pip.closed };
+}`);
+R.t3AfterA = await listenersOf("window.__spike.tw3.querySelector('.xterm-helper-textarea')");
+R.t3TypingAfterA = await typeMarker("T3-AFTER-A");
+
+// B: explicit moveBack BEFORE close (the known-good path) as control
+R.controlB = await h.runGesture("pip-pagehide-b", `async () => {
+  const S = window.__spike; const w = S.tw3;
+  const pip = await documentPictureInPicture.requestWindow({ width: 800, height: 500 }); S.pip = pip; S.copyStyles(pip.document); S.moveToPip(pip, w);
+  await new Promise(r => setTimeout(r, 400)); S.moveBack(w); pip.close(); await new Promise(r => setTimeout(r, 400));
+  return { ownerAfter: w.ownerDocument === document ? 'main' : 'other' };
+}`);
+R.t3AfterB = await listenersOf("window.__spike.tw3.querySelector('.xterm-helper-textarea')");
+R.t3TypingAfterB = await typeMarker("T3-AFTER-B");
+await saveResults("pip-results-pagehide.json", R);
+cdp.close();

package/.spike/pip-spike-resize.ts

@@ -0,0 +1,42 @@
+// Debug: ResizeObserver (created in main window) vs PiP window resizes; does pip 'resize' + manual fit() work?
+import { connectApp, saveResults, sleep } from "./pip-spike-common";
+
+const R: Record<string, unknown> = {};
+const h = await connectApp();
+const { ev, cdp, sid } = h;
+await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, sid);
+await h.openViaUrl("/project/ppm/terminal/3");
+await sleep(500);
+const W = `window.__spike.tw3`, T = `window.__spike.t3`;
+
+R.move = await h.runGesture("pip-resize", `async () => {
+  const S = window.__spike; const w = ${W}; const t = ${T};
+  const pip = await documentPictureInPicture.requestWindow({ width: 900, height: 600 }); S.pip = pip; S.copyStyles(pip.document); S.moveToPip(pip, w);
+  S.roLog = []; const ro = new ResizeObserver(es => S.roLog.push('main-RO ' + Math.round(es[0].contentRect.width) + 'x' + Math.round(es[0].contentRect.height))); ro.observe(w);
+  const pipRo = new pip.ResizeObserver(es => S.roLog.push('pip-RO ' + Math.round(es[0].contentRect.width) + 'x' + Math.round(es[0].contentRect.height))); pipRo.observe(w);
+  pip.addEventListener('resize', () => S.roLog.push('pip-resize-event ' + pip.innerWidth + 'x' + pip.innerHeight));
+  await new Promise(r => setTimeout(r, 500));
+  return { pipSize: [pip.innerWidth, pip.innerHeight], rowsCols: [t.rows, t.cols], roLog: S.roLog.slice() };
+}`);
+const pipSid = await h.attachPip();
+await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, pipSid!);
+// resizeTo inside a trusted click in the PiP
+const pt = await cdp.eval<any>(pipSid!, `(() => { const b = document.createElement('button'); b.id = 'rz'; b.textContent = 'rz'; b.style.cssText = 'position:fixed;right:4px;bottom:4px;z-index:99999'; b.onclick = () => window.resizeTo(700, 450); document.body.append(b); const r = b.getBoundingClientRect(); return { x: r.x + r.width / 2, y: r.y + r.height / 2 }; })()`);
+await ev(`window.__spike.roLog = []; 'r'`);
+await cdp.click(pipSid!, pt.x, pt.y);
+const samples: unknown[] = [];
+for (const ms of [300, 1000, 3000]) {
+  await sleep(ms);
+  samples.push(await ev(`({ afterMs: ${ms}, pip: [window.__spike.pip.innerWidth, window.__spike.pip.innerHeight], wrapper: [${W}.offsetWidth, ${W}.offsetHeight], rowsCols: [${T}.rows, ${T}.cols], roLog: window.__spike.roLog.slice() })`));
+}
+R.afterResizeTo = samples;
+// Nudge: force a main-document rendering update; does the main RO now deliver?
+R.afterMainNudge = await ev(`(async () => { document.body.style.outline = '1px solid transparent'; document.body.offsetWidth; await new Promise(r => setTimeout(r, 600)); document.body.style.outline = ''; return { rowsCols: [${T}.rows, ${T}.cols], roLog: window.__spike.roLog.slice() }; })()`);
+// Glue candidate: manual fit via the FitAddon reached through the fiber (fitRef) — or xterm's proposeDimensions
+R.manualFit = await ev(`(() => { const S = window.__spike; const t = ${T}; const w = ${W}; let fit = null; let f = S.fiberOf(w.querySelector('.xterm').parentElement);
+  for (let d = 0; f && d < 40 && !fit; d++, f = f.return) { let hk = f.memoizedState; for (let i = 0; hk && i < 200; i++, hk = hk.next) { const c = hk.memoizedState && hk.memoizedState.current; if (c && typeof c.fit === 'function' && typeof c.proposeDimensions === 'function') { fit = c; break; } } }
+  if (!fit) return 'no fitAddon'; const before = [t.rows, t.cols]; const proposed = fit.proposeDimensions(); fit.fit(); return { before, proposed, after: [t.rows, t.cols] }; })()`);
+await h.pipShot(pipSid, "spike-01e-terminal-in-pip-after-manual-fit.png");
+await ev(`(() => { const S = window.__spike; S.moveBack(${W}); S.pip.close(); return 'done'; })()`);
+await saveResults("pip-results-resize.json", R);
+cdp.close();

package/.spike/pip-spike-setup.ts

@@ -0,0 +1,63 @@
+// Stage 1: authenticate the spike Chrome, open terminal + editor tabs, verify instances reachable.
+import { Database } from "bun:sqlite";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { CdpClient, sleep } from "./cdp-client";
+
+const PORT = 9333;
+const APP = "http://localhost:5173";
+const helpers = await Bun.file(join(import.meta.dir, "pip-page-helpers.js")).text();
+
+const db = new Database(join(homedir(), ".ppm", "ppm.dev.db"), { readonly: true });
+const token = JSON.parse((db.query("SELECT value FROM config WHERE key='auth'").get() as any).value).token as string;
+
+const cdp = await CdpClient.connect(PORT);
+const page = (await cdp.targets()).find((t) => t.type === "page" && t.url.startsWith(APP));
+if (!page) throw new Error("no app page target: " + JSON.stringify(await cdp.targets()));
+const sid = await cdp.attach(page.targetId);
+await cdp.send("Page.enable", {}, sid);
+await cdp.send("Runtime.enable", {}, sid);
+
+async function waitFor(expr: string, timeoutMs = 20000, label = expr) {
+  const t0 = Date.now();
+  while (Date.now() - t0 < timeoutMs) {
+    if (await cdp.eval<boolean>(sid, `!!(${expr})`)) return;
+    await sleep(250);
+  }
+  throw new Error(`timeout waiting: ${label}`);
+}
+
+// Auth
+const hasToken = await cdp.eval<boolean>(sid, `localStorage.getItem('ppm-auth-token') === ${JSON.stringify(token)}`);
+if (!hasToken) {
+  await cdp.eval(sid, `localStorage.setItem('ppm-auth-token', ${JSON.stringify(token)}); 'set'`);
+  await cdp.send("Page.navigate", { url: `${APP}/project/ppm` }, sid);
+  await sleep(1500);
+}
+await waitFor(`document.querySelector('[data-panel-drop-zone]')`, 30000, "app shell");
+console.log("app shell ready, url:", await cdp.eval(sid, "location.href"));
+
+// Open terminal via URL routing (pushState + popstate → autoOpenFromUrl)
+async function openViaUrl(path: string) {
+  await cdp.eval(sid, `history.pushState(null, '', ${JSON.stringify(path)}); dispatchEvent(new PopStateEvent('popstate')); 'ok'`);
+}
+await openViaUrl("/project/ppm/terminal/1");
+await waitFor(`document.querySelector('[data-tab-pool-id^="terminal"] .xterm-helper-textarea')`, 20000, "xterm");
+await openViaUrl("/project/ppm/editor/.spike/scratch-editor-target.ts");
+await waitFor(`document.querySelector('[data-tab-pool-id^="editor"] .monaco-editor .view-lines')`, 30000, "monaco");
+
+await cdp.eval(sid, helpers);
+const info = await cdp.eval(sid, `(() => {
+  const S = window.__spike;
+  const tw = document.querySelector('[data-tab-pool-id^="terminal"]');
+  const ew = document.querySelector('[data-tab-pool-id^="editor"]');
+  const term = S.findTerminal(tw); const ed = S.findEditor(ew);
+  return {
+    wrappers: [...document.querySelectorAll('[data-tab-pool-id]')].map(w => ({ id: w.dataset.tabPoolId, display: w.style.display, parent: w.parentElement?.className })),
+    termFound: !!term, termSize: term && { rows: term.rows, cols: term.cols }, termTail: term && S.termText(term, 5),
+    editorFound: !!ed, editorLine1: ed && ed.getModel().getLineContent(1), layout: ed && ed.getLayoutInfo().width,
+    htmlClass: document.documentElement.className, sheets: document.styleSheets.length, monacoGlobal: !!window.monaco,
+  };
+})()`);
+console.log(JSON.stringify(info, null, 2));
+cdp.close();

package/.spike/pip-spike-terminal-debug.ts

@@ -0,0 +1,81 @@
+// Debug stage: why does typing stop echoing after the PiP move, and does the DOM renderer survive?
+import { connectApp, saveResults, sleep } from "./pip-spike-common";
+
+const TAB = "terminal:1@panel-8281c2e3";
+const Q = `document.querySelector('[data-tab-pool-id="${TAB}"]')`;
+const W = `window.__spike.tw`;
+const T = `window.__spike.findTerminal(${W})`;
+const R: Record<string, unknown> = {};
+const h = await connectApp();
+const { ev, cdp, sid } = h;
+
+R.reset = await ev(`(() => { const S = window.__spike; const r = { hadPip: !!(S.pip && !S.pip.closed), twInPip: !!(S.tw && S.tw.ownerDocument !== document) };
+  if (r.twInPip) S.moveBack(S.tw); if (r.hadPip) S.pip.close(); S.pip = null; S.results = {}; return r; })()`);
+await sleep(500);
+await h.openViaUrl("/project/ppm/terminal/1");
+await h.waitFor(`${Q} && ${Q}.style.display !== 'none' && ${Q}.querySelector('.xterm-helper-textarea')`, 15000, "terminal visible");
+await ev(`window.__spike.tw = ${Q}; 'held'`);
+
+// Instrument: xterm onData, WebSocket ref (fiber hook whose .current is a WebSocket), ws messages
+R.instrument = await ev(`(() => {
+  const S = window.__spike; const w = ${W}; const t = ${T};
+  S.dataLog = []; S.wsMsgs = 0; S.writes = 0;
+  if (!S.instrumented) {
+    t.onData(d => S.dataLog.push(d));
+    const origWrite = t.write.bind(t); t.write = (d, cb) => { S.writes++; return origWrite(d, cb); };
+    const container = w.querySelector('.xterm').parentElement; let f = S.fiberOf(container); let ws = null;
+    for (let depth = 0; f && depth < 40 && !ws; depth++, f = f.return) {
+      let hook = f.memoizedState;
+      for (let i = 0; hook && i < 200; i++, hook = hook.next) { const c = hook.memoizedState && hook.memoizedState.current; if (c instanceof WebSocket) { ws = c; S.wsHook = hook.memoizedState; break; } }
+    }
+    if (ws) ws.addEventListener('message', () => S.wsMsgs++);
+    S.instrumented = true;
+  }
+  const ws = S.wsHook && S.wsHook.current;
+  return { wsFound: !!ws, wsState: ws && ws.readyState, wsUrl: ws && ws.url, rows: t.rows, cols: t.cols, textareaDoc: w.querySelector('.xterm-helper-textarea').ownerDocument === document };
+})()`);
+
+async function typeAndCheck(label: string, marker: string, targetSid: string, focusExpr: string) {
+  await cdp.eval(targetSid, focusExpr);
+  await ev(`window.__spike.dataLog = []; window.__spike.wsMsgs = 0; window.__spike.writes = 0; 'r'`);
+  await cdp.typeText(targetSid, `echo ${marker}`);
+  await cdp.pressKey(targetSid, "Enter", "Enter", 13, "\r");
+  await sleep(1500);
+  R[label] = await ev(`(() => { const S = window.__spike; const t = ${T}; const ws = S.wsHook && S.wsHook.current;
+    return { dataSent: S.dataLog.join(''), wsMsgs: S.wsMsgs, writes: S.writes, wsState: ws && ws.readyState, echoed: S.termText(t, 80).includes(${JSON.stringify(marker)}), tail: S.termText(t, 4) }; })()`);
+}
+
+await typeAndCheck("mainBeforePip", "DBG-MAIN-1", sid, `window.__spike.tw.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+
+R.move = await h.runGesture("pip-terminal-dbg", `async () => {
+  const S = window.__spike; const w = ${W};
+  const pip = await documentPictureInPicture.requestWindow({ width: 900, height: 600 });
+  S.pip = pip; S.copyStyles(pip.document); const moved = S.moveToPip(pip, w);
+  await new Promise(r => setTimeout(r, 400));
+  const gl = [...w.querySelectorAll('canvas')].map(c => { const ctx = c.getContext('webgl2') || c.getContext('webgl'); return ctx ? { lost: ctx.isContextLost(), dbw: ctx.drawingBufferWidth, dbh: ctx.drawingBufferHeight } : { ctx2d: !!c.getContext('2d') }; });
+  return { moved, gl, pipSize: [pip.innerWidth, pip.innerHeight], screenBg: pip.getComputedStyle(w.querySelector('.xterm-viewport')).backgroundColor };
+}`);
+const pipSid = await h.attachPip();
+R.pipAttached = !!pipSid;
+if (pipSid) {
+  R.pipFocus = await cdp.eval(pipSid, `(() => { const ta = document.querySelector('.xterm-helper-textarea'); ta.focus(); return { active: document.activeElement === ta, hasFocus: document.hasFocus(), vis: document.visibilityState }; })()`);
+  await typeAndCheck("pipTrusted", "DBG-PIP-1", pipSid, `document.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+  R.shotWebgl = await h.pipShot(pipSid, "spike-01c-terminal-pip-webgl-debug.png");
+  // Force GL context loss → app's onContextLoss disposes the WebGL addon → DOM renderer
+  R.forceLoss = await ev(`(async () => { const w = ${W}; const t = ${T}; const c = w.querySelector('canvas'); const gl = c && (c.getContext('webgl2') || c.getContext('webgl'));
+    if (!gl) return 'no gl canvas'; const ext = gl.getExtension('WEBGL_lose_context'); if (!ext) return 'no lose_context ext'; ext.loseContext();
+    await new Promise(r => setTimeout(r, 800)); t.refresh(0, t.rows - 1); await new Promise(r => setTimeout(r, 300));
+    return { canvasesLeft: w.querySelectorAll('canvas').length, rowsDom: w.querySelectorAll('.xterm-rows > div').length, rowsText: [...w.querySelectorAll('.xterm-rows > div')].slice(0, 3).map(r => r.textContent.trim()).filter(Boolean) }; })()`);
+  await sleep(500);
+  R.shotDom = await h.pipShot(pipSid, "spike-01d-terminal-pip-dom-renderer.png");
+  await typeAndCheck("pipTrustedAfterDomRenderer", "DBG-PIP-2", pipSid, `document.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+  // Resize check with DOM renderer
+  R.resizeDom = await ev(`(async () => { const w = ${W}; const t = ${T}; const b = [t.rows, t.cols]; w.style.height = '50%'; await new Promise(r => setTimeout(r, 700)); const a = [t.rows, t.cols]; w.style.height = '100%'; await new Promise(r => setTimeout(r, 700)); return { before: b, after: a, restored: [t.rows, t.cols] }; })()`);
+}
+R.back = await ev(`(async () => { const S = window.__spike; const w = ${W}; const t = ${T}; const r = S.moveBack(w); await new Promise(res => setTimeout(res, 800)); return { ...r, rows: t.rows, cols: t.cols }; })()`);
+await ev(`window.__spike.pip.close(); 'c'`);
+await sleep(400);
+await typeAndCheck("mainAfterReturn", "DBG-MAIN-2", sid, `window.__spike.tw.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+await cdp.screenshot(sid, "C:/Users/PC/ppm/plans/reports/screenshots/spike-03b-terminal-after-return-dom-renderer.png");
+await saveResults("pip-results-terminal-debug.json", R);
+cdp.close();

package/.spike/pip-spike-terminal-v2.ts

@@ -0,0 +1,139 @@
+// Stage 2 (clean re-run on a healthy terminal): full PASS/FAIL matrix for xterm in a Document PiP window.
+import { connectApp, saveResults, sleep } from "./pip-spike-common";
+
+const TAB = "terminal:2@panel-8281c2e3";
+const Q = `document.querySelector('[data-tab-pool-id="${TAB}"]')`;
+const W = `window.__spike.tw2`;
+const T = `window.__spike.t2`;
+const R: Record<string, unknown> = {};
+const h = await connectApp();
+const { ev, cdp, sid } = h;
+await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, sid);
+
+await ev(`(() => { const S = window.__spike; if (S.pip && !S.pip.closed) { if (S.tw2 && S.tw2.ownerDocument !== document) S.moveBack(S.tw2); S.pip.close(); } S.pip = null; S.results = {}; return 'reset'; })()`);
+await h.openViaUrl("/project/ppm/terminal/2");
+await h.waitFor(`${Q} && ${Q}.style.display !== 'none' && ${Q}.querySelector('.xterm-helper-textarea')`, 15000, "terminal 2 visible");
+await ev(`(() => { const S = window.__spike; S.tw2 = ${Q}; S.t2 = S.findTerminal(S.tw2); if (!S.t2Hooked) { S.dataLog2 = []; S.t2.onData(d => S.dataLog2.push(d)); S.t2Hooked = true; } return 'held'; })()`);
+
+async function typeMarker(targetSid: string, marker: string, focusExpr: string) {
+  await cdp.eval(targetSid, focusExpr);
+  await ev(`window.__spike.dataLog2 = []; 'r'`);
+  await cdp.typeText(targetSid, `echo ${marker}`);
+  await cdp.pressKey(targetSid, "Enter", "Enter", 13, "\r");
+  await sleep(1300);
+  return ev(`({ sent: window.__spike.dataLog2.join('').includes(${JSON.stringify(marker)}), echoed: window.__spike.termText(${T}, 60).includes(${JSON.stringify(marker)}) })`);
+}
+R.baselineTyping = await typeMarker(sid, "T2-BASE", `${W}.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+R.baselineSize = await ev(`({ rows: ${T}.rows, cols: ${T}.cols, canvases: ${W}.querySelectorAll('canvas').length })`);
+
+R.move = await h.runGesture("pip-terminal-v2", `async () => {
+  const S = window.__spike; const w = ${W}; const t = ${T};
+  const pip = await documentPictureInPicture.requestWindow({ width: 900, height: 600 }); S.pip = pip;
+  const styles = S.copyStyles(pip.document); const moved = S.moveToPip(pip, w); S.installClickProbes(pip, w);
+  S.glEvents = []; for (const c of w.querySelectorAll('canvas')) { c.addEventListener('webglcontextlost', () => S.glEvents.push('lost')); c.addEventListener('webglcontextrestored', () => S.glEvents.push('restored')); }
+  await new Promise(r => setTimeout(r, 600));
+  const gl = [...w.querySelectorAll('canvas')].map(c => { const g = c.getContext('webgl2'); return g ? { webgl2: true, lost: g.isContextLost() } : { webgl2: false }; });
+  return { styles, moved, pipSize: [pip.innerWidth, pip.innerHeight], rowsCols: [t.rows, t.cols], canvasesNow: w.querySelectorAll('canvas').length, gl, glEvents: S.glEvents, domRows: w.querySelectorAll('.xterm-rows > div').length,
+    theme: { pipHtmlClass: pip.document.documentElement.className, statusBg: pip.getComputedStyle(w.querySelector('.bg-surface')).backgroundColor, mainSurfaceBg: getComputedStyle(document.querySelector('.bg-surface') || document.body).backgroundColor } };
+}`);
+const pipSid = await h.attachPip();
+R.pipAttached = !!pipSid;
+if (!pipSid) throw new Error("no pip target");
+await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, pipSid);
+await sleep(700);
+R.afterFocusEmu = await ev(`({ canvases: ${W}.querySelectorAll('canvas').length, domRows: ${W}.querySelectorAll('.xterm-rows > div').length, glEvents: window.__spike.glEvents, rowsCols: [${T}.rows, ${T}.cols], vis: window.__spike.pip.document.visibilityState })`);
+R.shotInPip = await h.pipShot(pipSid, "spike-01-terminal-in-pip.png");
+
+// (b) keyboard — trusted keys via the PiP target
+R.typingInPip = await typeMarker(pipSid, "T2-IN-PIP", `document.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+R.shotTyped = await h.pipShot(pipSid, "spike-01b-terminal-in-pip-typed.png");
+
+// (c) drag selection — trusted mouse via PiP target, over the row that has the echoed text
+R.dragSelect = await (async () => {
+  const geo = await cdp.eval<any>(pipSid, `(() => { const s = document.querySelector('.xterm-screen').getBoundingClientRect(); return { x: s.x, y: s.y, w: s.width, h: s.height }; })()`);
+  const row = await ev<number>(`(() => { const t = ${T}; const b = t.buffer.active; for (let i = b.length - 1; i >= 0; i--) { if ((b.getLine(i)?.translateToString(true) ?? '').includes('T2-IN-PIP')) return i - b.viewportY; } return -1; })()`);
+  const cell = await ev<any>(`(() => { const d = ${T}._core._renderService.dimensions.css.cell; return { w: d.width, h: d.height }; })()`);
+  if (row < 0) return { error: "row not found" };
+  const y = geo.y + row * cell.h + cell.h / 2;
+  const x0 = geo.x + 2;
+  await cdp.send("Input.dispatchMouseEvent", { type: "mouseMoved", x: x0, y }, pipSid);
+  await cdp.send("Input.dispatchMouseEvent", { type: "mousePressed", x: x0, y, button: "left", clickCount: 1 }, pipSid);
+  for (let i = 1; i <= 8; i++) await cdp.send("Input.dispatchMouseEvent", { type: "mouseMoved", x: x0 + i * cell.w * 2, y, button: "left", buttons: 1 }, pipSid);
+  await cdp.send("Input.dispatchMouseEvent", { type: "mouseReleased", x: x0 + 16 * cell.w, y, button: "left", clickCount: 1 }, pipSid);
+  await sleep(300);
+  const sel = await ev<string>(`${T}.getSelection()`);
+  await h.pipShot(pipSid, "spike-01c-terminal-in-pip-selection.png");
+  await ev(`${T}.clearSelection(); 'c'`);
+  return { row, cell, selection: sel, pass: sel.length > 0 };
+})();
+
+// (d) resize: style change on wrapper (ResizeObserver path) and window.resizeTo inside a trusted click in the PiP doc
+R.resizeViaStyle = await ev(`(async () => { const w = ${W}; const t = ${T}; const before = [t.rows, t.cols]; w.style.height = '50%'; w.style.width = '70%';
+  await new Promise(r => setTimeout(r, 800)); const after = [t.rows, t.cols]; w.style.height = '100%'; w.style.width = '100%'; await new Promise(r => setTimeout(r, 800));
+  return { before, after, restored: [t.rows, t.cols], refit: before[0] !== after[0] || before[1] !== after[1] }; })()`);
+R.resizeViaWindow = await (async () => {
+  const pt = await cdp.eval<any>(pipSid, `(() => { const b = document.createElement('button'); b.id = 'rz'; b.textContent = 'rz'; b.style.cssText = 'position:fixed;right:4px;bottom:4px;z-index:99999'; b.onclick = () => { try { window.resizeTo(700, 450); window.__rz = 'ok'; } catch (e) { window.__rz = String(e); } }; document.body.append(b); const r = b.getBoundingClientRect(); return { x: r.x + r.width / 2, y: r.y + r.height / 2 }; })()`);
+  const before = await ev<any>(`[${T}.rows, ${T}.cols, window.__spike.pip.innerWidth, window.__spike.pip.innerHeight]`);
+  await cdp.click(pipSid, pt.x, pt.y);
+  await sleep(1200);
+  const after = await ev<any>(`[${T}.rows, ${T}.cols, window.__spike.pip.innerWidth, window.__spike.pip.innerHeight]`);
+  const err = await cdp.eval(pipSid, `window.__rz`);
+  await cdp.eval(pipSid, `document.getElementById('rz').remove(); 'x'`);
+  return { before, after, resizeToResult: err, refit: before[0] !== after[0] || before[1] !== after[1] };
+})();
+R.shotResized = await h.pipShot(pipSid, "spike-01d-terminal-in-pip-resized.png");
+
+// (f) React onClick inside the moved wrapper: trusted click on "Chat" (would toast "Sent to chat" in main doc)
+R.reactClickInPip = await (async () => {
+  const pt = await cdp.eval<any>(pipSid, `(() => { const r = document.querySelector('button[title="Send to Chat"]').getBoundingClientRect(); return { x: r.x + r.width / 2, y: r.y + r.height / 2 }; })()`);
+  await ev(`window.__spike.probe = { mainDocClick: 0, pipDocClick: 0, wrapperClick: 0, reactRootClick: 0 }; 'r'`);
+  await cdp.click(pipSid, pt.x, pt.y);
+  await sleep(700);
+  return ev(`({ probe: { ...window.__spike.probe }, toast: window.__spike.toastText(), reactHandlerFired: window.__spike.toastText().includes('Sent to chat') })`);
+})();
+
+// Pull-back probe: re-render ReparentingTab by switching active tab away and back via URL
+R.pullback = await (async () => {
+  const inPip0 = await ev<boolean>(`${W}.ownerDocument !== document`);
+  await h.openViaUrl("/project/ppm/editor/.spike/scratch-editor-target.ts");
+  const afterAway = await ev<any>(`({ inPip: ${W}.ownerDocument !== document, display: ${W}.style.display, parentIsSlot: ${W}.parentElement && ${W}.parentElement.className.includes('absolute inset-0') })`);
+  await h.openViaUrl("/project/ppm/terminal/2");
+  const afterBack = await ev<any>(`({ inPip: ${W}.ownerDocument !== document, display: ${W}.style.display })`);
+  return { inPipBefore: inPip0, afterSwitchAway: afterAway, afterSwitchBack: afterBack, note: "ReparentingTab layout effect re-appends wrapper into the panel slot on every re-render" };
+})();
+// Whatever state we are in now, ensure wrapper is in main, then test pagehide→moveBack survival with a second PiP
+R.ensureBack = await ev(`(() => { const S = window.__spike; const w = ${W}; const was = w.ownerDocument !== document; if (was) S.moveBack(w); return { wasInPip: was, inMain: w.ownerDocument === document }; })()`);
+await ev(`window.__spike.pip.close(); 'c'`);
+await sleep(600);
+R.afterReturnTyping = await typeMarker(sid, "T2-AFTER-RETURN", `${W}.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+R.afterReturnState = await ev(`(async () => { const S = window.__spike; const w = ${W}; const t = ${T}; const txt = S.termText(t, 200);
+  const btn = w.querySelector('button[title="Send to Chat"]'); btn.click(); await new Promise(r => setTimeout(r, 600));
+  return { rows: t.rows, cols: t.cols, canvases: w.querySelectorAll('canvas').length, scrollback: { base: txt.includes('T2-BASE'), inPip: txt.includes('T2-IN-PIP'), after: txt.includes('T2-AFTER-RETURN') }, reactClickToast: S.toastText().includes('Sent to chat') }; })()`);
+await cdp.screenshot(sid, "C:/Users/PC/ppm/plans/reports/screenshots/spike-03-terminal-after-return.png");
+
+// pagehide → move back synchronously: do listeners survive the PiP window closing?
+R.pagehideGuard = await h.runGesture("pip-terminal-pagehide", `async () => {
+  const S = window.__spike; const w = ${W};
+  const pip = await documentPictureInPicture.requestWindow({ width: 800, height: 500 }); S.pip = pip; S.copyStyles(pip.document); S.moveToPip(pip, w);
+  pip.addEventListener('pagehide', () => { S.moveBack(w); S.note('pagehide: moved back'); });
+  await new Promise(r => setTimeout(r, 500));
+  pip.close();
+  await new Promise(r => setTimeout(r, 500));
+  return { inMain: w.ownerDocument === document, closed: pip.closed };
+}`);
+R.afterPagehideTyping = await typeMarker(sid, "T2-AFTER-PAGEHIDE", `${W}.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+// Control (destructive, last): close a PiP with the wrapper still inside, then let React pull it back — listeners stripped?
+R.closeWithWrapperInside = await h.runGesture("pip-terminal-destroy", `async () => {
+  const S = window.__spike; const w = ${W};
+  const pip = await documentPictureInPicture.requestWindow({ width: 800, height: 500 }); S.pip = pip; S.copyStyles(pip.document); S.moveToPip(pip, w);
+  await new Promise(r => setTimeout(r, 500)); pip.close(); await new Promise(r => setTimeout(r, 500));
+  const r = { ownerAfterClose: w.ownerDocument === document ? 'main' : 'dead-pip-doc', connected: w.isConnected };
+  S.moveBack(w); // simulate React's layout effect re-adopting from the destroyed document
+  return { ...r, inMainNow: w.ownerDocument === document };
+}`);
+await sleep(500);
+R.afterDestroyTyping = await typeMarker(sid, "T2-AFTER-DESTROY", `${W}.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+R.afterDestroyInputApi = await ev(`(async () => { const S = window.__spike; S.dataLog2 = []; S.t2.input('echo T2-INPUT-API\\r', true); await new Promise(r => setTimeout(r, 1200)); return { sent: S.dataLog2.join('').includes('T2-INPUT-API'), echoed: S.termText(S.t2, 60).includes('T2-INPUT-API') }; })()`);
+R.log = await ev(`window.__spike.log.slice(-10)`);
+await saveResults("pip-results-terminal-v2.json", R);
+cdp.close();