@ggui-ai/ui-gen 0.10.0 → 0.12.0

package/dist/blueprint-validator.js

@@ -1,8 +1,158 @@
+import { existsSync } from 'fs';
 import { createRequire } from 'module';
+import { fileURLToPath, pathToFileURL } from 'url';
+import { runSandboxed } from '@ggui-ai/sandbox';
 import { listContractGadgets, HOOK_NAME_RE } from '@ggui-ai/protocol';
 import ts from 'typescript';
 
-// src/harness/check/runtime-render/production-act-shim.ts
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/harness/check/runtime-render/render-check-host.ts
+var render_check_host_exports = {};
+__export(render_check_host_exports, {
+  mapSandboxResultToCheckResult: () => mapSandboxResultToCheckResult,
+  runRenderCheckViaWorker: () => runRenderCheckViaWorker
+});
+function resolveWorkerSpawn() {
+  const jsCandidates = [
+    // Sibling — when import.meta.url is already .../harness/check/runtime-render/.
+    new URL(`./${WORKER_BASENAME}.js`, import.meta.url),
+    // From dist/index.js.
+    new URL(`./harness/check/runtime-render/${WORKER_BASENAME}.js`, import.meta.url),
+    // From dist/harness/index.js.
+    new URL(`./check/runtime-render/${WORKER_BASENAME}.js`, import.meta.url),
+    // From dist/check/index.js, dist/advanced/index.js, dist/<flat>.js.
+    new URL(`../harness/check/runtime-render/${WORKER_BASENAME}.js`, import.meta.url)
+  ];
+  for (const jsUrl of jsCandidates) {
+    const jsPath = fileURLToPath(jsUrl);
+    if (existsSync(jsPath)) {
+      return { command: process.execPath, args: [jsPath] };
+    }
+  }
+  const tsCandidates = [
+    new URL(`./${WORKER_BASENAME}.ts`, import.meta.url),
+    new URL(`../harness/check/runtime-render/${WORKER_BASENAME}.ts`, import.meta.url)
+  ];
+  for (const tsUrl of tsCandidates) {
+    const tsPath = fileURLToPath(tsUrl);
+    if (existsSync(tsPath)) {
+      const require_ = createRequire(import.meta.url);
+      const tsxLoader = pathToFileURL(require_.resolve("tsx")).href;
+      return { command: process.execPath, args: ["--import", tsxLoader, tsPath] };
+    }
+  }
+  const tried = [...jsCandidates, ...tsCandidates].map((u) => fileURLToPath(u)).join(", ");
+  throw new Error(
+    `render-check: isolated worker not found at any of: ${tried}. Did \`pnpm build\` run?`
+  );
+}
+function failed(reason, t0) {
+  return {
+    ok: false,
+    issues: [{ check: "render-no-throw", outcome: "failed", reason }],
+    stats: { actionsChecked: 0, streamsChecked: 0, renderMs: Date.now() - t0 }
+  };
+}
+function unverified(reason, t0) {
+  return {
+    ok: false,
+    issues: [{ check: "render-no-throw", outcome: "unverified", reason }],
+    stats: { actionsChecked: 0, streamsChecked: 0, renderMs: Date.now() - t0 }
+  };
+}
+function mapSandboxResultToCheckResult(result, t0) {
+  if (result.outcome === "timeout") {
+    return failed(
+      `render check timed out after ${CHECK_TIMEOUT_MS}ms in the isolated worker (likely infinite loop or runaway effect in the component).`,
+      t0
+    );
+  }
+  if (result.outcome === "overflow-stdout" || result.outcome === "overflow-stderr") {
+    return failed(
+      `render check worker produced excessive output (${result.outcome}) \u2014 the component is likely in a pathological logging or error loop.`,
+      t0
+    );
+  }
+  if (result.outcome === "spawn-error") {
+    return unverified(
+      `render check worker failed to start \u2014 ${result.errorMessage}`,
+      t0
+    );
+  }
+  if (result.outcome === "canceled") {
+    return unverified("render check worker was canceled before completing.", t0);
+  }
+  if (result.outcome !== "exit") {
+    return unverified(
+      `render check worker ended with unexpected sandbox outcome '${result.outcome}'.`,
+      t0
+    );
+  }
+  if (result.exitCode !== 0) {
+    const tail = result.stderr.trim() || result.stdout.trim();
+    return unverified(
+      `render check worker exited ${result.exitCode}${tail ? ` \u2014 ${tail.slice(0, 600)}` : ""}`,
+      t0
+    );
+  }
+  const stdout = result.stdout.trim();
+  if (stdout.length === 0) {
+    return unverified("render check worker exited without producing a verdict.", t0);
+  }
+  try {
+    return JSON.parse(stdout);
+  } catch (err) {
+    return unverified(
+      `render check worker verdict was not valid JSON \u2014 ${err instanceof Error ? err.message : String(err)}`,
+      t0
+    );
+  }
+}
+async function runRenderCheckViaWorker(input) {
+  const t0 = Date.now();
+  let spawn;
+  try {
+    spawn = resolveWorkerSpawn();
+  } catch (err) {
+    return unverified(err instanceof Error ? err.message : String(err), t0);
+  }
+  const result = await runSandboxed({
+    command: spawn.command,
+    args: spawn.args,
+    timeoutMs: CHECK_TIMEOUT_MS,
+    maxStdoutBytes: CHECK_STDOUT_CAP,
+    nodeHeapMb: CHECK_NODE_HEAP_MB,
+    stdin: JSON.stringify(input),
+    // NODE_ENV steers React's production vs development build — keep
+    // parity with the caller; everything else stays on the sandbox's
+    // default allowlist.
+    env: { NODE_ENV: process.env.NODE_ENV ?? "production" }
+  });
+  return mapSandboxResultToCheckResult(result, t0);
+}
+var CHECK_TIMEOUT_MS, CHECK_STDOUT_CAP, CHECK_NODE_HEAP_MB, WORKER_BASENAME;
+var init_render_check_host = __esm({
+  "src/harness/check/runtime-render/render-check-host.ts"() {
+    CHECK_TIMEOUT_MS = 3e4;
+    CHECK_STDOUT_CAP = 2 * 1024 * 1024;
+    CHECK_NODE_HEAP_MB = 512;
+    WORKER_BASENAME = "render-check-worker";
+  }
+});
 var installed = false;
 function installProductionActShim() {
   if (installed) return;
@@ -205,8 +355,8 @@ ${cjsResult.code}
 // src/harness/check/runtime-render/load-component.ts
 async function loadComponent(input) {
   const { sourceCode, moduleResolutions = {} } = input;
-  const { createRequire: createRequire2 } = await import('module');
-  const require_ = createRequire2(import.meta.url);
+  const { createRequire: createRequire3 } = await import('module');
+  const require_ = createRequire3(import.meta.url);
   const sandboxRequire = (id) => {
     if (id in moduleResolutions) return moduleResolutions[id];
     if (id === "react/jsx-runtime" || id === "react/jsx-dev-runtime") {
@@ -524,6 +674,14 @@ function parentLink(node) {
 
 // src/harness/check/runtime-render/render-check.ts
 async function runRenderCheck(input) {
+  const g = hostGlobals();
+  if ("window" in g && "document" in g) {
+    return runRenderCheckInProcess(input);
+  }
+  const { runRenderCheckViaWorker: runRenderCheckViaWorker2 } = await Promise.resolve().then(() => (init_render_check_host(), render_check_host_exports));
+  return runRenderCheckViaWorker2(input);
+}
+async function runRenderCheckInProcess(input) {
   const t0 = Date.now();
   const issues = [];
   const teardown = await setupHappyDom();
@@ -713,6 +871,22 @@ async function runRenderCheck(input) {
           if (issue) issues.push(issue);
         }
       }
+      if (input.contract?.actionSpec) {
+        for (const [name, entry] of Object.entries(input.contract.actionSpec)) {
+          const idField = idLikeRequiredStringField(
+            entry.schema
+          );
+          if (idField === null) continue;
+          const issue = await checkSelectionIdentity({
+            container,
+            probe,
+            user,
+            actionName: name,
+            idField
+          });
+          if (issue) issues.push(issue);
+        }
+      }
       if (input.contract?.propsSpec) {
         for (const issue of checkPropCoverage({
           container,
@@ -722,6 +896,48 @@ async function runRenderCheck(input) {
           issues.push(issue);
         }
       }
+      if (input.contract?.propsSpec) {
+        const propsSpec5c = input.contract.propsSpec;
+        const normalize = (s) => (s ?? "").replace(/\s+/g, " ").trim();
+        const baseText = normalize(container.textContent);
+        for (const [propName, entry] of Object.entries(propsSpec5c.properties)) {
+          if (!entry.required) continue;
+          const orig = input.mockupProps[propName];
+          if (typeof orig !== "string" && typeof orig !== "number") continue;
+          const marker = pickScalarMarker(orig);
+          if (marker === null || !baseText.includes(marker)) continue;
+          const varied = typeof orig === "string" ? "Zzyzx Qw" : orig + 137731;
+          const variedProbe = createProbe();
+          const variedConfig = createProbeWireConfig(variedProbe);
+          let variedResult;
+          try {
+            variedResult = render(
+              React.createElement(GguiWireProvider, {
+                config: variedConfig,
+                children: React.createElement(ProbeErrorBoundary, {
+                  children: React.createElement(Component, {
+                    ...input.mockupProps,
+                    [propName]: varied
+                  })
+                })
+              })
+            );
+          } catch {
+            continue;
+          }
+          await flushPromises();
+          const variedText = normalize(variedResult.container.textContent);
+          variedResult.unmount();
+          if (variedText === baseText) {
+            issues.push({
+              check: "prop-sensitivity",
+              outcome: "failed",
+              subject: propName,
+              reason: `props.${propName} is displayed ('${marker}' appears in the DOM) but changing its value to '${String(varied)}' left the rendered output BYTE-IDENTICAL \u2014 the value is baked into the component instead of derived from the prop. A cached reuse of this blueprint under a different ${propName} would show the original value.`
+            });
+          }
+        }
+      }
       if (input.contract?.streamSpec) {
         const streamSpec = input.contract.streamSpec;
         for (const [name] of Object.entries(streamSpec)) {
@@ -1053,6 +1269,74 @@ async function checkActionWiring(input) {
     }
   };
 }
+function idLikeRequiredStringField(schema) {
+  if (schema === void 0) return null;
+  const properties = schema["properties"];
+  const required = schema["required"];
+  if (properties === null || typeof properties !== "object") return null;
+  if (!Array.isArray(required)) return null;
+  for (const [propName, propSchema] of Object.entries(
+    properties
+  )) {
+    if (!/id$/i.test(propName)) continue;
+    if (!required.includes(propName)) continue;
+    const t = propSchema !== null && typeof propSchema === "object" ? propSchema["type"] : void 0;
+    if (t === "string") return propName;
+  }
+  return null;
+}
+async function checkSelectionIdentity(input) {
+  const { container, probe, user, actionName, idField } = input;
+  const clickables = Array.from(
+    container.querySelectorAll('button, [role="button"]')
+  );
+  const byLabel = /* @__PURE__ */ new Map();
+  for (const el of clickables) {
+    const label = (el.textContent ?? "").replace(/\s+/g, " ").trim();
+    if (label.length === 0) continue;
+    const group = byLabel.get(label);
+    if (group) group.push(el);
+    else byLabel.set(label, [el]);
+  }
+  for (const [label, group] of byLabel) {
+    if (group.length < 2) continue;
+    const payloadFor = async (el) => {
+      const before = probe.getFireLog().length;
+      try {
+        await user.click(el);
+      } catch {
+        return void 0;
+      }
+      await flushPromises();
+      const events = probe.getFireLog().slice(before).filter(
+        (e) => e.kind === "action.fired" && e.name === actionName
+      );
+      return events.length > 0 ? events[events.length - 1].payload : void 0;
+    };
+    const first = await payloadFor(group[0]);
+    const second = await payloadFor(group[1]);
+    if (first === void 0 || second === void 0) continue;
+    const idOf = (payload) => {
+      if (payload === null || typeof payload !== "object") return void 0;
+      const v = payload[idField];
+      return typeof v === "string" ? v : void 0;
+    };
+    const firstId = idOf(first);
+    const secondId = idOf(second);
+    if (firstId === void 0 || secondId === void 0) continue;
+    if (firstId === secondId) {
+      return {
+        check: "selection-identity",
+        outcome: "failed",
+        subject: actionName,
+        reason: `Two clickable elements share the visible label '${label}', and clicking EACH fired '${actionName}' with the same ${idField} ('${firstId}') \u2014 the action payload is keyed on the display value, not the element's identity. Distinct cells must send their own ${idField} (the contract requires it), or selecting one "${label}" acts on every "${label}".`,
+        elementHint: describeElement(group[0])
+      };
+    }
+    return null;
+  }
+  return null;
+}
 async function simulateAndCheck(input) {
   const { container, user, probe, wiringKind, actionName, actionLabel, eventKind } = input;
   const candidates = findCandidateElements(container, wiringKind, actionName, actionLabel);
@@ -1536,6 +1820,26 @@ function toEvalIssue(issue) {
         fix
       };
     }
+    case "selection-identity":
+      return {
+        tier: 0,
+        result,
+        category: "contract",
+        subcategory,
+        severity: "critical",
+        description: `${issue.reason}${elementHint}${diagSuffix}`,
+        fix: `Key the action payload (and any selection state) on the item's ID from the data, never on its display text. Common fix: map over items and pass the item's id into the handler \u2014 onClick={() => ${subject}({ ...payload, id: item.id })} \u2014 and store selection as the id (setSelected(item.id)), not the label.`
+      };
+    case "prop-sensitivity":
+      return {
+        tier: 0,
+        result,
+        category: "contract",
+        subcategory,
+        severity: "critical",
+        description: `${issue.reason}${diagSuffix}`,
+        fix: `Derive the display AND any logic from props.${subject} \u2014 render {props.${subject}} and branch on the prop's value, never on the literal value the request happened to mention (e.g. props.${subject} ?? 'January' followed by January-special-cased logic bakes the request into the component). The contract delivers the value; trust it.`
+      };
     case "prop-coverage":
       return {
         tier: 0,