Builder workbench and renderer update benchmarks

.agents/skills/chrome-capture-trace/SKILL.md → .agents/skills/chrome-trace/SKILL.md

@@ -1,9 +1,9 @@
 ---
-name: chrome-capture-trace
+name: chrome-trace
 description: Capture and analyze Chrome/Chromium performance traces with Playwright around a concrete browser interaction. Use when Codex needs to answer where frame time is spent during an update, drag, rotation, scroll, animation, camera movement, light movement, DOM/CSS render change, or other performance-sensitive UI action; especially when the right answer requires per-frame Chrome trace evidence instead of FPS-only guesses.
 ---
 
-# Chrome Capture Trace
+# Chrome Trace
 
 ## Core Workflow
 
@@ -26,12 +26,12 @@ Use `scripts/trace.mjs` as the front door:
 
 ```bash
 pnpm bench:build
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh glb:Elephant.glb --variant baseline --dom-samples --label elephant-baseline
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --variant baseline --dom-samples --frame-details --layer-details --gpu-details --trace-out bench/results/teapot.trace.json --label teapot-enriched --report
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --variant baseline --gpu-details full --trace-out bench/results/teapot-full-gpu.trace.json --label teapot-full-gpu
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs drag --mesh teapot --mode baked --frame-details --label teapot-drag
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --mesh garden --report --markdown-out bench/results/garden-trace.md
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs compare bench/results/before.json bench/results/after.json --markdown-out bench/results/trace-compare.md
+node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh glb:Elephant.glb --variant baseline --dom-samples --label elephant-baseline
+node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --variant baseline --dom-samples --frame-details --layer-details --gpu-details --trace-out bench/results/teapot.trace.json --label teapot-enriched --report
+node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --variant baseline --gpu-details full --trace-out bench/results/teapot-full-gpu.trace.json --label teapot-full-gpu
+node .agents/skills/chrome-trace/scripts/trace.mjs drag --mesh teapot --mode baked --frame-details --label teapot-drag
+node .agents/skills/chrome-trace/scripts/trace.mjs motion --mesh garden --report --markdown-out bench/results/garden-trace.md
+node .agents/skills/chrome-trace/scripts/trace.mjs compare bench/results/before.json bench/results/after.json --markdown-out bench/results/trace-compare.md
 ```
 
 Use `trace.mjs motion` for steady bench motion across `perf` and `nonvoxel` pages, cadence buckets, DOM samples, render stats, and tag counts.
@@ -65,7 +65,7 @@ Trace event durations are inclusive and often nested, especially GPU/viz and sch
 For arbitrary pages, use `trace.mjs generic`:
 
 ```bash
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic \
+node .agents/skills/chrome-trace/scripts/trace.mjs generic \
   --url http://127.0.0.1:3000 \
   --ready-js "window.appReady === true" \
   --action drag \
@@ -80,23 +80,23 @@ node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic \
 Useful alternatives:
 
 ```bash
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action wait --sample 3000
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action eval --eval "window.rotateScene?.(Math.PI / 2)"
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action scroll --scroll "0,900"
+node .agents/skills/chrome-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action wait --sample 3000
+node .agents/skills/chrome-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action eval --eval "window.rotateScene?.(Math.PI / 2)"
+node .agents/skills/chrome-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action scroll --scroll "0,900"
 ```
 
 ## Comparing Runs
 
 Use `--report` on a runner to generate a Markdown report after capture, or use `trace.mjs report` on an existing summary JSON:
 
 ```bash
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs report bench/results/garden.json --markdown-out bench/results/garden.md
+node .agents/skills/chrome-trace/scripts/trace.mjs report bench/results/garden.json --markdown-out bench/results/garden.md
 ```
 
 Use `trace.mjs compare` on summary JSON files from any runner:
 
 ```bash
