@agent-scope/cli 1.7.0 → 1.9.0

package/dist/cli.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 
 // src/program.ts
-import { readFileSync as readFileSync4 } from "fs";
+import { readFileSync as readFileSync6 } from "fs";
 import { generateTest, loadTrace } from "@agent-scope/playwright";
-import { Command as Command4 } from "commander";
+import { Command as Command6 } from "commander";
 
 // src/browser.ts
 import { writeFileSync } from "fs";
@@ -50,11 +50,485 @@ function writeReportToFile(report, outputPath, pretty) {
   writeFileSync(outputPath, json, "utf-8");
 }
 
+// src/init/index.ts
+import { appendFileSync, existsSync as existsSync2, mkdirSync, readFileSync as readFileSync2, writeFileSync as writeFileSync2 } from "fs";
+import { join as join2 } from "path";
+import * as readline from "readline";
+
+// src/init/detect.ts
+import { existsSync, readdirSync, readFileSync } from "fs";
+import { join } from "path";
+function hasConfigFile(dir, stem) {
+  if (!existsSync(dir)) return false;
+  try {
+    const entries = readdirSync(dir);
+    return entries.some((f) => f === stem || f.startsWith(`${stem}.`));
+  } catch {
+    return false;
+  }
+}
+function readSafe(path) {
+  try {
+    return readFileSync(path, "utf-8");
+  } catch {
+    return null;
+  }
+}
+function detectFramework(rootDir, packageDeps) {
+  if (hasConfigFile(rootDir, "next.config")) return "next";
+  if (hasConfigFile(rootDir, "vite.config")) return "vite";
+  if (hasConfigFile(rootDir, "remix.config")) return "remix";
+  if ("react-scripts" in packageDeps) return "cra";
+  return "unknown";
+}
+function detectPackageManager(rootDir) {
+  if (existsSync(join(rootDir, "bun.lock"))) return "bun";
+  if (existsSync(join(rootDir, "yarn.lock"))) return "yarn";
+  if (existsSync(join(rootDir, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync(join(rootDir, "package-lock.json"))) return "npm";
+  return "npm";
+}
+function detectTypeScript(rootDir) {
+  const candidate = join(rootDir, "tsconfig.json");
+  if (existsSync(candidate)) {
+    return { typescript: true, tsconfigPath: candidate };
+  }
+  return { typescript: false, tsconfigPath: null };
+}
+var COMPONENT_DIRS = ["src/components", "src/app", "src/pages", "src/ui", "src/features", "src"];
+var COMPONENT_EXTS = [".tsx", ".jsx"];
+function detectComponentPatterns(rootDir, typescript) {
+  const patterns = [];
+  const ext = typescript ? "tsx" : "jsx";
+  const altExt = typescript ? "jsx" : "jsx";
+  for (const dir of COMPONENT_DIRS) {
+    const absDir = join(rootDir, dir);
+    if (!existsSync(absDir)) continue;
+    let hasComponents = false;
+    try {
+      const entries = readdirSync(absDir, { withFileTypes: true });
+      hasComponents = entries.some(
+        (e) => e.isFile() && COMPONENT_EXTS.some((x) => e.name.endsWith(x))
+      );
+      if (!hasComponents) {
+        hasComponents = entries.some(
+          (e) => e.isDirectory() && (() => {
+            try {
+              return readdirSync(join(absDir, e.name)).some(
+                (f) => COMPONENT_EXTS.some((x) => f.endsWith(x))
+              );
+            } catch {
+              return false;
+            }
+          })()
+        );
+      }
+    } catch {
+      continue;
+    }
+    if (hasComponents) {
+      patterns.push(`${dir}/**/*.${ext}`);
+      if (altExt !== ext) {
+        patterns.push(`${dir}/**/*.${altExt}`);
+      }
+    }
+  }
+  const unique = [...new Set(patterns)];
+  if (unique.length === 0) {
+    return [`**/*.${ext}`];
+  }
+  return unique;
+}
+var TAILWIND_STEMS = ["tailwind.config"];
+var CSS_EXTS = [".css", ".scss", ".sass", ".less"];
+var THEME_SUFFIXES = [".theme.ts", ".theme.js", ".theme.tsx"];
+var CSS_CUSTOM_PROPS_RE = /:root\s*\{[^}]*--[a-zA-Z]/;
+function detectTokenSources(rootDir) {
+  const sources = [];
+  for (const stem of TAILWIND_STEMS) {
+    if (hasConfigFile(rootDir, stem)) {
+      try {
+        const entries = readdirSync(rootDir);
+        const match = entries.find((f) => f === stem || f.startsWith(`${stem}.`));
+        if (match) {
+          sources.push({ kind: "tailwind-config", path: join(rootDir, match) });
+        }
+      } catch {
+      }
+    }
+  }
+  const srcDir = join(rootDir, "src");
+  const dirsToScan = existsSync(srcDir) ? [srcDir] : [];
+  for (const scanDir of dirsToScan) {
+    try {
+      const entries = readdirSync(scanDir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (entry.isFile() && CSS_EXTS.some((x) => entry.name.endsWith(x))) {
+          const filePath = join(scanDir, entry.name);
+          const content = readSafe(filePath);
+          if (content !== null && CSS_CUSTOM_PROPS_RE.test(content)) {
+            sources.push({ kind: "css-custom-properties", path: filePath });
+          }
+        }
+      }
+    } catch {
+    }
+  }
+  if (existsSync(srcDir)) {
+    try {
+      const entries = readdirSync(srcDir);
+      for (const entry of entries) {
+        if (THEME_SUFFIXES.some((s) => entry.endsWith(s))) {
+          sources.push({ kind: "theme-file", path: join(srcDir, entry) });
+        }
+      }
+    } catch {
+    }
+  }
+  return sources;
+}
+function detectProject(rootDir) {
+  const pkgPath = join(rootDir, "package.json");
+  let packageDeps = {};
+  const pkgContent = readSafe(pkgPath);
+  if (pkgContent !== null) {
+    try {
+      const pkg = JSON.parse(pkgContent);
+      packageDeps = {
+        ...pkg.dependencies,
+        ...pkg.devDependencies
+      };
+    } catch {
+    }
+  }
+  const framework = detectFramework(rootDir, packageDeps);
+  const { typescript, tsconfigPath } = detectTypeScript(rootDir);
+  const packageManager = detectPackageManager(rootDir);
+  const componentPatterns = detectComponentPatterns(rootDir, typescript);
+  const tokenSources = detectTokenSources(rootDir);
+  return {
+    framework,
+    typescript,
+    tsconfigPath,
+    componentPatterns,
+    tokenSources,
+    packageManager
+  };
+}
+
+// src/init/index.ts
+import { Command } from "commander";
+function buildDefaultConfig(detected, tokenFile, outputDir) {
+  const include = detected.componentPatterns.length > 0 ? detected.componentPatterns : ["src/**/*.tsx"];
+  return {
+    components: {
+      include,
+      exclude: ["**/*.test.tsx", "**/*.stories.tsx"],
+      wrappers: { providers: [], globalCSS: [] }
+    },
+    render: {
+      viewport: { default: { width: 1280, height: 800 } },
+      theme: "light",
+      warmBrowser: true
+    },
+    tokens: {
+      file: tokenFile,
+      compliance: { threshold: 90 }
+    },
+    output: {
+      dir: outputDir,
+      sprites: { format: "png", cellPadding: 8, labelAxes: true },
+      json: { pretty: true }
+    },
+    ci: {
+      complianceThreshold: 90,
+      failOnA11yViolations: true,
+      failOnConsoleErrors: false,
+      baselinePath: `${outputDir}baseline/`
+    }
+  };
+}
+function createRL() {
+  return readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+}
+async function ask(rl, question) {
+  return new Promise((resolve6) => {
+    rl.question(question, (answer) => {
+      resolve6(answer.trim());
+    });
+  });
+}
+async function askWithDefault(rl, label, defaultValue) {
+  const answer = await ask(rl, `  ${label} [${defaultValue}]: `);
+  return answer.length > 0 ? answer : defaultValue;
+}
+function ensureGitignoreEntry(rootDir, entry) {
+  const gitignorePath = join2(rootDir, ".gitignore");
+  if (existsSync2(gitignorePath)) {
+    const content = readFileSync2(gitignorePath, "utf-8");
+    const normalised = entry.replace(/\/$/, "");
+    const lines = content.split("\n").map((l) => l.trim());
+    if (lines.includes(entry) || lines.includes(normalised)) {
+      return;
+    }
+    const suffix = content.endsWith("\n") ? "" : "\n";
+    appendFileSync(gitignorePath, `${suffix}${entry}
+`);
+  } else {
+    writeFileSync2(gitignorePath, `${entry}
+`);
+  }
+}
+function scaffoldConfig(rootDir, config) {
+  const path = join2(rootDir, "reactscope.config.json");
+  writeFileSync2(path, `${JSON.stringify(config, null, 2)}
+`);
+  return path;
+}
+function scaffoldTokenFile(rootDir, tokenFile) {
+  const path = join2(rootDir, tokenFile);
+  if (!existsSync2(path)) {
+    const stub = {
+      $schema: "https://raw.githubusercontent.com/FlatFilers/Scope/main/packages/tokens/schema.json",
+      tokens: {}
+    };
+    writeFileSync2(path, `${JSON.stringify(stub, null, 2)}
+`);
+  }
+  return path;
+}
+function scaffoldOutputDir(rootDir, outputDir) {
+  const dirPath = join2(rootDir, outputDir);
+  mkdirSync(dirPath, { recursive: true });
+  const keepPath = join2(dirPath, ".gitkeep");
+  if (!existsSync2(keepPath)) {
+    writeFileSync2(keepPath, "");
+  }
+  return dirPath;
+}
+async function runInit(options) {
+  const rootDir = options.cwd ?? process.cwd();
+  const configPath = join2(rootDir, "reactscope.config.json");
+  const created = [];
+  if (existsSync2(configPath) && !options.force) {
+    const msg = "reactscope.config.json already exists. Run with --force to overwrite.";
+    process.stderr.write(`\u26A0\uFE0F  ${msg}
+`);
+    return { success: false, message: msg, created: [], skipped: true };
+  }
+  const detected = detectProject(rootDir);
+  const defaultTokenFile = "reactscope.tokens.json";
+  const defaultOutputDir = ".reactscope/";
+  let config = buildDefaultConfig(detected, defaultTokenFile, defaultOutputDir);
+  if (options.yes) {
+    process.stdout.write("\n\u{1F50D}  Detected project settings:\n");
+    process.stdout.write(`   Framework      : ${detected.framework}
+`);
+    process.stdout.write(`   TypeScript     : ${detected.typescript}
+`);
+    process.stdout.write(`   Include globs  : ${config.components.include.join(", ")}
+`);
+    process.stdout.write(`   Token file     : ${config.tokens.file}
+`);
+    process.stdout.write(`   Output dir     : ${config.output.dir}
+
+`);
+  } else {
+    const rl = createRL();
+    process.stdout.write("\n\u{1F680}  scope init \u2014 project configuration\n");
+    process.stdout.write("   Press Enter to accept the detected value shown in brackets.\n\n");
+    try {
+      process.stdout.write(`   Detected framework: ${detected.framework}
+`);
+      const includeRaw = await askWithDefault(
+        rl,
+        "Component include patterns (comma-separated)",
+        config.components.include.join(", ")
+      );
+      config.components.include = includeRaw.split(",").map((s) => s.trim()).filter(Boolean);
+      const excludeRaw = await askWithDefault(
+        rl,
+        "Component exclude patterns (comma-separated)",
+        config.components.exclude.join(", ")
+      );
+      config.components.exclude = excludeRaw.split(",").map((s) => s.trim()).filter(Boolean);
+      const tokenFile = await askWithDefault(rl, "Token file location", config.tokens.file);
+      config.tokens.file = tokenFile;
+      config.ci.baselinePath = `${config.output.dir}baseline/`;
+      const outputDir = await askWithDefault(rl, "Output directory", config.output.dir);
+      config.output.dir = outputDir.endsWith("/") ? outputDir : `${outputDir}/`;
+      config.ci.baselinePath = `${config.output.dir}baseline/`;
+      config = buildDefaultConfig(detected, config.tokens.file, config.output.dir);
+      config.components.include = includeRaw.split(",").map((s) => s.trim()).filter(Boolean);
+      config.components.exclude = excludeRaw.split(",").map((s) => s.trim()).filter(Boolean);
+    } finally {
+      rl.close();
+    }
+    process.stdout.write("\n");
+  }
+  const cfgPath = scaffoldConfig(rootDir, config);
+  created.push(cfgPath);
+  const tokPath = scaffoldTokenFile(rootDir, config.tokens.file);
+  created.push(tokPath);
+  const outDirPath = scaffoldOutputDir(rootDir, config.output.dir);
+  created.push(outDirPath);
+  ensureGitignoreEntry(rootDir, config.output.dir);
+  process.stdout.write("\u2705  Scope project initialised!\n\n");
+  process.stdout.write("   Created files:\n");
+  for (const p of created) {
+    process.stdout.write(`     ${p}
+`);
+  }
+  process.stdout.write("\n   Next steps: run `scope manifest` to scan your components.\n\n");
+  return {
+    success: true,
+    message: "Project initialised successfully.",
+    created,
+    skipped: false
+  };
+}
+function createInitCommand() {
+  return new Command("init").description("Initialise a Scope project \u2014 scaffold reactscope.config.json and friends").option("-y, --yes", "Accept all detected defaults without prompting", false).option("--force", "Overwrite existing reactscope.config.json if present", false).action(async (opts) => {
+    try {
+      const result = await runInit({ yes: opts.yes, force: opts.force });
+      if (!result.success && !result.skipped) {
+        process.exit(1);
+      }
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
+
+// src/instrument/renders.ts
+import { resolve as resolve2 } from "path";
+import { BrowserPool } from "@agent-scope/render";
+import { Command as Command3 } from "commander";
+
+// src/component-bundler.ts
+import { dirname } from "path";
+import * as esbuild from "esbuild";
+async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss) {
+  const bundledScript = await bundleComponentToIIFE(filePath, componentName, props);
+  return wrapInHtml(bundledScript, viewportWidth, projectCss);
+}
+async function bundleComponentToIIFE(filePath, componentName, props) {
+  const propsJson = JSON.stringify(props).replace(/<\/script>/gi, "<\\/script>");
+  const wrapperCode = (
+    /* ts */
+    `
+import * as __scopeMod from ${JSON.stringify(filePath)};
+import { createRoot } from "react-dom/client";
+import { createElement } from "react";
+
+(function scopeRenderHarness() {
+  var Component =
+    __scopeMod["default"] ||
+    __scopeMod[${JSON.stringify(componentName)}] ||
+    (Object.values(__scopeMod).find(
+      function(v) { return typeof v === "function" && /^[A-Z]/.test(v.name || ""); }
+    ));
+
+  if (!Component) {
+    window.__SCOPE_RENDER_ERROR__ =
+      "No renderable component found. Checked: default, " +
+      ${JSON.stringify(componentName)} + ", and PascalCase named exports. " +
+      "Available exports: " + Object.keys(__scopeMod).join(", ");
+    window.__SCOPE_RENDER_COMPLETE__ = true;
+    return;
+  }
+
+  try {
+    var props = ${propsJson};
+    var rootEl = document.getElementById("scope-root");
+    if (!rootEl) {
+      window.__SCOPE_RENDER_ERROR__ = "#scope-root element not found";
+      window.__SCOPE_RENDER_COMPLETE__ = true;
+      return;
+    }
+    createRoot(rootEl).render(createElement(Component, props));
+    // Use requestAnimationFrame to let React flush the render
+    requestAnimationFrame(function() {
+      window.__SCOPE_RENDER_COMPLETE__ = true;
+    });
+  } catch (err) {
+    window.__SCOPE_RENDER_ERROR__ = err instanceof Error ? err.message : String(err);
+    window.__SCOPE_RENDER_COMPLETE__ = true;
+  }
+})();
+`
+  );
+  const result = await esbuild.build({
+    stdin: {
+      contents: wrapperCode,
+      // Resolve relative imports (within the component's dir)
+      resolveDir: dirname(filePath),
+      loader: "tsx",
+      sourcefile: "__scope_harness__.tsx"
+    },
+    bundle: true,
+    format: "iife",
+    write: false,
+    platform: "browser",
+    jsx: "automatic",
+    jsxImportSource: "react",
+    target: "es2020",
+    // Bundle everything — no externals
+    external: [],
+    define: {
+      "process.env.NODE_ENV": '"development"',
+      global: "globalThis"
+    },
+    logLevel: "silent",
+    // Suppress "React must be in scope" warnings from old JSX (we use automatic)
+    banner: {
+      js: "/* @agent-scope/cli component harness */"
+    }
+  });
+  if (result.errors.length > 0) {
+    const msg = result.errors.map((e) => `${e.text}${e.location ? ` (${e.location.file}:${e.location.line})` : ""}`).join("\n");
+    throw new Error(`esbuild failed to bundle component:
+${msg}`);
+  }
+  const outputFile = result.outputFiles?.[0];
+  if (outputFile === void 0 || outputFile.text.length === 0) {
+    throw new Error("esbuild produced no output");
+  }
+  return outputFile.text;
+}
+function wrapInHtml(bundledScript, viewportWidth, projectCss) {
+  const projectStyleBlock = projectCss != null && projectCss.length > 0 ? `<style id="scope-project-css">
+${projectCss.replace(/<\/style>/gi, "<\\/style>")}
+</style>` : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=${viewportWidth}, initial-scale=1.0" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    #scope-root { display: inline-block; min-width: 1px; min-height: 1px; }
+  </style>
+  ${projectStyleBlock}
+</head>
+<body>
+  <div id="scope-root" data-reactscope-root></div>
+  <script>${bundledScript}</script>
+</body>
+</html>`;
+}
+
 // src/manifest-commands.ts
-import { existsSync, mkdirSync, readFileSync, writeFileSync as writeFileSync2 } from "fs";
+import { existsSync as existsSync3, mkdirSync as mkdirSync2, readFileSync as readFileSync3, writeFileSync as writeFileSync3 } from "fs";
 import { resolve } from "path";
 import { generateManifest } from "@agent-scope/manifest";
-import { Command } from "commander";
+import { Command as Command2 } from "commander";
 
 // src/manifest-formatter.ts
 function isTTY() {
@@ -155,11 +629,11 @@ function matchGlob(pattern, value) {
 var MANIFEST_PATH = ".reactscope/manifest.json";
 function loadManifest(manifestPath = MANIFEST_PATH) {
   const absPath = resolve(process.cwd(), manifestPath);
-  if (!existsSync(absPath)) {
+  if (!existsSync3(absPath)) {
     throw new Error(`Manifest not found at ${absPath}.
 Run \`scope manifest generate\` first.`);
   }
-  const raw = readFileSync(absPath, "utf-8");
+  const raw = readFileSync3(absPath, "utf-8");
   return JSON.parse(raw);
 }
 function resolveFormat(formatFlag) {
@@ -278,178 +752,49 @@ function registerQuery(manifestCmd) {
   );
 }
 function registerGenerate(manifestCmd) {
-  manifestCmd.command("generate").description(
-    "Generate the component manifest from source and write to .reactscope/manifest.json"
-  ).option("--root <path>", "Project root directory (default: cwd)").option("--output <path>", "Output path for manifest.json", MANIFEST_PATH).option("--include <globs>", "Comma-separated glob patterns to include").option("--exclude <globs>", "Comma-separated glob patterns to exclude").action(async (opts) => {
-    try {
-      const rootDir = resolve(process.cwd(), opts.root ?? ".");
-      const outputPath = resolve(process.cwd(), opts.output);
-      const include = opts.include?.split(",").map((s) => s.trim());
-      const exclude = opts.exclude?.split(",").map((s) => s.trim());
-      process.stderr.write(`Scanning ${rootDir} for React components...
-`);
-      const manifest = await generateManifest({
-        rootDir,
-        ...include !== void 0 && { include },
-        ...exclude !== void 0 && { exclude }
-      });
-      const componentCount = Object.keys(manifest.components).length;
-      process.stderr.write(`Found ${componentCount} components.
-`);
-      const outputDir = outputPath.replace(/\/[^/]+$/, "");
-      if (!existsSync(outputDir)) {
-        mkdirSync(outputDir, { recursive: true });
-      }
-      writeFileSync2(outputPath, JSON.stringify(manifest, null, 2), "utf-8");
-      process.stderr.write(`Manifest written to ${outputPath}
-`);
-      process.stdout.write(`${outputPath}
-`);
-    } catch (err) {
-      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
-`);
-      process.exit(1);
-    }
-  });
-}
-function createManifestCommand() {
-  const manifestCmd = new Command("manifest").description(
-    "Query and explore the component manifest"
-  );
-  registerList(manifestCmd);
-  registerGet(manifestCmd);
-  registerQuery(manifestCmd);
-  registerGenerate(manifestCmd);
-  return manifestCmd;
-}
-
-// src/render-commands.ts
-import { mkdirSync as mkdirSync2, writeFileSync as writeFileSync3 } from "fs";
-import { resolve as resolve3 } from "path";
-import {
-  ALL_CONTEXT_IDS,
-  ALL_STRESS_IDS,
-  BrowserPool,
-  contextAxis,
-  RenderMatrix,
-  SatoriRenderer,
-  safeRender,
-  stressAxis
-} from "@agent-scope/render";
-import { Command as Command2 } from "commander";
-
-// src/component-bundler.ts
-import { dirname } from "path";
-import * as esbuild from "esbuild";
-async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss) {
-  const bundledScript = await bundleComponentToIIFE(filePath, componentName, props);
-  return wrapInHtml(bundledScript, viewportWidth, projectCss);
-}
-async function bundleComponentToIIFE(filePath, componentName, props) {
-  const propsJson = JSON.stringify(props).replace(/<\/script>/gi, "<\\/script>");
-  const wrapperCode = (
-    /* ts */
-    `
-import * as __scopeMod from ${JSON.stringify(filePath)};
-import { createRoot } from "react-dom/client";
-import { createElement } from "react";
-
-(function scopeRenderHarness() {
-  var Component =
-    __scopeMod["default"] ||
-    __scopeMod[${JSON.stringify(componentName)}] ||
-    (Object.values(__scopeMod).find(
-      function(v) { return typeof v === "function" && /^[A-Z]/.test(v.name || ""); }
-    ));
-
-  if (!Component) {
-    window.__SCOPE_RENDER_ERROR__ =
-      "No renderable component found. Checked: default, " +
-      ${JSON.stringify(componentName)} + ", and PascalCase named exports. " +
-      "Available exports: " + Object.keys(__scopeMod).join(", ");
-    window.__SCOPE_RENDER_COMPLETE__ = true;
-    return;
-  }
-
-  try {
-    var props = ${propsJson};
-    var rootEl = document.getElementById("scope-root");
-    if (!rootEl) {
-      window.__SCOPE_RENDER_ERROR__ = "#scope-root element not found";
-      window.__SCOPE_RENDER_COMPLETE__ = true;
-      return;
-    }
-    createRoot(rootEl).render(createElement(Component, props));
-    // Use requestAnimationFrame to let React flush the render
-    requestAnimationFrame(function() {
-      window.__SCOPE_RENDER_COMPLETE__ = true;
-    });
-  } catch (err) {
-    window.__SCOPE_RENDER_ERROR__ = err instanceof Error ? err.message : String(err);
-    window.__SCOPE_RENDER_COMPLETE__ = true;
-  }
-})();
-`
-  );
-  const result = await esbuild.build({
-    stdin: {
-      contents: wrapperCode,
-      // Resolve relative imports (within the component's dir)
-      resolveDir: dirname(filePath),
-      loader: "tsx",
-      sourcefile: "__scope_harness__.tsx"
-    },
-    bundle: true,
-    format: "iife",
-    write: false,
-    platform: "browser",
-    jsx: "automatic",
-    jsxImportSource: "react",
-    target: "es2020",
-    // Bundle everything — no externals
-    external: [],
-    define: {
-      "process.env.NODE_ENV": '"development"',
-      global: "globalThis"
-    },
-    logLevel: "silent",
-    // Suppress "React must be in scope" warnings from old JSX (we use automatic)
-    banner: {
-      js: "/* @agent-scope/cli component harness */"
+  manifestCmd.command("generate").description(
+    "Generate the component manifest from source and write to .reactscope/manifest.json"
+  ).option("--root <path>", "Project root directory (default: cwd)").option("--output <path>", "Output path for manifest.json", MANIFEST_PATH).option("--include <globs>", "Comma-separated glob patterns to include").option("--exclude <globs>", "Comma-separated glob patterns to exclude").action(async (opts) => {
+    try {
+      const rootDir = resolve(process.cwd(), opts.root ?? ".");
+      const outputPath = resolve(process.cwd(), opts.output);
+      const include = opts.include?.split(",").map((s) => s.trim());
+      const exclude = opts.exclude?.split(",").map((s) => s.trim());
+      process.stderr.write(`Scanning ${rootDir} for React components...
+`);
+      const manifest = await generateManifest({
+        rootDir,
+        ...include !== void 0 && { include },
+        ...exclude !== void 0 && { exclude }
+      });
+      const componentCount = Object.keys(manifest.components).length;
+      process.stderr.write(`Found ${componentCount} components.
+`);
+      const outputDir = outputPath.replace(/\/[^/]+$/, "");
+      if (!existsSync3(outputDir)) {
+        mkdirSync2(outputDir, { recursive: true });
+      }
+      writeFileSync3(outputPath, JSON.stringify(manifest, null, 2), "utf-8");
+      process.stderr.write(`Manifest written to ${outputPath}
+`);
+      process.stdout.write(`${outputPath}
+`);
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
     }
   });
-  if (result.errors.length > 0) {
-    const msg = result.errors.map((e) => `${e.text}${e.location ? ` (${e.location.file}:${e.location.line})` : ""}`).join("\n");
-    throw new Error(`esbuild failed to bundle component:
-${msg}`);
-  }
-  const outputFile = result.outputFiles?.[0];
-  if (outputFile === void 0 || outputFile.text.length === 0) {
-    throw new Error("esbuild produced no output");
-  }
-  return outputFile.text;
 }
-function wrapInHtml(bundledScript, viewportWidth, projectCss) {
-  const projectStyleBlock = projectCss != null && projectCss.length > 0 ? `<style id="scope-project-css">
-${projectCss.replace(/<\/style>/gi, "<\\/style>")}
-</style>` : "";
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=${viewportWidth}, initial-scale=1.0" />
-  <style>
-    *, *::before, *::after { box-sizing: border-box; }
-    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
-    #scope-root { display: inline-block; min-width: 1px; min-height: 1px; }
-  </style>
-  ${projectStyleBlock}
-</head>
-<body>
-  <div id="scope-root" data-reactscope-root></div>
-  <script>${bundledScript}</script>
-</body>
-</html>`;
+function createManifestCommand() {
+  const manifestCmd = new Command2("manifest").description(
+    "Query and explore the component manifest"
+  );
+  registerList(manifestCmd);
+  registerGet(manifestCmd);
+  registerQuery(manifestCmd);
+  registerGenerate(manifestCmd);
+  return manifestCmd;
 }
 
 // src/render-formatter.ts
@@ -612,10 +957,492 @@ function csvEscape(value) {
   return value;
 }
 
+// src/instrument/renders.ts
+var MANIFEST_PATH2 = ".reactscope/manifest.json";
+function determineTrigger(event) {
+  if (event.forceUpdate) return "force_update";
+  if (event.stateChanged) return "state_change";
+  if (event.propsChanged) return "props_change";
+  if (event.contextChanged) return "context_change";
+  if (event.hookDepsChanged) return "hook_dependency";
+  return "parent_rerender";
+}
+function isWastedRender(event) {
+  return !event.propsChanged && !event.stateChanged && !event.contextChanged && !event.memoized;
+}
+function buildCausalityChains(rawEvents) {
+  const result = [];
+  const componentLastRender = /* @__PURE__ */ new Map();
+  for (const raw of rawEvents) {
+    const trigger = determineTrigger(raw);
+    const wasted = isWastedRender(raw);
+    const chain = [];
+    let current = raw;
+    const visited = /* @__PURE__ */ new Set();
+    while (true) {
+      if (visited.has(current.component)) break;
+      visited.add(current.component);
+      const currentTrigger = determineTrigger(current);
+      chain.unshift({
+        component: current.component,
+        trigger: currentTrigger,
+        propsChanged: current.propsChanged,
+        stateChanged: current.stateChanged,
+        contextChanged: current.contextChanged
+      });
+      if (currentTrigger !== "parent_rerender" || current.parentComponent === null) {
+        break;
+      }
+      const parentEvent = componentLastRender.get(current.parentComponent);
+      if (parentEvent === void 0) break;
+      current = parentEvent;
+    }
+    const rootCause = chain[0];
+    const cascadeRenders = rawEvents.filter((e) => {
+      if (rootCause === void 0) return false;
+      return e.component !== rootCause.component && !e.stateChanged && !e.propsChanged;
+    });
+    result.push({
+      component: raw.component,
+      renderIndex: raw.renderIndex,
+      trigger,
+      propsChanged: raw.propsChanged,
+      stateChanged: raw.stateChanged,
+      contextChanged: raw.contextChanged,
+      memoized: raw.memoized,
+      wasted,
+      chain,
+      cascade: {
+        totalRendersTriggered: cascadeRenders.length,
+        uniqueComponents: new Set(cascadeRenders.map((e) => e.component)).size,
+        unchangedPropRenders: cascadeRenders.filter((e) => !e.propsChanged).length
+      }
+    });
+    componentLastRender.set(raw.component, raw);
+  }
+  return result;
+}
+function applyHeuristicFlags(renders) {
+  const flags = [];
+  const byComponent = /* @__PURE__ */ new Map();
+  for (const r of renders) {
+    if (!byComponent.has(r.component)) byComponent.set(r.component, []);
+    byComponent.get(r.component).push(r);
+  }
+  for (const [component, events] of byComponent) {
+    const wastedCount = events.filter((e) => e.wasted).length;
+    const totalCount = events.length;
+    if (wastedCount > 0) {
+      flags.push({
+        id: "WASTED_RENDER",
+        severity: "warning",
+        component,
+        detail: `${wastedCount}/${totalCount} renders were wasted \u2014 unchanged props/state/context, not memoized`,
+        data: { wastedCount, totalCount, wastedRatio: wastedCount / totalCount }
+      });
+    }
+    for (const event of events) {
+      if (event.cascade.totalRendersTriggered > 50) {
+        flags.push({
+          id: "RENDER_CASCADE",
+          severity: "warning",
+          component,
+          detail: `State change in ${component} triggered ${event.cascade.totalRendersTriggered} downstream re-renders`,
+          data: {
+            totalRendersTriggered: event.cascade.totalRendersTriggered,
+            uniqueComponents: event.cascade.uniqueComponents,
+            unchangedPropRenders: event.cascade.unchangedPropRenders
+          }
+        });
+        break;
+      }
+    }
+  }
+  return flags;
+}
+function buildInstrumentationScript() {
+  return (
+    /* js */
+    `
+(function installScopeRenderInstrumentation() {
+  window.__SCOPE_RENDER_EVENTS__ = [];
+  window.__SCOPE_RENDER_INDEX__ = 0;
+
+  var hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!hook) return;
+
+  var originalOnCommit = hook.onCommitFiberRoot;
+  var renderedComponents = new Map(); // componentName -> { lastProps, lastState }
+
+  function extractName(fiber) {
+    if (!fiber) return 'Unknown';
+    var type = fiber.type;
+    if (!type) return 'Unknown';
+    if (typeof type === 'string') return type; // host element
+    if (typeof type === 'function') return type.displayName || type.name || 'Anonymous';
+    if (type.displayName) return type.displayName;
+    if (type.render && typeof type.render === 'function') {
+      return type.render.displayName || type.render.name || 'Anonymous';
+    }
+    return 'Anonymous';
+  }
+
+  function isMemoized(fiber) {
+    // MemoComponent = 14, SimpleMemoComponent = 15
+    return fiber.tag === 14 || fiber.tag === 15;
+  }
+
+  function isComponent(fiber) {
+    // FunctionComponent=0, ClassComponent=1, MemoComponent=14, SimpleMemoComponent=15
+    return fiber.tag === 0 || fiber.tag === 1 || fiber.tag === 14 || fiber.tag === 15;
+  }
+
+  function shallowEqual(a, b) {
+    if (a === b) return true;
+    if (!a || !b) return a === b;
+    var keysA = Object.keys(a);
+    var keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (var i = 0; i < keysA.length; i++) {
+      var k = keysA[i];
+      if (k === 'children') continue; // ignore children prop
+      if (a[k] !== b[k]) return false;
+    }
+    return true;
+  }
+
+  function getParentComponentName(fiber) {
+    var parent = fiber.return;
+    while (parent) {
+      if (isComponent(parent)) {
+        var name = extractName(parent);
+        if (name && name !== 'Unknown' && !/^[a-z]/.test(name)) return name;
+      }
+      parent = parent.return;
+    }
+    return null;
+  }
+
+  function walkCommit(fiber) {
+    if (!fiber) return;
+
+    if (isComponent(fiber)) {
+      var name = extractName(fiber);
+      if (name && name !== 'Unknown' && !/^[a-z]/.test(name)) {
+        var memoized = isMemoized(fiber);
+        var currentProps = fiber.memoizedProps || {};
+        var prev = renderedComponents.get(name);
+
+        var propsChanged = true;
+        var stateChanged = false;
+        var contextChanged = false;
+        var hookDepsChanged = false;
+        var forceUpdate = false;
+
+        if (prev) {
+          propsChanged = !shallowEqual(prev.lastProps, currentProps);
+        }
+
+        // State: check memoizedState chain
+        var memoizedState = fiber.memoizedState;
+        if (prev && prev.lastStateSerialized !== undefined) {
+          try {
+            var stateSig = JSON.stringify(memoizedState ? memoizedState.memoizedState : null);
+            stateChanged = stateSig !== prev.lastStateSerialized;
+          } catch (_) {
+            stateChanged = false;
+          }
+        }
+
+        // Context: use _debugHookTypes or check dependencies
+        var deps = fiber.dependencies;
+        if (deps && deps.firstContext) {
+          contextChanged = true; // conservative: context dep present = may have changed
+        }
+
+        var stateSig;
+        try {
+          stateSig = JSON.stringify(memoizedState ? memoizedState.memoizedState : null);
+        } catch (_) {
+          stateSig = null;
+        }
+
+        renderedComponents.set(name, {
+          lastProps: currentProps,
+          lastStateSerialized: stateSig,
+        });
+
+        var parentName = getParentComponentName(fiber);
+
+        window.__SCOPE_RENDER_EVENTS__.push({
+          component: name,
+          renderIndex: window.__SCOPE_RENDER_INDEX__++,
+          propsChanged: prev ? propsChanged : false,
+          stateChanged: stateChanged,
+          contextChanged: contextChanged,
+          memoized: memoized,
+          parentComponent: parentName,
+          hookDepsChanged: hookDepsChanged,
+          forceUpdate: forceUpdate,
+        });
+      }
+    }
+
+    walkCommit(fiber.child);
+    walkCommit(fiber.sibling);
+  }
+
+  hook.onCommitFiberRoot = function(rendererID, root, priorityLevel) {
+    if (typeof originalOnCommit === 'function') {
+      originalOnCommit.call(hook, rendererID, root, priorityLevel);
+    }
+    var wipRoot = root && root.current && root.current.alternate;
+    if (wipRoot) walkCommit(wipRoot);
+  };
+})();
+`
+  );
+}
+async function replayInteraction(page, steps) {
+  for (const step of steps) {
+    switch (step.action) {
+      case "click":
+        if (step.target !== void 0) {
+          await page.click(step.target, { timeout: 5e3 }).catch(() => {
+          });
+        }
+        break;
+      case "type":
+        if (step.target !== void 0 && step.text !== void 0) {
+          await page.fill(step.target, step.text, { timeout: 5e3 }).catch(async () => {
+            await page.type(step.target, step.text, { timeout: 5e3 }).catch(() => {
+            });
+          });
+        }
+        break;
+      case "hover":
+        if (step.target !== void 0) {
+          await page.hover(step.target, { timeout: 5e3 }).catch(() => {
+          });
+        }
+        break;
+      case "blur":
+        if (step.target !== void 0) {
+          await page.locator(step.target).blur({ timeout: 5e3 }).catch(() => {
+          });
+        }
+        break;
+      case "focus":
+        if (step.target !== void 0) {
+          await page.focus(step.target, { timeout: 5e3 }).catch(() => {
+          });
+        }
+        break;
+      case "scroll":
+        if (step.target !== void 0) {
+          await page.locator(step.target).scrollIntoViewIfNeeded({ timeout: 5e3 }).catch(() => {
+          });
+        }
+        break;
+      case "wait": {
+        const timeout = step.timeout ?? 1e3;
+        if (step.condition === "idle") {
+          await page.waitForLoadState("networkidle", { timeout }).catch(() => {
+          });
+        } else {
+          await page.waitForTimeout(timeout);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  }
+}
+var _pool = null;
+async function getPool() {
+  if (_pool === null) {
+    _pool = new BrowserPool({
+      size: { browsers: 1, pagesPerBrowser: 2 },
+      viewportWidth: 1280,
+      viewportHeight: 800
+    });
+    await _pool.init();
+  }
+  return _pool;
+}
+async function shutdownPool() {
+  if (_pool !== null) {
+    await _pool.close();
+    _pool = null;
+  }
+}
+async function analyzeRenders(options) {
+  const manifestPath = options.manifestPath ?? MANIFEST_PATH2;
+  const manifest = loadManifest(manifestPath);
+  const descriptor = manifest.components[options.componentName];
+  if (descriptor === void 0) {
+    const available = Object.keys(manifest.components).slice(0, 5).join(", ");
+    throw new Error(
+      `Component "${options.componentName}" not found in manifest.
+Available: ${available}`
+    );
+  }
+  const rootDir = process.cwd();
+  const filePath = resolve2(rootDir, descriptor.filePath);
+  const htmlHarness = await buildComponentHarness(filePath, options.componentName, {}, 1280);
+  const pool = await getPool();
+  const slot = await pool.acquire();
+  const { page } = slot;
+  const startMs = performance.now();
+  try {
+    await page.addInitScript(buildInstrumentationScript());
+    await page.setContent(htmlHarness, { waitUntil: "load" });
+    await page.waitForFunction(
+      () => window.__SCOPE_RENDER_COMPLETE__ === true,
+      { timeout: 15e3 }
+    );
+    await page.waitForTimeout(100);
+    await page.evaluate(() => {
+      window.__SCOPE_RENDER_EVENTS__ = [];
+      window.__SCOPE_RENDER_INDEX__ = 0;
+    });
+    await replayInteraction(page, options.interaction);
+    await page.waitForTimeout(200);
+    const interactionDurationMs = performance.now() - startMs;
+    const rawEvents = await page.evaluate(() => {
+      return window.__SCOPE_RENDER_EVENTS__ ?? [];
+    });
+    const renders = buildCausalityChains(rawEvents);
+    const flags = applyHeuristicFlags(renders);
+    const uniqueComponents = new Set(renders.map((r) => r.component)).size;
+    const wastedRenders = renders.filter((r) => r.wasted).length;
+    return {
+      component: options.componentName,
+      interaction: options.interaction,
+      summary: {
+        totalRenders: renders.length,
+        uniqueComponents,
+        wastedRenders,
+        interactionDurationMs: Math.round(interactionDurationMs)
+      },
+      renders,
+      flags
+    };
+  } finally {
+    pool.release(slot);
+  }
+}
+function formatRendersTable(result) {
+  const lines = [];
+  lines.push(`
+\u{1F50D} Re-render Analysis: ${result.component}`);
+  lines.push(`${"\u2500".repeat(60)}`);
+  lines.push(`Total renders:    ${result.summary.totalRenders}`);
+  lines.push(`Unique components: ${result.summary.uniqueComponents}`);
+  lines.push(`Wasted renders:   ${result.summary.wastedRenders}`);
+  lines.push(`Duration:         ${result.summary.interactionDurationMs}ms`);
+  lines.push("");
+  if (result.renders.length === 0) {
+    lines.push("No re-renders captured during interaction.");
+  } else {
+    lines.push("Re-renders:");
+    lines.push(
+      `${"#".padEnd(4)} ${"Component".padEnd(30)} ${"Trigger".padEnd(18)} ${"Wasted".padEnd(7)} ${"Chain Depth"}`
+    );
+    lines.push("\u2500".repeat(80));
+    for (const r of result.renders) {
+      const wasted = r.wasted ? "\u26A0 yes" : "no";
+      const idx = String(r.renderIndex).padEnd(4);
+      const comp = r.component.slice(0, 29).padEnd(30);
+      const trig = r.trigger.padEnd(18);
+      const w = wasted.padEnd(7);
+      const depth = r.chain.length;
+      lines.push(`${idx} ${comp} ${trig} ${w} ${depth}`);
+    }
+  }
+  if (result.flags.length > 0) {
+    lines.push("");
+    lines.push("Flags:");
+    for (const flag of result.flags) {
+      const icon = flag.severity === "error" ? "\u2717" : flag.severity === "warning" ? "\u26A0" : "\u2139";
+      lines.push(`  ${icon} [${flag.id}] ${flag.component}: ${flag.detail}`);
+    }
+  }
+  return lines.join("\n");
+}
+function createInstrumentRendersCommand() {
+  return new Command3("renders").description("Trace re-render causality chains for a component during an interaction sequence").argument("<component>", "Component name to instrument (must be in manifest)").option(
+    "--interaction <json>",
+    `Interaction sequence JSON, e.g. '[{"action":"click","target":"button"}]'`,
+    "[]"
+  ).option("--json", "Output as JSON regardless of TTY", false).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH2).action(
+    async (componentName, opts) => {
+      let interaction = [];
+      try {
+        interaction = JSON.parse(opts.interaction);
+        if (!Array.isArray(interaction)) {
+          throw new Error("Interaction must be a JSON array");
+        }
+      } catch {
+        process.stderr.write(`Error: Invalid --interaction JSON: ${opts.interaction}
+`);
+        process.exit(1);
+      }
+      try {
+        process.stderr.write(
+          `Instrumenting ${componentName} (${interaction.length} interaction steps)\u2026
+`
+        );
+        const result = await analyzeRenders({
+          componentName,
+          interaction,
+          manifestPath: opts.manifest
+        });
+        await shutdownPool();
+        if (opts.json || !isTTY()) {
+          process.stdout.write(`${JSON.stringify(result, null, 2)}
+`);
+        } else {
+          process.stdout.write(`${formatRendersTable(result)}
+`);
+        }
+      } catch (err) {
+        await shutdownPool();
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+function createInstrumentCommand() {
+  const instrumentCmd = new Command3("instrument").description(
+    "Structured instrumentation commands for React component analysis"
+  );
+  instrumentCmd.addCommand(createInstrumentRendersCommand());
+  return instrumentCmd;
+}
+
+// src/render-commands.ts
+import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync4 } from "fs";
+import { resolve as resolve4 } from "path";
+import {
+  ALL_CONTEXT_IDS,
+  ALL_STRESS_IDS,
+  BrowserPool as BrowserPool2,
+  contextAxis,
+  RenderMatrix,
+  SatoriRenderer,
+  safeRender,
+  stressAxis
+} from "@agent-scope/render";
+import { Command as Command4 } from "commander";
+
 // src/tailwind-css.ts
-import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+import { existsSync as existsSync4, readFileSync as readFileSync4 } from "fs";
 import { createRequire } from "module";
-import { resolve as resolve2 } from "path";
+import { resolve as resolve3 } from "path";
 var CONFIG_FILENAMES = [
   ".reactscope/config.json",
   ".reactscope/config.js",
@@ -632,47 +1459,47 @@ var STYLE_ENTRY_CANDIDATES = [
 var TAILWIND_IMPORT = /@import\s+["']tailwindcss["']\s*;?/;
 var compilerCache = null;
 function getCachedBuild(cwd) {
-  if (compilerCache !== null && resolve2(compilerCache.cwd) === resolve2(cwd)) {
+  if (compilerCache !== null && resolve3(compilerCache.cwd) === resolve3(cwd)) {
     return compilerCache.build;
   }
   return null;
 }
 function findStylesEntry(cwd) {
   for (const name of CONFIG_FILENAMES) {
-    const p = resolve2(cwd, name);
-    if (!existsSync2(p)) continue;
+    const p = resolve3(cwd, name);
+    if (!existsSync4(p)) continue;
     try {
       if (name.endsWith(".json")) {
-        const raw = readFileSync2(p, "utf-8");
+        const raw = readFileSync4(p, "utf-8");
         const data = JSON.parse(raw);
         const scope = data.scope;
         const entry = scope?.stylesEntry ?? data.stylesEntry;
         if (typeof entry === "string") {
-          const full = resolve2(cwd, entry);
-          if (existsSync2(full)) return full;
+          const full = resolve3(cwd, entry);
+          if (existsSync4(full)) return full;
         }
       }
     } catch {
     }
   }
-  const pkgPath = resolve2(cwd, "package.json");
-  if (existsSync2(pkgPath)) {
+  const pkgPath = resolve3(cwd, "package.json");
+  if (existsSync4(pkgPath)) {
     try {
-      const raw = readFileSync2(pkgPath, "utf-8");
+      const raw = readFileSync4(pkgPath, "utf-8");
       const pkg = JSON.parse(raw);
       const entry = pkg.scope?.stylesEntry;
       if (typeof entry === "string") {
-        const full = resolve2(cwd, entry);
-        if (existsSync2(full)) return full;
+        const full = resolve3(cwd, entry);
+        if (existsSync4(full)) return full;
       }
     } catch {
     }
   }
   for (const candidate of STYLE_ENTRY_CANDIDATES) {
-    const full = resolve2(cwd, candidate);
-    if (existsSync2(full)) {
+    const full = resolve3(cwd, candidate);
+    if (existsSync4(full)) {
       try {
-        const content = readFileSync2(full, "utf-8");
+        const content = readFileSync4(full, "utf-8");
         if (TAILWIND_IMPORT.test(content)) return full;
       } catch {
       }
@@ -687,7 +1514,7 @@ async function getTailwindCompiler(cwd) {
   if (entryPath === null) return null;
   let compile;
   try {
-    const require2 = createRequire(resolve2(cwd, "package.json"));
+    const require2 = createRequire(resolve3(cwd, "package.json"));
     const tailwind = require2("tailwindcss");
     const fn = tailwind.compile;
     if (typeof fn !== "function") return null;
@@ -695,23 +1522,23 @@ async function getTailwindCompiler(cwd) {
   } catch {
     return null;
   }
-  const entryContent = readFileSync2(entryPath, "utf-8");
+  const entryContent = readFileSync4(entryPath, "utf-8");
   const loadStylesheet = async (id, base) => {
     if (id === "tailwindcss") {
-      const nodeModules = resolve2(cwd, "node_modules");
-      const tailwindCssPath = resolve2(nodeModules, "tailwindcss", "index.css");
-      if (!existsSync2(tailwindCssPath)) {
+      const nodeModules = resolve3(cwd, "node_modules");
+      const tailwindCssPath = resolve3(nodeModules, "tailwindcss", "index.css");
+      if (!existsSync4(tailwindCssPath)) {
         throw new Error(
           `Tailwind v4: tailwindcss package not found at ${tailwindCssPath}. Install with: npm install tailwindcss`
         );
       }
-      const content = readFileSync2(tailwindCssPath, "utf-8");
+      const content = readFileSync4(tailwindCssPath, "utf-8");
       return { path: "virtual:tailwindcss/index.css", base, content };
     }
-    const full = resolve2(base, id);
-    if (existsSync2(full)) {
-      const content = readFileSync2(full, "utf-8");
-      return { path: full, base: resolve2(full, ".."), content };
+    const full = resolve3(base, id);
+    if (existsSync4(full)) {
+      const content = readFileSync4(full, "utf-8");
+      return { path: full, base: resolve3(full, ".."), content };
     }
     throw new Error(`Tailwind v4: could not load stylesheet: ${id} (base: ${base})`);
   };
@@ -733,24 +1560,24 @@ async function getCompiledCssForClasses(cwd, classes) {
 }
 
 // src/render-commands.ts
-var MANIFEST_PATH2 = ".reactscope/manifest.json";
+var MANIFEST_PATH3 = ".reactscope/manifest.json";
 var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
-var _pool = null;
-async function getPool(viewportWidth, viewportHeight) {
-  if (_pool === null) {
-    _pool = new BrowserPool({
+var _pool2 = null;
+async function getPool2(viewportWidth, viewportHeight) {
+  if (_pool2 === null) {
+    _pool2 = new BrowserPool2({
       size: { browsers: 1, pagesPerBrowser: 4 },
       viewportWidth,
       viewportHeight
     });
-    await _pool.init();
+    await _pool2.init();
   }
-  return _pool;
+  return _pool2;
 }
-async function shutdownPool() {
-  if (_pool !== null) {
-    await _pool.close();
-    _pool = null;
+async function shutdownPool2() {
+  if (_pool2 !== null) {
+    await _pool2.close();
+    _pool2 = null;
   }
 }
 function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
@@ -761,7 +1588,7 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
     _satori: satori,
     async renderCell(props, _complexityClass) {
       const startMs = performance.now();
-      const pool = await getPool(viewportWidth, viewportHeight);
+      const pool = await getPool2(viewportWidth, viewportHeight);
       const htmlHarness = await buildComponentHarness(
         filePath,
         componentName,
@@ -858,7 +1685,7 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
   };
 }
 function registerRenderSingle(renderCmd) {
-  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH2).action(
+  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH3).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -880,7 +1707,7 @@ Available: ${available}`
         }
         const { width, height } = parseViewport(opts.viewport);
         const rootDir = process.cwd();
-        const filePath = resolve3(rootDir, descriptor.filePath);
+        const filePath = resolve4(rootDir, descriptor.filePath);
         const renderer = buildRenderer(filePath, componentName, width, height);
         process.stderr.write(
           `Rendering ${componentName} [${descriptor.complexityClass}] at ${width}\xD7${height}\u2026
@@ -897,7 +1724,7 @@ Available: ${available}`
             }
           }
         );
-        await shutdownPool();
+        await shutdownPool2();
         if (outcome.crashed) {
           process.stderr.write(`\u2717 Render failed: ${outcome.error.message}
 `);
@@ -910,8 +1737,8 @@ Available: ${available}`
         }
         const result = outcome.result;
         if (opts.output !== void 0) {
-          const outPath = resolve3(process.cwd(), opts.output);
-          writeFileSync3(outPath, result.screenshot);
+          const outPath = resolve4(process.cwd(), opts.output);
+          writeFileSync4(outPath, result.screenshot);
           process.stdout.write(
             `\u2713 ${componentName} \u2192 ${opts.output} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
 `
@@ -924,20 +1751,20 @@ Available: ${available}`
           process.stdout.write(`${JSON.stringify(json, null, 2)}
 `);
         } else if (fmt === "file") {
-          const dir = resolve3(process.cwd(), DEFAULT_OUTPUT_DIR);
-          mkdirSync2(dir, { recursive: true });
-          const outPath = resolve3(dir, `${componentName}.png`);
-          writeFileSync3(outPath, result.screenshot);
+          const dir = resolve4(process.cwd(), DEFAULT_OUTPUT_DIR);
+          mkdirSync3(dir, { recursive: true });
+          const outPath = resolve4(dir, `${componentName}.png`);
+          writeFileSync4(outPath, result.screenshot);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
           process.stdout.write(
             `\u2713 ${componentName} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
 `
           );
         } else {
-          const dir = resolve3(process.cwd(), DEFAULT_OUTPUT_DIR);
-          mkdirSync2(dir, { recursive: true });
-          const outPath = resolve3(dir, `${componentName}.png`);
-          writeFileSync3(outPath, result.screenshot);
+          const dir = resolve4(process.cwd(), DEFAULT_OUTPUT_DIR);
+          mkdirSync3(dir, { recursive: true });
+          const outPath = resolve4(dir, `${componentName}.png`);
+          writeFileSync4(outPath, result.screenshot);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
           process.stdout.write(
             `\u2713 ${componentName} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
@@ -945,7 +1772,7 @@ Available: ${available}`
           );
         }
       } catch (err) {
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -957,7 +1784,7 @@ function registerRenderMatrix(renderCmd) {
   renderCmd.command("matrix <component>").description("Render a component across a matrix of prop axes").option("--axes <spec>", "Axis definitions e.g. 'variant:primary,secondary size:sm,md,lg'").option(
     "--contexts <ids>",
     "Composition context IDs, comma-separated (e.g. centered,rtl,sidebar)"
-  ).option("--stress <ids>", "Stress preset IDs, comma-separated (e.g. text.long,text.unicode)").option("--sprite <path>", "Write sprite sheet PNG to file").option("--format <fmt>", "Output format: json|png|html|csv (default: auto)").option("--concurrency <n>", "Max parallel renders", "8").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH2).action(
+  ).option("--stress <ids>", "Stress preset IDs, comma-separated (e.g. text.long,text.unicode)").option("--sprite <path>", "Write sprite sheet PNG to file").option("--format <fmt>", "Output format: json|png|html|csv (default: auto)").option("--concurrency <n>", "Max parallel renders", "8").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH3).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -972,7 +1799,7 @@ Available: ${available}`
         const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 8);
         const { width, height } = { width: 375, height: 812 };
         const rootDir = process.cwd();
-        const filePath = resolve3(rootDir, descriptor.filePath);
+        const filePath = resolve4(rootDir, descriptor.filePath);
         const renderer = buildRenderer(filePath, componentName, width, height);
         const axes = [];
         if (opts.axes !== void 0) {
@@ -1030,7 +1857,7 @@ Available: ${available}`
           concurrency
         });
         const result = await matrix.render();
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write(
           `Done. ${result.stats.totalCells} cells, avg ${result.stats.avgRenderTimeMs.toFixed(1)}ms
 `
@@ -1039,8 +1866,8 @@ Available: ${available}`
           const { SpriteSheetGenerator } = await import("@agent-scope/render");
           const gen = new SpriteSheetGenerator();
           const sheet = await gen.generate(result);
-          const spritePath = resolve3(process.cwd(), opts.sprite);
-          writeFileSync3(spritePath, sheet.png);
+          const spritePath = resolve4(process.cwd(), opts.sprite);
+          writeFileSync4(spritePath, sheet.png);
           process.stderr.write(`Sprite sheet saved to ${spritePath}
 `);
         }
@@ -1049,10 +1876,10 @@ Available: ${available}`
           const { SpriteSheetGenerator } = await import("@agent-scope/render");
           const gen = new SpriteSheetGenerator();
           const sheet = await gen.generate(result);
-          const dir = resolve3(process.cwd(), DEFAULT_OUTPUT_DIR);
-          mkdirSync2(dir, { recursive: true });
-          const outPath = resolve3(dir, `${componentName}-matrix.png`);
-          writeFileSync3(outPath, sheet.png);
+          const dir = resolve4(process.cwd(), DEFAULT_OUTPUT_DIR);
+          mkdirSync3(dir, { recursive: true });
+          const outPath = resolve4(dir, `${componentName}-matrix.png`);
+          writeFileSync4(outPath, sheet.png);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}-matrix.png`;
           process.stdout.write(
             `\u2713 ${componentName} matrix (${result.stats.totalCells} cells) \u2192 ${relPath} (${result.stats.wallClockTimeMs.toFixed(0)}ms total)
@@ -1075,7 +1902,7 @@ Available: ${available}`
           process.stdout.write(formatMatrixCsv(componentName, result));
         }
       } catch (err) {
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -1084,7 +1911,7 @@ Available: ${available}`
   );
 }
 function registerRenderAll(renderCmd) {
-  renderCmd.command("all").description("Render all components from the manifest").option("--concurrency <n>", "Max parallel renders", "4").option("--output-dir <dir>", "Output directory for renders", DEFAULT_OUTPUT_DIR).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH2).option("--format <fmt>", "Output format: json|png (default: png)", "png").action(
+  renderCmd.command("all").description("Render all components from the manifest").option("--concurrency <n>", "Max parallel renders", "4").option("--output-dir <dir>", "Output directory for renders", DEFAULT_OUTPUT_DIR).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH3).option("--format <fmt>", "Output format: json|png (default: png)", "png").action(
     async (opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -1095,8 +1922,8 @@ function registerRenderAll(renderCmd) {
           return;
         }
         const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 4);
-        const outputDir = resolve3(process.cwd(), opts.outputDir);
-        mkdirSync2(outputDir, { recursive: true });
+        const outputDir = resolve4(process.cwd(), opts.outputDir);
+        mkdirSync3(outputDir, { recursive: true });
         const rootDir = process.cwd();
         process.stderr.write(`Rendering ${total} components (concurrency: ${concurrency})\u2026
 `);
@@ -1105,7 +1932,7 @@ function registerRenderAll(renderCmd) {
         const renderOne = async (name) => {
           const descriptor = manifest.components[name];
           if (descriptor === void 0) return;
-          const filePath = resolve3(rootDir, descriptor.filePath);
+          const filePath = resolve4(rootDir, descriptor.filePath);
           const renderer = buildRenderer(filePath, name, 375, 812);
           const outcome = await safeRender(
             () => renderer.renderCell({}, descriptor.complexityClass),
@@ -1128,8 +1955,8 @@ function registerRenderAll(renderCmd) {
               success: false,
               errorMessage: outcome.error.message
             });
-            const errPath = resolve3(outputDir, `${name}.error.json`);
-            writeFileSync3(
+            const errPath = resolve4(outputDir, `${name}.error.json`);
+            writeFileSync4(
               errPath,
               JSON.stringify(
                 {
@@ -1146,10 +1973,10 @@ function registerRenderAll(renderCmd) {
           }
           const result = outcome.result;
           results.push({ name, renderTimeMs: result.renderTimeMs, success: true });
-          const pngPath = resolve3(outputDir, `${name}.png`);
-          writeFileSync3(pngPath, result.screenshot);
-          const jsonPath = resolve3(outputDir, `${name}.json`);
-          writeFileSync3(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
+          const pngPath = resolve4(outputDir, `${name}.png`);
+          writeFileSync4(pngPath, result.screenshot);
+          const jsonPath = resolve4(outputDir, `${name}.json`);
+          writeFileSync4(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
           if (isTTY()) {
             process.stdout.write(
               `\u2713 ${name} \u2192 ${opts.outputDir}/${name}.png (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
@@ -1172,13 +1999,13 @@ function registerRenderAll(renderCmd) {
           workers.push(worker());
         }
         await Promise.all(workers);
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write("\n");
         const summary = formatSummaryText(results, outputDir);
         process.stderr.write(`${summary}
 `);
       } catch (err) {
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -1211,7 +2038,7 @@ function resolveMatrixFormat(formatFlag, spriteAlreadyWritten) {
   return "json";
 }
 function createRenderCommand() {
-  const renderCmd = new Command2("render").description(
+  const renderCmd = new Command4("render").description(
     "Render components to PNG or JSON via esbuild + BrowserPool"
   );
   registerRenderSingle(renderCmd);
@@ -1500,8 +2327,8 @@ function buildStructuredReport(report) {
 }
 
 // src/tokens/commands.ts
-import { existsSync as existsSync3, readFileSync as readFileSync3 } from "fs";
-import { resolve as resolve4 } from "path";
+import { existsSync as existsSync5, readFileSync as readFileSync5 } from "fs";
+import { resolve as resolve5 } from "path";
 import {
   parseTokenFileSync,
   TokenParseError,
@@ -1509,7 +2336,7 @@ import {
   TokenValidationError,
   validateTokenFile
 } from "@agent-scope/tokens";
-import { Command as Command3 } from "commander";
+import { Command as Command5 } from "commander";
 var DEFAULT_TOKEN_FILE = "reactscope.tokens.json";
 var CONFIG_FILE = "reactscope.config.json";
 function isTTY2() {
@@ -1531,30 +2358,30 @@ function buildTable2(headers, rows) {
 }
 function resolveTokenFilePath(fileFlag) {
   if (fileFlag !== void 0) {
-    return resolve4(process.cwd(), fileFlag);
+    return resolve5(process.cwd(), fileFlag);
   }
-  const configPath = resolve4(process.cwd(), CONFIG_FILE);
-  if (existsSync3(configPath)) {
+  const configPath = resolve5(process.cwd(), CONFIG_FILE);
+  if (existsSync5(configPath)) {
     try {
-      const raw = readFileSync3(configPath, "utf-8");
+      const raw = readFileSync5(configPath, "utf-8");
       const config = JSON.parse(raw);
       if (typeof config === "object" && config !== null && "tokens" in config && typeof config.tokens === "object" && config.tokens !== null && typeof config.tokens?.file === "string") {
         const file = config.tokens.file;
-        return resolve4(process.cwd(), file);
+        return resolve5(process.cwd(), file);
       }
     } catch {
     }
   }
-  return resolve4(process.cwd(), DEFAULT_TOKEN_FILE);
+  return resolve5(process.cwd(), DEFAULT_TOKEN_FILE);
 }
 function loadTokens(absPath) {
-  if (!existsSync3(absPath)) {
+  if (!existsSync5(absPath)) {
     throw new Error(
       `Token file not found at ${absPath}.
 Create a reactscope.tokens.json file or use --file to specify a path.`
     );
   }
-  const raw = readFileSync3(absPath, "utf-8");
+  const raw = readFileSync5(absPath, "utf-8");
   return parseTokenFileSync(raw);
 }
 function getRawValue(node, segments) {
@@ -1768,13 +2595,13 @@ function registerValidate(tokensCmd) {
   ).option("--file <path>", "Path to token file (overrides config)").option("--format <fmt>", "Output format: json or text (default: auto-detect)").action((opts) => {
     try {
       const filePath = resolveTokenFilePath(opts.file);
-      if (!existsSync3(filePath)) {
+      if (!existsSync5(filePath)) {
         throw new Error(
           `Token file not found at ${filePath}.
 Create a reactscope.tokens.json file or use --file to specify a path.`
         );
       }
-      const raw = readFileSync3(filePath, "utf-8");
+      const raw = readFileSync5(filePath, "utf-8");
       const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
       const errors = [];
       let parsed;
@@ -1842,7 +2669,7 @@ function outputValidationResult(filePath, errors, useJson) {
   }
 }
 function createTokensCommand() {
-  const tokensCmd = new Command3("tokens").description(
+  const tokensCmd = new Command5("tokens").description(
     "Query and validate design tokens from a reactscope.tokens.json file"
   );
   registerGet2(tokensCmd);
@@ -1855,7 +2682,7 @@ function createTokensCommand() {
 
 // src/program.ts
 function createProgram(options = {}) {
-  const program2 = new Command4("scope").version(options.version ?? "0.1.0").description("Scope \u2014 React instrumentation toolkit");
+  const program2 = new Command6("scope").version(options.version ?? "0.1.0").description("Scope \u2014 React instrumentation toolkit");
   program2.command("capture <url>").description("Capture a React component tree from a live URL and output as JSON").option("-o, --output <path>", "Write JSON to file instead of stdout").option("--pretty", "Pretty-print JSON output (default: minified)", false).option("--timeout <ms>", "Max wait time for React to mount (ms)", "10000").option("--wait <ms>", "Additional wait after page load before capture (ms)", "0").action(
     async (url, opts) => {
       try {
@@ -1928,7 +2755,7 @@ function createProgram(options = {}) {
     }
   );
   program2.command("generate").description("Generate a Playwright test from a Scope trace file").argument("<trace>", "Path to a serialized Scope trace (.json)").option("-o, --output <path>", "Output file path", "scope.spec.ts").option("-d, --description <text>", "Test description").action((tracePath, opts) => {
-    const raw = readFileSync4(tracePath, "utf-8");
+    const raw = readFileSync6(tracePath, "utf-8");
     const trace = loadTrace(raw);
     const source = generateTest(trace, {
       description: opts.description,
@@ -1940,6 +2767,8 @@ function createProgram(options = {}) {
   program2.addCommand(createManifestCommand());
   program2.addCommand(createRenderCommand());
   program2.addCommand(createTokensCommand());
+  program2.addCommand(createInstrumentCommand());
+  program2.addCommand(createInitCommand());
   return program2;
 }