@agent-scope/cli 1.11.0 → 1.12.0

package/dist/index.js

@@ -205,9 +205,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve10) => {
+  return new Promise((resolve11) => {
     rl.question(question, (answer) => {
-      resolve10(answer.trim());
+      resolve11(answer.trim());
     });
   });
 }
@@ -1524,9 +1524,364 @@ Available: ${available}`
   );
   return cmd;
 }
+var MANIFEST_PATH4 = ".reactscope/manifest.json";
+var DEFAULT_VIEWPORT_WIDTH = 375;
+var DEFAULT_VIEWPORT_HEIGHT = 812;
+var _pool = null;
+async function getPool() {
+  if (_pool === null) {
+    _pool = new BrowserPool({
+      size: { browsers: 1, pagesPerBrowser: 1 },
+      viewportWidth: DEFAULT_VIEWPORT_WIDTH,
+      viewportHeight: DEFAULT_VIEWPORT_HEIGHT
+    });
+    await _pool.init();
+  }
+  return _pool;
+}
+async function shutdownPool() {
+  if (_pool !== null) {
+    await _pool.close();
+    _pool = null;
+  }
+}
+function mapNodeType(node) {
+  if (node.type === "forward_ref") return "forwardRef";
+  if (node.type === "host") return "host";
+  const name = node.name;
+  if (name.endsWith(".Provider") || name === "Provider") return "context.provider";
+  if (name.endsWith(".Consumer") || name === "Consumer") return "context.consumer";
+  return node.type;
+}
+function flattenSerializedValue(sv) {
+  if (sv === null || sv === void 0) return null;
+  const v = sv;
+  switch (v.type) {
+    case "null":
+    case "undefined":
+      return null;
+    case "string":
+    case "number":
+    case "boolean":
+      return v.value;
+    case "object": {
+      if (!Array.isArray(v.entries)) return {};
+      const result = {};
+      for (const entry of v.entries) {
+        result[entry.key] = flattenSerializedValue(entry.value);
+      }
+      return result;
+    }
+    case "array": {
+      if (!Array.isArray(v.items)) return [];
+      return v.items.map(flattenSerializedValue);
+    }
+    case "function":
+      return "[Function]";
+    case "symbol":
+      return `[Symbol: ${v.description ?? ""}]`;
+    case "circular":
+      return "[Circular]";
+    case "truncated":
+      return `[Truncated: ${v.preview ?? ""}]`;
+    default:
+      return v.preview ?? null;
+  }
+}
+function flattenHookState(hooks) {
+  const result = {};
+  for (let i = 0; i < hooks.length; i++) {
+    const hook = hooks[i];
+    if (hook === void 0) continue;
+    const key = hook.name !== null && hook.name !== void 0 ? hook.name : `${hook.type}[${i}]`;
+    result[key] = flattenSerializedValue(hook.value);
+  }
+  return result;
+}
+function extractContextNames(contexts) {
+  const names = contexts.map((c) => c.contextName ?? "Unknown").filter((name, idx, arr) => arr.indexOf(name) === idx);
+  return names;
+}
+function anyContextChanged(contexts) {
+  return contexts.some((c) => c.didTriggerRender);
+}
+function convertToInstrumentNode(node, depth = 0) {
+  const contexts = extractContextNames(node.context);
+  const contextChanged = anyContextChanged(node.context);
+  const state = flattenHookState(node.state);
+  const propsFlat = flattenSerializedValue(node.props);
+  const props = propsFlat !== null && typeof propsFlat === "object" && !Array.isArray(propsFlat) ? propsFlat : {};
+  return {
+    component: node.name,
+    type: mapNodeType(node),
+    renderCount: node.renderCount,
+    lastRenderDuration: node.renderDuration,
+    memoized: node.type === "memo",
+    // memoSkipped requires tracking bail-outs across commits — not available from
+    // a single-shot capture. Defaulted to 0.
+    memoSkipped: 0,
+    props,
+    // propsChanged is not tracked in a single-shot capture — would need a diff
+    // between two renders. Defaulted to false.
+    propsChanged: false,
+    state,
+    stateChanged: false,
+    contextChanged,
+    contexts,
+    depth,
+    children: node.children.map((child) => convertToInstrumentNode(child, depth + 1))
+  };
+}
+function filterByContext(node, contextName) {
+  const filteredChildren = node.children.map((child) => filterByContext(child, contextName)).filter((c) => c !== null);
+  const selfMatches = node.contexts.some((c) => c.toLowerCase() === contextName.toLowerCase());
+  if (!selfMatches && filteredChildren.length === 0) return null;
+  return { ...node, children: filteredChildren };
+}
+function filterWastedRenders(node) {
+  const filteredChildren = node.children.map((child) => filterWastedRenders(child)).filter((c) => c !== null);
+  const isWasted = !node.propsChanged && !node.stateChanged && !node.contextChanged && !node.memoized && node.renderCount > 1;
+  if (!isWasted && filteredChildren.length === 0) return null;
+  return { ...node, children: filteredChildren };
+}
+function sortTree(node, sortBy) {
+  const sortedChildren = node.children.map((child) => sortTree(child, sortBy)).sort((a, b) => {
+    if (sortBy === "renderCount") return b.renderCount - a.renderCount;
+    return a.depth - b.depth;
+  });
+  return { ...node, children: sortedChildren };
+}
+function annotateProviderDepth(node, providerDepth = 0) {
+  const isProvider = node.type === "context.provider";
+  const childProviderDepth = isProvider ? providerDepth + 1 : providerDepth;
+  return {
+    ...node,
+    _providerDepth: providerDepth,
+    children: node.children.map((child) => annotateProviderDepth(child, childProviderDepth))
+  };
+}
+function limitNodes(root, limit) {
+  let remaining = limit;
+  const clip = (node) => {
+    if (remaining <= 0) return null;
+    remaining--;
+    const clippedChildren = [];
+    for (const child of node.children) {
+      const clipped = clip(child);
+      if (clipped !== null) clippedChildren.push(clipped);
+    }
+    return { ...node, children: clippedChildren };
+  };
+  return clip(root) ?? root;
+}
+var BRANCH = "\u251C\u2500\u2500 ";
+var LAST_BRANCH = "\u2514\u2500\u2500 ";
+var VERTICAL = "\u2502   ";
+var EMPTY = "    ";
+function buildTTYLabel(node, showProviderDepth) {
+  const parts = [node.component];
+  switch (node.type) {
+    case "memo":
+      parts.push("[memo]");
+      break;
+    case "forwardRef":
+      parts.push("[forwardRef]");
+      break;
+    case "class":
+      parts.push("[class]");
+      break;
+    case "context.provider":
+      parts.push("[provider]");
+      break;
+    case "context.consumer":
+      parts.push("[consumer]");
+      break;
+  }
+  if (node.renderCount > 0) {
+    const durationStr = node.lastRenderDuration > 0 ? ` ${node.lastRenderDuration.toFixed(2)}ms` : "";
+    parts.push(`(renders:${node.renderCount}${durationStr})`);
+  }
+  if (node.contexts.length > 0) {
+    parts.push(`[ctx:${node.contexts.join(",")}]`);
+  }
+  if (showProviderDepth) {
+    const pd = node._providerDepth;
+    if (pd !== void 0 && pd > 0) {
+      parts.push(`[pd:${pd}]`);
+    }
+  }
+  return parts.join(" ");
+}
+function renderTTYNode(node, prefix, isLast, showProviderDepth, lines) {
+  if (node.type === "host") {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child !== void 0) {
+        renderTTYNode(child, prefix, i === node.children.length - 1, showProviderDepth, lines);
+      }
+    }
+    return;
+  }
+  const connector = isLast ? LAST_BRANCH : BRANCH;
+  lines.push(`${prefix}${connector}${buildTTYLabel(node, showProviderDepth)}`);
+  const nextPrefix = prefix + (isLast ? EMPTY : VERTICAL);
+  for (let i = 0; i < node.children.length; i++) {
+    const child = node.children[i];
+    if (child !== void 0) {
+      renderTTYNode(child, nextPrefix, i === node.children.length - 1, showProviderDepth, lines);
+    }
+  }
+}
+function formatInstrumentTree(root, showProviderDepth = false) {
+  const lines = [];
+  if (root.type !== "host") {
+    lines.push(buildTTYLabel(root, showProviderDepth));
+    for (let i = 0; i < root.children.length; i++) {
+      const child = root.children[i];
+      if (child !== void 0) {
+        renderTTYNode(child, "", i === root.children.length - 1, showProviderDepth, lines);
+      }
+    }
+  } else {
+    for (let i = 0; i < root.children.length; i++) {
+      const child = root.children[i];
+      if (child !== void 0) {
+        renderTTYNode(child, "", i === root.children.length - 1, showProviderDepth, lines);
+      }
+    }
+  }
+  return lines.join("\n");
+}
+async function runInstrumentTree(options) {
+  const { componentName, filePath } = options;
+  const pool = await getPool();
+  const slot = await pool.acquire();
+  const { page } = slot;
+  try {
+    await page.addInitScript({ content: getBrowserEntryScript() });
+    const htmlHarness = await buildComponentHarness(
+      filePath,
+      componentName,
+      {},
+      DEFAULT_VIEWPORT_WIDTH
+    );
+    await page.setContent(htmlHarness, { waitUntil: "load" });
+    await page.waitForFunction(
+      () => {
+        const w = window;
+        return w.__SCOPE_RENDER_COMPLETE__ === true;
+      },
+      { timeout: 15e3 }
+    );
+    const renderError = await page.evaluate(
+      () => window.__SCOPE_RENDER_ERROR__ ?? null
+    );
+    if (renderError !== null) {
+      throw new Error(`Component render error: ${renderError}`);
+    }
+    const captureJson = await page.evaluate(async () => {
+      const w = window;
+      if (typeof w.__SCOPE_CAPTURE_JSON__ !== "function") {
+        throw new Error("__SCOPE_CAPTURE_JSON__ not available \u2014 Scope runtime not injected");
+      }
+      return w.__SCOPE_CAPTURE_JSON__({ lightweight: false });
+    });
+    const captureResult = JSON.parse(captureJson);
+    const componentTree = captureResult.tree;
+    if (componentTree === void 0 || componentTree === null) {
+      throw new Error(`No component tree found for "${componentName}"`);
+    }
+    let instrumentRoot = convertToInstrumentNode(componentTree, 0);
+    if (options.usesContext !== void 0) {
+      const filtered = filterByContext(instrumentRoot, options.usesContext);
+      instrumentRoot = filtered !== null ? filtered : { ...instrumentRoot, children: [] };
+    }
+    if (options.wastedRenders === true) {
+      const filtered = filterWastedRenders(instrumentRoot);
+      instrumentRoot = filtered !== null ? filtered : { ...instrumentRoot, children: [] };
+    }
+    if (options.sortBy !== void 0) {
+      instrumentRoot = sortTree(instrumentRoot, options.sortBy);
+    }
+    if (options.providerDepth === true) {
+      instrumentRoot = annotateProviderDepth(instrumentRoot, 0);
+    }
+    if (options.limit !== void 0 && options.limit > 0) {
+      instrumentRoot = limitNodes(instrumentRoot, options.limit);
+    }
+    return instrumentRoot;
+  } finally {
+    pool.release(slot);
+  }
+}
+function createInstrumentTreeCommand() {
+  return new Command("tree").description("Render a component via BrowserPool and output a structured instrumentation tree").argument("<component>", "Component name to instrument (must exist in the manifest)").option("--sort-by <field>", "Sort nodes by field: renderCount | depth").option("--limit <n>", "Limit output to the first N nodes (depth-first)").option("--uses-context <name>", "Filter to components that use a specific context").option("--provider-depth", "Annotate each node with its context-provider nesting depth", false).option(
+    "--wasted-renders",
+    "Filter to components with wasted renders (no prop/state/context changes, not memoized)",
+    false
+  ).option("--format <fmt>", "Output format: json | tree (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH4).action(async (componentName, opts) => {
+    try {
+      const manifest = loadManifest(opts.manifest);
+      const descriptor = manifest.components[componentName];
+      if (descriptor === void 0) {
+        const available = Object.keys(manifest.components).slice(0, 5).join(", ");
+        throw new Error(
+          `Component "${componentName}" not found in manifest.
+Available: ${available}`
+        );
+      }
+      if (opts.sortBy !== void 0) {
+        const allowed = ["renderCount", "depth"];
+        if (!allowed.includes(opts.sortBy)) {
+          throw new Error(
+            `Unknown --sort-by value "${opts.sortBy}". Allowed: ${allowed.join(", ")}`
+          );
+        }
+      }
+      const rootDir = process.cwd();
+      const filePath = resolve(rootDir, descriptor.filePath);
+      process.stderr.write(`Instrumenting ${componentName}\u2026
+`);
+      const instrumentRoot = await runInstrumentTree({
+        componentName,
+        filePath,
+        sortBy: opts.sortBy,
+        limit: opts.limit !== void 0 ? Math.max(1, parseInt(opts.limit, 10)) : void 0,
+        usesContext: opts.usesContext,
+        providerDepth: opts.providerDepth,
+        wastedRenders: opts.wastedRenders
+      });
+      await shutdownPool();
+      const fmt = resolveFormat2(opts.format);
+      if (fmt === "json") {
+        process.stdout.write(`${JSON.stringify(instrumentRoot, null, 2)}
+`);
+      } else {
+        const tree = formatInstrumentTree(instrumentRoot, opts.providerDepth ?? false);
+        process.stdout.write(`${tree}
+`);
+      }
+    } catch (err) {
+      await shutdownPool();
+      process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
+`);
+      process.exit(1);
+    }
+  });
+}
+function resolveFormat2(formatFlag) {
+  if (formatFlag !== void 0) {
+    const lower = formatFlag.toLowerCase();
+    if (lower !== "json" && lower !== "tree") {
+      throw new Error(`Unknown format "${formatFlag}". Allowed: json, tree`);
+    }
+    return lower;
+  }
+  return isTTY() ? "tree" : "json";
+}
 
 // src/instrument/renders.ts
