@ggui-ai/ui-gen 0.10.0 → 0.12.0

package/dist/adapters/generation-dispatch.js

@@ -3,11 +3,13 @@ import 'zod';
 import { classifyUi, MODEL_REGISTRY, DANGEROUS_PATTERNS as DANGEROUS_PATTERNS$1, listContractGadgets, HOOK_NAME_RE, STDLIB_GADGETS_PACKAGE, resolveAppGadgets } from '@ggui-ai/protocol';
 import * as esbuild from 'esbuild';
 import { build } from 'esbuild';
-import fs, { mkdirSync, writeFileSync, unlinkSync, readFileSync, existsSync, rm, createReadStream, createWriteStream } from 'fs';
+import fs, { mkdirSync, writeFileSync, unlinkSync, existsSync, readFileSync, rm, createReadStream, createWriteStream } from 'fs';
 import { contentHash } from '@ggui-ai/protocol/content-hash';
+import { createRequire } from 'module';
+import { fileURLToPath, pathToFileURL } from 'url';
+import { runSandboxed } from '@ggui-ai/sandbox';
 import ts2 from 'typescript';
 import path, { dirname, resolve, join, basename } from 'path';
-import { createRequire } from 'module';
 import { Linter } from 'eslint';
 import { createHash } from 'crypto';
 import 'fs/promises';
@@ -15,8 +17,6 @@ import { tmpdir } from 'os';
 import { Readable } from 'stream';
 import { pipeline } from 'stream/promises';
 import { createBrotliDecompress, createUnzip } from 'zlib';
-import { fileURLToPath } from 'url';
-import '@ggui-ai/sandbox';
 import git from 'isomorphic-git';
 import { Volume, createFsFromVolume } from 'memfs';
 import { createPatch, applyPatch } from 'diff';
@@ -2555,6 +2555,140 @@ var init_validation = __esm({
     init_ui_compiler();
   }
 });
