@agent-scope/cli 1.11.0 → 1.13.0

package/dist/cli.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 
 // src/program.ts
-import { readFileSync as readFileSync7 } from "fs";
+import { readFileSync as readFileSync8 } from "fs";
 import { generateTest, loadTrace } from "@agent-scope/playwright";
-import { Command as Command7 } from "commander";
+import { Command as Command8 } from "commander";
 
 // src/browser.ts
 import { writeFileSync } from "fs";
@@ -255,9 +255,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve10) => {
+  return new Promise((resolve12) => {
     rl.question(question, (answer) => {
-      resolve10(answer.trim());
+      resolve12(answer.trim());
     });
   });
 }
@@ -406,9 +406,9 @@ function createInitCommand() {
 }
 
 // src/instrument/renders.ts
-import { resolve as resolve4 } from "path";
-import { BrowserPool } from "@agent-scope/render";
-import { Command as Command3 } from "commander";
+import { resolve as resolve5 } from "path";
+import { BrowserPool as BrowserPool2 } from "@agent-scope/render";
+import { Command as Command4 } from "commander";
 
 // src/component-bundler.ts
 import { dirname } from "path";
@@ -1602,8 +1602,371 @@ Available: ${available}`
   return cmd;
 }
 
-// src/instrument/renders.ts
+// src/instrument/tree.ts
+import { resolve as resolve4 } from "path";
+import { getBrowserEntryScript as getBrowserEntryScript2 } from "@agent-scope/playwright";
+import { BrowserPool } from "@agent-scope/render";
+import { Command as Command3 } from "commander";
 var MANIFEST_PATH4 = ".reactscope/manifest.json";
+var DEFAULT_VIEWPORT_WIDTH = 375;
+var DEFAULT_VIEWPORT_HEIGHT = 812;
+var _pool = null;
+async function getPool() {
+  if (_pool === null) {
+    _pool = new BrowserPool({
+      size: { browsers: 1, pagesPerBrowser: 1 },
+      viewportWidth: DEFAULT_VIEWPORT_WIDTH,
+      viewportHeight: DEFAULT_VIEWPORT_HEIGHT
+    });
+    await _pool.init();
+  }
+  return _pool;
+}
+async function shutdownPool() {
+  if (_pool !== null) {
+    await _pool.close();
+    _pool = null;
+  }
+}
+function mapNodeType(node) {
+  if (node.type === "forward_ref") return "forwardRef";
+  if (node.type === "host") return "host";
+  const name = node.name;
+  if (name.endsWith(".Provider") || name === "Provider") return "context.provider";
+  if (name.endsWith(".Consumer") || name === "Consumer") return "context.consumer";
+  return node.type;
+}
+function flattenSerializedValue(sv) {
+  if (sv === null || sv === void 0) return null;
+  const v = sv;
+  switch (v.type) {
+    case "null":
+    case "undefined":
+      return null;
+    case "string":
+    case "number":
+    case "boolean":
+      return v.value;
+    case "object": {
+      if (!Array.isArray(v.entries)) return {};
+      const result = {};
+      for (const entry of v.entries) {
+        result[entry.key] = flattenSerializedValue(entry.value);
+      }
+      return result;
+    }
+    case "array": {
+      if (!Array.isArray(v.items)) return [];
+      return v.items.map(flattenSerializedValue);
+    }
+    case "function":
+      return "[Function]";
+    case "symbol":
+      return `[Symbol: ${v.description ?? ""}]`;
+    case "circular":
+      return "[Circular]";
+    case "truncated":
+      return `[Truncated: ${v.preview ?? ""}]`;
+    default:
+      return v.preview ?? null;
+  }
+}
+function flattenHookState(hooks) {
+  const result = {};
+  for (let i = 0; i < hooks.length; i++) {
+    const hook = hooks[i];
+    if (hook === void 0) continue;
+    const key = hook.name !== null && hook.name !== void 0 ? hook.name : `${hook.type}[${i}]`;
+    result[key] = flattenSerializedValue(hook.value);
+  }
+  return result;
+}
+function extractContextNames(contexts) {
+  const names = contexts.map((c) => c.contextName ?? "Unknown").filter((name, idx, arr) => arr.indexOf(name) === idx);
+  return names;
+}
+function anyContextChanged(contexts) {
+  return contexts.some((c) => c.didTriggerRender);
+}
+function convertToInstrumentNode(node, depth = 0) {
+  const contexts = extractContextNames(node.context);
+  const contextChanged = anyContextChanged(node.context);
+  const state = flattenHookState(node.state);
+  const propsFlat = flattenSerializedValue(node.props);
+  const props = propsFlat !== null && typeof propsFlat === "object" && !Array.isArray(propsFlat) ? propsFlat : {};
+  return {
+    component: node.name,
+    type: mapNodeType(node),
+    renderCount: node.renderCount,
+    lastRenderDuration: node.renderDuration,
+    memoized: node.type === "memo",
+    // memoSkipped requires tracking bail-outs across commits — not available from
+    // a single-shot capture. Defaulted to 0.
+    memoSkipped: 0,
+    props,
+    // propsChanged is not tracked in a single-shot capture — would need a diff
+    // between two renders. Defaulted to false.
+    propsChanged: false,
+    state,
+    stateChanged: false,
+    contextChanged,
+    contexts,
+    depth,
+    children: node.children.map((child) => convertToInstrumentNode(child, depth + 1))
+  };
+}
+function filterByContext(node, contextName) {
+  const filteredChildren = node.children.map((child) => filterByContext(child, contextName)).filter((c) => c !== null);
+  const selfMatches = node.contexts.some((c) => c.toLowerCase() === contextName.toLowerCase());
+  if (!selfMatches && filteredChildren.length === 0) return null;
+  return { ...node, children: filteredChildren };
+}
+function filterWastedRenders(node) {
+  const filteredChildren = node.children.map((child) => filterWastedRenders(child)).filter((c) => c !== null);
+  const isWasted = !node.propsChanged && !node.stateChanged && !node.contextChanged && !node.memoized && node.renderCount > 1;
+  if (!isWasted && filteredChildren.length === 0) return null;
+  return { ...node, children: filteredChildren };
+}
+function sortTree(node, sortBy) {
+  const sortedChildren = node.children.map((child) => sortTree(child, sortBy)).sort((a, b) => {
+    if (sortBy === "renderCount") return b.renderCount - a.renderCount;
+    return a.depth - b.depth;
+  });
+  return { ...node, children: sortedChildren };
+}
+function annotateProviderDepth(node, providerDepth = 0) {
+  const isProvider = node.type === "context.provider";
+  const childProviderDepth = isProvider ? providerDepth + 1 : providerDepth;
+  return {
+    ...node,
+    _providerDepth: providerDepth,
+    children: node.children.map((child) => annotateProviderDepth(child, childProviderDepth))
+  };
+}
+function limitNodes(root, limit) {
+  let remaining = limit;
+  const clip = (node) => {
+    if (remaining <= 0) return null;
+    remaining--;
+    const clippedChildren = [];
+    for (const child of node.children) {
+      const clipped = clip(child);
+      if (clipped !== null) clippedChildren.push(clipped);
+    }
+    return { ...node, children: clippedChildren };
+  };
+  return clip(root) ?? root;
+}
+var BRANCH = "\u251C\u2500\u2500 ";
+var LAST_BRANCH = "\u2514\u2500\u2500 ";
+var VERTICAL = "\u2502   ";
+var EMPTY = "    ";
+function buildTTYLabel(node, showProviderDepth) {
+  const parts = [node.component];
+  switch (node.type) {
+    case "memo":
+      parts.push("[memo]");
+      break;
+    case "forwardRef":
+      parts.push("[forwardRef]");
+      break;
+    case "class":
+      parts.push("[class]");
+      break;
+    case "context.provider":
+      parts.push("[provider]");
+      break;
+    case "context.consumer":
+      parts.push("[consumer]");
+      break;
+    default:
+      break;
+  }
+  if (node.renderCount > 0) {
+    const durationStr = node.lastRenderDuration > 0 ? ` ${node.lastRenderDuration.toFixed(2)}ms` : "";
+    parts.push(`(renders:${node.renderCount}${durationStr})`);
+  }
+  if (node.contexts.length > 0) {
+    parts.push(`[ctx:${node.contexts.join(",")}]`);
+  }
+  if (showProviderDepth) {
+    const pd = node._providerDepth;
+    if (pd !== void 0 && pd > 0) {
+      parts.push(`[pd:${pd}]`);
+    }
+  }
+  return parts.join(" ");
+}
+function renderTTYNode(node, prefix, isLast, showProviderDepth, lines) {
+  if (node.type === "host") {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child !== void 0) {
+        renderTTYNode(child, prefix, i === node.children.length - 1, showProviderDepth, lines);
+      }
+    }
+    return;
+  }
+  const connector = isLast ? LAST_BRANCH : BRANCH;
+  lines.push(`${prefix}${connector}${buildTTYLabel(node, showProviderDepth)}`);
+  const nextPrefix = prefix + (isLast ? EMPTY : VERTICAL);
+  for (let i = 0; i < node.children.length; i++) {
+    const child = node.children[i];
+    if (child !== void 0) {
+      renderTTYNode(child, nextPrefix, i === node.children.length - 1, showProviderDepth, lines);
+    }
+  }
+}
+function formatInstrumentTree(root, showProviderDepth = false) {
+  const lines = [];
+  if (root.type !== "host") {
+    lines.push(buildTTYLabel(root, showProviderDepth));
+    for (let i = 0; i < root.children.length; i++) {
+      const child = root.children[i];
+      if (child !== void 0) {
+        renderTTYNode(child, "", i === root.children.length - 1, showProviderDepth, lines);
+      }
+    }
+  } else {
+    for (let i = 0; i < root.children.length; i++) {
+      const child = root.children[i];
+      if (child !== void 0) {
+        renderTTYNode(child, "", i === root.children.length - 1, showProviderDepth, lines);
+      }
+    }
+  }
+  return lines.join("\n");
+}
+async function runInstrumentTree(options) {
+  const { componentName, filePath } = options;
+  const pool = await getPool();
+  const slot = await pool.acquire();
+  const { page } = slot;
+  try {
+    await page.addInitScript({ content: getBrowserEntryScript2() });
+    const htmlHarness = await buildComponentHarness(
+      filePath,
+      componentName,
+      {},
+      DEFAULT_VIEWPORT_WIDTH
+    );
+    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(
+      () => window.__SCOPE_RENDER_ERROR__ ?? null
+    );
+    if (renderError !== null) {
+      throw new Error(`Component render error: ${renderError}`);
+    }
+    const captureJson = await page.evaluate(async () => {
+      const w = window;
+      if (typeof w.__SCOPE_CAPTURE_JSON__ !== "function") {
+        throw new Error("__SCOPE_CAPTURE_JSON__ not available \u2014 Scope runtime not injected");
+      }
+      return w.__SCOPE_CAPTURE_JSON__({ lightweight: false });
+    });
+    const captureResult = JSON.parse(captureJson);
+    const componentTree = captureResult.tree;
+    if (componentTree === void 0 || componentTree === null) {
+      throw new Error(`No component tree found for "${componentName}"`);
+    }
+    let instrumentRoot = convertToInstrumentNode(componentTree, 0);
+    if (options.usesContext !== void 0) {
+      const filtered = filterByContext(instrumentRoot, options.usesContext);
+      instrumentRoot = filtered !== null ? filtered : { ...instrumentRoot, children: [] };
+    }
+    if (options.wastedRenders === true) {
+      const filtered = filterWastedRenders(instrumentRoot);
+      instrumentRoot = filtered !== null ? filtered : { ...instrumentRoot, children: [] };
+    }
+    if (options.sortBy !== void 0) {
+      instrumentRoot = sortTree(instrumentRoot, options.sortBy);
+    }
+    if (options.providerDepth === true) {
+      instrumentRoot = annotateProviderDepth(instrumentRoot, 0);
+    }
+    if (options.limit !== void 0 && options.limit > 0) {
+      instrumentRoot = limitNodes(instrumentRoot, options.limit);
+    }
+    return instrumentRoot;
+  } finally {
+    pool.release(slot);
+  }
+}
+function createInstrumentTreeCommand() {
+  return new Command3("tree").description("Render a component via BrowserPool and output a structured instrumentation tree").argument("<component>", "Component name to instrument (must exist in the manifest)").option("--sort-by <field>", "Sort nodes by field: renderCount | depth").option("--limit <n>", "Limit output to the first N nodes (depth-first)").option("--uses-context <name>", "Filter to components that use a specific context").option("--provider-depth", "Annotate each node with its context-provider nesting depth", false).option(
+    "--wasted-renders",
+    "Filter to components with wasted renders (no prop/state/context changes, not memoized)",
+    false
+  ).option("--format <fmt>", "Output format: json | tree (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH4).action(async (componentName, opts) => {
+    try {
+      const manifest = loadManifest(opts.manifest);
+      const descriptor = manifest.components[componentName];
+      if (descriptor === void 0) {
+        const available = Object.keys(manifest.components).slice(0, 5).join(", ");
+        throw new Error(
+          `Component "${componentName}" not found in manifest.
+Available: ${available}`
+        );
+      }
+      if (opts.sortBy !== void 0) {
+        const allowed = ["renderCount", "depth"];
+        if (!allowed.includes(opts.sortBy)) {
+          throw new Error(
+            `Unknown --sort-by value "${opts.sortBy}". Allowed: ${allowed.join(", ")}`
+          );
+        }
+      }
+      const rootDir = process.cwd();
+      const filePath = resolve4(rootDir, descriptor.filePath);
+      process.stderr.write(`Instrumenting ${componentName}\u2026
+`);
+      const instrumentRoot = await runInstrumentTree({
+        componentName,
+        filePath,
+        sortBy: opts.sortBy,
+        limit: opts.limit !== void 0 ? Math.max(1, parseInt(opts.limit, 10)) : void 0,
+        usesContext: opts.usesContext,
+        providerDepth: opts.providerDepth,
+        wastedRenders: opts.wastedRenders
+      });
+      await shutdownPool();
+      const fmt = resolveFormat2(opts.format);
+      if (fmt === "json") {
+        process.stdout.write(`${JSON.stringify(instrumentRoot, null, 2)}
+`);
+      } else {
+        const tree = formatInstrumentTree(instrumentRoot, opts.providerDepth ?? false);
+        process.stdout.write(`${tree}
+`);
+      }
+    } catch (err) {
+      await shutdownPool();
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
+function resolveFormat2(formatFlag) {
+  if (formatFlag !== void 0) {
+    const lower = formatFlag.toLowerCase();
+    if (lower !== "json" && lower !== "tree") {
+      throw new Error(`Unknown format "${formatFlag}". Allowed: json, tree`);
+    }
+    return lower;
+  }
+  return isTTY() ? "tree" : "json";
+}
+
+// src/instrument/renders.ts
+var MANIFEST_PATH5 = ".reactscope/manifest.json";
 function determineTrigger(event) {
   if (event.forceUpdate) return "force_update";
   if (event.stateChanged) return "state_change";
@@ -1904,26 +2267,26 @@ async function replayInteraction2(page, steps) {
     }
   }
 }
-var _pool = null;
-async function getPool() {
-  if (_pool === null) {
-    _pool = new BrowserPool({
+var _pool2 = null;
+async function getPool2() {
+  if (_pool2 === null) {
+    _pool2 = new BrowserPool2({
       size: { browsers: 1, pagesPerBrowser: 2 },
       viewportWidth: 1280,
       viewportHeight: 800
     });
-    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;
   }
 }
 async function analyzeRenders(options) {
-  const manifestPath = options.manifestPath ?? MANIFEST_PATH4;
+  const manifestPath = options.manifestPath ?? MANIFEST_PATH5;
   const manifest = loadManifest(manifestPath);
   const descriptor = manifest.components[options.componentName];
   if (descriptor === void 0) {
@@ -1934,9 +2297,9 @@ Available: ${available}`
     );
   }
   const rootDir = process.cwd();
