@agent-scope/cli 1.8.0 → 1.10.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 Command5 } from "commander";
+import { Command as Command6 } from "commander";
 
 // src/browser.ts
 import { writeFileSync } from "fs";
@@ -50,10 +50,365 @@ 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((resolve7) => {
+    rl.question(question, (answer) => {
+      resolve7(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 Command2 } from "commander";
+import { Command as Command3 } from "commander";
 
 // src/component-bundler.ts
 import { dirname } from "path";
@@ -170,10 +525,10 @@ ${projectCss.replace(/<\/style>/gi, "<\\/style>")}
 }
 
 // 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() {
@@ -274,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) {
@@ -416,10 +771,10 @@ function registerGenerate(manifestCmd) {
       process.stderr.write(`Found ${componentCount} components.
 `);
       const outputDir = outputPath.replace(/\/[^/]+$/, "");
-      if (!existsSync(outputDir)) {
-        mkdirSync(outputDir, { recursive: true });
+      if (!existsSync3(outputDir)) {
+        mkdirSync2(outputDir, { recursive: true });
       }
-      writeFileSync2(outputPath, JSON.stringify(manifest, null, 2), "utf-8");
+      writeFileSync3(outputPath, JSON.stringify(manifest, null, 2), "utf-8");
       process.stderr.write(`Manifest written to ${outputPath}
 `);
       process.stdout.write(`${outputPath}
@@ -432,7 +787,7 @@ function registerGenerate(manifestCmd) {
   });
 }
 function createManifestCommand() {
-  const manifestCmd = new Command("manifest").description(
+  const manifestCmd = new Command2("manifest").description(
     "Query and explore the component manifest"
   );
   registerList(manifestCmd);
@@ -1017,7 +1372,7 @@ function formatRendersTable(result) {
   return lines.join("\n");
 }
 function createInstrumentRendersCommand() {
-  return new Command2("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(
+  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"}]'`,
     "[]"
@@ -1062,7 +1417,7 @@ function createInstrumentRendersCommand() {
   );
 }
 function createInstrumentCommand() {
-  const instrumentCmd = new Command2("instrument").description(
+  const instrumentCmd = new Command3("instrument").description(
     "Structured instrumentation commands for React component analysis"
   );
   instrumentCmd.addCommand(createInstrumentRendersCommand());
@@ -1070,7 +1425,7 @@ function createInstrumentCommand() {
 }
 
 // src/render-commands.ts
-import { mkdirSync as mkdirSync2, writeFileSync as writeFileSync3 } from "fs";
+import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync4 } from "fs";
 import { resolve as resolve4 } from "path";
 import {
   ALL_CONTEXT_IDS,
@@ -1082,10 +1437,10 @@ import {
   safeRender,
   stressAxis
 } from "@agent-scope/render";
-import { Command as Command3 } from "commander";
+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 resolve3 } from "path";
 var CONFIG_FILENAMES = [
@@ -1112,39 +1467,39 @@ function getCachedBuild(cwd) {
 function findStylesEntry(cwd) {
   for (const name of CONFIG_FILENAMES) {
     const p = resolve3(cwd, name);
-    if (!existsSync2(p)) continue;
+    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 = resolve3(cwd, entry);
-          if (existsSync2(full)) return full;
+          if (existsSync4(full)) return full;
         }
       }
     } catch {
     }
   }
   const pkgPath = resolve3(cwd, "package.json");
-  if (existsSync2(pkgPath)) {
+  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 = resolve3(cwd, entry);
-        if (existsSync2(full)) return full;
+        if (existsSync4(full)) return full;
       }
     } catch {
     }
   }
   for (const candidate of STYLE_ENTRY_CANDIDATES) {
     const full = resolve3(cwd, candidate);
-    if (existsSync2(full)) {
+    if (existsSync4(full)) {
       try {
-        const content = readFileSync2(full, "utf-8");
+        const content = readFileSync4(full, "utf-8");
         if (TAILWIND_IMPORT.test(content)) return full;
       } catch {
       }
@@ -1167,22 +1522,22 @@ 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 = resolve3(cwd, "node_modules");
       const tailwindCssPath = resolve3(nodeModules, "tailwindcss", "index.css");
-      if (!existsSync2(tailwindCssPath)) {
+      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 = resolve3(base, id);
-    if (existsSync2(full)) {
-      const content = readFileSync2(full, "utf-8");
+    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})`);
@@ -1383,7 +1738,7 @@ Available: ${available}`
         const result = outcome.result;
         if (opts.output !== void 0) {
           const outPath = resolve4(process.cwd(), opts.output);
-          writeFileSync3(outPath, result.screenshot);
+          writeFileSync4(outPath, result.screenshot);
           process.stdout.write(
             `\u2713 ${componentName} \u2192 ${opts.output} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
 `
@@ -1397,9 +1752,9 @@ Available: ${available}`
 `);
         } else if (fmt === "file") {
           const dir = resolve4(process.cwd(), DEFAULT_OUTPUT_DIR);
-          mkdirSync2(dir, { recursive: true });
+          mkdirSync3(dir, { recursive: true });
           const outPath = resolve4(dir, `${componentName}.png`);
-          writeFileSync3(outPath, result.screenshot);
+          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)
@@ -1407,9 +1762,9 @@ Available: ${available}`
           );
         } else {
           const dir = resolve4(process.cwd(), DEFAULT_OUTPUT_DIR);
-          mkdirSync2(dir, { recursive: true });
+          mkdirSync3(dir, { recursive: true });
           const outPath = resolve4(dir, `${componentName}.png`);
-          writeFileSync3(outPath, result.screenshot);
+          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)
@@ -1512,7 +1867,7 @@ Available: ${available}`
           const gen = new SpriteSheetGenerator();
           const sheet = await gen.generate(result);
           const spritePath = resolve4(process.cwd(), opts.sprite);
-          writeFileSync3(spritePath, sheet.png);
+          writeFileSync4(spritePath, sheet.png);
           process.stderr.write(`Sprite sheet saved to ${spritePath}
 `);
         }
@@ -1522,9 +1877,9 @@ Available: ${available}`
           const gen = new SpriteSheetGenerator();
           const sheet = await gen.generate(result);
           const dir = resolve4(process.cwd(), DEFAULT_OUTPUT_DIR);
-          mkdirSync2(dir, { recursive: true });
+          mkdirSync3(dir, { recursive: true });
           const outPath = resolve4(dir, `${componentName}-matrix.png`);
-          writeFileSync3(outPath, sheet.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)
@@ -1568,7 +1923,7 @@ function registerRenderAll(renderCmd) {
         }
         const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 4);
         const outputDir = resolve4(process.cwd(), opts.outputDir);
-        mkdirSync2(outputDir, { recursive: true });
+        mkdirSync3(outputDir, { recursive: true });
         const rootDir = process.cwd();
         process.stderr.write(`Rendering ${total} components (concurrency: ${concurrency})\u2026
 `);
@@ -1601,7 +1956,7 @@ function registerRenderAll(renderCmd) {
               errorMessage: outcome.error.message
             });
             const errPath = resolve4(outputDir, `${name}.error.json`);
-            writeFileSync3(
+            writeFileSync4(
               errPath,
               JSON.stringify(
                 {
@@ -1619,9 +1974,9 @@ function registerRenderAll(renderCmd) {
           const result = outcome.result;
           results.push({ name, renderTimeMs: result.renderTimeMs, success: true });
           const pngPath = resolve4(outputDir, `${name}.png`);
-          writeFileSync3(pngPath, result.screenshot);
+          writeFileSync4(pngPath, result.screenshot);
           const jsonPath = resolve4(outputDir, `${name}.json`);
-          writeFileSync3(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
+          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)
@@ -1683,7 +2038,7 @@ function resolveMatrixFormat(formatFlag, spriteAlreadyWritten) {
   return "json";
 }
 function createRenderCommand() {
-  const renderCmd = new Command3("render").description(
+  const renderCmd = new Command4("render").description(
     "Render components to PNG or JSON via esbuild + BrowserPool"
   );
   registerRenderSingle(renderCmd);
@@ -1692,6 +2047,332 @@ function createRenderCommand() {
   return renderCmd;
 }
 
+// src/report/baseline.ts
+import { existsSync as existsSync5, mkdirSync as mkdirSync4, rmSync, writeFileSync as writeFileSync5 } from "fs";
+import { resolve as resolve5 } from "path";
+import { generateManifest as generateManifest2 } from "@agent-scope/manifest";
+import { BrowserPool as BrowserPool3, safeRender as safeRender2 } from "@agent-scope/render";
+import { ComplianceEngine, TokenResolver } from "@agent-scope/tokens";
+var DEFAULT_BASELINE_DIR = ".reactscope/baseline";
+var _pool3 = null;
+async function getPool3(viewportWidth, viewportHeight) {
+  if (_pool3 === null) {
+    _pool3 = new BrowserPool3({
+      size: { browsers: 1, pagesPerBrowser: 4 },
+      viewportWidth,
+      viewportHeight
+    });
+    await _pool3.init();
+  }
+  return _pool3;
+}
+async function shutdownPool3() {
+  if (_pool3 !== null) {
+    await _pool3.close();
+    _pool3 = null;
+  }
+}
+async function renderComponent(filePath, componentName, props, viewportWidth, viewportHeight) {
+  const pool = await getPool3(viewportWidth, viewportHeight);
+  const htmlHarness = await buildComponentHarness(filePath, componentName, props, viewportWidth);
+  const slot = await pool.acquire();
+  const { page } = slot;
+  try {
+    await page.setContent(htmlHarness, { waitUntil: "load" });
+    await page.waitForFunction(
+      () => {
+        const w = window;
+        return w.__SCOPE_RENDER_COMPLETE__ === true;
+      },
+      { timeout: 15e3 }
+    );
+    const renderError = await page.evaluate(() => {
+      return window.__SCOPE_RENDER_ERROR__ ?? null;
+    });
+    if (renderError !== null) {
+      throw new Error(`Component render error: ${renderError}`);
+    }
+    const rootDir = process.cwd();
+    const classes = await page.evaluate(() => {
+      const set = /* @__PURE__ */ new Set();
+      document.querySelectorAll("[class]").forEach((el) => {
+        for (const c of el.className.split(/\s+/)) {
+          if (c) set.add(c);
+        }
+      });
+      return [...set];
+    });
+    const projectCss = await getCompiledCssForClasses(rootDir, classes);
+    if (projectCss != null && projectCss.length > 0) {
+      await page.addStyleTag({ content: projectCss });
+    }
+    const startMs = performance.now();
+    const rootLocator = page.locator("[data-reactscope-root]");
+    const boundingBox = await rootLocator.boundingBox();
+    if (boundingBox === null || boundingBox.width === 0 || boundingBox.height === 0) {
+      throw new Error(
+        `Component "${componentName}" rendered with zero bounding box \u2014 it may be invisible or not mounted`
+      );
+    }
+    const PAD = 24;
+    const MIN_W = 320;
+    const MIN_H = 200;
+    const clipX = Math.max(0, boundingBox.x - PAD);
+    const clipY = Math.max(0, boundingBox.y - PAD);
+    const rawW = boundingBox.width + PAD * 2;
+    const rawH = boundingBox.height + PAD * 2;
+    const clipW = Math.max(rawW, MIN_W);
+    const clipH = Math.max(rawH, MIN_H);
+    const safeW = Math.min(clipW, viewportWidth - clipX);
+    const safeH = Math.min(clipH, viewportHeight - clipY);
+    const screenshot = await page.screenshot({
+      clip: { x: clipX, y: clipY, width: safeW, height: safeH },
+      type: "png"
+    });
+    const computedStylesRaw = {};
+    const styles = await page.evaluate((sel) => {
+      const el = document.querySelector(sel);
+      if (el === null) return {};
+      const computed = window.getComputedStyle(el);
+      const out = {};
+      for (const prop of [
+        "display",
+        "width",
+        "height",
+        "color",
+        "backgroundColor",
+        "fontSize",
+        "fontFamily",
+        "padding",
+        "margin"
+      ]) {
+        out[prop] = computed.getPropertyValue(prop);
+      }
+      return out;
+    }, "[data-reactscope-root] > *");
+    computedStylesRaw["[data-reactscope-root] > *"] = styles;
+    const renderTimeMs = performance.now() - startMs;
+    return {
+      screenshot,
+      width: Math.round(safeW),
+      height: Math.round(safeH),
+      renderTimeMs,
+      computedStyles: computedStylesRaw
+    };
+  } finally {
+    pool.release(slot);
+  }
+}
+function extractComputedStyles(computedStylesRaw) {
+  const flat = {};
+  for (const styles of Object.values(computedStylesRaw)) {
+    Object.assign(flat, styles);
+  }
+  const colors = {};
+  const spacing = {};
+  const typography = {};
+  const borders = {};
+  const shadows = {};
+  for (const [prop, value] of Object.entries(flat)) {
+    if (prop === "color" || prop === "backgroundColor") {
+      colors[prop] = value;
+    } else if (prop === "padding" || prop === "margin") {
+      spacing[prop] = value;
+    } else if (prop === "fontSize" || prop === "fontFamily" || prop === "fontWeight" || prop === "lineHeight") {
+      typography[prop] = value;
+    } else if (prop === "borderRadius" || prop === "borderWidth") {
+      borders[prop] = value;
+    } else if (prop === "boxShadow") {
+      shadows[prop] = value;
+    }
+  }
+  return { colors, spacing, typography, borders, shadows };
+}
+async function runBaseline(options = {}) {
+  const {
+    outputDir = DEFAULT_BASELINE_DIR,
+    componentsGlob,
+    manifestPath,
+    viewportWidth = 375,
+    viewportHeight = 812
+  } = options;
+  const startTime = performance.now();
+  const rootDir = process.cwd();
+  const baselineDir = resolve5(rootDir, outputDir);
+  const rendersDir = resolve5(baselineDir, "renders");
+  if (existsSync5(baselineDir)) {
+    rmSync(baselineDir, { recursive: true, force: true });
+  }
+  mkdirSync4(rendersDir, { recursive: true });
+  let manifest;
+  if (manifestPath !== void 0) {
+    const { readFileSync: readFileSync7 } = await import("fs");
+    const absPath = resolve5(rootDir, manifestPath);
+    if (!existsSync5(absPath)) {
+      throw new Error(`Manifest not found at ${absPath}.`);
+    }
+    manifest = JSON.parse(readFileSync7(absPath, "utf-8"));
+    process.stderr.write(`Loaded manifest from ${manifestPath}
+`);
+  } else {
+    process.stderr.write("Scanning for React components\u2026\n");
+    manifest = await generateManifest2({ rootDir });
+    const count = Object.keys(manifest.components).length;
+    process.stderr.write(`Found ${count} components.
+`);
+  }
+  writeFileSync5(resolve5(baselineDir, "manifest.json"), JSON.stringify(manifest, null, 2), "utf-8");
+  let componentNames = Object.keys(manifest.components);
+  if (componentsGlob !== void 0) {
+    componentNames = componentNames.filter((name) => matchGlob(componentsGlob, name));
+    process.stderr.write(
+      `Filtered to ${componentNames.length} components matching "${componentsGlob}".
+`
+    );
+  }
+  const total = componentNames.length;
+  if (total === 0) {
+    process.stderr.write("No components to baseline.\n");
+    const emptyReport = {
+      components: {},
+      totalProperties: 0,
+      totalOnSystem: 0,
+      totalOffSystem: 0,
+      aggregateCompliance: 1,
+      auditedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    writeFileSync5(
+      resolve5(baselineDir, "compliance.json"),
+      JSON.stringify(emptyReport, null, 2),
+      "utf-8"
+    );
+    return {
+      baselineDir,
+      componentCount: 0,
+      failureCount: 0,
+      wallClockMs: performance.now() - startTime
+    };
+  }
+  process.stderr.write(`Rendering ${total} components\u2026
+`);
+  const computedStylesMap = /* @__PURE__ */ new Map();
+  let completed = 0;
+  let failureCount = 0;
+  const CONCURRENCY = 4;
+  let nextIdx = 0;
+  const renderOne = async (name) => {
+    const descriptor = manifest.components[name];
+    if (descriptor === void 0) return;
+    const filePath = resolve5(rootDir, descriptor.filePath);
+    const outcome = await safeRender2(
+      () => renderComponent(filePath, name, {}, viewportWidth, viewportHeight),
+      {
+        props: {},
+        sourceLocation: {
+          file: descriptor.filePath,
+          line: descriptor.loc.start,
+          column: 0
+        }
+      }
+    );
+    completed++;
+    const pct = Math.round(completed / total * 100);
+    if (isTTY()) {
+      process.stderr.write(`${renderProgressBar(completed, total, name, pct)}\r`);
+    }
+    if (outcome.crashed) {
+      failureCount++;
+      const errPath = resolve5(rendersDir, `${name}.error.json`);
+      writeFileSync5(
+        errPath,
+        JSON.stringify(
+          {
+            component: name,
+            errorMessage: outcome.error.message,
+            heuristicFlags: outcome.error.heuristicFlags,
+            propsAtCrash: outcome.error.propsAtCrash
+          },
+          null,
+          2
+        ),
+        "utf-8"
+      );
+      return;
+    }
+    const result = outcome.result;
+    writeFileSync5(resolve5(rendersDir, `${name}.png`), result.screenshot);
+    const jsonOutput = formatRenderJson(name, {}, result);
+    writeFileSync5(
+      resolve5(rendersDir, `${name}.json`),
+      JSON.stringify(jsonOutput, null, 2),
+      "utf-8"
+    );
+    computedStylesMap.set(name, extractComputedStyles(result.computedStyles));
+  };
+  const worker = async () => {
+    while (nextIdx < componentNames.length) {
+      const i = nextIdx++;
+      const name = componentNames[i];
+      if (name !== void 0) {
+        await renderOne(name);
+      }
+    }
+  };
+  const workers = [];
+  for (let w = 0; w < Math.min(CONCURRENCY, total); w++) {
+    workers.push(worker());
+  }
+  await Promise.all(workers);
+  await shutdownPool3();
+  if (isTTY()) {
+    process.stderr.write("\n");
+  }
+  const resolver = new TokenResolver([]);
+  const engine = new ComplianceEngine(resolver);
+  const batchReport = engine.auditBatch(computedStylesMap);
+  writeFileSync5(
+    resolve5(baselineDir, "compliance.json"),
+    JSON.stringify(batchReport, null, 2),
+    "utf-8"
+  );
+  const wallClockMs = performance.now() - startTime;
+  const successCount = total - failureCount;
+  process.stderr.write(
+    `
+Baseline complete: ${successCount}/${total} components rendered` + (failureCount > 0 ? ` (${failureCount} failed)` : "") + ` in ${(wallClockMs / 1e3).toFixed(1)}s
+`
+  );
+  process.stderr.write(`Snapshot saved to ${baselineDir}
+`);
+  return { baselineDir, componentCount: total, failureCount, wallClockMs };
+}
+function registerBaselineSubCommand(reportCmd) {
+  reportCmd.command("baseline").description("Capture a baseline snapshot (manifest + renders + compliance) for later diffing").option(
+    "-o, --output <dir>",
+    "Output directory for the baseline snapshot",
+    DEFAULT_BASELINE_DIR
+  ).option("--components <glob>", "Glob pattern to baseline a subset of components").option("--manifest <path>", "Path to an existing manifest.json to use instead of regenerating").option("--viewport <WxH>", "Viewport size, e.g. 1280x720", "375x812").action(
+    async (opts) => {
+      try {
+        const [wStr, hStr] = opts.viewport.split("x");
+        const viewportWidth = Number.parseInt(wStr ?? "375", 10);
+        const viewportHeight = Number.parseInt(hStr ?? "812", 10);
+        await runBaseline({
+          outputDir: opts.output,
+          componentsGlob: opts.components,
+          manifestPath: opts.manifest,
+          viewportWidth,
+          viewportHeight
+        });
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+
 // src/tree-formatter.ts
 var BRANCH = "\u251C\u2500\u2500 ";
 var LAST_BRANCH = "\u2514\u2500\u2500 ";
@@ -1972,16 +2653,16 @@ function buildStructuredReport(report) {
 }
 
 // src/tokens/commands.ts
-import { existsSync as existsSync3, readFileSync as readFileSync3 } from "fs";
-import { resolve as resolve5 } from "path";
+import { existsSync as existsSync6, readFileSync as readFileSync5 } from "fs";
+import { resolve as resolve6 } from "path";
 import {
   parseTokenFileSync,
   TokenParseError,
-  TokenResolver,
+  TokenResolver as TokenResolver2,
   TokenValidationError,
   validateTokenFile
 } from "@agent-scope/tokens";
-import { Command as Command4 } from "commander";
+import { Command as Command5 } from "commander";
 var DEFAULT_TOKEN_FILE = "reactscope.tokens.json";
 var CONFIG_FILE = "reactscope.config.json";
 function isTTY2() {
@@ -2003,30 +2684,30 @@ function buildTable2(headers, rows) {
 }
 function resolveTokenFilePath(fileFlag) {
   if (fileFlag !== void 0) {
-    return resolve5(process.cwd(), fileFlag);
+    return resolve6(process.cwd(), fileFlag);
   }
-  const configPath = resolve5(process.cwd(), CONFIG_FILE);
-  if (existsSync3(configPath)) {
+  const configPath = resolve6(process.cwd(), CONFIG_FILE);
+  if (existsSync6(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 resolve5(process.cwd(), file);
+        return resolve6(process.cwd(), file);
       }
     } catch {
     }
   }
-  return resolve5(process.cwd(), DEFAULT_TOKEN_FILE);
+  return resolve6(process.cwd(), DEFAULT_TOKEN_FILE);
 }
 function loadTokens(absPath) {
-  if (!existsSync3(absPath)) {
+  if (!existsSync6(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) {
@@ -2066,7 +2747,7 @@ function registerGet2(tokensCmd) {
     try {
       const filePath = resolveTokenFilePath(opts.file);
       const { tokens } = loadTokens(filePath);
-      const resolver = new TokenResolver(tokens);
+      const resolver = new TokenResolver2(tokens);
       const resolvedValue = resolver.resolve(tokenPath);
       const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
       if (useJson) {
@@ -2092,7 +2773,7 @@ function registerList2(tokensCmd) {
       try {
         const filePath = resolveTokenFilePath(opts.file);
         const { tokens } = loadTokens(filePath);
-        const resolver = new TokenResolver(tokens);
+        const resolver = new TokenResolver2(tokens);
         const filtered = resolver.list(opts.type, category);
         const useJson = opts.format === "json" || opts.format !== "table" && !isTTY2();
         if (useJson) {
@@ -2122,7 +2803,7 @@ function registerSearch(tokensCmd) {
       try {
         const filePath = resolveTokenFilePath(opts.file);
         const { tokens } = loadTokens(filePath);
-        const resolver = new TokenResolver(tokens);
+        const resolver = new TokenResolver2(tokens);
         const useJson = opts.format === "json" || opts.format !== "table" && !isTTY2();
         const typesToSearch = opts.type ? [opts.type] : [
           "color",
@@ -2205,7 +2886,7 @@ function registerResolve(tokensCmd) {
       const filePath = resolveTokenFilePath(opts.file);
       const absFilePath = filePath;
       const { tokens, rawFile } = loadTokens(absFilePath);
-      const resolver = new TokenResolver(tokens);
+      const resolver = new TokenResolver2(tokens);
       resolver.resolve(tokenPath);
       const chain = buildResolutionChain(tokenPath, rawFile.tokens);
       const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
@@ -2240,13 +2921,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 (!existsSync6(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;
@@ -2314,7 +2995,7 @@ function outputValidationResult(filePath, errors, useJson) {
   }
 }
 function createTokensCommand() {
-  const tokensCmd = new Command4("tokens").description(
+  const tokensCmd = new Command5("tokens").description(
     "Query and validate design tokens from a reactscope.tokens.json file"
   );
   registerGet2(tokensCmd);
@@ -2327,7 +3008,7 @@ function createTokensCommand() {
 
 // src/program.ts
 function createProgram(options = {}) {
-  const program2 = new Command5("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 {
@@ -2400,7 +3081,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,
@@ -2413,6 +3094,11 @@ function createProgram(options = {}) {
   program2.addCommand(createRenderCommand());
   program2.addCommand(createTokensCommand());
   program2.addCommand(createInstrumentCommand());
+  program2.addCommand(createInitCommand());
+  const existingReportCmd = program2.commands.find((c) => c.name() === "report");
+  if (existingReportCmd !== void 0) {
+    registerBaselineSubCommand(existingReportCmd);
+  }
   return program2;
 }