@demon-utils/playwright 0.1.6 → 0.1.7

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@demon-utils/playwright",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": false,
+  "scripts": {
+    "build": "./build.sh",
+    "test:e2e": "playwright test -c e2e/playwright.config.ts"
+  },
   "module": "dist/index.js",
   "types": "src/index.ts",
   "exports": {
@@ -15,9 +19,14 @@
     "src"
   ],
   "bin": {
-    "demon-demo-review": "dist/bin/demon-demo-review.js"
+    "demon-demo-review": "dist/bin/demon-demo-review.js",
+    "demon-demo-init": "dist/bin/demon-demo-init.js",
+    "demoon": "dist/bin/demoon.js"
   },
   "type": "module",
+  "dependencies": {
+    "@octokit/graphql": "^8.2.1"
+  },
   "peerDependencies": {
     "@playwright/test": ">=1.40.0"
   },

package/src/bin/demon-demo-init.ts

@@ -0,0 +1,59 @@
+#!/usr/bin/env bun
+import { existsSync, writeFileSync } from "node:fs";
+import { resolve, join, dirname } from "node:path";
+
+const DEMO_CONFIG_FILENAME = "playwright.demo.config.ts";
+
+const EXAMPLE_DEMO_TEMPLATE = `import { test } from "@playwright/test";
+import { DemoRecorder } from "@demon-utils/playwright";
+// You can also import hideCommentary to manually hide tooltips:
+// import { hideCommentary } from "@demon-utils/playwright";
+
+test("example demo", async ({ page }, testInfo) => {
+  const demo = new DemoRecorder({ testStep: test.step });
+
+  // Navigate to the starting page
+  await demo.step(page, "Navigate to the application", { selector: "body" });
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  // Demonstrate an interaction
+  await demo.step(page, "Click a button or link", { selector: "body" });
+  // await page.click("#my-button");
+  await page.waitForTimeout(1000);
+
+  // Save the demo steps metadata
+  await demo.save(testInfo.outputDir);
+});
+`;
+
+function findConfigDir(startDir: string): string | null {
+  let current = resolve(startDir);
+  const root = resolve("/");
+
+  while (current !== root) {
+    const configPath = join(current, DEMO_CONFIG_FILENAME);
+    if (existsSync(configPath)) {
+      return current;
+    }
+    const parent = dirname(current);
+    if (parent === current) break;
+    current = parent;
+  }
+
+  return null;
+}
+
+const startPath = process.argv[2] ?? process.cwd();
+const resolved = resolve(startPath);
+
+const configDir = findConfigDir(resolved);
+
+if (!configDir) {
+  console.error(`Error: Could not find ${DEMO_CONFIG_FILENAME} in any parent directory of "${resolved}".`);
+  process.exit(1);
+}
+
+const examplePath = join(configDir, "example.demo.ts");
+writeFileSync(examplePath, EXAMPLE_DEMO_TEMPLATE);
+console.log(examplePath);

package/src/bin/demon-demo-review.ts

@@ -1,31 +1,28 @@
 #!/usr/bin/env bun
-import { existsSync, statSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
-import { resolve, join, basename, dirname } from "node:path";
+import { existsSync, statSync } from "node:fs";
+import { resolve } from "node:path";
 
-import {
-  buildReviewPrompt,
-  invokeClaude,
-  parseLlmResponse,
-} from "../review.ts";
-import { generateReviewHtml } from "../html-generator.ts";
-import { getRepoContext } from "../git-context.ts";
-import type { ReviewMetadata } from "../review-types.ts";
+import { generateReview, discoverDemoFiles } from "../review-generator.ts";
 
 let dir: string | undefined;
 let agent: string | undefined;
+let diffBase: string | undefined;
 
 const 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);
 }
 
@@ -36,102 +33,27 @@ if (!existsSync(resolved) || !statSync(resolved).isDirectory()) {
   process.exit(1);
 }
 
-// Discover .webm files — search top-level first, then one level deep
-// (Playwright creates per-test subdirectories under outputDir)
-let webmFiles = readdirSync(resolved)
-  .filter((f) => f.endsWith(".webm"))
-  .map((f) => join(resolved, f));
+// Discover and print demo files
+const demoFiles = discoverDemoFiles(resolved);
 
