@agent-scope/cli 1.12.0 → 1.13.0

package/dist/index.js

@@ -205,9 +205,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve11) => {
+  return new Promise((resolve12) => {
     rl.question(question, (answer) => {
-      resolve11(answer.trim());
+      resolve12(answer.trim());
     });
   });
 }
@@ -3143,12 +3143,12 @@ async function runBaseline(options = {}) {
   mkdirSync(rendersDir, { recursive: true });
   let manifest;
   if (manifestPath !== void 0) {
-    const { readFileSync: readFileSync8 } = await import('fs');
+    const { readFileSync: readFileSync9 } = await import('fs');
     const absPath = resolve(rootDir, manifestPath);
     if (!existsSync(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 {
@@ -3309,6 +3309,479 @@ function registerBaselineSubCommand(reportCmd) {
     }
   );
 }
+var DEFAULT_BASELINE_DIR2 = ".reactscope/baseline";
+function loadBaselineCompliance(baselineDir) {
+  const compliancePath = resolve(baselineDir, "compliance.json");
+  if (!existsSync(compliancePath)) return null;
+  const raw = JSON.parse(readFileSync(compliancePath, "utf-8"));
+  return raw;
+}
+function loadBaselineRenderJson(baselineDir, componentName) {
+  const jsonPath = resolve(baselineDir, "renders", `${componentName}.json`);
+  if (!existsSync(jsonPath)) return null;
+  return JSON.parse(readFileSync(jsonPath, "utf-8"));
+}
+var _pool5 = null;
+async function getPool5(viewportWidth, viewportHeight) {
+  if (_pool5 === null) {
+    _pool5 = new BrowserPool({
+      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 = resolve(rootDir, baselineDirRaw);
+  if (!existsSync(baselineDir)) {
+    throw new Error(
+      `Baseline directory not found at "${baselineDir}". Run \`scope report baseline\` first to create a baseline snapshot.`
+    );
+  }
+  const baselineManifestPath = resolve(baselineDir, "manifest.json");
+  if (!existsSync(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(readFileSync(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 = resolve(rootDir, manifestPath);
+    if (!existsSync(absPath)) {
+      throw new Error(`Manifest not found at "${absPath}".`);
+    }
+    currentManifest = JSON.parse(readFileSync(absPath, "utf-8"));
+    process.stderr.write(`Loaded manifest from ${manifestPath}
+`);
+  } else {
+    process.stderr.write("Scanning for React components\u2026\n");
+    currentManifest = await generateManifest({ 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 = resolve(rootDir, descriptor.filePath);
+    const outcome = await safeRender(
+      () => 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 TokenResolver([]);
+  const engine = new ComplianceEngine(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) {
+          writeFileSync(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 BRANCH2 = "\u251C\u2500\u2500 ";
@@ -4126,6 +4599,7 @@ function createProgram(options = {}) {
   const existingReportCmd = program.commands.find((c) => c.name() === "report");
   if (existingReportCmd !== void 0) {
     registerBaselineSubCommand(existingReportCmd);
+    registerDiffSubCommand(existingReportCmd);
   }
   return program;
 }