@ggui-ai/ui-gen 0.23.0 → 0.25.0

package/src/boilerplate/system-prompt.ts

@@ -469,7 +469,7 @@ The design-system primitives are accessible by construction — they emit their
 3. **Icons are decorative by default** — \`<Icon name="check" />\` is hidden from screen readers, which is correct for an icon sitting next to text. Add \`aria-label\` ONLY for a standalone, meaning-bearing icon with no adjacent text. Icon-only \`Button\`s still need \`aria-label\` on the **Button** itself.
 4. **Live & streaming data** — wrap any region whose content updates on its own (a \`useStream\` \`.latest\` value, a live clock, an "N new" counter, a flashing price) in an element with \`aria-live="polite"\` so screen readers announce the change.
 5. **Headings nest** — one \`<Heading level={1}>\` per screen, \`level={2}\` for sections, \`level={3}\` for subsections. Never skip or invert levels.
-6. **Buttons** — descriptive text content; icon-only buttons need \`aria-label\`. Announce busy state: \`<Button disabled={isLoading} aria-busy={isLoading}>{isLoading ? 'Submitting…' : 'Submit'}</Button>\`.
+6. **Buttons** — descriptive text content; icon-only buttons need \`aria-label\`. Announce busy state. EVERY control that dispatches an action — a Button, a Select whose change dispatches, an Input that sends on Enter — stays pending from that action's \`useActionPending\` until the agent's answer repaints the card: with \`const sendPending = useActionPending('send');\`, write \`<Button disabled={sendPending} aria-busy={sendPending} onClick={() => send({ text })}>{sendPending ? 'Sending…' : 'Send'}</Button>\`, and give a dispatching Select or Input the same \`disabled={sendPending} aria-busy={sendPending}\`. Only a control that dispatches the action carries its \`aria-busy\` and a working label. While it is pending, other controls of the SAME record may be \`disabled\` — nothing more; controls of other records, creation controls and the action's own cancel stay enabled. Busy state the card owns (a local \`isLoading\`) is announced the same way.
 7. **Stateful controls announce their state.** Toggleable / selectable / expandable things use the primitive that carries the semantics (\`Checkbox\`, \`Toggle\`, \`Tabs\`, \`Accordion\`) — never a styled \`Box\`/\`Icon\` that only *looks* checked. When you hand-roll one with \`as={Clickable}\`, \`Clickable\` adds button + keyboard semantics but NOT state — add it yourself: \`role="checkbox"\` + \`aria-checked={done}\` on a toggleable row, \`aria-pressed\` on a toggle button, \`aria-selected\` on the chosen item, \`aria-expanded\` on an open/close affordance. Styling (strikethrough, color, a check icon) must never be the only carrier of state.
 
 ## Design System Usage (CRITICAL)

package/src/check/index.ts

@@ -51,3 +51,4 @@ export {
 
 // runTier0 orchestrator
 export { runTier0, runTier0Checks } from "./run-tier0.js";
+export { generateSampleProps } from "./sample-props.js";

package/src/check/run-tier0.ts

@@ -295,6 +295,85 @@ function detectCertainDoubleWiredActions(
  * fallback ban it paints nothing.
  */
 const MANIFEST_TOKENS: ReadonlySet<string> = new Set(consumedTokenManifest);
+
+/**
+ * Role names retired by ggui#987 that generated code still invents, each
+ * with the manifest name that replaced it (ggui#1325). The self-check names
+ * the successor, so the model does not spend a turn guessing another name.
+ */
+const RETIRED_TOKEN_SUCCESSORS: ReadonlyMap<string, string> = new Map([
+  ['--ggui-color-surface', '--ggui-color-container'],
+  ['--ggui-color-onSurface', '--ggui-color-onContainer'],
+  ['--ggui-color-surfaceVariant', '--ggui-color-sunken'],
+  ['--ggui-color-onSurfaceVariant', '--ggui-color-onSunken'],
+]);
+
+/**
+ * The manifest names nearest an invented one (ggui#1325): a retired role's
+ * successor when there is one; otherwise the names sharing the invented
+ * name's longest family prefix at a segment boundary
+ * (`--ggui-motion-duration-normal` → fast, base, slow); otherwise the names
+ * sharing any of its segments of four letters or more
+ * (`--ggui-duration-slow` → the motion durations). Empty when nothing is
+ * near, so the hint falls back to the manifest's general shape.
+ */
+export function suggestManifestTokens(name: string): readonly string[] {
+  const successor = RETIRED_TOKEN_SUCCESSORS.get(name);
+  if (successor !== undefined) return [successor];
+  // Family prefixes at the name's own segment boundaries, longest first: for
+  // `--ggui-motion-duration-normal` that is `--ggui-motion-duration-`, then
+  // `--ggui-motion-`; an empty-suffix name such as `--ggui-color-` (the model
+  // stopped mid-name) is its own longest prefix, so it gets the colour family.
+  const segments = name.split('-').filter((segment) => segment.length > 0);
+  const own = name.endsWith('-') ? segments.length : segments.length - 1;
+  for (let n = own; n >= 2; n--) {
+    const prefix = `--${segments.slice(0, n).join('-')}-`;
+    const family = consumedTokenManifest.filter((token) => token.startsWith(prefix));
+    if (family.length > 0) return wordHitsFirst(name, rolesFirst(family));
+  }
+  const words = new Set(
+    segments
+      .slice(1)
+      .filter((segment) => segment.length >= 4)
+      .map((segment) => segment.toLowerCase()),
+  );
+  return rolesFirst(
+    consumedTokenManifest.filter((token) =>
+      token.split('-').some((segment) => words.has(segment.toLowerCase())),
+    ),
+  );
+}
+
+/**
+ * Names that carry the invented name's last word lead the list: `--ggui-color-inverse` names `inverseLink` and
+ * `inverseOutline` before the rest of the colour family, since those are what the model was reaching for. The word is
+ * the last segment when it has four letters or more; shorter or empty suffixes leave the order alone.
+ */
+function wordHitsFirst(name: string, family: readonly string[]): readonly string[] {
+  const word = name.slice(name.lastIndexOf('-') + 1).toLowerCase();
+  if (word.length < 4) return family;
+  const hit = (token: string): boolean => token.slice(token.lastIndexOf('-') + 1).toLowerCase().includes(word);
+  return [...family.filter(hit), ...family.filter((token) => !hit(token))];
+}
+
+/** Role names (a non-numeric last segment) before ramp steps, so the taught vocabulary leads a long family. */
+function rolesFirst(tokens: readonly string[]): readonly string[] {
+  const isRole = (token: string): boolean => !/^\d+$/.test(token.slice(token.lastIndexOf('-') + 1));
+  return [...tokens.filter(isRole), ...tokens.filter((token) => !isRole(token))];
+}
+
+/** The sentence that names the real token first (ggui#1325); empty when nothing in the manifest is near. */
+function offManifestHint(name: string): string {
+  const successor = RETIRED_TOKEN_SUCCESSORS.get(name);
+  if (successor !== undefined) {
+    return `"${name}" was retired (ggui#987); the current name is var(${successor}). `;
+  }
+  const near = suggestManifestTokens(name);
+  if (near.length === 0) return '';
+  const shown = near.slice(0, 8).map((token) => `var(${token})`).join(', ');
+  const more = near.length > 8 ? ` (and ${near.length - 8} more in that family)` : '';
+  return `Nearest names in the manifest: ${shown}${more}. `;
+}
 const TOKEN_REF_RE = /var\(\s*(--ggui-[a-zA-Z0-9-]+)/g;
 
 /** Map wire kind to the matching `@ggui-ai/wire` hook name. */
@@ -790,7 +869,7 @@ export async function runTier0Checks(
         subcategory: 'off-manifest-token',
         severity: 'critical',
         description: `Token "${name}" is not in the design system's token manifest — no theme defines it, so it renders unset.`,
-        fix: `Choose a token that exists: the closed vocabulary is the manifest the design-system docs list (colors: var(--ggui-color-primary-500), var(--ggui-color-onContainer), …; spacing: var(--ggui-spacing-4); type: var(--ggui-font-size-sm)). Never invent a name and never add a literal fallback.`,
+        fix: `${offManifestHint(name)}Choose a token that exists: the closed vocabulary is the manifest the design-system docs list (colors: var(--ggui-color-primary-500), var(--ggui-color-onContainer), …; spacing: var(--ggui-spacing-4); type: var(--ggui-font-size-sm)). Never invent a name and never add a literal fallback.`,
         line: lineNum,
       });
     }

