@agent-scope/cli 1.15.0 → 1.17.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { existsSync, writeFileSync, readFileSync, mkdirSync, appendFileSync, readdirSync, rmSync } from 'fs';
-import { resolve, join, dirname } from 'path';
+import { existsSync, writeFileSync, readFileSync, mkdirSync, appendFileSync, readdirSync, rmSync, statSync, createReadStream } from 'fs';
+import { resolve, join, extname, dirname } from 'path';
 import { generateManifest } from '@agent-scope/manifest';
 import { SpriteSheetGenerator, safeRender, BrowserPool, ALL_CONTEXT_IDS, contextAxis, stressAxis, ALL_STRESS_IDS, RenderMatrix, SatoriRenderer } from '@agent-scope/render';
 import { TokenResolver, ComplianceEngine, parseTokenFileSync, ThemeResolver, exportTokens, validateTokenFile, TokenValidationError, TokenParseError, ImpactAnalyzer } from '@agent-scope/tokens';
@@ -9,6 +9,8 @@ import { createRequire } from 'module';
 import * as readline from 'readline';
 import { chromium } from 'playwright';
 import { loadTrace, generateTest, getBrowserEntryScript } from '@agent-scope/playwright';
+import { createServer } from 'http';
+import { buildSite } from '@agent-scope/site';
 
 // src/ci/commands.ts
 async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss) {
@@ -1107,9 +1109,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve15) => {
+  return new Promise((resolve17) => {
     rl.question(question, (answer) => {
-      resolve15(answer.trim());
+      resolve17(answer.trim());
     });
   });
 }
@@ -2389,8 +2391,8 @@ Available: ${available}`
         wastedRenders: opts.wastedRenders
       });
       await shutdownPool2();
-      const fmt = resolveFormat2(opts.format);
-      if (fmt === "json") {
+      const fmt2 = resolveFormat2(opts.format);
+      if (fmt2 === "json") {
         process.stdout.write(`${JSON.stringify(instrumentRoot, null, 2)}
 `);
       } else {
@@ -3109,12 +3111,12 @@ Available: ${available}`
           );
           return;
         }