-  const filePath = resolve4(rootDir, descriptor.filePath);
+  const filePath = resolve5(rootDir, descriptor.filePath);
   const htmlHarness = await buildComponentHarness(filePath, options.componentName, {}, 1280);
-  const pool = await getPool();
+  const pool = await getPool2();
   const slot = await pool.acquire();
   const { page } = slot;
   const startMs = performance.now();
@@ -2017,11 +2380,11 @@ function formatRendersTable(result) {
   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(
+  return new Command4("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_PATH4).action(
+  ).option("--json", "Output as JSON regardless of TTY", false).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH5).action(
     async (componentName, opts) => {
       let interaction = [];
       try {
@@ -2044,7 +2407,7 @@ function createInstrumentRendersCommand() {
           interaction,
           manifestPath: opts.manifest
         });
-        await shutdownPool();
+        await shutdownPool2();
         if (opts.json || !isTTY()) {
           process.stdout.write(`${JSON.stringify(result, null, 2)}
 `);
@@ -2053,7 +2416,7 @@ function createInstrumentRendersCommand() {
 `);
         }
       } catch (err) {
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -2062,34 +2425,35 @@ function createInstrumentRendersCommand() {
   );
 }
 function createInstrumentCommand() {
-  const instrumentCmd = new Command3("instrument").description(
+  const instrumentCmd = new Command4("instrument").description(
     "Structured instrumentation commands for React component analysis"
   );
   instrumentCmd.addCommand(createInstrumentRendersCommand());
   instrumentCmd.addCommand(createInstrumentHooksCommand());
   instrumentCmd.addCommand(createInstrumentProfileCommand());
+  instrumentCmd.addCommand(createInstrumentTreeCommand());
   return instrumentCmd;
 }
 
 // src/render-commands.ts
 import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync4 } from "fs";
-import { resolve as resolve6 } from "path";
+import { resolve as resolve7 } from "path";
 import {
   ALL_CONTEXT_IDS,
   ALL_STRESS_IDS,
-  BrowserPool as BrowserPool2,
+  BrowserPool as BrowserPool3,
   contextAxis,
   RenderMatrix,
   SatoriRenderer,
   safeRender,
   stressAxis
 } from "@agent-scope/render";
-import { Command as Command4 } from "commander";
+import { Command as Command5 } from "commander";
 
 // src/tailwind-css.ts
 import { existsSync as existsSync4, readFileSync as readFileSync4 } from "fs";
 import { createRequire } from "module";
-import { resolve as resolve5 } from "path";
+import { resolve as resolve6 } from "path";
 var CONFIG_FILENAMES = [
   ".reactscope/config.json",
   ".reactscope/config.js",
@@ -2106,14 +2470,14 @@ var STYLE_ENTRY_CANDIDATES = [
 var TAILWIND_IMPORT = /@import\s+["']tailwindcss["']\s*;?/;
 var compilerCache = null;
 function getCachedBuild(cwd) {
-  if (compilerCache !== null && resolve5(compilerCache.cwd) === resolve5(cwd)) {
+  if (compilerCache !== null && resolve6(compilerCache.cwd) === resolve6(cwd)) {
     return compilerCache.build;
   }
   return null;
 }
 function findStylesEntry(cwd) {
   for (const name of CONFIG_FILENAMES) {
-    const p = resolve5(cwd, name);
+    const p = resolve6(cwd, name);
     if (!existsSync4(p)) continue;
     try {
       if (name.endsWith(".json")) {
@@ -2122,28 +2486,28 @@ function findStylesEntry(cwd) {
         const scope = data.scope;
         const entry = scope?.stylesEntry ?? data.stylesEntry;
         if (typeof entry === "string") {
-          const full = resolve5(cwd, entry);
+          const full = resolve6(cwd, entry);
           if (existsSync4(full)) return full;
         }
       }
     } catch {
     }
   }
-  const pkgPath = resolve5(cwd, "package.json");
+  const pkgPath = resolve6(cwd, "package.json");
   if (existsSync4(pkgPath)) {
     try {
       const raw = readFileSync4(pkgPath, "utf-8");
       const pkg = JSON.parse(raw);
       const entry = pkg.scope?.stylesEntry;
       if (typeof entry === "string") {
-        const full = resolve5(cwd, entry);
+        const full = resolve6(cwd, entry);
         if (existsSync4(full)) return full;
       }
     } catch {
     }
   }
   for (const candidate of STYLE_ENTRY_CANDIDATES) {
-    const full = resolve5(cwd, candidate);
+    const full = resolve6(cwd, candidate);
     if (existsSync4(full)) {
       try {
         const content = readFileSync4(full, "utf-8");
@@ -2161,7 +2525,7 @@ async function getTailwindCompiler(cwd) {
   if (entryPath === null) return null;
   let compile;
   try {
-    const require2 = createRequire(resolve5(cwd, "package.json"));
+    const require2 = createRequire(resolve6(cwd, "package.json"));
     const tailwind = require2("tailwindcss");
     const fn = tailwind.compile;
     if (typeof fn !== "function") return null;
@@ -2172,8 +2536,8 @@ async function getTailwindCompiler(cwd) {
   const entryContent = readFileSync4(entryPath, "utf-8");
   const loadStylesheet = async (id, base) => {
     if (id === "tailwindcss") {
-      const nodeModules = resolve5(cwd, "node_modules");
-      const tailwindCssPath = resolve5(nodeModules, "tailwindcss", "index.css");
+      const nodeModules = resolve6(cwd, "node_modules");
+      const tailwindCssPath = resolve6(nodeModules, "tailwindcss", "index.css");
       if (!existsSync4(tailwindCssPath)) {
         throw new Error(
           `Tailwind v4: tailwindcss package not found at ${tailwindCssPath}. Install with: npm install tailwindcss`
@@ -2182,10 +2546,10 @@ async function getTailwindCompiler(cwd) {
       const content = readFileSync4(tailwindCssPath, "utf-8");
       return { path: "virtual:tailwindcss/index.css", base, content };
     }
-    const full = resolve5(base, id);
+    const full = resolve6(base, id);
     if (existsSync4(full)) {
       const content = readFileSync4(full, "utf-8");
-      return { path: full, base: resolve5(full, ".."), content };
+      return { path: full, base: resolve6(full, ".."), content };
     }
     throw new Error(`Tailwind v4: could not load stylesheet: ${id} (base: ${base})`);
   };
@@ -2207,24 +2571,24 @@ async function getCompiledCssForClasses(cwd, classes) {
 }
 
 // src/render-commands.ts
-var MANIFEST_PATH5 = ".reactscope/manifest.json";
+var MANIFEST_PATH6 = ".reactscope/manifest.json";
 var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
-var _pool2 = null;
-async function getPool2(viewportWidth, viewportHeight) {
-  if (_pool2 === null) {
-    _pool2 = new BrowserPool2({
+var _pool3 = null;
+async function getPool3(viewportWidth, viewportHeight) {
+  if (_pool3 === null) {
+    _pool3 = new BrowserPool3({
       size: { browsers: 1, pagesPerBrowser: 4 },
       viewportWidth,
       viewportHeight
     });
-    await _pool2.init();
+    await _pool3.init();
   }
-  return _pool2;
+  return _pool3;
 }
-async function shutdownPool2() {
-  if (_pool2 !== null) {
-    await _pool2.close();
-    _pool2 = null;
+async function shutdownPool3() {
+  if (_pool3 !== null) {
+    await _pool3.close();
+    _pool3 = null;
   }
 }
 function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
@@ -2235,7 +2599,7 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
     _satori: satori,
     async renderCell(props, _complexityClass) {
       const startMs = performance.now();
-      const pool = await getPool2(viewportWidth, viewportHeight);
+      const pool = await getPool3(viewportWidth, viewportHeight);
       const htmlHarness = await buildComponentHarness(
         filePath,
         componentName,
@@ -2332,7 +2696,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_PATH5).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_PATH6).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -2354,7 +2718,7 @@ Available: ${available}`
         }
         const { width, height } = parseViewport(opts.viewport);
         const rootDir = process.cwd();
-        const filePath = resolve6(rootDir, descriptor.filePath);
+        const filePath = resolve7(rootDir, descriptor.filePath);
         const renderer = buildRenderer(filePath, componentName, width, height);
         process.stderr.write(
           `Rendering ${componentName} [${descriptor.complexityClass}] at ${width}\xD7${height}\u2026
@@ -2371,7 +2735,7 @@ Available: ${available}`
             }
           }
         );
-        await shutdownPool2();
+        await shutdownPool3();
         if (outcome.crashed) {
           process.stderr.write(`\u2717 Render failed: ${outcome.error.message}
 `);
@@ -2384,7 +2748,7 @@ Available: ${available}`
         }
         const result = outcome.result;
         if (opts.output !== void 0) {
-          const outPath = resolve6(process.cwd(), opts.output);
+          const outPath = resolve7(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)
@@ -2398,9 +2762,9 @@ Available: ${available}`
           process.stdout.write(`${JSON.stringify(json, null, 2)}
 `);
         } else if (fmt === "file") {
-          const dir = resolve6(process.cwd(), DEFAULT_OUTPUT_DIR);
+          const dir = resolve7(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync3(dir, { recursive: true });
-          const outPath = resolve6(dir, `${componentName}.png`);
+          const outPath = resolve7(dir, `${componentName}.png`);
           writeFileSync4(outPath, result.screenshot);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
           process.stdout.write(
@@ -2408,9 +2772,9 @@ Available: ${available}`
 `
           );
         } else {
-          const dir = resolve6(process.cwd(), DEFAULT_OUTPUT_DIR);
+          const dir = resolve7(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync3(dir, { recursive: true });
-          const outPath = resolve6(dir, `${componentName}.png`);
+          const outPath = resolve7(dir, `${componentName}.png`);
           writeFileSync4(outPath, result.screenshot);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
           process.stdout.write(
@@ -2419,7 +2783,7 @@ Available: ${available}`
           );
         }
       } catch (err) {
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -2431,7 +2795,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_PATH5).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_PATH6).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -2446,7 +2810,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 = resolve6(rootDir, descriptor.filePath);
+        const filePath = resolve7(rootDir, descriptor.filePath);
         const renderer = buildRenderer(filePath, componentName, width, height);
         const axes = [];
         if (opts.axes !== void 0) {
@@ -2504,7 +2868,7 @@ Available: ${available}`
           concurrency
         });
         const result = await matrix.render();
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write(
           `Done. ${result.stats.totalCells} cells, avg ${result.stats.avgRenderTimeMs.toFixed(1)}ms
 `
@@ -2513,7 +2877,7 @@ Available: ${available}`
           const { SpriteSheetGenerator } = await import("@agent-scope/render");
           const gen = new SpriteSheetGenerator();
           const sheet = await gen.generate(result);
-          const spritePath = resolve6(process.cwd(), opts.sprite);
+          const spritePath = resolve7(process.cwd(), opts.sprite);
           writeFileSync4(spritePath, sheet.png);
           process.stderr.write(`Sprite sheet saved to ${spritePath}
 `);
@@ -2523,9 +2887,9 @@ Available: ${available}`
           const { SpriteSheetGenerator } = await import("@agent-scope/render");
           const gen = new SpriteSheetGenerator();
           const sheet = await gen.generate(result);
-          const dir = resolve6(process.cwd(), DEFAULT_OUTPUT_DIR);
+          const dir = resolve7(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync3(dir, { recursive: true });
-          const outPath = resolve6(dir, `${componentName}-matrix.png`);
+          const outPath = resolve7(dir, `${componentName}-matrix.png`);
           writeFileSync4(outPath, sheet.png);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}-matrix.png`;
           process.stdout.write(
@@ -2549,7 +2913,7 @@ Available: ${available}`
           process.stdout.write(formatMatrixCsv(componentName, result));
         }
       } catch (err) {
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -2558,7 +2922,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_PATH5).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_PATH6).option("--format <fmt>", "Output format: json|png (default: png)", "png").action(
     async (opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -2569,7 +2933,7 @@ function registerRenderAll(renderCmd) {
           return;
         }
         const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 4);
-        const outputDir = resolve6(process.cwd(), opts.outputDir);
+        const outputDir = resolve7(process.cwd(), opts.outputDir);
         mkdirSync3(outputDir, { recursive: true });
         const rootDir = process.cwd();
         process.stderr.write(`Rendering ${total} components (concurrency: ${concurrency})\u2026
@@ -2579,7 +2943,7 @@ function registerRenderAll(renderCmd) {
         const renderOne = async (name) => {
           const descriptor = manifest.components[name];
           if (descriptor === void 0) return;
-          const filePath = resolve6(rootDir, descriptor.filePath);
+          const filePath = resolve7(rootDir, descriptor.filePath);
           const renderer = buildRenderer(filePath, name, 375, 812);
           const outcome = await safeRender(
             () => renderer.renderCell({}, descriptor.complexityClass),
@@ -2602,7 +2966,7 @@ function registerRenderAll(renderCmd) {
               success: false,
               errorMessage: outcome.error.message
             });
-            const errPath = resolve6(outputDir, `${name}.error.json`);
+            const errPath = resolve7(outputDir, `${name}.error.json`);
             writeFileSync4(
               errPath,
               JSON.stringify(
@@ -2620,9 +2984,9 @@ function registerRenderAll(renderCmd) {
           }
           const result = outcome.result;
           results.push({ name, renderTimeMs: result.renderTimeMs, success: true });
-          const pngPath = resolve6(outputDir, `${name}.png`);
+          const pngPath = resolve7(outputDir, `${name}.png`);
           writeFileSync4(pngPath, result.screenshot);
-          const jsonPath = resolve6(outputDir, `${name}.json`);
+          const jsonPath = resolve7(outputDir, `${name}.json`);
           writeFileSync4(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
           if (isTTY()) {
             process.stdout.write(
@@ -2646,13 +3010,13 @@ function registerRenderAll(renderCmd) {
           workers.push(worker());
         }
         await Promise.all(workers);
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write("\n");
         const summary = formatSummaryText(results, outputDir);
         process.stderr.write(`${summary}
 `);
       } catch (err) {
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -2685,7 +3049,7 @@ function resolveMatrixFormat(formatFlag, spriteAlreadyWritten) {
   return "json";
 }
 function createRenderCommand() {
-  const renderCmd = new Command4("render").description(
+  const renderCmd = new Command5("render").description(
     "Render components to PNG or JSON via esbuild + BrowserPool"
   );
   registerRenderSingle(renderCmd);
@@ -2696,31 +3060,31 @@ function createRenderCommand() {
 
 // src/report/baseline.ts
 import { existsSync as existsSync5, mkdirSync as mkdirSync4, rmSync, writeFileSync as writeFileSync5 } from "fs";
-import { resolve as resolve7 } from "path";
+import { resolve as resolve8 } from "path";
 import { generateManifest as generateManifest2 } from "@agent-scope/manifest";
-import { BrowserPool as BrowserPool3, safeRender as safeRender2 } from "@agent-scope/render";
+import { BrowserPool as BrowserPool4, 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({
+var _pool4 = null;
+async function getPool4(viewportWidth, viewportHeight) {
+  if (_pool4 === null) {
+    _pool4 = new BrowserPool4({
       size: { browsers: 1, pagesPerBrowser: 4 },
       viewportWidth,
       viewportHeight
     });
-    await _pool3.init();
+    await _pool4.init();
   }
-  return _pool3;
+  return _pool4;
 }
-async function shutdownPool3() {
-  if (_pool3 !== null) {
-    await _pool3.close();
-    _pool3 = null;
+async function shutdownPool4() {
+  if (_pool4 !== null) {
+    await _pool4.close();
+    _pool4 = null;
   }
 }
 async function renderComponent(filePath, componentName, props, viewportWidth, viewportHeight) {
-  const pool = await getPool3(viewportWidth, viewportHeight);
+  const pool = await getPool4(viewportWidth, viewportHeight);
   const htmlHarness = await buildComponentHarness(filePath, componentName, props, viewportWidth);
   const slot = await pool.acquire();
   const { page } = slot;
@@ -2845,20 +3209,20 @@ async function runBaseline(options = {}) {
   } = options;
   const startTime = performance.now();
   const rootDir = process.cwd();
-  const baselineDir = resolve7(rootDir, outputDir);
-  const rendersDir = resolve7(baselineDir, "renders");
+  const baselineDir = resolve8(rootDir, outputDir);
+  const rendersDir = resolve8(baselineDir, "renders");
   if (existsSync5(baselineDir)) {
     rmSync(baselineDir, { recursive: true, force: true });
   }
   mkdirSync4(rendersDir, { recursive: true });
   let manifest;
   if (manifestPath !== void 0) {
-    const { readFileSync: readFileSync8 } = await import("fs");
-    const absPath = resolve7(rootDir, manifestPath);
+    const { readFileSync: readFileSync9 } = await import("fs");
+    const absPath = resolve8(rootDir, manifestPath);
     if (!existsSync5(absPath)) {
       throw new Error(`Manifest not found at ${absPath}.`);
     }
-    manifest = JSON.parse(readFileSync8(absPath, "utf-8"));
+    manifest = JSON.parse(readFileSync9(absPath, "utf-8"));
     process.stderr.write(`Loaded manifest from ${manifestPath}
 `);
   } else {
@@ -2868,7 +3232,7 @@ async function runBaseline(options = {}) {
     process.stderr.write(`Found ${count} components.
 `);
   }
-  writeFileSync5(resolve7(baselineDir, "manifest.json"), JSON.stringify(manifest, null, 2), "utf-8");
+  writeFileSync5(resolve8(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));
@@ -2889,7 +3253,7 @@ async function runBaseline(options = {}) {
       auditedAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     writeFileSync5(
-      resolve7(baselineDir, "compliance.json"),
+      resolve8(baselineDir, "compliance.json"),
       JSON.stringify(emptyReport, null, 2),
       "utf-8"
     );
@@ -2910,7 +3274,7 @@ async function runBaseline(options = {}) {
   const renderOne = async (name) => {
     const descriptor = manifest.components[name];
     if (descriptor === void 0) return;
-    const filePath = resolve7(rootDir, descriptor.filePath);
+    const filePath = resolve8(rootDir, descriptor.filePath);
     const outcome = await safeRender2(
       () => renderComponent(filePath, name, {}, viewportWidth, viewportHeight),
       {
@@ -2929,7 +3293,7 @@ async function runBaseline(options = {}) {
     }
     if (outcome.crashed) {
       failureCount++;
-      const errPath = resolve7(rendersDir, `${name}.error.json`);
+      const errPath = resolve8(rendersDir, `${name}.error.json`);
       writeFileSync5(
         errPath,
         JSON.stringify(
@@ -2947,10 +3311,10 @@ async function runBaseline(options = {}) {
       return;
     }
     const result = outcome.result;
-    writeFileSync5(resolve7(rendersDir, `${name}.png`), result.screenshot);
+    writeFileSync5(resolve8(rendersDir, `${name}.png`), result.screenshot);
     const jsonOutput = formatRenderJson(name, {}, result);
     writeFileSync5(
-      resolve7(rendersDir, `${name}.json`),
+      resolve8(rendersDir, `${name}.json`),
       JSON.stringify(jsonOutput, null, 2),
       "utf-8"
     );
@@ -2970,7 +3334,7 @@ async function runBaseline(options = {}) {
     workers.push(worker());
   }
   await Promise.all(workers);
-  await shutdownPool3();
+  await shutdownPool4();
   if (isTTY()) {
     process.stderr.write("\n");
   }
@@ -2978,7 +3342,7 @@ async function runBaseline(options = {}) {
   const engine = new ComplianceEngine(resolver);
   const batchReport = engine.auditBatch(computedStylesMap);
   writeFileSync5(
-    resolve7(baselineDir, "compliance.json"),
+    resolve8(baselineDir, "compliance.json"),
     JSON.stringify(batchReport, null, 2),
     "utf-8"
   );
@@ -3020,11 +3384,491 @@ function registerBaselineSubCommand(reportCmd) {
   );
 }
 
+// src/report/diff.ts
+import { existsSync as existsSync6, readFileSync as readFileSync5, writeFileSync as writeFileSync6 } from "fs";
+import { resolve as resolve9 } from "path";
+import { generateManifest as generateManifest3 } from "@agent-scope/manifest";
+import { BrowserPool as BrowserPool5, safeRender as safeRender3 } from "@agent-scope/render";
+import { ComplianceEngine as ComplianceEngine2, TokenResolver as TokenResolver2 } from "@agent-scope/tokens";
+var DEFAULT_BASELINE_DIR2 = ".reactscope/baseline";
+function loadBaselineCompliance(baselineDir) {
+  const compliancePath = resolve9(baselineDir, "compliance.json");
+  if (!existsSync6(compliancePath)) return null;
+  const raw = JSON.parse(readFileSync5(compliancePath, "utf-8"));
+  return raw;
+}
+function loadBaselineRenderJson(baselineDir, componentName) {
+  const jsonPath = resolve9(baselineDir, "renders", `${componentName}.json`);
+  if (!existsSync6(jsonPath)) return null;
+  return JSON.parse(readFileSync5(jsonPath, "utf-8"));
+}
+var _pool5 = null;
+async function getPool5(viewportWidth, viewportHeight) {
+  if (_pool5 === null) {
+    _pool5 = new BrowserPool5({
+      size: { browsers: 1, pagesPerBrowser: 4 },
+      viewportWidth,
+      viewportHeight
+    });
+    await _pool5.init();
+  }
+  return _pool5;
+}
+async function shutdownPool5() {
+  if (_pool5 !== null) {
+    await _pool5.close();
+    _pool5 = null;
+  }
+}
+async function renderComponent2(filePath, componentName, props, viewportWidth, viewportHeight) {
+  const pool = await getPool5(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 extractComputedStyles2(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 };
+}
+function classifyComponent(entry, regressionThreshold) {
+  if (entry.renderFailed) return "unchanged";
+  if (entry.baselineCompliance === null && entry.currentCompliance !== null) {
+    return "added";
+  }
+  if (entry.baselineCompliance !== null && entry.currentCompliance === null) {
+    return "removed";
+  }
+  const delta = entry.complianceDelta;
+  if (delta !== null) {
+    if (delta <= -regressionThreshold) return "compliance_regressed";
+    if (delta >= regressionThreshold) return "compliance_improved";
+  }
+  if (entry.baselineDimensions !== null && entry.currentDimensions !== null) {
+    const dw = Math.abs(entry.currentDimensions.width - entry.baselineDimensions.width);
+    const dh = Math.abs(entry.currentDimensions.height - entry.baselineDimensions.height);
+    if (dw > 10 || dh > 10) return "size_changed";
+  }
+  return "unchanged";
+}
+async function runDiff(options = {}) {
+  const {
+    baselineDir: baselineDirRaw = DEFAULT_BASELINE_DIR2,
+    componentsGlob,
+    manifestPath,
+    viewportWidth = 375,
+    viewportHeight = 812,
+    regressionThreshold = 0.01
+  } = options;
+  const startTime = performance.now();
+  const rootDir = process.cwd();
+  const baselineDir = resolve9(rootDir, baselineDirRaw);
+  if (!existsSync6(baselineDir)) {
+    throw new Error(
+      `Baseline directory not found at "${baselineDir}". Run \`scope report baseline\` first to create a baseline snapshot.`
+    );
+  }
+  const baselineManifestPath = resolve9(baselineDir, "manifest.json");
+  if (!existsSync6(baselineManifestPath)) {
+    throw new Error(
+      `Baseline manifest.json not found at "${baselineManifestPath}". The baseline directory may be incomplete \u2014 re-run \`scope report baseline\`.`
+    );
+  }
+  const baselineManifest = JSON.parse(readFileSync5(baselineManifestPath, "utf-8"));
+  const baselineCompliance = loadBaselineCompliance(baselineDir);
+  const baselineComponentNames = new Set(Object.keys(baselineManifest.components));
+  process.stderr.write(
+    `Comparing against baseline at ${baselineDir} (${baselineComponentNames.size} components)
+`
+  );
+  let currentManifest;
+  if (manifestPath !== void 0) {
+    const absPath = resolve9(rootDir, manifestPath);
+    if (!existsSync6(absPath)) {
+      throw new Error(`Manifest not found at "${absPath}".`);
+    }
+    currentManifest = JSON.parse(readFileSync5(absPath, "utf-8"));
+    process.stderr.write(`Loaded manifest from ${manifestPath}
+`);
+  } else {
+    process.stderr.write("Scanning for React components\u2026\n");
+    currentManifest = await generateManifest3({ rootDir });
+    const count = Object.keys(currentManifest.components).length;
+    process.stderr.write(`Found ${count} components.
+`);
+  }
+  let componentNames = Object.keys(currentManifest.components);
+  if (componentsGlob !== void 0) {
+    componentNames = componentNames.filter((name) => matchGlob(componentsGlob, name));
+    process.stderr.write(
+      `Filtered to ${componentNames.length} components matching "${componentsGlob}".
+`
+    );
+  }
+  const removedNames = [...baselineComponentNames].filter(
+    (name) => !currentManifest.components[name] && (componentsGlob === void 0 || matchGlob(componentsGlob, name))
+  );
+  const total = componentNames.length;
+  process.stderr.write(`Rendering ${total} components for diff\u2026
+`);
+  const computedStylesMap = /* @__PURE__ */ new Map();
+  const currentRenderMeta = /* @__PURE__ */ new Map();
+  const renderFailures = /* @__PURE__ */ new Set();
+  let completed = 0;
+  const CONCURRENCY = 4;
+  let nextIdx = 0;
+  const renderOne = async (name) => {
+    const descriptor = currentManifest.components[name];
+    if (descriptor === void 0) return;
+    const filePath = resolve9(rootDir, descriptor.filePath);
+    const outcome = await safeRender3(
+      () => renderComponent2(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) {
+      renderFailures.add(name);
+      return;
+    }
+    const result = outcome.result;
+    currentRenderMeta.set(name, {
+      width: result.width,
+      height: result.height,
+      renderTimeMs: result.renderTimeMs
+    });
+    computedStylesMap.set(name, extractComputedStyles2(result.computedStyles));
+  };
+  if (total > 0) {
+    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 shutdownPool5();
+  if (isTTY() && total > 0) {
+    process.stderr.write("\n");
+  }
+  const resolver = new TokenResolver2([]);
+  const engine = new ComplianceEngine2(resolver);
+  const currentBatchReport = engine.auditBatch(computedStylesMap);
+  const entries = [];
+  for (const name of componentNames) {
+    const baselineComp = baselineCompliance?.components[name] ?? null;
+    const currentComp = currentBatchReport.components[name] ?? null;
+    const baselineMeta = loadBaselineRenderJson(baselineDir, name);
+    const currentMeta = currentRenderMeta.get(name) ?? null;
+    const failed = renderFailures.has(name);
+    const baselineComplianceScore = baselineComp?.aggregateCompliance ?? null;
+    const currentComplianceScore = currentComp?.compliance ?? null;
+    const delta = baselineComplianceScore !== null && currentComplianceScore !== null ? currentComplianceScore - baselineComplianceScore : null;
+    const partial = {
+      name,
+      baselineCompliance: baselineComplianceScore,
+      currentCompliance: currentComplianceScore,
+      complianceDelta: delta,
+      baselineDimensions: baselineMeta !== null ? { width: baselineMeta.width, height: baselineMeta.height } : null,
+      currentDimensions: currentMeta !== null ? { width: currentMeta.width, height: currentMeta.height } : null,
+      renderTimeMs: currentMeta?.renderTimeMs ?? null,
+      renderFailed: failed
+    };
+    entries.push({ ...partial, status: classifyComponent(partial, regressionThreshold) });
+  }
+  for (const name of removedNames) {
+    const baselineComp = baselineCompliance?.components[name] ?? null;
+    const baselineMeta = loadBaselineRenderJson(baselineDir, name);
+    entries.push({
+      name,
+      status: "removed",
+      baselineCompliance: baselineComp?.aggregateCompliance ?? null,
+      currentCompliance: null,
+      complianceDelta: null,
+      baselineDimensions: baselineMeta !== null ? { width: baselineMeta.width, height: baselineMeta.height } : null,
+      currentDimensions: null,
+      renderTimeMs: null,
+      renderFailed: false
+    });
+  }
+  const summary = {
+    total: entries.length,
+    added: entries.filter((e) => e.status === "added").length,
+    removed: entries.filter((e) => e.status === "removed").length,
+    unchanged: entries.filter((e) => e.status === "unchanged").length,
+    complianceRegressed: entries.filter((e) => e.status === "compliance_regressed").length,
+    complianceImproved: entries.filter((e) => e.status === "compliance_improved").length,
+    sizeChanged: entries.filter((e) => e.status === "size_changed").length,
+    renderFailed: entries.filter((e) => e.renderFailed).length
+  };
+  const hasRegressions = summary.complianceRegressed > 0 || summary.removed > 0 || summary.renderFailed > 0;
+  const wallClockMs = performance.now() - startTime;
+  return {
+    diffedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    baselineDir,
+    summary,
+    components: entries,
+    baselineAggregateCompliance: baselineCompliance?.aggregateCompliance ?? 0,
+    currentAggregateCompliance: currentBatchReport.aggregateCompliance,
+    hasRegressions,
+    wallClockMs
+  };
+}
+var STATUS_ICON = {
+  added: "+",
+  removed: "-",
+  unchanged: " ",
+  compliance_regressed: "\u2193",
+  compliance_improved: "\u2191",
+  size_changed: "~"
+};
+var STATUS_LABEL = {
+  added: "added",
+  removed: "removed",
+  unchanged: "ok",
+  compliance_regressed: "regressed",
+  compliance_improved: "improved",
+  size_changed: "size changed"
+};
+function formatDiffReport(result) {
+  const lines = [];
+  const title = "Scope Report Diff";
+  const rule2 = "\u2501".repeat(Math.max(title.length, 40));
+  lines.push(title, rule2);
+  const complianceDelta = result.currentAggregateCompliance - result.baselineAggregateCompliance;
+  const complianceSign = complianceDelta >= 0 ? "+" : "";
+  lines.push(
+    `Baseline compliance:  ${(result.baselineAggregateCompliance * 100).toFixed(1)}%`,
+    `Current compliance:   ${(result.currentAggregateCompliance * 100).toFixed(1)}%`,
+    `Delta:                ${complianceSign}${(complianceDelta * 100).toFixed(1)}%`,
+    ""
+  );
+  const s = result.summary;
+  lines.push(
+    `Components: ${s.total} total  ` + [
+      s.added > 0 ? `${s.added} added` : "",
+      s.removed > 0 ? `${s.removed} removed` : "",
+      s.complianceRegressed > 0 ? `${s.complianceRegressed} regressed` : "",
+      s.complianceImproved > 0 ? `${s.complianceImproved} improved` : "",
+      s.sizeChanged > 0 ? `${s.sizeChanged} size changed` : "",
+      s.renderFailed > 0 ? `${s.renderFailed} failed` : ""
+    ].filter(Boolean).join("  "),
+    ""
+  );
+  const notable = result.components.filter((e) => e.status !== "unchanged");
+  if (notable.length === 0) {
+    lines.push("  No changes detected.");
+  } else {
+    const nameWidth = Math.max(9, ...notable.map((e) => e.name.length));
+    const header = `${"COMPONENT".padEnd(nameWidth)}  ${"STATUS".padEnd(13)}  ${"COMPLIANCE \u0394".padEnd(13)}  DIMENSIONS`;
+    const divider = "-".repeat(header.length);
+    lines.push(header, divider);
+    for (const entry of notable) {
+      const icon = STATUS_ICON[entry.status];
+      const label = STATUS_LABEL[entry.status].padEnd(13);
+      const name = entry.name.padEnd(nameWidth);
+      let complianceStr = "\u2014".padEnd(13);
+      if (entry.complianceDelta !== null) {
+        const sign = entry.complianceDelta >= 0 ? "+" : "";
+        complianceStr = `${sign}${(entry.complianceDelta * 100).toFixed(1)}%`.padEnd(13);
+      }
+      let dimStr = "\u2014";
+      if (entry.baselineDimensions !== null && entry.currentDimensions !== null) {
+        const b = entry.baselineDimensions;
+        const c = entry.currentDimensions;
+        if (b.width !== c.width || b.height !== c.height) {
+          dimStr = `${b.width}\xD7${b.height} \u2192 ${c.width}\xD7${c.height}`;
+        } else {
+          dimStr = `${c.width}\xD7${c.height}`;
+        }
+      } else if (entry.currentDimensions !== null) {
+        dimStr = `${entry.currentDimensions.width}\xD7${entry.currentDimensions.height}`;
+      } else if (entry.baselineDimensions !== null) {
+        dimStr = `${entry.baselineDimensions.width}\xD7${entry.baselineDimensions.height} (removed)`;
+      }
+      if (entry.renderFailed) {
+        dimStr = "render failed";
+      }
+      lines.push(`${icon} ${name}  ${label}  ${complianceStr}  ${dimStr}`);
+    }
+  }
+  lines.push(
+    "",
+    rule2,
+    result.hasRegressions ? `Diff complete: ${result.summary.complianceRegressed + result.summary.renderFailed} regression(s) detected in ${(result.wallClockMs / 1e3).toFixed(1)}s` : `Diff complete: no regressions in ${(result.wallClockMs / 1e3).toFixed(1)}s`
+  );
+  return lines.join("\n");
+}
+function registerDiffSubCommand(reportCmd) {
+  reportCmd.command("diff").description("Compare the current component library against a saved baseline snapshot").option("-b, --baseline <dir>", "Baseline directory to compare against", DEFAULT_BASELINE_DIR2).option("--components <glob>", "Glob pattern to diff 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").option("--json", "Output diff as JSON instead of human-readable text", false).option("-o, --output <path>", "Write the diff JSON to a file").option(
+    "--regression-threshold <n>",
+    "Minimum compliance drop (0\u20131) to classify as a regression",
+    "0.01"
+  ).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);
+        const regressionThreshold = Number.parseFloat(opts.regressionThreshold);
+        const result = await runDiff({
+          baselineDir: opts.baseline,
+          componentsGlob: opts.components,
+          manifestPath: opts.manifest,
+          viewportWidth,
+          viewportHeight,
+          regressionThreshold
+        });
+        if (opts.output !== void 0) {
+          writeFileSync6(opts.output, JSON.stringify(result, null, 2), "utf-8");
+          process.stderr.write(`Diff written to ${opts.output}
+`);
+        }
+        if (opts.json) {
+          process.stdout.write(`${JSON.stringify(result, null, 2)}
+`);
+        } else {
+          process.stdout.write(`${formatDiffReport(result)}
+`);
+        }
+        process.exit(result.hasRegressions ? 1 : 0);
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(2);
+      }
+    }
+  );
+}
+
 // src/tree-formatter.ts
