@demon-utils/playwright 0.1.3 → 0.1.5

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

@@ -0,0 +1,303 @@
+#!/usr/bin/env bun
+// @bun
+
+// src/bin/demon-demo-review.ts
+import { existsSync, statSync, readdirSync, writeFileSync } from "fs";
+import { resolve, join, basename } from "path";
+
+// src/review.ts
+function buildReviewPrompt(filenames) {
+  const fileList = filenames.map((f) => `- ${f}`).join(`
+`);
+  return `You are given the following .webm demo video filenames:
+
+${fileList}
+
+Based on the filenames, 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>" }
+      ]
+    }
+  ]
+}
+
+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.`;
+}
+async function invokeClaude(prompt, options) {
+  const spawnFn = options?.spawn ?? defaultSpawn;
+  const agent = options?.agent ?? "claude";
+  const proc = spawnFn([agent, "-p", prompt]);
+  const reader = proc.stdout.getReader();
+  const chunks = [];
+  for (;; ) {
+    const { done, value } = await reader.read();
+    if (done)
+      break;
+    chunks.push(value);
+  }
+  const exitCode = await proc.exitCode;
+  const output = new TextDecoder().decode(concatUint8Arrays(chunks));
+  if (exitCode !== 0) {
+    throw new Error(`claude process exited with code ${exitCode}: ${output.trim()}`);
+  }
+  return output.trim();
+}
+function parseReviewMetadata(raw) {
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    throw new Error(`Invalid JSON from LLM: ${raw.slice(0, 200)}`);
+  }
+  if (typeof parsed !== "object" || parsed === null || !("demos" in parsed)) {
+    throw new Error("Missing 'demos' array in review metadata");
+  }
+  const obj = parsed;
+  if (!Array.isArray(obj["demos"])) {
+    throw new Error("'demos' must be an array");
+  }
+  for (const demo of obj["demos"]) {
+    if (typeof demo !== "object" || demo === null) {
+      throw new Error("Each demo must be an object");
+    }
+    const d = demo;
+    if (typeof d["file"] !== "string") {
+      throw new Error("Each demo must have a 'file' string");
+    }
+    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");
+    }
+    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");
+      }
+    }
+  }
+  return parsed;
+}
+function defaultSpawn(cmd) {
+  const [command, ...args] = cmd;
+  const proc = Bun.spawn([command, ...args], {
+    stdout: "pipe",
+    stderr: "pipe"
+  });
+  return {
+    exitCode: proc.exited,
+    stdout: proc.stdout
+  };
+}
+function concatUint8Arrays(arrays) {
+  const totalLength = arrays.reduce((sum, a) => sum + a.length, 0);
+  const result = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const a of arrays) {
+    result.set(a, offset);
+    offset += a.length;
+  }
+  return result;
+}
+
+// src/html-generator.ts
+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(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 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;
+      }
+
+      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>`;
+}
+
+// src/bin/demon-demo-review.ts
+var dir;
+var agent;
+var args = process.argv.slice(2);
+for (let i = 0;i < args.length; i++) {
+  if (args[i] === "--agent") {
+    agent = 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.");
+  process.exit(1);
+}
+var resolved = resolve(dir);
+if (!existsSync(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}".`);
+  process.exit(1);
+}
+for (const file of webmFiles) {
+  console.log(file);
+}
+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));
+} catch (err) {
+  console.error("Error generating review metadata:", err instanceof Error ? err.message : err);
+  process.exit(1);
+}
+
+//# debugId=8D4EBA82376B7AB564756E2164756E21

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

