@ggui-ai/ui-gen 0.24.0 → 0.25.0

package/src/evaluation/visual-evaluator.ts

@@ -13,8 +13,16 @@
 
 import { buildStylingProfileJudgeBlock } from '../boilerplate/styling-profile.js';
 import type { GenerationProfileInput } from '../boilerplate/styling-profile.js';
+import type { CriteriaAnswer } from './types.js';
+import type { CriteriaBlock, CriteriaContext, CriteriaRollup } from './types-public.js';
+import type { CriteriaBank } from './criteria/bank.js';
+import type { JsonObject } from '@ggui-ai/protocol';
+import type { CriteriaContextInput } from './criteria/context.js';
+import { selectCriteria } from './criteria/select.js';
+import { buildCriteriaJudgeBlock, resolveCriteriaBlock } from './criteria/resolve.js';
 import { build } from 'esbuild';
-import { fillFitRule, getCssTokens } from '@ggui-ai/design/rendering';
+import { EXPANDED_FRAME, expandedFramePanelRule, expandedFrameScrimDecls, fillFitRule, getCssTokens } from '@ggui-ai/design/rendering';
+import { readInkExtent, type InkExtent } from './ink-extent.js';
 import { judgeDesignIdentity, type JudgeDesignIdentity } from './design-identity.js';
 import { resolve, dirname } from 'path';
 import { fileURLToPath } from 'url';
@@ -24,7 +32,7 @@ import { createHash } from 'node:crypto';
 import { tmpdir } from 'os';
 import { createVisionAgent, type AgentConfig } from '../harness/llm-router';
 import type { EvaluationResult, EvaluationIssue, DimensionScores } from './types';
-import type { CanvasJudgeRecord, CanvasVisualSummary, EvalIssue, VisualCoverage, VisualEvalSummary, VisualFitStamp } from './types-public.js';
+import type { CanvasHostPresentation, CanvasJudgeRecord, CanvasPresentationOutcome, CanvasVisualSummary, EvalIssue, HostInlineFrame, HostPresentationIgnoredReason, VisualCoverage, VisualEvalSummary, VisualFitStamp } from './types-public.js';
 import type { LaunchOptions } from 'puppeteer-core';
 import { CANVAS_VIEWPORTS, displayModeForCanvas, type CanvasClass, type CanvasViewport } from '../design-mode.js';
 
