@automaze/proof 0.20260311.0

package/dist/modes/visual.js

@@ -0,0 +1,165 @@
+import { readdir, rm, copyFile, mkdir } from "fs/promises";
+import { existsSync } from "fs";
+import { join, dirname } from "path";
+import { spawn } from "child_process";
+import { getVideoDuration } from "../duration";
+const CURSOR_HIGHLIGHT_SCRIPT = `
+  (function() {
+    function init() {
+      if (document.getElementById('__proof_cursor')) return;
+      const cursor = document.createElement('div');
+      cursor.id = '__proof_cursor';
+      cursor.style.cssText = [
+        'position: fixed',
+        'width: 20px',
+        'height: 20px',
+        'border-radius: 50%',
+        'background: rgba(255, 50, 50, 0.8)',
+        'border: 2px solid rgba(255, 255, 255, 0.95)',
+        'pointer-events: none',
+        'z-index: 2147483647',
+        'transform: translate(-50%, -50%)',
+        'box-shadow: 0 0 8px rgba(255,50,50,0.4), 0 0 2px rgba(0,0,0,0.3)',
+        'display: none',
+        'transition: left 0.08s ease-out, top 0.08s ease-out',
+      ].join(';');
+      document.documentElement.appendChild(cursor);
+
+      function showCursor(x, y) {
+        cursor.style.left = x + 'px';
+        cursor.style.top = y + 'px';
+        cursor.style.display = 'block';
+      }
+
+      function spawnRipple(x, y) {
+        const ripple = document.createElement('div');
+        ripple.style.cssText = [
+          'position: fixed',
+          'pointer-events: none',
+          'z-index: 2147483646',
+          'border-radius: 50%',
+          'border: 3px solid rgba(255, 50, 50, 0.7)',
+          'width: 10px',
+          'height: 10px',
+          'left: ' + x + 'px',
+          'top: ' + y + 'px',
+          'transform: translate(-50%, -50%) scale(1)',
+          'opacity: 1',
+          'transition: transform 0.5s ease-out, opacity 0.5s ease-out',
+        ].join(';');
+        document.documentElement.appendChild(ripple);
+        requestAnimationFrame(() => {
+          ripple.style.transform = 'translate(-50%, -50%) scale(5)';
+          ripple.style.opacity = '0';
+        });
+        setTimeout(() => ripple.remove(), 600);
+      }
+
+      for (const evt of ['mousemove', 'pointermove']) {
+        document.addEventListener(evt, (e) => showCursor(e.clientX, e.clientY), true);
+        window.addEventListener(evt, (e) => showCursor(e.clientX, e.clientY), true);
+      }
+      for (const evt of ['mousedown', 'pointerdown', 'click']) {
+        document.addEventListener(evt, (e) => {
+          showCursor(e.clientX, e.clientY);
+          spawnRipple(e.clientX, e.clientY);
+        }, true);
+        window.addEventListener(evt, (e) => {
+          showCursor(e.clientX, e.clientY);
+          spawnRipple(e.clientX, e.clientY);
+        }, true);
+      }
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  })();
+`;
+export async function captureVisual(options, runDir, filePrefix, config) {
+    const label = options.label ?? "recording";
+    const testFile = options.testFile;
+    const testDir = dirname(testFile);
+    const configCandidates = [
+        join(testDir, "playwright.config.ts"),
+        join(testDir, "playwright.config.js"),
+        join(testDir, "playwright.config.mjs"),
+    ];
+    const existingConfig = configCandidates.find((c) => existsSync(c));
+    const testResultsDir = join(runDir, "pw-results");
+    await mkdir(testResultsDir, { recursive: true });
+    const testArgs = [
+        "playwright", "test", testFile,
+        "--reporter=list",
+        "--output", testResultsDir,
+    ];
+    if (options.testName) {
+        testArgs.push("-g", options.testName);
+    }
+    if (existingConfig) {
+        testArgs.push("--config", existingConfig);
+    }
+    const env = {
+        ...process.env,
+        PWDEBUG: "0",
+        PLAYWRIGHT_VIDEO: "on",
+    };
+    let exitCode = null;
+    let stderr = "";
+    await new Promise((resolve) => {
+        const proc = spawn("npx", testArgs, {
+            stdio: "pipe",
+            env,
+            cwd: testDir,
+        });
+        proc.stderr.on("data", (chunk) => { stderr += chunk.toString(); });
+        proc.on("close", (code) => {
+            exitCode = code;
+            resolve();
+        });
+        proc.on("error", (err) => {
+            throw new Error(`Failed to run Playwright: ${err.message}. Is @playwright/test installed?`);
+        });
+    });
+    const videoFile = await findVideo(testResultsDir);
+    if (!videoFile) {
+        const hint = stderr.trim() ? `\nPlaywright output:\n${stderr.trim().split("\n").slice(-5).join("\n")}` : "";
+        throw new Error(`No video file found after Playwright test run. Check that video: 'on' is set in playwright config.${hint}`);
+    }
+    const ext = videoFile.endsWith(".webm") ? ".webm" : ".mp4";
+    const finalPath = join(runDir, `${filePrefix}${ext}`);
+    await copyFile(videoFile, finalPath);
+    await rm(testResultsDir, { recursive: true, force: true });
+    const duration = await getVideoDuration(finalPath);
+    return {
+        path: finalPath,
+        mode: "browser",
+        duration,
+        label,
+    };
+}
+async function findVideo(resultsDir) {
+    if (!existsSync(resultsDir))
+        return null;
+    const entries = await readdir(resultsDir, { withFileTypes: true });
+    for (const entry of entries) {
+        if (!entry.isDirectory() && (entry.name.endsWith(".webm") || entry.name.endsWith(".mp4"))) {
+            return join(resultsDir, entry.name);
+        }
+    }
+    for (const entry of entries) {
+        if (!entry.isDirectory())
+            continue;
+        const subDir = join(resultsDir, entry.name);
+        const files = await readdir(subDir);
+        const video = files.find((f) => f.endsWith(".webm") || f.endsWith(".mp4"));
+        if (video)
+            return join(subDir, video);
+    }
+    return null;
+}
+export function getCursorHighlightScript() {
+    return CURSOR_HIGHLIGHT_SCRIPT;
+}