-        const fmt = resolveSingleFormat(opts.format);
-        if (fmt === "json") {
+        const fmt2 = resolveSingleFormat(opts.format);
+        if (fmt2 === "json") {
           const json = formatRenderJson(componentName, props, result);
           process.stdout.write(`${JSON.stringify(json, null, 2)}
 `);
-        } else if (fmt === "file") {
+        } else if (fmt2 === "file") {
           const dir = resolve(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync(dir, { recursive: true });
           const outPath = resolve(dir, `${componentName}.png`);
@@ -3235,8 +3237,8 @@ Available: ${available}`
           process.stderr.write(`Sprite sheet saved to ${spritePath}
 `);
         }
-        const fmt = resolveMatrixFormat(opts.format, opts.sprite !== void 0);
-        if (fmt === "file") {
+        const fmt2 = resolveMatrixFormat(opts.format, opts.sprite !== void 0);
+        if (fmt2 === "file") {
           const { SpriteSheetGenerator: SpriteSheetGenerator2 } = await import('@agent-scope/render');
           const gen = new SpriteSheetGenerator2();
           const sheet = await gen.generate(result);
@@ -3249,10 +3251,10 @@ Available: ${available}`
             `\u2713 ${componentName} matrix (${result.stats.totalCells} cells) \u2192 ${relPath} (${result.stats.wallClockTimeMs.toFixed(0)}ms total)
 `
           );
-        } else if (fmt === "json") {
+        } else if (fmt2 === "json") {
           process.stdout.write(`${JSON.stringify(formatMatrixJson(result), null, 2)}
 `);
-        } else if (fmt === "png") {
+        } else if (fmt2 === "png") {
           if (opts.sprite !== void 0) {
           } else {
             const { SpriteSheetGenerator: SpriteSheetGenerator2 } = await import('@agent-scope/render');
@@ -3260,9 +3262,9 @@ Available: ${available}`
             const sheet = await gen.generate(result);
             process.stdout.write(sheet.png);
           }
-        } else if (fmt === "html") {
+        } else if (fmt2 === "html") {
           process.stdout.write(formatMatrixHtml(componentName, result));
-        } else if (fmt === "csv") {
+        } else if (fmt2 === "csv") {
           process.stdout.write(formatMatrixCsv(componentName, result));
         }
       } catch (err) {
@@ -3563,12 +3565,12 @@ async function runBaseline(options = {}) {
   mkdirSync(rendersDir, { recursive: true });
   let manifest;
   if (manifestPath !== void 0) {
-    const { readFileSync: readFileSync11 } = await import('fs');
+    const { readFileSync: readFileSync12 } = await import('fs');
     const absPath = resolve(rootDir, manifestPath);
     if (!existsSync(absPath)) {
       throw new Error(`Manifest not found at ${absPath}.`);
     }
-    manifest = JSON.parse(readFileSync11(absPath, "utf-8"));
+    manifest = JSON.parse(readFileSync12(absPath, "utf-8"));
     process.stderr.write(`Loaded manifest from ${manifestPath}
 `);
   } else {
@@ -4202,6 +4204,135 @@ function registerDiffSubCommand(reportCmd) {
     }
   );
 }
+var STATUS_BADGE = {
+  added: "\u2705 added",
+  removed: "\u{1F5D1}\uFE0F removed",
+  unchanged: "\u2014 unchanged",
+  compliance_regressed: "\u274C regressed",
+  compliance_improved: "\u{1F4C8} improved",
+  size_changed: "\u{1F4D0} resized"
+};
+function fmt(n) {
+  return `${(n * 100).toFixed(1)}%`;
+}
+function fmtDelta(delta) {
+  if (delta === null) return "\u2014";
+  const sign = delta >= 0 ? "+" : "";
+  return `${sign}${(delta * 100).toFixed(1)}%`;
+}
+function fmtDimensions(d) {
+  if (d === null) return "\u2014";
+  return `${d.width} \xD7 ${d.height}`;
+}
+function complianceDeltaArrow(diff) {
+  const delta = diff.currentAggregateCompliance - diff.baselineAggregateCompliance;
+  if (Math.abs(delta) < 5e-4) return `\u2192 ${fmt(diff.currentAggregateCompliance)} (no change)`;
+  const arrow = delta > 0 ? "\u2191" : "\u2193";
+  return `${arrow} ${fmtDelta(delta)}`;
+}
+function formatPrComment(diff) {
+  const { summary, components } = diff;
+  const lines = [];
+  const hasRegressions = diff.hasRegressions;
+  const headerEmoji = hasRegressions ? "\u26A0\uFE0F" : "\u2705";
+  lines.push(`## ${headerEmoji} Scope Report`);
+  lines.push("");
+  lines.push("| Metric | Value |");
+  lines.push("|---|---|");
+  lines.push(`| Baseline compliance | ${fmt(diff.baselineAggregateCompliance)} |`);
+  lines.push(`| Current compliance | ${fmt(diff.currentAggregateCompliance)} |`);
+  lines.push(`| Delta | ${complianceDeltaArrow(diff)} |`);
+  lines.push(
+    `| Components | ${summary.total} total \xB7 ${summary.added} added \xB7 ${summary.removed} removed \xB7 ${summary.complianceRegressed} regressed |`
+  );
+  if (summary.renderFailed > 0) {
+    lines.push(`| Render failures | ${summary.renderFailed} |`);
+  }
+  lines.push("");
+  const changed = components.filter((c) => c.status !== "unchanged");
+  const unchanged = components.filter((c) => c.status === "unchanged");
+  if (changed.length > 0) {
+    lines.push("### Changes");
+    lines.push("");
+    lines.push("| Component | Status | Compliance \u0394 | Dimensions |");
+    lines.push("|---|---|---|---|");
+    for (const c of changed) {
+      const badge = STATUS_BADGE[c.status];
+      const delta = fmtDelta(c.complianceDelta);
+      const dims = fmtDimensions(c.currentDimensions ?? c.baselineDimensions);
+      lines.push(`| \`${c.name}\` | ${badge} | ${delta} | ${dims} |`);
+    }
+    lines.push("");
+  }
+  if (unchanged.length > 0) {
+    lines.push(
+      `<details><summary>${unchanged.length} unchanged component${unchanged.length === 1 ? "" : "s"}</summary>`
+    );
+    lines.push("");
+    lines.push("| Component | Compliance |");
+    lines.push("|---|---|");
+    for (const c of unchanged) {
+      lines.push(
+        `| \`${c.name}\` | ${c.currentCompliance !== null ? fmt(c.currentCompliance) : "\u2014"} |`
+      );
+    }
+    lines.push("");
+    lines.push("</details>");
+    lines.push("");
+  }
+  lines.push(
+    `> Generated by [Scope](https://github.com/FlatFilers/Scope) \xB7 diffed at ${diff.diffedAt}`
+  );
+  return lines.join("\n");
+}
+function loadDiffResult(filePath) {
+  const abs = resolve(filePath);
+  if (!existsSync(abs)) {
+    throw new Error(`DiffResult file not found: ${abs}`);
+  }
+  let raw;
+  try {
+    raw = readFileSync(abs, "utf-8");
+  } catch (err) {
+    throw new Error(
+      `Failed to read DiffResult file: ${err instanceof Error ? err.message : String(err)}`
+    );
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    throw new Error(`DiffResult file is not valid JSON: ${abs}`);
+  }
+  if (typeof parsed !== "object" || parsed === null || !("diffedAt" in parsed) || !("components" in parsed) || !("summary" in parsed)) {
+    throw new Error(
+      `DiffResult file does not match expected shape (missing diffedAt/components/summary): ${abs}`
+    );
+  }
+  return parsed;
+}
+function registerPrCommentSubCommand(reportCmd) {
+  reportCmd.command("pr-comment").description(
+    "Format a DiffResult JSON file as a GitHub PR comment (Markdown, written to stdout)"
+  ).requiredOption("-i, --input <path>", "Path to DiffResult JSON (from scope report diff --json)").option("-o, --output <path>", "Write comment to file instead of stdout").action(async (opts) => {
+    try {
+      const diff = loadDiffResult(opts.input);
+      const comment = formatPrComment(diff);
+      if (opts.output !== void 0) {
+        writeFileSync(resolve(opts.output), comment, "utf-8");
+        process.stderr.write(`PR comment written to ${opts.output}
+`);
+      } else {
+        process.stdout.write(`${comment}
+`);
+      }
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
 
 // src/tree-formatter.ts
 var BRANCH2 = "\u251C\u2500\u2500 ";
@@ -4480,6 +4611,130 @@ function buildStructuredReport(report) {
     route: report.route?.pattern ?? null
   };
 }
+var MIME_TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon"
+};
+function registerBuild(siteCmd) {
+  siteCmd.command("build").description("Build a static HTML gallery from .reactscope/ output").option("-i, --input <path>", "Path to .reactscope input directory", ".reactscope").option("-o, --output <path>", "Output directory for generated site", ".reactscope/site").option("--base-path <path>", "Base URL path prefix for subdirectory deployment", "/").option("--compliance <path>", "Path to compliance batch report JSON").option("--title <text>", "Site title", "Scope \u2014 Component Gallery").action(
+    async (opts) => {
+      try {
+        const inputDir = resolve(process.cwd(), opts.input);
+        const outputDir = resolve(process.cwd(), opts.output);
+        if (!existsSync(inputDir)) {
+          throw new Error(
+            `Input directory not found: ${inputDir}
+Run \`scope manifest generate\` and \`scope render\` first.`
+          );
+        }
+        const manifestPath = join(inputDir, "manifest.json");
+        if (!existsSync(manifestPath)) {
+          throw new Error(
+            `Manifest not found at ${manifestPath}
+Run \`scope manifest generate\` first.`
+          );
+        }
+        process.stderr.write(`Building site from ${inputDir}\u2026
+`);
+        await buildSite({
+          inputDir,
+          outputDir,
+          basePath: opts.basePath,
+          ...opts.compliance !== void 0 && {
+            compliancePath: resolve(process.cwd(), opts.compliance)
+          },
+          title: opts.title
+        });
+        process.stderr.write(`Site written to ${outputDir}
+`);
+        process.stdout.write(`${outputDir}
+`);
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+function registerServe(siteCmd) {
+  siteCmd.command("serve").description("Serve the built static site locally").option("-p, --port <number>", "Port to listen on", "3000").option("-d, --dir <path>", "Directory to serve", ".reactscope/site").action((opts) => {
+    try {
+      const port = Number.parseInt(opts.port, 10);
+      if (Number.isNaN(port) || port < 1 || port > 65535) {
+        throw new Error(`Invalid port: ${opts.port}`);
+      }
+      const serveDir = resolve(process.cwd(), opts.dir);
+      if (!existsSync(serveDir)) {
+        throw new Error(
+          `Serve directory not found: ${serveDir}
+Run \`scope site build\` first.`
+        );
+      }
+      const server = createServer((req, res) => {
+        const rawUrl = req.url ?? "/";
+        const urlPath = decodeURIComponent(rawUrl.split("?")[0] ?? "/");
+        const filePath = join(serveDir, urlPath.endsWith("/") ? `${urlPath}index.html` : urlPath);
+        if (!filePath.startsWith(serveDir)) {
+          res.writeHead(403, { "Content-Type": "text/plain" });
+          res.end("Forbidden");
+          return;
+        }
+        if (existsSync(filePath) && statSync(filePath).isFile()) {
+          const ext = extname(filePath).toLowerCase();
+          const contentType = MIME_TYPES[ext] ?? "application/octet-stream";
+          res.writeHead(200, { "Content-Type": contentType });
+          createReadStream(filePath).pipe(res);
+          return;
+        }
+        const htmlPath = `${filePath}.html`;
+        if (existsSync(htmlPath) && statSync(htmlPath).isFile()) {
+          res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+          createReadStream(htmlPath).pipe(res);
+          return;
+        }
+        res.writeHead(404, { "Content-Type": "text/plain" });
+        res.end(`Not found: ${urlPath}`);
+      });
+      server.listen(port, () => {
+        process.stderr.write(`Scope site running at http://localhost:${port}
+`);
+        process.stderr.write(`Serving ${serveDir}
+`);
+        process.stderr.write("Press Ctrl+C to stop.\n");
+      });
+      server.on("error", (err) => {
+        if (err.code === "EADDRINUSE") {
+          process.stderr.write(`Error: Port ${port} is already in use.
+`);
+        } else {
+          process.stderr.write(`Server error: ${err.message}
+`);
+        }
+        process.exit(1);
+      });
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
+function createSiteCommand() {
+  const siteCmd = new Command("site").description(
+    "Build and serve the static component gallery site"
+  );
+  registerBuild(siteCmd);
+  registerServe(siteCmd);
+  return siteCmd;
+}
 var DEFAULT_STYLES_PATH = ".reactscope/compliance-styles.json";
 function loadStylesFile(stylesPath) {
   const absPath = resolve(process.cwd(), stylesPath);
@@ -5497,7 +5752,9 @@ function createProgram(options = {}) {
   if (existingReportCmd !== void 0) {
     registerBaselineSubCommand(existingReportCmd);
     registerDiffSubCommand(existingReportCmd);
+    registerPrCommentSubCommand(existingReportCmd);
   }
+  program.addCommand(createSiteCommand());
   return program;
 }