-if (webmFiles.length === 0) {
-  for (const entry of readdirSync(resolved, { withFileTypes: true })) {
-    if (!entry.isDirectory()) continue;
-    const subdir = join(resolved, entry.name);
-    for (const f of readdirSync(subdir)) {
-      if (f.endsWith(".webm")) {
-        webmFiles.push(join(subdir, f));
-      }
-    }
-  }
-}
-
-webmFiles.sort();
-
-if (webmFiles.length === 0) {
-  console.error(`Error: No .webm files found in "${resolved}" or its subdirectories.`);
+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);
 }
 
-// Collect demo-steps.json from the directory of each .webm file
-const stepsMap: Record<string, Array<{ text: string; timestampSeconds: number }>> = {};
-for (const webmFile of webmFiles) {
-  const stepsPath = join(dirname(webmFile), "demo-steps.json");
-  if (!existsSync(stepsPath)) continue;
-  try {
-    const raw = readFileSync(stepsPath, "utf-8");
-    const parsed = JSON.parse(raw);
-    if (Array.isArray(parsed)) {
-      stepsMap[basename(webmFile)] = parsed;
-    }
-  } catch {
-    // skip malformed steps files
-  }
-}
-
-if (Object.keys(stepsMap).length === 0) {
-  console.error("Error: No demo-steps.json found alongside any .webm files.");
-  console.error("Use DemoRecorder in your demo tests to generate step data.");
-  process.exit(1);
-}
-
-// Gather repo context (git diff + guidelines)
-let gitDiff: string | undefined;
-let guidelines: string[] | undefined;
 try {
-  const repoContext = await getRepoContext(resolved);
-  gitDiff = repoContext.gitDiff;
-  guidelines = repoContext.guidelines;
-} catch (err) {
-  console.warn(
-    "Warning: Could not gather repo context:",
-    err instanceof Error ? err.message : err,
-  );
-}
-
-try {
-  const basenames = webmFiles.map((f) => basename(f));
-
-  const prompt = buildReviewPrompt({ filenames: basenames, stepsMap, gitDiff, guidelines });
-
   console.log("Invoking claude to generate review metadata...");
-  const rawOutput = await invokeClaude(prompt, { agent });
-
-  const llmResponse = parseLlmResponse(rawOutput);
-
-  // Construct final metadata by merging LLM summaries with steps
-  const metadata: ReviewMetadata = {
-    demos: llmResponse.demos.map((demo) => ({
-      file: demo.file,
-      summary: demo.summary,
-      steps: stepsMap[demo.file] ?? [],
-    })),
-    review: llmResponse.review,
-  };
-
-  const outputPath = join(resolved, "review-metadata.json");
-  writeFileSync(outputPath, JSON.stringify(metadata, null, 2) + "\n");
-  console.log(`Review metadata written to ${outputPath}`);
+  const result = await generateReview({ directory: resolved, agent, diffBase });
 
-  const html = generateReviewHtml({ metadata });
-  const htmlPath = join(resolved, "review.html");
-  writeFileSync(htmlPath, html);
-  console.log(resolve(htmlPath));
+  console.log(`Review metadata written to ${result.metadataPath}`);
+  console.log(resolve(result.htmlPath));
 } catch (err) {
   console.error(
-    "Error generating review metadata:",
+    "Error generating review:",
     err instanceof Error ? err.message : err,
   );
   process.exit(1);

package/src/bin/demoon.ts

@@ -0,0 +1,140 @@
+#!/usr/bin/env bun
+import { resolve } from "node:path";
+import { readFileSync } from "node:fs";
+
+import { runReviewOrchestration } from "../orchestrator.ts";
+import { startFeedbackServer, type FeedbackPayload } from "../feedback-server.ts";
+import type { GitHubIssue } from "../github-issue.ts";
+
+function printUsage(): void {
+  console.error("Usage: demoon <command> [options]");
+  console.error("");
+  console.error("Commands:");
+  console.error("  review    Generate a review from a GitHub issue");
+  console.error("");
+  console.error("Review options:");
+  console.error("  --github-issue-id <id>  GitHub issue number (required unless --issue-file is provided)");
+  console.error("  --issue-file <path>     Path to JSON file with issue data (for testing, skips GitHub API)");
+  console.error("  --base <ref>            Base commit/branch for diff (auto-detects main/master if on feature branch)");
+  console.error("  --agent <path>          Path to Claude agent binary");
+  console.error("  --port <number>         Port for feedback server (default: random available port)");
+  console.error("");
+  console.error("Environment variables:");
+  console.error("  GITHUB_TOKEN or GH_TOKEN  GitHub personal access token (required for API access)");
+}
+
+async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+
+  if (args.length === 0 || args[0] === "--help" || args[0] === "-h") {
+    printUsage();
+    process.exit(args.length === 0 ? 1 : 0);
+  }
+
+  const command = args[0];
+
+  if (command !== "review") {
+    console.error(`Unknown command: ${command}`);
+    console.error("");
+    printUsage();
+    process.exit(1);
+  }
+
+  // Parse review command options
+  let issueId: string | undefined;
+  let issueFile: string | undefined;
+  let diffBase: string | undefined;
+  let agent: string | undefined;
+  let port = 0;
+
+  for (let i = 1; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === "--github-issue-id" || arg === "--issue") {
+      issueId = args[++i];
+    } else if (arg === "--issue-file") {
+      issueFile = args[++i];
+    } else if (arg === "--base") {
+      diffBase = args[++i];
+    } else if (arg === "--agent") {
+      agent = args[++i];
+    } else if (arg === "--port") {
+      port = parseInt(args[++i] ?? "0", 10);
+    } else if (!arg?.startsWith("-")) {
+      // Allow positional issue ID for convenience
+      if (!issueId) {
+        issueId = arg;
+      }
+    }
+  }
+
+  // Load issue from file if provided
+  let issue: GitHubIssue | undefined;
+  if (issueFile) {
+    const content = readFileSync(issueFile, "utf-8");
+    issue = JSON.parse(content) as GitHubIssue;
+    issueId = String(issue.number);
+  }
+
+  if (!issueId && !issue) {
+    console.error("Error: --github-issue-id or --issue-file is required");
+    console.error("");
+    printUsage();
+    process.exit(1);
+  }
+
+  // Start feedback server
+  const feedbackServer = startFeedbackServer(port);
+
+  try {
+    if (issue) {
+      console.log(`Using issue from file: #${issue.number} - ${issue.title}`);
+    } else {
+      console.log(`Fetching GitHub issue #${issueId}...`);
+    }
+
+    const result = await runReviewOrchestration({
+      issueId: issueId!,
+      issue,
+      diffBase,
+      agent,
+      feedbackEndpoint: feedbackServer.feedbackEndpoint,
+    });
+
+    console.log("");
+    console.log(`Review generated for issue #${result.issue.number}: ${result.issue.title}`);
+    console.log("");
+    console.log(`Verdict: ${result.metadata.review?.verdict ?? "unknown"}`);
+    if (result.metadata.review?.verdictReason) {
+      console.log(`Reason: ${result.metadata.review.verdictReason}`);
+    }
+    console.log("");
+    console.log(`Review folder: ${result.reviewFolder}`);
+    console.log(`Review HTML: ${resolve(result.htmlPath)}`);
+    console.log("");
+    console.log(`Feedback server running at: http://localhost:${feedbackServer.port}`);
+    console.log(`Open the review HTML and approve/request changes to complete.`);
+    console.log("");
+
+    // Wait for user feedback
+    const feedback: FeedbackPayload = await feedbackServer.waitForFeedback();
+
+    console.log("");
+    console.log("=".repeat(60));
+    console.log(`User verdict: ${feedback.verdict}`);
+    if (feedback.feedback) {
+      console.log("");
+      console.log("Feedback:");
+      console.log(feedback.feedback);
+    }
+    console.log("=".repeat(60));
+
+    // Exit with appropriate code
+    process.exit(feedback.verdict === "approve" ? 0 : 1);
+  } catch (err) {
+    console.error("Error:", err instanceof Error ? err.message : err);
+    feedbackServer.stop();
+    process.exit(1);
+  }
+}
+
+main();