-var BRANCH = "\u251C\u2500\u2500 ";
-var LAST_BRANCH = "\u2514\u2500\u2500 ";
-var VERTICAL = "\u2502   ";
-var EMPTY = "    ";
+var BRANCH2 = "\u251C\u2500\u2500 ";
+var LAST_BRANCH2 = "\u2514\u2500\u2500 ";
+var VERTICAL2 = "\u2502   ";
+var EMPTY2 = "    ";
 function buildLabel(node, options) {
   const parts = [node.name];
   if (node.type === "memo") {
@@ -3072,19 +3916,19 @@ function renderNode(node, prefix, isLast, depth, options, lines) {
     }
     return;
   }
-  const connector = isLast ? LAST_BRANCH : BRANCH;
+  const connector = isLast ? LAST_BRANCH2 : BRANCH2;
   const label = buildLabel(node, options);
   lines.push(`${prefix}${connector}${label}`);
   if (options.maxDepth !== void 0 && depth >= options.maxDepth) {
     const childCount = countVisibleDescendants(node, options);
     if (childCount > 0) {
-      const nextPrefix2 = prefix + (isLast ? EMPTY : VERTICAL);
-      lines.push(`${nextPrefix2}${LAST_BRANCH}\u2026 (${childCount} more)`);
+      const nextPrefix2 = prefix + (isLast ? EMPTY2 : VERTICAL2);
+      lines.push(`${nextPrefix2}${LAST_BRANCH2}\u2026 (${childCount} more)`);
     }
     return;
   }
   const visibleChildren = getVisibleChildren(node, options);
-  const nextPrefix = prefix + (isLast ? EMPTY : VERTICAL);
+  const nextPrefix = prefix + (isLast ? EMPTY2 : VERTICAL2);
   for (let i = 0; i < visibleChildren.length; i++) {
     const child = visibleChildren[i];
     if (child !== void 0) {
@@ -3126,7 +3970,7 @@ function formatTree(root, options = {}) {
     if (options.maxDepth === 0) {
       const childCount = countVisibleDescendants(root, options);
       if (childCount > 0) {
-        lines.push(`${LAST_BRANCH}\u2026 (${childCount} more)`);
+        lines.push(`${LAST_BRANCH2}\u2026 (${childCount} more)`);
       }
     } else {
       const visibleChildren = getVisibleChildren(root, options);
@@ -3300,50 +4144,50 @@ function buildStructuredReport(report) {
 }
 
 // src/tokens/commands.ts
-import { existsSync as existsSync7, readFileSync as readFileSync6 } from "fs";
-import { resolve as resolve9 } from "path";
+import { existsSync as existsSync8, readFileSync as readFileSync7 } from "fs";
+import { resolve as resolve11 } from "path";
 import {
   parseTokenFileSync as parseTokenFileSync2,
   TokenParseError,
-  TokenResolver as TokenResolver3,
+  TokenResolver as TokenResolver4,
   TokenValidationError,
   validateTokenFile
 } from "@agent-scope/tokens";
-import { Command as Command6 } from "commander";
+import { Command as Command7 } from "commander";
 
 // src/tokens/export.ts
-import { existsSync as existsSync6, readFileSync as readFileSync5, writeFileSync as writeFileSync6 } from "fs";
-import { resolve as resolve8 } from "path";
+import { existsSync as existsSync7, readFileSync as readFileSync6, writeFileSync as writeFileSync7 } from "fs";
+import { resolve as resolve10 } from "path";
 import {
   exportTokens,
   parseTokenFileSync,
   ThemeResolver,
-  TokenResolver as TokenResolver2
+  TokenResolver as TokenResolver3
 } from "@agent-scope/tokens";
-import { Command as Command5 } from "commander";
+import { Command as Command6 } from "commander";
 var DEFAULT_TOKEN_FILE = "reactscope.tokens.json";
 var CONFIG_FILE = "reactscope.config.json";
 var SUPPORTED_FORMATS = ["css", "ts", "scss", "tailwind", "flat-json", "figma"];
 function resolveTokenFilePath(fileFlag) {
   if (fileFlag !== void 0) {
-    return resolve8(process.cwd(), fileFlag);
+    return resolve10(process.cwd(), fileFlag);
   }
-  const configPath = resolve8(process.cwd(), CONFIG_FILE);
-  if (existsSync6(configPath)) {
+  const configPath = resolve10(process.cwd(), CONFIG_FILE);
+  if (existsSync7(configPath)) {
     try {
-      const raw = readFileSync5(configPath, "utf-8");
+      const raw = readFileSync6(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 resolve8(process.cwd(), file);
+        return resolve10(process.cwd(), file);
       }
     } catch {
     }
   }
-  return resolve8(process.cwd(), DEFAULT_TOKEN_FILE);
+  return resolve10(process.cwd(), DEFAULT_TOKEN_FILE);
 }
 function createTokensExportCommand() {
-  return new Command5("export").description("Export design tokens to a downstream format").requiredOption("--format <fmt>", `Output format: ${SUPPORTED_FORMATS.join(", ")}`).option("--file <path>", "Path to token file (overrides config)").option("--out <path>", "Write output to file instead of stdout").option("--prefix <prefix>", "CSS/SCSS: prefix for variable names (e.g. 'scope')").option("--selector <selector>", "CSS: custom root selector (default: ':root')").option(
+  return new Command6("export").description("Export design tokens to a downstream format").requiredOption("--format <fmt>", `Output format: ${SUPPORTED_FORMATS.join(", ")}`).option("--file <path>", "Path to token file (overrides config)").option("--out <path>", "Write output to file instead of stdout").option("--prefix <prefix>", "CSS/SCSS: prefix for variable names (e.g. 'scope')").option("--selector <selector>", "CSS: custom root selector (default: ':root')").option(
     "--theme <name>",
     "Include theme overrides for the named theme (applies to css, ts, scss, tailwind, figma)"
   ).action(
@@ -3359,13 +4203,13 @@ Supported formats: ${SUPPORTED_FORMATS.join(", ")}
       const format = opts.format;
       try {
         const filePath = resolveTokenFilePath(opts.file);
-        if (!existsSync6(filePath)) {
+        if (!existsSync7(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 = readFileSync5(filePath, "utf-8");
+        const raw = readFileSync6(filePath, "utf-8");
         const { tokens, rawFile } = parseTokenFileSync(raw);
         let themesMap;
         if (opts.theme !== void 0) {
@@ -3376,7 +4220,7 @@ Create a reactscope.tokens.json file or use --file to specify a path.`
 Available themes: ${available}`
             );
           }
-          const baseResolver = new TokenResolver2(tokens);
+          const baseResolver = new TokenResolver3(tokens);
           const themeResolver = ThemeResolver.fromTokenFile(
             baseResolver,
             rawFile
@@ -3404,8 +4248,8 @@ Available themes: ${themeNames.join(", ")}`
           themes: themesMap
         });
         if (opts.out !== void 0) {
-          const outPath = resolve8(process.cwd(), opts.out);
-          writeFileSync6(outPath, output, "utf-8");
+          const outPath = resolve10(process.cwd(), opts.out);
+          writeFileSync7(outPath, output, "utf-8");
           process.stderr.write(`Exported ${tokens.length} tokens to ${outPath}
 `);
         } else {
@@ -3445,30 +4289,30 @@ function buildTable2(headers, rows) {
 }
 function resolveTokenFilePath2(fileFlag) {
   if (fileFlag !== void 0) {
-    return resolve9(process.cwd(), fileFlag);
+    return resolve11(process.cwd(), fileFlag);
   }
-  const configPath = resolve9(process.cwd(), CONFIG_FILE2);
-  if (existsSync7(configPath)) {
+  const configPath = resolve11(process.cwd(), CONFIG_FILE2);
+  if (existsSync8(configPath)) {
     try {
-      const raw = readFileSync6(configPath, "utf-8");
+      const raw = readFileSync7(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 resolve9(process.cwd(), file);
+        return resolve11(process.cwd(), file);
       }
     } catch {
     }
   }
-  return resolve9(process.cwd(), DEFAULT_TOKEN_FILE2);
+  return resolve11(process.cwd(), DEFAULT_TOKEN_FILE2);
 }
 function loadTokens(absPath) {
-  if (!existsSync7(absPath)) {
+  if (!existsSync8(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 = readFileSync6(absPath, "utf-8");
+  const raw = readFileSync7(absPath, "utf-8");
   return parseTokenFileSync2(raw);
 }
 function getRawValue(node, segments) {
@@ -3508,7 +4352,7 @@ function registerGet2(tokensCmd) {
     try {
       const filePath = resolveTokenFilePath2(opts.file);
       const { tokens } = loadTokens(filePath);
-      const resolver = new TokenResolver3(tokens);
+      const resolver = new TokenResolver4(tokens);
       const resolvedValue = resolver.resolve(tokenPath);
       const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
       if (useJson) {
@@ -3534,7 +4378,7 @@ function registerList2(tokensCmd) {
       try {
         const filePath = resolveTokenFilePath2(opts.file);
         const { tokens } = loadTokens(filePath);
-        const resolver = new TokenResolver3(tokens);
+        const resolver = new TokenResolver4(tokens);
         const filtered = resolver.list(opts.type, category);
         const useJson = opts.format === "json" || opts.format !== "table" && !isTTY2();
         if (useJson) {
@@ -3564,7 +4408,7 @@ function registerSearch(tokensCmd) {
       try {
         const filePath = resolveTokenFilePath2(opts.file);
         const { tokens } = loadTokens(filePath);
-        const resolver = new TokenResolver3(tokens);
+        const resolver = new TokenResolver4(tokens);
         const useJson = opts.format === "json" || opts.format !== "table" && !isTTY2();
         const typesToSearch = opts.type ? [opts.type] : [
           "color",
@@ -3647,7 +4491,7 @@ function registerResolve(tokensCmd) {
       const filePath = resolveTokenFilePath2(opts.file);
       const absFilePath = filePath;
       const { tokens, rawFile } = loadTokens(absFilePath);
-      const resolver = new TokenResolver3(tokens);
+      const resolver = new TokenResolver4(tokens);
       resolver.resolve(tokenPath);
       const chain = buildResolutionChain(tokenPath, rawFile.tokens);
       const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
@@ -3682,13 +4526,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 = resolveTokenFilePath2(opts.file);
-      if (!existsSync7(filePath)) {
+      if (!existsSync8(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 = readFileSync6(filePath, "utf-8");
+      const raw = readFileSync7(filePath, "utf-8");
       const useJson = opts.format === "json" || opts.format !== "text" && !isTTY2();
       const errors = [];
       let parsed;
@@ -3756,7 +4600,7 @@ function outputValidationResult(filePath, errors, useJson) {
   }
 }
 function createTokensCommand() {
-  const tokensCmd = new Command6("tokens").description(
+  const tokensCmd = new Command7("tokens").description(
     "Query and validate design tokens from a reactscope.tokens.json file"
   );
   registerGet2(tokensCmd);
@@ -3770,7 +4614,7 @@ function createTokensCommand() {
 
 // src/program.ts
 function createProgram(options = {}) {
-  const program2 = new Command7("scope").version(options.version ?? "0.1.0").description("Scope \u2014 React instrumentation toolkit");
+  const program2 = new Command8("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 {
@@ -3843,7 +4687,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 = readFileSync7(tracePath, "utf-8");
+    const raw = readFileSync8(tracePath, "utf-8");
     const trace = loadTrace(raw);
     const source = generateTest(trace, {
       description: opts.description,
@@ -3860,6 +4704,7 @@ function createProgram(options = {}) {
   const existingReportCmd = program2.commands.find((c) => c.name() === "report");
   if (existingReportCmd !== void 0) {
     registerBaselineSubCommand(existingReportCmd);
+    registerDiffSubCommand(existingReportCmd);
   }
   return program2;
 }