@pixel-point/toolcraft 0.0.2

package/templates/starter/src/app/starter-performance.test.ts

@@ -0,0 +1,1390 @@
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { basename, dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+import {
+  collectToolcraftPerformanceSensitiveControls,
+  collectToolcraftUnclassifiedPerformanceControls,
+  defineToolcraft,
+  validateToolcraftPerformanceCoverage,
+} from "@repo/toolcraft-runtime";
+
+import { starterPerformance } from "./starter-performance";
+import { starterSchema } from "./starter-schema";
+
+const currentFileName = basename(fileURLToPath(import.meta.url));
+const appDir = dirname(fileURLToPath(import.meta.url));
+const srcDir = join(appDir, "..");
+const routesDir = join(appDir, "../routes");
+const e2eDir = join(appDir, "../../e2e");
+const projectDir = join(appDir, "../..");
+
+function stripJsComments(source: string): string {
+  return source
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/(^|[^:])\/\/.*$/gm, "$1");
+}
+
+function readFiles(rootDir: string, matcher: RegExp): string {
+  const chunks: string[] = [];
+
+  function visit(currentDir: string) {
+    for (const entry of readdirSync(currentDir, { withFileTypes: true })) {
+      const filePath = join(currentDir, entry.name);
+
+      if (entry.isDirectory()) {
+        if (!["dist", "node_modules", "toolcraft"].includes(entry.name)) {
+          visit(filePath);
+        }
+        continue;
+      }
+
+      if (
+        entry.isFile() &&
+        matcher.test(entry.name) &&
+        !/\.(test|spec)\.[cm]?[jt]sx?$/.test(entry.name) &&
+        !/^(?:starter-|app-)(?:acceptance|performance)\.ts$/.test(entry.name)
+      ) {
+        chunks.push(readFileSync(filePath, "utf8"));
+      }
+    }
+  }
+
+  visit(rootDir);
+  return chunks.join("\n");
+}
+
+function readSiblingAppTestSources(): string {
+  return readdirSync(appDir)
+    .filter((fileName) => /\.(test|spec)\.[cm]?[jt]sx?$/.test(fileName))
+    .filter((fileName) => fileName !== currentFileName)
+    .map((fileName) => readFileSync(join(appDir, fileName), "utf8"))
+    .map(stripJsComments)
+    .join("\n");
+}
+
+function readBrowserTestSources(): string {
+  return readdirSync(e2eDir)
+    .filter((fileName) => /\.(test|spec)\.[cm]?[jt]sx?$/.test(fileName))
+    .map((fileName) => readFileSync(join(e2eDir, fileName), "utf8"))
+    .map(stripJsComments)
+    .join("\n");
+}
+
+function readMarkdownFiles(rootDir: string): string {
+  if (!existsSync(rootDir)) {
+    return "";
+  }
+
+  const chunks: string[] = [];
+
+  function visit(currentDir: string) {
+    for (const entry of readdirSync(currentDir, { withFileTypes: true })) {
+      const filePath = join(currentDir, entry.name);
+
+      if (entry.isDirectory()) {
+        if (!["dist", "node_modules", "toolcraft"].includes(entry.name)) {
+          visit(filePath);
+        }
+        continue;
+      }
+
+      if (entry.isFile() && /\.mdx?$/i.test(entry.name)) {
+        chunks.push(readFileSync(filePath, "utf8"));
+      }
+    }
+  }
+
+  visit(rootDir);
+  return chunks.join("\n");
+}
+
+function readProjectDecisionSources(): string {
+  return stripJsComments(
+    [
+      readMarkdownFiles(join(projectDir, "docs")),
+      readMarkdownFiles(join(projectDir, "specs")),
+      readMarkdownFiles(join(projectDir, "plans")),
+    ].join("\n"),
+  );
+}
+
+function projectDocsIncludeRendererTechniqueDecision(): boolean {
+  const decisionSources = readProjectDecisionSources();
+
+  return [
+    /Renderer Technique Decision Matrix/i,
+    /sourceRepresentation/,
+    /productRepresentation/,
+    /previewRenderer/,
+    /exportRenderer/,
+    /rendererWorkload/,
+    /rendererStrategy/,
+    /whyNotAlternativeStrategies/,
+    /fidelityRisks/,
+    /performanceRisks/,
+  ].every((pattern) => pattern.test(decisionSources));
+}
+
+function projectDocsIncludeRendererLayerInventory(): boolean {
+  const decisionSources = readProjectDecisionSources();
+
+  return (
+    /Renderer Layer Inventory|rendererTechnique\.layers|layer inventory/i.test(decisionSources) &&
+    /backgroundLayer|productForegroundLayer|editingHandlesLayer|exportComposite|product-foreground/i.test(
+      decisionSources,
+    )
+  );
+}
+
+function projectDocsExplainRendererAlternatives(): boolean {
+  const decisionSources = readProjectDecisionSources();
+
+  return (
+    /whyNotAlternativeStrategies/.test(decisionSources) &&
+    /alternative|strategy|renderer/i.test(decisionSources) &&
+    /text-output|vector-output|pixel-output|rendererWorkload/.test(decisionSources) &&
+    /exportRenderer|export\/copy|product-quality/i.test(decisionSources)
+  );
+}
+
+function sourceUsesCustomRenderer(): boolean {
+  const routeSources = stripJsComments(readFiles(routesDir, /\.(ts|tsx)$/));
+  const appSources = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/));
+
+  return (
+    /canvasContent\s*=/.test(routeSources) ||
+    /renderDefaultCanvasMedia=\{false\}/.test(routeSources) ||
+    /useToolcraft(Value)?\(/.test(appSources) ||
+    /getContext\(["']2d["']\)|webgl|webgpu|OffscreenCanvas|ImageData/.test(appSources)
+  );
+}
+
+function sourceUsesHardcodedOutputBackgroundColor(
+  source = stripJsComments(readFiles(srcDir, /\.(ts|tsx|css)$/)),
+): boolean {
+  const canvasFillPattern =
+    /(?:ctx|context|canvasContext)\.fillStyle\s*=\s*["']#[0-9a-fA-F]{3,8}["'][\s\S]{0,240}\.fillRect\s*\(/;
+  const outputCssBackgroundPattern =
+    /\.(?:[a-z0-9_-]*(?:canvas|renderer|preview|output|product)[a-z0-9_-]*)\s*{[^}]*background(?:-color)?\s*:\s*#[0-9a-fA-F]{3,8}/i;
+
+  return canvasFillPattern.test(source) || outputCssBackgroundPattern.test(source);
+}
+
+function schemaHasOutputBackgroundColorControl(): boolean {
+  return (starterSchema.panels.controls?.sections ?? []).some((section) =>
+    Object.values(section.controls).some((control) => {
+      if (control.type !== "color") {
+        return false;
+      }
+
+      const searchText = [
+        section.title,
+        typeof control.label === "string" ? control.label : "",
+        control.target,
+      ].join(" ");
+
+      return /\b(background|backdrop|scene|canvas)\b/i.test(searchText);
+    }),
+  );
+}
+
+function projectDocsIncludeFixedBackgroundDecision(): boolean {
+  return /fixedBackgroundReason|fixed background|non-editable background|not user-editable background|reference-defined background|product-defined background/i.test(
+    readProjectDecisionSources(),
+  );
+}
+
+function sourceUsesCpuPixelLoop(): boolean {
+  const appSources = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/));
+
+  return (
+    /new\s+ImageData\s*\(/.test(appSources) ||
+    /\.createImageData\s*\(/.test(appSources) ||
+    /\.getImageData\s*\(/.test(appSources) ||
+    /\.putImageData\s*\(/.test(appSources)
+  );
+}
+
+function sourceUsesGpuRenderer(): boolean {
+  const appSources = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/));
+
+  return /getContext\(["']webgl2?["']\)|navigator\.gpu|GPUCanvasContext/.test(appSources);
+}
+
+function sourceUsesWebGlLifecycleGuard(): boolean {
+  const appSources = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/));
+
+  return (
+    /useEffect\s*\(/.test(appSources) ||
+    /useLayoutEffect\s*\(/.test(appSources) ||
+    /useMemo\s*\(/.test(appSources) ||
+    /useRef\s*\(/.test(appSources) ||
+    /class\s+\w+Renderer/.test(appSources)
+  );
+}
+
+function sourceCreatesWebGlContextInComponentRender(): boolean {
+  const appSources = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/));
+  const componentRenderPattern =
+    /function\s+[A-Z]\w*\s*\([^)]*\)\s*{(?![\s\S]{0,600}use(?:Layout)?Effect\s*\()[\s\S]{0,600}\.getContext\(["']webgl2?["']\)/;
+
+  return componentRenderPattern.test(appSources);
+}
+
+function sourceMayUploadTextureFromTimelineDrivenEffect(): boolean {
+  const appSources = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/));
+  const timelineDrivenTextureUploadPattern =
+    /use(?:Layout)?Effect\s*\(\s*\(\)\s*=>\s*{[\s\S]*?(?:texImage2D\s*\(|\.setImage\s*\()[\s\S]*?}\s*,\s*\[[\s\S]*?(?:settings|state\.timeline|currentTimeSeconds|keyframeGroups)[\s\S]*?\]\s*\)/;
+
+  return timelineDrivenTextureUploadPattern.test(appSources);
+}
+
+function sourceResyncsTimelineDurationFromRuntimeDuration(): boolean {
+  const appSources = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/));
+  const durationResyncPattern =
+    /use(?:Layout)?Effect\s*\(\s*\(\)\s*=>\s*{[\s\S]*?timeline\.setDuration[\s\S]*?}\s*,\s*\[[\s\S]*state\.timeline\.durationSeconds[\s\S]*\]\s*\)/;
+
+  return durationResyncPattern.test(appSources);
+}
+
+function sourceUsesLowResolutionPreviewUpscale(source = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/))): boolean {
+  const lowResolutionPreviewPattern =
+    /maxPreviewPixels|previewPixelBudget|previewScale|previewRatio|lowRes|lowResolution|downsample/i;
+  const scaledDrawImagePattern =
+    /\.drawImage\s*\([\s\S]{0,240}(?:outputWidth|outputHeight|state\.canvas\.size|canvas\.width|canvas\.height)[\s\S]{0,240}\)/;
+
+  return lowResolutionPreviewPattern.test(source) || scaledDrawImagePattern.test(source);
+}
+
+function browserTestsAssertNativePreviewResolution(): boolean {
+  const browserTestSources = readBrowserTestSources();
+
+  return (
+    /previewWidth|previewHeight|clientWidth|clientHeight|getBoundingClientRect/.test(
+      browserTestSources,
+    ) &&
+    /outputWidth|outputHeight|state\.canvas\.size|canvas\.size|toHaveAttribute/.test(
+      browserTestSources,
+    )
+  );
+}
+
+function sourceUsesAnimationFrameWithoutCleanup(): boolean {
+  const appSources = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/));
+
+  return /requestAnimationFrame\s*\(/.test(appSources) && !/cancelAnimationFrame\s*\(/.test(appSources);
+}
+
+function sourceUsesDirectStorageApi(): boolean {
+  const appSources = stripJsComments(readFiles(srcDir, /\.(ts|tsx)$/));
+
+  return /\b(?:localStorage|sessionStorage)\s*\./.test(appSources);
+}
+
+describe("Toolcraft template app performance coverage", () => {
+  it("publishes a sequential browser performance gate", () => {
+    const packageJson = JSON.parse(readFileSync(join(projectDir, "package.json"), "utf8")) as {
+      scripts?: Record<string, string>;
+    };
+
+    expect(
+      packageJson.scripts?.["test:browser:perf"],
+      "Generated apps must expose a sequential browser performance gate so perf budgets are measured without parallel e2e noise.",
+    ).toBe(
+      'playwright install chromium && playwright test e2e/app-performance.spec.ts --workers=1 && playwright test --grep "browser perf:" --workers=1 --pass-with-no-tests',
+    );
+    expect(packageJson.scripts?.["verify:quick"]).toBe("pnpm ai:check && pnpm test");
+    expect(packageJson.scripts?.["verify:ui"]).toBe("pnpm test:browser");
+    expect(packageJson.scripts?.["verify:perf"]).toBe("pnpm test:browser:perf");
+    expect(packageJson.scripts?.["verify:final"]).toBe(
+      "pnpm ai:check && pnpm test && pnpm build && pnpm test:browser && pnpm test:browser:perf",
+    );
+  });
+
+  it("requires valid performance coverage for declared workload scenarios", () => {
+    expect(validateToolcraftPerformanceCoverage(starterSchema, starterPerformance)).toEqual([]);
+  });
+
+  it("requires every visible control to classify its performance role", () => {
+    const unclassifiedControls =
+      collectToolcraftUnclassifiedPerformanceControls(starterSchema);
+
+    expect(
+      unclassifiedControls,
+      "Every visible non-action control must declare performanceRole as workload or responsiveness so AI cannot skip the performance decision.",
+    ).toEqual([]);
+  });
+
+  it("requires generated custom renderers to opt into the performance matrix", () => {
+    if (sourceUsesCustomRenderer()) {
+      expect(starterPerformance.usesCustomRenderer).toBe(true);
+    }
+  });
+
+  it("requires custom renderer apps to document the renderer technique decision", () => {
+    if (!starterPerformance.usesCustomRenderer) {
+      return;
+    }
+
+    expect(
+      projectDocsIncludeRendererTechniqueDecision(),
+      "Custom renderer apps must write a Renderer Technique Decision Matrix in their app spec/plan docs before implementation; AGENTS.md rules alone do not count as the app decision.",
+    ).toBe(true);
+  });
+
+  it("requires custom renderer apps to document the renderer layer inventory", () => {
+    if (!starterPerformance.usesCustomRenderer) {
+      return;
+    }
+
+    expect(
+      projectDocsIncludeRendererLayerInventory(),
+      "Custom renderer apps must write a Renderer Layer Inventory in their app spec/plan docs so dense raster backgrounds cannot silently rasterize semantic foreground output.",
+    ).toBe(true);
+  });
+
+  it("requires custom renderer apps to mirror the renderer decision in typed performance config", () => {
+    if (!starterPerformance.usesCustomRenderer) {
+      return;
+    }
+
+    expect(
+      starterPerformance.rendererTechnique,
+      "Custom renderer apps must declare rendererTechnique in app-performance.ts; prose specs and plans are not enough.",
+    ).toBeDefined();
+  });
+
+  it("requires custom renderer apps to mirror layer inventory in typed performance config", () => {
+    if (!starterPerformance.usesCustomRenderer) {
+      return;
+    }
+
+    expect(
+      starterPerformance.rendererTechnique?.layers?.length ?? 0,
+      "Custom renderer apps must mirror the Renderer Layer Inventory in app-performance.ts rendererTechnique.layers so browser tests and zoom-stress classification can verify the real visual layers.",
+    ).toBeGreaterThan(0);
+  });
+
+  it("requires custom renderer apps to explain rejected renderer alternatives", () => {
+    if (!starterPerformance.usesCustomRenderer) {
+      return;
+    }
+
+    expect(
+      projectDocsExplainRendererAlternatives(),
+      "Custom renderer specs must explain why the chosen preview/export renderer fits the product better than alternatives, including reference preservation, workload, and product-quality export behavior.",
+    ).toBe(true);
+  });
+
+  it("requires renderer-owned hardcoded backgrounds to be schema-controlled or explicitly fixed", () => {
+    if (!sourceUsesHardcodedOutputBackgroundColor()) {
+      return;
+    }
+
+    expect(
+      schemaHasOutputBackgroundColorControl() || projectDocsIncludeFixedBackgroundDecision(),
+      "Renderer-owned output background colors must be schema color controls. If a background is intentionally fixed, document the fixed background reason in the app spec/plan so the missing control is deliberate.",
+    ).toBe(true);
+  });
+
+  it("requires custom renderers to declare a renderer strategy", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "none",
+        rendererWorkload: "simple-composition",
+        scenarios: starterPerformance.scenarios,
+        usesCustomRenderer: true,
+        workloadTargets: starterPerformance.workloadTargets,
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'Custom renderers must declare rendererStrategy "dom", "svg", "canvas-2d", "webgl", or "webgpu".',
+      ]),
+    );
+  });
+
+  it("rejects renderer strategies on non-custom apps", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "canvas-2d",
+        rendererWorkload: "none",
+        scenarios: starterPerformance.scenarios,
+        usesCustomRenderer: false,
+        workloadTargets: starterPerformance.workloadTargets,
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'Non-custom renderer configs must use rendererStrategy "none", received "canvas-2d".',
+      ]),
+    );
+  });
+
+  it("requires custom renderers to declare a non-empty renderer workload", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "canvas-2d",
+        rendererWorkload: "none",
+        scenarios: starterPerformance.scenarios,
+        usesCustomRenderer: true,
+        workloadTargets: starterPerformance.workloadTargets,
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'Custom renderers must declare rendererWorkload "simple-composition", "text-output", "vector-output", or "pixel-output".',
+      ]),
+    );
+  });
+
+  it("rejects renderer workloads on non-custom apps", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "none",
+        rendererWorkload: "simple-composition",
+        scenarios: starterPerformance.scenarios,
+        usesCustomRenderer: false,
+        workloadTargets: starterPerformance.workloadTargets,
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'Non-custom renderer configs must use rendererWorkload "none", received "simple-composition".',
+      ]),
+    );
+  });
+
+  it("requires pixel-output renderers to use WebGL or WebGPU", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "canvas-2d",
+        rendererWorkload: "pixel-output",
+        scenarios: starterPerformance.scenarios,
+        usesCustomRenderer: true,
+        workloadTargets: starterPerformance.workloadTargets,
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'rendererWorkload "pixel-output" must use rendererStrategy "webgl" or "webgpu", received "canvas-2d".',
+      ]),
+    );
+  });
+
+  it("rejects text and vector product techniques that silently choose pixel output", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "webgl",
+        rendererTechnique: {
+          exportRenderer: "webgl",
+          fidelityRisks: ["raster output could blur product geometry"],
+          performanceRisks: ["large output requires GPU-backed drawing"],
+          previewRenderer: "webgl",
+          productRepresentation: "vector",
+          rendererStrategy: "webgl",
+          rendererWorkload: "pixel-output",
+          sourceRepresentation: "svg",
+          whyNotAlternativeStrategies: ["svg preview was not selected"],
+        },
+        rendererWorkload: "pixel-output",
+        scenarios: starterPerformance.scenarios,
+        usesCustomRenderer: true,
+        workloadTargets: starterPerformance.workloadTargets,
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'productRepresentation "vector" requires rendererWorkload "vector-output" unless intentionalRasterizationReason is provided.',
+      ]),
+    );
+  });
+
+  it("requires pixel-output renderers to include a stress preview or animation scenario", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "webgl",
+        rendererWorkload: "pixel-output",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: preview render stays under budget",
+            browser: true,
+            browserTestName: "browser perf: preview render stays under budget",
+            budget: { maxLongTaskMs: 120, maxPreviewMs: 1000 },
+            expectedObservable: "Preview renders without freezing.",
+            fixture: "1600x1000 output fixture",
+            id: "preview-render",
+            interaction: "preview-render",
+            workload: false,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: prompt changes stay responsive",
+            browser: true,
+            browserTestName: "browser perf: prompt changes stay responsive",
+            budget: { maxFrameGapMs: 80, maxInteractionMs: 500 },
+            controlLabel: "Prompt",
+            expectedObservable: "Prompt changes without blocking preview.",
+            fixture: "starter prompt fixture",
+            id: "generation-prompt-change",
+            interaction: "control-change",
+            target: "generation.prompt",
+            values: {
+              default: "Describe the effect",
+              max: "Performance verified prompt with a longer generation request",
+              min: "",
+            },
+            workload: true,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: viewport stays stable",
+            browser: true,
+            browserTestName: "browser perf: viewport stays stable",
+            budget: { maxFrameGapMs: 80 },
+            expectedObservable: "Viewport remains stable.",
+            fixture: "1600x1000 output fixture",
+            id: "viewport-stability",
+            interaction: "viewport-stability",
+            workload: false,
+          },
+        ],
+        usesCustomRenderer: true,
+        workloadTargets: ["generation.prompt"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'rendererWorkload "pixel-output" must include a stress preview-render or animation-frame scenario with stress: true for the largest product canvas and heaviest workload values.',
+      ]),
+    );
+  });
+
+  it("requires pixel-output renderers to budget long tasks", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "webgl",
+        rendererWorkload: "pixel-output",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: preview render stays under budget",
+            browser: true,
+            browserTestName: "browser perf: preview render stays under budget",
+            budget: { maxPreviewMs: 1000 },
+            expectedObservable: "Worst-case preview renders without freezing.",
+            fixture: "2400x1600 worst-case output fixture",
+            id: "preview-render",
+            interaction: "preview-render",
+            stress: true,
+            workload: false,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: prompt changes stay responsive",
+            browser: true,
+            browserTestName: "browser perf: prompt changes stay responsive",
+            budget: { maxFrameGapMs: 80, maxInteractionMs: 500 },
+            controlLabel: "Prompt",
+            expectedObservable: "Prompt changes without blocking preview.",
+            fixture: "starter prompt fixture",
+            id: "generation-prompt-change",
+            interaction: "control-change",
+            target: "generation.prompt",
+            values: {
+              default: "Describe the effect",
+              max: "Performance verified prompt with a longer generation request",
+              min: "",
+            },
+            workload: true,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: viewport stays stable",
+            browser: true,
+            browserTestName: "browser perf: viewport stays stable",
+            budget: { maxFrameGapMs: 80 },
+            expectedObservable: "Viewport remains stable.",
+            fixture: "1600x1000 output fixture",
+            id: "viewport-stability",
+            interaction: "viewport-stability",
+            workload: false,
+          },
+        ],
+        usesCustomRenderer: true,
+        workloadTargets: ["generation.prompt"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'rendererWorkload "pixel-output" must include at least one maxLongTaskMs budget so GPU-backed previews cannot pass while freezing the main thread.',
+      ]),
+    );
+  });
+
+  it("detects low-resolution preview upscale code paths", () => {
+    expect(
+      sourceUsesLowResolutionPreviewUpscale(`
+        const maxPreviewPixels = 1_250_000;
+        const previewScale = Math.sqrt(maxPreviewPixels / (outputWidth * outputHeight));
+        previewContext.drawImage(offscreenCanvas, 0, 0, outputWidth, outputHeight);
+      `),
+    ).toBe(true);
+
+    expect(
+      sourceUsesLowResolutionPreviewUpscale(`
+        canvas.width = outputWidth;
+        canvas.height = outputHeight;
+        drawAsciiTextToCanvas({ canvas, text });
+      `),
+    ).toBe(false);
+  });
+
+  it("rejects low-resolution preview upscale for text and vector output renderers", () => {
+    if (
+      starterPerformance.rendererWorkload !== "text-output" &&
+      starterPerformance.rendererWorkload !== "vector-output"
+    ) {
+      return;
+    }
+
+    expect(
+      sourceUsesLowResolutionPreviewUpscale(),
+      "Text/vector product previews must preserve native output fidelity. Do not render a low-resolution preview canvas/texture and upscale it to state.canvas.size; optimize layout/drawing instead.",
+    ).toBe(false);
+  });
+
+  it("requires text and vector output browser tests to prove native preview resolution", () => {
+    if (
+      !starterPerformance.usesCustomRenderer ||
+      (starterPerformance.rendererWorkload !== "text-output" &&
+        starterPerformance.rendererWorkload !== "vector-output")
+    ) {
+      return;
+    }
+
+    expect(
+      browserTestsAssertNativePreviewResolution(),
+      "Text/vector custom renderers must have a browser test proving visible preview dimensions match product output dimensions so low-resolution upscale cannot pass unnoticed.",
+    ).toBe(true);
+  });
+
+  it("requires procedural pixel-loop renderers to use a GPU strategy", () => {
+    if (!sourceUsesCpuPixelLoop()) {
+      return;
+    }
+
+    expect(
+      starterPerformance.rendererWorkload,
+      "Procedural ImageData/getImageData/putImageData renderers must be classified as pixel-output.",
+    ).toBe("pixel-output");
+    expect(
+      starterPerformance.rendererStrategy,
+      "Procedural ImageData/getImageData/putImageData renderers must be converted to WebGL/WebGPU or removed from the critical render path.",
+    ).toMatch(/^(webgl|webgpu)$/);
+    expect(
+      sourceUsesGpuRenderer(),
+      "Procedural pixel renderers must contain an actual WebGL/WebGPU code path, not only declare a GPU strategy.",
+    ).toBe(true);
+  });
+
+  it("requires WebGL/WebGPU renderers to keep their pipeline lifecycle outside React render", () => {
+    if (!sourceUsesGpuRenderer()) {
+      return;
+    }
+
+    expect(
+      sourceUsesWebGlLifecycleGuard(),
+      "WebGL/WebGPU renderer setup must be guarded by refs, memoized setup, an effect, or a renderer class so control changes update uniforms/buffers instead of rebuilding the pipeline.",
+    ).toBe(true);
+    expect(
+      sourceCreatesWebGlContextInComponentRender(),
+      "Do not create a WebGL context directly in the component render path; initialize it once and update uniforms/buffers on runtime value changes.",
+    ).toBe(false);
+  });
+
+  it("requires animation loops to clean up scheduled frames", () => {
+    expect(
+      sourceUsesAnimationFrameWithoutCleanup(),
+      "Renderers that schedule requestAnimationFrame must cancelAnimationFrame on cleanup to avoid runaway loops during control changes or route unmount.",
+    ).toBe(false);
+  });
+
+  it("rejects direct app storage writes outside the runtime persistence policy", () => {
+    expect(
+      sourceUsesDirectStorageApi(),
+      "Generated apps must not read or write app state through localStorage/sessionStorage directly. Use runtime persistence policy when product persistence is required.",
+    ).toBe(false);
+  });
+
+  it("rejects renderer effects that overwrite user-edited timeline duration", () => {
+    expect(
+      sourceResyncsTimelineDurationFromRuntimeDuration(),
+      "Renderers must not watch state.timeline.durationSeconds and dispatch timeline.setDuration back to a computed local duration. Compute a default only during initialization/reset, then map renderer progress to state.timeline.durationSeconds.",
+    ).toBe(false);
+  });
+
+  it("rejects timeline-driven texture uploads in GPU keyframe renderers", () => {
+    if (
+      !sourceUsesGpuRenderer() ||
+      starterSchema.panels.timeline?.enabled !== true ||
+      starterSchema.panels.timeline.mode !== "keyframes"
+    ) {
+      return;
+    }
+
+    expect(
+      sourceMayUploadTextureFromTimelineDrivenEffect(),
+      "GPU keyframe renderers must upload source textures only when media/resource keys change. Timeline-driven effects may update uniforms and draw, but must not call texImage2D or renderer.setImage from an effect that depends on settings/currentTime/keyframeGroups.",
+    ).toBe(false);
+  });
+
+  it("requires workload targets for performance-sensitive schema controls", () => {
+    const workloadTargets = new Set(starterPerformance.workloadTargets);
+    const sensitiveControls = collectToolcraftPerformanceSensitiveControls(starterSchema);
+
+    for (const { controlId, target } of sensitiveControls) {
+      expect(
+        workloadTargets,
+        `${controlId} (${target}) looks performance-sensitive and must be listed in workloadTargets or deliberately removed from the app.`,
+      ).toContain(target);
+    }
+  });
+
+  it("requires each automated performance scenario to point at an app test", () => {
+    const testSources = readSiblingAppTestSources();
+
+    for (const scenario of starterPerformance.scenarios) {
+      if (!scenario.automated) {
+        continue;
+      }
+
+      expect(
+        testSources,
+        `${scenario.id} must be backed by an app test named "${scenario.automatedTestName}".`,
+      ).toContain(scenario.automatedTestName);
+    }
+  });
+
+  it("requires each browser performance scenario to point at a Playwright test", () => {
+    const browserTestSources = readBrowserTestSources();
+
+    for (const scenario of starterPerformance.scenarios) {
+      if (!scenario.browser) {
+        continue;
+      }
+
+      expect(
+        browserTestSources,
+        `${scenario.id} must be backed by a Playwright test named "${scenario.browserTestName}".`,
+      ).toContain(scenario.browserTestName);
+    }
+  });
+
+  it("rejects reused browser performance tests across scenarios", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "none",
+        rendererWorkload: "none",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: prompt min change stays responsive",
+            browser: true,
+            browserTestName: "browser perf: prompt changes stay responsive",
+            budget: { maxFrameGapMs: 80, maxInteractionMs: 500 },
+            controlLabel: "Prompt",
+            expectedObservable: "Prompt min edit updates product output.",
+            fixture: "starter prompt fixture",
+            id: "prompt-min-change",
+            interaction: "control-change",
+            target: "generation.prompt",
+            values: { default: "Describe the effect", max: "Long prompt", min: "" },
+            workload: true,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: prompt max change stays responsive",
+            browser: true,
+            browserTestName: "browser perf: prompt changes stay responsive",
+            budget: { maxFrameGapMs: 80, maxInteractionMs: 500 },
+            controlLabel: "Prompt",
+            expectedObservable: "Prompt max edit updates product output.",
+            fixture: "starter prompt fixture",
+            id: "prompt-max-change",
+            interaction: "control-change",
+            target: "generation.prompt",
+            values: { default: "Describe the effect", max: "Long prompt", min: "" },
+            workload: true,
+          },
+        ],
+        usesCustomRenderer: false,
+        workloadTargets: ["generation.prompt"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'prompt-max-change browserTestName "browser perf: prompt changes stay responsive" is already used by prompt-min-change. Give each performance scenario its own browser test so every control is actually exercised.',
+      ]),
+    );
+  });
+
+  it("fails custom renderer configs that omit real workload coverage", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "canvas-2d",
+        rendererWorkload: "simple-composition",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: preview render stays under budget",
+            browser: true,
+            browserTestName: "browser perf: preview render stays interactive",
+            budget: { maxPreviewMs: 100 },
+            expectedObservable: "Preview renders without freezing.",
+            fixture: "1600x1000 gradient fixture",
+            id: "preview-render",
+            interaction: "preview-render",
+            workload: false,
+          },
+        ],
+        usesCustomRenderer: true,
+        workloadTargets: ["generation.prompt"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        "Custom renderers must include a control-drag performance scenario.",
+        "generation.prompt must have min/default/max workload performance coverage.",
+      ]),
+    );
+  });
+
+  it("requires custom renderers to cover upload, output actions, and viewport stability", () => {
+    const outputSchema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 1080, unit: "px", width: 1920 },
+        sizing: { mode: "editable-output" },
+        upload: true,
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                export: {
+                  actions: [{ label: "Export PNG", value: "export-png" }],
+                  target: "panel.actions",
+                  type: "panelActions",
+                },
+                quality: {
+                  defaultValue: 0.5,
+                  label: "Quality",
+                  max: 1,
+                  min: 0,
+                  target: "render.quality",
+                  type: "slider",
+                },
+              },
+            },
+          ],
+          title: "Renderer Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftPerformanceCoverage(outputSchema, {
+        rendererStrategy: "canvas-2d",
+        rendererWorkload: "simple-composition",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: preview render stays under budget",
+            browser: true,
+            browserTestName: "browser perf: preview render stays under budget",
+            budget: { maxPreviewMs: 1000 },
+            expectedObservable: "Preview renders without freezing.",
+            fixture: "1920x1080 output fixture",
+            id: "preview-render",
+            interaction: "preview-render",
+            workload: false,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: quality drag stays responsive",
+            browser: true,
+            browserTestName: "browser perf: quality drag stays responsive",
+            budget: { maxFrameGapMs: 50, maxInteractionMs: 250 },
+            controlLabel: "Quality",
+            expectedObservable: "Dragging Quality remains responsive.",
+            fixture: "1920x1080 output fixture",
+            id: "quality-drag",
+            interaction: "control-drag",
+            target: "render.quality",
+            values: { default: 0.5, max: 1, min: 0 },
+            workload: true,
+          },
+        ],
+        usesCustomRenderer: true,
+        workloadTargets: ["render.quality"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        "Custom renderers must include a viewport-stability performance scenario.",
+        "Custom renderers with canvas upload must include a media-import performance scenario.",
+        "Output actions must include an export-copy performance scenario.",
+      ]),
+    );
+  });
+
+  it("requires keyframe custom renderers to cover viewport stability during keyframe interactions", () => {
+    const keyframeSchema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "intrinsic-media" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                intensity: {
+                  defaultValue: 0.5,
+                  label: "Intensity",
+                  max: 1,
+                  min: 0,
+                  target: "render.intensity",
+                  type: "slider",
+                },
+              },
+              title: "Render",
+            },
+          ],
+          title: "Render Controls",
+        },
+        timeline: { mode: "keyframes" },
+      },
+    });
+
+    expect(
+      validateToolcraftPerformanceCoverage(keyframeSchema, {
+        rendererStrategy: "webgl",
+        rendererWorkload: "simple-composition",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: preview render stays under budget",
+            browser: true,
+            browserTestName: "browser perf: preview render stays under budget",
+            budget: { maxPreviewMs: 1000 },
+            expectedObservable: "Preview renders without freezing.",
+            fixture: "1440x1080 shader fixture",
+            id: "preview-render",
+            interaction: "preview-render",
+            workload: false,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: intensity drag stays responsive",
+            browser: true,
+            browserTestName: "browser perf: intensity drag stays responsive",
+            budget: { maxFrameGapMs: 80, maxInteractionMs: 500 },
+            controlLabel: "Intensity",
+            expectedObservable: "Dragging Intensity remains responsive.",
+            fixture: "1440x1080 shader fixture",
+            id: "intensity-drag",
+            interaction: "control-drag",
+            target: "render.intensity",
+            values: { default: 0.5, max: 1, min: 0 },
+            workload: true,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: viewport stays stable",
+            browser: true,
+            browserTestName: "browser perf: viewport stays stable",
+            budget: { maxFrameGapMs: 80 },
+            expectedObservable: "Changing controls does not move the canvas viewport.",
+            fixture: "1440x1080 shader fixture",
+            id: "viewport-stability",
+            interaction: "viewport-stability",
+            target: "render.intensity",
+            workload: false,
+          },
+        ],
+        usesCustomRenderer: true,
+        workloadTargets: ["render.intensity"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'Keyframe custom renderers must include a viewport-stability performance scenario with target "timeline.keyframes" that exercises zoom/radar, expanded keyframes, keyframe creation, and playback or scrubbing.',
+      ]),
+    );
+  });
+
+  it("requires layer custom renderers to cover viewport stability during layer interactions", () => {
+    const layerSchema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        upload: true,
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                opacity: {
+                  defaultValue: 1,
+                  label: "Opacity",
+                  max: 1,
+                  min: 0,
+                  target: "selectedLayer.opacity",
+                  type: "slider",
+                },
+              },
+              title: "Layer",
+            },
+          ],
+          title: "Layer Controls",
+        },
+        layers: true,
+      },
+    });
+
+    expect(
+      validateToolcraftPerformanceCoverage(layerSchema, {
+        rendererStrategy: "webgl",
+        rendererWorkload: "simple-composition",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: preview render stays under budget",
+            browser: true,
+            browserTestName: "browser perf: preview render stays under budget",
+            budget: { maxPreviewMs: 1000 },
+            expectedObservable: "Preview renders without freezing.",
+            fixture: "two-layer image fixture",
+            id: "preview-render",
+            interaction: "preview-render",
+            workload: false,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: opacity drag stays responsive",
+            browser: true,
+            browserTestName: "browser perf: opacity drag stays responsive",
+            budget: { maxFrameGapMs: 80, maxInteractionMs: 500 },
+            controlLabel: "Opacity",
+            expectedObservable: "Dragging selected layer opacity remains responsive.",
+            fixture: "two-layer image fixture",
+            id: "opacity-drag",
+            interaction: "control-drag",
+            target: "selectedLayer.opacity",
+            values: { default: 1, max: 1, min: 0 },
+            workload: true,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: viewport stays stable",
+            browser: true,
+            browserTestName: "browser perf: viewport stays stable",
+            budget: { maxFrameGapMs: 80 },
+            expectedObservable: "Changing controls does not move the canvas viewport.",
+            fixture: "two-layer image fixture",
+            id: "viewport-stability",
+            interaction: "viewport-stability",
+            target: "selectedLayer.opacity",
+            workload: false,
+          },
+        ],
+        usesCustomRenderer: true,
+        workloadTargets: ["selectedLayer.opacity"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        'Layer-enabled custom renderers must include a viewport-stability performance scenario with target "layers.interactions" that exercises zoom/radar, layer selection, visibility, reorder or grouping, and selected-layer output stability.',
+      ]),
+    );
+  });
+
+  it("requires every visible non-action control to have performance coverage", () => {
+    const rendererSchema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 1080, unit: "px", width: 1440 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                depth: {
+                  defaultValue: 50,
+                  label: "Depth",
+                  max: 100,
+                  min: 0,
+                  target: "shader.depth",
+                  type: "slider",
+                },
+                gradient: {
+                  defaultValue: "aurora",
+                  label: "Gradient",
+                  options: [
+                    { label: "Aurora", value: "aurora" },
+                    { label: "Prism", value: "prism" },
+                  ],
+                  target: "shader.gradient",
+                  type: "select",
+                },
+                mode: {
+                  defaultValue: "soft",
+                  label: "Mode",
+                  options: [
+                    { label: "Soft", value: "soft" },
+                    { label: "Sharp", value: "sharp" },
+                  ],
+                  target: "shader.mode",
+                  type: "segmented",
+                },
+              },
+              title: "Shader",
+            },
+          ],
+          title: "Shader Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftPerformanceCoverage(rendererSchema, {
+        rendererStrategy: "canvas-2d",
+        rendererWorkload: "simple-composition",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: preview render stays under budget",
+            browser: true,
+            browserTestName: "browser perf: preview render stays under budget",
+            budget: { maxPreviewMs: 1000 },
+            expectedObservable: "Preview renders without freezing.",
+            fixture: "1440x1080 shader fixture",
+            id: "preview-render",
+            interaction: "preview-render",
+            workload: false,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: depth drag stays responsive",
+            browser: true,
+            browserTestName: "browser perf: depth drag stays responsive",
+            budget: { maxFrameGapMs: 50, maxInteractionMs: 250 },
+            controlLabel: "Depth",
+            expectedObservable: "Dragging Depth remains responsive.",
+            fixture: "1440x1080 shader fixture",
+            id: "depth-drag",
+            interaction: "control-drag",
+            target: "shader.depth",
+            values: { default: 50, max: 100, min: 0 },
+            workload: true,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: viewport stays stable",
+            browser: true,
+            browserTestName: "browser perf: viewport stays stable",
+            budget: { maxFrameGapMs: 50 },
+            expectedObservable: "Canvas zoom and offset do not jump.",
+            fixture: "1440x1080 shader fixture",
+            id: "viewport-stability",
+            interaction: "viewport-stability",
+            workload: false,
+          },
+        ],
+        usesCustomRenderer: true,
+        workloadTargets: ["shader.depth"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        "canvas.size.width must have a performance scenario because every visible control can affect app responsiveness.",
+        "canvas.size.height must have a performance scenario because every visible control can affect app responsiveness.",
+        "shader.gradient must have a performance scenario because every visible control can affect app responsiveness.",
+        "shader.mode must have a performance scenario because every visible control can affect app responsiveness.",
+      ]),
+    );
+  });
+
+  it("requires visible control performance coverage even without a custom renderer", () => {
+    const controlsSchema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "intrinsic-media" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                mode: {
+                  defaultValue: "soft",
+                  label: "Mode",
+                  options: [
+                    { label: "Soft", value: "soft" },
+                    { label: "Sharp", value: "sharp" },
+                  ],
+                  target: "app.mode",
+                  type: "select",
+                },
+              },
+              title: "Display",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftPerformanceCoverage(controlsSchema, {
+        rendererStrategy: "none",
+        rendererWorkload: "none",
+        scenarios: [],
+        usesCustomRenderer: false,
+        workloadTargets: [],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        "app.mode must have a performance scenario because every visible control can affect app responsiveness.",
+      ]),
+    );
+  });
+
+  it("requires budgets that match each performance interaction type", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "none",
+        rendererWorkload: "none",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: char size drag stays responsive",
+            browser: true,
+            browserTestName: "browser perf: char size drag stays responsive",
+            budget: { maxExportMs: 100 },
+            expectedObservable: "Dragging Char Size remains responsive.",
+            fixture: "1600x1000 transparent glyph fixture",
+            id: "char-size-drag",
+            interaction: "control-drag",
+            target: "generation.prompt",
+            values: { default: 12, max: 32, min: 4 },
+            workload: true,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: export png stays under budget",
+            browser: true,
+            browserTestName: "browser perf: export png stays under budget",
+            budget: { maxFrameGapMs: 50 },
+            expectedObservable: "Export completes without blocking the UI.",
+            fixture: "1920x1080 output fixture",
+            id: "export-png",
+            interaction: "export-copy",
+            workload: false,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: preview render stays under budget",
+            browser: true,
+            browserTestName: "browser perf: preview render stays under budget",
+            budget: { maxFrameGapMs: 50 },
+            expectedObservable: "Preview renders without freezing.",
+            fixture: "1920x1080 output fixture",
+            id: "preview-render",
+            interaction: "preview-render",
+            workload: false,
+          },
+          {
+            automated: true,
+            automatedTestName: "perf: animation frame loop stays smooth",
+            browser: true,
+            browserTestName: "browser perf: animation frame loop stays smooth",
+            budget: { maxFrameGapMs: 50 },
+            expectedObservable: "Animation advances without frame stalls.",
+            fixture: "animated output fixture",
+            id: "animation-frame-loop",
+            interaction: "animation-frame",
+            workload: false,
+          },
+        ],
+        usesCustomRenderer: false,
+        workloadTargets: ["generation.prompt"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        "char-size-drag control-drag scenario must declare maxInteractionMs and maxFrameGapMs.",
+        "export-png export-copy scenario must declare maxExportMs.",
+        "preview-render preview-render scenario must declare maxPreviewMs or maxRenderMs.",
+        "animation-frame-loop animation-frame scenario must declare maxLongTaskMs.",
+      ]),
+    );
+  });
+
+  it("rejects performance budgets that are too loose to catch lag", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "none",
+        rendererWorkload: "none",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: char size drag stays responsive",
+            browser: true,
+            browserTestName: "browser perf: char size drag stays responsive",
+            budget: { maxFrameGapMs: 1000, maxInteractionMs: 10000 },
+            controlLabel: "Char Size",
+            expectedObservable: "Dragging Char Size remains responsive.",
+            fixture: "1600x1000 transparent glyph fixture",
+            id: "char-size-drag",
+            interaction: "control-drag",
+            target: "generation.prompt",
+            values: { default: 12, max: 32, min: 4 },
+            workload: true,
+          },
+        ],
+        usesCustomRenderer: false,
+        workloadTargets: ["generation.prompt"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        "char-size-drag maxFrameGapMs budget must be <= 120ms, received 1000ms.",
+        "char-size-drag maxInteractionMs budget must be <= 2000ms, received 10000ms.",
+      ]),
+    );
+  });
+
+  it("requires real browser interaction metadata for control performance scenarios", () => {
+    expect(
+      validateToolcraftPerformanceCoverage(starterSchema, {
+        rendererStrategy: "none",
+        rendererWorkload: "none",
+        scenarios: [
+          {
+            automated: true,
+            automatedTestName: "perf: char size drag stays responsive",
+            browser: true,
+            browserTestName: "browser perf: char size drag stays responsive",
+            budget: { maxFrameGapMs: 50, maxInteractionMs: 250 },
+            expectedObservable: "Dragging Char Size remains responsive.",
+            fixture: "1600x1000 transparent glyph fixture",
+            id: "char-size-drag",
+            interaction: "control-drag",
+            target: "generation.prompt",
+            values: { default: 12, max: 32, min: 4 },
+            workload: true,
+          },
+        ],
+        usesCustomRenderer: false,
+        workloadTargets: ["generation.prompt"],
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        "char-size-drag control-drag scenario must declare controlLabel or uiSelector for its real browser interaction.",
+      ]),
+    );
+  });
+});