@agent-scope/cli 1.9.0 → 1.10.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync, writeFileSync, mkdirSync, appendFileSync, readdirSync } from 'fs';
+import { existsSync, readFileSync, writeFileSync, mkdirSync, appendFileSync, readdirSync, rmSync } from 'fs';
 import { join, resolve, dirname } from 'path';
 import * as readline from 'readline';
 import { Command } from 'commander';
@@ -8,7 +8,7 @@ import { chromium } from 'playwright';
 import { safeRender, ALL_CONTEXT_IDS, contextAxis, stressAxis, ALL_STRESS_IDS, RenderMatrix, SatoriRenderer, BrowserPool } from '@agent-scope/render';
 import * as esbuild from 'esbuild';
 import { createRequire } from 'module';
-import { TokenResolver, validateTokenFile, TokenValidationError, parseTokenFileSync, TokenParseError } from '@agent-scope/tokens';
+import { TokenResolver, validateTokenFile, TokenValidationError, parseTokenFileSync, TokenParseError, ComplianceEngine } from '@agent-scope/tokens';
 
 // src/init/index.ts
 function hasConfigFile(dir, stem) {
@@ -205,9 +205,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve6) => {
+  return new Promise((resolve7) => {
     rl.question(question, (answer) => {
-      resolve6(answer.trim());
+      resolve7(answer.trim());
     });
   });
 }
@@ -1997,6 +1997,325 @@ function createRenderCommand() {
   registerRenderAll(renderCmd);
   return renderCmd;
 }