@@ -0,0 +1,12 @@
+{
+  "version": 3,
+  "sources": ["../../src/bin/demon-demo-review.ts", "../../src/review.ts", "../../src/html-generator.ts"],
+  "sourcesContent": [
+    "#!/usr/bin/env bun\nimport { existsSync, statSync, readdirSync, writeFileSync } from \"node:fs\";\nimport { resolve, join, basename } from \"node:path\";\n\nimport {\n  buildReviewPrompt,\n  invokeClaude,\n  parseReviewMetadata,\n} from \"../review.ts\";\nimport { generateReviewHtml } from \"../html-generator.ts\";\n\nlet dir: string | undefined;\nlet agent: string | undefined;\n\nconst args = process.argv.slice(2);\nfor (let i = 0; i < args.length; i++) {\n  if (args[i] === \"--agent\") {\n    agent = args[++i];\n  } else if (!dir) {\n    dir = args[i];\n  }\n}\n\nif (!dir) {\n  console.error(\"Usage: demon-demo-review [--agent <path>] <directory>\");\n  console.error(\"  Discovers .webm video files in the given directory.\");\n  process.exit(1);\n}\n\nconst resolved = resolve(dir);\n\nif (!existsSync(resolved) || !statSync(resolved).isDirectory()) {\n  console.error(`Error: \"${resolved}\" is not a valid directory.`);\n  process.exit(1);\n}\n\nconst webmFiles = readdirSync(resolved)\n  .filter((f) => f.endsWith(\".webm\"))\n  .map((f) => join(resolved, f))\n  .sort();\n\nif (webmFiles.length === 0) {\n  console.error(`Error: No .webm files found in \"${resolved}\".`);\n  process.exit(1);\n}\n\nfor (const file of webmFiles) {\n  console.log(file);\n}\n\ntry {\n  const basenames = webmFiles.map((f) => basename(f));\n  const prompt = buildReviewPrompt(basenames);\n\n  console.log(\"Invoking claude to generate review metadata...\");\n  const rawOutput = await invokeClaude(prompt, { agent });\n\n  const metadata = parseReviewMetadata(rawOutput);\n  const outputPath = join(resolved, \"review-metadata.json\");\n  writeFileSync(outputPath, JSON.stringify(metadata, null, 2) + \"\\n\");\n  console.log(`Review metadata written to ${outputPath}`);\n\n  const html = generateReviewHtml({ metadata });\n  const htmlPath = join(resolved, \"review.html\");\n  writeFileSync(htmlPath, html);\n  console.log(resolve(htmlPath));\n} catch (err) {\n  console.error(\n    \"Error generating review metadata:\",\n    err instanceof Error ? err.message : err,\n  );\n  process.exit(1);\n}\n",
+    "import type { ReviewMetadata } from \"./review-types.ts\";\n\nexport type SpawnFn = (\n  cmd: string[],\n) => { exitCode: Promise<number>; stdout: ReadableStream<Uint8Array> };\n\nexport interface InvokeClaudeOptions {\n  agent?: string;\n  spawn?: SpawnFn;\n}\n\nexport function buildReviewPrompt(filenames: string[]): string {\n  const fileList = filenames.map((f) => `- ${f}`).join(\"\\n\");\n\n  return `You are given the following .webm demo video filenames:\n\n${fileList}\n\nBased on the filenames, generate a JSON object matching this exact schema:\n\n{\n  \"demos\": [\n    {\n      \"file\": \"<filename>\",\n      \"summary\": \"<a short sentence describing what the demo likely shows>\",\n      \"annotations\": [\n        { \"timestampSeconds\": <number>, \"text\": \"<annotation text>\" }\n      ]\n    }\n  ]\n}\n\nRules:\n- Return ONLY the JSON object, no markdown fences or extra text.\n- Include one entry in \"demos\" for each filename, in the same order.\n- Infer the summary and annotations from the filename.\n- Each demo should have at least one annotation starting at timestampSeconds 0.\n- \"file\" must exactly match the provided filename.`;\n}\n\nexport async function invokeClaude(\n  prompt: string,\n  options?: InvokeClaudeOptions,\n): Promise<string> {\n  const spawnFn = options?.spawn ?? defaultSpawn;\n  const agent = options?.agent ?? \"claude\";\n  const proc = spawnFn([agent, \"-p\", prompt]);\n\n  const reader = proc.stdout.getReader();\n  const chunks: Uint8Array[] = [];\n  for (;;) {\n    const { done, value } = await reader.read();\n    if (done) break;\n    chunks.push(value);\n  }\n\n  const exitCode = await proc.exitCode;\n  const output = new TextDecoder().decode(\n    concatUint8Arrays(chunks),\n  );\n\n  if (exitCode !== 0) {\n    throw new Error(\n      `claude process exited with code ${exitCode}: ${output.trim()}`,\n    );\n  }\n\n  return output.trim();\n}\n\nexport function parseReviewMetadata(raw: string): ReviewMetadata {\n  let parsed: unknown;\n  try {\n    parsed = JSON.parse(raw);\n  } catch {\n    throw new Error(`Invalid JSON from LLM: ${raw.slice(0, 200)}`);\n  }\n\n  if (typeof parsed !== \"object\" || parsed === null || !(\"demos\" in parsed)) {\n    throw new Error(\"Missing 'demos' array in review metadata\");\n  }\n\n  const obj = parsed as Record<string, unknown>;\n  if (!Array.isArray(obj[\"demos\"])) {\n    throw new Error(\"'demos' must be an array\");\n  }\n\n  for (const demo of obj[\"demos\"] as unknown[]) {\n    if (typeof demo !== \"object\" || demo === null) {\n      throw new Error(\"Each demo must be an object\");\n    }\n    const d = demo as Record<string, unknown>;\n\n    if (typeof d[\"file\"] !== \"string\") {\n      throw new Error(\"Each demo must have a 'file' string\");\n    }\n    if (typeof d[\"summary\"] !== \"string\") {\n      throw new Error(\"Each demo must have a 'summary' string\");\n    }\n    if (!Array.isArray(d[\"annotations\"])) {\n      throw new Error(\"Each demo must have an 'annotations' array\");\n    }\n\n    for (const ann of d[\"annotations\"] as unknown[]) {\n      if (typeof ann !== \"object\" || ann === null) {\n        throw new Error(\"Each annotation must be an object\");\n      }\n      const a = ann as Record<string, unknown>;\n      if (typeof a[\"timestampSeconds\"] !== \"number\") {\n        throw new Error(\"Each annotation must have a 'timestampSeconds' number\");\n      }\n      if (typeof a[\"text\"] !== \"string\") {\n        throw new Error(\"Each annotation must have a 'text' string\");\n      }\n    }\n  }\n\n  return parsed as ReviewMetadata;\n}\n\nfunction defaultSpawn(\n  cmd: string[],\n): { exitCode: Promise<number>; stdout: ReadableStream<Uint8Array> } {\n  const [command, ...args] = cmd;\n  const proc = Bun.spawn([command!, ...args], {\n    stdout: \"pipe\",\n    stderr: \"pipe\",\n  });\n  return {\n    exitCode: proc.exited,\n    stdout: proc.stdout as unknown as ReadableStream<Uint8Array>,\n  };\n}\n\nfunction concatUint8Arrays(arrays: Uint8Array[]): Uint8Array {\n  const totalLength = arrays.reduce((sum, a) => sum + a.length, 0);\n  const result = new Uint8Array(totalLength);\n  let offset = 0;\n  for (const a of arrays) {\n    result.set(a, offset);\n    offset += a.length;\n  }\n  return result;\n}\n",
+    "import type { ReviewMetadata } from \"./review-types.ts\";\n\nexport interface GenerateReviewHtmlOptions {\n  metadata: ReviewMetadata;\n  title?: string;\n}\n\nfunction escapeHtml(s: string): string {\n  return s\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\");\n}\n\nfunction escapeAttr(s: string): string {\n  return escapeHtml(s);\n}\n\nexport function generateReviewHtml(options: GenerateReviewHtmlOptions): string {\n  const { metadata, title = \"Demo Review\" } = options;\n\n  if (metadata.demos.length === 0) {\n    throw new Error(\"metadata.demos must not be empty\");\n  }\n\n  const firstDemo = metadata.demos[0];\n\n  const demoButtons = metadata.demos\n    .map((demo, i) => {\n      const activeClass = i === 0 ? ' class=\"active\"' : \"\";\n      return `<li><button data-index=\"${i}\"${activeClass}>${escapeHtml(demo.file)}</button></li>`;\n    })\n    .join(\"\\n            \");\n\n  const metadataJson = JSON.stringify(metadata).replace(/<\\//g, \"<\\\\/\");\n\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>${escapeHtml(title)}</title>\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    body { font-family: system-ui, -apple-system, sans-serif; background: #1a1a2e; color: #e0e0e0; min-height: 100vh; }\n    header { padding: 1rem 2rem; background: #16213e; border-bottom: 1px solid #0f3460; }\n    header h1 { font-size: 1.4rem; color: #e94560; }\n    .review-layout { display: flex; height: calc(100vh - 60px); }\n    .video-panel { flex: 4; padding: 1rem; display: flex; align-items: center; justify-content: center; background: #0f0f23; }\n    .video-panel video { width: 100%; max-height: 100%; border-radius: 4px; }\n    .side-panel { flex: 1; min-width: 260px; max-width: 360px; padding: 1rem; overflow-y: auto; background: #16213e; border-left: 1px solid #0f3460; }\n    .side-panel h2 { font-size: 1rem; margin-bottom: 0.5rem; color: #e94560; }\n    .side-panel section { margin-bottom: 1.5rem; }\n    #demo-list { list-style: none; }\n    #demo-list li { margin-bottom: 0.25rem; }\n    #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; }\n    #demo-list button:hover { background: #0f3460; }\n    #demo-list button.active { background: #e94560; color: #fff; border-color: #e94560; }\n    #summary-text { font-size: 0.9rem; line-height: 1.5; color: #ccc; }\n    #annotations-list { list-style: none; }\n    #annotations-list li { margin-bottom: 0.3rem; }\n    #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; }\n    #annotations-list button:hover { color: #e94560; text-decoration: underline; }\n    .timestamp { font-weight: bold; margin-right: 0.4rem; color: #e94560; }\n  </style>\n</head>\n<body>\n  <header>\n    <h1>${escapeHtml(title)}</h1>\n  </header>\n  <main class=\"review-layout\">\n    <div class=\"video-panel\">\n      <video id=\"review-video\" controls src=\"${escapeAttr(firstDemo.file)}\"></video>\n    </div>\n    <div class=\"side-panel\">\n      <section>\n        <h2>Demos</h2>\n        <ul id=\"demo-list\">\n            ${demoButtons}\n        </ul>\n      </section>\n      <section>\n        <h2>Summary</h2>\n        <p id=\"summary-text\"></p>\n      </section>\n      <section>\n        <h2>Annotations</h2>\n        <ul id=\"annotations-list\"></ul>\n      </section>\n    </div>\n  </main>\n  <script>\n    (function() {\n      var metadata = ${metadataJson};\n      var video = document.getElementById(\"review-video\");\n      var summaryText = document.getElementById(\"summary-text\");\n      var annotationsList = document.getElementById(\"annotations-list\");\n      var demoButtons = document.querySelectorAll(\"#demo-list button\");\n\n      function esc(s) {\n        var d = document.createElement(\"div\");\n        d.appendChild(document.createTextNode(s));\n        return d.innerHTML;\n      }\n\n      function formatTime(seconds) {\n        var m = Math.floor(seconds / 60);\n        var s = Math.floor(seconds % 60);\n        return m + \":\" + (s < 10 ? \"0\" : \"\") + s;\n      }\n\n      function selectDemo(index) {\n        var demo = metadata.demos[index];\n        video.src = demo.file;\n        video.load();\n        summaryText.textContent = demo.summary;\n\n        demoButtons.forEach(function(btn, i) {\n          btn.classList.toggle(\"active\", i === index);\n        });\n\n        var html = \"\";\n        demo.annotations.forEach(function(ann) {\n          html += '<li><button data-time=\"' + ann.timestampSeconds + '\">' +\n            '<span class=\"timestamp\">' + esc(formatTime(ann.timestampSeconds)) + '</span>' +\n            esc(ann.text) + '</button></li>';\n        });\n        annotationsList.innerHTML = html;\n      }\n\n      demoButtons.forEach(function(btn) {\n        btn.addEventListener(\"click\", function() {\n          selectDemo(parseInt(btn.getAttribute(\"data-index\"), 10));\n        });\n      });\n\n      annotationsList.addEventListener(\"click\", function(e) {\n        var btn = e.target.closest(\"button[data-time]\");\n        if (btn) {\n          video.currentTime = parseFloat(btn.getAttribute(\"data-time\"));\n          video.play();\n        }\n      });\n\n      selectDemo(0);\n    })();\n  </script>\n</body>\n</html>`;\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "8D4EBA82376B7AB564756E2164756E21",
+  "names": []
+}

package/dist/index.js

@@ -17,7 +17,7 @@ async function showCommentary(page, options) {
         @keyframes demon-commentary-in {
           from {
             opacity: 0;
-            transform: translateY(8px);
+            transform: translateY(var(--demon-slide-y, 8px));
           }
           to {
             opacity: 1;
@@ -31,10 +31,11 @@ async function showCommentary(page, options) {
           }
           to {
             opacity: 0;
-            transform: translateY(8px);
+            transform: translateY(var(--demon-slide-y, 8px));
           }
         }
         #${tooltipId} {
+          --demon-slide-y: 8px;
           position: fixed;
           z-index: 2147483647;
           background: #1a1a2e;
@@ -53,12 +54,21 @@ async function showCommentary(page, options) {
       `;
     document.querySelector("style[data-demon-commentary]")?.remove();
     document.head.appendChild(style);
-    const top = rect.bottom + 10;
-    const left = rect.left + rect.width / 2;
+    tooltip.style.visibility = "hidden";
+    document.body.appendChild(tooltip);
+    const tooltipRect = tooltip.getBoundingClientRect();
+    const tooltipWidth = tooltipRect.width;
+    const tooltipHeight = tooltipRect.height;
+    const viewportWidth = window.innerWidth;
+    let top = rect.bottom + 10;
+    if (top + tooltipHeight > window.innerHeight && rect.top - 10 - tooltipHeight >= 0) {
+      top = rect.top - 10 - tooltipHeight;
+      tooltip.style.setProperty("--demon-slide-y", "-8px");
+    }
+    const left = Math.max(4, Math.min(rect.left + rect.width / 2 - tooltipWidth / 2, viewportWidth - 4 - tooltipWidth));
     tooltip.style.top = `${top}px`;
     tooltip.style.left = `${left}px`;
-    tooltip.style.transform = `translateX(-50%)`;
-    document.body.appendChild(tooltip);
+    tooltip.style.visibility = "";
   }, { selector: options.selector, text: options.text, tooltipId: TOOLTIP_ID });
 }
 async function hideCommentary(page) {
@@ -74,9 +84,258 @@ async function hideCommentary(page) {
   }, TOOLTIP_ID);
   await page.waitForTimeout(300);
 }
+// src/review.ts
+function buildReviewPrompt(filenames) {
+  const fileList = filenames.map((f) => `- ${f}`).join(`
+`);
+  return `You are given the following .webm demo video filenames:
+
+${fileList}
+
+Based on the filenames, 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>" }
+      ]
+    }
+  ]
+}
+
+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.`;
+}
+async function invokeClaude(prompt, options) {
+  const spawnFn = options?.spawn ?? defaultSpawn;
+  const agent = options?.agent ?? "claude";
+  const proc = spawnFn([agent, "-p", prompt]);
+  const reader = proc.stdout.getReader();
+  const chunks = [];
+  for (;; ) {
+    const { done, value } = await reader.read();
+    if (done)
+      break;
+    chunks.push(value);
+  }
+  const exitCode = await proc.exitCode;
+  const output = new TextDecoder().decode(concatUint8Arrays(chunks));
+  if (exitCode !== 0) {
+    throw new Error(`claude process exited with code ${exitCode}: ${output.trim()}`);
+  }
+  return output.trim();
+}
+function parseReviewMetadata(raw) {
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    throw new Error(`Invalid JSON from LLM: ${raw.slice(0, 200)}`);
+  }
+  if (typeof parsed !== "object" || parsed === null || !("demos" in parsed)) {
+    throw new Error("Missing 'demos' array in review metadata");
+  }
+  const obj = parsed;
+  if (!Array.isArray(obj["demos"])) {
+    throw new Error("'demos' must be an array");
+  }
+  for (const demo of obj["demos"]) {
+    if (typeof demo !== "object" || demo === null) {
+      throw new Error("Each demo must be an object");
+    }
+    const d = demo;
+    if (typeof d["file"] !== "string") {
+      throw new Error("Each demo must have a 'file' string");
+    }
+    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");
+    }
+    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");
+      }
+    }
+  }
+  return parsed;
+}
+function defaultSpawn(cmd) {
+  const [command, ...args] = cmd;
+  const proc = Bun.spawn([command, ...args], {
+    stdout: "pipe",
+    stderr: "pipe"
+  });
+  return {
+    exitCode: proc.exited,
+    stdout: proc.stdout
+  };
+}
+function concatUint8Arrays(arrays) {
+  const totalLength = arrays.reduce((sum, a) => sum + a.length, 0);
+  const result = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const a of arrays) {
+    result.set(a, offset);
+    offset += a.length;
+  }
+  return result;
+}
+// src/html-generator.ts
+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(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 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;
+      }
+
+      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>`;
+}
 export {
   showCommentary,
-  hideCommentary
+  parseReviewMetadata,
+  invokeClaude,
+  hideCommentary,
+  generateReviewHtml,
+  buildReviewPrompt
 };
 
-//# debugId=308A425302523F0964756E2164756E21
+//# debugId=C244AE0F9893F9BF64756E2164756E21