@agent-scope/cli 1.0.1

package/dist/index.js

@@ -0,0 +1,1422 @@
+import { readFileSync, existsSync, mkdirSync, writeFileSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { generateManifest } from '@agent-scope/manifest';
+import { Command } from 'commander';
+import { loadTrace, generateTest, getBrowserEntryScript } from '@agent-scope/playwright';
+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';
+
+// src/manifest-commands.ts
+
+// src/manifest-formatter.ts
+function isTTY() {
+  return process.stdout.isTTY === true;
+}
+function pad(value, width) {
+  return value.length >= width ? value.slice(0, width) : value + " ".repeat(width - value.length);
+}
+function buildTable(headers, rows) {
+  const colWidths = headers.map(
+    (h, i) => Math.max(h.length, ...rows.map((r) => (r[i] ?? "").length))
+  );
+  const divider = colWidths.map((w) => "-".repeat(w)).join("  ");
+  const headerRow = headers.map((h, i) => pad(h, colWidths[i] ?? 0)).join("  ");
+  const dataRows = rows.map(
+    (row2) => row2.map((cell, i) => pad(cell ?? "", colWidths[i] ?? 0)).join("  ")
+  );
+  return [headerRow, divider, ...dataRows].join("\n");
+}
+function formatListTable(rows) {
+  if (rows.length === 0) return "No components found.";
+  const headers = ["NAME", "FILE", "COMPLEXITY", "HOOKS", "CONTEXTS"];
+  const tableRows = rows.map((r) => [
+    r.name,
+    r.file,
+    r.complexityClass,
+    String(r.hookCount),
+    String(r.contextCount)
+  ]);
+  return buildTable(headers, tableRows);
+}
+function formatListJson(rows) {
+  return JSON.stringify(rows, null, 2);
+}
+function formatSideEffects(se) {
+  const parts = [];
+  if (se.fetches.length > 0) parts.push(`fetches: ${se.fetches.join(", ")}`);
+  if (se.timers) parts.push("timers");
+  if (se.subscriptions.length > 0) parts.push(`subscriptions: ${se.subscriptions.join(", ")}`);
+  if (se.globalListeners) parts.push("globalListeners");
+  return parts.length > 0 ? parts.join(" | ") : "none";
+}
+function formatGetTable(name, descriptor) {
+  const propNames = Object.keys(descriptor.props);
+  const lines = [
+    `Component: ${name}`,
+    `  File:           ${descriptor.filePath}`,
+    `  Export:         ${descriptor.exportType}`,
+    `  Display Name:   ${descriptor.displayName}`,
+    `  Complexity:     ${descriptor.complexityClass}`,
+    `  Memoized:       ${descriptor.memoized}`,
+    `  Forwarded Ref:  ${descriptor.forwardedRef}`,
+    `  HOC Wrappers:   ${descriptor.hocWrappers.join(", ") || "none"}`,
+    `  Hooks:          ${descriptor.detectedHooks.join(", ") || "none"}`,
+    `  Contexts:       ${descriptor.requiredContexts.join(", ") || "none"}`,
+    `  Composes:       ${descriptor.composes.join(", ") || "none"}`,
+    `  Composed By:    ${descriptor.composedBy.join(", ") || "none"}`,
+    `  Side Effects:   ${formatSideEffects(descriptor.sideEffects)}`,
+    "",
+    `  Props (${propNames.length}):`
+  ];
+  if (propNames.length === 0) {
+    lines.push("    (none)");
+  } else {
+    for (const propName of propNames) {
+      const p = descriptor.props[propName];
+      if (p === void 0) continue;
+      const req = p.required ? "required" : "optional";
+      const def = p.default !== void 0 ? ` [default: ${p.default}]` : "";
+      const vals = p.values !== void 0 ? ` (${p.values.join(" | ")})` : "";
+      lines.push(`    ${propName}: ${p.rawType}${vals} \u2014 ${req}${def}`);
+    }
+  }
+  return lines.join("\n");
+}
+function formatGetJson(name, descriptor) {
+  return JSON.stringify({ name, ...descriptor }, null, 2);
+}
+function formatQueryTable(rows, queryDesc) {
+  if (rows.length === 0) return `No components match: ${queryDesc}`;
+  const headers = ["NAME", "FILE", "COMPLEXITY", "HOOKS", "CONTEXTS"];
+  const tableRows = rows.map((r) => [r.name, r.file, r.complexityClass, r.hooks, r.contexts]);
+  return `Query: ${queryDesc}
+
+${buildTable(headers, tableRows)}`;
+}
+function formatQueryJson(rows) {
+  return JSON.stringify(rows, null, 2);
+}
+function matchGlob(pattern, value) {
+  const escaped = pattern.replace(/[.+^${}()|[\]\\]/g, "\\$&");
+  const regexStr = escaped.replace(/\*\*/g, "\xA7GLOBSTAR\xA7").replace(/\*/g, "[^/]*").replace(/§GLOBSTAR§/g, ".*");
+  const regex = new RegExp(`^${regexStr}$`, "i");
+  return regex.test(value);
+}
+
+// src/manifest-commands.ts
+var MANIFEST_PATH = ".reactscope/manifest.json";
+function loadManifest(manifestPath = MANIFEST_PATH) {
+  const absPath = resolve(process.cwd(), manifestPath);
+  if (!existsSync(absPath)) {
+    throw new Error(`Manifest not found at ${absPath}.
+Run \`scope manifest generate\` first.`);
+  }
+  const raw = readFileSync(absPath, "utf-8");
+  return JSON.parse(raw);
+}
+function resolveFormat(formatFlag) {
+  if (formatFlag === "json") return "json";
+  if (formatFlag === "table") return "table";
+  return isTTY() ? "table" : "json";
+}
+function registerList(manifestCmd) {
+  manifestCmd.command("list").description("List all components in the manifest").option("--format <fmt>", "Output format: json or table (default: auto-detect)").option("--filter <glob>", "Filter components by name glob pattern").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH).action((opts) => {
+    try {
+      const manifest = loadManifest(opts.manifest);
+      const format = resolveFormat(opts.format);
+      let entries = Object.entries(manifest.components);
+      if (opts.filter !== void 0) {
+        const filterPattern = opts.filter ?? "";
+        entries = entries.filter(([name]) => matchGlob(filterPattern, name));
+      }
+      const rows = entries.map(([name, descriptor]) => ({
+        name,
+        file: descriptor.filePath,
+        complexityClass: descriptor.complexityClass,
+        hookCount: descriptor.detectedHooks.length,
+        contextCount: descriptor.requiredContexts.length
+      }));
+      const output = format === "json" ? formatListJson(rows) : formatListTable(rows);
+      process.stdout.write(`${output}
+`);
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
+function registerGet(manifestCmd) {
+  manifestCmd.command("get <name>").description("Get full details of a single component by name").option("--format <fmt>", "Output format: json or table (default: auto-detect)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH).action((name, opts) => {
+    try {
+      const manifest = loadManifest(opts.manifest);
+      const format = resolveFormat(opts.format);
+      const descriptor = manifest.components[name];
+      if (descriptor === void 0) {
+        const available = Object.keys(manifest.components).slice(0, 5).join(", ");
+        const hint = Object.keys(manifest.components).length > 5 ? ", \u2026" : "";
+        throw new Error(
+          `Component "${name}" not found in manifest.
+Available: ${available}${hint}`
+        );
+      }
+      const output = format === "json" ? formatGetJson(name, descriptor) : formatGetTable(name, descriptor);
+      process.stdout.write(`${output}
+`);
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
+function registerQuery(manifestCmd) {
+  manifestCmd.command("query").description("Query components by attributes").option("--context <name>", "Find components consuming a context").option("--hook <name>", "Find components using a specific hook").option("--complexity <class>", "Filter by complexity class: simple or complex").option("--side-effects", "Find components with any side effects", false).option("--has-fetch", "Find components with fetch calls", false).option("--format <fmt>", "Output format: json or table (default: auto-detect)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH).action(
+    (opts) => {
+      try {
+        const manifest = loadManifest(opts.manifest);
+        const format = resolveFormat(opts.format);
+        const queryParts = [];
+        if (opts.context !== void 0) queryParts.push(`context=${opts.context}`);
+        if (opts.hook !== void 0) queryParts.push(`hook=${opts.hook}`);
+        if (opts.complexity !== void 0) queryParts.push(`complexity=${opts.complexity}`);
+        if (opts.sideEffects) queryParts.push("side-effects");
+        if (opts.hasFetch) queryParts.push("has-fetch");
+        if (queryParts.length === 0) {
+          process.stderr.write(
+            "No query flags specified. Use --context, --hook, --complexity, --side-effects, or --has-fetch.\n"
+          );
+          process.exit(1);
+        }
+        const queryDesc = queryParts.join(", ");
+        let entries = Object.entries(manifest.components);
+        if (opts.context !== void 0) {
+          const ctx = opts.context;
+          entries = entries.filter(([, d]) => d.requiredContexts.includes(ctx));
+        }
+        if (opts.hook !== void 0) {
+          const hook = opts.hook;
+          entries = entries.filter(([, d]) => d.detectedHooks.includes(hook));
+        }
+        if (opts.complexity !== void 0) {
+          const cls = opts.complexity;
+          entries = entries.filter(([, d]) => d.complexityClass === cls);
+        }
+        if (opts.sideEffects) {
+          entries = entries.filter(([, d]) => {
+            const se = d.sideEffects;
+            return se.fetches.length > 0 || se.timers || se.subscriptions.length > 0 || se.globalListeners;
+          });
+        }
+        if (opts.hasFetch) {
+          entries = entries.filter(([, d]) => d.sideEffects.fetches.length > 0);
+        }
+        const rows = entries.map(([name, d]) => ({
+          name,
+          file: d.filePath,
+          complexityClass: d.complexityClass,
+          hooks: d.detectedHooks.join(", ") || "\u2014",
+          contexts: d.requiredContexts.join(", ") || "\u2014"
+        }));
+        const output = format === "json" ? formatQueryJson(rows) : formatQueryTable(rows, queryDesc);
+        process.stdout.write(`${output}
+`);
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+function registerGenerate(manifestCmd) {
+  manifestCmd.command("generate").description(
+    "Generate the component manifest from source and write to .reactscope/manifest.json"
+  ).option("--root <path>", "Project root directory (default: cwd)").option("--output <path>", "Output path for manifest.json", MANIFEST_PATH).option("--include <globs>", "Comma-separated glob patterns to include").option("--exclude <globs>", "Comma-separated glob patterns to exclude").action(async (opts) => {
+    try {
+      const rootDir = resolve(process.cwd(), opts.root ?? ".");
+      const outputPath = resolve(process.cwd(), opts.output);
+      const include = opts.include?.split(",").map((s) => s.trim());
+      const exclude = opts.exclude?.split(",").map((s) => s.trim());
+      process.stderr.write(`Scanning ${rootDir} for React components...
+`);
+      const manifest = await generateManifest({
+        rootDir,
+        ...include !== void 0 && { include },
+        ...exclude !== void 0 && { exclude }
+      });
+      const componentCount = Object.keys(manifest.components).length;
+      process.stderr.write(`Found ${componentCount} components.
+`);
+      const outputDir = outputPath.replace(/\/[^/]+$/, "");
+      if (!existsSync(outputDir)) {
+        mkdirSync(outputDir, { recursive: true });
+      }
+      writeFileSync(outputPath, JSON.stringify(manifest, null, 2), "utf-8");
+      process.stderr.write(`Manifest written to ${outputPath}
+`);
+      process.stdout.write(`${outputPath}
+`);
+    } catch (err) {
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
+function createManifestCommand() {
+  const manifestCmd = new Command("manifest").description(
+    "Query and explore the component manifest"
+  );
+  registerList(manifestCmd);
+  registerGet(manifestCmd);
+  registerQuery(manifestCmd);
+  registerGenerate(manifestCmd);
+  return manifestCmd;
+}
+async function browserCapture(options) {
+  const { url, timeout = 1e4, wait = 0 } = options;
+  const browser = await chromium.launch({ headless: true });
+  try {
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    await page.addInitScript({ content: getBrowserEntryScript() });
+    await page.goto(url, {
+      waitUntil: "networkidle",
+      timeout: timeout + 5e3
+    });
+    await page.waitForFunction(
+      () => {
+        return typeof window.__SCOPE_CAPTURE__ === "function" && (document.readyState === "complete" || document.readyState === "interactive");
+      },
+      { timeout }
+    );
+    if (wait > 0) {
+      await page.waitForTimeout(wait);
+    }
+    const raw = await page.evaluate(async () => {
+      const win = window;
+      if (typeof win.__SCOPE_CAPTURE__ !== "function") {
+        throw new Error("Scope runtime not injected");
+      }
+      return win.__SCOPE_CAPTURE__();
+    });
+    if (raw !== null && typeof raw === "object" && "error" in raw && typeof raw.error === "string") {
+      throw new Error(`Scope capture failed: ${raw.error}`);
+    }
+    const report = { ...raw, route: null };
+    return { report };
+  } finally {
+    await browser.close();
+  }
+}
+function writeReportToFile(report, outputPath, pretty) {
+  const json = pretty ? JSON.stringify(report, null, 2) : JSON.stringify(report);
+  writeFileSync(outputPath, json, "utf-8");
+}
+async function buildComponentHarness(filePath, componentName, props, viewportWidth) {
+  const bundledScript = await bundleComponentToIIFE(filePath, componentName, props);
+  return wrapInHtml(bundledScript, viewportWidth);
+}
+async function bundleComponentToIIFE(filePath, componentName, props) {
+  const propsJson = JSON.stringify(props).replace(/<\/script>/gi, "<\\/script>");
+  const wrapperCode = (
+    /* ts */
+    `
+import * as __scopeMod from ${JSON.stringify(filePath)};
+import { createRoot } from "react-dom/client";
+import { createElement } from "react";
+
+(function scopeRenderHarness() {
+  var Component =
+    __scopeMod["default"] ||
+    __scopeMod[${JSON.stringify(componentName)}] ||
+    (Object.values(__scopeMod).find(
+      function(v) { return typeof v === "function" && /^[A-Z]/.test(v.name || ""); }
+    ));
+
+  if (!Component) {
+    window.__SCOPE_RENDER_ERROR__ =
+      "No renderable component found. Checked: default, " +
+      ${JSON.stringify(componentName)} + ", and PascalCase named exports. " +
+      "Available exports: " + Object.keys(__scopeMod).join(", ");
+    window.__SCOPE_RENDER_COMPLETE__ = true;
+    return;
+  }
+
+  try {
+    var props = ${propsJson};
+    var rootEl = document.getElementById("scope-root");
+    if (!rootEl) {
+      window.__SCOPE_RENDER_ERROR__ = "#scope-root element not found";
+      window.__SCOPE_RENDER_COMPLETE__ = true;
+      return;
+    }
+    createRoot(rootEl).render(createElement(Component, props));
+    // Use requestAnimationFrame to let React flush the render
+    requestAnimationFrame(function() {
+      window.__SCOPE_RENDER_COMPLETE__ = true;
+    });
+  } catch (err) {
+    window.__SCOPE_RENDER_ERROR__ = err instanceof Error ? err.message : String(err);
+    window.__SCOPE_RENDER_COMPLETE__ = true;
+  }
+})();
+`
+  );
+  const result = await esbuild.build({
+    stdin: {
+      contents: wrapperCode,
+      // Resolve relative imports (within the component's dir)
+      resolveDir: dirname(filePath),
+      loader: "tsx",
+      sourcefile: "__scope_harness__.tsx"
+    },
+    bundle: true,
+    format: "iife",
+    write: false,
+    platform: "browser",
+    jsx: "automatic",
+    jsxImportSource: "react",
+    target: "es2020",
+    // Bundle everything — no externals
+    external: [],
+    define: {
+      "process.env.NODE_ENV": '"development"',
+      global: "globalThis"
+    },
+    logLevel: "silent",
+    // Suppress "React must be in scope" warnings from old JSX (we use automatic)
+    banner: {
+      js: "/* @agent-scope/cli component harness */"
+    }
+  });
+  if (result.errors.length > 0) {
+    const msg = result.errors.map((e) => `${e.text}${e.location ? ` (${e.location.file}:${e.location.line})` : ""}`).join("\n");
+    throw new Error(`esbuild failed to bundle component:
+${msg}`);
+  }
+  const outputFile = result.outputFiles?.[0];
+  if (outputFile === void 0 || outputFile.text.length === 0) {
+    throw new Error("esbuild produced no output");
+  }
+  return outputFile.text;
+}
+function wrapInHtml(bundledScript, viewportWidth) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=${viewportWidth}, initial-scale=1.0" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    #scope-root { display: inline-block; min-width: 1px; min-height: 1px; }
+  </style>
+</head>
+<body>
+  <div id="scope-root" data-reactscope-root></div>
+  <script>${bundledScript}</script>
+</body>
+</html>`;
+}
+
+// src/render-formatter.ts
+function parseViewport(spec) {
+  const lower = spec.toLowerCase();
+  const match = /^(\d+)[x×](\d+)$/.exec(lower);
+  if (!match) {
+    throw new Error(`Invalid viewport "${spec}". Expected format: WIDTHxHEIGHT (e.g. 1280x720)`);
+  }
+  const width = parseInt(match[1] ?? "0", 10);
+  const height = parseInt(match[2] ?? "0", 10);
+  if (width <= 0 || height <= 0) {
+    throw new Error(`Viewport dimensions must be positive integers, got: ${spec}`);
+  }
+  return { width, height };
+}
+function formatRenderJson(componentName, props, result) {
+  return {
+    component: componentName,
+    props,
+    width: result.width,
+    height: result.height,
+    renderTimeMs: result.renderTimeMs,
+    computedStyles: result.computedStyles,
+    screenshot: result.screenshot.toString("base64"),
+    dom: result.dom,
+    console: result.console,
+    accessibility: result.accessibility
+  };
+}
+function formatMatrixJson(result) {
+  return {
+    axes: result.axes.map((axis) => ({
+      name: axis.name,
+      values: axis.values.map((v) => String(v))
+    })),
+    stats: { ...result.stats },
+    cells: result.cells.map((cell) => ({
+      index: cell.index,
+      axisIndices: cell.axisIndices,
+      props: cell.props,
+      renderTimeMs: cell.result.renderTimeMs,
+      width: cell.result.width,
+      height: cell.result.height,
+      screenshot: cell.result.screenshot.toString("base64")
+    }))
+  };
+}
+function formatMatrixHtml(componentName, result) {
+  const cellsHtml = result.cells.map((cell) => {
+    const b64 = cell.result.screenshot.toString("base64");
+    const propLabel = escapeHtml(
+      Object.entries(cell.props).map(([k, v]) => `${k}: ${String(v)}`).join(", ")
+    );
+    return `    <div class="cell">
+      <img src="data:image/png;base64,${b64}" alt="${propLabel}" width="${cell.result.width}" height="${cell.result.height}" />
+      <div class="label">${propLabel}</div>
+      <div class="meta">${cell.result.renderTimeMs.toFixed(1)}ms</div>
+    </div>`;
+  }).join("\n");
+  const axesDesc = result.axes.map((a) => `${a.name}: ${a.values.map((v) => String(v)).join(", ")}`).join(" | ");
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${escapeHtml(componentName)} \u2014 Render Matrix</title>
+  <style>
+    body { font-family: system-ui, sans-serif; background: #f8fafc; margin: 0; padding: 24px; }
+    h1 { font-size: 1.25rem; color: #1e293b; margin-bottom: 8px; }
+    .axes { font-size: 0.8rem; color: #64748b; margin-bottom: 20px; }
+    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
+    .cell { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
+    .cell img { display: block; }
+    .label { padding: 6px 8px; font-size: 0.75rem; color: #374151; border-top: 1px solid #f1f5f9; }
+    .meta { padding: 2px 8px 6px; font-size: 0.7rem; color: #94a3b8; }
+    .stats { margin-top: 24px; font-size: 0.8rem; color: #64748b; }
+  </style>
+</head>
+<body>
+  <h1>${escapeHtml(componentName)} \u2014 Render Matrix</h1>
+  <div class="axes">Axes: ${escapeHtml(axesDesc)}</div>
+  <div class="grid">
+${cellsHtml}
+  </div>
+  <div class="stats">
+    ${result.stats.totalCells} cells \xB7
+    avg ${result.stats.avgRenderTimeMs.toFixed(1)}ms \xB7
+    min ${result.stats.minRenderTimeMs.toFixed(1)}ms \xB7
+    max ${result.stats.maxRenderTimeMs.toFixed(1)}ms \xB7
+    wall ${result.stats.wallClockTimeMs.toFixed(0)}ms
+  </div>
+</body>
+</html>
+`;
+}
+function formatMatrixCsv(componentName, result) {
+  const axisNames = result.axes.map((a) => a.name);
+  const headers = ["component", ...axisNames, "renderTimeMs", "width", "height"];
+  const rows = result.cells.map((cell) => {
+    const axisVals = result.axes.map((_, i) => {
+      const axisIdx = cell.axisIndices[i];
+      const axis = result.axes[i];
+      if (axisIdx === void 0 || axis === void 0) return "";
+      const val = axis.values[axisIdx];
+      return val !== void 0 ? csvEscape(String(val)) : "";
+    });
+    return [
+      csvEscape(componentName),
+      ...axisVals,
+      cell.result.renderTimeMs.toFixed(3),
+      String(cell.result.width),
+      String(cell.result.height)
+    ].join(",");
+  });
+  return `${[headers.join(","), ...rows].join("\n")}
+`;
+}
+function renderProgressBar(completed, total, currentName, pct, barWidth = 20) {
+  const filled = Math.round(pct / 100 * barWidth);
+  const empty = barWidth - filled;
+  const bar = "=".repeat(Math.max(0, filled - 1)) + (filled > 0 ? ">" : "") + " ".repeat(empty);
+  const nameSlice = currentName.slice(0, 25).padEnd(25);
+  return `Rendering ${completed}/${total} ${nameSlice} [${bar}] ${pct}%`;
+}
+function formatSummaryText(results, outputDir) {
+  const total = results.length;
+  const passed = results.filter((r) => r.success).length;
+  const failed = total - passed;
+  const successTimes = results.filter((r) => r.success).map((r) => r.renderTimeMs);
+  const avgMs = successTimes.length > 0 ? successTimes.reduce((a, b) => a + b, 0) / successTimes.length : 0;
+  const lines = [
+    "\u2500".repeat(60),
+    `Render Summary`,
+    "\u2500".repeat(60),
+    `  Total components : ${total}`,
+    `  Passed           : ${passed}`,
+    `  Failed           : ${failed}`,
+    `  Avg render time  : ${avgMs.toFixed(1)}ms`,
+    `  Output dir       : ${outputDir}`
+  ];
+  if (failed > 0) {
+    lines.push("", "  Failed components:");
+    for (const r of results) {
+      if (!r.success) {
+        lines.push(`    \u2717 ${r.name}: ${r.errorMessage ?? "unknown error"}`);
+      }
+    }
+  }
+  lines.push("\u2500".repeat(60));
+  return lines.join("\n");
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function csvEscape(value) {
+  if (value.includes(",") || value.includes('"') || value.includes("\n")) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+
+// src/render-commands.ts
+var MANIFEST_PATH2 = ".reactscope/manifest.json";
+var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
+var _pool = null;
+async function getPool(viewportWidth, viewportHeight) {
+  if (_pool === null) {
+    _pool = new BrowserPool({
+      size: { browsers: 1, pagesPerBrowser: 4 },
+      viewportWidth,
+      viewportHeight
+    });
+    await _pool.init();
+  }
+  return _pool;
+}
+async function shutdownPool() {
+  if (_pool !== null) {
+    await _pool.close();
+    _pool = null;
+  }
+}
+function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
+  const satori = new SatoriRenderer({
+    defaultViewport: { width: viewportWidth, height: viewportHeight }
+  });
+  return {
+    _satori: satori,
+    async renderCell(props, _complexityClass) {
+      const startMs = performance.now();
+      const pool = await getPool(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 renderTimeMs = performance.now() - startMs;
+        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 screenshot = await page.screenshot({
+          clip: {
+            x: boundingBox.x,
+            y: boundingBox.y,
+            width: boundingBox.width,
+            height: boundingBox.height
+          },
+          type: "png"
+        });
+        const computedStyles = {};
+        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] > *");
+        computedStyles["[data-reactscope-root] > *"] = styles;
+        return {
+          screenshot,
+          width: Math.round(boundingBox.width),
+          height: Math.round(boundingBox.height),
+          renderTimeMs,
+          computedStyles
+        };
+      } finally {
+        pool.release(slot);
+      }
+    }
+  };
+}
+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_PATH2).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}`
+          );
+        }
+        let props = {};
+        if (opts.props !== void 0) {
+          try {
+            props = JSON.parse(opts.props);
+          } catch {
+            throw new Error(`Invalid props JSON: ${opts.props}`);
+          }
+        }
+        const { width, height } = parseViewport(opts.viewport);
+        const rootDir = process.cwd();
+        const filePath = resolve(rootDir, descriptor.filePath);
+        const renderer = buildRenderer(filePath, componentName, width, height);
+        process.stderr.write(
+          `Rendering ${componentName} [${descriptor.complexityClass}] at ${width}\xD7${height}\u2026
+`
+        );
+        const outcome = await safeRender(
+          () => renderer.renderCell(props, descriptor.complexityClass),
+          {
+            props,
+            sourceLocation: {
+              file: descriptor.filePath,
+              line: descriptor.loc.start,
+              column: 0
+            }
+          }
+        );
+        await shutdownPool();
+        if (outcome.crashed) {
+          process.stderr.write(`\u2717 Render failed: ${outcome.error.message}
+`);
+          const hintList = outcome.error.heuristicFlags.join(", ");
+          if (hintList.length > 0) {
+            process.stderr.write(`  Hints: ${hintList}
+`);
+          }
+          process.exit(1);
+        }
+        const result = outcome.result;
+        if (opts.output !== void 0) {
+          const outPath = resolve(process.cwd(), opts.output);
+          writeFileSync(outPath, result.screenshot);
+          process.stdout.write(
+            `\u2713 ${componentName} \u2192 ${opts.output} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
+`
+          );
+          return;
+        }
+        const fmt = resolveSingleFormat(opts.format);
+        if (fmt === "json") {
+          const json = formatRenderJson(componentName, props, result);
+          process.stdout.write(`${JSON.stringify(json, null, 2)}
+`);
+        } else if (fmt === "file") {
+          const dir = resolve(process.cwd(), DEFAULT_OUTPUT_DIR);
+          mkdirSync(dir, { recursive: true });
+          const outPath = resolve(dir, `${componentName}.png`);
+          writeFileSync(outPath, result.screenshot);
+          const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
+          process.stdout.write(
+            `\u2713 ${componentName} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
+`
+          );
+        } else {
+          const dir = resolve(process.cwd(), DEFAULT_OUTPUT_DIR);
+          mkdirSync(dir, { recursive: true });
+          const outPath = resolve(dir, `${componentName}.png`);
+          writeFileSync(outPath, result.screenshot);
+          const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
+          process.stdout.write(
+            `\u2713 ${componentName} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
+`
+          );
+        }
+      } catch (err) {
+        await shutdownPool();
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+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_PATH2).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}`
+          );
+        }
+        const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 8);
+        const { width, height } = { width: 375, height: 812 };
+        const rootDir = process.cwd();
+        const filePath = resolve(rootDir, descriptor.filePath);
+        const renderer = buildRenderer(filePath, componentName, width, height);
+        const axes = [];
+        if (opts.axes !== void 0) {
+          const axisSpecs = opts.axes.trim().split(/\s+/);
+          for (const spec of axisSpecs) {
+            const colonIdx = spec.indexOf(":");
+            if (colonIdx < 0) {
+              throw new Error(`Invalid axis spec "${spec}". Expected format: name:val1,val2,...`);
+            }
+            const name = spec.slice(0, colonIdx);
+            const values = spec.slice(colonIdx + 1).split(",").map((v) => v.trim());
+            if (name.length === 0 || values.length === 0) {
+              throw new Error(`Invalid axis spec "${spec}"`);
+            }
+            axes.push({ name, values });
+          }
+        }
+        if (opts.contexts !== void 0) {
+          const ids = opts.contexts.split(",").map((s) => s.trim());
+          const validIds = new Set(ALL_CONTEXT_IDS);
+          for (const id of ids) {
+            if (!validIds.has(id)) {
+              throw new Error(
+                `Unknown context ID "${id}". Available: ${ALL_CONTEXT_IDS.join(", ")}`
+              );
+            }
+          }
+          const cAxis = contextAxis(ids);
+          axes.push({ name: cAxis.name, values: cAxis.values });
+        }
+        if (opts.stress !== void 0) {
+          const ids = opts.stress.split(",").map((s) => s.trim());
+          for (const id of ids) {
+            try {
+              const sAxis = stressAxis(id);
+              axes.push({ name: sAxis.name, values: sAxis.values });
+            } catch {
+              throw new Error(
+                `Unknown stress preset "${id}". Available: ${ALL_STRESS_IDS.join(", ")}`
+              );
+            }
+          }
+        }
+        if (axes.length === 0) {
+          throw new Error(
+            "No axes defined. Use --axes, --contexts, or --stress to specify matrix dimensions."
+          );
+        }
+        process.stderr.write(
+          `Rendering matrix for ${componentName}: ${axes.map((a) => `${a.name}(${a.values.length})`).join(" \xD7 ")}\u2026
+`
+        );
+        const matrix = new RenderMatrix(renderer, axes, {
+          complexityClass: descriptor.complexityClass,
+          concurrency
+        });
+        const result = await matrix.render();
+        await shutdownPool();
+        process.stderr.write(
+          `Done. ${result.stats.totalCells} cells, avg ${result.stats.avgRenderTimeMs.toFixed(1)}ms
+`
+        );
+        if (opts.sprite !== void 0) {
+          const { SpriteSheetGenerator } = await import('@agent-scope/render');
+          const gen = new SpriteSheetGenerator();
+          const sheet = await gen.generate(result);
+          const spritePath = resolve(process.cwd(), opts.sprite);
+          writeFileSync(spritePath, sheet.png);
+          process.stderr.write(`Sprite sheet saved to ${spritePath}
+`);
+        }
+        const fmt = resolveMatrixFormat(opts.format, opts.sprite !== void 0);
+        if (fmt === "file") {
+          const { SpriteSheetGenerator } = await import('@agent-scope/render');
+          const gen = new SpriteSheetGenerator();
+          const sheet = await gen.generate(result);
+          const dir = resolve(process.cwd(), DEFAULT_OUTPUT_DIR);
+          mkdirSync(dir, { recursive: true });
+          const outPath = resolve(dir, `${componentName}-matrix.png`);
+          writeFileSync(outPath, sheet.png);
+          const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}-matrix.png`;
+          process.stdout.write(
+            `\u2713 ${componentName} matrix (${result.stats.totalCells} cells) \u2192 ${relPath} (${result.stats.wallClockTimeMs.toFixed(0)}ms total)
+`
+          );
+        } else if (fmt === "json") {
+          process.stdout.write(`${JSON.stringify(formatMatrixJson(result), null, 2)}
+`);
+        } else if (fmt === "png") {
+          if (opts.sprite !== void 0) {
+          } else {
+            const { SpriteSheetGenerator } = await import('@agent-scope/render');
+            const gen = new SpriteSheetGenerator();
+            const sheet = await gen.generate(result);
+            process.stdout.write(sheet.png);
+          }
+        } else if (fmt === "html") {
+          process.stdout.write(formatMatrixHtml(componentName, result));
+        } else if (fmt === "csv") {
+          process.stdout.write(formatMatrixCsv(componentName, result));
+        }
+      } catch (err) {
+        await shutdownPool();
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+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_PATH2).option("--format <fmt>", "Output format: json|png (default: png)", "png").action(
+    async (opts) => {
+      try {
+        const manifest = loadManifest(opts.manifest);
+        const componentNames = Object.keys(manifest.components);
+        const total = componentNames.length;
+        if (total === 0) {
+          process.stderr.write("No components found in manifest.\n");
+          return;
+        }
+        const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 4);
+        const outputDir = resolve(process.cwd(), opts.outputDir);
+        mkdirSync(outputDir, { recursive: true });
+        const rootDir = process.cwd();
+        process.stderr.write(`Rendering ${total} components (concurrency: ${concurrency})\u2026
+`);
+        const results = [];
+        let completed = 0;
+        const renderOne = async (name) => {
+          const descriptor = manifest.components[name];
+          if (descriptor === void 0) return;
+          const filePath = resolve(rootDir, descriptor.filePath);
+          const renderer = buildRenderer(filePath, name, 375, 812);
+          const outcome = await safeRender(
+            () => renderer.renderCell({}, descriptor.complexityClass),
+            {
+              props: {},
+              sourceLocation: {
+                file: descriptor.filePath,
+                line: descriptor.loc.start,
+                column: 0
+              }
+            }
+          );
+          completed++;
+          const pct = Math.round(completed / total * 100);
+          process.stderr.write(`${renderProgressBar(completed, total, name, pct)}\r`);
+          if (outcome.crashed) {
+            results.push({
+              name,
+              renderTimeMs: 0,
+              success: false,
+              errorMessage: outcome.error.message
+            });
+            const errPath = resolve(outputDir, `${name}.error.json`);
+            writeFileSync(
+              errPath,
+              JSON.stringify(
+                {
+                  component: name,
+                  errorMessage: outcome.error.message,
+                  heuristicFlags: outcome.error.heuristicFlags,
+                  propsAtCrash: outcome.error.propsAtCrash
+                },
+                null,
+                2
+              )
+            );
+            return;
+          }
+          const result = outcome.result;
+          results.push({ name, renderTimeMs: result.renderTimeMs, success: true });
+          const pngPath = resolve(outputDir, `${name}.png`);
+          writeFileSync(pngPath, result.screenshot);
+          const jsonPath = resolve(outputDir, `${name}.json`);
+          writeFileSync(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
+          if (isTTY()) {
+            process.stdout.write(
+              `\u2713 ${name} \u2192 ${opts.outputDir}/${name}.png (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
+`
+            );
+          }
+        };
+        let nextIdx = 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 shutdownPool();
+        process.stderr.write("\n");
+        const summary = formatSummaryText(results, outputDir);
+        process.stderr.write(`${summary}
+`);
+      } catch (err) {
+        await shutdownPool();
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+}
+function resolveSingleFormat(formatFlag) {
+  if (formatFlag !== void 0) {
+    const lower = formatFlag.toLowerCase();
+    if (lower !== "png" && lower !== "json") {
+      throw new Error(`Unknown format "${formatFlag}". Allowed: png, json`);
+    }
+    return lower;
+  }
+  return isTTY() ? "file" : "json";
+}
+function resolveMatrixFormat(formatFlag, spriteAlreadyWritten) {
+  if (formatFlag !== void 0) {
+    const lower = formatFlag.toLowerCase();
+    const allowed = ["json", "png", "html", "csv"];
+    if (!allowed.includes(lower)) {
+      throw new Error(`Unknown format "${formatFlag}". Allowed: ${allowed.join(", ")}`);
+    }
+    return lower;
+  }
+  if (isTTY() && !spriteAlreadyWritten) {
+    return "file";
+  }
+  return "json";
+}
+function createRenderCommand() {
+  const renderCmd = new Command("render").description(
+    "Render components to PNG or JSON via esbuild + BrowserPool"
+  );
+  registerRenderSingle(renderCmd);
+  registerRenderMatrix(renderCmd);
+  registerRenderAll(renderCmd);
+  return renderCmd;
+}
+
+// src/tree-formatter.ts
+var BRANCH = "\u251C\u2500\u2500 ";
+var LAST_BRANCH = "\u2514\u2500\u2500 ";
+var VERTICAL = "\u2502   ";
+var EMPTY = "    ";
+function buildLabel(node, options) {
+  const parts = [node.name];
+  if (node.type === "memo") {
+    parts.push("[memo]");
+  } else if (node.type === "forward_ref") {
+    parts.push("[forwardRef]");
+  } else if (node.type === "class") {
+    parts.push("[class]");
+  }
+  if (options.showProps === true) {
+    const props = node.props;
+    if (props.type === "object" && "entries" in props && Array.isArray(props.entries)) {
+      const entries = props.entries;
+      const propNames = entries.map((e) => e.key).filter((k) => k !== "children").slice(0, 4);
+      if (propNames.length > 0) {
+        parts.push(`{${propNames.join(", ")}}`);
+      }
+    } else if (props.type === "undefined" || props.type === "null") ; else {
+      const preview = props.preview;
+      if (preview && preview !== "[object Object]") {
+        parts.push(preview);
+      }
+    }
+  }
+  if (options.showHooks === true && node.state.length > 0) {
+    const hookCounts = /* @__PURE__ */ new Map();
+    for (const hook of node.state) {
+      const label = hook.name ?? hook.type;
+      hookCounts.set(label, (hookCounts.get(label) ?? 0) + 1);
+    }
+    const summary = Array.from(hookCounts.entries()).map(([k, v]) => v > 1 ? `${k}\xD7${v}` : k).join(", ");
+    parts.push(`[${summary}]`);
+  }
+  return parts.join(" ");
+}
+function renderNode(node, prefix, isLast, depth, options, lines) {
+  if (node.type === "host" && options.showHost !== true) {
+    const visibleChildren2 = getVisibleChildren(node, options);
+    for (let i = 0; i < visibleChildren2.length; i++) {
+      const child = visibleChildren2[i];
+      if (child !== void 0) {
+        renderNode(child, prefix, i === visibleChildren2.length - 1, depth, options, lines);
+      }
+    }
+    return;
+  }
+  const connector = isLast ? LAST_BRANCH : BRANCH;
+  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)`);
+    }
+    return;
+  }
+  const visibleChildren = getVisibleChildren(node, options);
+  const nextPrefix = prefix + (isLast ? EMPTY : VERTICAL);
+  for (let i = 0; i < visibleChildren.length; i++) {
+    const child = visibleChildren[i];
+    if (child !== void 0) {
+      renderNode(child, nextPrefix, i === visibleChildren.length - 1, depth + 1, options, lines);
+    }
+  }
+}
+function getVisibleChildren(node, options) {
+  if (options.showHost === true) {
+    return node.children;
+  }
+  return flattenHostChildren(node.children);
+}
+function flattenHostChildren(children, options) {
+  const result = [];
+  for (const child of children) {
+    if (child.type === "host") {
+      result.push(...flattenHostChildren(child.children));
+    } else {
+      result.push(child);
+    }
+  }
+  return result;
+}
+function countVisibleDescendants(node, options) {
+  let count = 0;
+  for (const child of node.children) {
+    if (child.type !== "host" || options.showHost === true) {
+      count += 1;
+    }
+    count += countVisibleDescendants(child, options);
+  }
+  return count;
+}
+function formatTree(root, options = {}) {
+  const lines = [];
+  if (root.type !== "host" || options.showHost === true) {
+    lines.push(buildLabel(root, options));
+    if (options.maxDepth === 0) {
+      const childCount = countVisibleDescendants(root, options);
+      if (childCount > 0) {
+        lines.push(`${LAST_BRANCH}\u2026 (${childCount} more)`);
+      }
+    } else {
+      const visibleChildren = getVisibleChildren(root, options);
+      for (let i = 0; i < visibleChildren.length; i++) {
+        const child = visibleChildren[i];
+        if (child !== void 0) {
+          renderNode(child, "", i === visibleChildren.length - 1, 1, options, lines);
+        }
+      }
+    }
+  } else {
+    const visibleChildren = getVisibleChildren(root, options);
+    for (let i = 0; i < visibleChildren.length; i++) {
+      const child = visibleChildren[i];
+      if (child !== void 0) {
+        renderNode(child, "", i === visibleChildren.length - 1, 1, options, lines);
+      }
+    }
+  }
+  return lines.join("\n");
+}
+function treeDepth(node) {
+  if (node.children.length === 0) return 0;
+  return 1 + Math.max(...node.children.map(treeDepth));
+}
+
+// src/report-formatter.ts
+function collectComponentStats(root) {
+  const byType = {};
+  function walk(node) {
+    if (node.type !== "host") {
+      byType[node.type] = (byType[node.type] ?? 0) + 1;
+    }
+    for (const child of node.children) {
+      walk(child);
+    }
+  }
+  walk(root);
+  const total = Object.values(byType).reduce((s, n) => s + n, 0);
+  return { total, byType };
+}
+function collectHookStats(root) {
+  const byType = {};
+  function walk(node) {
+    for (const hook of node.state) {
+      const label = hook.name ?? hook.type;
+      byType[label] = (byType[label] ?? 0) + 1;
+    }
+    for (const child of node.children) {
+      walk(child);
+    }
+  }
+  walk(root);
+  const total = Object.values(byType).reduce((s, n) => s + n, 0);
+  return { total, byType };
+}
+function countErrorBoundaries(root) {
+  let count = 0;
+  function walk(node) {
+    if (node.type === "class" && (node.name.toLowerCase().includes("error") || node.name.toLowerCase().includes("boundary"))) {
+      count += 1;
+    }
+    for (const child of node.children) {
+      walk(child);
+    }
+  }
+  walk(root);
+  return count;
+}
+function pad2(s, width) {
+  return s.padEnd(width, " ");
+}
+function row(label, value, labelWidth = 22) {
+  return `${pad2(label, labelWidth)}${value}`;
+}
+function rule(width) {
+  return "\u2501".repeat(width);
+}
+function formatBreakdown(byType, limit = 5) {
+  const entries = Object.entries(byType).sort(([, a], [, b]) => b - a).slice(0, limit);
+  if (entries.length === 0) return "";
+  return `(${entries.map(([k, v]) => `${v} ${k}`).join(", ")})`;
+}
+function formatReport(report, options = {}) {
+  if (options.json === true) {
+    return JSON.stringify(report, null, 2);
+  }
+  const url = report.url;
+  const title = `Scope Report for ${url}`;
+  const ruleWidth = Math.min(Math.max(title.length, 40), 72);
+  const componentStats = collectComponentStats(report.tree);
+  const hookStats = collectHookStats(report.tree);
+  const maxDepth = treeDepth(report.tree);
+  const errorBoundaries = countErrorBoundaries(report.tree);
+  const suspendedCount = report.suspenseBoundaries.filter((b) => b.isSuspended).length;
+  const resolvedCount = report.suspenseBoundaries.length - suspendedCount;
+  const consoleLevels = {};
+  for (const entry of report.consoleEntries) {
+    consoleLevels[entry.level] = (consoleLevels[entry.level] ?? 0) + 1;
+  }
+  const typeNames = {
+    function: "function",
+    memo: "memo",
+    forward_ref: "forwardRef",
+    class: "class"
+  };
+  const componentBreakdown = Object.entries(componentStats.byType).sort(([, a], [, b]) => b - a).map(([k, v]) => `${v} ${typeNames[k] ?? k}`).join(", ");
+  const hookBreakdown = formatBreakdown(hookStats.byType, 6);
+  const consoleBreakdownParts = Object.entries(consoleLevels).sort(([, a], [, b]) => b - a).map(([k, v]) => `${v} ${k}`);
+  const consoleBreakdown = consoleBreakdownParts.length > 0 ? ` (${consoleBreakdownParts.join(", ")})` : "";
+  const suspenseSummary = report.suspenseBoundaries.length > 0 ? ` (${suspendedCount} pending, ${resolvedCount} resolved)` : "";
+  const lines = [
+    title,
+    rule(ruleWidth),
+    row(
+      "Components:",
+      `${componentStats.total} total${componentBreakdown ? ` (${componentBreakdown})` : ""}`
+    ),
+    row("Max depth:", String(maxDepth)),
+    row("Hooks:", hookStats.total > 0 ? `${hookStats.total} total ${hookBreakdown}` : "none"),
+    row("Error boundaries:", String(errorBoundaries)),
+    row("Suspense boundaries:", `${report.suspenseBoundaries.length}${suspenseSummary}`),
+    row("Console entries:", `${report.consoleEntries.length}${consoleBreakdown}`),
+    row(
+      "Errors captured:",
+      report.errors.length > 0 ? `${report.errors.length} (see JSON output for details)` : "none"
+    ),
+    row("Capture time:", `${report.capturedIn}ms`)
+  ];
+  if (report.route !== null) {
+    lines.push(row("Route:", report.route.pattern ?? report.url));
+  }
+  return lines.join("\n");
+}
+function buildStructuredReport(report) {
+  const componentStats = collectComponentStats(report.tree);
+  const hookStats = collectHookStats(report.tree);
+  const maxDepth = treeDepth(report.tree);
+  const errorBoundaries = countErrorBoundaries(report.tree);
+  const suspendedCount = report.suspenseBoundaries.filter((b) => b.isSuspended).length;
+  const consoleLevels = {};
+  for (const entry of report.consoleEntries) {
+    consoleLevels[entry.level] = (consoleLevels[entry.level] ?? 0) + 1;
+  }
+  return {
+    url: report.url,
+    timestamp: report.timestamp,
+    capturedIn: report.capturedIn,
+    components: {
+      total: componentStats.total,
+      byType: componentStats.byType,
+      maxDepth
+    },
+    hooks: {
+      total: hookStats.total,
+      byType: hookStats.byType
+    },
+    errorBoundaries,
+    suspenseBoundaries: {
+      total: report.suspenseBoundaries.length,
+      suspended: suspendedCount,
+      resolved: report.suspenseBoundaries.length - suspendedCount
+    },
+    consoleEntries: {
+      total: report.consoleEntries.length,
+      byLevel: consoleLevels
+    },
+    errors: report.errors.length,
+    route: report.route?.pattern ?? null
+  };
+}
+
+// src/program.ts
+function createProgram(options = {}) {
+  const program = new Command("scope").version(options.version ?? "0.1.0").description("Scope \u2014 React instrumentation toolkit");
+  program.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 {
+        const { report } = await browserCapture({
+          url,
+          timeout: Number.parseInt(opts.timeout, 10),
+          wait: Number.parseInt(opts.wait, 10)
+        });
+        if (opts.output !== void 0) {
+          writeReportToFile(report, opts.output, opts.pretty);
+          process.stderr.write(`Captured to ${opts.output}
+`);
+        } else {
+          const json = opts.pretty ? JSON.stringify(report, null, 2) : JSON.stringify(report);
+          process.stdout.write(`${json}
+`);
+        }
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+  program.command("tree <url>").description("Display the React component tree from a live URL").option("--depth <n>", "Max depth to display (default: unlimited)").option("--show-props", "Include prop names next to components", false).option("--show-hooks", "Show hook counts per component", 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 {
+        const { report } = await browserCapture({
+          url,
+          timeout: Number.parseInt(opts.timeout, 10),
+          wait: Number.parseInt(opts.wait, 10)
+        });
+        const maxDepth = opts.depth !== void 0 ? Number.parseInt(opts.depth, 10) : void 0;
+        const tree = formatTree(report.tree, {
+          maxDepth,
+          showProps: opts.showProps,
+          showHooks: opts.showHooks
+        });
+        process.stdout.write(`${tree}
+`);
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+  program.command("report <url>").description("Capture and display a human-readable summary of a React app").option("--json", "Output as structured JSON instead of human-readable text", 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 {
+        const { report } = await browserCapture({
+          url,
+          timeout: Number.parseInt(opts.timeout, 10),
+          wait: Number.parseInt(opts.wait, 10)
+        });
+        if (opts.json) {
+          const structured = buildStructuredReport(report);
+          process.stdout.write(`${JSON.stringify(structured, null, 2)}
+`);
+        } else {
+          const summary = formatReport(report);
+          process.stdout.write(`${summary}
+`);
+        }
+      } catch (err) {
+        process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+        process.exit(1);
+      }
+    }
+  );
+  program.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 = readFileSync(tracePath, "utf-8");
+    const trace = loadTrace(raw);
+    const source = generateTest(trace, {
+      description: opts.description,
+      outputPath: opts.output
+    });
+    process.stdout.write(`${source}
+`);
+  });
+  program.addCommand(createManifestCommand());
+  program.addCommand(createRenderCommand());
+  return program;
+}
+
+export { createManifestCommand, createProgram, isTTY, matchGlob };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map