package/src/check/sample-props.ts

@@ -0,0 +1,63 @@
+// Sample props from a PropsSpec — `example` first, then `default`, then a type-driven fill from the JSON
+// Schema. Pure: protocol types only, no sandbox, no node modules, so `@ggui-ai/ui-gen/check` can export it and a
+// caller outside the harness (an experiment's judge input, ggui#1386) synthesizes the SAME props the coding
+// agent's own render check falls back to. Moved verbatim out of `tools/render-check.ts` (2026-09-26).
+import type { JsonObject, JsonSchema, JsonValue, PropsSpec } from '@ggui-ai/protocol';
+
+/**
+ * Generate sample props from a PropsSpec contract.
+ * Uses `example` values from each PropEntry when available,
+ * otherwise synthesizes plausible defaults from the JSON Schema.
+ */
+export function generateSampleProps(spec: PropsSpec): JsonObject {
+  const props: JsonObject = {};
+
+  for (const [name, entry] of Object.entries(spec.properties)) {
+    // Prefer explicit example value
+    if (entry.example !== undefined) {
+      props[name] = entry.example;
+      continue;
+    }
+
+    // Prefer explicit default value
+    if (entry.default !== undefined) {
+      props[name] = entry.default;
+      continue;
+    }
+
+    // Synthesize from JSON Schema
+    props[name] = synthesizeFromSchema(entry.schema);
+  }
+
+  return props;
+}
+
+function synthesizeFromSchema(schema: JsonSchema): JsonValue | undefined {
+  // Draft-07 type arrays (`['string','null']`) synthesize from the
+  // first non-null member — the canonical nullability form the
+  // enforced-props-schema emission produces.
+  const declared = Array.isArray(schema.type)
+    ? schema.type.find((t) => t !== 'null')
+    : schema.type;
+  switch (declared) {
+    case 'string': return 'sample';
+    case 'number':
+    case 'integer': return 0;
+    case 'boolean': return false;
+    case 'null': return null;
+    case 'array': {
+      if (schema.items) return [synthesizeFromSchema(schema.items) ?? null];
+      return [];
+    }
+    case 'object': {
+      const obj: JsonObject = {};
+      if (schema.properties) {
+        for (const [k, v] of Object.entries(schema.properties)) {
+          obj[k] = synthesizeFromSchema(v);
+        }
+      }
+      return obj;
+    }
+    default: return undefined;
+  }
+}

