@demon-utils/playwright 0.1.5 → 0.1.7

package/dist/bin/demon-demo-review.js

@@ -2,37 +2,98 @@
 // @bun
 
 // src/bin/demon-demo-review.ts
-import { existsSync, statSync, readdirSync, writeFileSync } from "fs";
-import { resolve, join, basename } from "path";
+import { existsSync as existsSync2, statSync } from "fs";
+import { resolve } from "path";
+
+// src/review-generator.ts
+import { existsSync, readdirSync, readFileSync as readFileSync2, writeFileSync } from "node:fs";
+import { join, dirname, relative } from "node:path";
+import { fileURLToPath } from "node:url";
 
 // src/review.ts
-function buildReviewPrompt(filenames) {
-  const fileList = filenames.map((f) => `- ${f}`).join(`
+import { spawn } from "node:child_process";
+import { Readable } from "node:stream";
+var GIT_DIFF_MAX_CHARS = 50000;
+function buildReviewPrompt(options) {
+  const { filenames, stepsMap, gitDiff, guidelines } = options;
+  const demoEntries = filenames.map((f) => {
+    const steps = stepsMap[f] ?? [];
+    const stepLines = steps.map((s) => `- [${s.timestampSeconds}s] ${s.text}`).join(`
 `);
-  return `You are given the following .webm demo video filenames:
+    return `Video: ${f}
+Recorded steps:
+${stepLines || "(no steps recorded)"}`;
+  });
+  const sections = [];
+  if (guidelines && guidelines.length > 0) {
+    sections.push(`## Coding Guidelines
+
+${guidelines.join(`
+
+`)}`);
+  }
+  if (gitDiff) {
+    let diff = gitDiff;
+    if (diff.length > GIT_DIFF_MAX_CHARS) {
+      diff = diff.slice(0, GIT_DIFF_MAX_CHARS) + `
+
+... (diff truncated at 50k characters)`;
+    }
+    sections.push(`## Git Diff
+
+\`\`\`diff
+${diff}
+\`\`\``);
+  }
+  sections.push(`## Demo Recordings
+
+${demoEntries.join(`
 
-${fileList}
+`)}`);
+  return `You are a code reviewer. You are given a git diff, coding guidelines, and demo recordings that show the feature in action.
 
-Based on the filenames, generate a JSON object matching this exact schema:
+${sections.join(`
+
+`)}
+
+## Task
+
+Review the code changes and demo recordings. Generate a JSON object matching this exact schema:
 
 {
   "demos": [
     {
       "file": "<filename>",
-      "summary": "<a short sentence describing what the demo likely shows>",
-      "annotations": [
-        { "timestampSeconds": <number>, "text": "<annotation text>" }
-      ]
+      "summary": "<a meaningful sentence describing what this demo showcases based on the steps>"
     }
-  ]
+  ],
+  "review": {
+    "summary": "<2-3 sentence overview of the changes>",
+    "highlights": ["<positive aspect 1>", "<positive aspect 2>"],
+    "verdict": "approve" | "request_changes",
+    "verdictReason": "<one sentence justifying the verdict>",
+    "issues": [
+      {
+        "severity": "major" | "minor" | "nit",
+        "description": "<what the issue is and how to fix it>"
+      }
+    ]
+  }
 }
 
 Rules:
 - Return ONLY the JSON object, no markdown fences or extra text.
 - Include one entry in "demos" for each filename, in the same order.
-- Infer the summary and annotations from the filename.
-- Each demo should have at least one annotation starting at timestampSeconds 0.
-- "file" must exactly match the provided filename.`;
+- "file" must exactly match the provided filename.
+- "verdict" must be exactly "approve" or "request_changes".
+- Use "request_changes" if there are any "major" issues.
+- "severity" must be exactly "major", "minor", or "nit".
+- "major": bugs, security issues, broken functionality, guideline violations.
+- "minor": code quality, readability, missing edge cases.
+- "nit": style, naming, trivial improvements.
+- "highlights" must have at least one entry.
+- "issues" can be an empty array if there are no issues.
+- Verify that demo steps demonstrate the acceptance criteria being met.`;
 }
 async function invokeClaude(prompt, options) {
   const spawnFn = options?.spawn ?? defaultSpawn;
@@ -53,10 +114,25 @@ async function invokeClaude(prompt, options) {
   }
   return output.trim();
 }
-function parseReviewMetadata(raw) {
+var VALID_VERDICTS = new Set(["approve", "request_changes"]);
+var VALID_SEVERITIES = new Set(["major", "minor", "nit"]);
+function extractJson(raw) {
+  try {
+    JSON.parse(raw);
+    return raw;
+  } catch {}
+  const start = raw.indexOf("{");
+  const end = raw.lastIndexOf("}");
+  if (start === -1 || end === -1 || end <= start) {
+    throw new Error(`No JSON object found in LLM response: ${raw.slice(0, 200)}`);
+  }
+  return raw.slice(start, end + 1);
+}
+function parseLlmResponse(raw) {
+  const jsonStr = extractJson(raw);
   let parsed;
   try {
-    parsed = JSON.parse(raw);
+    parsed = JSON.parse(jsonStr);
   } catch {
     throw new Error(`Invalid JSON from LLM: ${raw.slice(0, 200)}`);
   }
@@ -78,34 +154,58 @@ function parseReviewMetadata(raw) {
     if (typeof d["summary"] !== "string") {
       throw new Error("Each demo must have a 'summary' string");
     }
-    if (!Array.isArray(d["annotations"])) {
-      throw new Error("Each demo must have an 'annotations' array");
+  }
+  if (typeof obj["review"] !== "object" || obj["review"] === null) {
+    throw new Error("Missing 'review' object in response");
+  }
+  const review = obj["review"];
+  if (typeof review["summary"] !== "string") {
+    throw new Error("review.summary must be a string");
+  }
+  if (!Array.isArray(review["highlights"])) {
+    throw new Error("review.highlights must be an array");
+  }
+  if (review["highlights"].length === 0) {
+    throw new Error("review.highlights must not be empty");
+  }
+  for (const h of review["highlights"]) {
+    if (typeof h !== "string") {
+      throw new Error("Each highlight must be a string");
+    }
+  }
+  if (typeof review["verdict"] !== "string" || !VALID_VERDICTS.has(review["verdict"])) {
+    throw new Error("review.verdict must be 'approve' or 'request_changes'");
+  }
+  if (typeof review["verdictReason"] !== "string") {
+    throw new Error("review.verdictReason must be a string");
+  }
+  if (!Array.isArray(review["issues"])) {
+    throw new Error("review.issues must be an array");
+  }
+  for (const issue of review["issues"]) {
+    if (typeof issue !== "object" || issue === null) {
+      throw new Error("Each issue must be an object");
     }
-    for (const ann of d["annotations"]) {
-      if (typeof ann !== "object" || ann === null) {
-        throw new Error("Each annotation must be an object");
-      }
-      const a = ann;
-      if (typeof a["timestampSeconds"] !== "number") {
-        throw new Error("Each annotation must have a 'timestampSeconds' number");
-      }
-      if (typeof a["text"] !== "string") {
-        throw new Error("Each annotation must have a 'text' string");
-      }
+    const i = issue;
+    if (typeof i["severity"] !== "string" || !VALID_SEVERITIES.has(i["severity"])) {
+      throw new Error("Each issue severity must be 'major', 'minor', or 'nit'");
+    }
+    if (typeof i["description"] !== "string") {
+      throw new Error("Each issue must have a 'description' string");
     }
   }
   return parsed;
 }
 function defaultSpawn(cmd) {
   const [command, ...args] = cmd;
-  const proc = Bun.spawn([command, ...args], {
-    stdout: "pipe",
-    stderr: "pipe"
+  const proc = spawn(command, args, {
+    stdio: ["ignore", "pipe", "pipe"]
   });
-  return {
-    exitCode: proc.exited,
-    stdout: proc.stdout
-  };
+  const exitCode = new Promise((resolve) => {
+    proc.on("close", (code) => resolve(code ?? 1));
+  });
+  const stdout = Readable.toWeb(proc.stdout);
+  return { exitCode, stdout };
 }
 function concatUint8Arrays(arrays) {
   const totalLength = arrays.reduce((sum, a) => sum + a.length, 0);
@@ -118,186 +218,232 @@ function concatUint8Arrays(arrays) {
   return result;
 }
 
-// src/html-generator.ts
+// src/git-context.ts
+import { readFileSync } from "node:fs";
+import { spawnSync } from "node:child_process";
+async function detectDefaultBase(exec, gitRoot) {
+  let currentBranch;
+  try {
+    currentBranch = (await exec(["git", "rev-parse", "--abbrev-ref", "HEAD"], gitRoot)).trim();
+  } catch {
+    return null;
+  }
+  if (currentBranch === "main" || currentBranch === "master") {
+    return null;
+  }
+  for (const candidate of ["main", "master"]) {
+    try {
+      await exec(["git", "rev-parse", "--verify", candidate], gitRoot);
+      return candidate;
+    } catch {}
+  }
+  return null;
+}
+var defaultExec = async (cmd, cwd) => {
+  const [command, ...args] = cmd;
+  const proc = spawnSync(command, args, { cwd, encoding: "utf-8" });
+  if (proc.status !== 0) {
+    const stderr = (proc.stderr ?? "").trim();
+    throw new Error(`Command failed (exit ${proc.status}): ${cmd.join(" ")}${stderr ? `: ${stderr}` : ""}`);
+  }
+  return proc.stdout ?? "";
+};
+var defaultReadFile = (path) => {
+  return readFileSync(path, "utf-8");
+};
+async function getRepoContext(demosDir, options) {
+  const exec = options?.exec ?? defaultExec;
+  const readFile = options?.readFile ?? defaultReadFile;
+  const gitRoot = (await exec(["git", "rev-parse", "--show-toplevel"], demosDir)).trim();
+  const diffBase = options?.diffBase ?? await detectDefaultBase(exec, gitRoot);
+  let gitDiff;
+  if (diffBase) {
+    gitDiff = (await exec(["git", "diff", `${diffBase}...HEAD`], gitRoot)).trim();
+  } else {
+    const workingDiff = (await exec(["git", "diff", "HEAD"], gitRoot)).trim();
+    if (workingDiff.length > 0) {
+      gitDiff = workingDiff;
+    } else {
+      gitDiff = (await exec(["git", "diff", "HEAD~1..HEAD"], gitRoot)).trim();
+    }
+  }
+  const lsOutput = (await exec(["git", "ls-files"], gitRoot)).trim();
+  const files = lsOutput.split(`
+`).filter((f) => f.length > 0);
+  const guidelinePatterns = ["CLAUDE.md", "SKILL.md"];
+  const guidelines = [];
+  for (const file of files) {
+    const basename = file.split("/").pop() ?? "";
+    if (guidelinePatterns.includes(basename)) {
+      const fullPath = `${gitRoot}/${file}`;
+      const content = readFile(fullPath);
+      guidelines.push(`# ${file}
+${content}`);
+    }
+  }
+  return { gitDiff, guidelines };
+}
+
+// src/review-generator.ts
+function getReviewTemplate() {
+  const currentFile = fileURLToPath(import.meta.url);
+  const distDir = dirname(currentFile);
+  const templatePath = join(distDir, "review-template.html");
+  if (!existsSync(templatePath)) {
+    throw new Error(`Review template not found at ${templatePath}. ` + `Make sure to build the review-app package first.`);
+  }
+  return readFileSync2(templatePath, "utf-8");
+}
 function escapeHtml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function escapeAttr(s) {
-  return escapeHtml(s);
+function generateReviewHtml(appData) {
+  const template = getReviewTemplate();
+  const jsonData = JSON.stringify(appData);
+  return template.replace("<title>Demo Review</title>", `<title>${escapeHtml(appData.title)}</title>`).replace('"{{__INJECT_REVIEW_DATA__}}"', jsonData);
 }
-function generateReviewHtml(options) {
-  const { metadata, title = "Demo Review" } = options;
-  if (metadata.demos.length === 0) {
-    throw new Error("metadata.demos must not be empty");
-  }
-  const firstDemo = metadata.demos[0];
-  const demoButtons = metadata.demos.map((demo, i) => {
-    const activeClass = i === 0 ? ' class="active"' : "";
-    return `<li><button data-index="${i}"${activeClass}>${escapeHtml(demo.file)}</button></li>`;
-  }).join(`
-            `);
-  const metadataJson = JSON.stringify(metadata).replace(/<\//g, "<\\/");
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${escapeHtml(title)}</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: system-ui, -apple-system, sans-serif; background: #1a1a2e; color: #e0e0e0; min-height: 100vh; }
-    header { padding: 1rem 2rem; background: #16213e; border-bottom: 1px solid #0f3460; }
-    header h1 { font-size: 1.4rem; color: #e94560; }
-    .review-layout { display: flex; height: calc(100vh - 60px); }
-    .video-panel { flex: 4; padding: 1rem; display: flex; align-items: center; justify-content: center; background: #0f0f23; }
-    .video-panel video { width: 100%; max-height: 100%; border-radius: 4px; }
-    .side-panel { flex: 1; min-width: 260px; max-width: 360px; padding: 1rem; overflow-y: auto; background: #16213e; border-left: 1px solid #0f3460; }
-    .side-panel h2 { font-size: 1rem; margin-bottom: 0.5rem; color: #e94560; }
-    .side-panel section { margin-bottom: 1.5rem; }
-    #demo-list { list-style: none; }
-    #demo-list li { margin-bottom: 0.25rem; }
-    #demo-list button { width: 100%; text-align: left; padding: 0.4rem 0.6rem; background: #1a1a2e; color: #e0e0e0; border: 1px solid #0f3460; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
-    #demo-list button:hover { background: #0f3460; }
-    #demo-list button.active { background: #e94560; color: #fff; border-color: #e94560; }
-    #summary-text { font-size: 0.9rem; line-height: 1.5; color: #ccc; }
-    #annotations-list { list-style: none; }
-    #annotations-list li { margin-bottom: 0.3rem; }
-    #annotations-list button { width: 100%; text-align: left; padding: 0.3rem 0.5rem; background: transparent; color: #53a8b6; border: none; cursor: pointer; font-size: 0.85rem; }
-    #annotations-list button:hover { color: #e94560; text-decoration: underline; }
-    .timestamp { font-weight: bold; margin-right: 0.4rem; color: #e94560; }
-  </style>
-</head>
-<body>
-  <header>
-    <h1>${escapeHtml(title)}</h1>
-  </header>
-  <main class="review-layout">
-    <div class="video-panel">
-      <video id="review-video" controls src="${escapeAttr(firstDemo.file)}"></video>
-    </div>
-    <div class="side-panel">
-      <section>
-        <h2>Demos</h2>
-        <ul id="demo-list">
-            ${demoButtons}
-        </ul>
-      </section>
-      <section>
-        <h2>Summary</h2>
-        <p id="summary-text"></p>
-      </section>
-      <section>
-        <h2>Annotations</h2>
-        <ul id="annotations-list"></ul>
-      </section>
-    </div>
-  </main>
-  <script>
-    (function() {
-      var metadata = ${metadataJson};
-      var video = document.getElementById("review-video");
-      var summaryText = document.getElementById("summary-text");
-      var annotationsList = document.getElementById("annotations-list");
-      var demoButtons = document.querySelectorAll("#demo-list button");
-
-      function esc(s) {
-        var d = document.createElement("div");
-        d.appendChild(document.createTextNode(s));
-        return d.innerHTML;
-      }
-
-      function formatTime(seconds) {
-        var m = Math.floor(seconds / 60);
-        var s = Math.floor(seconds % 60);
-        return m + ":" + (s < 10 ? "0" : "") + s;
+function discoverDemoFiles(directory) {
+  const files = [];
+  const processFile = (filePath, filename) => {
+    const relativePath = relative(directory, filePath);
+    if (filename.endsWith(".webm")) {
+      files.push({ path: filePath, filename, relativePath, type: "web-ux" });
+    } else if (filename.endsWith(".jsonl")) {
+      files.push({ path: filePath, filename, relativePath, type: "log-based" });
+    }
+  };
+  for (const f of readdirSync(directory)) {
+    processFile(join(directory, f), f);
+  }
+  if (files.length === 0) {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+      if (!entry.isDirectory())
+        continue;
+      const subdir = join(directory, entry.name);
+      for (const f of readdirSync(subdir)) {
+        processFile(join(subdir, f), f);
       }
-
-      function selectDemo(index) {
-        var demo = metadata.demos[index];
-        video.src = demo.file;
-        video.load();
-        summaryText.textContent = demo.summary;
-
-        demoButtons.forEach(function(btn, i) {
-          btn.classList.toggle("active", i === index);
-        });
-
-        var html = "";
-        demo.annotations.forEach(function(ann) {
-          html += '<li><button data-time="' + ann.timestampSeconds + '">' +
-            '<span class="timestamp">' + esc(formatTime(ann.timestampSeconds)) + '</span>' +
-            esc(ann.text) + '</button></li>';
-        });
-        annotationsList.innerHTML = html;
+    }
+  }
+  return files.sort((a, b) => a.filename.localeCompare(b.filename));
+}
+async function generateReview(options) {
+  const { directory, agent, feedbackEndpoint, title = "Demo Review", diffBase } = options;
+  const demoFiles = discoverDemoFiles(directory);
+  const webUxDemos = demoFiles.filter((d) => d.type === "web-ux");
+  const logBasedDemos = demoFiles.filter((d) => d.type === "log-based");
+  if (demoFiles.length === 0) {
+    throw new Error(`No .webm or .jsonl files found in "${directory}" or its subdirectories.`);
+  }
+  const filenameToRelativePath = new Map(demoFiles.map((d) => [d.filename, d.relativePath]));
+  const stepsMapByFilename = {};
+  const stepsMapByRelativePath = {};
+  for (const demo of webUxDemos) {
+    const stepsPath = join(dirname(demo.path), "demo-steps.json");
+    if (!existsSync(stepsPath))
+      continue;
+    try {
+      const raw = readFileSync2(stepsPath, "utf-8");
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) {
+        stepsMapByFilename[demo.filename] = parsed;
+        stepsMapByRelativePath[demo.relativePath] = parsed;
       }
-
-      demoButtons.forEach(function(btn) {
-        btn.addEventListener("click", function() {
-          selectDemo(parseInt(btn.getAttribute("data-index"), 10));
-        });
-      });
-
-      annotationsList.addEventListener("click", function(e) {
-        var btn = e.target.closest("button[data-time]");
-        if (btn) {
-          video.currentTime = parseFloat(btn.getAttribute("data-time"));
-          video.play();
-        }
-      });
-
-      selectDemo(0);
-    })();
-  </script>
-</body>
-</html>`;
+    } catch {}
+  }
+  const logsMap = {};
+  for (const demo of logBasedDemos) {
+    logsMap[demo.relativePath] = readFileSync2(demo.path, "utf-8");
+  }
+  const hasWebUxDemos = webUxDemos.length > 0;
+  const hasLogDemos = logBasedDemos.length > 0;
+  if (hasWebUxDemos && Object.keys(stepsMapByFilename).length === 0) {
+    throw new Error("No demo-steps.json found alongside any .webm files. " + "Use DemoRecorder in your demo tests to generate step data.");
+  }
+  if (!hasWebUxDemos && !hasLogDemos) {
+    throw new Error("No demo files found.");
+  }
+  let gitDiff;
+  let guidelines;
+  try {
+    const repoContext = await getRepoContext(directory, { diffBase });
+    gitDiff = repoContext.gitDiff;
+    guidelines = repoContext.guidelines;
+  } catch {}
+  const allFilenames = demoFiles.map((d) => d.filename);
+  const prompt = buildReviewPrompt({ filenames: allFilenames, stepsMap: stepsMapByFilename, gitDiff, guidelines });
+  const rawOutput = await invokeClaude(prompt, { agent });
+  const llmResponse = parseLlmResponse(rawOutput);
+  const typeMap = new Map(demoFiles.map((d) => [d.filename, d.type]));
+  const metadata = {
+    demos: llmResponse.demos.map((demo) => {
+      const relativePath = filenameToRelativePath.get(demo.file) ?? demo.file;
+      return {
+        file: relativePath,
+        type: typeMap.get(demo.file) ?? "web-ux",
+        summary: demo.summary,
+        steps: stepsMapByRelativePath[relativePath] ?? []
+      };
+    }),
+    review: llmResponse.review
+  };
+  const metadataPath = join(directory, "review-metadata.json");
+  writeFileSync(metadataPath, JSON.stringify(metadata, null, 2) + `
+`);
+  const appData = {
+    metadata,
+    title,
+    videos: {},
+    logs: Object.keys(logsMap).length > 0 ? logsMap : undefined,
+    feedbackEndpoint
+  };
+  const html = generateReviewHtml(appData);
+  const htmlPath = join(directory, "review.html");
+  writeFileSync(htmlPath, html);
+  return { htmlPath, metadataPath, metadata };
 }
 
 // src/bin/demon-demo-review.ts
 var dir;
 var agent;