+var DEFAULT_BASELINE_DIR = ".reactscope/baseline";
+var _pool3 = null;
+async function getPool3(viewportWidth, viewportHeight) {
+  if (_pool3 === null) {
+    _pool3 = new BrowserPool({
+      size: { browsers: 1, pagesPerBrowser: 4 },
+      viewportWidth,
+      viewportHeight
+    });
+    await _pool3.init();
+  }
+  return _pool3;
+}
+async function shutdownPool3() {
+  if (_pool3 !== null) {
+    await _pool3.close();
+    _pool3 = null;
+  }
+}
+async function renderComponent(filePath, componentName, props, viewportWidth, viewportHeight) {
+  const pool = await getPool3(viewportWidth, viewportHeight);
+  const htmlHarness = await buildComponentHarness(filePath, componentName, props, viewportWidth);
+  const slot = await pool.acquire();
+  const { page } = slot;
+  try {
+    await page.setContent(htmlHarness, { waitUntil: "load" });
+    await page.waitForFunction(
+      () => {
+        const w = window;
+        return w.__SCOPE_RENDER_COMPLETE__ === true;
+      },
+      { timeout: 15e3 }
+    );
+    const renderError = await page.evaluate(() => {
+      return window.__SCOPE_RENDER_ERROR__ ?? null;
+    });
+    if (renderError !== null) {
+      throw new Error(`Component render error: ${renderError}`);
+    }
+    const rootDir = process.cwd();
+    const classes = await page.evaluate(() => {
+      const set = /* @__PURE__ */ new Set();
+      document.querySelectorAll("[class]").forEach((el) => {
+        for (const c of el.className.split(/\s+/)) {
+          if (c) set.add(c);
+        }
+      });
+      return [...set];
+    });
+    const projectCss = await getCompiledCssForClasses(rootDir, classes);
+    if (projectCss != null && projectCss.length > 0) {
+      await page.addStyleTag({ content: projectCss });
+    }
+    const startMs = performance.now();
+    const rootLocator = page.locator("[data-reactscope-root]");
+    const boundingBox = await rootLocator.boundingBox();
+    if (boundingBox === null || boundingBox.width === 0 || boundingBox.height === 0) {
+      throw new Error(
+        `Component "${componentName}" rendered with zero bounding box \u2014 it may be invisible or not mounted`
+      );
+    }
+    const PAD = 24;
+    const MIN_W = 320;
+    const MIN_H = 200;
+    const clipX = Math.max(0, boundingBox.x - PAD);
+    const clipY = Math.max(0, boundingBox.y - PAD);
+    const rawW = boundingBox.width + PAD * 2;
+    const rawH = boundingBox.height + PAD * 2;
+    const clipW = Math.max(rawW, MIN_W);
+    const clipH = Math.max(rawH, MIN_H);
+    const safeW = Math.min(clipW, viewportWidth - clipX);
+    const safeH = Math.min(clipH, viewportHeight - clipY);
+    const screenshot = await page.screenshot({
+      clip: { x: clipX, y: clipY, width: safeW, height: safeH },
+      type: "png"
+    });
+    const computedStylesRaw = {};
+    const styles = await page.evaluate((sel) => {
+      const el = document.querySelector(sel);
+      if (el === null) return {};
+      const computed = window.getComputedStyle(el);
+      const out = {};
+      for (const prop of [
+        "display",
+        "width",
+        "height",
+        "color",
+        "backgroundColor",
+        "fontSize",
+        "fontFamily",
+        "padding",
+        "margin"
+      ]) {
+        out[prop] = computed.getPropertyValue(prop);
+      }
+      return out;
+    }, "[data-reactscope-root] > *");
+    computedStylesRaw["[data-reactscope-root] > *"] = styles;
+    const renderTimeMs = performance.now() - startMs;
+    return {
+      screenshot,
+      width: Math.round(safeW),
+      height: Math.round(safeH),
+      renderTimeMs,
+      computedStyles: computedStylesRaw
+    };
+  } finally {
+    pool.release(slot);
+  }
+}
+function extractComputedStyles(computedStylesRaw) {
+  const flat = {};
+  for (const styles of Object.values(computedStylesRaw)) {
+    Object.assign(flat, styles);
+  }
+  const colors = {};
+  const spacing = {};
+  const typography = {};
+  const borders = {};
+  const shadows = {};
+  for (const [prop, value] of Object.entries(flat)) {
+    if (prop === "color" || prop === "backgroundColor") {
+      colors[prop] = value;
+    } else if (prop === "padding" || prop === "margin") {
+      spacing[prop] = value;
+    } else if (prop === "fontSize" || prop === "fontFamily" || prop === "fontWeight" || prop === "lineHeight") {
+      typography[prop] = value;
+    } else if (prop === "borderRadius" || prop === "borderWidth") {
+      borders[prop] = value;
+    } else if (prop === "boxShadow") {
+      shadows[prop] = value;
+    }
+  }
+  return { colors, spacing, typography, borders, shadows };
+}
+async function runBaseline(options = {}) {
+  const {
+    outputDir = DEFAULT_BASELINE_DIR,
+    componentsGlob,
+    manifestPath,
+    viewportWidth = 375,
+    viewportHeight = 812
+  } = options;
+  const startTime = performance.now();
+  const rootDir = process.cwd();
+  const baselineDir = resolve(rootDir, outputDir);
+  const rendersDir = resolve(baselineDir, "renders");
+  if (existsSync(baselineDir)) {
+    rmSync(baselineDir, { recursive: true, force: true });
+  }
+  mkdirSync(rendersDir, { recursive: true });
+  let manifest;
+  if (manifestPath !== void 0) {
+    const { readFileSync: readFileSync7 } = await import('fs');
+    const absPath = resolve(rootDir, manifestPath);
+    if (!existsSync(absPath)) {
+      throw new Error(`Manifest not found at ${absPath}.`);
+    }
+    manifest = JSON.parse(readFileSync7(absPath, "utf-8"));
+    process.stderr.write(`Loaded manifest from ${manifestPath}
+`);
+  } else {
+    process.stderr.write("Scanning for React components\u2026\n");
+    manifest = await generateManifest({ rootDir });
+    const count = Object.keys(manifest.components).length;
+    process.stderr.write(`Found ${count} components.
+`);
+  }
+  writeFileSync(resolve(baselineDir, "manifest.json"), JSON.stringify(manifest, null, 2), "utf-8");
+  let componentNames = Object.keys(manifest.components);
+  if (componentsGlob !== void 0) {
+    componentNames = componentNames.filter((name) => matchGlob(componentsGlob, name));
+    process.stderr.write(
+      `Filtered to ${componentNames.length} components matching "${componentsGlob}".
+`
+    );
+  }
+  const total = componentNames.length;
+  if (total === 0) {
+    process.stderr.write("No components to baseline.\n");
+    const emptyReport = {
+      components: {},
+      totalProperties: 0,
+      totalOnSystem: 0,
+      totalOffSystem: 0,
+      aggregateCompliance: 1,
+      auditedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    writeFileSync(
+      resolve(baselineDir, "compliance.json"),
+      JSON.stringify(emptyReport, null, 2),
+      "utf-8"
+    );
+    return {
+      baselineDir,
+      componentCount: 0,
+      failureCount: 0,
+      wallClockMs: performance.now() - startTime
+    };
+  }
+  process.stderr.write(`Rendering ${total} components\u2026
+`);
+  const computedStylesMap = /* @__PURE__ */ new Map();
+  let completed = 0;
+  let failureCount = 0;
+  const CONCURRENCY = 4;
+  let nextIdx = 0;
+  const renderOne = async (name) => {
+    const descriptor = manifest.components[name];
+    if (descriptor === void 0) return;
+    const filePath = resolve(rootDir, descriptor.filePath);
+    const outcome = await safeRender(
+      () => renderComponent(filePath, name, {}, viewportWidth, viewportHeight),
+      {
+        props: {},
+        sourceLocation: {
+          file: descriptor.filePath,
+          line: descriptor.loc.start,
+          column: 0
+        }
+      }
+    );
+    completed++;
+    const pct = Math.round(completed / total * 100);
+    if (isTTY()) {
+      process.stderr.write(`${renderProgressBar(completed, total, name, pct)}\r`);
+    }
+    if (outcome.crashed) {
+      failureCount++;
+      const errPath = resolve(rendersDir, `${name}.error.json`);
+      writeFileSync(
+        errPath,
+        JSON.stringify(
+          {
+            component: name,
+            errorMessage: outcome.error.message,
+            heuristicFlags: outcome.error.heuristicFlags,
+            propsAtCrash: outcome.error.propsAtCrash
+          },
+          null,
+          2
+        ),
+        "utf-8"
+      );
+      return;
+    }
+    const result = outcome.result;
+    writeFileSync(resolve(rendersDir, `${name}.png`), result.screenshot);
+    const jsonOutput = formatRenderJson(name, {}, result);
+    writeFileSync(
+      resolve(rendersDir, `${name}.json`),
+      JSON.stringify(jsonOutput, null, 2),
+      "utf-8"
+    );
+    computedStylesMap.set(name, extractComputedStyles(result.computedStyles));
+  };
+  const worker = async () => {
+    while (nextIdx < componentNames.length) {
+      const i = nextIdx++;
+      const name = componentNames[i];
+      if (name !== void 0) {
+        await renderOne(name);
+      }
+    }
+  };
+  const workers = [];
+  for (let w = 0; w < Math.min(CONCURRENCY, total); w++) {
+    workers.push(worker());
+  }
+  await Promise.all(workers);
+  await shutdownPool3();
+  if (isTTY()) {
+    process.stderr.write("\n");
+  }
+  const resolver = new TokenResolver([]);
+  const engine = new ComplianceEngine(resolver);
+  const batchReport = engine.auditBatch(computedStylesMap);
+  writeFileSync(
+    resolve(baselineDir, "compliance.json"),
+    JSON.stringify(batchReport, null, 2),
+    "utf-8"
+  );
+  const wallClockMs = performance.now() - startTime;
+  const successCount = total - failureCount;
+  process.stderr.write(
+    `
+Baseline complete: ${successCount}/${total} components rendered` + (failureCount > 0 ? ` (${failureCount} failed)` : "") + ` in ${(wallClockMs / 1e3).toFixed(1)}s
+`
+  );
+  process.stderr.write(`Snapshot saved to ${baselineDir}
+`);
+  return { baselineDir, componentCount: total, failureCount, wallClockMs };
+}
+function registerBaselineSubCommand(reportCmd) {
+  reportCmd.command("baseline").description("Capture a baseline snapshot (manifest + renders + compliance) for later diffing").option(
+    "-o, --output <dir>",
+    "Output directory for the baseline snapshot",
+    DEFAULT_BASELINE_DIR
+  ).option("--components <glob>", "Glob pattern to baseline a subset of components").option("--manifest <path>", "Path to an existing manifest.json to use instead of regenerating").option("--viewport <WxH>", "Viewport size, e.g. 1280x720", "375x812").action(
+    async (opts) => {
+      try {
+        const [wStr, hStr] = opts.viewport.split("x");
+        const viewportWidth = Number.parseInt(wStr ?? "375", 10);
+        const viewportHeight = Number.parseInt(hStr ?? "812", 10);
+        await runBaseline({
+          outputDir: opts.output,
+          componentsGlob: opts.components,
+          manifestPath: opts.manifest,
+          viewportWidth,
+          viewportHeight
+        });
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
 
 // src/tree-formatter.ts
 var BRANCH = "\u251C\u2500\u2500 ";
@@ -2707,6 +3026,10 @@ function createProgram(options = {}) {
   program.addCommand(createTokensCommand());
   program.addCommand(createInstrumentCommand());
   program.addCommand(createInitCommand());
+  const existingReportCmd = program.commands.find((c) => c.name() === "report");
+  if (existingReportCmd !== void 0) {
+    registerBaselineSubCommand(existingReportCmd);
+  }
   return program;
 }