@ggui-ai/ui-gen 0.10.0 → 0.12.0

package/src/harness/check/runtime-render/render-check.ts

@@ -21,7 +21,12 @@ import type {
   PropsSpec,
 } from "@ggui-ai/protocol";
 import { HOOK_NAME_RE, listContractGadgets } from "@ggui-ai/protocol";
-import { createProbe, createProbeWireConfig, type Probe } from "./probe.js";
+import {
+  createProbe,
+  createProbeWireConfig,
+  type ActionFiredEvent,
+  type Probe,
+} from "./probe.js";
 import { loadComponent } from "./load-component.js";
 import { findWiring, type WiringDetection } from "./find-wiring.js";
 import { installProductionActShim } from "./production-act-shim.js";
@@ -70,7 +75,9 @@ export interface RenderCheckIssue {
   readonly check:
     | "render-no-throw"
     | "action-wiring"
+    | "selection-identity"
     | "prop-coverage"
+    | "prop-sensitivity"
     | "stream-rerender"
     | "optional-props-omitted";
   readonly outcome: CheckOutcome;
@@ -114,8 +121,48 @@ export interface RunRenderCheckInput {
 // Public entry
 // ─────────────────────────────────────────────────────────────────────────────
 
+/**
+ * Run the in-loop runtime render check.
+ *
+ * Isolation dispatcher (#592): when the CALLING environment already
+ * owns a DOM (`window` + `document` on `globalThis` — e.g. a vitest
+ * `happy-dom` environment, where the environment owner installed the
+ * globals deliberately), the check runs in-process exactly as before.
+ * In a plain Node process it runs in an ISOLATED SUBPROCESS
+ * (`render-check-host.ts` → `render-check-worker.ts`), because the
+ * in-process path installs happy-dom globals on `globalThis`
+ * process-wide — a TOCTOU hazard for anything that sniffs `window`
+ * concurrently (provider SDKs throw "browser-like environment" at
+ * client construction; two overlapping checks corrupt each other's
+ * teardown). See #592 for the measured incident (4 bench cells hard-
+ * failed on the 2026-08-19 run).
+ *
+ * The host is loaded lazily so the worker bundle (which imports this
+ * module for `runRenderCheckInProcess`) never drags in the sandbox
+ * spawn machinery.
+ */
 export async function runRenderCheck(
   input: RunRenderCheckInput,
+): Promise<RenderCheckResult> {
+  const g = hostGlobals();
+  if ("window" in g && "document" in g) {
+    return runRenderCheckInProcess(input);
+  }
+  const { runRenderCheckViaWorker } = await import("./render-check-host.js");
+  return runRenderCheckViaWorker(input);
+}
+
+/**
+ * The actual check, executed IN THE CURRENT PROCESS — installs
+ * happy-dom globals on `globalThis` for the duration when the
+ * environment doesn't already provide a DOM. Call sites outside this
+ * module should use {@link runRenderCheck}; this export exists for the
+ * isolation worker (which IS the private process the globals may own)
+ * and for DOM-owning test environments that want to bypass the
+ * dispatcher explicitly.
+ */
+export async function runRenderCheckInProcess(
+  input: RunRenderCheckInput,
 ): Promise<RenderCheckResult> {
   const t0 = Date.now();
   const issues: RenderCheckIssue[] = [];
@@ -479,6 +526,35 @@ export async function runRenderCheck(
         }
       }
 
+      // ── Check 2b: Selection identity — duplicate-label cells (#601) ───
+      // The live bug: a slot grid rendered several cells with the same
+      // visible label ("09:00" across stylist rows); clicking one
+      // selected ALL of them because the generated code keyed
+      // selection/payload on the DISPLAY VALUE instead of the cell's
+      // identity — even though the action schema carried an id field.
+      // Wire-behavior check, DOM-shape independent: click two
+      // same-label clickables and require their fired payloads to
+      // differ on the id-like field. Conservative: any ambiguity
+      // (no duplicate labels, clicks that fire nothing, payloads
+      // missing the field) yields NO issue — those belong to other
+      // checks.
+      if (input.contract?.actionSpec) {
+        for (const [name, entry] of Object.entries(input.contract.actionSpec)) {
+          const idField = idLikeRequiredStringField(
+            entry.schema as Record<string, unknown> | undefined,
+          );
+          if (idField === null) continue;
+          const issue = await checkSelectionIdentity({
+            container,
+            probe,
+            user,
+            actionName: name,
+            idField,
+          });
+          if (issue) issues.push(issue);
+        }
+      }
+
       // ── Check 3: Agent-tool wiring — RETIRED ──────────────────────────
       // `useWiredTool` is retired. The contract's `agentCapabilities.tools`
       // is a catalog of tools the AGENT invokes — there is no component hook
@@ -505,6 +581,72 @@ export async function runRenderCheck(
         }
       }
 
+      // ── Check 5c: Prop sensitivity (#563) ─────────────────────────────
+      // The measured class (economy/001 run 6): generated code renders a
+      // value the contract delivers via props but BAKES the request's
+      // literal — `props.month ?? 'January'` date math, hardcoded display
+      // text — so a cached blueprint reused under a different value serves
+      // the wrong surface. Deterministic detection for the DISPLAYED-value
+      // half: re-render with a distinct value for each required scalar
+      // prop whose original value visibly appears in the DOM; if the
+      // rendered text is IDENTICAL under the change, the prop's value is
+      // dead — baked. Scope honesty: value-ANCHORED logic that still
+      // reacts (differently-wrong branches) is not deterministically
+      // decidable here; the matcher-side pair armor and the judge track
+      // that half. Conservative nulls: non-displayed props (ids are
+      // legitimately non-visual), varied-value crashes (the code READ the
+      // prop — not dead), and non-scalar props are all skipped.
+      if (input.contract?.propsSpec) {
+        const propsSpec5c = input.contract.propsSpec as PropsSpec;
+        const normalize = (s: string | null): string =>
+          (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;
+          // Distinct same-type value. A token that never substring-matches
+          // the original, so value-anchored branches (`includes(orig)`)
+          // genuinely flip.
+          const varied: string | number =
+            typeof orig === "string" ? "Zzyzx Qw" : (orig as number) + 137731;
+          // Isolated probe/wire per varied mount — events must not leak
+          // into the primary probe's fire log.
+          const variedProbe = createProbe();
+          const variedConfig = createProbeWireConfig(variedProbe);
+          let variedResult: ReturnType<typeof render> | undefined;
+          try {
+            variedResult = render(
+              React.createElement(GguiWireProvider, {
+                config: variedConfig,
+                children: React.createElement(ProbeErrorBoundary, {
+                  children: React.createElement(Component, {
+                    ...input.mockupProps,
+                    [propName]: varied,
+                  }),
+                }),
+              }),
+            );
+          } catch {
+            continue; // crash on varied value ⇒ the prop is read, not dead
+          }
+          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 — 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.`,
+            });
+          }
+        }
+      }
+
       // ── Check 6: Stream re-render (WARN) ──────────────────────────────
       if (input.contract?.streamSpec) {
         const streamSpec = input.contract.streamSpec;
@@ -1041,6 +1183,127 @@ async function checkActionWiring(input: CheckActionInput): Promise<RenderCheckIs
 // `streamSpec[*].source.tool` ride through the action / stream check
 // arms in `runRenderCheck` instead.
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Selection identity (#601) — duplicate-label cells must carry their own id
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Find the id-like required string property in an action's payload
+ * schema, or null. "id-like" = a required property whose name ends in
+ * `id`/`Id`/`ID` and whose declared type is string — the shape the
+ * matcher's booking/selection contracts carry (`bookSlot { slotId }`).
+ */
+function idLikeRequiredStringField(
+  schema: Record<string, unknown> | undefined,
+): string | null {
+  if (schema === undefined) 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 as Record<string, unknown>,
+  )) {
+    if (!/id$/i.test(propName)) continue;
+    if (!required.includes(propName)) continue;
+    const t =
+      propSchema !== null && typeof propSchema === 'object'
+        ? (propSchema as Record<string, unknown>)['type']
+        : undefined;
+    if (t === 'string') return propName;
+  }
+  return null;
+}
+
+interface CheckSelectionIdentityInput {
+  container: MinimalElement;
+  probe: Probe;
+  user: { click: (el: MinimalElement) => Promise<void> };
+  actionName: string;
+  idField: string;
+}
+
+/**
+ * Click two clickables that share a visible label and require the two
+ * fired payloads to DIFFER on the id-like field. Identical values mean
+ * the component keys the action on the display value, not the element's
+ * identity — the ggui#601 class (every "09:00" cell selecting together).
+ *
+ * Emits at most one `failed` issue; every ambiguous situation returns
+ * null (covered by other checks or genuinely unjudgeable here).
+ */
+async function checkSelectionIdentity(
+  input: CheckSelectionIdentityInput,
+): Promise<RenderCheckIssue | null> {
+  const { container, probe, user, actionName, idField } = input;
+
+  const clickables = Array.from(
+    container.querySelectorAll<MinimalElement>('button, [role="button"]'),
+  );
+  const byLabel = new Map<string, MinimalElement[]>();
+  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: MinimalElement,
+    ): Promise<unknown | undefined> => {
+      const before = probe.getFireLog().length;
+      try {
+        await user.click(el);
+      } catch {
+        return undefined;
+      }
+      await flushPromises();
+      const events = probe
+        .getFireLog()
+        .slice(before)
+        .filter(
+          (e): e is ActionFiredEvent =>
+            e.kind === 'action.fired' && e.name === actionName,
+        );
+      return events.length > 0 ? events[events.length - 1]!.payload : undefined;
+    };
+
+    const first = await payloadFor(group[0]!);
+    const second = await payloadFor(group[1]!);
+    // Either click firing nothing for this action = not this check's
+    // question (wiring check owns "does it fire").
+    if (first === undefined || second === undefined) continue;
+
+    const idOf = (payload: unknown): string | undefined => {
+      if (payload === null || typeof payload !== 'object') return undefined;
+      const v = (payload as Record<string, unknown>)[idField];
+      return typeof v === 'string' ? v : undefined;
+    };
+    const firstId = idOf(first);
+    const secondId = idOf(second);
+    // Payloads missing the required field = schema territory, not ours.
+    if (firstId === undefined || secondId === undefined) 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}') — 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]!),
+      };
+    }
+    // Distinct ids on the first duplicate group — identity keying holds.
+    return null;
+  }
+  return null;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Trigger simulators — narrow set, deterministic only
 // ─────────────────────────────────────────────────────────────────────────────