npm - @demon-utils/playwright - Versions diffs - 0.1.2 → 0.1.5 - Mend

@demon-utils/playwright 0.1.2 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/bin/demon-demo-review.js +303 -0
package/dist/bin/demon-demo-review.js.map +12 -0
package/dist/index.js +267 -8
package/dist/index.js.map +6 -4
package/package.json +10 -1
package/src/bin/demon-demo-review.ts +73 -0
package/src/commentary.test.ts +96 -0
package/src/commentary.ts +31 -8
package/src/html-generator.test.ts +195 -0
package/src/html-generator.ts +152 -0
package/src/index.ts +7 -0
package/src/review-types.ts +9 -0
package/src/review.test.ts +167 -0
package/src/review.ts +144 -0

package/src/html-generator.ts ADDED Viewed

@@ -0,0 +1,152 @@
+import type { ReviewMetadata } from "./review-types.ts";
+export interface GenerateReviewHtmlOptions {
+  metadata: ReviewMetadata;
+  title?: string;
+}
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+function escapeAttr(s: string): string {
+  return escapeHtml(s);
+}
+export function generateReviewHtml(options: GenerateReviewHtmlOptions): string {
+  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("\n            ");
+  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>`;
+}

package/src/index.ts CHANGED Viewed

@@ -1,2 +1,9 @@
 export { showCommentary, hideCommentary } from "./commentary.ts";
 export type { ShowCommentaryOptions } from "./commentary.ts";
+export type { DemoMetadata, ReviewMetadata } from "./review-types.ts";
+export { buildReviewPrompt, invokeClaude, parseReviewMetadata } from "./review.ts";
+export type { InvokeClaudeOptions, SpawnFn } from "./review.ts";
+export { generateReviewHtml } from "./html-generator.ts";
+export type { GenerateReviewHtmlOptions } from "./html-generator.ts";

package/src/review-types.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export interface DemoMetadata {
+  file: string;
+  summary: string;
+  annotations: Array<{ timestampSeconds: number; text: string }>;
+}
+export interface ReviewMetadata {
+  demos: DemoMetadata[];
+}

package/src/review.test.ts ADDED Viewed

@@ -0,0 +1,167 @@
+import { describe, test, expect } from "bun:test";
+import type { SpawnFn } from "./review.ts";
+import {
+  buildReviewPrompt,
+  invokeClaude,
+  parseReviewMetadata,
+} from "./review.ts";
+describe("buildReviewPrompt", () => {
+  test("includes all filenames in the prompt", () => {
+    const prompt = buildReviewPrompt(["login-flow.webm", "signup.webm"]);
+    expect(prompt).toContain("- login-flow.webm");
+    expect(prompt).toContain("- signup.webm");
+  });
+  test("includes schema instructions", () => {
+    const prompt = buildReviewPrompt(["demo.webm"]);
+    expect(prompt).toContain('"demos"');
+    expect(prompt).toContain('"file"');
+    expect(prompt).toContain('"summary"');
+    expect(prompt).toContain('"annotations"');
+    expect(prompt).toContain('"timestampSeconds"');
+  });
+});
+describe("parseReviewMetadata", () => {
+  const validInput = JSON.stringify({
+    demos: [
+      {
+        file: "login.webm",
+        summary: "Shows a login flow",
+        annotations: [{ timestampSeconds: 0, text: "Start" }],
+      },
+    ],
+  });
+  test("parses valid input correctly", () => {
+    const result = parseReviewMetadata(validInput);
+    expect(result.demos).toHaveLength(1);
+    expect(result.demos[0]!.file).toBe("login.webm");
+    expect(result.demos[0]!.summary).toBe("Shows a login flow");
+    expect(result.demos[0]!.annotations).toHaveLength(1);
+    expect(result.demos[0]!.annotations[0]!.timestampSeconds).toBe(0);
+    expect(result.demos[0]!.annotations[0]!.text).toBe("Start");
+  });
+  test("throws on invalid JSON", () => {
+    expect(() => parseReviewMetadata("not json")).toThrow("Invalid JSON");
+  });
+  test("throws when demos array is missing", () => {
+    expect(() => parseReviewMetadata("{}")).toThrow("Missing 'demos' array");
+  });
+  test("throws when demos is not an array", () => {
+    expect(() => parseReviewMetadata('{"demos": "nope"}')).toThrow(
+      "'demos' must be an array",
+    );
+  });
+  test("throws when demo is missing file", () => {
+    expect(() =>
+      parseReviewMetadata(
+        JSON.stringify({ demos: [{ summary: "x", annotations: [] }] }),
+      ),
+    ).toThrow("'file' string");
+  });
+  test("throws when demo is missing summary", () => {
+    expect(() =>
+      parseReviewMetadata(
+        JSON.stringify({ demos: [{ file: "x", annotations: [] }] }),
+      ),
+    ).toThrow("'summary' string");
+  });
+  test("throws when annotations is missing", () => {
+    expect(() =>
+      parseReviewMetadata(
+        JSON.stringify({ demos: [{ file: "x", summary: "s" }] }),
+      ),
+    ).toThrow("'annotations' array");
+  });
+  test("throws when annotation has wrong timestampSeconds type", () => {
+    expect(() =>
+      parseReviewMetadata(
+        JSON.stringify({
+          demos: [
+            {
+              file: "x",
+              summary: "s",
+              annotations: [{ timestampSeconds: "0", text: "t" }],
+            },
+          ],
+        }),
+      ),
+    ).toThrow("'timestampSeconds' number");
+  });
+  test("throws when annotation has wrong text type", () => {
+    expect(() =>
+      parseReviewMetadata(
+        JSON.stringify({
+          demos: [
+            {
+              file: "x",
+              summary: "s",
+              annotations: [{ timestampSeconds: 0, text: 123 }],
+            },
+          ],
+        }),
+      ),
+    ).toThrow("'text' string");
+  });
+});
+describe("invokeClaude", () => {
+  function mockSpawn(
+    stdout: string,
+    exitCode: number,
+  ): SpawnFn {
+    return (_cmd: string[]) => ({
+      exitCode: Promise.resolve(exitCode),
+      stdout: new ReadableStream({
+        start(controller) {
+          controller.enqueue(new TextEncoder().encode(stdout));
+          controller.close();
+        },
+      }),
+    });
+  }
+  test("returns stdout on success", async () => {
+    const result = await invokeClaude("test prompt", { spawn: mockSpawn("hello", 0) });
+    expect(result).toBe("hello");
+  });
+  test("trims whitespace from output", async () => {
+    const result = await invokeClaude(
+      "test prompt",
+      { spawn: mockSpawn("  hello  \n", 0) },
+    );
+    expect(result).toBe("hello");
+  });
+  test("throws on non-zero exit code", async () => {
+    try {
+      await invokeClaude("test prompt", { spawn: mockSpawn("error msg", 1) });
+      expect(true).toBe(false); // should not reach here
+    } catch (e) {
+      expect((e as Error).message).toContain("exited with code 1");
+    }
+  });
+  test("passes agent option to spawn command", async () => {
+    let capturedCmd: string[] = [];
+    const spySpawn: SpawnFn = (cmd) => {
+      capturedCmd = cmd;
+      return mockSpawn("ok", 0)(cmd);
+    };
+    await invokeClaude("test prompt", { agent: "my-agent", spawn: spySpawn });
+    expect(capturedCmd[0]).toBe("my-agent");
+    expect(capturedCmd[1]).toBe("-p");
+  });
+});

package/src/review.ts ADDED Viewed

@@ -0,0 +1,144 @@
+import type { ReviewMetadata } from "./review-types.ts";
+export type SpawnFn = (
+  cmd: string[],
+) => { exitCode: Promise<number>; stdout: ReadableStream<Uint8Array> };
+export interface InvokeClaudeOptions {
+  agent?: string;
+  spawn?: SpawnFn;
+}
+export function buildReviewPrompt(filenames: string[]): string {
+  const fileList = filenames.map((f) => `- ${f}`).join("\n");
+  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.`;
+}
+export async function invokeClaude(
+  prompt: string,
+  options?: InvokeClaudeOptions,
+): Promise<string> {
+  const spawnFn = options?.spawn ?? defaultSpawn;
+  const agent = options?.agent ?? "claude";
+  const proc = spawnFn([agent, "-p", prompt]);
+  const reader = proc.stdout.getReader();
+  const chunks: Uint8Array[] = [];
+  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();
+}
+export function parseReviewMetadata(raw: string): ReviewMetadata {
+  let parsed: unknown;
+  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 as Record<string, unknown>;
+  if (!Array.isArray(obj["demos"])) {
+    throw new Error("'demos' must be an array");
+  }
+  for (const demo of obj["demos"] as unknown[]) {
+    if (typeof demo !== "object" || demo === null) {
+      throw new Error("Each demo must be an object");
+    }
+    const d = demo as Record<string, unknown>;
+    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"] as unknown[]) {
+      if (typeof ann !== "object" || ann === null) {
+        throw new Error("Each annotation must be an object");
+      }
+      const a = ann as Record<string, unknown>;
+      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 as ReviewMetadata;
+}
+function defaultSpawn(
+  cmd: string[],
+): { exitCode: Promise<number>; stdout: ReadableStream<Uint8Array> } {
+  const [command, ...args] = cmd;
+  const proc = Bun.spawn([command!, ...args], {
+    stdout: "pipe",
+    stderr: "pipe",
+  });
+  return {
+    exitCode: proc.exited,
+    stdout: proc.stdout as unknown as ReadableStream<Uint8Array>,
+  };
+}
+function concatUint8Arrays(arrays: Uint8Array[]): Uint8Array {
+  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;
+}