@playdrop/playdrop-cli 0.11.8 → 0.12.0

package/dist/commands/captureListing.js

@@ -1,5 +1,4 @@
 "use strict";
-/* eslint-disable max-lines */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -35,24 +34,34 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveListingCaptureRouteSegment = resolveListingCaptureRouteSegment;
+exports.resolveCaptureListingDevRouterPort = resolveCaptureListingDevRouterPort;
+exports.resolveListingCaptureLocalDevPort = resolveListingCaptureLocalDevPort;
+exports.buildListingCaptureFrameUrl = buildListingCaptureFrameUrl;
 exports.resolveListingCaptureSceneId = resolveListingCaptureSceneId;
 exports.parseCaptureListingOptions = parseCaptureListingOptions;
 exports.assertSupportedListingEnvironment = assertSupportedListingEnvironment;
 exports.resolveListingRecorderPath = resolveListingRecorderPath;
+exports.buildSurfaceOutputPaths = buildSurfaceOutputPaths;
+exports.resolveCaptureDimensions = resolveCaptureDimensions;
+exports.resolveListingCaptureBrowserContextOptions = resolveListingCaptureBrowserContextOptions;
 exports.computeRecordedCrop = computeRecordedCrop;
 exports.captureListing = captureListing;
+const types_1 = require("@playdrop/types");
 const node_child_process_1 = require("node:child_process");
+const node_crypto_1 = require("node:crypto");
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
-const types_1 = require("@playdrop/types");
+const appUrls_1 = require("../appUrls");
+const catalogue_1 = require("../catalogue");
 const catalogue_utils_1 = require("../catalogue-utils");
 const commandContext_1 = require("../commandContext");
 const http_1 = require("../http");
 const messages_1 = require("../messages");
 const playwright_1 = require("../playwright");
-const devShared_1 = require("./devShared");
+const dev_1 = require("./dev");
+const devRuntimeAssets_1 = require("./devRuntimeAssets");
 const devServer_1 = require("./devServer");
-const appUrls_1 = require("../appUrls");
+const devShared_1 = require("./devShared");
 const CAPTURE_FRAME_SELECTOR = 'iframe[title="Game"]';
 const DEFAULT_DURATION_SECONDS = 8;
 const DEFAULT_WIDTH = 1280;
@@ -64,10 +73,43 @@ const MIN_CAPTURE_SECONDS = 1;
 const MIN_DIMENSION = 16;
 const MAX_DIMENSION = 8192;
 const MAX_FPS = 120;
-const SUPPORTED_MACOS_PREFIX = '26.4';
+const MIN_SUPPORTED_MACOS_MAJOR = 26;
+const MIN_SUPPORTED_MACOS_MINOR = 4;
 const LISTING_CAPTURE_HOOK_TIMEOUT_MS = 60000;
+const SHA256_HEX_REGEX = /^[a-f0-9]{64}$/i;
+const LISTING_CAPTURE_MOBILE_USER_AGENT = 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1';
+const SURFACE_CAPTURE_DIMENSIONS = {
+    DESKTOP: { width: 1280, height: 720 },
+    MOBILE_LANDSCAPE: { width: 844, height: 390 },
+    MOBILE_PORTRAIT: { width: 390, height: 844 },
+};
+const SURFACE_OUTPUT_SLUG = {
+    DESKTOP: 'desktop',
+    MOBILE_LANDSCAPE: 'mobile-landscape',
+    MOBILE_PORTRAIT: 'mobile-portrait',
+};
 function resolveListingCaptureRouteSegment(previewable) {
-    return previewable ? 'dev-preview' : 'dev';
+    if (!previewable) {
+        throw new Error('listing_preview_support_missing');
+    }
+    return 'dev-preview';
+}
+function resolveCaptureListingDevRouterPort(env = process.env) {
+    return (0, dev_1.resolveCliDevRouterPort)(env);
+}
+function resolveListingCaptureLocalDevPort(devRouterPort) {
+    return devRouterPort === devServer_1.DEV_ROUTER_PORT ? null : devRouterPort;
+}
+function buildListingCaptureFrameUrl({ webBase, currentUsername, appTypeSlug, appName, routeSegment, localDevPort, }) {
+    const frameUrlObject = new URL(`${(0, appUrls_1.normalizePlaydropWebBase)(webBase)}/creators/${encodeURIComponent(currentUsername)}/apps/${appTypeSlug}/${encodeURIComponent(appName)}/${routeSegment}`);
+    frameUrlObject.searchParams.set('devAuth', 'anonymous');
+    frameUrlObject.searchParams.set('launchCheck', '1');
+    frameUrlObject.searchParams.set('captureShell', 'listing');
+    frameUrlObject.searchParams.set('mobileFrameHost', 'admin');
+    if (localDevPort !== null) {
+        frameUrlObject.searchParams.set('localDevPort', String(localDevPort));
+    }
+    return frameUrlObject.toString();
 }
 function resolveListingCaptureSceneId(width, height) {
     return height > width ? 'listing-portrait' : 'listing-landscape';
@@ -93,6 +135,7 @@ function parseCaptureListingOptions(targetArg, options = {}) {
         minimum: MIN_CAPTURE_SECONDS,
         maximum: MAX_CAPTURE_SECONDS,
     });