-node .agents/skills/chrome-capture-trace/scripts/trace.mjs compare before.json after.json --markdown-out trace-compare.md
+node .agents/skills/chrome-trace/scripts/trace.mjs compare before.json after.json --markdown-out trace-compare.md
 ```
 
 Read positive deltas in `frame_time_*_ms` and trace group `ms/frame` as more expensive after the change. Read positive FPS deltas as better.

.agents/skills/chrome-trace/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Chrome Trace"
+  short_description: "Capture and analyze Chrome performance traces"
+  default_prompt: "Use $chrome-trace to capture a Chrome trace around an interaction and identify where frame time is spent."

.agents/skills/chrome-capture-trace/scripts/capture-trace.mjs → .agents/skills/chrome-trace/scripts/capture-trace.mjs

@@ -563,7 +563,7 @@ async function run() {
       : summarizeEvents(traceEvents, 0, -Infinity, Infinity, frames);
 
     const summary = {
-      kind: "chrome-capture-trace",
+      kind: "chrome-trace",
       url: URL,
       viewport,
       action,
@@ -590,7 +590,7 @@ async function run() {
       traceEvents,
       displayTimeUnit: "ms",
       metadata: {
-        source: "chrome-capture-trace/scripts/capture-trace.mjs",
+        source: "chrome-trace/scripts/capture-trace.mjs",
         url: URL,
         action,
         gpuDetails: GPU_DETAILS_MODE,

.agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs → .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs

@@ -7,11 +7,11 @@
  * and writes both a Chrome trace file and a compact JSON summary.
  *
  * Usage:
- *   node .agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs
- *   node .agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs --mesh teapot --mode baked --label teapot-drag
- *   node .agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs --degrees 360 --drag-ms 1500 --steps 120
- *   node .agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs --variant force-atlas --trace-out bench/results/teapot.trace.json
- *   node .agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs --frame-details --no-print-json
+ *   node .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs
+ *   node .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs --mesh teapot --mode baked --label teapot-drag
+ *   node .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs --degrees 360 --drag-ms 1500 --steps 120
+ *   node .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs --variant force-atlas --trace-out bench/results/teapot.trace.json
+ *   node .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs --frame-details --no-print-json
  */
 import { createServer } from "node:http";
 import { mkdirSync, writeFileSync } from "node:fs";
@@ -877,7 +877,7 @@ async function run() {
         traceEvents: events,
         displayTimeUnit: "ms",
         metadata: {
-          source: ".agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs",
+          source: ".agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs",
           mesh: MESH,
           mode: MODE,
           variant: VARIANT,

.agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs → .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs

@@ -6,11 +6,11 @@
  * samples, and reports compositor/style/raster/script cost per cadence bucket.
  *
  * Usage:
- *   node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs
- *   node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs --mesh ancient-crash-site --runs 3 --dom-samples
- *   node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs --mesh obj-house3 --renderer vanilla --label obj-house3-trace
- *   node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs --page nonvoxel --mesh glb:Elephant.glb --variant order-tile4 --no-trace
- *   node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs --page nonvoxel --mesh teapot --frame-details --layer-details
+ *   node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs
+ *   node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs --mesh ancient-crash-site --runs 3 --dom-samples
+ *   node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs --mesh obj-house3 --renderer vanilla --label obj-house3-trace
+ *   node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs --page nonvoxel --mesh glb:Elephant.glb --variant order-tile4 --no-trace
+ *   node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs --page nonvoxel --mesh teapot --frame-details --layer-details
  */
 import { createServer } from "node:http";
 import { mkdirSync, writeFileSync } from "node:fs";
@@ -64,6 +64,7 @@ const MODE = optStr("mode", "baked");
 const MOTION = optStr("motion", "rot");
 const RENDERER = optStr("renderer", "vanilla");
 const VARIANT = optStr("variant", "baseline");
+const DISABLE_STRATEGIES = optStr("disable-strategies", optStr("disableStrategies", ""));
 const WARMUP_MS = optNum("warmup", 1500);
 const SAMPLE_MS = optNum("sample", 6000);
 const RUNS = optNum("runs", 1);
@@ -266,7 +267,7 @@ const KEY_EVENTS = [
 ];
 
 function printHelp() {
-  console.log(`Usage: node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs [options]
+  console.log(`Usage: node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs [options]
 
 Options:
   --page <name>               perf | nonvoxel. Default: perf
@@ -953,7 +954,13 @@ function pageUrl(port) {
   if (PAGE !== "perf") {
     throw new Error(`Unknown --page "${PAGE}". Expected "perf" or "nonvoxel".`);
   }
-  return `http://127.0.0.1:${port}/perf-${RENDERER}.html?mesh=${encodeURIComponent(MESH)}&mode=${encodeURIComponent(MODE)}&motion=${encodeURIComponent(MOTION)}`;
+  const params = new URLSearchParams({
+    mesh: MESH,
+    mode: MODE,
+    motion: MOTION,
+    ...(DISABLE_STRATEGIES ? { disableStrategies: DISABLE_STRATEGIES } : {}),
+  });
+  return `http://127.0.0.1:${port}/perf-${RENDERER}.html?${params.toString()}`;
 }
 
 function traceOutputPath(repeat) {
@@ -1085,7 +1092,7 @@ async function runOnce(port, repeat) {
         traceEvents: events,
         displayTimeUnit: "ms",
         metadata: {
-          source: ".agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs",
+          source: ".agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs",
           page: PAGE,
           mesh: MESH,
           renderer: RENDERER,

.agents/skills/chrome-capture-trace/scripts/trace.mjs → .agents/skills/chrome-trace/scripts/trace.mjs

@@ -24,7 +24,7 @@ const RUNNERS = new Map([
 
 function printHelp() {
   console.log(`Usage:
-  node .agents/skills/chrome-capture-trace/scripts/trace.mjs <command> [options]
+  node .agents/skills/chrome-trace/scripts/trace.mjs <command> [options]
 
 Commands:
   polycss-motion  Steady perf/nonvoxel bench trace buckets.
@@ -39,14 +39,14 @@ Aliases:
   capture         -> generic
 
 Examples:
-  node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh glb:Elephant.glb --dom-samples --label elephant
-  node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --dom-samples --frame-details --layer-details --gpu-details --trace-out bench/results/teapot.trace.json --label teapot-enriched --report
-  node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --gpu-details full --trace-out bench/results/teapot-full-gpu.trace.json --label teapot-full-gpu
-  node .agents/skills/chrome-capture-trace/scripts/trace.mjs drag --mesh teapot --degrees 360 --frame-details --label teapot-drag
-  node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action drag --selector "#viewport"
-  node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --report --markdown-out bench/results/garden.md
-  node .agents/skills/chrome-capture-trace/scripts/trace.mjs report bench/results/garden.json --markdown-out bench/results/garden.md
-  node .agents/skills/chrome-capture-trace/scripts/trace.mjs compare before.json after.json --markdown-out report.md
+  node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh glb:Elephant.glb --dom-samples --label elephant
+  node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --dom-samples --frame-details --layer-details --gpu-details --trace-out bench/results/teapot.trace.json --label teapot-enriched --report
+  node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --gpu-details full --trace-out bench/results/teapot-full-gpu.trace.json --label teapot-full-gpu
+  node .agents/skills/chrome-trace/scripts/trace.mjs drag --mesh teapot --degrees 360 --frame-details --label teapot-drag
+  node .agents/skills/chrome-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action drag --selector "#viewport"
+  node .agents/skills/chrome-trace/scripts/trace.mjs motion --report --markdown-out bench/results/garden.md
+  node .agents/skills/chrome-trace/scripts/trace.mjs report bench/results/garden.json --markdown-out bench/results/garden.md
+  node .agents/skills/chrome-trace/scripts/trace.mjs compare before.json after.json --markdown-out report.md
 `);
 }
 
@@ -565,7 +565,7 @@ function ensureReportSummaryPath(cmd, args) {
   if (cmd === "polycss-motion" || cmd === "motion" || cmd === "polycss-buckets" || cmd === "buckets") {
     const label = argValue(args, "label");
     if (label) return { childArgs: args, summaryPath: inferSummaryPath(cmd, args) };
-    const file = resolve(tmpdir(), `chrome-capture-trace-${Date.now()}.json`);
+    const file = resolve(tmpdir(), `chrome-trace-${Date.now()}.json`);
     return { childArgs: appendArg(args, "summary-out", file), summaryPath: file };
   }