+
+// 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";
+  }
+});
 function extractWireCallSites(code) {
   const sf = ts2.createSourceFile(
     "component.tsx",
@@ -3586,17 +3720,33 @@ ${errorDetail}`,
       }
     }
     const hexMatch = line.match(/#[0-9a-fA-F]{3,8}\b/);
-    if (hexMatch && !line.includes("var(--ggui-") && !line.includes("// fallback") && !assetEscapedLines.has(lineNum)) {
-      issues.push({
-        tier: 0,
-        result: "fail",
-        category: "tokens",
-        subcategory: "hex-color",
-        severity: "critical",
-        description: `Hardcoded color "${hexMatch[0]}" breaks theme switching \u2014 use design tokens.`,
-        fix: `Replace with a primitive variant (Button variant="primary"|Badge variant="success"|...) OR a token reference like var(--ggui-color-primary-500, ${hexMatch[0]}). Hardcoded colors mean the operator's theme has no effect on this surface.`,
-        line: lineNum
-      });
+    if (hexMatch && !assetEscapedLines.has(lineNum)) {
+      const fallbackVarMatch = line.match(
+        /var\((--ggui-[a-zA-Z0-9-]+)\s*,[^)]*#[0-9a-fA-F]{3,8}/
+      );
+      if (fallbackVarMatch) {
+        issues.push({
+          tier: 0,
+          result: "fail",
+          category: "tokens",
+          subcategory: "token-fallback",
+          severity: "critical",
+          description: `Literal fallback "${hexMatch[0]}" inside a token reference \u2014 the runtime injects every token, and the fallback paints the wrong brand exactly when the theme matters most.`,
+          fix: `Drop the fallback: write var(${fallbackVarMatch[1]}) bare. If the token might not exist, that is a vocabulary problem to fix by choosing a token from the design-system docs, never by a literal.`,
+          line: lineNum
+        });
+      } else if (!line.includes("// fallback")) {
+        issues.push({
+          tier: 0,
+          result: "fail",
+          category: "tokens",
+          subcategory: "hex-color",
+          severity: "critical",
+          description: `Hardcoded color "${hexMatch[0]}" breaks theme switching \u2014 use design tokens.`,
+          fix: `Replace with a primitive variant (Button variant="primary"|Badge variant="success"|...) OR a bare token reference like var(--ggui-color-primary-500) \u2014 never a literal fallback. Hardcoded colors mean the operator's theme has no effect on this surface.`,
+          line: lineNum
+        });
+      }
     }
     const colorFnMatch = line.match(/\b(rgba?|hsla?)\s*\(/);
     if (colorFnMatch && !line.includes("var(--ggui-") && !line.includes("// fallback") && !line.includes("$value") && !assetEscapedLines.has(lineNum)) {
@@ -11061,15 +11211,15 @@ EVERY color, spacing, typography, shadow, and radius value MUST come from design
 
 MANDATORY:
 1. NEVER use hardcoded hex colors like \`#7c3aed\` \u2014 ONLY \`var(--ggui-color-*)\` tokens.
-2. NEVER use CSS gradients with custom colors. If you need a gradient: \`linear-gradient(to bottom, var(--ggui-color-primary-500, #0ea5e9), var(--ggui-color-primary-700, #0369a1))\`.
+2. NEVER use CSS gradients with custom colors. If you need a gradient: \`linear-gradient(to bottom, var(--ggui-color-primary-500), var(--ggui-color-primary-700))\`.
 3. NEVER invent your own palette. The system provides primary, neutral, success, warning, error, and info \u2014 use ONLY these.
-4. ALWAYS include fallback values: \`var(--ggui-color-primary-600, #0284c7)\`.
+4. NEVER include literal fallback values in color tokens \u2014 write \`var(--ggui-color-primary-600)\` bare, never \`var(--ggui-color-primary-600, #0284c7)\`. The runtime injects every token; a literal fallback paints the wrong brand exactly when the operator's theme matters most.
 
 Token categories:
-- Brand: \`var(--ggui-color-primary-600, #0284c7)\`, \`var(--ggui-color-primary-50, #f0f9ff)\`
-- Text: \`var(--ggui-color-onSurface, #18181b)\`, \`var(--ggui-color-onSurfaceVariant, #52525b)\`
-- Backgrounds: \`var(--ggui-color-surface, #fafafa)\`, \`var(--ggui-color-surfaceVariant, #f4f4f5)\`
-- Borders: \`var(--ggui-color-outline, #d4d4d8)\`
+- Brand: \`var(--ggui-color-primary-600)\`, \`var(--ggui-color-primary-50)\`
+- Text: \`var(--ggui-color-onSurface)\`, \`var(--ggui-color-onSurfaceVariant)\`
+- Backgrounds: \`var(--ggui-color-surface)\`, \`var(--ggui-color-surfaceVariant)\`
+- Borders: \`var(--ggui-color-outline)\`
 - Spacing: \`var(--ggui-spacing-4, 16px)\`, \`var(--ggui-spacing-6, 24px)\`
 - Typography: \`var(--ggui-font-size-sm, 14px)\`, \`var(--ggui-font-weight-semibold, 600)\`
 - Shadows: \`var(--ggui-shape-shadow-sm)\`, \`var(--ggui-shape-shadow-md)\`, \`var(--ggui-shape-shadow-lg)\`
@@ -11254,7 +11404,7 @@ Hero sections should feel airy. Use \`padding="xl"\` (32px) on the main card, no
 
 - [ ] Imports ONLY from: react, @ggui-ai/design, @ggui-ai/wire
 - [ ] No raw HTML elements (\`<button>\`, \`<input>\`, \`<div>\` for layout) \u2014 uses primitives
-- [ ] ZERO hardcoded hex colors \u2014 every color is \`var(--ggui-color-*, fallback)\`
+- [ ] ZERO hardcoded hex colors \u2014 every color is a bare \`var(--ggui-color-*)\`, no literal fallback
 - [ ] No raw pixel values for spacing \u2014 all via \`var(--ggui-spacing-*)\` tokens
 - [ ] Primary palette used throughout (headers, borders, icons) \u2014 not just buttons
 - [ ] Typed Props interface exported; request-specific data is a prop with default
@@ -13546,8 +13696,8 @@ ${cjsResult.code}
 // src/harness/check/runtime-render/load-component.ts
 async function loadComponent(input) {
   const { sourceCode, moduleResolutions = {} } = input;
-  const { createRequire: createRequire4 } = await import('module');
-  const require_ = createRequire4(import.meta.url);
+  const { createRequire: createRequire5 } = await import('module');
+  const require_ = createRequire5(import.meta.url);
   const sandboxRequire = (id) => {
     if (id in moduleResolutions) return moduleResolutions[id];
     if (id === "react/jsx-runtime" || id === "react/jsx-dev-runtime") {
@@ -13906,6 +14056,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();
@@ -14095,6 +14253,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,
@@ -14104,6 +14278,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)) {
@@ -14435,6 +14651,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);
@@ -14933,6 +15217,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,