screenci 0.0.9 → 0.0.10

package/dist/Dockerfile

@@ -0,0 +1,34 @@
+# Recording runtime ───────────────────────────────────────────────────────────
+FROM docker.io/library/node:25.2.1-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    xvfb \
+    ffmpeg \
+    x11-utils \
+    && rm -rf /var/lib/apt/lists/*
+
+# ── Dependency layer (cached until package.json changes) ──────────────────────
+# Install screenci as a workspace package so npm creates the bin link.
+COPY package.json ./screenci/
+RUN printf '{"private":true,"workspaces":["screenci"]}' > package.json && npm install
+
+# Playwright browser download: only re-runs when the playwright version changes.
+RUN npx playwright install chromium --with-deps
+
+# ── screenci build output ─────────────────────────────────────────────────────
+# Copy pre-built dist directly from the screenci package directory.
+COPY dist ./screenci/dist/
+
+# Explicit bin wrapper — no npm bin-linking magic needed.
+RUN printf '#!/bin/sh\nexec node /app/screenci/dist/cli.js "$@"\n' > /app/node_modules/.bin/screenci && \
+    chmod +x /app/node_modules/.bin/screenci
+
+# Create .screenci directory for recordings
+RUN mkdir -p .screenci
+
+# Add node_modules/.bin to PATH
+ENV PATH="/app/node_modules/.bin:${PATH}"
+
+CMD ["echo", "Container ready"]

package/dist/cli.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../cli.ts"],"names":[],"mappings":";AAurBA,wBAAsB,IAAI,kBAoJzB;AAqED,wBAAgB,sBAAsB,IAAI,MAAM,CAc/C"}
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../cli.ts"],"names":[],"mappings":";AAgzBA,wBAAsB,IAAI,kBA2JzB;AAqED,wBAAgB,sBAAsB,IAAI,MAAM,CAc/C"}

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env -S npx tsx
 import { spawn, spawnSync } from 'child_process';
 import { createReadStream } from 'fs';
-import { existsSync, mkdirSync, readdirSync, realpathSync, rmSync } from 'fs';
+import { existsSync, mkdirSync, readFileSync, readdirSync, realpathSync, rmSync, } from 'fs';
 import { createHash } from 'crypto';
 import { createServer } from 'http';
 import { mkdir, readdir, readFile, stat, writeFile } from 'fs/promises';
@@ -9,6 +9,80 @@ import { dirname, relative as pathRelative, resolve } from 'path';
 import { createInterface } from 'readline/promises';
 import { fileURLToPath } from 'url';
 import { logger } from './src/logger.js';
+function writeInline(msg) {
+    process.stdout.write(msg);
+}
+function completeInline(msg) {
+    process.stdout.write(`\r\x1b[K${msg}\n`);
+}
+function parseDockerfileVersion(dockerfilePath) {
+    let content;
+    try {
+        content = readFileSync(dockerfilePath, 'utf-8');
+    }
+    catch {
+        return 'unknown';
+    }
+    const fromLine = content
+        .split('\n')
+        .find((line) => line.trim().toUpperCase().startsWith('FROM'));
+    if (!fromLine)
+        return 'unknown';
+    const match = fromLine.match(/:([^\s@]+)/);
+    return match?.[1] ?? 'unknown';
+}
+function spawnSilent(cmd, args) {
+    return new Promise((resolve, reject) => {
+        const child = spawn(cmd, args, { stdio: 'pipe' });
+        child.on('close', (code) => {
+            if (code === 0) {
+                resolve();
+            }
+            else {
+                reject(new Error(`${cmd} exited with code ${code}`));
+            }
+        });
+        child.on('error', reject);
+    });
+}
+const CONTAINER_LOG_FILTER = [
+    /^Running ScreenCI /,
+    /^Using config:/,
+    /^Starting Xvfb /,
+    /^Xvfb started /,
+    /^Recording video to:/,
+    /^Recording with /,
+    /^Stopping recording\.\.\./,
+    /^FFmpeg exited /,
+    /^Video saved to:/,
+    /^Events saved to:/,
+];
+function spawnContainerRecording(cmd, args) {
+    return new Promise((resolve, reject) => {
+        const child = spawn(cmd, args, { stdio: ['inherit', 'pipe', 'pipe'] });
+        function forwardFiltered(chunk, out) {
+            const lines = chunk.toString().split('\n');
+            for (const line of lines) {
+                if (line === '')
+                    continue;
+                if (!CONTAINER_LOG_FILTER.some((re) => re.test(line.trimStart()))) {
+                    out.write(line + '\n');
+                }
+            }
+        }
+        child.stdout?.on('data', (chunk) => forwardFiltered(chunk, process.stdout));
+        child.stderr?.on('data', (chunk) => forwardFiltered(chunk, process.stderr));
+        child.on('close', (code) => {
+            if (code === 0) {
+                resolve();
+            }
+            else {
+                reject(new Error(`${cmd} exited with code ${code}`));
+            }
+        });
+        child.on('error', reject);
+    });
+}
 function clearDirectory(dir) {
     mkdirSync(dir, { recursive: true });
     for (const entry of readdirSync(dir)) {
@@ -54,6 +128,8 @@ function parseArgs(args) {
     }
     let configPath;
     let noContainer = false;
+    let imageTag;
+    let verbose = false;
     const otherArgs = [];
     for (let i = 1; i < args.length; i++) {
         const arg = args[i];
@@ -71,11 +147,25 @@ function parseArgs(args) {
         else if (arg === '--no-container') {
             noContainer = true;
         }
+        else if (arg === '--verbose' || arg === '-v') {
+            verbose = true;
+        }
+        else if (arg === '--tag') {
+            const nextArg = args[i + 1];
+            if (nextArg !== undefined) {
+                imageTag = nextArg;
+                i++; // skip next arg
+            }
+            else {
+                logger.error('Error: --tag requires a tag argument');
+                process.exit(1);
+            }
+        }
         else if (arg !== undefined) {
             otherArgs.push(arg);
         }
     }
-    return { command, configPath, noContainer, otherArgs };
+    return { command, configPath, noContainer, imageTag, verbose, otherArgs };
 }
 async function findLatestEntry(screenciDir) {
     let entries;
@@ -187,11 +277,12 @@ async function uploadRecordings(screenciDir, projectName, apiUrl, secret, specif
     }
     catch {
         logger.warn('No .screenci directory found, skipping upload');
-        return;
+        return null;
     }
     if (specificEntry !== undefined) {
         entries = entries.filter((e) => e === specificEntry);
     }
+    let firstProjectId = null;
     for (const entry of entries) {
         const dataJsonPath = resolve(screenciDir, entry, 'data.json');
         if (!existsSync(dataJsonPath))
@@ -206,7 +297,7 @@ async function uploadRecordings(screenciDir, projectName, apiUrl, secret, specif
             continue;
         }
         const videoName = data.metadata?.videoName ?? entry;
-        logger.info(`Uploading "${videoName}"...`);
+        writeInline(`Uploading "${videoName}"...`);
         try {
             // Step 1: register upload and get recordingId
             const startResponse = await fetch(`${apiUrl}/cli/upload/start`, {
@@ -219,10 +310,14 @@ async function uploadRecordings(screenciDir, projectName, apiUrl, secret, specif
             });
             if (!startResponse.ok) {
                 const text = await startResponse.text();
+                process.stdout.write('\n');
                 logger.warn(`Failed to start upload for "${videoName}": ${startResponse.status} ${text}`);
                 continue;
             }
-            const { recordingId } = (await startResponse.json());
+            const { recordingId, projectId } = (await startResponse.json());
+            if (firstProjectId === null) {
+                firstProjectId = projectId;
+            }
             // Step 1b: upload asset files referenced in data.json
             await uploadAssets(data, apiUrl, secret, recordingId, resolve(screenciDir, '..'));
             // Step 2: stream the recording video file (if it exists)
@@ -243,16 +338,19 @@ async function uploadRecordings(screenciDir, projectName, apiUrl, secret, specif
                 });
                 if (!recordingResponse.ok) {
                     const text = await recordingResponse.text();
+                    process.stdout.write('\n');
                     logger.warn(`Failed to upload recording for "${videoName}": ${recordingResponse.status} ${text}`);
                     continue;
                 }
             }
-            logger.info(`Uploaded "${videoName}" successfully`);
+            completeInline(`Uploading "${videoName}" ✓`);
         }
         catch (err) {
+            process.stdout.write('\n');
             logger.warn(`Network error uploading "${videoName}":`, err);
         }
     }
+    return firstProjectId;
 }
 async function uploadLatest(configPath) {
     const resolvedConfigPath = findScreenCIConfig(configPath);
@@ -281,11 +379,9 @@ async function uploadLatest(configPath) {
             logger.warn(`Failed to load env file ${envFilePath}:`, err);
         }
     }
-    const convexUrl = screenciConfig.apiUrl ?? process.env.SCREENCI_URL;
-    if (!convexUrl) {
-        logger.error('No API URL configured. Set apiUrl in screenci.config.ts or SCREENCI_URL env var.');
-        process.exit(1);
-    }
+    const apiUrl = process.env.DEV_PORT
+        ? `http://localhost:${process.env.DEV_PORT}`
+        : 'https://api.screenci.com';
     const secret = process.env.SCREENCI_SECRET;
     if (!secret) {
         logger.error('No secret configured. Set SCREENCI_SECRET in your .env file (get it from the API Key page in the dashboard).');
@@ -298,15 +394,24 @@ async function uploadLatest(configPath) {
         logger.warn('No recordings found in .screenci directory');
         return;
     }
+    const appUrl = process.env.SCREENCI_APP_URL
+        ? process.env.SCREENCI_APP_URL
+        : process.env.DEV_PORT
+            ? `http://localhost:${process.env.DEV_PORT}`
+            : 'https://app.screenci.com';
     logger.info(`Uploading latest recording: "${latestEntry}"`);
-    await uploadRecordings(screenciDir, screenciConfig.projectName, convexUrl, secret, latestEntry);
+    const projectId = await uploadRecordings(screenciDir, screenciConfig.projectName, apiUrl, secret, latestEntry);
+    if (projectId !== null) {
+        logger.info('');
+        logger.info('Recording finished, results available at:');
+        logger.info(`${appUrl}/project/${projectId}`);
+    }
 }
 function generateConfig(projectName) {
     return `import { defineConfig } from 'screenci'
 
 export default defineConfig({
   projectName: ${JSON.stringify(projectName)},
-  apiUrl: process.env.SCREENCI_URL ?? 'http://localhost:8787',
   envFile: '.env',
   videoDir: './videos',
   forbidOnly: !!process.env.CI,
@@ -443,9 +548,9 @@ async function performBrowserLogin(appUrl) {
             const port = server.address().port;
             const callbackUrl = `http://localhost:${port}/callback`;
             const loginUrl = `${appUrl}/cli-auth?callback=${encodeURIComponent(callbackUrl)}`;
-            logger.info('Opening browser for authentication...');
             logger.info(`If the browser does not open automatically, visit:`);
-            logger.info(`  ${loginUrl}`);
+            logger.info(loginUrl);
+            logger.info('');
             openBrowser(loginUrl);
         });
         const timeout = setTimeout(() => {
@@ -494,8 +599,9 @@ async function runInitAuth() {
         (devPort ? `http://localhost:${devPort}` : 'https://app.screenci.com');
     try {
         const secret = await performBrowserLogin(appUrl);
-        await writeFile(resolve(process.cwd(), '.env'), `SCREENCI_SECRET=${secret}\n`);
-        logger.info('API key saved to .env');
+        const savePath = resolve(process.cwd(), '.env');
+        await writeFile(savePath, `SCREENCI_SECRET=${secret}\n`);
+        logger.info(`Successfully saved SCREENCI_SECRET to ${savePath}`);
     }
     catch (err) {
         const msg = err instanceof Error ? err.message : String(err);
@@ -552,7 +658,7 @@ async function runInit(projectNameArg, localPackagePath) {
 }
 export async function main() {
     const args = process.argv.slice(2);
-    const { command, configPath, noContainer, otherArgs } = parseArgs(args);
+    const { command, configPath, noContainer, imageTag, verbose, otherArgs } = parseArgs(args);
     switch (command) {
         case 'record': {
             const useContainer = !noContainer && process.env.SCREENCI_IN_CONTAINER !== 'true';
@@ -589,7 +695,7 @@ export async function main() {
                         // Config import failed but SCREENCI_SECRET is already in env — continue
                     }
                     if (!process.env.SCREENCI_SECRET) {
-                        logger.info('SCREENCI_SECRET not found. Opening browser to sign in and select a plan...');
+                        logger.info('No SCREENCI_SECRET in .env file, opening browser for authentication...');
                         const devPort = process.env.DEV_PORT;
                         const appUrl = process.env.SCREENCI_APP_URL ??
                             (devPort
@@ -599,12 +705,12 @@ export async function main() {
                         const savePath = envFilePath ?? resolve(dirname(resolvedConfigForSecret), '.env');
                         await writeFile(savePath, `SCREENCI_SECRET=${secret}\n`);
                         process.env.SCREENCI_SECRET = secret;
-                        logger.info('API key saved.');
+                        logger.info(`Successfully saved SCREENCI_SECRET to ${savePath}`);
                     }
                 }
             }
             if (useContainer) {
-                await runWithContainer(otherArgs, configPath);
+                await runWithContainer(otherArgs, configPath, imageTag, verbose);
             }
             else {
                 await run(command, otherArgs, configPath);
@@ -612,7 +718,7 @@ export async function main() {
             // Upload only from the host, not from inside the container
             if (process.env.SCREENCI_IN_CONTAINER === 'true')
                 break;
-            // After recording, upload results to Convex if configured
+            // After recording, upload results to API if configured
             const resolvedConfigPath = findScreenCIConfig(configPath);
             if (resolvedConfigPath) {
                 try {
@@ -627,11 +733,14 @@ export async function main() {
                             logger.warn(`Failed to load env file ${envFilePath}:`, err);
                         }
                     }
-                    const convexUrl = screenciConfig.apiUrl ?? process.env.SCREENCI_URL;
-                    if (!convexUrl) {
-                        logger.info('No API URL configured, skipping upload. Set apiUrl in screenci.config.ts or SCREENCI_URL env var.');
-                        break;
-                    }
+                    const apiUrl = process.env.DEV_PORT
+                        ? `http://localhost:${process.env.DEV_PORT}`
+                        : 'https://api.screenci.com';
+                    const appUrl = process.env.SCREENCI_APP_URL
+                        ? process.env.SCREENCI_APP_URL
+                        : process.env.DEV_PORT
+                            ? `http://localhost:${process.env.DEV_PORT}`
+                            : 'https://app.screenci.com';
                     const secret = process.env.SCREENCI_SECRET;
                     if (!secret) {
                         logger.info('No secret configured, skipping upload. Set SCREENCI_SECRET in your .env file.');
@@ -639,7 +748,12 @@ export async function main() {
                     }
                     const configDir = dirname(resolvedConfigPath);
                     const screenciDir = resolve(configDir, '.screenci');
-                    await uploadRecordings(screenciDir, screenciConfig.projectName, convexUrl, secret);
+                    const projectId = await uploadRecordings(screenciDir, screenciConfig.projectName, apiUrl, secret);
+                    if (projectId !== null) {
+                        logger.info('');
+                        logger.info('Recording finished, results available at:');
+                        logger.info(`${appUrl}/project/${projectId}`);
+                    }
                 }
                 catch (err) {
                     logger.warn('Failed to load config for upload:', err);
@@ -746,7 +860,25 @@ export function detectContainerRuntime() {
     logger.error('  docker: https://docs.docker.com/get-docker/');
     process.exit(1);
 }
-async function runWithContainer(additionalArgs, customConfigPath) {
+async function buildImage(cmd, args, label, verbose) {
+    if (verbose) {
+        await spawnInherited(cmd, args);
+        return;
+    }
+    writeInline(`${label}...`);
+    try {
+        await spawnSilent(cmd, args);
+        completeInline(`${label} ✓`);
+    }
+    catch (err) {
+        process.stdout.write('\n');
+        const msg = err instanceof Error ? err.message : String(err);
+        logger.error(msg);
+        logger.error('Run again with --verbose to see the full build output');
+        process.exit(1);
+    }
+}
+async function runWithContainer(additionalArgs, customConfigPath, imageTag, verbose = false) {
     const configPath = findScreenCIConfig(customConfigPath);
     if (!configPath) {
         const errorMsg = customConfigPath
@@ -768,43 +900,92 @@ async function runWithContainer(additionalArgs, customConfigPath) {
         process.exit(1);
     }
     const containerRuntime = detectContainerRuntime();
+    const ghcrImage = 'ghcr.io/screenci/record:latest';
+    const dockerfileVersion = parseDockerfileVersion(dockerfilePath);
     if (process.env['SCREENCI_LOCAL_IMAGE']) {
         logger.info('SCREENCI_LOCAL_IMAGE set — skipping screenci image build');
     }
+    else if (imageTag !== undefined) {
+        const remoteImage = `ghcr.io/screenci/record:${imageTag}`;
+        const imageExists = spawnSync(containerRuntime, ['image', 'exists', remoteImage], {
+            stdio: 'ignore',
+        }).status === 0;
+        logger.info(`Using image tag ${imageTag} instead of the version ${dockerfileVersion} from Dockerfile`);
+        if (!imageExists) {
+            await buildImage(containerRuntime, ['pull', remoteImage], 'Pulling image', verbose);
+        }
+        await spawnSilent(containerRuntime, ['tag', remoteImage, ghcrImage]);
+    }
     else {
         const cliDir = dirname(fileURLToPath(import.meta.url));
+        const screenciPackageRoot = resolve(cliDir, '..');
         const screenciDockerfilePath = resolve(cliDir, 'Dockerfile');
-        logger.info(`Building container image with ${containerRuntime}...`);
-        logger.info(`Using Dockerfile: ${screenciDockerfilePath}`);
-        logger.info(`Build context: ${repoRoot}`);
-        await spawnInherited(containerRuntime, [
-            'build',
-            '-f',
-            screenciDockerfilePath,
-            '-t',
-            'screenci',
-            repoRoot,
-        ]);
-    }
-    logger.info(`Using Dockerfile: ${dockerfilePath}`);
-    logger.info(`Build context: ${configDir}`);
-    await spawnInherited(containerRuntime, [
-        'build',
-        '-f',
-        dockerfilePath,
-        '-t',
-        'screenci',
-        configDir,
-    ]);
+        if (verbose) {
+            await spawnInherited(containerRuntime, [
+                'build',
+                '-f',
+                screenciDockerfilePath,
+                '-t',
+                ghcrImage,
+                screenciPackageRoot,
+            ]);
+            await spawnInherited(containerRuntime, [
+                'build',
+                '-f',
+                dockerfilePath,
+                '-t',
+                'screenci',
+                configDir,
+            ]);
+        }
+        else {
+            writeInline('Building image...');
+            try {
+                await spawnSilent(containerRuntime, [
+                    'build',
+                    '-f',
+                    screenciDockerfilePath,
+                    '-t',
+                    ghcrImage,
+                    screenciPackageRoot,
+                ]);
+                await spawnSilent(containerRuntime, [
+                    'build',
+                    '-f',
+                    dockerfilePath,
+                    '-t',
+                    'screenci',
+                    configDir,
+                ]);
+                completeInline('Building image ✓');
+            }
+            catch (err) {
+                process.stdout.write('\n');
+                const msg = err instanceof Error ? err.message : String(err);
+                logger.error(msg);
+                logger.error('Run again with --verbose to see the full build output');
+                process.exit(1);
+            }
+        }
+    }
+    if (imageTag !== undefined || process.env['SCREENCI_LOCAL_IMAGE']) {
+        await buildImage(containerRuntime, ['build', '-f', dockerfilePath, '-t', 'screenci', configDir], 'Building image', verbose);
+    }
     clearDirectory(resolve(configDir, '.screenci'));
-    logger.info('Running recording in container...');
-    await spawnInherited(containerRuntime, [
+    const secret = process.env['SCREENCI_SECRET'];
+    if (secret === undefined) {
+        logger.error('Error: SCREENCI_SECRET is not set');
+        process.exit(1);
+    }
+    await spawnContainerRecording(containerRuntime, [
         'run',
         '--rm',
         '-e',
         'SCREENCI_IN_CONTAINER=true',
         '-e',
         'SCREENCI_RECORD=true',
+        '-e',
+        `SCREENCI_SECRET=${secret}`,
         '-v',
         `${configDir}/.screenci:/app/.screenci`,
         '-v',
@@ -836,8 +1017,10 @@ async function run(command, additionalArgs, customConfigPath) {
     const isHeaded = additionalArgs.includes('--headed');
     const shouldUseUI = command === 'dev' && !isHeaded;
     const mode = command === 'dev' ? (isHeaded ? 'headed mode' : 'UI mode') : 'recorder';
-    logger.info(`Running ScreenCI ${mode} with npx...`);
-    logger.info(`Using config: ${configPath}`);
+    if (process.env.SCREENCI_IN_CONTAINER !== 'true') {
+        logger.info(`Running ScreenCI ${mode} with npx...`);
+        logger.info(`Using config: ${configPath}`);
+    }
     const playwrightArgs = [
         'playwright',
         'test',