@ggui-ai/ui-gen 0.18.0 → 0.19.0

package/dist/workflows.d.ts

@@ -2,7 +2,7 @@ import { C as Classification } from './axes-CzLEMDeB.js';
 import { Workflow } from './harness/types-public.js';
 import '@ggui-ai/protocol';
 import './styling-profile-CxfvV48g.js';
-import './types-public-DVSssdc-.js';
+import './types-public-DKR_h70H.js';
 import './design-mode-DLufhrNp.js';
 import './types-BOvHNG7K.js';
 import './llm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ggui-ai/ui-gen",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "UI generation harness for ggui — the LLM system prompt, multi-turn coding loop, and evaluation engine that turn a DataContract into a React component. Implements the UiGenerator contract from @ggui-ai/mcp-server-core; consumed by @ggui-ai/mcp-server.",
   "license": "Apache-2.0",
   "keywords": [
@@ -188,9 +188,9 @@
     "puppeteer-core": "^24.40.0 || ^25.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@ggui-ai/mcp-server-core": "0.18.0",
-    "@ggui-ai/project-config": "0.18.0",
-    "@ggui-ai/protocol": "0.18.0"
+    "@ggui-ai/mcp-server-core": "0.19.0",
+    "@ggui-ai/project-config": "0.19.0",
+    "@ggui-ai/protocol": "0.19.0"
   },
   "peerDependenciesMeta": {
     "@google/adk": {
@@ -229,11 +229,11 @@
     "openai": "^7.9.0",
     "typescript": "^5.0.0",
     "zod": "^4.3.6",
-    "@ggui-ai/design": "0.18.0",
-    "@ggui-ai/sandbox": "0.18.0",
-    "@ggui-ai/ui-visual-tester": "0.18.0",
-    "@ggui-ai/wire": "0.18.0",
-    "@ggui-ai/gadgets": "0.18.0"
+    "@ggui-ai/design": "0.19.0",
+    "@ggui-ai/gadgets": "0.19.0",
+    "@ggui-ai/sandbox": "0.19.0",
+    "@ggui-ai/wire": "0.19.0",
+    "@ggui-ai/ui-visual-tester": "0.19.0"
   },
   "devDependencies": {
     "@google/adk": "^2.0.0",
@@ -248,9 +248,9 @@
     "react-dom": "^19.0.0",
     "tsup": "^8.5.0",
     "vitest": "^3.2.6",
-    "@ggui-ai/project-config": "0.18.0",
-    "@ggui-ai/protocol": "0.18.0",
-    "@ggui-ai/mcp-server-core": "0.18.0"
+    "@ggui-ai/mcp-server-core": "0.19.0",
+    "@ggui-ai/project-config": "0.19.0",
+    "@ggui-ai/protocol": "0.19.0"
   },
   "engines": {
     "node": ">=22.0.0"

package/src/adapters/google/sdk.ts

@@ -62,15 +62,10 @@ export async function runAdkLoop(
 ): Promise<AdapterResult> {
   const startTime = Date.now();
 
-  const { FunctionTool, LlmAgent, InMemoryRunner, isFinalResponse } = await import('@google/adk');
+  const { FunctionTool, Gemini, LlmAgent, InMemoryRunner, isFinalResponse } = await import('@google/adk');
 
   const capture = createCapture();
 
-  // Ensure ADK can find the API key
-  if (params.apiKey && !process.env.GOOGLE_GENAI_API_KEY) {
-    process.env.GOOGLE_GENAI_API_KEY = params.apiKey;
-  }
-
   // Build tools with capture wrappers
   const adkTools = params.tools.map((def) =>
     new FunctionTool({
@@ -88,9 +83,18 @@ export async function runAdkLoop(
     }),
   );
 
+  // The key the caller passed WINS, handed to the model directly (ggui#1132).
+  // The ADK resolves GOOGLE_GENAI_API_KEY || GOOGLE_API_KEY || GEMINI_API_KEY
+  // on its own when no key is given, so writing GOOGLE_GENAI_API_KEY here —
+  // a variable this adapter does not own — let a stale ambient value beat a
+  // fresh key, and no rotation could reach it. Precedence is fixed at the
+  // source: an explicit key never touches process.env; no key defers to the
+  // ADK's order untouched.
+  const model = params.apiKey ? new Gemini({ model: params.model, apiKey: params.apiKey }) : params.model;
+
   const agent = new LlmAgent({
     name: 'ui_generator',
-    model: params.model,
+    model,
     instruction: params.systemPrompt,
     tools: adkTools,
   });

package/src/boilerplate/hard-sections.ts

@@ -213,7 +213,7 @@ Rules:
 1. All request-specific data → props with defaults. City names, tickers, user names, dates, counts.
 2. Layout and styling are universal. Colors, spacing, structure — these are the reusable part.
 3. Default values come from the current request — so the component renders correctly standalone.
-4. Copy comes from the props. NEVER invent display text the contract does not carry — no eyebrow / kicker / overline (a \`<Text caps>\` label), no helper line, no status text, no tagline. A caps label exists only when a prop supplies its text (\`<Text caps>{props.section}</Text>\`); a heading's fallback is the request's own words, never a slogan of your own. Text the agent cannot change is chatter on every render.
+4. Copy comes from the props. NEVER invent display text the contract does not carry — no eyebrow / kicker / overline (a \`<Text caps>\` label), no helper line, no status text, no tagline. **Do NOT add a caps label above the heading** — not \`<Text caps>LET'S BEGIN</Text>\`, not \`WELCOME\`, not a section kicker like \`GETTING STARTED\` or \`OVERVIEW\` — UNLESS a prop supplies that exact text (\`<Text caps>{props.section}</Text>\`). When the request asks for a heading and a line, render the heading and the line and NOTHING above the heading. A heading's fallback is the request's own words, never a slogan of your own. Text the agent cannot change is chatter on every render, and a caps eyebrow you wrote is the most common form of it.
 5. Props interface must be typed and exported.`;
 
 /**

package/src/boilerplate/system-prompt.ts

@@ -603,7 +603,7 @@ Don't render text-only metrics. A weather widget without a sun/cloud, a stock ca
 </Row>
 \`\`\`
 
-Use \`<Icon name="..." />\` for line icons — ONLY the curated Lucide subset renders (call \`get_available_icons\` for the exact kebab-case names; a name outside it renders an empty box and fails the check); emoji directly for status/weather/mood. Both are valid. For per-stat tiny accents, use a small icon next to the label.
+Use \`<Icon name="..." />\` for line icons — ONLY the design system's curated set renders (~200 kebab-case Lucide names); a name OUTSIDE it renders an empty box and fails the check. On a single-pass render you cannot look the set up, so use ONLY a name you are sure is in it. Safe common names: \`check\` \`x\` \`plus\` \`minus\` \`search\` \`settings\` \`user\` \`users\` \`calendar\` \`clock\` \`arrow-right\` \`arrow-left\` \`chevron-right\` \`chevron-down\` \`trash-2\` \`edit\` \`info\` \`alert-circle\` \`bell\` \`home\` \`file\` \`file-text\` \`star\` \`heart\` \`mail\` \`send\` \`download\` \`upload\` \`external-link\` \`filter\` \`check-circle\`. The numbered variants (\`edit-2\`, \`edit-3\`) and synonyms (\`pencil\`, \`pen\`, \`trash\`, \`x-circle\`) are NOT in the set — use \`edit\` and \`trash-2\`. If the icon you want is not clearly one of these, OMIT it: a card with no icon beats one with an empty box. Emoji render directly for status/weather/mood. For per-stat tiny accents, use a small icon next to the label.
 
 ### Spacing — generosity beats compactness
 

package/src/coding-agent/tools.ts

@@ -12,6 +12,10 @@ import * as esbuild from 'esbuild';
 import { AgentWorkspace } from './workspace';
 import { getSoftWarnings } from './self-check';
 import { runTier0Checks } from '../check/index.js';
+import { runGatedAxisChecks, traceAxisChecksSkipped } from '../evaluation/axis-checks/dispatch.js';
+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 {
@@ -46,6 +50,22 @@ function getComponentDocumentation(name: string): string {
 // Auto-commit helper (shared by write and apply_changes)
 // =============================================================================
 
+/**
+ * The deterministic axis family at auto-commit (ggui#1122) — what a caller with a
+ * harness hands `executeTool` so the checks run on EVERY commit the coding agent
+ * makes, i.e. on the serve path, not only inside the eval round a serving deployment
+ * never enters. `checks` is the harness's pre-filtered list (`harness.check.axisChecks`)
+ * — the same list `run-check.ts` feeds the same pure runner. Absent: nothing runs.
+ */
+export interface AutoCommitAxisChecks {
+  readonly checks: readonly AxisCheck[];
+  readonly classification: Classification;
+  /** The ORIGINAL request — several checks read it (labels invented past the copy, terminal words). */
+  readonly originalPrompt: string;
+  /** The canvas the harness was built for (ggui#1117); absent = no rendering context, never a default. */
+  readonly canvas?: CanvasClass;
+}
+
 async function autoCommit(
   workspace: AgentWorkspace,
   commitMeta: Map<string, CommitMetadata>,
@@ -72,6 +92,8 @@ async function autoCommit(
   gadgetTypes?: Readonly<Record<string, string>>,
   /** Which tier-0 legs fire — see `runTier0Checks`'s `designMode`. */
   designMode: DesignMode = DEFAULT_DESIGN_MODE,
+  /** ggui#1122: run the harness's axis checks here too; absent, none run. */
+  axis?: AutoCommitAxisChecks,
 ): Promise<ToolResult> {
   const commitStart = Date.now();
   const raw = workspace.read();
@@ -123,17 +145,45 @@ async function autoCommit(
     gadgetTypes,
     designMode,
   );
-  const tier0Fails = tier0Issues.filter(i => i.result === 'fail');
+  // ggui#1122: the deterministic axis family runs HERE — on every commit the coding
+  // agent makes, which is the serve path — through the one pure runner `run-check.ts`
+  // feeds (the ggui#1046 trace line prints on both paths). Posture is the founder's:
+  // warn-as-warn, fail-as-fail. A WARN that started blocking a served generation
+  // because it moved surface would be a posture change, not a relocation, and comes
+  // to him as a named item. Only a source that BUILT is judged: on a build failure
+  // the checks are not asked (the same stand-down the gate+run wrapper makes) and
+  // the ggui#1046 trace says so — a skipped round never reads as a clean one.
+  const axisFacts = axis !== undefined
+    ? {
+        sourceCode: formatted,
+        ...(contract !== undefined ? { contract } : {}),
+        originalPrompt: axis.originalPrompt,
+        classification: axis.classification,
+        designMode,
+        ...(axis.canvas !== undefined ? { canvas: axis.canvas } : {}),
+      }
+    : undefined;
+  if (axisFacts !== undefined && !buildSuccess) traceAxisChecksSkipped(axisFacts, 'build failed — no check ran');
+  const axisRun = axis !== undefined && axisFacts !== undefined && buildSuccess
+    ? runGatedAxisChecks(axis.checks, { ...axisFacts, compiledCode } satisfies AxisCheckInput)
+    : undefined;
+  const axisIssues = axisRun?.issues ?? [];
+  const checkIssues = [...tier0Issues, ...axisIssues];
+  const tier0Fails = checkIssues.filter(i => i.result === 'fail');
   const selfCheckPassed = tier0Fails.length === 0;
   // When contextPolicy.labeledTier0 is set, prefix each violation with
   // its P0/P1/P2 priority so the LLM can rank against the prompt's
   // schema. The default (off) emits unlabeled feedback.
-  const violations = tier0Issues
+  const violations = checkIssues
     .filter(i => i.result === 'fail')
     .map(i => contextPolicy?.labeledTier0
       ? `[${i.priority ?? 'P0'}-${i.category}] ${i.description}\n  Fix: ${i.fix}`
       : `[${i.category}] ${i.description}\n  Fix: ${i.fix}`);
-  const softWarnings = getSoftWarnings(raw);
+  // Axis WARNs ride the existing non-blocking channel — feedback the model sees, never a block.
+  const axisWarnings = axisIssues
+    .filter(i => i.result === 'warn')
+    .map(i => `[${i.subcategory}] ${i.description} Fix: ${i.fix}`);
+  const softWarnings = [...getSoftWarnings(raw), ...axisWarnings];
   const selfCheckMs = Date.now() - selfCheckStart;
 
   // Always commit (preserves history)
@@ -144,7 +194,7 @@ async function autoCommit(
 
   const status = buildSuccess && selfCheckPassed ? 'PASS' : 'FAIL';
   console.log(
-    `[coding-agent] auto-commit: ${status} | build=${buildMs}ms self-check=${selfCheckMs}ms git=${gitMs}ms total=${Date.now() - commitStart}ms | violations=${violations.length}`,
+    `[coding-agent] auto-commit: ${status} | build=${buildMs}ms self-check=${selfCheckMs}ms git=${gitMs}ms total=${Date.now() - commitStart}ms | violations=${violations.length} | axis=${axisRun === undefined ? 'off' : `${axisIssues.length - axisWarnings.length}F/${axisWarnings.length}W`}`,
   );
   if (violations.length > 0) {
     for (const v of violations) {
@@ -202,6 +252,8 @@ export async function executeTool(
   gadgetTypes?: Readonly<Record<string, string>>,
   /** Which tier-0 legs fire on auto-commit — see `runTier0Checks`'s `designMode`. */
   designMode: DesignMode = DEFAULT_DESIGN_MODE,
+  /** ggui#1122: the harness's axis checks, run at every auto-commit — see `AutoCommitAxisChecks`. */
+  axis?: AutoCommitAxisChecks,
 ): Promise<ToolResult> {
   switch (tool) {
     case 'write':
@@ -222,7 +274,7 @@ export async function executeTool(
       const message = (input.commit_message as string) || `write ${lineCount} lines`;
 
       console.log(`[coding-agent] write: ${lineCount} lines → auto-commit`);
-      return autoCommit(workspace, commitMeta, message, contract, contextPolicy, gadgetTypes, designMode);
+      return autoCommit(workspace, commitMeta, message, contract, contextPolicy, gadgetTypes, designMode, axis);
     }
 
     case 'apply_changes': {
@@ -529,7 +581,7 @@ export async function executeTool(
       const message = (input.commit_message as string) || 'apply changes';
 
       console.log(`[coding-agent] apply_changes: ${changes.length} changes applied → auto-commit`);
-      return autoCommit(workspace, commitMeta, message, contract, contextPolicy, gadgetTypes, designMode);
+      return autoCommit(workspace, commitMeta, message, contract, contextPolicy, gadgetTypes, designMode, axis);
     }
 
     case 'get_components_info': {

package/src/contract-context.ts

@@ -213,7 +213,7 @@ export function buildContractsContext(
         // model reads it that way. Emitted only when true, so an absent flag
         // leaves the prompt bytes identical to before this line existed.
         if (entry.confirm === true) {
-          line += `\n    Author flag: \`confirm\` — the author marked this action grave enough to confirm before it fires, so a second press is a mistake.`;
+          line += `\n    Author flag: \`confirm\` — the author marked this action as one to confirm with the user before it fires.`;
         }
         return line;
       })

package/src/create-harness.ts

@@ -224,6 +224,7 @@ export function createHarness(input: CreateHarnessInput): Harness {
     name,
     classification,
     designMode,
+    ...(input.canvas !== undefined ? { canvas: input.canvas } : {}),
     ...(input.profile !== undefined ? { profile: input.profile } : {}),
     how,
     what,

package/src/evaluation/axis-checks/checks/universal.ts

@@ -4,7 +4,8 @@
 // component. Dispatched via a "universal" gate that matches every render
 // value.
 
-import { LUCIDE_ICON_NAMES } from "@ggui-ai/design";
+import { LUCIDE_ICON_NAMES, maxWidth as CONTAINER_MAX_WIDTH } from "@ggui-ai/design";
+import { CANVAS_VIEWPORTS, type CanvasClass } from "../../../design-mode.js";
 import type { EvalIssue } from "../../types-public.js";
 import type { AxisCheck, AxisCheckInput } from "../types.js";
 import {
@@ -391,6 +392,113 @@ function runTerminalActionUnguarded(input: AxisCheckInput): EvalIssue[] {
   ];
 }
 
+// ── universal.root_width_cap (ggui#1117 — the eval leg ggui#1113 left out) ─
+// FRAME_SIZING's width half: the outermost element FILLS the frame; a width
+// cap belongs INSIDE it, on the column that holds text. A cap on the root is
+// the defect on a wide canvas (the card becomes a narrow strip with the
+// frame's ground on either side) and a no-op in a chat bubble (~400 px; a
+// 480 px cap never binds) — so the check reads `input.canvas`: it stands
+// down with no canvas (never a guess) and below `md`, and fires only for a
+// cap SMALLER than the canvas. A bare `<Container>` is a cap too — its
+// default preset is `lg`, 768 px — so it binds on `lg` / `xl` and not on
+// `md`. A cap the check cannot resolve to pixels (a `max-w-*` class, `rem`,
+// `%`) is reported because the prompt forbids it on the root. WARN, not
+// fail: the prompt names the one shape never to write; whether a centred
+// column was the right composition stays the model's call.
+export interface RootWidthCap {
+  /** The outermost element's tag name as written. */
+  readonly element: string;
+  /** The cap as written (`maxWidth="sm"`, `maxWidth: '480px'`, `max-w-md`, or `lg (Container default)`). */
+  readonly cap: string;
+  /** The cap in pixels when it resolves (a Container preset, an `Npx` value); `null` otherwise. */
+  readonly px: number | null;
+}
+
+/** The opening tag of the OUTERMOST element the default export returns, as written; `null` for none or a fragment. */
+function rootOpeningTag(sourceCode: string): { readonly name: string; readonly attrs: string } | null {
+  const start = sourceCode.indexOf("export default function");
+  const body = start >= 0 ? sourceCode.slice(start) : sourceCode;
+  const ret = /\breturn\s*\(?\s*</.exec(body);
+  if (ret === null) return null;
+  const at = ret.index + ret[0].length - 1;
+  const nameMatch = /^<([A-Za-z][\w.]*)/.exec(body.slice(at));
+  if (nameMatch === null) return null;
+  let j = at + nameMatch[0].length;
+  let depth = 0;
+  let quote: string | null = null;
+  for (; j < body.length; j++) {
+    const ch = body[j]!;
+    if (quote !== null) {
+      if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'" || ch === "`") quote = ch;
+    else if (ch === "{") depth++;
+    else if (ch === "}") depth--;
+    else if (ch === ">" && depth === 0) break;
+  }
+  return { name: nameMatch[1]!, attrs: body.slice(at + nameMatch[0].length, j) };
+}
+
+const CONTAINER_PRESETS: Readonly<Record<string, string>> = CONTAINER_MAX_WIDTH;
+const NOT_A_CAP = new Set(["full", "none", "100%", "unset", "initial", "inherit"]);
+
+/** `sm` → 480; `480px` → 480; `100%` / `full` → not a cap (`undefined`); anything else → a cap of unknown size (`null`). */
+function capPx(value: string): number | null | undefined {
+  const v = value.trim();
+  if (NOT_A_CAP.has(v)) return undefined;
+  const resolved = CONTAINER_PRESETS[v] ?? v;
+  if (NOT_A_CAP.has(resolved)) return undefined;
+  const px = /^(\d+(?:\.\d+)?)px$/.exec(resolved);
+  return px === null ? null : Number(px[1]);
+}
+
+/** The width cap the outermost returned element carries, or `null` when it fills the frame. */
+export function findRootWidthCap(sourceCode: string): RootWidthCap | null {
+  const root = rootOpeningTag(sourceCode);
+  if (root === null) return null;
+  const { name, attrs } = root;
+  const prop = /\bmaxWidth\s*=\s*(?:"([^"]*)"|'([^']*)'|\{\s*(?:"([^"]*)"|'([^']*)'|(\d+(?:\.\d+)?))\s*\})/.exec(attrs);
+  if (prop !== null) {
+    const raw = prop[1] ?? prop[2] ?? prop[3] ?? prop[4] ?? `${prop[5]!}px`;
+    const px = capPx(raw);
+    return px === undefined ? null : { element: name, cap: `maxWidth="${raw}"`, px };
+  }
+  const style = /\bmaxWidth\s*:\s*(?:"([^"]*)"|'([^']*)'|`([^`]*)`|(\d+(?:\.\d+)?))/.exec(attrs);
+  if (style !== null) {
+    const raw = style[1] ?? style[2] ?? style[3] ?? `${style[4]!}px`;
+    const px = capPx(raw);
+    return px === undefined ? null : { element: name, cap: `maxWidth: '${raw}'`, px };
+  }
+  const cls = /(?<![\w-])max-w-([\w[\]%.-]+)/.exec(attrs);
+  if (cls !== null) {
+    if (cls[1] === "full" || cls[1] === "none") return null;
+    return { element: name, cap: `max-w-${cls[1]!}`, px: null };
+  }
+  if (name === "Container") return { element: name, cap: "lg (Container default)", px: capPx("lg") ?? null };
+  return null;
+}
+
+const WIDE_CANVASES: ReadonlySet<CanvasClass> = new Set<CanvasClass>(["md", "lg", "xl"]);
+
+function runRootWidthCap(input: AxisCheckInput): EvalIssue[] {
+  if (input.compiledCode === null) return [];
+  if (input.canvas === undefined || !WIDE_CANVASES.has(input.canvas)) return [];
+  const cap = findRootWidthCap(input.sourceCode);
+  if (cap === null) return [];
+  const width = CANVAS_VIEWPORTS[input.canvas].width;
+  if (cap.px !== null && cap.px >= width) return [];
+  const sized = cap.px !== null ? `${cap.px}px on a ${width}px canvas` : `on a ${width}px canvas`;
+  return [
+    mkIssue(
+      "universal.root_width_cap",
+      `The outermost element <${cap.element}> carries a width cap (${cap.cap}, ${sized}): on this canvas the card becomes a narrow strip with the frame's ground on either side. The frame owns the width; a cap belongs INSIDE the root, on the column that holds text.`,
+      'Let the root fill the frame — drop the cap on the element you return at the top (or `maxWidth="full"`) — and put the reading measure on an inner column: `<Box padding="lg"><Container maxWidth="sm">…</Container></Box>`.',
+      "warn",
+    ),
+  ];
+}
+
 export const UNIVERSAL_CHECKS: readonly AxisCheck[] = [
   {
     id: "universal.icon_name_known",
@@ -410,6 +518,12 @@ export const UNIVERSAL_CHECKS: readonly AxisCheck[] = [
     values: ALL_RENDER_VALUES,
     run: runViewportSized,
   },
+  {
+    id: "universal.root_width_cap",
+    axis: "render",
+    values: ALL_RENDER_VALUES,
+    run: runRootWidthCap,
+  },
   {
     id: "universal.terminal_action_unguarded",
     axis: "render",

package/src/evaluation/axis-checks/dispatch.ts

@@ -9,7 +9,7 @@ import { REGISTRY } from "./registry.js";
 import { matches, type AxisCheck, type AxisCheckInput } from "./types.js";
 import { axisCheckTraceEnabled } from "./helpers.js";
 import { createHash } from "node:crypto";
-import type { DesignMode } from "../../design-mode.js";
+import type { CanvasClass, DesignMode } from "../../design-mode.js";
 
 export interface RunAxisChecksInput {
   sourceCode: string;
@@ -18,6 +18,8 @@ export interface RunAxisChecksInput {
   originalPrompt: string;
   /** Which triad produced the source — see `AxisCheckInput.designMode`. */
   designMode?: DesignMode;
+  /** The canvas the source is judged for — see `AxisCheckInput.canvas` (ggui#1117); absent = no rendering context. */
+  canvas?: CanvasClass;
 }
 
 export function runAxisChecks(
@@ -30,6 +32,7 @@ export function runAxisChecks(
     originalPrompt: input.originalPrompt,
     classification,
     ...(input.designMode !== undefined ? { designMode: input.designMode } : {}),
+    ...(input.canvas !== undefined ? { canvas: input.canvas } : {}),
   };
   if (input.compiledCode === null) {
     traceAxisChecksSkipped(facts, "compiledCode null — no check ran");
@@ -93,6 +96,8 @@ export interface AxisCheckTrace {
   readonly classification: Classification["vector"];
   readonly propsSpecKeys: readonly string[];
   readonly propsSpecPropertyKeys: readonly string[];
+  /** The canvas the verdict was built for (ggui#1117) — present only when the input carried one. */
+  readonly canvas?: CanvasClass;
   readonly matched: readonly string[];
   readonly issues: ReadonlyArray<{ readonly id: string; readonly result: EvalIssue["result"] }>;
   readonly note?: string;
@@ -107,5 +112,7 @@ function traceFacts(input: AxisTraceFacts): Omit<AxisCheckTrace, "matched" | "is
     classification: input.classification.vector,
     propsSpecKeys: Object.keys(propsSpec ?? {}),
     propsSpecPropertyKeys: Object.keys(propsSpec?.properties ?? {}),
+    // No default here, unlike designMode: an absent canvas is a fact about the caller, not a guess to paper over.
+    ...(input.canvas !== undefined ? { canvas: input.canvas } : {}),
   };
 }

package/src/evaluation/types-public.ts

@@ -280,6 +280,15 @@ export interface AxisCheckInput {
    * means `constrained`.
    */
   designMode?: DesignMode;
+  /**
+   * The rendering canvas the source is judged FOR (ggui#1117). A width cap on
+   * the outermost element is a defect on a fullscreen canvas and a no-op in a
+   * chat bubble, so a check that reads width must know the surface. Populated
+   * where the harness is built (`Harness.canvas`); ABSENT for callers with no
+   * rendering context — a check handles `undefined`, it never assumes a
+   * default (a silent `lg` would be the same guess with a nicer face).
+   */
+  canvas?: CanvasClass;
 }
 
 /**

package/src/harness/coding/generate-task-runner.ts

@@ -178,6 +178,7 @@ export function createGenerateTaskRunner(input: CreateGenerateRunnerInput): Task
           systemPrompt: session.systemPrompt,
           harness: session.harness,
           contract: params.contract,
+          originalPrompt: params.userPrompt,
           commitMeta: session.commitMeta,
           originalProps: session.originalProps,
           costTracker: session.costTracker,

package/src/harness/coding/run-coding-turn.ts

@@ -155,6 +155,13 @@ export interface CodingTurnContext {
   readonly systemPrompt: string;
   readonly harness: Harness;
   readonly contract: DataContract | undefined;
+  /**
+   * The ORIGINAL request (ggui#1122) — what the eval round has always judged
+   * against, now handed to auto-commit so the axis checks run on the serve
+   * path with the same input. Required: a caller that forgot it would silently
+   * run no axis checks on every served generation.
+   */
+  readonly originalPrompt: string;
   readonly commitMeta: Map<string, CommitMetadata>;
   readonly originalProps: string | undefined;
   readonly costTracker: CostTracker | null;
@@ -669,6 +676,13 @@ ${closingInstruction}`;
     // Which tier-0 legs fire — the design-vocabulary legs stand down in
     // `free` mode; every contract leg runs in both.
     harness.designMode,
+    // ggui#1122: the harness's pre-filtered axis checks run at auto-commit — the serve path.
+    {
+      checks: harness.check.axisChecks,
+      classification: harness.classification,
+      originalPrompt: ctx.originalPrompt,
+      ...(harness.canvas !== undefined ? { canvas: harness.canvas } : {}),
+    },
   );
   const toolMs = Date.now() - toolStart;
 

package/src/harness/types-public.ts

@@ -303,6 +303,13 @@ export interface Harness {
    * into `free`.
    */
   readonly designMode: DesignMode;
+  /**
+   * The rendering canvas this harness was built for (ggui#1117) — threaded
+   * from `CreateHarnessInput.canvas` into the HOW leg (the `free` prompt
+   * states it) and, via `run-check.ts`, onto every axis check's input.
+   * ABSENT when the caller had no rendering context; never defaulted.
+   */
+  readonly canvas?: CanvasClass;
   /** The app's generation profile in force for this harness (#991), if any. */
   readonly profile?: GenerationProfileInput;
 

package/src/run-check.ts

@@ -119,6 +119,8 @@ export async function runCheck(input: RunCheckInput): Promise<CheckResult> {
     originalPrompt: prompt,
     classification: harness.classification,
     designMode: harness.designMode,
+    // ggui#1117: the canvas the harness was built for, when it has one — never a default.
+    ...(harness.canvas !== undefined ? { canvas: harness.canvas } : {}),
   };
   // The one runner `runAxisChecks` shares (ggui#1046 trace prints here, on the served path).
   const axisRun = runGatedAxisChecks(check.axisChecks, axisInput);

package/src/tools/get-wire.ts

@@ -2,4 +2,4 @@
  * AUTO-GENERATED from @ggui-ai/wire JSDoc.
  * Do not edit manually. Run: pnpm --filter @ggui-ai/wire generate:docs
  */
-export const WIRE_DOCUMENTATION = "# ggui Wire Hooks Reference\n\n> Wire hooks connect generated UI components to agent communication.\n> They are pre-imported in the boilerplate — use them directly.\n> All hooks must be called inside a GguiWireProvider (handled automatically by the renderer).\n\nImport: `import { useAction, useStream } from '@ggui-ai/wire'`\n\n## Communication Hooks\n\n\n\nThese are the wire primitives for component-agent communication. `useWiredTool` retired 2026-05-11 — agentCapabilities.tools is a catalog the AGENT invokes, not a component hook surface; user gestures use `useAction(name)` and the optional `nextStep` field on the action entry names the tool the agent SHOULD invoke next.\n\n### useAction\n\nFire an action to the agent. Fire-and-forget — no response, no pending state.\n\nEvery action is an event: it lands on the GguiSession's consume buffer and\nthe agent receives it on its next turn (via `ggui_consume`). The action\nentry's optional `nextStep` names the tool the agent SHOULD invoke in\nresponse — advisory only; the agent owns the call decision. Component code\nis identical either way: call `useAction(name)(payload)` and treat\n`nextStep` as informational (use it to inform button labels, icons, copy).\n\nRUNTIME DEDUP (backstop, not a feature). Same-`(name, payload)` calls within\none event-loop task are coalesced — the first wins, subsequent duplicates\nare suppressed. This is the structural defense against LLM-generated\nnested-interactive components where a Checkbox `onChange` and an outer\n`Card as={Clickable}` `onClick` both wire to the same `useAction` binding;\nthe inner gesture bubbles to the outer handler, so without dedup one user\nclick would fire the action twice (a toggle would run back-to-back and the\nuser's change would disappear). **Do not rely on this as a feature** — wire\neach `useAction` callback to exactly ONE interactive surface; the dedup\nexists only because the LLM's source code can be wrong in subtle ways and\nthe runtime is the only place that can see the actual event-bubble path.\nSee `dispatch-dedup.ts` for the full failure-mode rationale.\n\nNEVER SILENT. When the dedup fires, a `console.warn` is emitted in BOTH dev\nand prod with the full diagnostic. The suppression is always visible in\nbrowser DevTools; operators investigating a \"the second click does nothing\"\nreport see the warning immediately. A structured observer also exists as\n`WireConfig.onDispatchSuppressed`, but the first-party renderers never set\nit — it is reachable only from a hand-built `WireConfig` (see its\ndocstring), so the console signal is what operators get in practice.\n\n**Signature:** `useAction<T = unknown>(actionName: string): (data: T) => void`\n\n**Parameters:**\n\n| Param | Type | Description |\n|-------|------|-------------|\n| actionName | `string` | Action name from the action contract |\n\n**Returns:** `(data: T) => void`\n\n**Example:**\n```tsx\nconst submitForm = useAction<{name: string; email: string}>('formSubmit');\n\n// In JSX:\n<Button onClick={() => submitForm({ name, email })}>Submit</Button>\n```\n\n\n### useStream\n\nSubscribe to deliveries on a named stream channel.\n\nHonors the channel's per-delivery `mode` ('append' vs 'replace')\nand the optional `complete` terminal marker. Channels declared\n`mode: 'replace'` on the spec typically emit every delivery with\n`mode: 'replace'` — this hook folds them into a single-latest\nvalue without accumulating history.\n\n**Signature:** `useStream<T = unknown>(channelName: string): StreamResult<T>`\n\n**Parameters:**\n\n| Param | Type | Description |\n|-------|------|-------------|\n| channelName | `string` | Channel name from the GguiSession's streamSpec |\n\n**Returns:** `StreamResult<T>`\n\n| Property | Type | Description |\n|----------|------|-------------|\n| latest | `T \\| null` | Most recent payload delivered on this channel, or null if none received yet. |\n| all | `T[]` | All payloads accumulated on this channel.  - `mode: 'append'` deliveries are pushed to the tail (continuous stream). - `mode: 'replace'` deliveries collapse `all` to a single-element array   containing the latest payload — matching the channel's   \"full replacement\" semantics. |\n| isComplete | `boolean` | Truthy after the channel has delivered an envelope with `complete: true`. Subscribers flip into a \"channel closed\" rendering state based on this signal; further deliveries on a completed channel are still accumulated, since the underlying wire doesn't enforce quiescence. |\n\n**Example:**\n```tsx\nconst progress = useStream<{ percent: number; message: string }>('progress');\n\n// In JSX:\n{progress.latest && (\n  <Progress value={progress.latest.percent} />\n)}\n<Text>{progress.all.length} updates received</Text>\n```\n\n\n## Context Hooks\n\n\n\nRead-only access to render, app, and auth context.\n\n### useAuth\n\nRead-only auth context. Token excluded — auth is added server-side.\n\n**Signature:** `useAuth(): AuthInfo`\n\n**Returns:** `AuthInfo`\n\n| Property | Type | Description |\n|----------|------|-------------|\n| userId | `string` | userId |\n| isAuthenticated | `boolean` | isAuthenticated |\n\n**Example:**\n```tsx\nconst auth = useAuth();\n\n// In JSX:\n{auth.isAuthenticated\n  ? <Text>Welcome, user {auth.userId}</Text>\n  : <Text>Please sign in</Text>\n}\n```\n\n\n### useApp\n\nRead-only app metadata.\n\n**Signature:** `useApp(): AppInfo`\n\n**Returns:** `AppInfo`\n\n| Property | Type | Description |\n|----------|------|-------------|\n| appId | `string` | appId |\n| appName | `string` | appName |\n| appDescription | `string` | appDescription |\n| appIcon | `string` | appIcon |\n\n**Example:**\n```tsx\nconst app = useApp();\n\n// In JSX:\n<Heading>{app.appName}</Heading>\n{app.appDescription && <Text>{app.appDescription}</Text>}\n```\n\n\n### useRender\n\nRead-only render context with connection status.\n\n**Signature:** `useRender(): GguiSessionInfo`\n\n**Returns:** `GguiSessionInfo`\n\n| Property | Type | Description |\n|----------|------|-------------|\n| sessionId | `string` | sessionId |\n| isConnected | `boolean` | isConnected |\n\n**Example:**\n```tsx\nconst render = useRender();\n\n// In JSX:\n<Badge variant={render.isConnected ? 'success' : 'error'}>\n  {render.isConnected ? 'Connected' : 'Disconnected'}\n</Badge>\n```\n\n\n## Provider\n\n\n\nThe provider is set up automatically by the renderer. Generated components do not need to wrap themselves in a provider.\n\n### GguiWireProvider\n\nReact context provider that injects WireConfig for all wire hooks.\n\n**Props:**\n\n| Prop | Type | Description |\n|------|------|-------------|\n| config | `WireConfig` | config |\n| children | `ReactNode` | children |\n\n**Example:**\n```tsx\n<GguiWireProvider config={wireConfig}>\n  <YourComponent />\n</GguiWireProvider>\n```\n\n\n## Internal: WireConfig\n\n\n\nThis is the configuration object passed to GguiWireProvider. Generated components do not interact with this directly — it is provided by the renderer.\n\n### WireConfig\n\nConfiguration injected by the provider — the renderer inside the\niframe.\n\nEvery method is typed against the contract generic `T` so typed\ncallers get compile-time enforcement:\n  - `dispatch(name, data)` — `name` MUST be a declared actionSpec\n    key; `data` MUST satisfy that action's schema.\n  - `subscribe(channel, handler)` — same discipline for streamSpec.\n\nUntyped callers (`T = DataContract` default) degrade to the broad\nshape via the conditional `WireDispatchData` / `WireStreamPayload`\naliases — no call-site break.\n\nThe contract's `agentCapabilities.tools` catalog declares tools the AGENT\ninvokes (not the component); user gestures fire via\n`dispatch(name, data)` and the optional `nextStep` field on the\naction entry names the tool the agent SHOULD invoke next.\n\nThe renderer mounts exactly ONE GguiSession per iframe — `render.sessionId`\nis the stable identity the WireProvider was constructed with. No\nper-item scoping factory; with a one-GguiSession-per-mount lifecycle,\n\"scope\" collapses to identity.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| app | `{     readonly appId: string;     readonly appName: string;     readonly appDescription?: string;     readonly appIcon?: string;   }` | app |\n| render | `{     readonly sessionId: string;     readonly isConnected: boolean;   }` | render |\n| auth | `{     readonly userId?: string;     readonly isAuthenticated: boolean;   }` | auth |\n| dispatch | `<N extends string>(     actionName: N,     data: WireDispatchData<T, N>,   ) => void` | Fire an action to the agent (fire-and-forget over WS). Typed callers get compile-time checked `name` + `data`; untyped callers (`T = DataContract`) keep the broad shape. |\n| subscribe | `<N extends string>(     channelName: N,     handler: (delivery: StreamDelivery<WireStreamPayload<T, N>>) => void,   ) => () => void` | Subscribe to deliveries on a named stream channel. |\n| onDispatchSuppressed | `(info: DispatchSuppressedInfo) => void` | Optional structured observability for `useAction`'s task-scoped duplicate-dispatch suppression. Fires alongside the always-on `console.warn` whenever the runtime coalesces a same-(name, payload) re-dispatch within one event-loop task — the nested- interactive double-fire backstop.  Reachability constraint: the first-party renderers do NOT set this field — `buildRootWireConfig` (`@ggui-ai/iframe-runtime`) and `<GguiRender>`'s internal config both omit it. It fires only when a host hand-builds a complete `WireConfig` and mounts `GguiWireProvider` itself. On every first-party render path the `console.warn` is the sole suppression signal. |\n";
+export const WIRE_DOCUMENTATION = "# ggui Wire Hooks Reference\n\n> Wire hooks connect generated UI components to agent communication.\n> They are pre-imported in the boilerplate — use them directly.\n> All hooks must be called inside a GguiWireProvider (handled automatically by the renderer).\n\nImport: `import { useAction, useStream } from '@ggui-ai/wire'`\n\n## Communication Hooks\n\n\n\nThese are the wire primitives for component-agent communication. `useWiredTool` retired 2026-05-11 — agentCapabilities.tools is a catalog the AGENT invokes, not a component hook surface; user gestures use `useAction(name)` and the optional `nextStep` field on the action entry names the tool the agent SHOULD invoke next.\n\n### useAction\n\nFire an action to the agent. Fire-and-forget — no response, no pending state.\n\nEvery action is an event: it lands on the GguiSession's consume buffer and\nthe agent receives it on its next turn (via `ggui_consume`). The action\nentry's optional `nextStep` names the tool the agent SHOULD invoke in\nresponse — advisory only; the agent owns the call decision. Component code\nis identical either way: call `useAction(name)(payload)` and treat\n`nextStep` as informational (use it to inform button labels, icons, copy).\n\nRUNTIME DEDUP (backstop, not a feature). Same-`(name, payload)` calls within\none event-loop task are coalesced — the first wins, subsequent duplicates\nare suppressed. This is the structural defense against LLM-generated\nnested-interactive components where a Checkbox `onChange` and an outer\n`Card as={Clickable}` `onClick` both wire to the same `useAction` binding;\nthe inner gesture bubbles to the outer handler, so without dedup one user\nclick would fire the action twice (a toggle would run back-to-back and the\nuser's change would disappear). **Do not rely on this as a feature** — wire\neach `useAction` callback to exactly ONE interactive surface; the dedup\nexists only because the LLM's source code can be wrong in subtle ways and\nthe runtime is the only place that can see the actual event-bubble path.\nSee `dispatch-dedup.ts` for the full failure-mode rationale.\n\nNEVER SILENT. When the dedup fires, a `console.warn` is emitted in BOTH dev\nand prod with the full diagnostic. The suppression is always visible in\nbrowser DevTools; operators investigating a \"the second click does nothing\"\nreport see the warning immediately. A structured observer also exists as\n`WireConfig.onDispatchSuppressed`, but the first-party renderers never set\nit — it is reachable only from a hand-built `WireConfig` (see its\ndocstring), so the console signal is what operators get in practice.\n\n**Signature:** `useAction<T = unknown>(actionName: string): (data: T) => void`\n\n**Parameters:**\n\n| Param | Type | Description |\n|-------|------|-------------|\n| actionName | `string` | Action name from the action contract |\n\n**Returns:** `(data: T) => void`\n\n**Example:**\n```tsx\nconst submitForm = useAction<{name: string; email: string}>('formSubmit');\n\n// In JSX:\n<Button onClick={() => submitForm({ name, email })}>Submit</Button>\n```\n\n\n### useStream\n\nSubscribe to deliveries on a named stream channel.\n\nHonors the channel's per-delivery `mode` ('append' vs 'replace')\nand the optional `complete` terminal marker. Channels declared\n`mode: 'replace'` on the spec typically emit every delivery with\n`mode: 'replace'` — this hook folds them into a single-latest\nvalue without accumulating history.\n\n**Signature:** `useStream<T = unknown>(channelName: string): StreamResult<T>`\n\n**Parameters:**\n\n| Param | Type | Description |\n|-------|------|-------------|\n| channelName | `string` | Channel name from the GguiSession's streamSpec |\n\n**Returns:** `StreamResult<T>`\n\n| Property | Type | Description |\n|----------|------|-------------|\n| latest | `T \\| null` | Most recent payload delivered on this channel, or null if none received yet. |\n| all | `T[]` | All payloads accumulated on this channel.  - `mode: 'append'` deliveries are pushed to the tail (continuous stream). - `mode: 'replace'` deliveries collapse `all` to a single-element array   containing the latest payload — matching the channel's   \"full replacement\" semantics. |\n| isComplete | `boolean` | Truthy after the channel has delivered an envelope with `complete: true`. Subscribers flip into a \"channel closed\" rendering state based on this signal; further deliveries on a completed channel are still accumulated, since the underlying wire doesn't enforce quiescence. |\n\n**Example:**\n```tsx\nconst progress = useStream<{ percent: number; message: string }>('progress');\n\n// In JSX:\n{progress.latest && (\n  <Progress value={progress.latest.percent} />\n)}\n<Text>{progress.all.length} updates received</Text>\n```\n\n\n## Context Hooks\n\n\n\nRead-only access to render, app, and auth context.\n\n### useAuth\n\nRead-only auth context. Token excluded — auth is added server-side.\n\n**Signature:** `useAuth(): AuthInfo`\n\n**Returns:** `AuthInfo`\n\n| Property | Type | Description |\n|----------|------|-------------|\n| userId | `string` | userId |\n| isAuthenticated | `boolean` | isAuthenticated |\n\n**Example:**\n```tsx\nconst auth = useAuth();\n\n// In JSX:\n{auth.isAuthenticated\n  ? <Text>Welcome, user {auth.userId}</Text>\n  : <Text>Please sign in</Text>\n}\n```\n\n\n### useApp\n\nRead-only app metadata.\n\n**Signature:** `useApp(): AppInfo`\n\n**Returns:** `AppInfo`\n\n| Property | Type | Description |\n|----------|------|-------------|\n| appId | `string` | appId |\n| appName | `string` | appName |\n| appDescription | `string` | appDescription |\n| appIcon | `string` | appIcon |\n\n**Example:**\n```tsx\nconst app = useApp();\n\n// In JSX:\n<Heading>{app.appName}</Heading>\n{app.appDescription && <Text>{app.appDescription}</Text>}\n```\n\n\n### useRender\n\nRead-only render context with connection status.\n\n**Signature:** `useRender(): GguiSessionInfo`\n\n**Returns:** `GguiSessionInfo`\n\n| Property | Type | Description |\n|----------|------|-------------|\n| sessionId | `string` | sessionId |\n| isConnected | `boolean` | isConnected |\n\n**Example:**\n```tsx\nconst render = useRender();\n\n// In JSX:\n<Badge variant={render.isConnected ? 'success' : 'error'}>\n  {render.isConnected ? 'Connected' : 'Disconnected'}\n</Badge>\n```\n\n\n## Provider\n\n\n\nThe provider is set up automatically by the renderer. Generated components do not need to wrap themselves in a provider.\n\n### GguiWireProvider\n\nReact context provider that injects WireConfig for all wire hooks.\n\n**Props:**\n\n| Prop | Type | Description |\n|------|------|-------------|\n| config | `WireConfig` | config |\n| children | `ReactNode` | children |\n\n**Example:**\n```tsx\n<GguiWireProvider config={wireConfig}>\n  <YourComponent />\n</GguiWireProvider>\n```\n\n\n## Internal: WireConfig\n\n\n\nThis is the configuration object passed to GguiWireProvider. Generated components do not interact with this directly — it is provided by the renderer.\n\n### WireConfig\n\nConfiguration injected by the provider — the renderer inside the\niframe.\n\nEvery method is typed against the contract generic `T` so typed\ncallers get compile-time enforcement:\n  - `dispatch(name, data)` — `name` MUST be a declared actionSpec\n    key; `data` MUST satisfy that action's schema.\n  - `subscribe(channel, handler)` — same discipline for streamSpec.\n\nUntyped callers (`T = DataContract` default) degrade to the broad\nshape via the conditional `WireDispatchData` / `WireStreamPayload`\naliases — no call-site break.\n\nThe contract's `agentCapabilities.tools` catalog declares tools the AGENT\ninvokes (not the component); user gestures fire via\n`dispatch(name, data)` and the optional `nextStep` field on the\naction entry names the tool the agent SHOULD invoke next.\n\nThe renderer mounts exactly ONE GguiSession per iframe — `render.sessionId`\nis the stable identity the WireProvider was constructed with. No\nper-item scoping factory; with a one-GguiSession-per-mount lifecycle,\n\"scope\" collapses to identity.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| app | `{     readonly appId: string;     readonly appName: string;     readonly appDescription?: string;     readonly appIcon?: string;   }` | app |\n| render | `{     readonly sessionId: string;     readonly isConnected: boolean;   }` | render |\n| auth | `{     readonly userId?: string;     readonly isAuthenticated: boolean;   }` | auth |\n| dispatch | `<N extends string>(     actionName: N,     data: WireDispatchData<T, N>,   ) => void` | Fire an action to the agent (fire-and-forget over WS). Typed callers get compile-time checked `name` + `data`; untyped callers (`T = DataContract`) keep the broad shape. |\n| subscribe | `<N extends string>(     channelName: N,     handler: (delivery: StreamDelivery<WireStreamPayload<T, N>>) => void,   ) => () => void` | Subscribe to deliveries on a named stream channel. |\n| onDispatchSuppressed | `(info: DispatchSuppressedInfo) => void` | Optional structured observability for the runtime's two dispatch- suppression invariants — the task-scoped duplicate backstop (`reason: 'duplicate-dispatch'`, fired by `useAction`) and the render-lifetime one-shot guard (`reason: 'one-shot-spent'`, fired by the config's own `dispatch` when a declared `oneShot` action is gestured a second time, ggui#1108). Both fire ALONGSIDE the always-on `console.warn`; neither reaches the agent.  Reachability constraint: the first-party renderers do NOT set this field — `buildRootWireConfig` (`@ggui-ai/iframe-runtime`) and `<GguiRender>`'s internal config both omit it. It fires only when a host hand-builds a complete `WireConfig` (or passes `onDispatchSuppressed` to `buildWireConfig`). On every first-party render path the `console.warn` is the sole suppression signal — which is what the `oneShot` contract requires as its minimum trace. |\n";