package/src/feedback-server.ts

@@ -0,0 +1,138 @@
+import { randomUUID } from "node:crypto";
+
+export type ReviewVerdict = "approve" | "request_changes";
+
+export interface FeedbackPayload {
+  verdict: ReviewVerdict;
+  feedback?: string;
+}
+
+interface PendingReview {
+  resolve: (payload: FeedbackPayload) => void;
+  reject: (error: Error) => void;
+}
+
+const pendingReviews = new Map<string, PendingReview>();
+
+const CORS_HEADERS = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Methods": "POST, OPTIONS",
+  "Access-Control-Allow-Headers": "Content-Type",
+};
+
+function isValidPayload(body: unknown): body is FeedbackPayload {
+  if (typeof body !== "object" || body === null) return false;
+  const obj = body as Record<string, unknown>;
+  if (obj["verdict"] !== "approve" && obj["verdict"] !== "request_changes") return false;
+  if (obj["feedback"] !== undefined && typeof obj["feedback"] !== "string") return false;
+  return true;
+}
+
+export interface FeedbackServerResult {
+  server: ReturnType<typeof Bun.serve>;
+  port: number;
+  reviewId: string;
+  feedbackEndpoint: string;
+  waitForFeedback: () => Promise<FeedbackPayload>;
+  stop: () => void;
+}
+
+export function startFeedbackServer(preferredPort = 0): FeedbackServerResult {
+  const reviewId = randomUUID();
+
+  const server = Bun.serve({
+    port: preferredPort,
+    async fetch(req) {
+      const url = new URL(req.url);
+
+      // Handle CORS preflight
+      if (req.method === "OPTIONS") {
+        return new Response(null, {
+          status: 204,
+          headers: CORS_HEADERS,
+        });
+      }
+
+      // Handle feedback endpoint
+      if (url.pathname === "/feedback" && req.method === "POST") {
+        const requestReviewId = url.searchParams.get("reviewId");
+        const headers = {
+          "Content-Type": "application/json",
+          ...CORS_HEADERS,
+        };
+
+        if (!requestReviewId) {
+          return new Response(
+            JSON.stringify({ error: "Missing reviewId query parameter" }),
+            { status: 400, headers }
+          );
+        }
+
+        const pending = pendingReviews.get(requestReviewId);
+        if (!pending) {
+          return new Response(
+            JSON.stringify({ error: "Review not found or already completed" }),
+            { status: 404, headers }
+          );
+        }
+
+        let body: unknown;
+        try {
+          body = await req.json();
+        } catch {
+          return new Response(
+            JSON.stringify({ error: "Invalid JSON" }),
+            { status: 400, headers }
+          );
+        }
+
+        if (!isValidPayload(body)) {
+          return new Response(
+            JSON.stringify({ error: "Invalid payload" }),
+            { status: 400, headers }
+          );
+        }
+
+        pending.resolve(body);
+        pendingReviews.delete(requestReviewId);
+
+        return new Response(
+          JSON.stringify({ success: true, verdict: body.verdict }),
+          { status: 200, headers }
+        );
+      }
+
+      // Health check
+      if (url.pathname === "/health") {
+        return new Response(JSON.stringify({ status: "ok" }), {
+          headers: { "Content-Type": "application/json" },
+        });
+      }
+
+      return new Response("Not Found", { status: 404 });
+    },
+  });
+
+  const port = server.port ?? 3000;
+  const feedbackEndpoint = `http://localhost:${port}/feedback?reviewId=${reviewId}`;
+
+  const feedbackPromise = new Promise<FeedbackPayload>((resolve, reject) => {
+    pendingReviews.set(reviewId, { resolve, reject });
+  });
+
+  return {
+    server,
+    port,
+    reviewId,
+    feedbackEndpoint,
+    waitForFeedback: () => feedbackPromise,
+    stop: () => {
+      const pending = pendingReviews.get(reviewId);
+      if (pending) {
+        pending.reject(new Error("Server stopped"));
+        pendingReviews.delete(reviewId);
+      }
+      server.stop();
+    },
+  };
+}