+var diffBase;
 var args = process.argv.slice(2);
 for (let i = 0;i < args.length; i++) {
   if (args[i] === "--agent") {
     agent = args[++i];
+  } else if (args[i] === "--base") {
+    diffBase = args[++i];
   } else if (!dir) {
     dir = args[i];
   }
 }
 if (!dir) {
-  console.error("Usage: demon-demo-review [--agent <path>] <directory>");
-  console.error("  Discovers .webm video files in the given directory.");
+  console.error("Usage: demon-demo-review [--agent <path>] [--base <ref>] <directory>");
+  console.error("  Discovers .webm and .jsonl demo files in the given directory.");
+  console.error("  --base <ref>  Base commit/branch for diff (auto-detects main/master if on feature branch)");
   process.exit(1);
 }
 var resolved = resolve(dir);
-if (!existsSync(resolved) || !statSync(resolved).isDirectory()) {
+if (!existsSync2(resolved) || !statSync(resolved).isDirectory()) {
   console.error(`Error: "${resolved}" is not a valid directory.`);
   process.exit(1);
 }
-var webmFiles = readdirSync(resolved).filter((f) => f.endsWith(".webm")).map((f) => join(resolved, f)).sort();
-if (webmFiles.length === 0) {
-  console.error(`Error: No .webm files found in "${resolved}".`);
+var demoFiles = discoverDemoFiles(resolved);
+if (demoFiles.length === 0) {
+  console.error(`Error: No .webm or .jsonl files found in "${resolved}" or its subdirectories.`);
   process.exit(1);
 }
-for (const file of webmFiles) {
-  console.log(file);
+for (const file of demoFiles) {
+  console.log(file.path);
 }
 try {
-  const basenames = webmFiles.map((f) => basename(f));
-  const prompt = buildReviewPrompt(basenames);
   console.log("Invoking claude to generate review metadata...");
-  const rawOutput = await invokeClaude(prompt, { agent });
-  const metadata = parseReviewMetadata(rawOutput);
-  const outputPath = join(resolved, "review-metadata.json");
-  writeFileSync(outputPath, JSON.stringify(metadata, null, 2) + `
-`);
-  console.log(`Review metadata written to ${outputPath}`);
-  const html = generateReviewHtml({ metadata });
-  const htmlPath = join(resolved, "review.html");
-  writeFileSync(htmlPath, html);
-  console.log(resolve(htmlPath));
+  const result = await generateReview({ directory: resolved, agent, diffBase });
+  console.log(`Review metadata written to ${result.metadataPath}`);
+  console.log(resolve(result.htmlPath));
 } catch (err) {
-  console.error("Error generating review metadata:", err instanceof Error ? err.message : err);
+  console.error("Error generating review:", err instanceof Error ? err.message : err);
   process.exit(1);
 }
 
-//# debugId=8D4EBA82376B7AB564756E2164756E21
+//# debugId=C76A8A3848513E7E64756E2164756E21