@hienlh/ppm 0.18.9 → 0.18.11

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

@@ -0,0 +1,169 @@
+// Stage 2: move the live xterm tab wrapper into a Document PiP window and test it.
+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`; // held reference: querySelector can't see it once adopted into the PiP doc
+const T = `window.__spike.findTerminal(${W})`;
+const R: Record<string, unknown> = {};
+const h = await connectApp();
+const { ev, cdp, sid } = h;
+
+// Reset leftovers from an aborted run (records whether the wrapper had been pulled back while idle)
+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'`);
+
+// Baseline typing in the main document (trusted CDP keys)
+await ev(`${W}.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+await cdp.typeText(sid, "echo SPIKE-BEFORE-PIP");
+await cdp.pressKey(sid, "Enter", "Enter", 13, "\r");
+await sleep(1500);
+R.baseline = await ev(`(() => { const t = ${T}; return { rows: t.rows, cols: t.cols, echoed: window.__spike.termText(t, 80).includes('SPIKE-BEFORE-PIP'), renderer: ${W}.querySelectorAll('canvas').length + ' canvas' }; })()`);
+
+// Trusted gesture: open PiP, copy styles, move wrapper
+R.move = await h.runGesture("pip-terminal", `async () => {
+  const S = window.__spike; const w = ${W};
+  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);
+  pip.addEventListener('pagehide', () => S.note('pip pagehide'));
+  await new Promise(r => setTimeout(r, 400));
+  const t = S.findTerminal(w);
+  const xterm = w.querySelector('.xterm'); const rect = xterm.getBoundingClientRect();
+  const canvases = [...w.querySelectorAll('canvas')].map(c => ({ w: c.width, h: c.height, ctx: c.getContext ? (c.__spikeCtx ?? 'n/a') : 'n/a' }));
+  return { styles, moved, rowsCols: { rows: t.rows, cols: t.cols }, xtermRect: { w: rect.width, h: rect.height }, canvases,
+    pipInner: { w: pip.innerWidth, h: pip.innerHeight }, mainHasFocus: document.hasFocus(), pipHasFocus: pip.document.hasFocus(),
+    themeBg: pip.getComputedStyle(w.firstElementChild.firstElementChild).backgroundColor, mainThemeBg: getComputedStyle(document.body).backgroundColor,
+    pipHtmlClass: pip.document.documentElement.className };
+}`);
+await sleep(800);
+
+// Did ReparentingTab's layout effect pull it back yet?
+R.stillInPipAfterIdle = await ev(`${W}.ownerDocument === window.__spike.pip.document`);
+
+// Is the PiP window a CDP target?
+R.newTargets = await h.newTargets();
+const pipSid = await h.attachPip();
+R.pipAttached = !!pipSid;
+if (pipSid) R.pipTargetInfo = await cdp.eval(pipSid, `({ url: location.href, w: innerWidth, h: innerHeight, hasWrapper: !!document.querySelector('[data-tab-pool-id]'), title: document.title })`);
+R.shot1 = { screen: await h.screenShot("spike-01-terminal-in-pip-screen.png"), pip: await h.pipShot(pipSid, "spike-01-terminal-in-pip.png") };
+
+// (b) keyboard: trusted via pip target if possible, else synthetic DOM events
+if (pipSid) {
+  await cdp.eval(pipSid, `document.querySelector('.xterm-helper-textarea').focus(); document.activeElement.className`);
+  await cdp.typeText(pipSid, "echo SPIKE-IN-PIP-TRUSTED");
+  await cdp.pressKey(pipSid, "Enter", "Enter", 13, "\r");
+  await sleep(1500);
+  R.typingTrustedInPip = await ev(`window.__spike.termText(${T}, 80).includes('SPIKE-IN-PIP-TRUSTED')`);
+}
+R.typingSyntheticInPip = await ev(`(async () => {
+  const w = ${W}; const ta = w.querySelector('.xterm-helper-textarea'); ta.focus();
+  const type = (s) => { for (const ch of s) { ta.dispatchEvent(new InputEvent('input', { data: ch, inputType: 'insertText', bubbles: true })); } };
+  type('echo SPIKE-IN-PIP-SYNTH');
+  ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter', keyCode: 13, which: 13, bubbles: true }));
+  await new Promise(r => setTimeout(r, 1500));
+  return { echoed: window.__spike.termText(${T}, 80).includes('SPIKE-IN-PIP-SYNTH'), activeInPip: w.ownerDocument.activeElement === ta };
+})()`);
+
+// (c) mouse drag selection inside the PiP terminal
+const selExpr = `(() => { const t = ${T}; return t.getSelection(); })()`;
+if (pipSid) {
+  const rect = await cdp.eval<any>(pipSid, `(() => { const r = document.querySelector('.xterm-screen').getBoundingClientRect(); return { x: r.x, y: r.y, w: r.width, h: r.height }; })()`);
+  const y = rect.y + 8; // first row: prompt line
+  await cdp.send("Input.dispatchMouseEvent", { type: "mousePressed", x: rect.x + 4, y, button: "left", clickCount: 1 }, pipSid);
+  for (let i = 1; i <= 6; i++) await cdp.send("Input.dispatchMouseEvent", { type: "mouseMoved", x: rect.x + 4 + i * 40, y, button: "left", buttons: 1 }, pipSid);
+  await cdp.send("Input.dispatchMouseEvent", { type: "mouseReleased", x: rect.x + 244, y, button: "left", clickCount: 1 }, pipSid);
+  await sleep(300);
+  R.dragSelectTrustedInPip = { selection: await ev(selExpr), rect };
+  await ev(`${T}.clearSelection(); 'c'`);
+}
+R.dragSelectSyntheticInPip = await ev(`(async () => {
+  const w = ${W}; const t = ${T}; const pipDoc = w.ownerDocument; const screen = w.querySelector('.xterm-screen'); const r = screen.getBoundingClientRect();
+  const mk = (type, x, target, extra = {}) => target.dispatchEvent(new MouseEvent(type, { clientX: x, clientY: r.y + 8, button: 0, buttons: 1, bubbles: true, view: pipDoc.defaultView, ...extra }));
+  mk('mousedown', r.x + 4, screen);
+  for (let i = 1; i <= 6; i++) mk('mousemove', r.x + 4 + i * 40, pipDoc); // xterm listens on ownerDocument-at-open-time
+  mk('mouseup', r.x + 244, pipDoc);
+  await new Promise(res => setTimeout(res, 200));
+  const viaPipDoc = t.getSelection(); t.clearSelection();
+  mk('mousedown', r.x + 4, screen);
+  for (let i = 1; i <= 6; i++) mk('mousemove', r.x + 4 + i * 40, document);
+  mk('mouseup', r.x + 244, document);
+  await new Promise(res => setTimeout(res, 200));
+  const viaMainDoc = t.getSelection(); t.clearSelection();
+  return { viaPipDoc, viaMainDoc };
+})()`);
+
+// (d) resize: shrink wrapper height in the PiP body → ResizeObserver/fit?
+R.resizeViaStyle = await ev(`(async () => {
+  const w = ${W}; const t = ${T}; const before = { rows: t.rows, cols: t.cols };
+  w.style.height = '50%'; w.style.width = '70%';
+  await new Promise(r => setTimeout(r, 700));
+  const after = { rows: t.rows, cols: t.cols };
+  w.style.height = '100%'; w.style.width = '100%';
+  await new Promise(r => setTimeout(r, 700));
+  const restored = { rows: t.rows, cols: t.cols };
+  return { before, after, restored, refit: before.rows !== after.rows || before.cols !== after.cols };
+})()`);
+R.resizeViaWindow = await ev(`(async () => {
+  const pip = window.__spike.pip; const t = ${T}; const before = { rows: t.rows, cols: t.cols, w: pip.innerWidth, h: pip.innerHeight };
+  let err = null; try { pip.resizeTo(1100, 750); } catch (e) { err = String(e); }
+  await new Promise(r => setTimeout(r, 900));
+  return { before, after: { rows: t.rows, cols: t.cols, w: pip.innerWidth, h: pip.innerHeight }, err };
+})()`);
+
+// (f) React onClick inside the moved wrapper: the status-bar "Chat" button (toast in main doc on success)
+R.reactClick = await ev(`(async () => {
+  const S = window.__spike; const w = ${W}; const btn = w.querySelector('button[title="Send to Chat"]');
+  const probeBefore = { ...S.probe }; btn.click();
+  await new Promise(r => setTimeout(r, 600));
+  return { probeBefore, probeAfter: { ...S.probe }, toast: S.toastText(), synthetic: true };
+})()`);
+if (pipSid) {
+  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 cdp.click(pipSid, pt.x, pt.y);
+  await sleep(600);
+  R.reactClickTrusted = await ev(`({ probe: { ...window.__spike.probe }, toast: window.__spike.toastText() })`);
+}
+// Control: same button after moving back must fire (proves probe validity)
+
+// Does a main-window re-render pull the wrapper back? Click the "Terminal 1" tab header in main doc.
+R.pullbackProbe = await ev(`(async () => {
+  const w = ${W}; const inPip0 = w.ownerDocument !== document;
+  const tabBtn = [...document.querySelectorAll('[role="tab"], button, div')].find(e => e.textContent?.trim() === 'Terminal 1' && e.getBoundingClientRect().width > 0);
+  tabBtn?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })); tabBtn?.click();
+  await new Promise(r => setTimeout(r, 500));
+  return { inPipBefore: inPip0, inPipAfterTabClick: w.ownerDocument !== document, found: !!tabBtn };
+})()`);
+R.shot2 = await h.pipShot(pipSid, "spike-01b-terminal-pip-after-resize.png");
+
+// Move back to the original slot, verify state + typing
+R.back = await ev(`(async () => {
+  const S = window.__spike; const w = ${W}; const t = ${T};
+  const wasInPip = w.ownerDocument !== document;
+  const back = wasInPip ? S.moveBack(w) : { back: true, note: 'already pulled back' };
+  await new Promise(r => setTimeout(r, 800));
+  const txt = S.termText(t, 120);
+  return { wasInPip, back, rows: t.rows, cols: t.cols, scrollbackKept: { before: txt.includes('SPIKE-BEFORE-PIP'), trusted: txt.includes('SPIKE-IN-PIP-TRUSTED'), synth: txt.includes('SPIKE-IN-PIP-SYNTH') } };
+})()`);
+await ev(`window.__spike.pip && window.__spike.pip.close(); 'closed'`);
+await sleep(500);
+await ev(`${W}.querySelector('.xterm-helper-textarea').focus(); 'f'`);
+await cdp.typeText(sid, "echo SPIKE-AFTER-RETURN");
+await cdp.pressKey(sid, "Enter", "Enter", 13, "\r");
+await sleep(1500);
+R.afterReturn = await ev(`(async () => {
+  const S = window.__spike; const w = ${W}; const t = ${T};
+  const btn = w.querySelector('button[title="Send to Chat"]'); const p0 = { ...S.probe }; btn.click();
+  await new Promise(r => setTimeout(r, 600));
+  return { echoed: S.termText(t, 80).includes('SPIKE-AFTER-RETURN'), rows: t.rows, cols: t.cols, reactClickControl: { probeBefore: p0, probeAfter: { ...S.probe }, toast: S.toastText() } };
+})()`);
+await cdp.screenshot(sid, "C:/Users/PC/ppm/plans/reports/screenshots/spike-03-terminal-after-return.png");
+R.log = await ev(`window.__spike.log`);
+await saveResults("pip-results-terminal.json", R);
+cdp.close();

package/.spike/pip-spike-xterm-trace.ts

@@ -0,0 +1,36 @@
+// Debug: trace xterm's internal key path on the round-tripped terminal vs the fresh one.
+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);
+
+const TRACE = `(t, name) => {
+  const S = window.__spike; const core = t._core; S.trace = S.trace || {}; S.trace[name] = [];
+  const log = (m) => S.trace[name].push(m);
+  const wrap = (obj, key, label) => { if (!obj || typeof obj[key] !== 'function' || obj[key].__wrapped) return 'no:' + label; const o = obj[key];
+    const w = function (...a) { let r; try { r = o.apply(this, a); } finally { log(label + ' -> ' + (r && typeof r === 'object' ? JSON.stringify(r) : String(r))); } return r; }; w.__wrapped = true; obj[key] = w; return 'ok:' + label; };
+  const res = [
+    wrap(core, '_keyDown', 'keyDown'), wrap(core, '_keyPress', 'keyPress'), wrap(core, '_inputEvent', 'inputEvent'), wrap(core, '_isThirdLevelShift', 'thirdLevel'),
+    wrap(core._compositionHelper, 'keydown', 'composition.keydown'), wrap(core._keyboardService, 'evaluateKeyDown', 'evaluateKeyDown'), wrap(core.coreService, 'triggerDataEvent', 'triggerData'),
+  ];
+  return { wrapped: res, state: { unprocessedDeadKey: core._unprocessedDeadKey, keyDownHandled: core._keyDownHandled, keyPressHandled: core._keyPressHandled, isComposing: core._compositionHelper._isComposing, isSending: core._compositionHelper._isSendingComposition,
+    useKitty: core._keyboardService.useKitty, useWin32: core._keyboardService.useWin32InputMode, customHandler: !!core._customKeyEventHandler, disableStdin: core.optionsService.rawOptions.disableStdin, screenReader: core.optionsService.rawOptions.screenReaderMode,
+    textareaOwner: t.textarea.ownerDocument === document, browser: { isWindows: core.browser.isWindows, isMac: core.browser.isMac } } };
+}`;
+
+async function traceOne(label: string, tabPath: string, twExpr: string, tExpr: string) {
+  await h.openViaUrl(tabPath);
+  await sleep(500);
+  R[label + "_setup"] = await ev(`(${TRACE})(${tExpr}, ${JSON.stringify(label)})`);
+  await ev(`${twExpr}.querySelector('.xterm-helper-textarea').focus(); window.__spike.trace[${JSON.stringify(label)}] = []; 'f'`);
+  await cdp.typeText(sid, "a");
+  await cdp.pressKey(sid, "Enter", "Enter", 13, "\r");
+  await sleep(400);
+  R[label + "_trace"] = await ev(`window.__spike.trace[${JSON.stringify(label)}]`);
+}
+await traceOne("roundTripped", "/project/ppm/terminal/1", "window.__spike.tw", "window.__spike.findTerminal(window.__spike.tw)");
+await traceOne("fresh", "/project/ppm/terminal/2", "window.__spike.tw2", "window.__spike.t2");
+await saveResults("pip-results-xterm-trace.json", R);
+cdp.close();

package/.spike/probe-drag-memo-error.mjs

@@ -0,0 +1,67 @@
+// Isolates the `useWindowDrag` memo console error: opens an explorer window and clicks a
+// caption button, with NO picture-in-picture involved at all.
+import { tmpdir, homedir } from "node:os";
+import { join } from "node:path";
+import { Database } from "bun:sqlite";
+import { Cdp, launchChrome, pageInitScript, sleep } from "../tests/e2e/tab-popout-pip-helpers.mjs";
+
+const WEB = "http://localhost:5199";
+const CDP_PORT = 9361;
+const CHROME = "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";
+const RUN = Date.now().toString(36);
+const PROFILE = join(tmpdir(), `ppm-probe-${RUN}`);
+
+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().value).token;
+db.close();
+
+const WINDOWS = `(await import('/components/floating-window/window-store.ts')).useWindowStore`;
+const errors = [];
+let cdp, main, chrome;
+
+try {
+  chrome = await launchChrome({ chromePath: CHROME, cdpPort: CDP_PORT, profileDir: PROFILE, url: "about:blank" });
+  cdp = await Cdp.connect(CDP_PORT);
+  let page = null;
+  const end = Date.now() + 20000;
+  while (Date.now() < end && !page) {
+    page = (await cdp.targets()).find((t) => t.type === "page");
+    if (!page) await sleep(300);
+  }
+  main = await cdp.attach(page.targetId);
+  await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, main).catch(() => {});
+  await cdp.send("Page.addScriptToEvaluateOnNewDocument", { source: pageInitScript(TOKEN) }, main);
+  cdp.on((m) => {
+    if (m.method === "Runtime.exceptionThrown") {
+      errors.push(String(m.params?.exceptionDetails?.exception?.description ?? "").split("\n")[0]);
+    }
+  });
+  await cdp.send("Page.navigate", { url: WEB }, main);
+  await sleep(6000);
+
+  const ev = (e) => cdp.evalJs(main, e);
+  for (let i = 0; i < 3; i++) {
+    await ev(`${WINDOWS}.getState().open('explorer')`);
+    await sleep(1800);
+    const json = await ev(`(() => {
+      const el = document.querySelector('[aria-label="Close window"]');
+      if (!el) return null;
+      const r = el.getBoundingClientRect();
+      return JSON.stringify({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
+    })()`);
+    if (!json) throw new Error("no close button");
+    const { x, y } = JSON.parse(json);
+    await cdp.click(main, x, y);
+    await sleep(1200);
+  }
+  console.log(`close-button-only clicks: ${errors.length} exception(s)`);
+  for (const e of errors.slice(0, 3)) console.log("  " + e);
+} finally {
+  try {
+    await cdp?.send("Browser.close");
+  } catch {}
+  await sleep(1000);
+  try {
+    if (chrome?.pid) process.kill(chrome.pid);
+  } catch {}
+}

package/.spike/read-dev-db.ts

@@ -0,0 +1,15 @@
+// Read auth token + projects from the dev DB (readonly). Spike helper only.
+import { Database } from "bun:sqlite";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+const db = new Database(join(homedir(), ".ppm", "ppm.dev.db"), { readonly: true });
+const auth = db.query("SELECT value FROM config WHERE key = 'auth'").get() as { value: string } | null;
+const tables = db.query("SELECT name FROM sqlite_master WHERE type='table'").all() as { name: string }[];
+let projects: unknown[] = [];
+try {
+  projects = db.query("SELECT * FROM projects LIMIT 10").all();
+} catch (e) {
+  projects = [String(e)];
+}
+console.log(JSON.stringify({ auth: auth ? JSON.parse(auth.value) : null, tables: tables.map((t) => t.name), projects }, null, 2));

package/.spike/scratch-editor-target.ts

@@ -0,0 +1,7 @@
+MAIN1 MAIN1 // Scratch file for the Document PiP spike. Monaco autosaves edits here; safe to delete.
+export const spikeLine1 = "one";
+export const spikeLine2 = "two";
+export const spikeLine3 = "three";
+export function spikeFn(a: number, b: number): number {
+  return a + b;
+}

package/.spike/smoke-unified-chrome-pip.mjs

@@ -0,0 +1,353 @@
+// Throwaway manual smoke for the unified window chrome + frame-owned PiP.
+// Not part of the test suite; lives in .spike/ (untracked).
+//   bun .spike/smoke-unified-chrome-pip.mjs
+import { tmpdir, homedir } from "node:os";
+import { join } from "node:path";
+import { mkdir, rm, writeFile } from "node:fs/promises";
+import { Database } from "bun:sqlite";
+import { Cdp, launchChrome, pageInitScript, sleep } from "../tests/e2e/tab-popout-pip-helpers.mjs";
+
+const WEB = "http://localhost:5199";
+const API = "http://127.0.0.1:8099";
+const CDP_PORT = 9357;
+const CHROME = "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";
+const RUN = Date.now().toString(36);
+const PROFILE = join(tmpdir(), `ppm-smoke-${RUN}`);
+const PROJECT_DIR = join(tmpdir(), `ppm-smoke-proj-${RUN}`);
+const PROJECT_NAME = `smoke-pip-${RUN}`;
+
+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().value).token;
+db.close();
+
+const out = [];
+const rec = (name, pass, detail = "") => {
+  out.push({ name, pass, detail });
+  console.log(`[${pass ? "PASS" : "FAIL"}] ${name}${detail ? " — " + detail : ""}`);
+};
+
+let cdp, main, mainTargetId, chrome;
+const ev = (e, ms) => cdp.evalJs(main, e, ms);
+const WINDOWS = `(await import('/components/floating-window/window-store.ts')).useWindowStore`;
+const PANELS = `(await import('/stores/panel-store.ts')).usePanelStore`;
+const PIPREG = `(await import('/components/floating-window/window-pip-registry.ts'))`;
+
+async function waitFor(expr, ms = 25000, label = expr) {
+  const end = Date.now() + ms;
+  let last;
+  while (Date.now() < end) {
+    try {
+      last = await ev(`!!(${expr})`, 8000);
+      if (last) return true;
+    } catch (e) {
+      last = e.message;
+    }
+    await sleep(250);
+  }
+  throw new Error(`timeout: ${label} (last=${last})`);
+}
+
+async function clickSel(selectorExpr, label, sid = main) {
+  const json = await cdp.evalJs(
+    sid,
+    `(() => { const el = ${selectorExpr}; if (!el) return null; const r = el.getBoundingClientRect();
+      return JSON.stringify({ x: r.x + r.width / 2, y: r.y + r.height / 2 }); })()`,
+  );
+  if (!json) throw new Error(`not found: ${label}`);
+  const { x, y } = JSON.parse(json);
+  await cdp.click(sid, x, y);
+}
+
+const pipBtn = (winLabelIdx = 0) =>
+  `[...document.querySelectorAll('[aria-label="Open in picture-in-picture"]')][${winLabelIdx}]`;
+
+async function findPipTarget() {
+  const t = await cdp.targets();
+  return t.find((x) => x.type === "page" && x.openerId === mainTargetId && x.targetId !== mainTargetId) ?? null;
+}
+
+async function waitPipTarget(open = true, ms = 15000) {
+  const end = Date.now() + ms;
+  while (Date.now() < end) {
+    await sleep(300);
+    const t = await findPipTarget();
+    if (open && t) return t;
+    if (!open && !t) return null;
+  }
+  throw new Error(open ? "PiP never opened" : "PiP never closed");
+}
+
+const errors = [];
+
+async function api(method, path, body) {
+  const r = await fetch(`${API}${path}`, {
+    method,
+    headers: { Authorization: `Bearer ${TOKEN}`, "Content-Type": "application/json" },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  return r.json();
+}
+
+/** Real double-click: a second press with clickCount 2 is what makes Chrome emit `dblclick`. */
+async function dblclick(sid, x, y) {
+  await cdp.send("Input.dispatchMouseEvent", { type: "mouseMoved", x, y }, sid);
+  for (const clickCount of [1, 2]) {
+    const base = { x, y, button: "left", clickCount };
+    await cdp.send("Input.dispatchMouseEvent", { ...base, type: "mousePressed" }, sid);
+    await cdp.send("Input.dispatchMouseEvent", { ...base, type: "mouseReleased" }, sid);
+  }
+}
+
+/** `use-terminal` hard-codes ws://<host>:8081 for http dev; this dev stack is on 8099. */
+async function retargetTerminalWs(sid, port) {
+  await cdp.send("Network.enable", {}, sid).catch(() => {});
+  await cdp.send("Network.setCacheDisabled", { cacheDisabled: true }, sid).catch(() => {});
+  await cdp.send("Fetch.enable", { patterns: [{ urlPattern: "*/hooks/use-terminal.ts*", requestStage: "Response" }] }, sid);
+  cdp.on(async (m) => {
+    if (m.method !== "Fetch.requestPaused" || m.sessionId !== sid) return;
+    const { requestId } = m.params;
+    try {
+      const r = await cdp.send("Fetch.getResponseBody", { requestId }, sid);
+      const text = (r.base64Encoded ? Buffer.from(r.body, "base64").toString("utf8") : r.body).replace(
+        /hostname\}:8081/g,
+        `hostname}:${port}`,
+      );
+      await cdp.send("Fetch.fulfillRequest", {
+        requestId,
+        responseCode: 200,
+        responseHeaders: [
+          { name: "content-type", value: "application/javascript" },
+          { name: "cache-control", value: "no-store" },
+        ],
+        body: Buffer.from(text, "utf8").toString("base64"),
+      }, sid);
+    } catch {
+      await cdp.send("Fetch.continueRequest", { requestId }, sid).catch(() => {});
+    }
+  });
+}
+
+async function main_() {
+  await mkdir(PROJECT_DIR, { recursive: true });
+  await writeFile(join(PROJECT_DIR, "scratch.ts"), "export const scratch = 1;\n", "utf8");
+  const created = await api("POST", "/api/projects", { path: PROJECT_DIR, name: PROJECT_NAME });
+  if (!created?.ok && !created?.data) throw new Error(`temp project not created: ${JSON.stringify(created)}`);
+  console.log(`temp project ${PROJECT_NAME} → ${PROJECT_DIR}`);
+
+  chrome = await launchChrome({ chromePath: CHROME, cdpPort: CDP_PORT, profileDir: PROFILE, url: "about:blank" });
+  cdp = await Cdp.connect(CDP_PORT);
+  const end = Date.now() + 20000;
+  let page = null;
+  while (Date.now() < end && !page) {
+    page = (await cdp.targets()).find((t) => t.type === "page");
+    if (!page) await sleep(300);
+  }
+  mainTargetId = page.targetId;
+  main = await cdp.attach(mainTargetId);
+  await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, main).catch(() => {});
+  await cdp.send("Page.addScriptToEvaluateOnNewDocument", { source: pageInitScript(TOKEN) }, main);
+  cdp.on((m) => {
+    if (m.method === "Runtime.consoleAPICalled" && m.params?.type === "error") {
+      errors.push(JSON.stringify(m.params.args?.map((a) => a.value ?? a.description)).slice(0, 300));
+    }
+    if (m.method === "Runtime.exceptionThrown") {
+      errors.push(String(m.params?.exceptionDetails?.exception?.description ?? "").slice(0, 300));
+    }
+  });
+  await retargetTerminalWs(main, "8099");
+  await cdp.send("Page.navigate", { url: `${WEB}/project/${PROJECT_NAME}` }, main);
+  await sleep(4000);
+  await waitFor(
+    `(await import('/stores/project-store.ts')).useProjectStore.getState().activeProject?.name === ${JSON.stringify(PROJECT_NAME)}`,
+    40000,
+    "temp project active",
+  );
+  await waitFor(`${PANELS}.getState().grid.flat().length > 0`, 20000, "grid ready");
+  await sleep(1500);
+
+  // ---- 1. explorer window ----
+  const expId = await ev(`${WINDOWS}.getState().open('explorer')`);
+  await sleep(2000);
+  const expChrome = JSON.parse(await ev(`(async () => {
+    const win = document.querySelector('[role="group"][aria-roledescription="window"]');
+    const bar = win?.querySelector('[data-skin]');
+    return JSON.stringify({
+      skin: bar?.getAttribute('data-skin') ?? null,
+      pip: !!win?.querySelector('[aria-label="Open in picture-in-picture"]'),
+      folderIcon: !!bar?.querySelector('svg'),
+    });
+  })()`));
+  rec("explorer window wears a skinned titlebar with a PiP button", !!expChrome.skin && expChrome.pip, JSON.stringify(expChrome));
+
+  // ---- 2. explorer PiP: React events alive (folder click navigates) ----
+  await clickSel(pipBtn(), "explorer pip button");
+  const pipT = await waitPipTarget(true);
+  const pipSid = await cdp.attach(pipT.targetId);
+  await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, pipSid).catch(() => {});
+  await sleep(1200);
+  const inPip = await ev(`!!(${PIPREG}.windowPip(${JSON.stringify(expId)}))`);
+  const placeholder = await ev(`document.body.innerText.includes('Playing in picture-in-picture')`);
+  rec("explorer body adopted into PiP + frame shows the placeholder", inPip && placeholder, `pip=${inPip} placeholder=${placeholder}`);
+
+  // Double-click a directory row inside the PiP document (explorer opens folders on dblclick).
+  const currentPath = () =>
+    ev(`(await import('/components/os-explorer/explorer-store.ts')).useExplorerStore.getState().slices[${JSON.stringify(expId)}]?.path ?? null`);
+  const pathBefore = await currentPath();
+  const target = await ev(`(async () => {
+    const st = (await import('/components/os-explorer/explorer-store.ts')).useExplorerStore.getState();
+    const slice = st.slices[${JSON.stringify(expId)}];
+    const dir = (slice?.entries ?? []).find(e => e.type === 'directory');
+    return dir ? dir.path : null;
+  })()`);
+  const navigated = await (async () => {
+    if (!target) return "no-directory-entry";
+    const json = await cdp.evalJs(pipSid, `(() => {
+      const el = document.querySelector('[data-testid="explorer-row"][data-path=' + JSON.stringify(${JSON.stringify(target)}) + ']');
+      if (!el) return null;
+      const r = el.getBoundingClientRect();
+      return JSON.stringify({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
+    })()`);
+    if (!json) return "row-not-in-pip-doc";
+    const { x, y } = JSON.parse(json);
+    await dblclick(pipSid, x, y);
+    await sleep(2500);
+    const after = await currentPath();
+    return after && after !== pathBefore ? "ok" : `unchanged (${pathBefore} → ${after})`;
+  })();
+  rec("clicking a folder inside the PiP explorer navigates (React events alive)", navigated === "ok", `${navigated} target=${target}`);
+
+  // ---- 3. close PiP restores ----
+  await clickSel(`document.querySelector('[aria-label="Bring back from picture-in-picture"]')`, "bring back");
+  await waitPipTarget(false);
+  const restored = await ev(`(async () => {
+    const win = document.querySelector('[role="group"][aria-roledescription="window"]');
+    return !!win && !document.body.innerText.includes('Playing in picture-in-picture') && win.children.length > 1;
+  })()`);
+  rec("closing PiP restores the explorer body into its window", restored, `restored=${restored}`);
+  await ev(`${WINDOWS}.getState().close(${JSON.stringify(expId)})`);
+  await sleep(600);
+
+  // ---- 4. system monitor window ----
+  const sysId = await ev(`${WINDOWS}.getState().open('system-monitor')`);
+  await sleep(2500);
+  const sysChrome = JSON.parse(await ev(`(async () => {
+    const win = document.querySelector('[role="group"][aria-roledescription="window"]');
+    const bar = win?.querySelector('[data-skin]');
+    return JSON.stringify({ skin: bar?.getAttribute('data-skin') ?? null, pip: !!win?.querySelector('[aria-label="Open in picture-in-picture"]') });
+  })()`));
+  rec("system monitor window has the same skin + a PiP button", !!sysChrome.skin && sysChrome.pip, JSON.stringify(sysChrome));
+  await clickSel(pipBtn(), "sysmon pip button");
+  const sysPip = await waitPipTarget(true);
+  const sysSid = await cdp.attach(sysPip.targetId);
+  await sleep(1500);
+  const sysAlive = await cdp.evalJs(sysSid, `document.body.innerText.length > 40`);
+  rec("system monitor renders inside PiP", !!sysAlive, `textLen>40=${sysAlive}`);
+  await clickSel(`document.querySelector('[aria-label="Bring back from picture-in-picture"]')`, "bring back sysmon");
+  await waitPipTarget(false);
+  await ev(`${WINDOWS}.getState().close(${JSON.stringify(sysId)})`);
+  await sleep(600);
+
+  // ---- 5. terminal tab pop-out ----
+  const TERM = await ev(`${PANELS}.getState().openTab({ type: 'terminal', title: 'Terminal 1', projectId: ${JSON.stringify(PROJECT_NAME)}, closable: true, metadata: { terminalIndex: 1, projectName: ${JSON.stringify(PROJECT_NAME)} } })`);
+  const sel = (extra = "") => `document.querySelector('[data-tab-pool-id=' + ${JSON.stringify(JSON.stringify(TERM))} + ']${extra}')`;
+  await waitFor(sel(" .xterm"), 40000, "xterm mounted");
+  await sleep(2000);
+  const winId = await ev(`(async () => {
+    const p = ${PANELS}.getState();
+    const pid = Object.keys(p.panels).find(id => p.panels[id].tabs.some(t => t.id === ${JSON.stringify(TERM)}));
+    return p.popOutTab(${JSON.stringify(TERM)}, pid);
+  })()`);
+  await sleep(1800);
+  const tabChrome = JSON.parse(await ev(`(async () => {
+    const win = document.querySelector('[role="group"][aria-roledescription="window"]');
+    const bar = win?.querySelector('[data-skin]');
+    return JSON.stringify({
+      skin: bar?.getAttribute('data-skin') ?? null,
+      pip: !!win?.querySelector('[aria-label="Open in picture-in-picture"]'),
+    });
+  })()`));
+  rec(
+    "popped-out tab window wears the SAME skin as the explorer",
+    tabChrome.skin === expChrome.skin && tabChrome.pip,
+    `tab=${JSON.stringify(tabChrome)} explorer=${JSON.stringify(expChrome)}`,
+  );
+
+  await clickSel(pipBtn(), "tab pip button");
+  const tPip = await waitPipTarget(true);
+  const tSid = await cdp.attach(tPip.targetId);
+  await cdp.send("Emulation.setFocusEmulationEnabled", { enabled: true }, tSid).catch(() => {});
+  await sleep(1500);
+  const termInPip = await cdp.evalJs(tSid, `!!${sel(" .xterm")}`);
+  rec("terminal tab lives in the PiP document", !!termInPip, `xterm=${termInPip}`);
+
+  // Close the window WHILE in PiP → must restore and re-dock.
+  await clickSel(`document.querySelector('[aria-label="Close window"]')`, "close window");
+  await waitPipTarget(false);
+  await sleep(1500);
+  const redocked = JSON.parse(await ev(`(async () => {
+    const p = ${PANELS}.getState();
+    const pid = Object.keys(p.panels).find(id => p.panels[id].tabs.some(t => t.id === ${JSON.stringify(TERM)}));
+    return JSON.stringify({
+      panel: pid ?? null,
+      gridded: !!pid && p.grid.flat().includes(pid),
+      inMainDoc: !!${sel()},
+      windows: Object.keys(${WINDOWS}.getState().windows).length,
+    });
+  })()`));
+  rec(
+    "closing the window while in PiP restores + re-docks the tab",
+    !!redocked.panel && redocked.gridded && redocked.inMainDoc && redocked.windows === 0,
+    JSON.stringify(redocked),
+  );
+
+  // ---- 6. the other skin: folder glyph is explorer-only ----
+  await ev(`(await import('/stores/settings-store.ts')).useSettingsStore.setState({ explorerSkin: 'windows' })`);
+  const winSkinExp = await ev(`${WINDOWS}.getState().open('explorer')`);
+  await sleep(1800);
+  const winSkinSys = await ev(`${WINDOWS}.getState().open('system-monitor')`);
+  await sleep(2200);
+  const skinCheck = JSON.parse(await ev(`(async () => {
+    const wins =[...document.querySelectorAll('[role="group"][aria-roledescription="window"]')].map(w => {
+      const bar = w.querySelector('[data-skin]');
+      return {
+        label: w.getAttribute('aria-label'),
+        skin: bar?.getAttribute('data-skin') ?? null,
+        icon: !!bar?.querySelector('div > svg'),
+        pip: !!w.querySelector('[aria-label="Open in picture-in-picture"]'),
+      };
+    });
+    return JSON.stringify(wins);
+  })()`));
+  const sysWin = skinCheck.find((w) => w.label === "System Monitor");
+  const expWin = skinCheck.find((w) => w.label !== "System Monitor");
+  rec(
+    "windows skin: both kinds skinned + PiP, folder glyph only on the explorer",
+    skinCheck.every((w) => w.skin === "windows" && w.pip) && expWin?.icon === true && sysWin?.icon === false,
+    JSON.stringify(skinCheck),
+  );
+  await ev(`(async () => { const w = ${WINDOWS}.getState(); w.close(${JSON.stringify(winSkinExp)}); w.close(${JSON.stringify(winSkinSys)}); return 'ok'; })()`);
+  await sleep(600);
+
+  rec("no console errors during the smoke", errors.length === 0, errors.slice(0, 4).join(" || "));
+}
+
+try {
+  await main_();
+} catch (e) {
+  rec("smoke aborted", false, e?.message ?? String(e));
+} finally {
+  console.log(`\nPID ${chrome?.pid} — closing`);
+  try {
+    await cdp?.send("Browser.close");
+  } catch {}
+  await sleep(1200);
+  try {
+    if (chrome?.pid) process.kill(chrome.pid);
+  } catch {}
+  const removed = await api("DELETE", `/api/projects/${PROJECT_NAME}`).catch((e) => ({ error: String(e) }));
+  console.log(`temp project removed: ${JSON.stringify(removed)}`);
+  await rm(PROJECT_DIR, { recursive: true, force: true }).catch(() => {});
+  const failed = out.filter((r) => !r.pass);
+  console.log(`\n${out.length - failed.length}/${out.length} passed`);
+  process.exit(failed.length ? 1 : 0);
+}