@@ -69,6 +77,14 @@ export interface VisualEvalConfig {
    * `viewport` all carry that same integer box.
    */
   canvasViewports?: Partial<Readonly<Record<CanvasClass, CanvasViewport>>>;
+  /**
+   * ggui#1492 — how a host presents each canvas, as data the caller supplies (a lane that knows its host). Keyed by
+   * canvas; a canvas without an entry is judged exactly as before (the generic stand-in round the inline card, the
+   * scrim under a panel). The box stays in {@link canvasViewports}. An entry this judge cannot use (a colour that is
+   * not `#rrggbb`, a number out of range, a frame on a canvas that is not the inline card) is ignored for its canvas,
+   * said once in the log, never partly applied.
+   */
+  hostPresentations?: Partial<Readonly<Record<CanvasClass, CanvasHostPresentation>>>;
   /**
    * Optional provider-routing override — see
    * `AgentConfig.routeOverride`. Threaded onto the agent this
@@ -102,6 +118,15 @@ export interface VisualEvalConfig {
   onRetry?: AgentConfig['onRetry'];
 }
 
+/**
+ * ggui#1436 — what the report-only criteria call spent. Kept APART from the scoring calls' `inputTokens` /
+ * `outputTokens`: those price the judgement a caller may meter, and the criteria call is a measurement beside it.
+ */
+export interface CriteriaCallTokens {
+  readonly inputTokens: number;
+  readonly outputTokens: number;
+}
+
 /** One canvas's verdict — screenshot + judge score at that class's viewport. */
 export interface CanvasVisualResult {
   canvas: CanvasClass;
@@ -121,35 +146,56 @@ export interface CanvasVisualResult {
   /** `contentHeight > viewport.height` — a measurement; what it MEANS is {@link canvasFitPolicy}'s. */
   overflow: boolean;
   /** How `score` was reached — always present (ggui#1072). */
+  /**
+   * ggui#1120 — how far down the capture anything was painted (the last inked row over the measured
+   * region's height, read against the capture's dominant colour, inside a drawn panel's chrome); `0`
+   * is the blank the judge fails, `null` an unreadable capture.
+   */
+  inkRatio: number | null;
   judge: CanvasJudgeRecord;
   /** How the judge composed the mount (ggui#1100): `'fill'` on every fullscreen canvas, absent on the inline card. */
   fit?: 'fill';
   /** ggui#1195 — `true` when the order DECLARED this canvas's box (`config.canvasViewports` carried an entry), whatever its value. */
   declared?: true;
+  /** ggui#1436 — the typed criteria block, when a bank was configured. */
+  criteria?: CriteriaBlock;
+  /** ggui#1436 — the criteria call's own spend, when one was asked and answered; never inside the canvas's scoring tokens. */
+  criteriaTokens?: CriteriaCallTokens;
+  /** ggui#1492 — what the judge did with this canvas's host presentation (drawn, or ignored and why), when one was supplied. */
+  presentation?: CanvasPresentationOutcome;
 }
 
 /** How a canvas is captured for the judge and what an overflow means there (ggui#1027). */
-export type CaptureMode = 'viewport' | 'full-page';
+export type CaptureMode = 'viewport' | 'full-page' | 'natural';
 export interface CanvasFitPolicy {
-  /** `viewport` = the judge sees the box the user sees; `full-page` = the whole scrolled document. */
+  /**
+   * `viewport` = the whole box; `full-page` = the whole scrolled document; `natural` (ggui#1475) = the
+   * card at its OWN height, clipped to its extent and capped at the box — the inline card a host sizes
+   * to its content, on the host's ground ({@link JUDGE_GROUND_MARGIN_PX}).
+   */
   readonly capture: CaptureMode;
   /** The verdict an overflow earns on this canvas. */
   readonly overflow: 'fail' | 'warn' | 'none';
 }
 
 /**
- * The inline chat card is a BOX — the bubble bounds the component and it
- * does not scroll — so the judge captures the viewport (a 1289 px hello on
- * a 640 px card was scored 86 from a full-page capture that showed the
- * judge what no user sees) and an overflow is a critical layout issue that
- * fails the canvas. A phone's first screen may scroll, so the overflow is
- * reported as a major issue and the score stands. Pages (`md`/`lg`/`xl`)
- * scroll by design: measured, never judged.
+ * The inline chat card takes its NATURAL height under a ceiling (ggui#1475):
+ * an MCP Apps host sizes the inline frame to the card's content
+ * (`ui/notifications/size-changed`, auto-resize) up to its maximum, so the
+ * visitor sees the card and nothing under it. The judge captures exactly
+ * that — the card's own extent on the host's ground, capped at the box — and
+ * never the box's remainder (a fixed 640 px capture scored every hello
+ * against a void no visitor sees). The box stays the ceiling: content taller
+ * than it is a critical layout issue that fails the canvas (a 1289 px hello
+ * on a 640 px card was scored 86 from a full-page capture that showed the
+ * judge what no user sees). A phone's first screen may scroll, so the
+ * overflow is reported as a major issue and the score stands. Pages
+ * (`md`/`lg`/`xl`) scroll by design: measured, never judged.
  */
 export function canvasFitPolicy(canvas: CanvasClass): CanvasFitPolicy {
   switch (canvas) {
     case 'xs-chat-card':
-      return { capture: 'viewport', overflow: 'fail' };
+      return { capture: 'natural', overflow: 'fail' };
     case 'mobile-fullscreen-small':
       return { capture: 'full-page', overflow: 'warn' };
     default:
@@ -162,6 +208,15 @@ export function canvasFitPolicy(canvas: CanvasClass): CanvasFitPolicy {
  * `fillFitRule` targets — the judge's counterpart of the runtime's mount list.
  */
 export const JUDGE_SCOPE_CLASS = 'ggui-judge-scope';
+/** The panel the judge draws round a fill canvas's scope on its stand-in host page (ggui#1083 cut 3) — see {@link canvasChrome}. */
+export const JUDGE_PANEL_CLASS = 'ggui-judge-panel';
+/**
+ * How far in from a panelled page's edges the ink is read (ggui#1120): past the panel's gap, its
+ * largest rounded corner (the `round` bucket, 24 px — the scrim shows through the corner) and its
+ * 1 px hairline, so the host's chrome never counts as paint. The card's own inset is 16 px, so the
+ * band skipped inside the card is 25 px of a canvas — reported ratios are over the region.
+ */
+export const JUDGE_INK_INSET_PX = EXPANDED_FRAME.insetPx + 24 + 1;
 
 /**
  * How the judge composes a canvas (ggui#1100): the served runtime stretches
@@ -173,6 +228,115 @@ export const JUDGE_SCOPE_CLASS = 'ggui-judge-scope';
 export function canvasFit(canvas: CanvasClass): 'fill' | undefined {
   return displayModeForCanvas(canvas) === 'fullscreen' ? 'fill' : undefined;
 }
+/**
+ * What the judge's stand-in host draws round a canvas: the embedding shell's floating panel on its
+ * scrim (a fill canvas, md and up), the host's ground round the inline card (`ground`, ggui#1475), or
+ * nothing (the phone, edge to edge).
+ */
+export type CanvasChrome = 'panel' | 'ground' | undefined;
+/**
+ * The host ground round a naturally-captured inline card (ggui#1475): the card is mounted this far in
+ * from the page's edges and captured with this margin, so its edge and radius are read against the
+ * host surface — the page's scrim ground, never the card's own. The design's one gap (the panel's).
+ */
+export const JUDGE_GROUND_MARGIN_PX = EXPANDED_FRAME.insetPx;
+/** The class the judge page wraps a naturally-captured card's mount in — its padding is the ground margin. */
+export const JUDGE_GROUND_CLASS = 'ggui-judge-ground';
+/**
+ * The host's frame round the inline card (ggui#1475). An inline card draws no chrome of its own (the
+ * chat layout tells it the host draws it), so without a frame it sits transparent on the page ground
+ * and has no edge to read. The judge draws a GENERIC stand-in for the host's frame, built from the
+ * card's own theme: its container surface, a 1 px ring of its ink at 8 %, a 16 px radius, and
+ * overflow hidden. It is a stand-in, and the frame line says so: a host's exact frame arrives as data.
+ */
+export const JUDGE_INLINE_FRAME_CLASS = 'ggui-judge-inline-frame';
+export const JUDGE_INLINE_FRAME_BORDER_PX = 1;
+export const JUDGE_INLINE_FRAME_RADIUS_PX = 16;
+/** What the inline card's page adds on each side of the card: the ground margin plus the frame's border. */
+export const JUDGE_INLINE_PAD_PX = JUDGE_GROUND_MARGIN_PX + JUDGE_INLINE_FRAME_BORDER_PX;
+/** How far in the inline card's ink is read: past the margin, the frame's ring and its rounded corner, so the host's frame never counts as paint. */
+export const JUDGE_INLINE_INK_INSET_PX = JUDGE_INLINE_PAD_PX + JUDGE_INLINE_FRAME_RADIUS_PX;
+
+/**
+ * The bounds a host frame must meet to be drawn (ggui#1492), exported so a lane's reader applies exactly the frames
+ * this judge draws: an entry the reader accepts and the judge ignores would be echoed as applied while never drawn.
+ */
+export const HOST_COLOUR_PATTERN = /^#[0-9a-f]{6}$/;
+export const HOST_FRAME_BOUNDS = {
+  ringWidthPx: { min: 0, max: 8 },
+  ringAlpha: { min: 0, max: 1 },
+  radiusPx: { min: 0, max: 64 },
+  minHeightPx: { min: 0, max: 2560 },
+} as const;
+/**
+ * ggui#1492 — what this judge will do with a canvas's host presentation: draw it, or ignore it with the lane
+ * reader's own reason code. `undefined` when none was supplied. Every string drawn reaches the page's CSS, so a
+ * colour must be `#rrggbb` and a number must sit inside {@link HOST_FRAME_BOUNDS}; an inline card's room lives on
+ * its frame, so a top-level `ground` there is refused rather than silently unused.
+ */
+function resolvePresentation(canvas: CanvasClass, p: CanvasHostPresentation | undefined): CanvasPresentationOutcome | undefined {
+  if (p === undefined) return undefined;
+  const ignored = (reason: HostPresentationIgnoredReason, why: string): CanvasPresentationOutcome => {
+    console.warn(`[visual-eval] host presentation for ${canvas} ignored (${reason}): ${why}`);
+    return { status: 'ignored', reason };
+  };
+  const inline = canvasFitPolicy(canvas).capture === 'natural';
+  if (typeof p.label !== 'string' || p.label.length === 0) return ignored('label_missing', 'no label');
+  if (p.ground !== undefined && !HOST_COLOUR_PATTERN.test(p.ground)) return ignored('color_not_hex', 'ground is not #rrggbb');
+  if (inline && p.ground !== undefined) return ignored('ground_on_inline', "the inline card's room is its frame's ground");
+  const f = p.frame;
+  if (f !== undefined) {
+    if (!inline) return ignored('frame_off_inline', 'a frame on a canvas that is not the inline card');
+    if (![f.surface, f.ground, f.ring.color].every((c) => HOST_COLOUR_PATTERN.test(c))) return ignored('color_not_hex', 'a frame colour is not #rrggbb');
+    const B = HOST_FRAME_BOUNDS;
+    const inRange = (n: number, b: { readonly min: number; readonly max: number }): boolean => Number.isFinite(n) && n >= b.min && n <= b.max;
+    if (!inRange(f.ring.widthPx, B.ringWidthPx) || !inRange(f.ring.alpha, B.ringAlpha) || !inRange(f.radiusPx, B.radiusPx)) return ignored('frame_malformed', 'a frame number out of range');
+    if (f.minHeightPx !== undefined && !inRange(f.minHeightPx, B.minHeightPx)) return ignored('frame_malformed', 'minHeightPx out of range');
+  }
+  return { status: 'applied', applied: p };
+}
+/** What the inline card's page adds per side, where its ink is read from, and the host's floor — from the host frame when given, else the stand-in's. */
+interface InlineGeometry {
+  readonly padPx: number;
+  readonly inkInsetPx: number;
+  readonly floorPx: number | undefined;
+}
+function inlineGeometry(frame: HostInlineFrame | undefined): InlineGeometry {
+  if (frame === undefined) return { padPx: JUDGE_INLINE_PAD_PX, inkInsetPx: JUDGE_INLINE_INK_INSET_PX, floorPx: undefined };
+  const padPx = JUDGE_GROUND_MARGIN_PX + frame.ring.widthPx;
+  return { padPx, inkInsetPx: padPx + frame.radiusPx, floorPx: frame.minHeightPx };
+}
+/**
+ * The host stand-in round a fill canvas (ggui#1083 cut 3, ggui#1067 §5): the embedding shell floats
+ * the card in a panel on its scrim — a hairline, the theme's `xl` radius, `shadow-sm`, a 16 px gap —
+ * only when expanded at ≥ 601 px; below that the card owns the phone edge to edge. So the panel
+ * canvases are the fill canvases from `md` up (the shell's panel reaches `lg` / `xl` on wide windows)
+ * and `mobile-fullscreen-small` carries no chrome. The panel is the design's ONE definition
+ * (`expandedFramePanelRule`), never a second drawing, and the judge pads its window by the panel's
+ * gap so the CARD's box stays the canvas box ({@link judgeWindow}): the frame the founder approves
+ * carries the chrome the visitor sees, and the card is measured where it was before.
+ */
+export function canvasChrome(canvas: CanvasClass): CanvasChrome {
+  if (canvasFitPolicy(canvas).capture === 'natural') return 'ground';
+  return canvasFit(canvas) === 'fill' && canvas !== 'mobile-fullscreen-small' ? 'panel' : undefined;
+}
+/** The browser window for a canvas: the canvas box, plus the chrome's gap on every side when the judge draws one (the panel's, or the host ground's). */
+export function judgeWindow(viewport: CanvasViewport, chrome: CanvasChrome, inlinePadPx: number = JUDGE_INLINE_PAD_PX): CanvasViewport {
+  if (chrome === undefined) return viewport;
+  const gap = 2 * (chrome === 'ground' ? inlinePadPx : EXPANDED_FRAME.insetPx);
+  return { width: viewport.width + gap, height: viewport.height + gap };
+}
+/**
+ * The card's height on a panelled page: the panel grows with the card and carries the gap above and
+ * below it. A document shorter than the gap laid out no panel (the panel alone is a viewport tall), so
+ * there is no reading — `null`, never a negative height.
+ */
+function cardHeight(documentHeight: number | null, chrome: CanvasChrome): number | null {
+  // A natural capture measures the card itself (the mount's extent), never the document.
+  if (documentHeight === null || chrome === undefined || chrome === 'ground') return documentHeight;
+  const gap = 2 * EXPANDED_FRAME.insetPx;
+  return documentHeight < gap ? null : documentHeight - gap;
+}
 
 /**
  * The box a browser can be asked for: whole CSS px. CDP's
@@ -218,6 +382,41 @@ export function canvasOverflowIssue(
   };
 }
 
+/** ggui#1475 — the horizontal twin of {@link canvasOverflowIssue}: content wider than the card, which its frame clips out of the capture. */
+export function canvasOverflowXIssue(
+  canvas: CanvasClass,
+  viewport: CanvasViewport,
+  hiddenPx: number,
+  verdict: 'fail' | 'warn',
+): EvaluationIssue {
+  return {
+    dimension: 'canvas-overflow-x',
+    severity: verdict === 'fail' ? 'critical' : 'major',
+    description:
+      `Content runs ${hiddenPx}px past the ${canvas} card's ${viewport.width}px width — the card's frame clips it, ` +
+      'so a visitor sees a cut-off row or a sideways scroll.',
+    fix:
+      'Keep every row within the card: wrap long text (overflow-wrap: anywhere), let a wide table or code block scroll ' +
+      'inside its own container, and give no child a fixed width wider than the card.',
+  };
+}
+
+/** ggui#1120 — the deterministic blank: the capture is one flat colour, so the component mounted and painted nothing. */
+export function canvasBlankIssue(canvas: CanvasClass, viewport: CanvasViewport): EvaluationIssue {
+  const classBox = CANVAS_VIEWPORTS[canvas];
+  const box = isDeclaredViewport(canvas, viewport)
+    ? `declared ${viewport.width}×${viewport.height}; class box ${classBox.width}×${classBox.height}`
+    : `${viewport.width}×${viewport.height}`;
+  return {
+    dimension: 'canvas-blank',
+    severity: 'critical',
+    description: `Nothing painted on the ${canvas} canvas (${box}): the capture is one flat colour — the component mounted and rendered no pixels.`,
+    fix:
+      'Return and paint the component tree: a root that renders nothing is a blank, not an empty state. Check that the ' +
+      'default export returns its JSX, that no early return yields null on the sample props, and that the first paint ' +
+      'shows visible content.',
+  };
+}
 /**
  * `runVisualEvaluation`'s result. Identical to `EvaluationResult` when
  * `config.canvases` is unset; with canvases set, `canvases` holds the
@@ -226,6 +425,11 @@ export function canvasOverflowIssue(
  */
 export interface VisualEvaluationResult extends EvaluationResult {
   canvases?: CanvasVisualResult[];
+  /**
+   * ggui#1436 — the criteria calls' spend across canvases, when any was asked and answered. `inputTokens` /
+   * `outputTokens` stay the SCORING calls' alone, so a cost read off them never includes the report-only block.
+   */
+  criteriaTokens?: CriteriaCallTokens;
   /** The design tree the judge painted with (ggui#1042) — present on every per-canvas judgement. */
   design?: JudgeDesignIdentity;
   /** The mode `cssTokens` were composed in, when the caller said (ggui#1076). */
@@ -247,6 +451,8 @@ export interface VisualEvalContext {
   cssTokens?: string;
   /** The app's generation profile (#991) — judged relative to, never against. */
   profile?: GenerationProfileInput;
+  /** ggui#1436 — a criteria bank and the card's context; the judge selects per canvas and answers report-only. */
+  criteria?: { readonly bank: CriteriaBank; readonly context: CriteriaContextInput };
 }
 
 // ---------------------------------------------------------------------------
@@ -447,11 +653,24 @@ try {
   }
 }
 
+/** The inline card's frame: the host's, as data, when given; else the generic stand-in built from the card's own tokens. */
+function inlineFrameDecls(frame: HostInlineFrame | undefined): string {
+  if (frame === undefined) {
+    return `background: var(--ggui-color-container); border: ${JUDGE_INLINE_FRAME_BORDER_PX}px solid color-mix(in srgb, var(--ggui-color-onContainer) 8%, transparent); border-radius: ${JUDGE_INLINE_FRAME_RADIUS_PX}px; overflow: hidden;`;
+  }
+  const alphaPct = Math.round(frame.ring.alpha * 1000) / 10;
+  return `background: ${frame.surface}; border: ${frame.ring.widthPx}px solid color-mix(in srgb, ${frame.ring.color} ${alphaPct}%, transparent); border-radius: ${frame.radiusPx}px; overflow: hidden;`;
+}
+
 function buildRenderHTML(
   bundledCode: string,
   cssTokens?: string,
   fit?: 'fill',
+  chrome?: CanvasChrome,
+  presentation?: CanvasHostPresentation,
 ): string {
+  if (chrome === 'panel' && fit !== 'fill') throw new Error("the judge's panel frames a fill canvas only (ggui#1083 cut 3)");
+  if (chrome === 'ground' && fit === 'fill') throw new Error("the host ground frames an inline card only — a fill canvas has no natural height (ggui#1475)");
   // Default to the design tokens production's no-theme branch injects
   // (getCssTokens → default theme, light) — ggui#613: under the s4
   // fallback ban the generated component's `var(--ggui-*)` references
@@ -473,15 +692,16 @@ function buildRenderHTML(
       /* ggui#1083 — the host stand-in (neutral-50) under the theme's scrim (its tint at
          its opacity): the ground a frosted host puts under the card, so the judge scores
          the card where the visitor sees it. */
-      background: color-mix(in oklch, var(--ggui-scrim-tint, var(--ggui-color-ground, #ffffff)) calc(var(--ggui-scrim-opacity, 0.45) * 100%), var(--ggui-color-neutral-50, #ffffff));
+      ${presentation?.frame !== undefined ? `background: ${presentation.frame.ground};` : presentation?.ground !== undefined ? `background: ${presentation.ground};` : expandedFrameScrimDecls()}
       color: var(--ggui-color-neutral-900, #111827);
     }
     .error { color: #dc2626; padding: 16px; font-family: monospace; white-space: pre-wrap; }
-    ${fit === 'fill' ? fillFitRule(JUDGE_SCOPE_CLASS) : ''}
+    ${fit === 'fill' ? fillFitRule(JUDGE_SCOPE_CLASS) + (chrome === 'panel' ? expandedFramePanelRule(JUDGE_PANEL_CLASS, JUDGE_SCOPE_CLASS) : '') : ''}
+    ${chrome === 'ground' ? `.${JUDGE_GROUND_CLASS} { padding: ${JUDGE_GROUND_MARGIN_PX}px; } .${JUDGE_INLINE_FRAME_CLASS} { ${inlineFrameDecls(presentation?.frame)} }` : ''}
   </style>
 </head>
 <body>
-  <div id="root"${fit === 'fill' ? ` class="${JUDGE_SCOPE_CLASS}"` : ''}></div>
+  ${chrome === 'panel' ? `<div class="${JUDGE_PANEL_CLASS}">` : chrome === 'ground' ? `<div class="${JUDGE_GROUND_CLASS}"><div class="${JUDGE_INLINE_FRAME_CLASS}">` : ''}<div id="root"${fit === 'fill' ? ` class="${JUDGE_SCOPE_CLASS}"` : ''}></div>${chrome === 'panel' ? '</div>' : chrome === 'ground' ? '</div></div>' : ''}
   <script type="importmap">
   {
     "imports": {
@@ -503,6 +723,14 @@ ${bundledCode}
 // Screenshot capture (optional puppeteer dependency)
 // ---------------------------------------------------------------------------
 
+/** A screenshot's region in page px (puppeteer's `clip`). */
+export interface ScreenshotClip {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}
+
 /** The page surface the capture uses — a structural subset of puppeteer's `Page`. */
 export interface ScreenshotPage {
   setContent(html: string, options: { waitUntil: 'load'; timeout: number }): Promise<void>;
@@ -510,7 +738,7 @@ export interface ScreenshotPage {
   waitForSelector(selector: string, options: { timeout: number }): Promise<unknown>;
   /** Evaluates a JS expression in the page and returns its serialised value — the fit measurement (ggui#1027). */
   evaluate(expression: string): Promise<unknown>;
-  screenshot(options: { type: 'png'; fullPage: boolean }): Promise<Uint8Array>;
+  screenshot(options: { type: 'png'; fullPage: boolean; clip?: ScreenshotClip }): Promise<Uint8Array>;
 }
 
 /** The browser surface the capture uses — a structural subset of puppeteer's `Browser`. */
@@ -603,16 +831,58 @@ export interface ScreenshotAttempt {
   readonly reason?: string;
   /** The document's scroll height at the viewport (ggui#1027); `null` when unmeasurable. */
   readonly contentHeight: number | null;
+  /** ggui#1475 — a natural capture's horizontal overflow: how many px the card's content runs past its width; absent on every other capture. */
+  readonly overflowX?: number | null;
 }
 
 /** The expression the fit measurement evaluates in the page — the taller of the two scroll heights. */
 export const CONTENT_HEIGHT_EXPRESSION =
   'Math.max(document.documentElement.scrollHeight, document.body ? document.body.scrollHeight : 0)';
 
-/** Measure the rendered document's height; a failed measurement is reported, never a failed capture. */
-async function measureContentHeight(page: ScreenshotPage): Promise<number | null> {
+/**
+ * ggui#1475 — the natural capture's measurement: the card's height as the host is told it. The MCP
+ * Apps SDK's size-changed notification (the report an auto-resizing host sizes the inline frame by)
+ * reads the document at `height: max-content` and restores the style; the judge reads the same
+ * quantity, minus what its page adds on both sides (the ground margin and the host frame's border), so content outside the mount (a
+ * portal into body) counts here exactly as it counts for the host. The document's scroll height
+ * could not be used: it is floored at the viewport by definition, so it sees an overflow but never
+ * a card shorter than its box.
+ */
+export function cardHeightExpression(padPx: number): string {
+  return (
+    "(() => { const el = document.documentElement; const prev = el.style.height; el.style.height = 'max-content'; " +
+    `const h = Math.ceil(el.getBoundingClientRect().height); el.style.height = prev; return h - ${2 * padPx}; })()`
+  );
+}
+/** The stand-in page's card height ({@link cardHeightExpression} at the stand-in's pad). */
+export const CARD_HEIGHT_EXPRESSION = cardHeightExpression(JUDGE_INLINE_PAD_PX);
+
+/**
+ * ggui#1475 — the inline card's horizontal overflow: how far its content runs past the card's width. The host's
+ * frame (and the judge's stand-in) clips at the card's edge, so the capture cannot show it, while a visitor's frame
+ * scrolls it sideways: only a measurement carries it.
+ */
+/** The sideways reading layout rounding alone can produce (ggui#1475): `scrollWidth` and `clientWidth` are integers. */
+export const OVERFLOW_X_ROUNDING_PX = 1;
+export const CARD_OVERFLOW_X_EXPRESSION =
+  "(() => { const r = document.getElementById('root'); return r ? Math.max(0, Math.ceil(r.scrollWidth - r.clientWidth)) : null; })()";
+
+/**
+ * The natural capture's region: the card on the host ground, the ground margin on every side, the
+ * card's height capped at the box (content past it is the overflow the fit verdict reads). At least
+ * one row of card is kept, so a card that painted nothing is still read — as a blank, never as an
+ * unreadable capture.
+ */
+export function naturalClip(window: { width: number; height: number }, cardHeightPx: number, padPx: number = JUDGE_INLINE_PAD_PX): ScreenshotClip {
+  const m = padPx;
+  const box = window.height - 2 * m;
+  return { x: 0, y: 0, width: window.width, height: Math.max(1, Math.min(Math.ceil(cardHeightPx), box)) + 2 * m };
+}
+
+/** Measure the rendered document's height (or the card's, for a natural capture); a failed measurement is reported, never a failed capture. */
+async function measureContentHeight(page: ScreenshotPage, expression: string = CONTENT_HEIGHT_EXPRESSION): Promise<number | null> {
   try {
-    const h = await page.evaluate(CONTENT_HEIGHT_EXPRESSION);
+    const h = await page.evaluate(expression);
     return typeof h === 'number' && Number.isFinite(h) ? Math.round(h) : null;
   } catch (e) {
     console.warn(`[visual-eval] content height unavailable: ${e instanceof Error ? e.message : String(e)}`);
@@ -620,11 +890,18 @@ async function measureContentHeight(page: ScreenshotPage): Promise<number | null
   }
 }
 
+/** ggui#1492 — a natural capture's geometry: the page's pad per side, and the host's floor when it has one. */
+export interface NaturalCaptureOptions {
+  readonly padPx: number;
+  readonly floorPx?: number;
+}
+
 export async function captureScreenshotDetailed(
   html: string,
   viewport: { width: number; height: number } = DEFAULT_SCREENSHOT_VIEWPORT,
   deps: ScreenshotDeps = {},
   capture: CaptureMode = 'full-page',
+  natural: NaturalCaptureOptions = { padPx: JUDGE_INLINE_PAD_PX },
 ): Promise<ScreenshotAttempt> {
   try {
     const launchOptions = await resolveLaunchOptions(viewport, deps);
@@ -639,6 +916,21 @@ export async function captureScreenshotDetailed(
       await page.waitForSelector('#root > *', { timeout: 10000 }).catch(() => {});
       // Wait a bit for CSS/fonts to settle
       await new Promise((r) => setTimeout(r, deps.settleMs ?? 1000));
+      if (capture === 'natural') {
+        // ggui#1475 — the inline card at its natural height: the capture is the card's extent on the host ground.
+        const cardHeightPx = await measureContentHeight(page, natural.padPx === JUDGE_INLINE_PAD_PX ? CARD_HEIGHT_EXPRESSION : cardHeightExpression(natural.padPx));
+        const overflowX = await measureContentHeight(page, CARD_OVERFLOW_X_EXPRESSION);
+        // ggui#1492 — the host's floor: measured AFTER the card (its height stays the card's own), then applied to the
+        // frame so the capture shows what a visitor sees under a short card — the frame's surface, as void.
+        const floorPx = natural.floorPx;
+        if (floorPx !== undefined && cardHeightPx !== null && cardHeightPx < floorPx) {
+          await page.evaluate(`(() => { const f = document.querySelector('.${JUDGE_INLINE_FRAME_CLASS}'); if (f) f.style.minHeight = '${floorPx}px'; })()`);
+        }
+        const framed = cardHeightPx === null ? viewport.height - 2 * natural.padPx : floorPx !== undefined ? Math.max(cardHeightPx, floorPx) : cardHeightPx;
+        const clip = naturalClip(viewport, framed, natural.padPx);
+        const screenshot = await page.screenshot({ type: 'png', fullPage: false, clip });
+        return { png: Buffer.from(screenshot), contentHeight: cardHeightPx, overflowX };
+      }
       const contentHeight = await measureContentHeight(page);
       const screenshot = await page.screenshot({ type: 'png', fullPage: capture === 'full-page' });
       return { png: Buffer.from(screenshot), contentHeight };
@@ -741,10 +1033,14 @@ async function callMultimodalLLM(
   screenshot: Buffer,
   originalPrompt: string,
   profileBlock = '',
+  criteriaBlock = '',
 ) {
+  // ggui#1436 — the criteria block rides in the USER turn after the profile block, so the
+  // system prompt (and its digest pin) never moves; the block's digest is the set id.
   const userPrompt =
     `## Original Request\n${originalPrompt}\n\n` +
     (profileBlock.length > 0 ? `${profileBlock}\n\n` : '') +
+    (criteriaBlock.length > 0 ? `${criteriaBlock}\n\n` : '') +
     'Evaluate the screenshot of the generated component.';
   const agent = createVisionAgent({
     provider: config.provider === 'claude' ? 'anthropic' : config.provider,
@@ -802,9 +1098,34 @@ interface CanvasFrame {
   readonly viewport: CanvasViewport;
   readonly policy: CanvasFitPolicy;
   readonly fit: 'fill' | undefined;
+  /** The host stand-in drawn round the scope (ggui#1083 cut 3) — the window is padded by its gap; `viewport` stays the card's box. */
+  readonly chrome: CanvasChrome;
   /** `true` when `canvasViewports` carried an entry for this canvas, whatever its value. */
   readonly declared: boolean;
   readonly attempt: ScreenshotAttempt;
+  /** The capture's ink extent (ggui#1120); `null` when there is no capture or it could not be read. */
+  readonly ink: InkExtent | null;
+  /** ggui#1492 — what the judge did with this canvas's host presentation, when the caller supplied one. */
+  readonly presentation?: CanvasPresentationOutcome;
+}
+/** The capture's ink extent (ggui#1120), read inside a drawn panel's chrome; an unreadable capture is reported, never blank. */
+function readInk(png: Buffer | null, chrome: CanvasChrome, canvas: CanvasClass, inlineInkInsetPx: number = JUDGE_INLINE_INK_INSET_PX): InkExtent | null {
+  if (png === null) return null;
+  const ink = readInkExtent(png, chrome === 'panel' ? JUDGE_INK_INSET_PX : chrome === 'ground' ? inlineInkInsetPx : 0);
+  if ('reason' in ink) {
+    console.warn(`[visual-eval] ink extent unreadable at canvas ${canvas}: ${ink.reason}`);
+    return null;
+  }
+  return ink;
+}
+/** The deterministic blank verdict (ggui#1120): an issue when the frame read no ink at all; `null` otherwise, an unreadable capture included. */
+function blankVerdict(canvas: CanvasClass, frame: CanvasFrame): EvaluationIssue | null {
+  // ggui#1475 — a naturally-captured card that measured no height painted nothing: its capture is only the host's frame,
+  // which the ink reading skips by design, so the blank is read from the measurement, never mistaken for unreadable.
+  if (frame.chrome === 'ground' && frame.attempt.contentHeight !== null && frame.attempt.contentHeight <= 0) {
+    return canvasBlankIssue(canvas, frame.viewport);
+  }
+  return frame.ink !== null && frame.ink.lastInkRow === null ? canvasBlankIssue(canvas, frame.viewport) : null;
 }
 
 async function frameCanvas(
@@ -814,14 +1135,29 @@ async function frameCanvas(
   canvas: CanvasClass,
   canvasViewports: VisualEvalConfig['canvasViewports'],
   deps: ScreenshotDeps,
+  hostPresentations?: VisualEvalConfig['hostPresentations'],
 ): Promise<CanvasFrame> {
   const declaredBox = canvasViewports?.[canvas];
   const viewport = declaredBox !== undefined ? integerBox(declaredBox) : CANVAS_VIEWPORTS[canvas];
   const policy = canvasFitPolicy(canvas);
   const fit = canvasFit(canvas);
-  const canvasHtml = fit !== undefined ? buildRenderHTML(bundledCode, context.cssTokens, fit) : html;
-  const attempt = await captureScreenshotDetailed(canvasHtml, viewport, deps, policy.capture);
-  return { viewport, policy, fit, declared: declaredBox !== undefined, attempt };
+  const chrome = canvasChrome(canvas);
+  const outcome = resolvePresentation(canvas, hostPresentations?.[canvas]);
+  const presentation = outcome?.status === 'applied' ? outcome.applied : undefined;
+  const geometry = inlineGeometry(presentation?.frame);
+  const canvasHtml =
+    fit !== undefined || chrome !== undefined ? buildRenderHTML(bundledCode, context.cssTokens, fit, chrome, presentation) : html;
+  const captured = await captureScreenshotDetailed(canvasHtml, judgeWindow(viewport, chrome, geometry.padPx), deps, policy.capture, {
+    padPx: geometry.padPx,
+    ...(geometry.floorPx !== undefined ? { floorPx: geometry.floorPx } : {}),
+  });
+  // ggui#1083 cut 3 — on a panelled page the document is the panel plus its gap; every verdict reads the CARD's height.
+  const attempt: ScreenshotAttempt = { ...captured, contentHeight: cardHeight(captured.contentHeight, chrome) };
+  return {
+    viewport, policy, fit, chrome, declared: declaredBox !== undefined, attempt,
+    ink: readInk(captured.png, chrome, canvas, geometry.inkInsetPx),
+    ...(outcome !== undefined ? { presentation: outcome } : {}),
+  };
 }
 
 /**
@@ -835,11 +1171,61 @@ function fitVerdict(canvas: CanvasClass, frame: CanvasFrame): EvaluationIssue |
   return canvasOverflowIssue(canvas, frame.viewport, contentHeight, frame.policy.overflow);
 }
 
+/**
+ * ggui#1475 — the deterministic horizontal verdict on a natural capture: the card's content runs past its width. It
+ * is judged by the canvas's own fit policy (the inline card: a critical that fails the canvas), in its own dimension,
+ * so the in-loop `[fit]` extension (vertical overflow) is unchanged.
+ */
+function overflowXVerdict(canvas: CanvasClass, frame: CanvasFrame): EvaluationIssue | null {
+  const px = frame.attempt.overflowX;
+  // `scrollWidth` / `clientWidth` are rounded integers: a fractional layout width reads as 1 px past the card with
+  // nothing a visitor could see, so 1 px is rounding and an overflow starts at 2.
+  if (px === undefined || px === null || px <= OVERFLOW_X_ROUNDING_PX || frame.policy.overflow === 'none') return null;
+  return canvasOverflowXIssue(canvas, frame.viewport, px, frame.policy.overflow);
+}
+
 /** One judge call parsed, retried ONCE on a malformed answer (#1017); the FIRST reason is kept verbatim. */
 type JudgedAnswer =
   | { readonly kind: 'ok'; readonly result: EvaluationResult; readonly inputTokens: number; readonly outputTokens: number }
   | { readonly kind: 'unparsable'; readonly reason: string };
 
+/**
+ * ggui#1436 — the criteria are REPORT-ONLY, so they are never asked inside a call whose score binds. The K
+ * scoring calls go out exactly as they did before the block existed (the same user turn, byte for byte); when a
+ * block was selected, the criteria get ONE call of their own on the same frame, run beside them, and that call's
+ * score is discarded. Its spend is reported apart (`criteriaTokens`), never inside the scoring calls' tokens, so a
+ * cost read off the judgement is the judgement's alone. Asked inside the scoring call, the block moved the score it
+ * sat beside — the first release that carried it into a served judge lowered first-attempt scores on the same kind
+ * of card (ggui#1436). One read, not K: the block binds on nothing, and a second K would double its calls.
+ */
+async function judgeFrame(
+  judge: typeof callMultimodalLLM,
+  config: VisualEvalConfig,
+  model: string,
+  png: Buffer,
+  originalPrompt: string,
+  profileBlock: string,
+  canvas: CanvasClass,
+  k: number,
+  criteriaBlock: string,
+): Promise<{ readonly scoring: readonly JudgedAnswer[]; readonly criteria: JudgedAnswer | undefined }> {
+  const [scoring, criteria] = await Promise.all([
+    Promise.all(Array.from({ length: k }, () => judgeAndParse(judge, config, model, png, originalPrompt, profileBlock, canvas))),
+    criteriaBlock.length > 0 ? judgeAndParse(judge, config, model, png, originalPrompt, profileBlock, canvas, criteriaBlock) : undefined,
+  ]);
+  return { scoring, criteria };
+}
+
+/** What the frame's criteria call spent, when it was asked and answered — reported apart from the scoring calls. */
+function criteriaCallTokens(criteria: JudgedAnswer | undefined): CriteriaCallTokens | undefined {
+  return criteria?.kind === 'ok' ? { inputTokens: criteria.inputTokens, outputTokens: criteria.outputTokens } : undefined;
+}
+
+/** The criteria call's answers, as the one read the block resolves; none when it was not asked or did not parse. */
+function criteriaReads(criteria: JudgedAnswer | undefined): CriteriaAnswer[][] {
+  return criteria?.kind === 'ok' ? [criteria.result.criteriaAnswers ?? []] : [];
+}
+
 /** How many vision calls this canvas gets (ggui#1072): `judgeK` when the canvas is sampled, else 1. */
 function judgeCountFor(config: VisualEvalConfig, canvas: CanvasClass): number {
   const k = Math.max(1, Math.floor(config.judgeK ?? 1));
@@ -869,10 +1255,11 @@ async function judgeAndParse(
   originalPrompt: string,
   profileBlock: string,
   canvas?: CanvasClass,
+  criteriaBlock = '',
 ): Promise<JudgedAnswer> {
   let firstReason: string | undefined;
   for (let attempt = 1; attempt <= 2; attempt++) {
-    const response = await judge(config, model, VISUAL_EVAL_PROMPT, screenshot, originalPrompt, profileBlock);
+    const response = await judge(config, model, VISUAL_EVAL_PROMPT, screenshot, originalPrompt, profileBlock, criteriaBlock);
     try {
       const result = parseVisualResponse(response.text, config.passThreshold);
       return { kind: 'ok', result, inputTokens: response.inputTokens, outputTokens: response.outputTokens };
@@ -941,7 +1328,7 @@ export async function runVisualEvaluationDetailed(
     const perCanvas: CanvasVisualResult[] = [];
     const perCanvasResults: EvaluationResult[] = [];
     for (const canvas of config.canvases) {
-      const frame = await frameCanvas(bundledCode, context, html, canvas, config.canvasViewports, deps);
+      const frame = await frameCanvas(bundledCode, context, html, canvas, config.canvasViewports, deps, config.hostPresentations);
       const { viewport, policy, fit, attempt } = frame;
       const screenshot = attempt.png;
       if (!screenshot) {
@@ -952,8 +1339,20 @@ export async function runVisualEvaluationDetailed(
       // ggui#1072: k vision calls on the SAME frame; the decision value is the median.
       const k = judgeCountFor(config, canvas);
       const profileBlock = buildStylingProfileJudgeBlock(context.profile);
-      const answers = await Promise.all(
-        Array.from({ length: k }, () => judgeAndParse(judge, config, model, screenshot, context.originalPrompt, profileBlock, canvas)),
+      // ggui#1436 — the selection is decided BEFORE the judge runs and recorded with the verdict.
+      const criteriaContext: CriteriaContext | undefined =
+        context.criteria !== undefined ? { ...context.criteria.context, canvas } : undefined;
+      const criteriaSelected =
+        context.criteria !== undefined && criteriaContext !== undefined ? selectCriteria(context.criteria.bank, criteriaContext) : undefined;
+      const criteriaBlock =
+        context.criteria !== undefined && criteriaSelected !== undefined
+          ? buildCriteriaJudgeBlock(context.criteria.bank, criteriaSelected, {
+              frame: { canvas, width: viewport.width, height: viewport.height, ...(frame.presentation?.status === 'applied' ? { hostLabel: frame.presentation.applied.label } : {}) },
+              ...(config.sampleProps !== undefined ? { propsJson: JSON.stringify(config.sampleProps) } : {}),
+            })
+          : '';
+      const { scoring: answers, criteria: criteriaAnswer } = await judgeFrame(
+        judge, config, model, screenshot, context.originalPrompt, profileBlock, canvas, k, criteriaBlock,
       );
       const parsed = answers.filter((a): a is Extract<JudgedAnswer, { kind: 'ok' }> => a.kind === 'ok');
       if (parsed.length === 0) {
@@ -969,6 +1368,7 @@ export async function runVisualEvaluationDetailed(
       result.inputTokens = parsed.reduce((sum, a) => sum + a.inputTokens, 0);
       result.outputTokens = parsed.reduce((sum, a) => sum + a.outputTokens, 0);
       const response = { inputTokens: result.inputTokens, outputTokens: result.outputTokens };
+      const criteriaTokens = criteriaCallTokens(criteriaAnswer);
       const judgeRecord: CanvasJudgeRecord = {
         k,
         rule: 'median',
@@ -984,6 +1384,29 @@ export async function runVisualEvaluationDetailed(
         result.issues.push(fitIssue);
         if (policy.overflow === 'fail') result.passed = false;
       }
+      const overflowXIssue = overflowXVerdict(canvas, frame);
+      if (overflowXIssue !== null) {
+        result.issues.push(overflowXIssue);
+        if (policy.overflow === 'fail') result.passed = false;
+      }
+      // The blank verdict (ggui#1120): deterministic, critical on every canvas — a render that painted nothing fails.
+      const blankIssue = blankVerdict(canvas, frame);
+      if (blankIssue !== null) {
+        result.issues.push(blankIssue);
+        result.passed = false;
+      }
+      const inkRatio = frame.ink?.ratio ?? null;
+      // ggui#1436 — the block: the criteria call's read, the instruments' measurements, report-only.
+      const criteria: CriteriaBlock | undefined =
+        context.criteria !== undefined && criteriaContext !== undefined && criteriaSelected !== undefined
+          ? resolveCriteriaBlock({
+              bank: context.criteria.bank,
+              context: criteriaContext,
+              selected: criteriaSelected,
+              answers: criteriaReads(criteriaAnswer),
+              measurements: { overflow, contentHeight, viewportHeight: viewport.height, inkRatio },
+            })
+          : undefined;
       perCanvasResults.push(result);
       perCanvas.push({
         canvas,
@@ -993,14 +1416,20 @@ export async function runVisualEvaluationDetailed(
         screenshotPng: screenshot,
         contentHeight,
         overflow,
+        inkRatio,
         judge: judgeRecord,
         ...(fit !== undefined ? { fit } : {}),
         ...(frame.declared ? { declared: true as const } : {}),
+        ...(criteria !== undefined ? { criteria } : {}),
+        ...(criteriaTokens !== undefined ? { criteriaTokens } : {}),
+        ...(frame.presentation !== undefined ? { presentation: frame.presentation } : {}),
       });
       console.log(
         `[visual-eval] canvas=${canvas} ${viewport.width}×${viewport.height} score=${result.finalScore}${k > 1 ? ` (median of ${judgeRecord.samples.length}/${k}: ${judgeRecord.samples.join(',')} σ=${judgeRecord.sigma})` : ''} ` +
           `${result.passed ? 'pass' : 'FAIL'} | content=${contentHeight ?? '?'}px${overflow ? ` OVERFLOW (${policy.overflow})` : ''} ` +
-          `| in=${response.inputTokens} out=${response.outputTokens}`,
+          `ink=${inkRatio ?? '?'}${blankIssue !== null ? ' BLANK' : ''} ` +
+          `| in=${response.inputTokens} out=${response.outputTokens}` +
+          (criteriaTokens !== undefined ? ` | criteria in=${criteriaTokens.inputTokens} out=${criteriaTokens.outputTokens}` : ''),
       );
     }
     const aggregate = aggregateCanvasResults(perCanvas, perCanvasResults);
@@ -1081,6 +1510,7 @@ function aggregateCanvasResults(
     inputTokens += r.inputTokens ?? 0;
     outputTokens += r.outputTokens ?? 0;
   });
+  const criteriaSpent = perCanvas.flatMap((c) => (c.criteriaTokens !== undefined ? [c.criteriaTokens] : []));
   return {
     passed: perCanvas.every((c) => c.passed),
     finalScore: mean((r) => r.finalScore),
@@ -1089,6 +1519,14 @@ function aggregateCanvasResults(
     ...(critiques.length > 0 ? { critique: critiques.join('\n') } : {}),
     inputTokens,
     outputTokens,
+    ...(criteriaSpent.length > 0
+      ? {
+          criteriaTokens: {
+            inputTokens: criteriaSpent.reduce((sum, t) => sum + t.inputTokens, 0),
+            outputTokens: criteriaSpent.reduce((sum, t) => sum + t.outputTokens, 0),
+          },
+        }
+      : {}),
     canvases: [...perCanvas],
   };
 }
@@ -1103,9 +1541,19 @@ export function summarizeVisualResult(result: VisualEvaluationResult): VisualEva
     passed: c.passed,
     contentHeight: c.contentHeight,
     overflow: c.overflow,
+    inkRatio: c.inkRatio,
     judge: c.judge,
     ...(c.fit !== undefined ? { fit: c.fit } : {}),
+    ...(c.criteria !== undefined ? { criteria: c.criteria } : {}),
+    ...(c.presentation !== undefined ? { presentation: c.presentation } : {}),
   }));
+  // ggui#1436 — the roll-up: ids failed / unreadable across canvases, deduped; a must at n/a is listed, never passed.
+  const blocks = result.canvases.map((c) => c.criteria).filter((b): b is CriteriaBlock => b !== undefined);
+  const idsWhere = (severity: 'must' | 'should', verdict: 'fail' | 'n/a'): string[] => [
+    ...new Set(blocks.flatMap((b) => b.verdicts.filter((v) => v.severity === severity && v.verdict === verdict).map((v) => v.id))),
+  ];
+  const rollup: CriteriaRollup | undefined =
+    blocks.length > 0 ? { mustFailed: idsWhere('must', 'fail'), shouldFailed: idsWhere('should', 'fail'), mustNa: idsWhere('must', 'n/a') } : undefined;
   // ggui#1195 — the fit stamp: the first canvas whose policy FAILS an
   // overflow (the inline card), judged with a measurable height.
   const fitCanvas = result.canvases.find((c) => canvasFitPolicy(c.canvas).overflow === 'fail' && c.contentHeight !== null);
@@ -1126,6 +1574,134 @@ export function summarizeVisualResult(result: VisualEvaluationResult): VisualEva
     ...(fit !== undefined ? { fit } : {}),
     ...(result.design !== undefined ? { design: result.design } : {}),
     ...(result.themeMode !== undefined ? { themeMode: result.themeMode } : {}),
+    ...(rollup !== undefined ? { criteria: rollup } : {}),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// A stored capture, judged (ggui#1438)
+// ---------------------------------------------------------------------------
+
+/** One stored capture to judge: the frame the judge saw at capture time, plus what the capture measured. */
+export interface StoredCaptureInput {
+  readonly canvas: CanvasClass;
+  /** The capture as saved (`canvas-<class>.png`). */
+  readonly png: Buffer;
+  /** The box the capture was taken at — the class box, or the declared one. */
+  readonly viewport: CanvasViewport;
+  /** The document's scroll height the capture recorded; `null` when it did not. */
+  readonly contentHeight: number | null;
+  readonly originalPrompt: string;
+  readonly profile?: GenerationProfileInput;
+  /** ggui#1436 — the bank and the card's context; absent = today's judge, no block. */
+  readonly criteria?: { readonly bank: CriteriaBank; readonly context: CriteriaContextInput };
+  /** The props the capture was rendered with — handed to the criteria block for the rows whose evidence names props. */
+  readonly sampleProps?: JsonObject;
+}
+
+export interface StoredCaptureVerdict {
+  readonly canvas: CanvasClass;
+  readonly viewport: CanvasViewport;
+  readonly score: number;
+  readonly passed: boolean;
+  readonly issues: EvaluationIssue[];
+  readonly judge: CanvasJudgeRecord;
+  readonly contentHeight: number | null;
+  readonly overflow: boolean;
+  readonly inkRatio: number | null;
+  readonly criteria?: CriteriaBlock;
+  /** The scoring calls' spend. */
+  readonly inputTokens: number;
+  readonly outputTokens: number;
+  /** ggui#1436 — the report-only criteria call's spend, apart from the scoring calls'; absent when none was asked or answered. */
+  readonly criteriaTokens?: CriteriaCallTokens;
+}
+
+export type StoredCaptureOutcome =
+  | { readonly kind: 'ok'; readonly verdict: StoredCaptureVerdict }
+  | { readonly kind: 'unavailable'; readonly reason: string };
+
+/**
+ * Judge a STORED capture exactly as the per-canvas leg judges a fresh one — the same K scoring calls on the
+ * same frame, the same median, the same fit and blank verdicts, the same report-only criteria call — without
+ * rendering.
+ * This is the calibration's path (ggui#1438): the frame his eye marks is the frame the judge saw, and a
+ * re-judge costs judge tokens only. Fit reads the capture's recorded `contentHeight`; ink is read off the
+ * PNG inside the canvas's chrome, as at capture.
+ */
+export async function judgeStoredCapture(
+  input: StoredCaptureInput,
+  config: VisualEvalConfig,
+  deps: Pick<VisualEvalDeps, 'judge'> = {},
+): Promise<StoredCaptureOutcome> {
+  const judge = deps.judge ?? callMultimodalLLM;
+  const model = config.model ?? getDefaultVisualModel(config.provider);
+  const { canvas, viewport, png } = input;
+  const chrome = canvasChrome(canvas);
+  const ink = readInk(png, chrome, canvas);
+  const inkRatio = ink?.ratio ?? null;
+  const k = judgeCountFor(config, canvas);
+  const profileBlock = buildStylingProfileJudgeBlock(input.profile);
+  const criteriaContext: CriteriaContext | undefined = input.criteria !== undefined ? { ...input.criteria.context, canvas } : undefined;
+  const criteriaSelected =
+    input.criteria !== undefined && criteriaContext !== undefined ? selectCriteria(input.criteria.bank, criteriaContext) : undefined;
+  const criteriaBlock =
+    input.criteria !== undefined && criteriaSelected !== undefined
+      ? buildCriteriaJudgeBlock(input.criteria.bank, criteriaSelected, {
+          frame: { canvas, width: viewport.width, height: viewport.height },
+          ...(input.sampleProps !== undefined ? { propsJson: JSON.stringify(input.sampleProps) } : {}),
+        })
+      : '';
+  const { scoring: answers, criteria: criteriaAnswer } = await judgeFrame(judge, config, model, png, input.originalPrompt, profileBlock, canvas, k, criteriaBlock);
+  const parsed = answers.filter((a): a is Extract<JudgedAnswer, { kind: 'ok' }> => a.kind === 'ok');
+  if (parsed.length === 0) {
+    const first = answers.find((a): a is Extract<JudgedAnswer, { kind: 'unparsable' }> => a.kind === 'unparsable');
+    return { kind: 'unavailable', reason: first?.reason ?? 'judge answer unparsable' };
+  }
+  const samples = parsed.map((a) => a.result.finalScore);
+  const median = medianOf(samples);
+  const result = parsed[samples.indexOf(median)]!.result;
+  const issues = [...result.issues];
+  let passed = median >= config.passThreshold;
+  const contentHeight = input.contentHeight;
+  const overflow = contentHeight !== null && contentHeight > viewport.height;
+  const policy = canvasFitPolicy(canvas);
+  if (overflow && contentHeight !== null && policy.overflow !== 'none') {
+    issues.push(canvasOverflowIssue(canvas, viewport, contentHeight, policy.overflow));
+    if (policy.overflow === 'fail') passed = false;
+  }
+  if (ink !== null && ink.lastInkRow === null) {
+    issues.push(canvasBlankIssue(canvas, viewport));
+    passed = false;
+  }
+  const criteria: CriteriaBlock | undefined =
+    input.criteria !== undefined && criteriaContext !== undefined && criteriaSelected !== undefined
+      ? resolveCriteriaBlock({
+          bank: input.criteria.bank,
+          context: criteriaContext,
+          selected: criteriaSelected,
+          answers: criteriaReads(criteriaAnswer),
+          measurements: { overflow, contentHeight, viewportHeight: viewport.height, inkRatio },
+        })
+      : undefined;
+  const criteriaTokens = criteriaCallTokens(criteriaAnswer);
+  return {
+    kind: 'ok',
+    verdict: {
+      canvas,
+      viewport,
+      score: median,
+      passed,
+      issues,
+      judge: { k, rule: 'median', samples, sigma: populationSigma(samples), notes: parsed.map((a) => a.result.critique ?? '') },
+      contentHeight,
+      overflow,
+      inkRatio,
+      ...(criteria !== undefined ? { criteria } : {}),
+      inputTokens: parsed.reduce((sum, a) => sum + a.inputTokens, 0),
+      outputTokens: parsed.reduce((sum, a) => sum + a.outputTokens, 0),
+      ...(criteriaTokens !== undefined ? { criteriaTokens } : {}),
+    },
   };
 }
 
@@ -1224,15 +1800,33 @@ function parseVisualResponse(text: string, passThreshold: number): EvaluationRes
     fix: i.fix || '',
   }));
 
+  // ggui#1436 — the criteria answers, tolerant: absent block → no field (an old answer stays
+  // valid); an entry without a string id or with a verdict outside the vocabulary is dropped.
+  const criteriaAnswers = parseCriteriaAnswers(raw.criteria);
+
   return {
     passed: finalScore >= passThreshold,
     finalScore,
     dimensions,
     issues,
     critique: raw.critique,
+    ...(criteriaAnswers !== undefined ? { criteriaAnswers } : {}),
   };
 }
 
+function parseCriteriaAnswers(raw: unknown): CriteriaAnswer[] | undefined {
+  if (!Array.isArray(raw)) return undefined;
+  const out: CriteriaAnswer[] = [];
+  for (const entry of raw) {
+    if (typeof entry !== 'object' || entry === null) continue;
+    const o = entry as { id?: unknown; verdict?: unknown; evidence?: unknown };
+    if (typeof o.id !== 'string') continue;
+    if (o.verdict !== 'pass' && o.verdict !== 'fail' && o.verdict !== 'n/a') continue;
+    out.push({ id: o.id, verdict: o.verdict, evidence: typeof o.evidence === 'string' ? o.evidence : '' });
+  }
+  return out;
+}
+
 // ---------------------------------------------------------------------------
 // Default models for visual evaluation
 // ---------------------------------------------------------------------------
@@ -1308,7 +1902,7 @@ function toEvalIssue(issue: EvaluationIssue): EvalIssue {
 // ---------------------------------------------------------------------------
 
 /** What the fit half reads — the frame's inputs; nothing about a judge. */
-export type VisualFitConfig = Pick<VisualEvalConfig, 'sampleProps' | 'canvases' | 'canvasViewports' | 'designSrcDir'>;
+export type VisualFitConfig = Pick<VisualEvalConfig, 'sampleProps' | 'canvases' | 'canvasViewports' | 'hostPresentations' | 'designSrcDir'>;
 
 /** One canvas's fit reading: the box, the measure, whether it overflowed — no score. */
 export interface CanvasFitReading {
@@ -1316,8 +1910,12 @@ export interface CanvasFitReading {
   readonly viewport: CanvasViewport;
   readonly contentHeight: number | null;
   readonly overflow: boolean;
+  /** ggui#1120 — the capture's ink ratio; `0` is the blank, `null` an unreadable capture. */
+  readonly inkRatio: number | null;
   /** `true` when the order declared this canvas's box. */
   readonly declared?: true;
+  /** ggui#1492 — what the judge did with this canvas's host presentation, when one was supplied. */
+  readonly presentation?: CanvasPresentationOutcome;
 }
 
 /** `measured` = every canvas was framed (its fit issues, possibly none); `unavailable` = no verdict, with why. */
@@ -1361,7 +1959,7 @@ export async function runVisualFit(
   const issues: EvalIssue[] = [];
   const readings: CanvasFitReading[] = [];
   for (const canvas of config.canvases) {
-    const frame = await frameCanvas(bundledCode, context, html, canvas, config.canvasViewports, deps);
+    const frame = await frameCanvas(bundledCode, context, html, canvas, config.canvasViewports, deps, config.hostPresentations);
     if (!frame.attempt.png) {
       return { status: 'unavailable', reason: `${frame.attempt.reason ?? 'no browser available'} at canvas ${canvas}` };
     }
@@ -1369,16 +1967,24 @@ export async function runVisualFit(
     const overflow = contentHeight !== null && contentHeight > frame.viewport.height;
     const verdict = fitVerdict(canvas, frame);
     if (verdict !== null) issues.push(toEvalIssue(canvasScopedIssue(canvas, verdict)));
+    const overflowXIssue = overflowXVerdict(canvas, frame);
+    if (overflowXIssue !== null) issues.push(toEvalIssue(canvasScopedIssue(canvas, overflowXIssue)));
+    const blank = blankVerdict(canvas, frame);
+    if (blank !== null) issues.push(toEvalIssue(canvasScopedIssue(canvas, blank)));
+    const inkRatio = frame.ink?.ratio ?? null;
     readings.push({
       canvas,
       viewport: frame.viewport,
       contentHeight,
       overflow,
+      inkRatio,
       ...(frame.declared ? { declared: true as const } : {}),
+      ...(frame.presentation !== undefined ? { presentation: frame.presentation } : {}),
     });
     console.log(
       `[visual-fit] canvas=${canvas} ${frame.viewport.width}×${frame.viewport.height} ` +
-        `content=${contentHeight ?? '?'}px${overflow ? ` OVERFLOW (${frame.policy.overflow})` : ''} | no judge`,
+        `content=${contentHeight ?? '?'}px${overflow ? ` OVERFLOW (${frame.policy.overflow})` : ''} ` +
+        `ink=${inkRatio ?? '?'}${blank !== null ? ' BLANK' : ''} | no judge`,
     );
   }
   return { status: 'measured', issues, readings };