codeplay-common 4.3.2 → 4.3.4

package/files/take-responsive-screenshot.js

@@ -0,0 +1,1468 @@
+const fs = require('node:fs');
+const path = require('node:path');
+const readline = require('node:readline/promises');
+const { spawn, spawnSync } = require('node:child_process');
+
+const screenshotDirectory = path.join(__dirname, 'Auto-Screenshot', 'Responsive');
+const inFrameDirectory = path.join(__dirname, 'Auto-Screenshot', 'In-Frame');
+const capacitorConfigPath = path.join(__dirname, 'capacitor.config.json');
+const temporaryDirectory = path.join(__dirname, 'agent-temp');
+const browserExecutablePaths = [
+  'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+  'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+  'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
+  'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
+];
+
+const deviceProfiles = [
+  {
+    name: 'android-phone',
+    label: 'Android phone',
+    outputDirectory: 'Android',
+    frameType: 'android-phone',
+    width: 360,
+    height: 800,
+    deviceScaleFactor: 3,
+    orientationSensitive: true,
+    mobile: true,
+  },
+  {
+    name: 'android-tablet',
+    label: 'Android tablet',
+    outputDirectory: 'Android-Tab',
+    frameType: 'tablet',
+    width: 800,
+    height: 1280,
+    deviceScaleFactor: 2,
+    orientationSensitive: true,
+    mobile: true,
+  },
+  {
+    name: 'iphone',
+    label: 'iPhone 6.9-inch App Store viewport',
+    outputDirectory: 'iPhone',
+    frameType: 'iphone',
+    width: 440,
+    height: 956,
+    deviceScaleFactor: 3,
+    framedWidth: 1284,
+    framedHeight: 2778,
+    orientationSensitive: true,
+    mobile: true,
+  },
+  {
+    name: 'ipad',
+    label: 'iPad 13-inch App Store viewport',
+    outputDirectory: 'iPad',
+    frameType: 'tablet',
+    width: 1032,
+    height: 1376,
+    deviceScaleFactor: 2,
+    framedWidth: 2048,
+    framedHeight: 2732,
+    orientationSensitive: true,
+    mobile: true,
+  },
+  {
+    name: 'apple-vision-pro',
+    label: 'Apple Vision Pro',
+    outputDirectory: 'Apple-Vision-Pro',
+    frameType: 'apple-vision-pro',
+    width: 3840,
+    height: 2160,
+    deviceScaleFactor: 1,
+    framedWidth: 3840,
+    framedHeight: 2160,
+    mobile: false,
+  },
+  {
+    name: 'apple-tv',
+    label: 'Apple TV',
+    outputDirectory: 'Apple-TV',
+    frameType: 'apple-tv',
+    width: 1920,
+    height: 1080,
+    deviceScaleFactor: 1,
+    framedWidth: 1920,
+    framedHeight: 1080,
+    mobile: false,
+  },
+  {
+    name: 'apple-watch',
+    label: 'Apple Watch Ultra 3',
+    outputDirectory: 'Apple-Watch',
+    frameType: 'apple-watch',
+    width: 422,
+    height: 514,
+    deviceScaleFactor: 1,
+    framedWidth: 422,
+    framedHeight: 514,
+    mobile: true,
+  },
+  {
+    name: 'amazon-mobile',
+    label: 'Amazon mobile store viewport',
+    outputDirectory: 'Amazon-Phone',
+    frameType: 'android-phone',
+    width: 360,
+    height: 640,
+    deviceScaleFactor: 3,
+    orientationSensitive: true,
+    mobile: true,
+  },
+  {
+    name: 'amazon-fire-tablet',
+    label: 'Amazon Fire tablet store viewport',
+    outputDirectory: 'Amazon-Tab',
+    frameType: 'tablet',
+    width: 800,
+    height: 1280,
+    deviceScaleFactor: 2,
+    orientationSensitive: true,
+    mobile: true,
+  },
+  {
+    name: 'amazon-fire-tv',
+    label: 'Amazon Fire TV store viewport',
+    outputDirectory: 'Amazon-TV',
+    frameType: 'tv',
+    width: 1920,
+    height: 1080,
+    deviceScaleFactor: 1,
+    mobile: false,
+  },
+  {
+    name: 'android-tv',
+    label: 'Android TV',
+    outputDirectory: 'Android-TV',
+    frameType: 'tv',
+    width: 1920,
+    height: 1080,
+    deviceScaleFactor: 1,
+    mobile: false,
+  },
+  {
+    name: 'chromebook',
+    label: 'Chromebook-sized viewport',
+    outputDirectory: 'Chromebook',
+    frameType: 'laptop',
+    width: 1366,
+    height: 768,
+    deviceScaleFactor: 1,
+    mobile: false,
+  },
+  {
+    name: 'android-xr',
+    label: 'Android XR 2D panel approximation',
+    outputDirectory: 'Android-XR',
+    frameType: 'xr',
+    width: 1920,
+    height: 1080,
+    deviceScaleFactor: 1,
+    mobile: false,
+  },
+  {
+    name: 'mac',
+    label: 'Mac-sized viewport',
+    outputDirectory: 'Mac',
+    frameType: 'laptop',
+    width: 1440,
+    height: 900,
+    deviceScaleFactor: 2,
+    mobile: false,
+  },
+];
+
+function getConfiguredOrientation() {
+  const config = JSON.parse(fs.readFileSync(capacitorConfigPath, 'utf8'));
+  return String(config.android?.ORIENTATION || 'portrait').toLowerCase() === 'landscape'
+    ? 'landscape'
+    : 'portrait';
+}
+
+function orientProfile(profile, orientation) {
+  if (orientation !== 'landscape' || !profile.orientationSensitive) {
+    return profile;
+  }
+
+  return {
+    ...profile,
+    width: profile.height,
+    height: profile.width,
+    framedWidth: profile.framedHeight,
+    framedHeight: profile.framedWidth,
+  };
+}
+
+function runAdb(args, options = {}) {
+  const result = spawnSync('adb', args, {
+    encoding: 'utf8',
+    timeout: 30000,
+    windowsHide: true,
+    ...options,
+  });
+
+  if (result.error) {
+    if (result.error.code === 'ENOENT') {
+      throw new Error('ADB was not found. Add Android platform-tools to your PATH.');
+    }
+
+    if (result.error.code === 'ETIMEDOUT') {
+      throw new Error('ADB did not respond within 30 seconds. Check the device connection.');
+    }
+
+    throw result.error;
+  }
+
+  if (result.status !== 0) {
+    throw new Error(result.stderr.trim() || `ADB exited with code ${result.status}.`);
+  }
+
+  return result.stdout.trim();
+}
+
+function getConnectedDevice() {
+  const devices = runAdb(['devices'])
+    .split(/\r?\n/)
+    .map((line) => line.match(/^(\S+)\s+device$/))
+    .filter(Boolean)
+    .map((match) => match[1]);
+
+  if (!devices.length) {
+    throw new Error('no_connected_device');
+  }
+
+  return devices[0];
+}
+
+function getAppId() {
+  const config = JSON.parse(fs.readFileSync(capacitorConfigPath, 'utf8'));
+
+  if (!config.appId) {
+    throw new Error('capacitor.config.json does not contain an appId.');
+  }
+
+  return config.appId;
+}
+
+function getWebViewSocket(deviceId, appId) {
+  const processIds = runAdb(['-s', deviceId, 'shell', 'pidof', appId])
+    .split(/\s+/)
+    .filter(Boolean);
+
+  if (!processIds.length) {
+    throw new Error(`The app process is not running: ${appId}`);
+  }
+
+  const sockets = runAdb(['-s', deviceId, 'shell', 'cat', '/proc/net/unix']);
+
+  for (const processId of processIds) {
+    const socketName = `webview_devtools_remote_${processId}`;
+
+    if (sockets.includes(`@${socketName}`)) {
+      return socketName;
+    }
+  }
+
+  throw new Error(
+    'The running app does not expose a debuggable WebView. Use a debug/live-reload build with WebView debugging enabled.',
+  );
+}
+
+function sanitizeName(input, fallback) {
+  const sanitized = input
+    .trim()
+    .replace(/[<>:"/\\|?*\u0000-\u001F]/g, '_')
+    .replace(/[. ]+$/g, '');
+
+  return sanitized || fallback;
+}
+
+function getSelectedOutputDirectories(selectedProfiles) {
+  return [...new Set(selectedProfiles.flatMap((profile) => ([
+    path.join(screenshotDirectory, profile.outputDirectory),
+    path.join(inFrameDirectory, profile.outputDirectory),
+  ])))];
+}
+
+function getNextNumberedFileName(selectedProfiles) {
+  const highestNumber = getSelectedOutputDirectories(selectedProfiles)
+    .filter((directory) => fs.existsSync(directory))
+    .reduce((highestAcrossDirectories, directory) => {
+      const highestInDirectory = fs.readdirSync(directory, { withFileTypes: true })
+        .filter((entry) => entry.isFile())
+        .reduce((highest, entry) => {
+          const match = entry.name.match(/^(\d+)\.png$/i);
+          return match ? Math.max(highest, Number(match[1])) : highest;
+        }, 0);
+
+      return Math.max(highestAcrossDirectories, highestInDirectory);
+    }, 0);
+
+  return `${highestNumber + 1}.png`;
+}
+
+function getUniqueFileName(prefix, selectedProfiles) {
+  const outputDirectories = getSelectedOutputDirectories(selectedProfiles);
+  let fileName = `${prefix}.png`;
+  let duplicateNumber = 2;
+
+  while (outputDirectories.some((directory) => (
+    fs.existsSync(path.join(directory, fileName))
+  ))) {
+    fileName = `${prefix}-${duplicateNumber}.png`;
+    duplicateNumber += 1;
+  }
+
+  return fileName;
+}
+
+function getScreenshotFileName(fileNameInput, selectedProfiles) {
+  const inputWithoutExtension = fileNameInput.trim().replace(/\.png$/i, '');
+
+  if (!inputWithoutExtension) {
+    return getNextNumberedFileName(selectedProfiles);
+  }
+
+  let prefix = sanitizeName(inputWithoutExtension, '');
+
+  if (!prefix) {
+    return getNextNumberedFileName(selectedProfiles);
+  }
+
+  if (/^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i.test(prefix)) {
+    prefix = `${prefix}_`;
+  }
+
+  return getUniqueFileName(prefix, selectedProfiles);
+}
+
+function parseArguments() {
+  const args = process.argv.slice(2);
+  const options = {
+    dryRun: false,
+    frameExisting: false,
+    help: false,
+    list: false,
+    prefix: '',
+    profiles: '',
+  };
+
+  for (let index = 0; index < args.length; index += 1) {
+    const argument = args[index];
+
+    if (argument === '--dry-run') {
+      options.dryRun = true;
+    } else if (argument === '--frame-existing') {
+      options.frameExisting = true;
+    } else if (argument === '--help' || argument === '-h') {
+      options.help = true;
+    } else if (argument === '--list') {
+      options.list = true;
+    } else if (argument === '--prefix') {
+      options.prefix = args[index + 1] || '';
+      index += 1;
+    } else if (argument === '--profiles') {
+      options.profiles = args[index + 1] || '';
+      index += 1;
+    } else {
+      throw new Error(`Unknown argument: ${argument}`);
+    }
+  }
+
+  return options;
+}
+
+function printProfiles() {
+  const orientation = getConfiguredOrientation();
+
+  for (const baseProfile of deviceProfiles) {
+    const profile = orientProfile(baseProfile, orientation);
+    const outputWidth = profile.width * profile.deviceScaleFactor;
+    const outputHeight = profile.height * profile.deviceScaleFactor;
+    const framedSize = profile.framedWidth
+      ? `, framed PNG ${profile.framedWidth}x${profile.framedHeight}`
+      : '';
+    console.log(
+      `${profile.name.padEnd(15)} ${profile.label} `
+      + `(folder ${profile.outputDirectory}, viewport ${profile.width}x${profile.height}, `
+      + `PNG ${outputWidth}x${outputHeight}${framedSize})`,
+    );
+  }
+}
+
+function printHelp() {
+  console.log('Capture the current live Android WebView at multiple responsive viewport sizes.');
+  console.log('');
+  console.log('Usage:');
+  console.log('  node take-responsive-screenshot.js');
+  console.log('  node take-responsive-screenshot.js --profiles iphone,ipad');
+  console.log('  node take-responsive-screenshot.js --prefix home --profiles android-phone,ipad');
+  console.log('  node take-responsive-screenshot.js --frame-existing');
+  console.log('  node take-responsive-screenshot.js --dry-run');
+  console.log('  node take-responsive-screenshot.js --list');
+}
+
+function selectProfiles(input) {
+  const orientation = getConfiguredOrientation();
+  const names = input
+    .split(',')
+    .map((name) => name.trim().toLowerCase())
+    .filter(Boolean);
+
+  if (!names.length || names.includes('all')) {
+    return deviceProfiles.map((profile) => orientProfile(profile, orientation));
+  }
+
+  const selectedProfiles = names.map((name) => {
+    const profile = deviceProfiles.find((candidate) => candidate.name === name);
+
+    if (!profile) {
+      throw new Error(`Unknown profile: ${name}. Run with --list to see valid profiles.`);
+    }
+
+    return profile;
+  });
+
+  return [...new Map(selectedProfiles.map((profile) => [profile.name, profile])).values()]
+    .map((profile) => orientProfile(profile, orientation));
+}
+
+class CdpClient {
+  constructor(webSocketUrl) {
+    this.nextId = 1;
+    this.pendingCommands = new Map();
+    this.socket = new WebSocket(webSocketUrl);
+  }
+
+  connect() {
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(new Error('Timed out while connecting to the app WebView.'));
+      }, 10000);
+
+      this.socket.addEventListener('open', () => {
+        clearTimeout(timeout);
+        resolve();
+      }, { once: true });
+
+      this.socket.addEventListener('error', () => {
+        clearTimeout(timeout);
+        reject(new Error('Could not connect to the app WebView debugging socket.'));
+      }, { once: true });
+
+      this.socket.addEventListener('message', (event) => {
+        const message = JSON.parse(event.data);
+
+        if (!message.id || !this.pendingCommands.has(message.id)) {
+          return;
+        }
+
+        const pendingCommand = this.pendingCommands.get(message.id);
+        this.pendingCommands.delete(message.id);
+
+        if (message.error) {
+          pendingCommand.reject(new Error(message.error.message));
+        } else {
+          pendingCommand.resolve(message.result);
+        }
+      });
+
+      this.socket.addEventListener('close', () => {
+        for (const pendingCommand of this.pendingCommands.values()) {
+          pendingCommand.reject(new Error('The app WebView debugging connection closed.'));
+        }
+
+        this.pendingCommands.clear();
+      });
+    });
+  }
+
+  send(method, params = {}) {
+    return new Promise((resolve, reject) => {
+      const id = this.nextId;
+      this.nextId += 1;
+      this.pendingCommands.set(id, { resolve, reject });
+      this.socket.send(JSON.stringify({ id, method, params }));
+    });
+  }
+
+  close() {
+    this.socket.close();
+  }
+}
+
+async function getWebViewTarget(localPort) {
+  const response = await fetch(`http://127.0.0.1:${localPort}/json/list`);
+
+  if (!response.ok) {
+    throw new Error(`WebView target discovery failed with HTTP ${response.status}.`);
+  }
+
+  const targets = await response.json();
+  const pageTargets = targets.filter((target) => (
+    target.type === 'page'
+    && target.webSocketDebuggerUrl
+    && target.url !== 'about:blank'
+  ));
+
+  const visibleTarget = pageTargets.find((target) => {
+    try {
+      return JSON.parse(target.description || '{}').visible !== false;
+    } catch {
+      return true;
+    }
+  });
+
+  const target = visibleTarget || pageTargets[0];
+
+  if (!target) {
+    throw new Error('No rendered page was found in the app WebView.');
+  }
+
+  return target;
+}
+
+async function getPageDetails(client) {
+  const evaluation = await client.send('Runtime.evaluate', {
+    expression: `JSON.stringify({
+      title: document.title,
+      url: location.href,
+      width: innerWidth,
+      height: innerHeight,
+      devicePixelRatio: devicePixelRatio,
+      readyState: document.readyState
+    })`,
+    returnByValue: true,
+  });
+
+  return JSON.parse(evaluation.result.value);
+}
+
+async function capturePageSnapshot(client) {
+  const evaluation = await client.send('Runtime.evaluate', {
+    expression: `(async () => {
+      const clonedRoot = document.documentElement.cloneNode(true);
+      const originalElements = [document.documentElement, ...document.querySelectorAll('*')];
+      const clonedElements = [clonedRoot, ...clonedRoot.querySelectorAll('*')];
+
+      const blobToDataUrl = (blob) => new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(blob);
+      });
+
+      const imageToDataUrl = (element) => {
+        const width = element.naturalWidth || element.clientWidth;
+        const height = element.naturalHeight || element.clientHeight;
+
+        if (!width || !height) return '';
+
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        canvas.getContext('2d').drawImage(element, 0, 0, width, height);
+        return canvas.toDataURL('image/png');
+      };
+
+      for (let index = 0; index < originalElements.length; index += 1) {
+        const original = originalElements[index];
+        const clone = clonedElements[index];
+
+        if (!clone) continue;
+
+        if (original.scrollTop || original.scrollLeft) {
+          clone.setAttribute('data-responsive-scroll-top', String(original.scrollTop));
+          clone.setAttribute('data-responsive-scroll-left', String(original.scrollLeft));
+        }
+
+        if (original instanceof HTMLInputElement) {
+          clone.setAttribute('value', original.value);
+          clone.toggleAttribute('checked', original.checked);
+        } else if (original instanceof HTMLTextAreaElement) {
+          clone.textContent = original.value;
+        } else if (original instanceof HTMLSelectElement) {
+          for (let optionIndex = 0; optionIndex < original.options.length; optionIndex += 1) {
+            clone.options[optionIndex].selected = original.options[optionIndex].selected;
+          }
+        } else if (original instanceof HTMLCanvasElement) {
+          try {
+            const replacement = document.createElement('img');
+            replacement.src = original.toDataURL('image/png');
+            replacement.alt = original.getAttribute('aria-label') || '';
+            replacement.setAttribute('style', original.getAttribute('style') || '');
+            clone.replaceWith(replacement);
+          } catch {
+            // Keep the canvas element when its pixels cannot be exported.
+          }
+        } else if (original instanceof HTMLVideoElement && original.readyState >= 2) {
+          try {
+            const replacement = document.createElement('img');
+            replacement.src = imageToDataUrl(original);
+            replacement.alt = original.getAttribute('aria-label') || '';
+            replacement.setAttribute('style', original.getAttribute('style') || '');
+            clone.replaceWith(replacement);
+          } catch {
+            clone.setAttribute('poster', original.poster || '');
+          }
+        } else if (original instanceof HTMLImageElement && original.complete) {
+          try {
+            clone.setAttribute('src', imageToDataUrl(original) || original.currentSrc || original.src);
+            clone.removeAttribute('srcset');
+          } catch {
+            clone.setAttribute('src', original.currentSrc || original.src);
+          }
+        }
+      }
+
+      const stylesheetLinks = [...document.querySelectorAll('link[rel="stylesheet"]')];
+      const clonedStylesheetLinks = [...clonedRoot.querySelectorAll('link[rel="stylesheet"]')];
+
+      await Promise.all(stylesheetLinks.map(async (link, index) => {
+        try {
+          const response = await fetch(link.href);
+          if (!response.ok) return;
+
+          const cssText = (await response.text()).replace(
+            /url\\(\\s*(['"]?)(?!data:|blob:|#)([^'"\\)]+)\\1\\s*\\)/gi,
+            (match, quote, resourceUrl) => {
+              try {
+                return 'url("' + new URL(resourceUrl.trim(), link.href).href + '")';
+              } catch {
+                return match;
+              }
+            },
+          );
+          const style = document.createElement('style');
+          style.textContent = cssText;
+          clonedStylesheetLinks[index].replaceWith(style);
+        } catch {
+          clonedStylesheetLinks[index].href = link.href;
+        }
+      }));
+
+      clonedRoot.querySelectorAll('script, link[rel="modulepreload"]').forEach((element) => element.remove());
+      clonedRoot.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach(
+        (element) => element.remove(),
+      );
+
+      const base = document.createElement('base');
+      base.href = location.href;
+      clonedRoot.querySelector('head').prepend(base);
+
+      const replayStyle = document.createElement('style');
+      replayStyle.textContent = [
+        '*,*::before,*::after{animation-play-state:paused!important;}',
+        '*{scrollbar-width:none!important;}',
+        '*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;}',
+      ].join('');
+      clonedRoot.querySelector('head').append(replayStyle);
+
+      return {
+        html: '<!doctype html>' + clonedRoot.outerHTML,
+        scrollX,
+        scrollY,
+      };
+    })()`,
+    awaitPromise: true,
+    returnByValue: true,
+  });
+
+  if (evaluation.exceptionDetails) {
+    throw new Error('The current WebView page could not be serialized.');
+  }
+
+  return evaluation.result.value;
+}
+
+function findBrowserExecutable() {
+  const executablePath = browserExecutablePaths.find((candidate) => (
+    fs.existsSync(candidate)
+  ));
+
+  if (!executablePath) {
+    throw new Error('Google Chrome or Microsoft Edge was not found on this computer.');
+  }
+
+  return executablePath;
+}
+
+function delay(milliseconds) {
+  return new Promise((resolve) => setTimeout(resolve, milliseconds));
+}
+
+async function launchReplayBrowser() {
+  fs.mkdirSync(temporaryDirectory, { recursive: true });
+
+  const profileDirectory = path.join(
+    temporaryDirectory,
+    `responsive-screenshot-chrome-${process.pid}-${Date.now()}`,
+  );
+  fs.mkdirSync(profileDirectory, { recursive: true });
+
+  const browserProcess = spawn(findBrowserExecutable(), [
+    '--headless=new',
+    '--remote-debugging-port=0',
+    `--user-data-dir=${profileDirectory}`,
+    '--no-first-run',
+    '--no-default-browser-check',
+    '--disable-background-networking',
+    '--remote-allow-origins=*',
+    'about:blank',
+  ], {
+    stdio: 'ignore',
+    windowsHide: true,
+  });
+
+  const activePortPath = path.join(profileDirectory, 'DevToolsActivePort');
+  const deadline = Date.now() + 15000;
+
+  while (!fs.existsSync(activePortPath)) {
+    if (browserProcess.exitCode !== null) {
+      throw new Error('The local replay browser closed before it was ready.');
+    }
+
+    if (Date.now() >= deadline) {
+      browserProcess.kill();
+      throw new Error('Timed out while starting the local replay browser.');
+    }
+
+    await delay(100);
+  }
+
+  const [port] = fs.readFileSync(activePortPath, 'utf8').trim().split(/\r?\n/);
+  const versionResponse = await fetch(`http://127.0.0.1:${port}/json/version`);
+  const version = await versionResponse.json();
+  const client = new CdpClient(version.webSocketDebuggerUrl);
+  await client.connect();
+
+  return {
+    browserProcess,
+    client,
+    port,
+    profileDirectory,
+  };
+}
+
+async function createReplayPage(browser) {
+  const createdTarget = await browser.client.send('Target.createTarget', {
+    url: 'about:blank',
+  });
+  const deadline = Date.now() + 10000;
+
+  while (Date.now() < deadline) {
+    const response = await fetch(`http://127.0.0.1:${browser.port}/json/list`);
+    const targets = await response.json();
+    const target = targets.find((candidate) => candidate.id === createdTarget.targetId);
+
+    if (target && target.webSocketDebuggerUrl) {
+      const client = new CdpClient(target.webSocketDebuggerUrl);
+      await client.connect();
+      await client.send('Page.enable');
+      await client.send('Runtime.enable');
+      return client;
+    }
+
+    await delay(100);
+  }
+
+  throw new Error('The local replay page did not become available.');
+}
+
+function removeTemporaryBrowserProfile(profileDirectory) {
+  const resolvedTemporaryRoot = path.resolve(temporaryDirectory);
+  const resolvedProfileDirectory = path.resolve(profileDirectory);
+
+  if (!resolvedProfileDirectory.startsWith(`${resolvedTemporaryRoot}${path.sep}`)) {
+    throw new Error('Refusing to remove a browser profile outside agent-temp.');
+  }
+
+  fs.rmSync(resolvedProfileDirectory, { recursive: true, force: true });
+}
+
+async function closeReplayBrowser(browser) {
+  try {
+    await browser.client.send('Browser.close');
+  } catch {
+    // Closing the browser can close the protocol connection before it acknowledges.
+  }
+
+  const deadline = Date.now() + 3000;
+
+  while (browser.browserProcess.exitCode === null && Date.now() < deadline) {
+    await delay(100);
+  }
+
+  if (browser.browserProcess.exitCode === null) {
+    browser.browserProcess.kill();
+    await delay(200);
+  }
+
+  browser.client.close();
+
+  for (let attempt = 1; attempt <= 5; attempt += 1) {
+    try {
+      removeTemporaryBrowserProfile(browser.profileDirectory);
+      return;
+    } catch (error) {
+      if (attempt === 5) {
+        throw error;
+      }
+
+      await delay(200);
+    }
+  }
+}
+
+async function waitForReplayLayout(client, snapshot) {
+  await client.send('Runtime.evaluate', {
+    expression: `(async () => {
+      const assetWait = Promise.all([...document.images].map((image) => {
+        if (image.complete) return Promise.resolve();
+        return new Promise((resolve) => {
+          image.addEventListener('load', resolve, { once: true });
+          image.addEventListener('error', resolve, { once: true });
+        });
+      }));
+
+      await Promise.race([
+        Promise.all([document.fonts.ready, assetWait]),
+        new Promise((resolve) => setTimeout(resolve, 5000)),
+      ]);
+
+      document.querySelectorAll('[data-responsive-scroll-top]').forEach((element) => {
+        element.scrollTop = Number(element.dataset.responsiveScrollTop);
+        element.scrollLeft = Number(element.dataset.responsiveScrollLeft);
+      });
+      scrollTo(${Number(snapshot.scrollX) || 0}, ${Number(snapshot.scrollY) || 0});
+
+      await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    })()`,
+    awaitPromise: true,
+    returnByValue: true,
+  });
+}
+
+function getFrameAdornment(frameType) {
+  if (frameType === 'iphone') {
+    return '<div class="dynamic-island"></div>';
+  }
+
+  if (frameType === 'android-phone') {
+    return '<div class="camera-dot"></div>';
+  }
+
+  if (frameType === 'tablet') {
+    return '<div class="tablet-camera"></div>';
+  }
+
+  if (frameType === 'tv' || frameType === 'apple-tv') {
+    return '<div class="tv-stand"></div>';
+  }
+
+  if (frameType === 'apple-watch') {
+    return '<div class="watch-crown"></div><div class="watch-button"></div>';
+  }
+
+  if (frameType === 'apple-vision-pro') {
+    return '<div class="vision-sensor vision-sensor-left"></div><div class="vision-sensor vision-sensor-right"></div>';
+  }
+
+  if (frameType === 'laptop') {
+    return '<div class="laptop-camera"></div><div class="laptop-base"></div>';
+  }
+
+  return '<div class="xr-status"></div>';
+}
+
+function createDeviceFrameHtml(profile, screenshotBuffer) {
+  const screenshotDataUrl = `data:image/png;base64,${screenshotBuffer.toString('base64')}`;
+  const aspectRatio = `${profile.width} / ${profile.height}`;
+
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    * { box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
+    body {
+      display: grid;
+      place-items: center;
+      position: relative;
+      background:
+        radial-gradient(circle at 14% 18%, rgba(45, 213, 255, 0.24), transparent 30%),
+        radial-gradient(circle at 86% 82%, rgba(196, 255, 61, 0.16), transparent 28%),
+        linear-gradient(145deg, #111827 0%, #070b12 52%, #020409 100%);
+      font-family: Arial, sans-serif;
+    }
+    body::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      opacity: 0.18;
+      background-image:
+        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
+      background-size: 7vw 7vw;
+      mask-image: linear-gradient(to bottom, transparent, black 28%, black 72%, transparent);
+    }
+    .device {
+      position: relative;
+      z-index: 1;
+      aspect-ratio: ${aspectRatio};
+      background: linear-gradient(145deg, #566171 0%, #171c25 18%, #05070b 55%, #384252 100%);
+      border: clamp(2px, 0.45vw, 9px) solid #727d8d;
+      box-shadow:
+        0 4vh 9vh rgba(0, 0, 0, 0.68),
+        0 0 0 1px rgba(255, 255, 255, 0.18) inset,
+        0 0 5vh rgba(45, 213, 255, 0.12);
+    }
+    .screen {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: #05070b;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95) inset;
+    }
+    .screen img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .device.android-phone,
+    .device.iphone {
+      height: 87%;
+      padding: 1.25%;
+      border-radius: clamp(24px, 8vw, 70px);
+    }
+    .device.android-phone .screen,
+    .device.iphone .screen {
+      border-radius: clamp(19px, 6.7vw, 60px);
+    }
+    .camera-dot {
+      position: absolute;
+      z-index: 3;
+      top: 2.1%;
+      left: 50%;
+      width: clamp(5px, 1.8vw, 16px);
+      aspect-ratio: 1;
+      transform: translateX(-50%);
+      border-radius: 50%;
+      background: radial-gradient(circle at 36% 34%, #406891, #080b10 46%, #000 72%);
+      box-shadow: 0 0 0 2px #111827;
+    }
+    .dynamic-island {
+      position: absolute;
+      z-index: 3;
+      top: 2.2%;
+      left: 50%;
+      width: 29%;
+      height: 3.3%;
+      transform: translateX(-50%);
+      border-radius: 999px;
+      background: #000;
+      box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
+    }
+    .device.tablet {
+      height: 86%;
+      padding: 1.05%;
+      border-radius: clamp(18px, 3.2vw, 48px);
+    }
+    .device.tablet .screen {
+      border-radius: clamp(13px, 2.5vw, 38px);
+    }
+    .device.apple-watch {
+      height: 82%;
+      padding: 2.2%;
+      border: clamp(3px, 1.4vw, 7px) solid #8b929b;
+      border-radius: 24% / 20%;
+      background: linear-gradient(145deg, #d5d8dc, #363b43 28%, #11151b 72%, #9299a2);
+    }
+    .device.apple-watch .screen {
+      border-radius: 20% / 17%;
+    }
+    .watch-crown {
+      position: absolute;
+      top: 24%;
+      right: -5.5%;
+      width: 5.5%;
+      height: 15%;
+      border-radius: 0 45% 45% 0;
+      background: linear-gradient(90deg, #303640, #a8afb7 55%, #424851);
+      box-shadow: 0 0.8vh 1.5vh rgba(0,0,0,0.45);
+    }
+    .watch-button {
+      position: absolute;
+      top: 43%;
+      right: -3.5%;
+      width: 3.5%;
+      height: 11%;
+      border-radius: 0 35% 35% 0;
+      background: #626a74;
+    }
+    .device.apple-vision-pro {
+      width: 82%;
+      padding: 0.72%;
+      border: clamp(4px, 0.45vw, 18px) solid rgba(201, 214, 224, 0.92);
+      border-radius: 14% / 32%;
+      background: linear-gradient(145deg, #dce5eb, #55616d 25%, #151b22 72%, #aebac3);
+      box-shadow:
+        0 5vh 11vh rgba(0,0,0,0.68),
+        0 0 5vh rgba(180,225,255,0.2),
+        0 0 0 1px rgba(255,255,255,0.4) inset;
+    }
+    .device.apple-vision-pro .screen {
+      border-radius: 13% / 29%;
+    }
+    .vision-sensor {
+      position: absolute;
+      z-index: 3;
+      top: 48%;
+      width: clamp(8px, 0.8vw, 30px);
+      aspect-ratio: 1;
+      border-radius: 50%;
+      background: radial-gradient(circle at 38% 35%, #567793, #05080c 55%, #000 75%);
+      box-shadow: 0 0 0 2px rgba(147,166,181,0.55);
+    }
+    .vision-sensor-left { left: 3.2%; }
+    .vision-sensor-right { right: 3.2%; }
+    .tablet-camera,
+    .laptop-camera {
+      position: absolute;
+      z-index: 3;
+      top: 0.48%;
+      left: 50%;
+      width: clamp(3px, 0.55vw, 10px);
+      aspect-ratio: 1;
+      transform: translateX(-50%);
+      border-radius: 50%;
+      background: #080b10;
+      box-shadow: 0 0 0 1px #526071;
+    }
+    .device.tv,
+    .device.apple-tv {
+      width: 82%;
+      padding: 0.62%;
+      border-radius: clamp(8px, 1.1vw, 24px);
+      transform: translateY(-4%);
+    }
+    .device.tv .screen,
+    .device.apple-tv .screen { border-radius: clamp(4px, 0.55vw, 12px); }
+    .tv-stand {
+      position: absolute;
+      z-index: -1;
+      left: 50%;
+      bottom: -13%;
+      width: 24%;
+      height: 13%;
+      transform: translateX(-50%);
+      background: linear-gradient(90deg, #11161f, #697383 50%, #11161f);
+      clip-path: polygon(42% 0, 58% 0, 67% 76%, 94% 86%, 100% 100%, 0 100%, 6% 86%, 33% 76%);
+      filter: drop-shadow(0 1.5vh 1.5vh rgba(0,0,0,0.55));
+    }
+    .device.laptop {
+      width: 82%;
+      padding: 0.75% 0.75% 1.15%;
+      border-radius: clamp(8px, 1.2vw, 24px);
+      transform: translateY(-3%);
+    }
+    .device.laptop .screen { border-radius: clamp(4px, 0.55vw, 12px); }
+    .laptop-base {
+      position: absolute;
+      z-index: -1;
+      left: 50%;
+      bottom: -7.5%;
+      width: 112%;
+      height: 8%;
+      transform: translateX(-50%);
+      border-radius: 0 0 50% 50% / 0 0 70% 70%;
+      background: linear-gradient(#697383, #202631 45%, #090c11);
+      box-shadow: 0 1.5vh 2vh rgba(0,0,0,0.48);
+    }
+    .device.xr {
+      width: 82%;
+      padding: 0.58%;
+      border: clamp(2px, 0.32vw, 7px) solid rgba(128, 230, 255, 0.9);
+      border-radius: clamp(18px, 2.5vw, 48px);
+      background: rgba(13, 22, 34, 0.82);
+      box-shadow:
+        0 4vh 10vh rgba(0,0,0,0.65),
+        0 0 7vh rgba(45,213,255,0.34),
+        0 0 0 1px rgba(255,255,255,0.22) inset;
+    }
+    .device.xr .screen { border-radius: clamp(13px, 2vw, 38px); }
+    .xr-status {
+      position: absolute;
+      top: -2.4%;
+      left: 50%;
+      width: 13%;
+      height: 1.1%;
+      transform: translateX(-50%);
+      border-radius: 999px;
+      background: #6fe8ff;
+      box-shadow: 0 0 1.8vh #2dd5ff;
+    }
+  </style>
+</head>
+<body>
+  <main class="device ${profile.frameType}">
+    <div class="screen"><img src="${screenshotDataUrl}" /></div>
+    ${getFrameAdornment(profile.frameType)}
+  </main>
+</body>
+</html>`;
+}
+
+async function captureFramedScreenshot(
+  client,
+  screenshotBuffer,
+  profile,
+  screenshotFileName,
+  skipExisting = false,
+) {
+  const framedProfileDirectory = path.join(inFrameDirectory, profile.outputDirectory);
+  const framedScreenshotPath = path.join(framedProfileDirectory, screenshotFileName);
+
+  if (skipExisting && fs.existsSync(framedScreenshotPath)) {
+    console.log(`Skipped existing framed screenshot: ${framedScreenshotPath}`);
+    return false;
+  }
+
+  const hasCustomFrameSize = Boolean(profile.framedWidth && profile.framedHeight);
+  const frameWidth = profile.framedWidth || profile.width;
+  const frameHeight = profile.framedHeight || profile.height;
+  const frameScaleFactor = hasCustomFrameSize ? 1 : profile.deviceScaleFactor;
+
+  await client.send('Emulation.setDeviceMetricsOverride', {
+    width: frameWidth,
+    height: frameHeight,
+    deviceScaleFactor: frameScaleFactor,
+    mobile: false,
+    screenWidth: frameWidth,
+    screenHeight: frameHeight,
+    positionX: 0,
+    positionY: 0,
+  });
+
+  const frameTree = await client.send('Page.getFrameTree');
+  await client.send('Page.setDocumentContent', {
+    frameId: frameTree.frameTree.frame.id,
+    html: createDeviceFrameHtml(profile, screenshotBuffer),
+  });
+  await client.send('Runtime.evaluate', {
+    expression: `new Promise((resolve) => {
+      const image = document.querySelector('img');
+      const ready = () => requestAnimationFrame(() => requestAnimationFrame(resolve));
+      if (image.complete) ready();
+      else {
+        image.addEventListener('load', ready, { once: true });
+        image.addEventListener('error', ready, { once: true });
+      }
+    })`,
+    awaitPromise: true,
+    returnByValue: true,
+  });
+
+  const framedScreenshot = await client.send('Page.captureScreenshot', {
+    format: 'png',
+    fromSurface: true,
+    captureBeyondViewport: false,
+  });
+
+  fs.mkdirSync(framedProfileDirectory, { recursive: true });
+  fs.writeFileSync(
+    framedScreenshotPath,
+    Buffer.from(framedScreenshot.data, 'base64'),
+    { flag: 'wx' },
+  );
+  console.log(`Saved framed ${profile.label}: ${framedScreenshotPath}`);
+  return true;
+}
+
+async function captureProfile(client, snapshot, profile, screenshotFileName) {
+  await client.send('Emulation.setDeviceMetricsOverride', {
+    width: profile.width,
+    height: profile.height,
+    deviceScaleFactor: profile.deviceScaleFactor,
+    mobile: profile.mobile,
+    screenWidth: profile.width,
+    screenHeight: profile.height,
+    positionX: 0,
+    positionY: 0,
+  });
+
+  const frameTree = await client.send('Page.getFrameTree');
+  await client.send('Page.setDocumentContent', {
+    frameId: frameTree.frameTree.frame.id,
+    html: snapshot.html,
+  });
+  await waitForReplayLayout(client, snapshot);
+
+  const screenshot = await client.send('Page.captureScreenshot', {
+    format: 'png',
+    fromSurface: true,
+    captureBeyondViewport: false,
+  });
+
+  const profileDirectory = path.join(screenshotDirectory, profile.outputDirectory);
+  const screenshotPath = path.join(profileDirectory, screenshotFileName);
+  const screenshotBuffer = Buffer.from(screenshot.data, 'base64');
+
+  fs.mkdirSync(profileDirectory, { recursive: true });
+  fs.writeFileSync(screenshotPath, screenshotBuffer, { flag: 'wx' });
+  console.log(`Saved ${profile.label}: ${screenshotPath}`);
+  await captureFramedScreenshot(
+    client,
+    screenshotBuffer,
+    profile,
+    screenshotFileName,
+  );
+}
+
+async function captureScreenshotSet(
+  deviceClient,
+  replayClient,
+  selectedProfiles,
+  fileNameInput,
+) {
+  console.log('Capturing the current rendered page and resolved native data...');
+  const snapshot = await capturePageSnapshot(deviceClient);
+  const screenshotFileName = getScreenshotFileName(fileNameInput, selectedProfiles);
+
+  for (const profile of selectedProfiles) {
+    await captureProfile(replayClient, snapshot, profile, screenshotFileName);
+  }
+
+  console.log(`Responsive screenshot set completed: ${screenshotFileName}`);
+}
+
+async function frameExistingScreenshots(selectedProfiles) {
+  let replayBrowser;
+  let replayClient;
+  let framedCount = 0;
+  let failedCount = 0;
+
+  try {
+    replayBrowser = await launchReplayBrowser();
+    replayClient = await createReplayPage(replayBrowser);
+
+    for (const profile of selectedProfiles) {
+      const profileDirectory = path.join(screenshotDirectory, profile.outputDirectory);
+
+      if (!fs.existsSync(profileDirectory)) {
+        continue;
+      }
+
+      const screenshotFiles = fs.readdirSync(profileDirectory, { withFileTypes: true })
+        .filter((entry) => entry.isFile() && /\.png$/i.test(entry.name))
+        .map((entry) => entry.name)
+        .sort((first, second) => first.localeCompare(second, undefined, { numeric: true }));
+
+      for (const screenshotFileName of screenshotFiles) {
+        const screenshotPath = path.join(profileDirectory, screenshotFileName);
+
+        try {
+          const wasCreated = await captureFramedScreenshot(
+            replayClient,
+            fs.readFileSync(screenshotPath),
+            profile,
+            screenshotFileName,
+            true,
+          );
+          if (wasCreated) framedCount += 1;
+        } catch (error) {
+          failedCount += 1;
+          console.error(`Failed to frame ${screenshotPath}: ${error.message}`);
+        }
+      }
+    }
+  } finally {
+    if (replayClient) {
+      replayClient.close();
+    }
+
+    if (replayBrowser) {
+      await closeReplayBrowser(replayBrowser);
+    }
+  }
+
+  console.log(`Existing screenshot framing completed: ${framedCount} created.`);
+
+  if (failedCount) {
+    throw new Error(`${failedCount} existing screenshot(s) could not be framed.`);
+  }
+}
+
+async function runInteractiveCaptureLoop(
+  deviceClient,
+  replayClient,
+  selectedProfiles,
+) {
+  const terminal = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+    prompt: 'Enter a filename, or press Enter for the next number: ',
+  });
+
+  terminal.on('SIGINT', () => terminal.close());
+
+  console.log(`Screenshots will be saved in: ${screenshotDirectory}`);
+  console.log('Press Ctrl+C to exit.');
+  terminal.prompt();
+
+  for await (const fileNameInput of terminal) {
+    try {
+      await captureScreenshotSet(
+        deviceClient,
+        replayClient,
+        selectedProfiles,
+        fileNameInput,
+      );
+    } catch (error) {
+      console.error(`Responsive screenshot failed: ${error.message}`);
+    }
+
+    terminal.prompt();
+  }
+
+  console.log('\nResponsive screenshot tool closed.');
+}
+
+async function getInteractiveOptions(options) {
+  if (!process.stdin.isTTY || options.dryRun) {
+    return options;
+  }
+
+  const terminal = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  try {
+    if (!options.profiles) {
+      console.log('Available profiles:');
+      printProfiles();
+      options.profiles = await terminal.question(
+        'Profiles separated by commas, or press Enter for all: ',
+      );
+    }
+  } finally {
+    terminal.close();
+  }
+
+  return options;
+}
+
+async function main() {
+  let options = parseArguments();
+
+  if (options.help) {
+    printHelp();
+    return;
+  }
+
+  if (options.list) {
+    printProfiles();
+    return;
+  }
+
+  options = await getInteractiveOptions(options);
+
+  const selectedProfiles = selectProfiles(options.profiles);
+
+  if (options.frameExisting) {
+    await frameExistingScreenshots(selectedProfiles);
+    return;
+  }
+
+  const interactiveMode = process.stdin.isTTY && !options.prefix && !options.dryRun;
+  const deviceId = getConnectedDevice();
+  const appId = getAppId();
+  const socketName = getWebViewSocket(deviceId, appId);
+  const localPort = runAdb([
+    '-s',
+    deviceId,
+    'forward',
+    'tcp:0',
+    `localabstract:${socketName}`,
+  ]);
+
+  let deviceClient;
+  let replayBrowser;
+  let replayClient;
+
+  try {
+    const target = await getWebViewTarget(localPort);
+    deviceClient = new CdpClient(target.webSocketDebuggerUrl);
+    await deviceClient.connect();
+    await deviceClient.send('Page.enable');
+    await deviceClient.send('Runtime.enable');
+
+    const pageDetails = await getPageDetails(deviceClient);
+    console.log(`Connected device: ${deviceId}`);
+    console.log(`App: ${appId}`);
+    console.log(`Current page: ${pageDetails.title || '(untitled)'}`);
+    console.log(`Current URL: ${pageDetails.url}`);
+    console.log(
+      `Current viewport: ${pageDetails.width}x${pageDetails.height} `
+      + `at ${pageDetails.devicePixelRatio}x (${pageDetails.readyState})`,
+    );
+
+    if (options.dryRun) {
+      console.log('Dry run completed. No screenshots were created.');
+      return;
+    }
+
+    fs.mkdirSync(screenshotDirectory, { recursive: true });
+    replayBrowser = await launchReplayBrowser();
+    replayClient = await createReplayPage(replayBrowser);
+
+    console.log(
+      'Apple, TV, Chromebook, Mac, and XR profiles are viewport approximations of the live Android WebView.',
+    );
+
+    if (interactiveMode) {
+      await runInteractiveCaptureLoop(
+        deviceClient,
+        replayClient,
+        selectedProfiles,
+      );
+    } else {
+      await captureScreenshotSet(
+        deviceClient,
+        replayClient,
+        selectedProfiles,
+        options.prefix,
+      );
+    }
+  } finally {
+    if (replayClient) {
+      replayClient.close();
+    }
+
+    if (replayBrowser) {
+      await closeReplayBrowser(replayBrowser);
+    }
+
+    if (deviceClient) {
+      deviceClient.close();
+    }
+
+    if (localPort) {
+      try {
+        runAdb(['-s', deviceId, 'forward', '--remove', `tcp:${localPort}`]);
+      } catch {
+        // ADB may already have removed the temporary forwarding rule.
+      }
+    }
+  }
+}
+
+main().catch((error) => {
+  console.error(`Responsive screenshot failed: ${error.message}`);
+  process.exitCode = 1;
+});