@agent-scope/cli 1.20.2 → 1.20.4

package/dist/cli.js

@@ -2333,6 +2333,7 @@ function createManifestCommand() {
 
 // src/instrument/hooks.ts
 import { resolve as resolve5 } from "path";
+import { serialize } from "@agent-scope/core";
 import { getBrowserEntryScript as getBrowserEntryScript2 } from "@agent-scope/playwright";
 import { Command as Cmd } from "commander";
 import { chromium as chromium2 } from "playwright";
@@ -2374,26 +2375,7 @@ function buildHookInstrumentationScript() {
   // Walk fiber tree and collect hook data per component
   var components = [];
 
-  function serializeValue(v) {
-    if (v === null) return null;
-    if (v === undefined) return undefined;
-    var t = typeof v;
-    if (t === "string" || t === "number" || t === "boolean") return v;
-    if (t === "function") return "[function " + (v.name || "anonymous") + "]";
-    if (Array.isArray(v)) {
-      try { return v.map(serializeValue); } catch(e) { return "[Array]"; }
-    }
-    if (t === "object") {
-      try {
-        var keys = Object.keys(v).slice(0, 5);
-        var out = {};
-        for (var k of keys) { out[k] = serializeValue(v[k]); }
-        if (Object.keys(v).length > 5) out["..."] = "(truncated)";
-        return out;
-      } catch(e) { return "[Object]"; }
-    }
-    return String(v);
-  }
+  var serializeValue = __SCOPE_SERIALIZE_VALUE__;
 
   // Hook node classifiers (mirrors hooks-extractor.ts logic)
   var HookLayout = 0b00100;
@@ -2614,7 +2596,10 @@ async function runHooksProfiling(componentName, filePath, props) {
     if (renderError !== null) {
       throw new Error(`Component render error: ${renderError}`);
     }
-    const instrumentScript = buildHookInstrumentationScript();
+    const instrumentScript = buildHookInstrumentationScript().replace(
+      "__SCOPE_SERIALIZE_VALUE__",
+      serialize.toString()
+    );
     const raw = await page.evaluate(instrumentScript);
     const result = raw;
     if (result.error) {
@@ -2816,44 +2801,79 @@ function buildProfilingCollectScript() {
 `;
 }
 async function replayInteraction(page, steps) {
-  for (const step of steps) {
+  let executed = 0;
+  const skippedInteractions = [];
+  const skip = (index, step, reason) => {
+    skippedInteractions.push({ index, action: step.action, target: step.target, reason });
+  };
+  for (const [index, step] of steps.entries()) {
     switch (step.action) {
       case "click":
-        if (step.target) {
-          await page.click(step.target, { timeout: 5e3 }).catch(() => {
-            process.stderr.write(`  \u26A0 click target "${step.target}" not found, skipping
+        if (!step.target) {
+          skip(index, step, "missing_target");
+          break;
+        }
+        try {
+          await page.click(step.target, { timeout: 5e3 });
+          executed++;
+        } catch {
+          process.stderr.write(`  \u26A0 click target "${step.target}" not found, skipping
 `);
-          });
+          skip(index, step, "not_found");
         }
         break;
       case "fill":
-        if (step.target && step.value !== void 0) {
-          await page.fill(step.target, step.value, { timeout: 5e3 }).catch(() => {
-            process.stderr.write(`  \u26A0 fill target "${step.target}" not found, skipping
+        if (!step.target) {
+          skip(index, step, "missing_target");
+          break;
+        }
+        if (step.value === void 0) {
+          skip(index, step, "missing_value");
+          break;
+        }
+        try {
+          await page.fill(step.target, step.value, { timeout: 5e3 });
+          executed++;
+        } catch {
+          process.stderr.write(`  \u26A0 fill target "${step.target}" not found, skipping
 `);
-          });
+          skip(index, step, "not_found");
         }
         break;
       case "hover":
-        if (step.target) {
-          await page.hover(step.target, { timeout: 5e3 }).catch(() => {
-            process.stderr.write(`  \u26A0 hover target "${step.target}" not found, skipping
+        if (!step.target) {
+          skip(index, step, "missing_target");
+          break;
+        }
+        try {
+          await page.hover(step.target, { timeout: 5e3 });
+          executed++;
+        } catch {
+          process.stderr.write(`  \u26A0 hover target "${step.target}" not found, skipping
 `);
-          });
+          skip(index, step, "not_found");
         }
         break;
       case "press":
-        if (step.value) {
-          await page.keyboard.press(step.value);
+        if (!step.value) {
+          skip(index, step, "missing_value");
+          break;
         }
+        await page.keyboard.press(step.value);
+        executed++;
         break;
       case "wait":
         await page.waitForTimeout(step.delay ?? 500);
+        executed++;
+        break;
+      default:
+        skip(index, step, "unsupported");
         break;
     }
   }
+  return { executed, skippedInteractions };
 }
-function analyzeProfileFlags(totalRenders, wastedRenders, timing, layoutShifts) {
+function analyzeProfileFlags(totalRenders, wastedRenders, timing, layoutShifts, profileValidity) {
   const flags = /* @__PURE__ */ new Set();
   if (wastedRenders !== null && wastedRenders > 0 && wastedRenders / Math.max(1, totalRenders) > 0.3) {
     flags.add("WASTED_RENDER");
@@ -2864,7 +2884,7 @@ function analyzeProfileFlags(totalRenders, wastedRenders, timing, layoutShifts)
   if (layoutShifts.cumulativeScore > 0.1) {
     flags.add("LAYOUT_SHIFT_DETECTED");
   }
-  if (timing.js > 100) {
+  if (profileValidity === "interaction" && timing.js > 100) {
     flags.add("SLOW_INTERACTION");
   }
   return [...flags];
@@ -2903,13 +2923,18 @@ async function runInteractionProfile(componentName, filePath, props, interaction
       throw new Error(`Profiling setup failed: ${setupData.error}`);
     }
     const jsStart = Date.now();
+    let executedInteractions = 0;
+    let skippedInteractions = [];
     if (interaction.length > 0) {
       process.stderr.write(`  Replaying ${interaction.length} interaction step(s)\u2026
 `);
-      await replayInteraction(page, interaction);
+      const replayResult = await replayInteraction(page, interaction);
+      executedInteractions = replayResult.executed;
+      skippedInteractions = replayResult.skippedInteractions;
       await page.waitForTimeout(300);
     }
     const jsDuration = Date.now() - jsStart;
+    const profileValidity = interaction.length === 0 ? "no_interaction_requested" : executedInteractions === 0 ? "setup_only" : "interaction";
     const collected = await page.evaluate(buildProfilingCollectScript());
     const profileData = collected;
     if (profileData.error) {
@@ -2927,7 +2952,13 @@ async function runInteractionProfile(componentName, filePath, props, interaction
     const totalRenders = profileData.commitCount ?? 0;
     const uniqueComponents = profileData.uniqueComponents ?? 0;
     const wastedRenders = profileData.wastedRenders ?? null;
-    const flags = analyzeProfileFlags(totalRenders, wastedRenders, timing, layoutShifts);
+    const flags = analyzeProfileFlags(
+      totalRenders,
+      wastedRenders,
+      timing,
+      layoutShifts,
+      profileValidity
+    );
     return {
       component: componentName,
       totalRenders,
@@ -2941,7 +2972,17 @@ async function runInteractionProfile(componentName, filePath, props, interaction
       timing,
       layoutShifts,
       flags,
-      interaction
+      interaction,
+      interactionSteps: {
+        attempted: interaction.length,
+        executed: executedInteractions,
+        skipped: skippedInteractions.length
+      },
+      interactionStepsAttempted: interaction.length,
+      interactionStepsExecuted: executedInteractions,
+      interactionStepsSkipped: skippedInteractions.length,
+      skippedInteractions,
+      profileValidity
     };
   } finally {
     await browser.close();
@@ -3047,6 +3088,7 @@ function flattenSerializedValue(sv) {
     case "string":
     case "number":
     case "boolean":
+    case "date":
       return v.value;
     case "object": {
       if (!Array.isArray(v.entries)) return {};
@@ -3899,7 +3941,7 @@ Examples:
 }
 
 // src/render-commands.ts
-import { existsSync as existsSync9, mkdirSync as mkdirSync5, readFileSync as readFileSync9, writeFileSync as writeFileSync6 } from "fs";
+import { existsSync as existsSync9, mkdirSync as mkdirSync5, readFileSync as readFileSync9, rmSync as rmSync2, writeFileSync as writeFileSync6 } from "fs";
 import { resolve as resolve11 } from "path";
 import {
   ALL_CONTEXT_IDS,
@@ -4157,6 +4199,39 @@ function formatAggregateRenderFailureJson(componentName, failures, scenarioCount
 }
 var MANIFEST_PATH6 = ".reactscope/manifest.json";
 var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
+function renderArtifactBaseName(componentName, scenarioName) {
+  return scenarioName === void 0 ? componentName : `${componentName}-${scenarioName}`;
+}
+function removeStaleRenderError(outputDir, componentName, scenarioName) {
+  const errorPath = resolve11(
+    outputDir,
+    `${renderArtifactBaseName(componentName, scenarioName)}.error.json`
+  );
+  if (existsSync9(errorPath)) {
+    rmSync2(errorPath, { force: true });
+  }
+}
+function writeRenderErrorArtifact(outputDir, failure) {
+  const errPath = resolve11(
+    outputDir,
+    `${renderArtifactBaseName(failure.component, failure.scenario)}.error.json`
+  );
+  writeFileSync6(
+    errPath,
+    JSON.stringify(
+      {
+        component: failure.component,
+        scenario: failure.scenario,
+        errorMessage: failure.errorMessage,
+        heuristicFlags: failure.heuristicFlags,
+        propsAtCrash: failure.propsAtCrash
+      },
+      null,
+      2
+    )
+  );
+  return errPath;
+}
 var _pool3 = null;
 async function getPool3(viewportWidth, viewportHeight) {
   if (_pool3 === null) {
@@ -4841,20 +4916,12 @@ function registerRenderAll(renderCmd) {
               success: false,
               errorMessage: outcome.error.message
             });
-            const errPath = resolve11(outputDir, `${name}.error.json`);
-            writeFileSync6(
-              errPath,
-              JSON.stringify(
-                {
-                  component: name,
-                  errorMessage: outcome.error.message,
-                  heuristicFlags: outcome.error.heuristicFlags,
-                  propsAtCrash: outcome.error.propsAtCrash
-                },
-                null,
-                2
-              )
-            );
+            const errPath = writeRenderErrorArtifact(outputDir, {
+              component: name,
+              errorMessage: outcome.error.message,
+              heuristicFlags: outcome.error.heuristicFlags,
+              propsAtCrash: outcome.error.propsAtCrash
+            });
             failures.push({
               component: name,
               stage: "render",
@@ -4867,13 +4934,14 @@ function registerRenderAll(renderCmd) {
           }
           const result = outcome.result;
           results.push({ name, renderTimeMs: result.renderTimeMs, success: true });
+          removeStaleRenderError(outputDir, name);
           if (!isIcon) {
             const pngPath = resolve11(outputDir, `${name}.png`);
             writeFileSync6(pngPath, result.screenshot);
             outputPaths.push(pngPath);
           }
           const jsonPath = resolve11(outputDir, `${name}.json`);
-          const renderJson = formatRenderJson(name, {}, result);
+          const renderJson = formatRenderJson(name, renderProps, result);
           const extResult = result;
           if (isIcon && extResult.svgContent) {
             renderJson.svgContent = extResult.svgContent;
@@ -4934,13 +5002,34 @@ function registerRenderAll(renderCmd) {
                 concurrency: 2
               });
               const matrixResult = await matrix.render();
-              const matrixCells = matrixResult.cells.map((cell) => ({
-                axisValues: [scenarioEntries2[cell.axisIndices[0] ?? 0]?.[0] ?? ""],
-                screenshot: cell.result.screenshot.toString("base64"),
-                width: cell.result.width,
-                height: cell.result.height,
-                renderTimeMs: cell.result.renderTimeMs
-              }));
+              const matrixCells = matrixResult.cells.map((cell) => {
+                const scenarioName = scenarioEntries2[cell.axisIndices[0] ?? 0]?.[0] ?? "";
+                const artifactBaseName = renderArtifactBaseName(name, scenarioName);
+                const scenarioPngPath = resolve11(outputDir, `${artifactBaseName}.png`);
+                const scenarioJsonPath = resolve11(outputDir, `${artifactBaseName}.json`);
+                if (!isIcon) {
+                  writeFileSync6(scenarioPngPath, cell.result.screenshot);
+                  outputPaths.push(scenarioPngPath);
+                }
+                const scenarioJson = formatRenderJson(
+                  `${name}:${scenarioName}`,
+                  scenarioPropsMap[scenarioName] ?? {},
+                  cell.result
+                );
+                writeFileSync6(scenarioJsonPath, JSON.stringify(scenarioJson, null, 2));
+                outputPaths.push(scenarioJsonPath);
+                removeStaleRenderError(outputDir, name, scenarioName);
+                return {
+                  axisValues: [scenarioName],
+                  scenario: scenarioName,
+                  outputPath: scenarioJsonPath,
+                  screenshotPath: isIcon ? void 0 : scenarioPngPath,
+                  screenshot: cell.result.screenshot.toString("base64"),
+                  width: cell.result.width,
+                  height: cell.result.height,
+                  renderTimeMs: cell.result.renderTimeMs
+                };
+              });
               const existingJson = JSON.parse(readFileSync9(jsonPath, "utf-8"));
               existingJson.cells = matrixCells;
               existingJson.axisLabels = [scenarioAxis.values];
@@ -5047,7 +5136,7 @@ function createRenderCommand() {
 }
 
 // src/report/baseline.ts
-import { existsSync as existsSync10, mkdirSync as mkdirSync6, rmSync as rmSync2, writeFileSync as writeFileSync7 } from "fs";
+import { existsSync as existsSync10, mkdirSync as mkdirSync6, rmSync as rmSync3, writeFileSync as writeFileSync7 } from "fs";
 import { resolve as resolve12 } from "path";
 import { generateManifest as generateManifest4 } from "@agent-scope/manifest";
 import { BrowserPool as BrowserPool4, safeRender as safeRender3 } from "@agent-scope/render";
@@ -5208,7 +5297,7 @@ async function runBaseline(options = {}) {
   const baselineDir = resolve12(rootDir, outputDir);
   const rendersDir = resolve12(baselineDir, "renders");
   if (existsSync10(baselineDir)) {
-    rmSync2(baselineDir, { recursive: true, force: true });
+    rmSync3(baselineDir, { recursive: true, force: true });
   }
   mkdirSync6(rendersDir, { recursive: true });
   let manifest;