package/src/coding-agent/tools.ts

@@ -17,7 +17,7 @@ import type { AxisCheck, AxisCheckInput } from '../evaluation/types-public.js';
 import type { Classification } from '../classifier/axes.js';
 import type { CanvasClass } from '../design-mode.js';
 import { PRIMITIVES_DOCUMENTATION } from '../validation/index.js';
-import type { DataContract } from '@ggui-ai/protocol';
+import type { DataContract, JsonObject } from '@ggui-ai/protocol';
 import type {
   ToolResult,
   CommitMetadata,
@@ -64,6 +64,8 @@ export interface AutoCommitAxisChecks {
   readonly originalPrompt: string;
   /** The canvas the harness was built for (ggui#1117); absent = no rendering context, never a default. */
   readonly canvas?: CanvasClass;
+  /** The props the probe and judge render with (ggui#1285); absent = the fixture-echo check stands down. */
+  readonly fixtureProps?: JsonObject;
 }
 
 async function autoCommit(
@@ -161,6 +163,7 @@ async function autoCommit(
         classification: axis.classification,
         designMode,
         ...(axis.canvas !== undefined ? { canvas: axis.canvas } : {}),
+        ...(axis.fixtureProps !== undefined ? { fixtureProps: axis.fixtureProps } : {}),
       }
     : undefined;
   if (axisFacts !== undefined && !buildSuccess) traceAxisChecksSkipped(axisFacts, 'build failed — no check ran');

package/src/create-harness.ts

@@ -16,7 +16,7 @@ import { hasProfile } from "./boilerplate/styling-profile.js";
 import type { CacheTier } from "./fragments/index.js";
 import { compose } from "./compose.js";
 import { buildSystemPrompt, generateBoilerplate } from "./boilerplate.js";
-import { APPLY_CHANGES_TOOL, APPLY_CHANGES_TOOL_SCOPED } from "./tools.js";
+import { HARNESS_CODING_TOOLS, HARNESS_SCOPED_TOOLS } from "./harness-tool-names.js";
 import { defaultApplyPatch } from "./patch.js";
 import { computeHarnessId, computeHarnessName, hashClassification } from "./hash.js";
 import { pickWorkflow } from "./workflows.js";
@@ -128,8 +128,8 @@ export function createHarness(input: CreateHarnessInput): Harness {
   const baseWhat: WhatLeg = {
     boilerplate,
     fragments: whatFragments,
-    codingTools: [APPLY_CHANGES_TOOL],
-    scopedTools: [APPLY_CHANGES_TOOL_SCOPED],
+    codingTools: [...HARNESS_CODING_TOOLS],
+    scopedTools: [...HARNESS_SCOPED_TOOLS],
     applyPatch: defaultPatchFn,
     // Registered gadget catalog — drives the system prompt's gadget
     // table + the boilerplate's direct-import emission. Omitted when no