@demon-utils/playwright 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,3 +1,377 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// node:path
+var exports_path = {};
+__export(exports_path, {
+  sep: () => sep,
+  resolve: () => resolve,
+  relative: () => relative,
+  posix: () => posix,
+  parse: () => parse,
+  normalize: () => normalize,
+  join: () => join,
+  isAbsolute: () => isAbsolute,
+  format: () => format,
+  extname: () => extname,
+  dirname: () => dirname,
+  delimiter: () => delimiter,
+  default: () => path_default,
+  basename: () => basename,
+  _makeLong: () => _makeLong
+});
+function assertPath(path) {
+  if (typeof path !== "string")
+    throw TypeError("Path must be a string. Received " + JSON.stringify(path));
+}
+function normalizeStringPosix(path, allowAboveRoot) {
+  var res = "", lastSegmentLength = 0, lastSlash = -1, dots = 0, code;
+  for (var i = 0;i <= path.length; ++i) {
+    if (i < path.length)
+      code = path.charCodeAt(i);
+    else if (code === 47)
+      break;
+    else
+      code = 47;
+    if (code === 47) {
+      if (lastSlash === i - 1 || dots === 1)
+        ;
+      else if (lastSlash !== i - 1 && dots === 2) {
+        if (res.length < 2 || lastSegmentLength !== 2 || res.charCodeAt(res.length - 1) !== 46 || res.charCodeAt(res.length - 2) !== 46) {
+          if (res.length > 2) {
+            var lastSlashIndex = res.lastIndexOf("/");
+            if (lastSlashIndex !== res.length - 1) {
+              if (lastSlashIndex === -1)
+                res = "", lastSegmentLength = 0;
+              else
+                res = res.slice(0, lastSlashIndex), lastSegmentLength = res.length - 1 - res.lastIndexOf("/");
+              lastSlash = i, dots = 0;
+              continue;
+            }
+          } else if (res.length === 2 || res.length === 1) {
+            res = "", lastSegmentLength = 0, lastSlash = i, dots = 0;
+            continue;
+          }
+        }
+        if (allowAboveRoot) {
+          if (res.length > 0)
+            res += "/..";
+          else
+            res = "..";
+          lastSegmentLength = 2;
+        }
+      } else {
+        if (res.length > 0)
+          res += "/" + path.slice(lastSlash + 1, i);
+        else
+          res = path.slice(lastSlash + 1, i);
+        lastSegmentLength = i - lastSlash - 1;
+      }
+      lastSlash = i, dots = 0;
+    } else if (code === 46 && dots !== -1)
+      ++dots;
+    else
+      dots = -1;
+  }
+  return res;
+}
+function _format(sep, pathObject) {
+  var dir = pathObject.dir || pathObject.root, base = pathObject.base || (pathObject.name || "") + (pathObject.ext || "");
+  if (!dir)
+    return base;
+  if (dir === pathObject.root)
+    return dir + base;
+  return dir + sep + base;
+}
+function resolve() {
+  var resolvedPath = "", resolvedAbsolute = false, cwd;
+  for (var i = arguments.length - 1;i >= -1 && !resolvedAbsolute; i--) {
+    var path;
+    if (i >= 0)
+      path = arguments[i];
+    else {
+      if (cwd === undefined)
+        cwd = process.cwd();
+      path = cwd;
+    }
+    if (assertPath(path), path.length === 0)
+      continue;
+    resolvedPath = path + "/" + resolvedPath, resolvedAbsolute = path.charCodeAt(0) === 47;
+  }
+  if (resolvedPath = normalizeStringPosix(resolvedPath, !resolvedAbsolute), resolvedAbsolute)
+    if (resolvedPath.length > 0)
+      return "/" + resolvedPath;
+    else
+      return "/";
+  else if (resolvedPath.length > 0)
+    return resolvedPath;
+  else
+    return ".";
+}
+function normalize(path) {
+  if (assertPath(path), path.length === 0)
+    return ".";
+  var isAbsolute = path.charCodeAt(0) === 47, trailingSeparator = path.charCodeAt(path.length - 1) === 47;
+  if (path = normalizeStringPosix(path, !isAbsolute), path.length === 0 && !isAbsolute)
+    path = ".";
+  if (path.length > 0 && trailingSeparator)
+    path += "/";
+  if (isAbsolute)
+    return "/" + path;
+  return path;
+}
+function isAbsolute(path) {
+  return assertPath(path), path.length > 0 && path.charCodeAt(0) === 47;
+}
+function join() {
+  if (arguments.length === 0)
+    return ".";
+  var joined;
+  for (var i = 0;i < arguments.length; ++i) {
+    var arg = arguments[i];
+    if (assertPath(arg), arg.length > 0)
+      if (joined === undefined)
+        joined = arg;
+      else
+        joined += "/" + arg;
+  }
+  if (joined === undefined)
+    return ".";
+  return normalize(joined);
+}
+function relative(from, to) {
+  if (assertPath(from), assertPath(to), from === to)
+    return "";
+  if (from = resolve(from), to = resolve(to), from === to)
+    return "";
+  var fromStart = 1;
+  for (;fromStart < from.length; ++fromStart)
+    if (from.charCodeAt(fromStart) !== 47)
+      break;
+  var fromEnd = from.length, fromLen = fromEnd - fromStart, toStart = 1;
+  for (;toStart < to.length; ++toStart)
+    if (to.charCodeAt(toStart) !== 47)
+      break;
+  var toEnd = to.length, toLen = toEnd - toStart, length = fromLen < toLen ? fromLen : toLen, lastCommonSep = -1, i = 0;
+  for (;i <= length; ++i) {
+    if (i === length) {
+      if (toLen > length) {
+        if (to.charCodeAt(toStart + i) === 47)
+          return to.slice(toStart + i + 1);
+        else if (i === 0)
+          return to.slice(toStart + i);
+      } else if (fromLen > length) {
+        if (from.charCodeAt(fromStart + i) === 47)
+          lastCommonSep = i;
+        else if (i === 0)
+          lastCommonSep = 0;
+      }
+      break;
+    }
+    var fromCode = from.charCodeAt(fromStart + i), toCode = to.charCodeAt(toStart + i);
+    if (fromCode !== toCode)
+      break;
+    else if (fromCode === 47)
+      lastCommonSep = i;
+  }
+  var out = "";
+  for (i = fromStart + lastCommonSep + 1;i <= fromEnd; ++i)
+    if (i === fromEnd || from.charCodeAt(i) === 47)
+      if (out.length === 0)
+        out += "..";
+      else
+        out += "/..";
+  if (out.length > 0)
+    return out + to.slice(toStart + lastCommonSep);
+  else {
+    if (toStart += lastCommonSep, to.charCodeAt(toStart) === 47)
+      ++toStart;
+    return to.slice(toStart);
+  }
+}
+function _makeLong(path) {
+  return path;
+}
+function dirname(path) {
+  if (assertPath(path), path.length === 0)
+    return ".";
+  var code = path.charCodeAt(0), hasRoot = code === 47, end = -1, matchedSlash = true;
+  for (var i = path.length - 1;i >= 1; --i)
+    if (code = path.charCodeAt(i), code === 47) {
+      if (!matchedSlash) {
+        end = i;
+        break;
+      }
+    } else
+      matchedSlash = false;
+  if (end === -1)
+    return hasRoot ? "/" : ".";
+  if (hasRoot && end === 1)
+    return "//";
+  return path.slice(0, end);
+}
+function basename(path, ext) {
+  if (ext !== undefined && typeof ext !== "string")
+    throw TypeError('"ext" argument must be a string');
+  assertPath(path);
+  var start = 0, end = -1, matchedSlash = true, i;
+  if (ext !== undefined && ext.length > 0 && ext.length <= path.length) {
+    if (ext.length === path.length && ext === path)
+      return "";
+    var extIdx = ext.length - 1, firstNonSlashEnd = -1;
+    for (i = path.length - 1;i >= 0; --i) {
+      var code = path.charCodeAt(i);
+      if (code === 47) {
+        if (!matchedSlash) {
+          start = i + 1;
+          break;
+        }
+      } else {
+        if (firstNonSlashEnd === -1)
+          matchedSlash = false, firstNonSlashEnd = i + 1;
+        if (extIdx >= 0)
+          if (code === ext.charCodeAt(extIdx)) {
+            if (--extIdx === -1)
+              end = i;
+          } else
+            extIdx = -1, end = firstNonSlashEnd;
+      }
+    }
+    if (start === end)
+      end = firstNonSlashEnd;
+    else if (end === -1)
+      end = path.length;
+    return path.slice(start, end);
+  } else {
+    for (i = path.length - 1;i >= 0; --i)
+      if (path.charCodeAt(i) === 47) {
+        if (!matchedSlash) {
+          start = i + 1;
+          break;
+        }
+      } else if (end === -1)
+        matchedSlash = false, end = i + 1;
+    if (end === -1)
+      return "";
+    return path.slice(start, end);
+  }
+}
+function extname(path) {
+  assertPath(path);
+  var startDot = -1, startPart = 0, end = -1, matchedSlash = true, preDotState = 0;
+  for (var i = path.length - 1;i >= 0; --i) {
+    var code = path.charCodeAt(i);
+    if (code === 47) {
+      if (!matchedSlash) {
+        startPart = i + 1;
+        break;
+      }
+      continue;
+    }
+    if (end === -1)
+      matchedSlash = false, end = i + 1;
+    if (code === 46) {
+      if (startDot === -1)
+        startDot = i;
+      else if (preDotState !== 1)
+        preDotState = 1;
+    } else if (startDot !== -1)
+      preDotState = -1;
+  }
+  if (startDot === -1 || end === -1 || preDotState === 0 || preDotState === 1 && startDot === end - 1 && startDot === startPart + 1)
+    return "";
+  return path.slice(startDot, end);
+}
+function format(pathObject) {
+  if (pathObject === null || typeof pathObject !== "object")
+    throw TypeError('The "pathObject" argument must be of type Object. Received type ' + typeof pathObject);
+  return _format("/", pathObject);
+}
+function parse(path) {
+  assertPath(path);
+  var ret = { root: "", dir: "", base: "", ext: "", name: "" };
+  if (path.length === 0)
+    return ret;
+  var code = path.charCodeAt(0), isAbsolute2 = code === 47, start;
+  if (isAbsolute2)
+    ret.root = "/", start = 1;
+  else
+    start = 0;
+  var startDot = -1, startPart = 0, end = -1, matchedSlash = true, i = path.length - 1, preDotState = 0;
+  for (;i >= start; --i) {
+    if (code = path.charCodeAt(i), code === 47) {
+      if (!matchedSlash) {
+        startPart = i + 1;
+        break;
+      }
+      continue;
+    }
+    if (end === -1)
+      matchedSlash = false, end = i + 1;
+    if (code === 46) {
+      if (startDot === -1)
+        startDot = i;
+      else if (preDotState !== 1)
+        preDotState = 1;
+    } else if (startDot !== -1)
+      preDotState = -1;
+  }
+  if (startDot === -1 || end === -1 || preDotState === 0 || preDotState === 1 && startDot === end - 1 && startDot === startPart + 1) {
+    if (end !== -1)
+      if (startPart === 0 && isAbsolute2)
+        ret.base = ret.name = path.slice(1, end);
+      else
+        ret.base = ret.name = path.slice(startPart, end);
+  } else {
+    if (startPart === 0 && isAbsolute2)
+      ret.name = path.slice(1, startDot), ret.base = path.slice(1, end);
+    else
+      ret.name = path.slice(startPart, startDot), ret.base = path.slice(startPart, end);
+    ret.ext = path.slice(startDot, end);
+  }
+  if (startPart > 0)
+    ret.dir = path.slice(0, startPart - 1);
+  else if (isAbsolute2)
+    ret.dir = "/";
+  return ret;
+}
+var sep = "/", delimiter = ":", posix, path_default;
+var init_path = __esm(() => {
+  posix = ((p) => (p.posix = p, p))({ resolve, normalize, isAbsolute, join, relative, _makeLong, dirname, basename, extname, format, parse, sep, delimiter, win32: null, posix: null });
+  path_default = posix;
+});
+
 // src/commentary.ts
 var TOOLTIP_ID = "demon-commentary-tooltip";
 async function showCommentary(page, options) {
@@ -85,33 +459,87 @@ async function hideCommentary(page) {
   await page.waitForTimeout(300);
 }
 // src/review.ts
-function buildReviewPrompt(filenames) {
-  const fileList = filenames.map((f) => `- ${f}`).join(`
+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;
@@ -132,10 +560,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)}`);
   }
@@ -157,20 +600,44 @@ 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");
     }