package/src/git-context.test.ts

@@ -23,9 +23,10 @@ function mockReadFile(files: Record<string, string>): ReadFileFn {
 }
 
 describe("getRepoContext", () => {
-  test("returns diff from working tree when dirty", async () => {
+  test("returns diff from working tree when dirty and on main", async () => {
     const exec = mockExec({
       "git rev-parse --show-toplevel": "/repo\n",
+      "git rev-parse --abbrev-ref HEAD": "main\n",
       "git diff HEAD": "diff --git a/file.ts\n+added line\n",
       "git ls-files": "src/index.ts\n",
     });
@@ -35,9 +36,10 @@ describe("getRepoContext", () => {
     expect(ctx.gitDiff).toBe("diff --git a/file.ts\n+added line");
   });
 
-  test("falls back to HEAD~1..HEAD when working tree is clean", async () => {
+  test("falls back to HEAD~1..HEAD when working tree is clean and on main", async () => {
     const exec = mockExec({
       "git rev-parse --show-toplevel": "/repo\n",
+      "git rev-parse --abbrev-ref HEAD": "main\n",
       "git diff HEAD": "",
       "git diff HEAD~1..HEAD": "diff --git a/committed.ts\n+committed line\n",
       "git ls-files": "",
@@ -48,9 +50,72 @@ describe("getRepoContext", () => {
     expect(ctx.gitDiff).toBe("diff --git a/committed.ts\n+committed line");
   });
 
+  test("auto-detects main as base when on feature branch", async () => {
+    const exec = mockExec({
+      "git rev-parse --show-toplevel": "/repo\n",
+      "git rev-parse --abbrev-ref HEAD": "feature-branch\n",
+      "git rev-parse --verify main": "abc123\n",
+      "git diff main...HEAD": "diff --git a/feature.ts\n+feature line\n",
+      "git ls-files": "",
+    });
+    const readFile = mockReadFile({});
+
+    const ctx = await getRepoContext("/repo/demos", { exec, readFile });
+    expect(ctx.gitDiff).toBe("diff --git a/feature.ts\n+feature line");
+  });
+
+  test("auto-detects master as base when main does not exist", async () => {
+    const exec: ExecFn = async (cmd: string[], _cwd: string) => {
+      const key = cmd.join(" ");
+      const responses: Record<string, string> = {
+        "git rev-parse --show-toplevel": "/repo\n",
+        "git rev-parse --abbrev-ref HEAD": "feature-branch\n",
+        "git rev-parse --verify master": "abc123\n",
+        "git diff master...HEAD": "diff --git a/feature.ts\n+feature line\n",
+        "git ls-files": "",
+      };
+      if (key === "git rev-parse --verify main") {
+        throw new Error("fatal: Needed a single revision");
+      }
+      if (key in responses) {
+        return responses[key]!;
+      }
+      throw new Error(`Unexpected command: ${key}`);
+    };
+    const readFile = mockReadFile({});
+
+    const ctx = await getRepoContext("/repo/demos", { exec, readFile });
+    expect(ctx.gitDiff).toBe("diff --git a/feature.ts\n+feature line");
+  });
+
+  test("uses explicit diffBase when provided", async () => {
+    const exec = mockExec({
+      "git rev-parse --show-toplevel": "/repo\n",
+      "git diff develop...HEAD": "diff --git a/feature.ts\n+feature line\n",
+      "git ls-files": "",
+    });
+    const readFile = mockReadFile({});
+
+    const ctx = await getRepoContext("/repo/demos", { exec, readFile, diffBase: "develop" });
+    expect(ctx.gitDiff).toBe("diff --git a/feature.ts\n+feature line");
+  });
+
+  test("uses explicit diffBase with commit hash", async () => {
+    const exec = mockExec({
+      "git rev-parse --show-toplevel": "/repo\n",
+      "git diff abc123...HEAD": "diff --git a/commit.ts\n+commit changes\n",
+      "git ls-files": "",
+    });
+    const readFile = mockReadFile({});
+
+    const ctx = await getRepoContext("/repo/demos", { exec, readFile, diffBase: "abc123" });
+    expect(ctx.gitDiff).toBe("diff --git a/commit.ts\n+commit changes");
+  });
+
   test("discovers CLAUDE.md and SKILL.md files", async () => {
     const exec = mockExec({
       "git rev-parse --show-toplevel": "/repo\n",
+      "git rev-parse --abbrev-ref HEAD": "main\n",
       "git diff HEAD": "some diff\n",
       "git ls-files": "CLAUDE.md\nplugins/demo/SKILL.md\nsrc/index.ts\n",
     });
@@ -68,6 +133,7 @@ describe("getRepoContext", () => {
   test("returns empty guidelines when no CLAUDE.md or SKILL.md exist", async () => {
     const exec = mockExec({
       "git rev-parse --show-toplevel": "/repo\n",
+      "git rev-parse --abbrev-ref HEAD": "main\n",
       "git diff HEAD": "some diff\n",
       "git ls-files": "src/index.ts\npackage.json\n",
     });