codeplay-common 4.3.9 → 4.4.1

package/files/take-screen-image.js

@@ -1,29 +1,29 @@
-const fs = require('node:fs');
-const path = require('node:path');
-const readline = require('node:readline/promises');
-const { spawn, spawnSync } = require('node:child_process');
-
+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', 'Store-image-Screenshot');
 const inFrameDirectory = path.join(__dirname, 'Auto-Screenshot', 'Store-image-Frame');
 const amazonAssetsDirectory = path.join(__dirname, 'Auto-Screenshot', 'Amazon-assets');
 const samsungAssetsDirectory = path.join(__dirname, 'Auto-Screenshot', 'Samsung-assets');
 const capacitorConfigPath = path.join(__dirname, 'capacitor.config.json');
 const amazonIconPath = path.join(__dirname, 'resources', 'icon-only.png');
-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,
+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,
@@ -58,24 +58,24 @@ const deviceProfiles = [
   },
   {
     name: 'iphone',
-    label: 'iPhone 6.9-inch App Store viewport',
-    outputDirectory: 'iPhone',
-    frameType: 'iphone',
-    width: 440,
-    height: 956,
+    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,
+  },
+  {
+    name: 'ipad',
+    label: 'iPad 13-inch App Store viewport',
+    outputDirectory: 'iPad',
+    frameType: 'tablet',
+    width: 1032,
+    height: 1376,
     deviceScaleFactor: 2,
     framedWidth: 2048,
     framedHeight: 2732,
@@ -118,48 +118,48 @@ const deviceProfiles = [
     framedHeight: 514,
     mobile: true,
   },
-  {
-    name: 'amazon-mobile',
-    label: 'Amazon mobile store viewport',
-    outputDirectory: 'Amazon-Phone',
-    frameType: 'android-phone',
-    width: 360,
+  {
+    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,
+  },
+  {
+    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: '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 4K Play Store viewport',
@@ -172,26 +172,26 @@ const deviceProfiles = [
     framedHeight: 2160,
     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,
-  },
+  {
+    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() {
@@ -214,192 +214,192 @@ function orientProfile(profile, orientation) {
     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);
+
+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 = {
     amazonAssets: false,
     samsungAssets: false,
-    dryRun: false,
-    frameExisting: false,
-    help: false,
-    list: false,
-    prefix: '',
-    profiles: '',
-  };
-
-  for (let index = 0; index < args.length; index += 1) {
-    const argument = args[index];
-
+    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 === '--amazon-assets') {
       options.amazonAssets = true;
     } else if (argument === '--samsung-assets') {
       options.samsungAssets = true;
     } else 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;
-}
-
+      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();
 
@@ -417,11 +417,11 @@ function printProfiles() {
     );
   }
 }
-
-function printHelp() {
-  console.log('Capture the current live Android WebView at multiple responsive viewport sizes.');
-  console.log('');
-  console.log('Usage:');
+
+function printHelp() {
+  console.log('Capture the current live Android WebView at multiple responsive viewport sizes.');
+  console.log('');
+  console.log('Usage:');
   console.log('  node take-screen-image.js');
   console.log('  node take-screen-image.js --profiles iphone,ipad');
   console.log('  node take-screen-image.js --prefix home --profiles android-phone,ipad');
@@ -430,464 +430,470 @@ function printHelp() {
   console.log('  node take-screen-image.js --samsung-assets');
   console.log('  node take-screen-image.js --dry-run');
   console.log('  node take-screen-image.js --list');
-}
-
+}
+
 function selectProfiles(input) {
   const orientation = getConfiguredOrientation();
   const names = input
-    .split(',')
-    .map((name) => name.trim().toLowerCase())
-    .filter(Boolean);
-
+    .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 selectedProfiles = names.map((name) => {
     const profile = deviceProfiles.find((candidate) => (
       candidate.name === name || candidate.aliases?.includes(name)
     ));
-
-    if (!profile) {
-      throw new Error(`Unknown profile: ${name}. Run with --list to see valid profiles.`);
-    }
-
-    return profile;
-  });
-
+
+    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,
-  });
-}
-
+
+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.documentElement.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 {
+            clone.style.setProperty(
+              'background-image',
+              'url("' + original.toDataURL('image/png') + '")',
+              'important',
+            );
+            clone.style.setProperty('background-position', 'center', 'important');
+            clone.style.setProperty('background-repeat', 'no-repeat', 'important');
+            clone.style.setProperty('background-size', '100% 100%', 'important');
+          } 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 === '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>';
   }
@@ -899,110 +905,110 @@ function getFrameAdornment(frameType) {
   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>';
-}
-
+
+  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);
-    }
+  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);
     }
@@ -1061,90 +1067,90 @@ function createDeviceFrameHtml(profile, screenshotBuffer) {
     }
     .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;
-    }
+    .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%);
-    }
+      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>
+    .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>`;
 }
 
@@ -1662,20 +1668,20 @@ async function createSamsungAssets(client) {
 }
 
 async function captureFramedScreenshot(
-  client,
-  screenshotBuffer,
-  profile,
-  screenshotFileName,
-  skipExisting = false,
+  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 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;
@@ -1688,194 +1694,194 @@ async function captureFramedScreenshot(
     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.');
-}
-
+    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
@@ -1883,42 +1889,42 @@ async function getInteractiveOptions(options) {
     || options.amazonAssets
     || options.samsungAssets
   ) {
-    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;
-  }
-
+    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);
 
   if (options.amazonAssets) {
@@ -1956,96 +1962,96 @@ async function main() {
   }
 
   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;
-});
+
+  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;
+});