-    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");
-      }
+  }
+  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");
+    }
+    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;
@@ -196,6 +663,46 @@ function concatUint8Arrays(arrays) {
   }
   return result;
 }
+// src/git-context.ts
+var {readFileSync} = (() => ({}));
+var defaultExec = async (cmd, cwd) => {
+  const proc = Bun.spawnSync(cmd, { cwd });
+  if (proc.exitCode !== 0) {
+    const stderr = proc.stderr.toString().trim();
+    throw new Error(`Command failed (exit ${proc.exitCode}): ${cmd.join(" ")}${stderr ? `: ${stderr}` : ""}`);
+  }
+  return proc.stdout.toString();
+};
+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();
+  let gitDiff;
+  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/html-generator.ts
 function escapeHtml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
@@ -203,6 +710,32 @@ function escapeHtml(s) {
 function escapeAttr(s) {
   return escapeHtml(s);
 }
+function renderReviewSection(review) {
+  const bannerClass = review.verdict === "approve" ? "approve" : "request-changes";
+  const verdictLabel = review.verdict === "approve" ? "Approved" : "Changes Requested";
+  const highlightsHtml = review.highlights.map((h) => `<li>${escapeHtml(h)}</li>`).join(`
+          `);
+  const issuesHtml = review.issues.length > 0 ? review.issues.map((issue) => {
+    const badgeLabel = issue.severity.toUpperCase();
+    return `<div class="issue ${issue.severity}"><span class="severity-badge">${badgeLabel}</span> <span class="issue-text">${escapeHtml(issue.description)}</span><button class="feedback-add-issue" data-issue="${escapeAttr(issue.description)}">+</button></div>`;
+  }).join(`
+        `) : '<p class="no-issues">No issues found.</p>';
+  return `<section class="review-section">
+      <div class="verdict-banner ${bannerClass}">
+        <strong>${verdictLabel}</strong>: ${escapeHtml(review.verdictReason)}
+      </div>
+      <div class="review-body">
+        <h2>Summary</h2>
+        <p>${escapeHtml(review.summary)}</p>
+        <h2>Highlights</h2>
+        <ul class="highlights-list">
+          ${highlightsHtml}
+        </ul>
+        <h2>Issues</h2>
+        ${issuesHtml}
+      </div>
+    </section>`;
+}
 function generateReviewHtml(options) {
   const { metadata, title = "Demo Review" } = options;
   if (metadata.demos.length === 0) {
@@ -215,6 +748,9 @@ function generateReviewHtml(options) {
   }).join(`
             `);
   const metadataJson = JSON.stringify(metadata).replace(/<\//g, "<\\/");
+  const reviewHtml = metadata.review ? renderReviewSection(metadata.review) : "";
+  const hasReview = !!metadata.review;
+  const defaultTab = hasReview ? "summary" : "demos";
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -226,9 +762,40 @@ function generateReviewHtml(options) {
     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); }
+    .tab-bar { display: flex; gap: 0; background: #16213e; border-bottom: 2px solid #0f3460; padding: 0 2rem; }
+    .tab-btn { padding: 0.7rem 1.5rem; background: none; border: none; border-bottom: 3px solid transparent; color: #999; font-size: 0.95rem; cursor: pointer; font-family: inherit; transition: all 0.15s; margin-bottom: -2px; }
+    .tab-btn:hover { color: #e0e0e0; }
+    .tab-btn.active { color: #e94560; border-bottom-color: #e94560; }
+    .tab-panel { display: none; }
+    .tab-panel.active { display: block; }
+    .review-section { padding: 1.5rem 2rem; }
+    .verdict-banner { padding: 1rem 1.5rem; border-radius: 6px; font-size: 1rem; margin-bottom: 1.5rem; }
+    .verdict-banner.approve { background: #1b4332; border: 1px solid #2d6a4f; color: #95d5b2; }
+    .verdict-banner.request-changes { background: #4a1520; border: 1px solid #842029; color: #f5c6cb; }
+    .review-body { max-width: 900px; }
+    .review-body h2 { font-size: 1.1rem; color: #e94560; margin: 1.2rem 0 0.5rem; }
+    .review-body p { font-size: 0.95rem; line-height: 1.6; color: #ccc; }
+    .highlights-list { list-style: disc; padding-left: 1.5rem; margin-bottom: 0.5rem; }
+    .highlights-list li { font-size: 0.95rem; line-height: 1.5; color: #95d5b2; margin-bottom: 0.3rem; }
+    .issue { padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; border-radius: 4px; font-size: 0.9rem; line-height: 1.4; }
+    .issue.major { background: rgba(132, 32, 41, 0.3); border-left: 4px solid #dc3545; }
+    .issue.minor { background: rgba(255, 193, 7, 0.1); border-left: 4px solid #ffc107; }
+    .issue.nit { background: rgba(108, 117, 125, 0.2); border-left: 4px solid #6c757d; }
+    .severity-badge { display: inline-block; font-size: 0.7rem; font-weight: bold; padding: 0.15rem 0.4rem; border-radius: 3px; margin-right: 0.5rem; vertical-align: middle; }
+    .issue.major .severity-badge { background: #dc3545; color: #fff; }
+    .issue.minor .severity-badge { background: #ffc107; color: #000; }
+    .issue.nit .severity-badge { background: #6c757d; color: #fff; }
+    .no-issues { color: #95d5b2; font-style: italic; }
+    .demos-section { padding: 1rem 0; }
+    .review-layout { display: flex; height: 600px; }
     .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; }
+    .video-wrapper { position: relative; width: 100%; max-height: 100%; display: flex; flex-direction: column; }
+    .video-wrapper video { width: 100%; max-height: calc(100% - 36px); border-radius: 4px 4px 0 0; display: block; cursor: pointer; }
+    .video-controls { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #16213e; border-radius: 0 0 4px 4px; }
+    .video-controls button { background: none; border: none; color: #e0e0e0; cursor: pointer; font-size: 1rem; padding: 0; width: 20px; display: flex; align-items: center; justify-content: center; }
+    .video-controls button:hover { color: #e94560; }
+    .video-controls input[type="range"] { flex: 1; height: 4px; accent-color: #e94560; cursor: pointer; }
+    .video-controls .vc-time { font-size: 0.75rem; color: #999; white-space: nowrap; font-variant-numeric: tabular-nums; }
     .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; }
@@ -238,44 +805,109 @@ function generateReviewHtml(options) {
     #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; }
+    #steps-list { list-style: none; }
+    #steps-list li { margin-bottom: 0.3rem; }
+    #steps-list button { width: 100%; text-align: left; padding: 0.4rem 0.6rem; background: transparent; color: #53a8b6; border: none; border-left: 3px solid transparent; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
+    #steps-list button:hover { color: #e94560; }
+    #steps-list button.step-active { background: rgba(233, 69, 96, 0.15); color: #e94560; border-left-color: #e94560; }
     .timestamp { font-weight: bold; margin-right: 0.4rem; color: #e94560; }
+    .issue { position: relative; }
+    .feedback-add-issue { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: 1px solid #53a8b6; color: #53a8b6; border-radius: 4px; cursor: pointer; font-size: 0.85rem; padding: 0.1rem 0.45rem; line-height: 1; }
+    .feedback-add-issue:hover { background: #53a8b6; color: #1a1a2e; }
+    #feedback-selection-btn { display: none; position: absolute; z-index: 1000; padding: 0.35rem 0.7rem; background: #e94560; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.8rem; white-space: nowrap; }
+    .feedback-layout { display: flex; gap: 1.5rem; padding: 1.5rem 2rem; }
+    .feedback-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
+    .feedback-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
+    #feedback-list { list-style: none; padding: 0; }
+    #feedback-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: #16213e; border: 1px solid #0f3460; border-radius: 4px; margin-bottom: 0.4rem; font-size: 0.9rem; }
+    #feedback-list li span { flex: 1; }
+    .feedback-remove { background: none; border: none; color: #dc3545; cursor: pointer; font-size: 0.9rem; padding: 0 0.3rem; }
+    .feedback-remove:hover { color: #ff6b7a; }
+    #feedback-general { width: 100%; min-height: 100px; background: #16213e; color: #e0e0e0; border: 1px solid #0f3460; border-radius: 4px; padding: 0.6rem; font-family: inherit; font-size: 0.9rem; resize: vertical; }
+    #feedback-preview { background: #0f0f23; color: #ccc; border: 1px solid #0f3460; border-radius: 4px; padding: 1rem; white-space: pre-wrap; font-size: 0.85rem; line-height: 1.5; flex: 1; min-height: 200px; overflow-y: auto; }
+    #feedback-copy { align-self: flex-end; padding: 0.5rem 1rem; background: none; border: 1px solid #53a8b6; color: #53a8b6; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
+    #feedback-copy:hover { background: #53a8b6; color: #1a1a2e; }
   </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">
+  <nav class="tab-bar">
+    ${hasReview ? `<button class="tab-btn${defaultTab === "summary" ? " active" : ""}" data-tab="summary">Summary</button>` : ""}
+    <button class="tab-btn${defaultTab === "demos" ? " active" : ""}" data-tab="demos">Demos</button>
+    ${hasReview ? `<button class="tab-btn" data-tab="feedback">Feedback</button>` : ""}
+  </nav>
+  <main>
+    ${hasReview ? `<div id="tab-summary" class="tab-panel${defaultTab === "summary" ? " active" : ""}">
+    ${reviewHtml}
+    </div>` : ""}
+    <div id="tab-demos" class="tab-panel${defaultTab === "demos" ? " active" : ""}">
+    <section class="demos-section">
+      <div class="review-layout">
+        <div class="video-panel">
+          <div class="video-wrapper">
+            <video id="review-video" src="${escapeAttr(firstDemo.file)}"></video>
+            <div class="video-controls">
+              <button id="vc-play" aria-label="Play">&#9654;</button>
+              <input id="vc-seek" type="range" min="0" max="100" value="0" step="0.1">
+              <span class="vc-time" id="vc-time">0:00 / 0:00</span>
+            </div>
+          </div>
+        </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>
+            </ul>
+          </section>
+          <section>
+            <h2>Summary</h2>
+            <p id="summary-text"></p>
+          </section>
+          <section id="steps-section">
+            <h2>Steps</h2>
+            <ul id="steps-list"></ul>
+          </section>
+        </div>
+      </div>
+    </section>
     </div>
+    ${hasReview ? `<div id="tab-feedback" class="tab-panel">
+      <div class="feedback-layout">
+        <div class="feedback-left">
+          <h2>Feedback Items</h2>
+          <ul id="feedback-list"></ul>
+          <h2>General Feedback</h2>
+          <textarea id="feedback-general" placeholder="Add general feedback here..."></textarea>
+        </div>
+        <div class="feedback-right">
+          <h2>Preview</h2>
+          <pre id="feedback-preview"></pre>
+          <button id="feedback-copy">Copy to clipboard</button>
+        </div>
+      </div>
+    </div>` : ""}
   </main>
+  ${hasReview ? `<button id="feedback-selection-btn">Add to feedback</button>` : ""}
   <script>
     (function() {
+      // Tab switching
+      var tabBtns = document.querySelectorAll(".tab-btn");
+      var tabPanels = document.querySelectorAll(".tab-panel");
+      tabBtns.forEach(function(btn) {
+        btn.addEventListener("click", function() {
+          var target = btn.getAttribute("data-tab");
+          tabBtns.forEach(function(b) { b.classList.toggle("active", b === btn); });
+          tabPanels.forEach(function(p) { p.classList.toggle("active", p.id === "tab-" + target); });
+        });
+      });
+
       var metadata = ${metadataJson};
       var video = document.getElementById("review-video");
       var summaryText = document.getElementById("summary-text");
-      var annotationsList = document.getElementById("annotations-list");
+      var stepsList = document.getElementById("steps-list");
       var demoButtons = document.querySelectorAll("#demo-list button");
 
       function esc(s) {
@@ -300,13 +932,13 @@ function generateReviewHtml(options) {
           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>';
+        var stepsHtml = "";
+        demo.steps.forEach(function(step) {
+          stepsHtml += '<li><button data-time="' + step.timestampSeconds + '">' +
+            '<span class="timestamp">' + esc(formatTime(step.timestampSeconds)) + '</span>' +
+            esc(step.text) + '</button></li>';
         });
-        annotationsList.innerHTML = html;
+        stepsList.innerHTML = stepsHtml;
       }
 
       demoButtons.forEach(function(btn) {
@@ -315,7 +947,7 @@ function generateReviewHtml(options) {
         });
       });
 
-      annotationsList.addEventListener("click", function(e) {
+      stepsList.addEventListener("click", function(e) {
         var btn = e.target.closest("button[data-time]");
         if (btn) {
           video.currentTime = parseFloat(btn.getAttribute("data-time"));
@@ -323,19 +955,235 @@ function generateReviewHtml(options) {
         }
       });
 
+      video.addEventListener("timeupdate", function() {
+        var buttons = document.querySelectorAll("#steps-list button[data-time]");
+        var ct = video.currentTime;
+        var activeIdx = -1;
+        buttons.forEach(function(btn, i) {
+          if (parseFloat(btn.getAttribute("data-time")) <= ct) activeIdx = i;
+          btn.classList.remove("step-active");
+        });
+        if (activeIdx >= 0) buttons[activeIdx].classList.add("step-active");
+      });
+
       selectDemo(0);
+
+      // Custom video controls
+      var playBtn = document.getElementById("vc-play");
+      var seekBar = document.getElementById("vc-seek");
+      var timeDisplay = document.getElementById("vc-time");
+      var seeking = false;
+
+      function fmtTime(sec) {
+        var m = Math.floor(sec / 60);
+        var s = Math.floor(sec % 60);
+        return m + ":" + (s < 10 ? "0" : "") + s;
+      }
+
+      function updateTime() {
+        var cur = video.currentTime || 0;
+        var dur = video.duration || 0;
+        timeDisplay.textContent = fmtTime(cur) + " / " + fmtTime(dur);
+        if (!seeking && dur) seekBar.value = (cur / dur) * 100;
+      }
+
+      function updatePlayBtn() {
+        playBtn.innerHTML = video.paused ? "&#9654;" : "&#9646;&#9646;";
+      }
+
+      playBtn.addEventListener("click", function() {
+        video.paused ? video.play() : video.pause();
+      });
+      video.addEventListener("click", function() {
+        video.paused ? video.play() : video.pause();
+      });
+      video.addEventListener("play", updatePlayBtn);
+      video.addEventListener("pause", updatePlayBtn);
+      video.addEventListener("ended", updatePlayBtn);
+      video.addEventListener("timeupdate", updateTime);
+      video.addEventListener("loadedmetadata", updateTime);
+
+      seekBar.addEventListener("input", function() {
+        seeking = true;
+        if (video.duration) {
+          video.currentTime = (seekBar.value / 100) * video.duration;
+        }
+      });
+      seekBar.addEventListener("change", function() { seeking = false; });
+
+      // Feedback tab logic
+      if (document.getElementById("tab-feedback")) {
+        var feedbackItems = [];
+        var feedbackList = document.getElementById("feedback-list");
+        var feedbackGeneral = document.getElementById("feedback-general");
+        var feedbackPreview = document.getElementById("feedback-preview");
+        var feedbackCopy = document.getElementById("feedback-copy");
+        var selectionBtn = document.getElementById("feedback-selection-btn");
+
+        function addFeedbackItem(text) {
+          var trimmed = text.trim();
+          if (!trimmed) return;
+          for (var i = 0; i < feedbackItems.length; i++) {
+            if (feedbackItems[i] === trimmed) return;
+          }
+          feedbackItems.push(trimmed);
+          renderFeedback();
+        }
+
+        function removeFeedbackItem(index) {
+          feedbackItems.splice(index, 1);
+          renderFeedback();
+        }
+
+        function renderFeedback() {
+          var html = "";
+          feedbackItems.forEach(function(item, i) {
+            html += '<li><span>' + esc(item) + '</span><button class="feedback-remove" data-index="' + i + '">X</button></li>';
+          });
+          feedbackList.innerHTML = html;
+          updatePreview();
+        }
+
+        function updatePreview() {
+          var lines = "";
+          feedbackItems.forEach(function(item, i) {
+            lines += (i + 1) + ". Address: " + item + "\\n";
+          });
+          var general = feedbackGeneral.value.trim();
+          if (general) {
+            lines += "\\nGeneral feedback:\\n" + general;
+          }
+          feedbackPreview.textContent = lines;
+        }
+
+        // Issue "+" buttons
+        var summaryTab = document.getElementById("tab-summary");
+        if (summaryTab) {
+          summaryTab.addEventListener("click", function(e) {
+            var btn = e.target.closest(".feedback-add-issue");
+            if (btn) {
+              addFeedbackItem(btn.getAttribute("data-issue"));
+            }
+          });
+        }
+
+        // Text selection floating button
+        var selectionTimeout;
+        document.addEventListener("mouseup", function(e) {
+          clearTimeout(selectionTimeout);
+          selectionTimeout = setTimeout(function() {
+            var sel = window.getSelection();
+            var text = sel ? sel.toString().trim() : "";
+            if (!text) return;
+            var anchor = sel.anchorNode;
+            var inSummary = false;
+            var node = anchor;
+            while (node) {
+              if (node.id === "tab-summary") { inSummary = true; break; }
+              node = node.parentNode;
+            }
+            if (!inSummary) return;
+            selectionBtn.style.display = "block";
+            selectionBtn.style.left = e.pageX + "px";
+            selectionBtn.style.top = (e.pageY - 35) + "px";
+            selectionBtn._selectedText = text;
+          }, 100);
+        });
+
+        selectionBtn.addEventListener("click", function() {
+          if (selectionBtn._selectedText) {
+            addFeedbackItem(selectionBtn._selectedText);
+          }
+          selectionBtn.style.display = "none";
+          window.getSelection().removeAllRanges();
+        });
+
+        document.addEventListener("mousedown", function(e) {
+          if (e.target !== selectionBtn) {
+            selectionBtn.style.display = "none";
+          }
+        });
+
+        // Remove buttons
+        feedbackList.addEventListener("click", function(e) {
+          var btn = e.target.closest(".feedback-remove");
+          if (btn) {
+            removeFeedbackItem(parseInt(btn.getAttribute("data-index"), 10));
+          }
+        });
+
+        // Textarea input
+        feedbackGeneral.addEventListener("input", updatePreview);
+
+        // Copy button
+        feedbackCopy.addEventListener("click", function() {
+          var text = feedbackPreview.textContent;
+          function onCopied() {
+            feedbackCopy.textContent = "Copied!";
+            setTimeout(function() { feedbackCopy.textContent = "Copy to clipboard"; }, 1500);
+          }
+          if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(text).then(onCopied, onCopied);
+          } else {
+            onCopied();
+          }
+        });
+
+        renderFeedback();
+      }
     })();
   </script>
 </body>
 </html>`;
 }
+// src/recorder.ts
+class DemoRecorder {
+  steps = [];
+  startTime;
+  showCommentaryFn;
+  testStepFn;
+  constructor(options) {
+    this.startTime = Date.now();
+    this.showCommentaryFn = options?.showCommentary ?? showCommentary;
+    this.testStepFn = options?.testStep;
+  }
+  async step(page, text, options) {
+    const body = async () => {
+      await this.showCommentaryFn(page, {
+        selector: options.selector,
+        text
+      });
+      const timestampSeconds = Math.round((Date.now() - this.startTime) / 100) / 10;
+      this.steps.push({ text, timestampSeconds });
+    };
+    if (this.testStepFn) {
+      await this.testStepFn(text, body);
+    } else {
+      await body();
+    }
+  }
+  getSteps() {
+    return [...this.steps];
+  }
+  async save(outputDir) {
+    const { join: join2 } = await Promise.resolve().then(() => (init_path(), exports_path));
+    const { mkdirSync, writeFileSync } = await import("node:fs");
+    mkdirSync(outputDir, { recursive: true });
+    const filePath = join2(outputDir, "demo-steps.json");
+    writeFileSync(filePath, JSON.stringify(this.steps, null, 2) + `
+`);
+  }
+}
 export {
   showCommentary,
-  parseReviewMetadata,
+  parseLlmResponse,
   invokeClaude,
   hideCommentary,
+  getRepoContext,
   generateReviewHtml,
-  buildReviewPrompt
+  extractJson,
+  buildReviewPrompt,
+  DemoRecorder
 };
 
-//# debugId=C244AE0F9893F9BF64756E2164756E21
+//# debugId=160BDBF1FB742F2264756E2164756E21