package/dist/report.d.ts

@@ -0,0 +1,2 @@
+import type { ProofManifest, ReportFormat } from "./types";
+export declare function generateReport(manifest: ProofManifest, runDir: string, format: ReportFormat): Promise<string>;

package/dist/report.js

@@ -0,0 +1,196 @@
+import { readFile, writeFile } from "fs/promises";
+import { join, basename } from "path";
+export async function generateReport(manifest, runDir, format) {
+    switch (format) {
+        case "md":
+            return generateMd(manifest, runDir);
+        case "html":
+            return generateHtml(manifest, runDir, false);
+        case "archive":
+            return generateHtml(manifest, runDir, true);
+    }
+}
+function formatTime(iso) {
+    return new Date(iso).toLocaleTimeString("en-US", { hour12: false });
+}
+function formatDate(iso) {
+    return new Date(iso).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+    });
+}
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    return `${(ms / 1000).toFixed(1)}s`;
+}
+function modeIcon(mode) {
+    return mode === "browser" ? "🌐" : "🖥";
+}
+// --- Markdown ---
+function generateMd(manifest, runDir) {
+    const lines = [];
+    const totalDuration = manifest.entries.reduce((sum, e) => sum + e.duration, 0);
+    lines.push(`# Proof Report`);
+    lines.push(``);
+    lines.push(`**App:** ${manifest.appName}`);
+    lines.push(`**Run:** ${manifest.run}`);
+    lines.push(`**Date:** ${formatDate(manifest.createdAt)}`);
+    lines.push(`**Entries:** ${manifest.entries.length}`);
+    if (manifest.description) {
+        lines.push(``);
+        lines.push(manifest.description);
+    }
+    lines.push(``);
+    lines.push(`| # | Label | Mode | Duration | Artifact |`);
+    lines.push(`|---|-------|------|----------|----------|`);
+    manifest.entries.forEach((entry, i) => {
+        const label = entry.label ?? entry.mode;
+        lines.push(`| ${i + 1} | ${modeIcon(entry.mode)} ${label} | ${entry.mode} | ${formatDuration(entry.duration)} | [${entry.artifact}](./${entry.artifact}) |`);
+    });
+    lines.push(``);
+    lines.push(`---`);
+    lines.push(``);
+    for (const entry of manifest.entries) {
+        lines.push(`### ${modeIcon(entry.mode)} ${entry.label ?? entry.mode}`);
+        lines.push(``);
+        lines.push(`${entry.description}`);
+        lines.push(``);
+        lines.push(`- **Time:** ${formatTime(entry.timestamp)}`);
+        lines.push(`- **Duration:** ${formatDuration(entry.duration)}`);
+        if (entry.command)
+            lines.push(`- **Command:** \`${entry.command}\``);
+        if (entry.testFile)
+            lines.push(`- **Test file:** \`${basename(entry.testFile)}\``);
+        if (entry.testName)
+            lines.push(`- **Test name:** ${entry.testName}`);
+        lines.push(`- **Artifact:** [${entry.artifact}](./${entry.artifact})`);
+        lines.push(``);
+    }
+    lines.push(`---`);
+    lines.push(`*Generated by [@automaze/proof](https://www.npmjs.com/package/@automaze/proof)*`);
+    const md = lines.join("\n");
+    const outPath = join(runDir, "report.md");
+    return writeFile(outPath, md, "utf-8").then(() => outPath);
+}
+// --- HTML (shared by html and archive) ---
+async function generateHtml(manifest, runDir, inline) {
+    const totalDuration = manifest.entries.reduce((sum, e) => sum + e.duration, 0);
+    const terminalCount = manifest.entries.filter(e => e.mode === "terminal").length;
+    const browserCount = manifest.entries.filter(e => e.mode === "browser").length;
+    const sections = [];
+    for (const entry of manifest.entries) {
+        const mediaHtml = await buildMediaEmbed(entry, runDir, inline);
+        const label = entry.label ?? entry.mode;
+        const isTerminal = entry.mode === "terminal";
+        const badgeClass = isTerminal
+            ? "text-green-800 bg-emerald-100/80"
+            : "text-blue-800 bg-sky-100";
+        const modeLabel = isTerminal ? "Terminal" : "Browser";
+        let sourceHtml = "";
+        if (entry.command) {
+            sourceHtml = `
+          <p class="font-medium text-sm mt-4 mb-1">Command:</p>
+          <div class="font-mono text-xs border px-1 rounded bg-neutral-50 border-neutral-200 subpixel-antialiased w-fit">${esc(entry.command)}</div>`;
+        }
+        else if (entry.testFile) {
+            sourceHtml = `
+          <p class="font-medium text-sm mt-4 mb-1">Test:</p>
+          <div class="font-mono text-xs border px-1 rounded bg-neutral-50 border-neutral-200 subpixel-antialiased w-fit">${esc(basename(entry.testFile))}</div>`;
+        }
+        sections.push(`
+      <section class="mt-12 grid-cols-12 gap-x-6 border-t border-neutral-200 pt-12 md:grid">
+        <div class="col-span-5">
+          <h2 class="text-2xl mb-2">${esc(label)}</h2>
+          <div class="flex items-center space-x-4 subpixel-antialiased">
+            <span class="rounded ${badgeClass} px-2 py-0.5 text-sm">${modeLabel}</span>
+            <time class="font-mono text-[13px]">${formatTime(entry.timestamp)} (${formatDuration(entry.duration)})</time>
+          </div>
+          <p class="opacity-80 my-4">${esc(entry.description)}</p>
+        </div>
+        <div class="col-span-7">
+          ${mediaHtml}
+          ${sourceHtml}
+        </div>
+      </section>`);
+    }
+    const descriptionHtml = manifest.description
+        ? `<p class="max-w-2xl leading-relaxed opacity-80">${esc(manifest.description)}</p>`
+        : "";
+    const badgesHtml = [
+        terminalCount > 0 ? `<span class="whitespace-nowrap rounded font-medium text-green-800 bg-emerald-100/80 px-2 py-0.5 text-sm">${terminalCount} Terminal</span>` : "",
+        browserCount > 0 ? `<span class="whitespace-nowrap rounded font-medium text-blue-800 bg-sky-100 px-2 py-0.5 text-sm">${browserCount} Browser</span>` : "",
+    ].filter(Boolean).join("\n        ");
+    const tailwindScript = inline
+        ? `<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>`
+        : `<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>`;
+    const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
+<meta http-equiv="cleartype" content="on">
+<title>Proof Report - ${esc(manifest.run)}</title>
+${tailwindScript}
+</head>
+<body>
+
+<div class="container mx-auto px-6 my-14 w-full max-w-5xl antialiased">
+  <header>
+    <div class="flex items-center space-x-4 mb-6">
+      <h1 class="text-4xl leading-none font-medium">Proof report</h1>
+      <span class="mt-2 rounded bg-neutral-100 px-2 py-1 font-mono text-sm leading-none">${esc(manifest.run)}</span>
+    </div>
+
+    ${descriptionHtml}
+
+    <div class="mt-6 md:flex md:items-center md:space-x-4 leading-none">
+      <span class="block mb-2 md:inline md:m-0">${formatDate(manifest.createdAt)} &middot; ${formatTime(manifest.createdAt)} (${formatDuration(totalDuration)})</span>
+      ${badgesHtml}
+    </div>
+
+    <p class="my-6">Generated by <a href="https://www.npmjs.com/package/@automaze/proof" class="font-medium text-blue-600">@automaze/proof</a></p>
+  </header>
+
+  <main>
+    ${sections.join("\n")}
+  </main>
+
+  <footer></footer>
+</div>
+
+</body>
+</html>`;
+    const ext = inline ? "archive.html" : "report.html";
+    const outPath = join(runDir, ext);
+    await writeFile(outPath, html, "utf-8");
+    return outPath;
+}
+async function buildMediaEmbed(entry, runDir, inline) {
+    const artifactPath = join(runDir, entry.artifact);
+    if (entry.mode === "browser") {
+        if (inline) {
+            const videoData = await readFile(artifactPath);
+            const ext = entry.artifact.endsWith(".mp4") ? "mp4" : "webm";
+            const b64 = videoData.toString("base64");
+            return `<video class="bg-black w-full shadow-xs rounded-md aspect-3/2" controls muted loop src="data:video/${ext};base64,${b64}"></video>`;
+        }
+        return `<video class="bg-neutral-200 w-full rounded-md aspect-3/2" controls muted loop src="./${esc(entry.artifact)}"></video>`;
+    }
+    if (entry.mode === "terminal") {
+        if (inline) {
+            const playerHtml = await readFile(artifactPath, "utf-8");
+            return `<iframe class="w-full aspect-3/2 rounded-lg bg-black" allowtransparency="true" srcdoc="${escAttr(playerHtml)}"></iframe>`;
+        }
+        return `<iframe class="w-full aspect-3/2 rounded-lg bg-black" allowtransparency="true" src="./${esc(entry.artifact)}"></iframe>`;
+    }
+    return `<a href="./${esc(entry.artifact)}">${esc(entry.artifact)}</a>`;
+}
+function esc(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escAttr(s) {
+    return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}

package/dist/types.d.ts

@@ -0,0 +1,54 @@
+export type RecordingMode = "browser" | "terminal" | "auto";
+export interface ProofConfig {
+    appName: string;
+    description?: string;
+    proofDir?: string;
+    run?: string;
+    browser?: {
+        viewport?: {
+            width: number;
+            height: number;
+        };
+    };
+    terminal?: {
+        cols?: number;
+        rows?: number;
+    };
+}
+export interface Recording {
+    path: string;
+    mode: Exclude<RecordingMode, "auto">;
+    duration: number;
+    label?: string;
+}
+export interface CaptureOptions {
+    command?: string;
+    testFile?: string;
+    testName?: string;
+    label?: string;
+    mode?: RecordingMode;
+    description?: string;
+}
+export interface ProofEntry {
+    timestamp: string;
+    mode: Exclude<RecordingMode, "auto">;
+    label?: string;
+    command?: string;
+    testFile?: string;
+    testName?: string;
+    duration: number;
+    artifact: string;
+    description: string;
+}
+export interface ProofManifest {
+    version: 1;
+    appName: string;
+    description?: string;
+    run: string;
+    createdAt: string;
+    entries: ProofEntry[];
+}
+export type ReportFormat = "md" | "html" | "archive";
+export interface ReportOptions {
+    format?: ReportFormat | ReportFormat[];
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@automaze/proof",
+  "version": "0.20260311.0",
+  "description": "Visual proof of work for automated code changes",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "bin": {
+    "proof": "./dist/cli.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc && bun build ./src/index.ts --outdir ./dist --target node && bun build ./src/cli.ts --outdir ./dist --target node",
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit",
+    "test": "bun test",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "playwright": "^1.50.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "@types/bun": "^1.0.0",
+    "typescript": "^5.3.0"
+  },
+  "license": "Apache-2.0"
+}