-var MANIFEST_PATH4 = ".reactscope/manifest.json";
+var MANIFEST_PATH5 = ".reactscope/manifest.json";
 function determineTrigger(event) {
   if (event.forceUpdate) return "force_update";
   if (event.stateChanged) return "state_change";
@@ -1825,26 +2180,26 @@ async function replayInteraction2(page, steps) {
     }
   }
 }
-var _pool = null;
-async function getPool() {
-  if (_pool === null) {
-    _pool = new BrowserPool({
+var _pool2 = null;
+async function getPool2() {
+  if (_pool2 === null) {
+    _pool2 = new BrowserPool({
       size: { browsers: 1, pagesPerBrowser: 2 },
       viewportWidth: 1280,
       viewportHeight: 800
     });
-    await _pool.init();
+    await _pool2.init();
   }
-  return _pool;
+  return _pool2;
 }
-async function shutdownPool() {
-  if (_pool !== null) {
-    await _pool.close();
-    _pool = null;
+async function shutdownPool2() {
+  if (_pool2 !== null) {
+    await _pool2.close();
+    _pool2 = null;
   }
 }
 async function analyzeRenders(options) {
-  const manifestPath = options.manifestPath ?? MANIFEST_PATH4;
+  const manifestPath = options.manifestPath ?? MANIFEST_PATH5;
   const manifest = loadManifest(manifestPath);
   const descriptor = manifest.components[options.componentName];
   if (descriptor === void 0) {
@@ -1857,7 +2212,7 @@ Available: ${available}`
   const rootDir = process.cwd();
   const filePath = resolve(rootDir, descriptor.filePath);
   const htmlHarness = await buildComponentHarness(filePath, options.componentName, {}, 1280);
-  const pool = await getPool();
+  const pool = await getPool2();
   const slot = await pool.acquire();
   const { page } = slot;
   const startMs = performance.now();
@@ -1942,7 +2297,7 @@ function createInstrumentRendersCommand() {
     "--interaction <json>",
     `Interaction sequence JSON, e.g. '[{"action":"click","target":"button"}]'`,
     "[]"
-  ).option("--json", "Output as JSON regardless of TTY", false).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH4).action(
+  ).option("--json", "Output as JSON regardless of TTY", false).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH5).action(
     async (componentName, opts) => {
       let interaction = [];
       try {
@@ -1965,7 +2320,7 @@ function createInstrumentRendersCommand() {
           interaction,
           manifestPath: opts.manifest
         });
-        await shutdownPool();
+        await shutdownPool2();
         if (opts.json || !isTTY()) {
           process.stdout.write(`${JSON.stringify(result, null, 2)}
 `);
@@ -1974,7 +2329,7 @@ function createInstrumentRendersCommand() {
 `);
         }
       } catch (err) {
-        await shutdownPool();
+        await shutdownPool2();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -1989,6 +2344,7 @@ function createInstrumentCommand() {
   instrumentCmd.addCommand(createInstrumentRendersCommand());
   instrumentCmd.addCommand(createInstrumentHooksCommand());
   instrumentCmd.addCommand(createInstrumentProfileCommand());
+  instrumentCmd.addCommand(createInstrumentTreeCommand());
   return instrumentCmd;
 }
 async function browserCapture(options) {
@@ -2148,24 +2504,24 @@ async function getCompiledCssForClasses(cwd, classes) {
 }
 
 // src/render-commands.ts
-var MANIFEST_PATH5 = ".reactscope/manifest.json";
+var MANIFEST_PATH6 = ".reactscope/manifest.json";
 var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
-var _pool2 = null;
-async function getPool2(viewportWidth, viewportHeight) {
-  if (_pool2 === null) {
-    _pool2 = new BrowserPool({
+var _pool3 = null;
+async function getPool3(viewportWidth, viewportHeight) {
+  if (_pool3 === null) {
+    _pool3 = new BrowserPool({
       size: { browsers: 1, pagesPerBrowser: 4 },
       viewportWidth,
       viewportHeight
     });
-    await _pool2.init();
+    await _pool3.init();
   }
-  return _pool2;
+  return _pool3;
 }
-async function shutdownPool2() {
-  if (_pool2 !== null) {
-    await _pool2.close();
-    _pool2 = null;
+async function shutdownPool3() {
+  if (_pool3 !== null) {
+    await _pool3.close();
+    _pool3 = null;
   }
 }
 function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
@@ -2176,7 +2532,7 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
     _satori: satori,
     async renderCell(props, _complexityClass) {
       const startMs = performance.now();
-      const pool = await getPool2(viewportWidth, viewportHeight);
+      const pool = await getPool3(viewportWidth, viewportHeight);
       const htmlHarness = await buildComponentHarness(
         filePath,
         componentName,
@@ -2273,7 +2629,7 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
   };
 }
 function registerRenderSingle(renderCmd) {
-  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH5).action(
+  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -2312,7 +2668,7 @@ Available: ${available}`
             }
           }
         );
-        await shutdownPool2();
+        await shutdownPool3();
         if (outcome.crashed) {
           process.stderr.write(`\u2717 Render failed: ${outcome.error.message}
 `);
@@ -2360,7 +2716,7 @@ Available: ${available}`
           );
         }
       } catch (err) {
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -2372,7 +2728,7 @@ function registerRenderMatrix(renderCmd) {
   renderCmd.command("matrix <component>").description("Render a component across a matrix of prop axes").option("--axes <spec>", "Axis definitions e.g. 'variant:primary,secondary size:sm,md,lg'").option(
     "--contexts <ids>",
     "Composition context IDs, comma-separated (e.g. centered,rtl,sidebar)"
-  ).option("--stress <ids>", "Stress preset IDs, comma-separated (e.g. text.long,text.unicode)").option("--sprite <path>", "Write sprite sheet PNG to file").option("--format <fmt>", "Output format: json|png|html|csv (default: auto)").option("--concurrency <n>", "Max parallel renders", "8").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH5).action(
+  ).option("--stress <ids>", "Stress preset IDs, comma-separated (e.g. text.long,text.unicode)").option("--sprite <path>", "Write sprite sheet PNG to file").option("--format <fmt>", "Output format: json|png|html|csv (default: auto)").option("--concurrency <n>", "Max parallel renders", "8").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -2445,7 +2801,7 @@ Available: ${available}`
           concurrency
         });
         const result = await matrix.render();
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write(
           `Done. ${result.stats.totalCells} cells, avg ${result.stats.avgRenderTimeMs.toFixed(1)}ms
 `
@@ -2490,7 +2846,7 @@ Available: ${available}`
           process.stdout.write(formatMatrixCsv(componentName, result));
         }
       } catch (err) {
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -2499,7 +2855,7 @@ Available: ${available}`
   );
 }
 function registerRenderAll(renderCmd) {
-  renderCmd.command("all").description("Render all components from the manifest").option("--concurrency <n>", "Max parallel renders", "4").option("--output-dir <dir>", "Output directory for renders", DEFAULT_OUTPUT_DIR).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH5).option("--format <fmt>", "Output format: json|png (default: png)", "png").action(
+  renderCmd.command("all").description("Render all components from the manifest").option("--concurrency <n>", "Max parallel renders", "4").option("--output-dir <dir>", "Output directory for renders", DEFAULT_OUTPUT_DIR).option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).option("--format <fmt>", "Output format: json|png (default: png)", "png").action(
     async (opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -2587,13 +2943,13 @@ function registerRenderAll(renderCmd) {
           workers.push(worker());
         }
         await Promise.all(workers);
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write("\n");
         const summary = formatSummaryText(results, outputDir);
         process.stderr.write(`${summary}
 `);
       } catch (err) {
-        await shutdownPool2();
+        await shutdownPool3();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}
 `);
         process.exit(1);
@@ -2635,26 +2991,26 @@ function createRenderCommand() {
   return renderCmd;
 }
 var DEFAULT_BASELINE_DIR = ".reactscope/baseline";
-var _pool3 = null;
-async function getPool3(viewportWidth, viewportHeight) {
-  if (_pool3 === null) {
-    _pool3 = new BrowserPool({
+var _pool4 = null;
+async function getPool4(viewportWidth, viewportHeight) {
+  if (_pool4 === null) {
+    _pool4 = new BrowserPool({
       size: { browsers: 1, pagesPerBrowser: 4 },
       viewportWidth,
       viewportHeight
     });
-    await _pool3.init();
+    await _pool4.init();
   }
-  return _pool3;
+  return _pool4;
 }
-async function shutdownPool3() {
-  if (_pool3 !== null) {
-    await _pool3.close();
-    _pool3 = null;
+async function shutdownPool4() {
+  if (_pool4 !== null) {
+    await _pool4.close();
+    _pool4 = null;
   }
 }
 async function renderComponent(filePath, componentName, props, viewportWidth, viewportHeight) {
-  const pool = await getPool3(viewportWidth, viewportHeight);
+  const pool = await getPool4(viewportWidth, viewportHeight);
   const htmlHarness = await buildComponentHarness(filePath, componentName, props, viewportWidth);
   const slot = await pool.acquire();
   const { page } = slot;
@@ -2904,7 +3260,7 @@ async function runBaseline(options = {}) {
     workers.push(worker());
   }
   await Promise.all(workers);
-  await shutdownPool3();
+  await shutdownPool4();
   if (isTTY()) {
     process.stderr.write("\n");
   }
@@ -2955,10 +3311,10 @@ function registerBaselineSubCommand(reportCmd) {
 }
 
 // src/tree-formatter.ts
-var BRANCH = "\u251C\u2500\u2500 ";
-var LAST_BRANCH = "\u2514\u2500\u2500 ";
-var VERTICAL = "\u2502   ";
-var EMPTY = "    ";
+var BRANCH2 = "\u251C\u2500\u2500 ";
+var LAST_BRANCH2 = "\u2514\u2500\u2500 ";
+var VERTICAL2 = "\u2502   ";
+var EMPTY2 = "    ";
 function buildLabel(node, options) {
   const parts = [node.name];
   if (node.type === "memo") {
@@ -3005,19 +3361,19 @@ function renderNode(node, prefix, isLast, depth, options, lines) {
     }
     return;
   }
-  const connector = isLast ? LAST_BRANCH : BRANCH;
+  const connector = isLast ? LAST_BRANCH2 : BRANCH2;
   const label = buildLabel(node, options);
   lines.push(`${prefix}${connector}${label}`);
   if (options.maxDepth !== void 0 && depth >= options.maxDepth) {
     const childCount = countVisibleDescendants(node, options);
     if (childCount > 0) {
-      const nextPrefix2 = prefix + (isLast ? EMPTY : VERTICAL);
-      lines.push(`${nextPrefix2}${LAST_BRANCH}\u2026 (${childCount} more)`);
+      const nextPrefix2 = prefix + (isLast ? EMPTY2 : VERTICAL2);
+      lines.push(`${nextPrefix2}${LAST_BRANCH2}\u2026 (${childCount} more)`);
     }
     return;
   }
   const visibleChildren = getVisibleChildren(node, options);
-  const nextPrefix = prefix + (isLast ? EMPTY : VERTICAL);
+  const nextPrefix = prefix + (isLast ? EMPTY2 : VERTICAL2);
   for (let i = 0; i < visibleChildren.length; i++) {
     const child = visibleChildren[i];
     if (child !== void 0) {
@@ -3059,7 +3415,7 @@ function formatTree(root, options = {}) {
     if (options.maxDepth === 0) {
       const childCount = countVisibleDescendants(root, options);
       if (childCount > 0) {
-        lines.push(`${LAST_BRANCH}\u2026 (${childCount} more)`);
+        lines.push(`${LAST_BRANCH2}\u2026 (${childCount} more)`);
       }
     } else {
       const visibleChildren = getVisibleChildren(root, options);