+    const explicitDimensions = options.width !== undefined || options.height !== undefined;
     const width = parsePositiveNumber(options.width, DEFAULT_WIDTH, 'width', {
         minimum: MIN_DIMENSION,
         maximum: MAX_DIMENSION,
@@ -113,6 +156,12 @@ function parseCaptureListingOptions(targetArg, options = {}) {
         maximum: durationSeconds,
     });
     const outputDir = options.outputDir?.trim() ? (0, node_path_1.resolve)(process.cwd(), options.outputDir.trim()) : null;
+    const contentHash = typeof options.contentHash === 'string' && options.contentHash.trim().length > 0
+        ? options.contentHash.trim().toLowerCase()
+        : null;
+    if (contentHash && !SHA256_HEX_REGEX.test(contentHash)) {
+        throw new Error('content_hash_invalid');
+    }
     return {
         targetArg,
         appName: options.app?.trim() || undefined,
@@ -124,6 +173,8 @@ function parseCaptureListingOptions(targetArg, options = {}) {
         audio: Boolean(options.audio),
         outputDir,
         keepRaw: Boolean(options.keepRaw),
+        contentHash,
+        explicitDimensions,
     };
 }
 function readMacOsVersion() {
@@ -139,7 +190,13 @@ function assertSupportedListingEnvironment(platform = process.platform, macosVer
     if (platform !== 'darwin') {
         throw new Error('unsupported_platform');
     }
-    if (!macosVersion.startsWith(SUPPORTED_MACOS_PREFIX)) {
+    const [majorRaw, minorRaw] = macosVersion.split('.');
+    const major = Number.parseInt(majorRaw ?? '', 10);
+    const minor = Number.parseInt(minorRaw ?? '', 10);
+    if (!Number.isInteger(major)
+        || !Number.isInteger(minor)
+        || major !== MIN_SUPPORTED_MACOS_MAJOR
+        || minor < MIN_SUPPORTED_MACOS_MINOR) {
         throw new Error(`unsupported_macos_version:${macosVersion}`);
     }
 }
@@ -166,11 +223,40 @@ async function ensureOutputPaths(appName, explicitOutputDir) {
     await (0, promises_1.mkdir)(outputDir, { recursive: true });
     return {
         outputDir,
-        rawVideoPath: (0, node_path_1.join)(outputDir, 'listing-raw.mp4'),
-        metadataPath: (0, node_path_1.join)(outputDir, 'listing-raw.json'),
         reportPath: (0, node_path_1.join)(outputDir, 'capture-report.json'),
-        posterPath: (0, node_path_1.join)(outputDir, 'poster.png'),
-        finalVideoPath: (0, node_path_1.join)(outputDir, 'listing.mp4'),
+    };
+}
+function buildSurfaceOutputPaths(outputDir, surface, useSurfacePrefix) {
+    const prefix = useSurfacePrefix ? `${SURFACE_OUTPUT_SLUG[surface]}-` : '';
+    return {
+        rawVideoPath: (0, node_path_1.join)(outputDir, `${prefix}listing-raw.mp4`),
+        metadataPath: (0, node_path_1.join)(outputDir, `${prefix}listing-raw.json`),
+        posterPath: (0, node_path_1.join)(outputDir, `${prefix}poster.png`),
+        finalVideoPath: (0, node_path_1.join)(outputDir, `${prefix}listing.mp4`),
+    };
+}
+function resolveCaptureDimensions(surface, parsedOptions) {
+    if (parsedOptions.explicitDimensions) {
+        return {
+            width: parsedOptions.width,
+            height: parsedOptions.height,
+        };
+    }
+    return SURFACE_CAPTURE_DIMENSIONS[surface];
+}
+function resolveListingCaptureBrowserContextOptions(surface, dimensions) {
+    if (surface === 'DESKTOP') {
+        return { viewport: null };
+    }
+    return {
+        viewport: {
+            width: dimensions.width,
+            height: dimensions.height,
+        },
+        deviceScaleFactor: 2,
+        isMobile: true,
+        hasTouch: true,
+        userAgent: LISTING_CAPTURE_MOBILE_USER_AGENT,
     };
 }
 async function grantListingBrowserLocalNetworkAccess(context, origin) {
@@ -180,7 +266,7 @@ async function grantListingBrowserLocalNetworkAccess(context, origin) {
     }
     await grantPermissions.call(context, ['local-network-access'], { origin });
 }
-async function launchListingBrowser(initialViewport, automationOrigin) {
+async function launchListingBrowser(initialViewport, automationOrigin, contextOptions) {
     const playwright = await Promise.resolve().then(() => __importStar(require('playwright-core')));
     const args = [
         '--no-sandbox',
@@ -207,7 +293,7 @@ async function launchListingBrowser(initialViewport, automationOrigin) {
             throw new Error('browser_process_missing');
         }
         const browser = await playwright.chromium.connect(server.wsEndpoint());
-        const context = await browser.newContext({ viewport: null });
+        const context = await browser.newContext(contextOptions);
         await grantListingBrowserLocalNetworkAccess(context, automationOrigin);
         const page = await context.newPage();
         return {
@@ -471,6 +557,9 @@ async function probeMediaFile(filePath) {
     ], 'ffprobe_failed');
     return JSON.parse(stdout);
 }
+async function computeFileSha256(filePath) {
+    return (0, node_crypto_1.createHash)('sha256').update(await (0, promises_1.readFile)(filePath)).digest('hex');
+}
 function parseFrameRate(raw) {
     if (!raw) {
         return null;
@@ -533,14 +622,14 @@ async function runListingRecorder(recorderPath, pid, durationSeconds, rawOutputP
 function formatCommandError(error) {
     if (error.message === 'unsupported_platform') {
         return {
-            message: 'Listing capture only runs on macOS.',
+            message: 'Game media capture only runs on macOS.',
             suggestions: [],
         };
     }
     if (error.message.startsWith('unsupported_macos_version:')) {
         const version = error.message.split(':')[1] || 'unknown';
         return {
-            message: `Listing capture only supports macOS ${SUPPORTED_MACOS_PREFIX} on this machine. Current version: ${version}.`,
+            message: `Game media capture requires macOS ${MIN_SUPPORTED_MACOS_MAJOR}.${MIN_SUPPORTED_MACOS_MINOR} or newer on this machine. Current version: ${version}.`,
             suggestions: [],
         };
     }
@@ -550,6 +639,18 @@ function formatCommandError(error) {
             suggestions: [],
         };
     }
+    if (error.message === 'content_hash_invalid') {
+        return {
+            message: 'The --content-hash value must be a 64-character SHA-256 hex string.',
+            suggestions: [],
+        };
+    }
+    if (error.message === 'listing_preview_support_missing') {
+        return {
+            message: 'This game does not declare preview support, so listing capture cannot run.',
+            suggestions: ['Set previewable: true in catalogue.json, implement the preview scene and __listingCapture hooks, then rerun "playdrop project capture".'],
+        };
+    }
     if (error.message.startsWith('listing_recorder_failed:')) {
         return {
             message: error.message.slice('listing_recorder_failed:'.length),
@@ -629,7 +730,7 @@ function ensureCaptureListingToolAvailable(command) {
         return true;
     }
     (0, messages_1.printErrorWithHelp)(`${command} is required for listing capture.`, [`Install ${command} and make sure it is available on PATH.`], {
-        command: 'project capture listing',
+        command: 'project capture',
     });
     process.exitCode = 1;
     return false;
@@ -640,7 +741,7 @@ async function ensureListingRecorderAvailable(recorderPath) {
         return true;
     }
     catch {
-        (0, messages_1.printErrorWithHelp)(`Native recorder binary was not found at ${recorderPath}.`, ['Build it with: (cd clients/apple/playdrop-listing-recorder && swift build -c release)'], { command: 'project capture listing' });
+        (0, messages_1.printErrorWithHelp)(`Native recorder binary was not found at ${recorderPath}.`, ['Build it with: (cd clients/apple/playdrop-listing-recorder && swift build -c release)'], { command: 'project capture' });
         process.exitCode = 1;
         return false;
     }
@@ -657,20 +758,22 @@ function resolveCaptureListingTarget(parsedOptions) {
             : code === 'catalogue_missing'
                 ? ['Run the command inside a Playdrop workspace or pass the direct HTML file path.']
                 : ['Provide a valid app target or HTML file path.'];
-        (0, messages_1.printErrorWithHelp)(message, suggestions, { command: 'project capture listing' });
+        (0, messages_1.printErrorWithHelp)(message, suggestions, { command: 'project capture' });
         process.exitCode = 1;
         return null;
     }
 }
 async function captureListing(targetArg, options = {}) {
     let parsedOptions;
+    let devRouterPort;
     try {
         parsedOptions = parseCaptureListingOptions(targetArg, options);
+        devRouterPort = resolveCaptureListingDevRouterPort();
         assertSupportedListingEnvironment();
     }
     catch (error) {
         const detail = formatCommandError(error instanceof Error ? error : new Error(String(error)));
-        (0, messages_1.printErrorWithHelp)(detail.message, detail.suggestions, { command: 'project capture listing' });
+        (0, messages_1.printErrorWithHelp)(detail.message, detail.suggestions, { command: 'project capture' });
         process.exitCode = 1;
         return;
     }
@@ -687,21 +790,30 @@ async function captureListing(targetArg, options = {}) {
     }
     let appName = resolvedTarget.appName;
     let appTypeSlug = (0, appUrls_1.getAppTypeSlug)(null);
+    let declaresPreviewSupport = false;
     try {
-        const match = (0, catalogue_utils_1.findAppDefinition)(resolvedTarget.htmlPath);
+        const match = (0, catalogue_utils_1.findAppCatalogueInfo)(resolvedTarget.htmlPath);
         appName = match.name;
         appTypeSlug = (0, appUrls_1.getAppTypeSlug)(match.type);
+        declaresPreviewSupport = match.previewable;
     }
     catch {
-        // keep defaults for direct-file targets outside a registered catalogue
+        declaresPreviewSupport = false;
+    }
+    try {
+        resolveListingCaptureRouteSegment(declaresPreviewSupport);
+    }
+    catch (error) {
+        const detail = formatCommandError(error instanceof Error ? error : new Error(String(error)));
+        (0, messages_1.printErrorWithHelp)(detail.message, detail.suggestions, { command: 'project capture' });
+        process.exitCode = 1;
+        return;
     }
     const outputPaths = await ensureOutputPaths(appName, parsedOptions.outputDir);
     const projectInfo = (0, devShared_1.findProjectInfo)(resolvedTarget.htmlPath);
     const devScriptAvailable = Boolean(projectInfo.projectDir && projectInfo.packageJson && typeof projectInfo.packageJson.scripts?.dev === 'string');
-    // eslint-disable-next-line complexity
-    await (0, commandContext_1.withEnvironment)('project capture listing', 'Capturing listing media', async ({ client, env, envConfig }) => {
+    await (0, commandContext_1.withEnvironment)('project capture', 'Capturing game media', async ({ client, env, envConfig }) => {
         let currentUsername = '';
-        let registeredApp = null;
         try {
             const currentUser = await (0, devShared_1.fetchDevUser)(client);
             currentUsername = currentUser.username.trim();
@@ -719,36 +831,36 @@ async function captureListing(targetArg, options = {}) {
                 (0, messages_1.printErrorWithHelp)(`Could not fetch your account (status ${error.status}).`, [
                     'Run "playdrop auth login" to refresh your session.',
                     'Use "playdrop auth whoami" afterwards to verify the current account.',
-                ], { command: 'project capture listing' });
+                ], { command: 'project capture' });
                 process.exitCode = 1;
                 return;
             }
             if ((0, devShared_1.isNetworkError)(error)) {
-                (0, messages_1.printNetworkIssue)('Could not reach the Playdrop API to resolve your account.', 'project capture listing');
+                (0, messages_1.printNetworkIssue)('Could not reach the Playdrop API to resolve your account.', 'project capture');
                 process.exitCode = 1;
                 return;
             }
             throw error;
         }
         try {
-            registeredApp = await (0, devShared_1.assertAppRegistered)(client, currentUsername, appName);
+            await (0, devShared_1.assertAppRegistered)(client, currentUsername, appName);
         }
         catch (error) {
             if (error instanceof http_1.CLIUnsupportedClientError) {
                 return;
             }
             if (error instanceof types_1.UnsupportedClientError) {
-                (0, http_1.handleUnsupportedError)(error, 'Listing capture');
+                (0, http_1.handleUnsupportedError)(error, 'Game media capture');
                 process.exitCode = 1;
                 return;
             }
             if (error instanceof types_1.ApiError && error.status === 404) {
-                (0, messages_1.printErrorWithHelp)(`App ${currentUsername}/${appName} is not registered on ${env}.`, [`Run "playdrop project create app ${appName}" before using listing capture.`], { command: 'project capture listing' });
+                (0, messages_1.printErrorWithHelp)(`App ${currentUsername}/${appName} is not registered on ${env}.`, [`Run "playdrop project create app ${appName}" before using listing capture.`], { command: 'project capture' });
                 process.exitCode = 1;
                 return;
             }
             if ((0, devShared_1.isNetworkError)(error)) {
-                (0, messages_1.printNetworkIssue)('Could not verify the app registration.', 'project capture listing');
+                (0, messages_1.printNetworkIssue)('Could not verify the app registration.', 'project capture');
                 process.exitCode = 1;
                 return;
             }
@@ -756,11 +868,41 @@ async function captureListing(targetArg, options = {}) {
         }
         const entryLabel = (0, node_path_1.relative)(process.cwd(), resolvedTarget.htmlPath) || resolvedTarget.htmlPath;
         console.log(`[listing] Preparing ${entryLabel} for ${env} (${appTypeSlug}).`);
+        const taskLookup = (0, catalogue_1.findAppTaskByFile)(resolvedTarget.htmlPath);
+        if (taskLookup.errors.length > 0) {
+            (0, messages_1.printErrorWithHelp)(taskLookup.errors[0] || 'Failed to resolve the app task from catalogue.json.', taskLookup.errors.slice(1), { command: 'project capture' });
+            process.exitCode = 1;
+            return;
+        }
+        const localDevAppUrl = (0, devServer_1.buildLocalDevAppUrl)({
+            creatorUsername: currentUsername,
+            appType: appTypeSlug,
+            appName,
+            port: devRouterPort,
+        });
+        let runtimeAssetManifest = (0, devRuntimeAssets_1.createEmptyDevRuntimeAssetManifest)();
+        if (taskLookup.task) {
+            try {
+                runtimeAssetManifest = await (0, devRuntimeAssets_1.buildDevRuntimeAssetManifest)({
+                    client,
+                    apiBase: envConfig.apiBase,
+                    task: taskLookup.task,
+                    creatorUsername: currentUsername,
+                    appBaseUrl: new URL('.', localDevAppUrl).toString(),
+                });
+            }
+            catch (error) {
+                const formatted = (0, dev_1.formatDevRuntimeAssetManifestFailure)(error);
+                (0, messages_1.printErrorWithHelp)(formatted.message, formatted.suggestions, { command: 'project capture' });
+                process.exitCode = 1;
+                return;
+            }
+        }
         const serverAlreadyRunning = await (0, devServer_1.isDevServerAvailable)({
             creatorUsername: currentUsername,
             appType: appTypeSlug,
             appName,
-            port: devServer_1.DEV_ROUTER_PORT,
+            port: devRouterPort,
         }, 750);
         const devServerStartedByCapture = !serverAlreadyRunning;
         let serverHandle = null;
@@ -780,12 +922,13 @@ async function captureListing(targetArg, options = {}) {
         };
         try {
             if (serverAlreadyRunning) {
-                console.log(`[listing] Reusing dev server at ${(0, devServer_1.buildLocalDevAppUrl)({
+                await (0, devServer_1.updateMountedDevRuntimeAssetManifest)({
                     creatorUsername: currentUsername,
-                    appType: appTypeSlug,
                     appName,
-                    port: devServer_1.DEV_ROUTER_PORT,
-                })}`);
+                    runtimeAssetManifest,
+                    port: devRouterPort,
+                });
+                console.log(`[listing] Reusing dev server at ${localDevAppUrl}`);
             }
             else {
                 serverHandle = await (0, devServer_1.startDevServer)({
@@ -793,8 +936,9 @@ async function captureListing(targetArg, options = {}) {
                     appType: appTypeSlug,
                     creatorUsername: currentUsername,
                     htmlPath: resolvedTarget.htmlPath,
-                    port: devServer_1.DEV_ROUTER_PORT,
+                    port: devRouterPort,
                     projectInfo,
+                    runtimeAssetManifest,
                 });
             }
             if (!serverAlreadyRunning && projectInfo.projectDir && !devScriptAvailable && projectInfo.packageJsonPath) {
@@ -807,114 +951,153 @@ async function captureListing(targetArg, options = {}) {
                 await new Promise(resolve => setTimeout(resolve, 1000));
             }
             const webBase = envConfig.webBase ?? 'https://www.playdrop.ai';
-            const routeSegment = resolveListingCaptureRouteSegment(Boolean(registeredApp?.previewable));
-            const frameUrlObject = new URL(`${(0, appUrls_1.normalizePlaydropWebBase)(webBase)}/creators/${encodeURIComponent(currentUsername)}/apps/${appTypeSlug}/${encodeURIComponent(appName)}/${routeSegment}`);
-            frameUrlObject.searchParams.set('launchCheck', '1');
-            const frameUrl = frameUrlObject.toString();
-            const captureSceneId = resolveListingCaptureSceneId(parsedOptions.width, parsedOptions.height);
+            const routeSegment = resolveListingCaptureRouteSegment(declaresPreviewSupport);
+            const localDevPort = resolveListingCaptureLocalDevPort(devRouterPort);
+            const frameUrl = buildListingCaptureFrameUrl({
+                webBase,
+                currentUsername,
+                appTypeSlug,
+                appName,
+                routeSegment,
+                localDevPort,
+            });
+            const frameUrlObject = new URL(frameUrl);
+            console.log(`[listing] Opening ${frameUrl}`);
             const shouldExportPreviewAudio = parsedOptions.audio && routeSegment === 'dev-preview';
-            browserHandle = await launchListingBrowser({
-                width: parsedOptions.width,
-                height: parsedOptions.height,
-            }, frameUrlObject.origin);
-            await browserHandle.page.goto(frameUrl, { waitUntil: 'domcontentloaded' });
-            await browserHandle.page.waitForTimeout(1000);
-            if (routeSegment === 'dev-preview') {
-                console.log(`[listing] Preparing preview scene ${captureSceneId}.`);
-                await prepareHostedListingScene(browserHandle.page, captureSceneId);
-                await browserHandle.page.waitForTimeout(1000);
-            }
-            if (shouldExportPreviewAudio) {
-                console.log('[listing] Starting in-app preview audio capture.');
-                await startHostedListingAudioCapture(browserHandle.page);
-            }
-            const measurement = await fitWindowToRequestedGameplay(browserHandle.page, parsedOptions.width, parsedOptions.height);
-            console.log(`[listing] Gameplay frame ${Math.round(measurement.iframeRect.width)}x${Math.round(measurement.iframeRect.height)} in window ${Math.round(measurement.outerWidth)}x${Math.round(measurement.outerHeight)}.`);
-            await browserHandle.page.waitForTimeout(750);
-            const recorderMetadata = await runListingRecorder(recorderPath, browserHandle.processId, parsedOptions.durationSeconds, outputPaths.rawVideoPath, outputPaths.metadataPath, shouldExportPreviewAudio ? false : parsedOptions.audio);
-            const exportedAudioPath = shouldExportPreviewAudio
-                ? await stopHostedListingAudioCapture(browserHandle.page, outputPaths.outputDir)
-                : null;
-            const rawProbe = await probeMediaFile(outputPaths.rawVideoPath);
-            const rawVideoStream = extractVideoStream(rawProbe);
-            const rawDurationSeconds = readDurationSeconds(rawProbe);
-            const rawAudioTrackCount = countAudioStreams(rawProbe);
-            const crop = computeRecordedCrop(measurement, rawVideoStream.width, rawVideoStream.height);
-            console.log(`[listing] Cropping raw capture to gameplay at ${crop.width}x${crop.height}+${crop.x}+${crop.y}.`);
-            await encodeListingVideo(outputPaths.rawVideoPath, outputPaths.finalVideoPath, outputPaths.posterPath, crop, parsedOptions.width, parsedOptions.height, parsedOptions.fps, parsedOptions.posterAtSeconds);
-            if (exportedAudioPath) {
-                await muxListingAudio(outputPaths.finalVideoPath, exportedAudioPath);
-            }
-            const finalProbe = await probeMediaFile(outputPaths.finalVideoPath);
-            const finalVideoStream = extractVideoStream(finalProbe);
-            const finalDurationSeconds = readDurationSeconds(finalProbe);
-            const finalAudioTrackCount = countAudioStreams(finalProbe);
-            const finalFps = parseFrameRate(finalVideoStream.avg_frame_rate);
-            ensureTolerance(finalVideoStream.width, parsedOptions.width, 0, 'final_width_mismatch');
-            ensureTolerance(finalVideoStream.height, parsedOptions.height, 0, 'final_height_mismatch');
-            ensureTolerance(finalDurationSeconds, parsedOptions.durationSeconds, 1.5, 'final_duration_mismatch');
-            if (parsedOptions.audio && finalAudioTrackCount === 0) {
-                throw new Error('audio_track_missing');
+            const surfaces = resolvedTarget.surfaceTargets.list;
+            const useSurfacePrefix = surfaces.length > 1;
+            const captures = [];
+            const artifactHashes = {};
+            const capturedSurfaces = [];
+            const allWarnings = [];
+            for (const surface of surfaces) {
+                const dimensions = resolveCaptureDimensions(surface, parsedOptions);
+                const captureSceneId = resolveListingCaptureSceneId(dimensions.width, dimensions.height);
+                const surfaceOutputPaths = buildSurfaceOutputPaths(outputPaths.outputDir, surface, useSurfacePrefix);
+                console.log(`[listing] Capturing ${surface} at ${dimensions.width}x${dimensions.height}.`);
+                const contextOptions = resolveListingCaptureBrowserContextOptions(surface, dimensions);
+                browserHandle = await launchListingBrowser(dimensions, frameUrlObject.origin, contextOptions);
+                try {
+                    await browserHandle.page.goto(frameUrl, { waitUntil: 'domcontentloaded' });
+                    await browserHandle.page.waitForTimeout(1000);
+                    if (routeSegment === 'dev-preview') {
+                        console.log(`[listing] Preparing preview scene ${captureSceneId}.`);
+                        await prepareHostedListingScene(browserHandle.page, captureSceneId);
+                        await browserHandle.page.waitForTimeout(1000);
+                    }
+                    if (shouldExportPreviewAudio) {
+                        console.log('[listing] Starting in-app preview audio capture.');
+                        await startHostedListingAudioCapture(browserHandle.page);
+                    }
+                    const measurement = await fitWindowToRequestedGameplay(browserHandle.page, dimensions.width, dimensions.height);
+                    console.log(`[listing] Gameplay frame ${Math.round(measurement.iframeRect.width)}x${Math.round(measurement.iframeRect.height)} in window ${Math.round(measurement.outerWidth)}x${Math.round(measurement.outerHeight)}.`);
+                    await browserHandle.page.waitForTimeout(750);
+                    const recorderMetadata = await runListingRecorder(recorderPath, browserHandle.processId, parsedOptions.durationSeconds, surfaceOutputPaths.rawVideoPath, surfaceOutputPaths.metadataPath, shouldExportPreviewAudio ? false : parsedOptions.audio);
+                    const exportedAudioPath = shouldExportPreviewAudio
+                        ? await stopHostedListingAudioCapture(browserHandle.page, outputPaths.outputDir)
+                        : null;
+                    const rawProbe = await probeMediaFile(surfaceOutputPaths.rawVideoPath);
+                    const rawVideoStream = extractVideoStream(rawProbe);
+                    const rawDurationSeconds = readDurationSeconds(rawProbe);
+                    const rawAudioTrackCount = countAudioStreams(rawProbe);
+                    const crop = computeRecordedCrop(measurement, rawVideoStream.width, rawVideoStream.height);
+                    console.log(`[listing] Cropping raw capture to gameplay at ${crop.width}x${crop.height}+${crop.x}+${crop.y}.`);
+                    await encodeListingVideo(surfaceOutputPaths.rawVideoPath, surfaceOutputPaths.finalVideoPath, surfaceOutputPaths.posterPath, crop, dimensions.width, dimensions.height, parsedOptions.fps, parsedOptions.posterAtSeconds);
+                    if (exportedAudioPath) {
+                        await muxListingAudio(surfaceOutputPaths.finalVideoPath, exportedAudioPath);
+                    }
+                    const finalProbe = await probeMediaFile(surfaceOutputPaths.finalVideoPath);
+                    const finalVideoStream = extractVideoStream(finalProbe);
+                    const finalDurationSeconds = readDurationSeconds(finalProbe);
+                    const finalAudioTrackCount = countAudioStreams(finalProbe);
+                    const finalFps = parseFrameRate(finalVideoStream.avg_frame_rate);
+                    ensureTolerance(finalVideoStream.width, dimensions.width, 0, 'final_width_mismatch');
+                    ensureTolerance(finalVideoStream.height, dimensions.height, 0, 'final_height_mismatch');
+                    ensureTolerance(finalDurationSeconds, parsedOptions.durationSeconds, 1.5, 'final_duration_mismatch');
+                    if (parsedOptions.audio && finalAudioTrackCount === 0) {
+                        throw new Error('audio_track_missing');
+                    }
+                    const warnings = createWarnings(finalProbe, parsedOptions.audio);
+                    for (const warning of warnings) {
+                        allWarnings.push(`${surface}: ${warning}`);
+                    }
+                    artifactHashes[(0, node_path_1.relative)(outputPaths.outputDir, surfaceOutputPaths.finalVideoPath) || 'listing.mp4'] = await computeFileSha256(surfaceOutputPaths.finalVideoPath);
+                    artifactHashes[(0, node_path_1.relative)(outputPaths.outputDir, surfaceOutputPaths.posterPath) || 'poster.png'] = await computeFileSha256(surfaceOutputPaths.posterPath);
+                    capturedSurfaces.push(surface);
+                    captures.push({
+                        surface,
+                        targetUrl: frameUrl,
+                        command: {
+                            durationSeconds: parsedOptions.durationSeconds,
+                            width: dimensions.width,
+                            height: dimensions.height,
+                            fps: parsedOptions.fps,
+                            posterAtSeconds: parsedOptions.posterAtSeconds,
+                            audio: parsedOptions.audio,
+                            keepRaw: parsedOptions.keepRaw,
+                        },
+                        measurement,
+                        recorder: recorderMetadata,
+                        crop,
+                        rawVideo: {
+                            path: parsedOptions.keepRaw ? surfaceOutputPaths.rawVideoPath : null,
+                            width: rawVideoStream.width,
+                            height: rawVideoStream.height,
+                            durationSeconds: rawDurationSeconds,
+                            audioTrackCount: rawAudioTrackCount,
+                        },
+                        finalVideo: {
+                            path: surfaceOutputPaths.finalVideoPath,
+                            width: finalVideoStream.width,
+                            height: finalVideoStream.height,
+                            durationSeconds: finalDurationSeconds,
+                            audioTrackCount: finalAudioTrackCount,
+                            fps: finalFps,
+                        },
+                        posterPath: surfaceOutputPaths.posterPath,
+                        warnings,
+                    });
+                    if (!parsedOptions.keepRaw) {
+                        await (0, promises_1.rm)(surfaceOutputPaths.rawVideoPath, { force: true });
+                    }
+                    console.log(`[listing] Saved ${surface} video to ${(0, node_path_1.relative)(process.cwd(), surfaceOutputPaths.finalVideoPath) || surfaceOutputPaths.finalVideoPath}`);
+                    console.log(`[listing] Saved ${surface} poster to ${(0, node_path_1.relative)(process.cwd(), surfaceOutputPaths.posterPath) || surfaceOutputPaths.posterPath}`);
+                    if (warnings.length > 0) {
+                        for (const warning of warnings) {
+                            console.warn(`[listing][warn][${surface}] ${warning}`);
+                        }
+                    }
+                }
+                finally {
+                    await browserHandle.close();
+                    browserHandle = null;
+                }
             }
-            const warnings = createWarnings(finalProbe, parsedOptions.audio);
             const report = {
                 appName,
-                targetUrl: frameUrl,
                 outputDir: outputPaths.outputDir,
-                command: {
-                    durationSeconds: parsedOptions.durationSeconds,
-                    width: parsedOptions.width,
-                    height: parsedOptions.height,
-                    fps: parsedOptions.fps,
-                    posterAtSeconds: parsedOptions.posterAtSeconds,
-                    audio: parsedOptions.audio,
-                    keepRaw: parsedOptions.keepRaw,
-                },
-                measurement,
-                recorder: recorderMetadata,
-                crop,
-                rawVideo: {
-                    path: parsedOptions.keepRaw ? outputPaths.rawVideoPath : null,
-                    width: rawVideoStream.width,
-                    height: rawVideoStream.height,
-                    durationSeconds: rawDurationSeconds,
-                    audioTrackCount: rawAudioTrackCount,
+                captures,
+                warnings: allWarnings,
+                binding: {
+                    contentHash: parsedOptions.contentHash,
+                    artifactHashes,
+                    capturedSurfaces,
                 },
-                finalVideo: {
-                    path: outputPaths.finalVideoPath,
-                    width: finalVideoStream.width,
-                    height: finalVideoStream.height,
-                    durationSeconds: finalDurationSeconds,
-                    audioTrackCount: finalAudioTrackCount,
-                    fps: finalFps,
-                },
-                posterPath: outputPaths.posterPath,
-                warnings,
             };
             await (0, promises_1.writeFile)(outputPaths.reportPath, `${JSON.stringify(report, null, 2)}\n`, 'utf8');
-            if (!parsedOptions.keepRaw) {
-                await (0, promises_1.rm)(outputPaths.rawVideoPath, { force: true });
-            }
-            console.log(`[listing] Saved video to ${(0, node_path_1.relative)(process.cwd(), outputPaths.finalVideoPath) || outputPaths.finalVideoPath}`);
-            console.log(`[listing] Saved poster to ${(0, node_path_1.relative)(process.cwd(), outputPaths.posterPath) || outputPaths.posterPath}`);
             console.log(`[listing] Saved report to ${(0, node_path_1.relative)(process.cwd(), outputPaths.reportPath) || outputPaths.reportPath}`);
-            if (warnings.length > 0) {
-                for (const warning of warnings) {
-                    console.warn(`[listing][warn] ${warning}`);
-                }
-            }
         }
         catch (error) {
             if (error instanceof http_1.CLIUnsupportedClientError) {
                 return;
             }
             if (error instanceof types_1.UnsupportedClientError) {
-                (0, http_1.handleUnsupportedError)(error, 'Listing capture');
+                (0, http_1.handleUnsupportedError)(error, 'Game media capture');
                 process.exitCode = 1;
                 return;
             }
             const detail = formatCommandError(error instanceof Error ? error : new Error(String(error)));
-            (0, messages_1.printErrorWithHelp)(detail.message, detail.suggestions, { command: 'project capture listing' });
+            (0, messages_1.printErrorWithHelp)(detail.message, detail.suggestions, { command: 'project capture' });
             process.exitCode = 1;
         }
         finally {