@ggui-ai/ui-gen 0.24.0 → 0.26.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';
@@ -22,11 +30,21 @@ import { createRequire } from 'node:module';
 import { existsSync, writeFileSync, mkdtempSync, rmSync } from 'fs';
 import { createHash } from 'node:crypto';
 import { tmpdir } from 'os';
-import { createVisionAgent, type AgentConfig } from '../harness/llm-router';
+import { createVisionAgent, type AgentConfig, type VisionFinishReason } from '../harness/llm-router';
 import type { EvaluationResult, EvaluationIssue, DimensionScores } from './types';
-import type { CanvasJudgeRecord, CanvasVisualSummary, EvalIssue, VisualCoverage, VisualEvalSummary, VisualFitStamp } from './types-public.js';
+
+/**
+ * An issue as the visual leg CREATES it (ggui#1545 follow-up): its `origin` is required here, so a new producer, an
+ * instrument check or a judge-side parse, that forgets to say whose finding it is fails to compile instead of
+ * quietly dropping out of `visualEvaluation.actOn`'s treatment. The public `EvaluationIssue` keeps `origin` optional
+ * for stored and external data.
+ */
+type VisualIssue = EvaluationIssue & { origin: 'judge' | 'instrument' };
+import type { CanvasHostPresentation, CanvasJudgeRecord, CriteriaAnswerCounts, CanvasPresentationOutcome, CanvasVisualSummary, EvalIssue, HostInlineFrame, HostPresentationIgnoredReason, JudgeSalvageCause, JudgeSalvageCounts, 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';
+import { judgeEdges, type EdgeVerdict } from './criteria/edge.js';
+import { EDGE_BLOCKS_EXPRESSION, parseEdgeProbe } from './criteria/edge-probe.js';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -69,6 +87,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 +128,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 +156,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 +218,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 +238,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
@@ -197,7 +371,7 @@ export function canvasOverflowIssue(
   viewport: CanvasViewport,
   contentHeight: number,
   verdict: 'fail' | 'warn',
-): EvaluationIssue {
+): VisualIssue {
   const hidden = contentHeight - viewport.height;
   // ggui#1195 — when the judge captured at a DECLARED box, the refusal names
   // both boxes: the ceiling the content was measured against and the class
@@ -208,6 +382,7 @@ export function canvasOverflowIssue(
     : `${viewport.width}×${viewport.height}`;
   return {
     dimension: 'canvas-overflow',
+    origin: 'instrument',
     severity: verdict === 'fail' ? 'critical' : 'major',
     description:
       `Rendered content is ${contentHeight}px tall on the ${canvas} canvas (${box}) — ` +
@@ -218,6 +393,43 @@ 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',
+): VisualIssue {
+  return {
+    dimension: 'canvas-overflow-x',
+    origin: 'instrument',
+    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): VisualIssue {
+  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',
+    origin: 'instrument',
+    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 +438,16 @@ 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;
+  /**
+   * ggui#1127 — salvaged judge answers across the canvases, per leg, as N of M (scoring answers; criteria calls
+   * answered). Present on every canvas run, zeros included, so a reader can tell "none salvaged" from "not counted".
+   */
+  judgeSalvage?: JudgeSalvageCounts;
   /** 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 +469,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 +671,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 +710,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 +741,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 +756,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 +849,63 @@ 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;
+  /**
+   * ggui#1663 — the edge rule on this capture's DOM, read just before the screenshot (report-only); `null` when the
+   * probe failed. Absent on a failed capture.
+   */
+  readonly edge?: EdgeVerdict | 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 +913,36 @@ async function measureContentHeight(page: ScreenshotPage): Promise<number | null
   }
 }
 
+/**
+ * ggui#1663 — read the edge rule off the page the screenshot is about to take. The probe only reads layout (it never
+ * writes to the DOM), so the frame is unchanged; a failed read is reported and returns `null`, never a failed capture.
+ */
+async function measureEdges(page: ScreenshotPage): Promise<EdgeVerdict | null> {
+  try {
+    const probe = parseEdgeProbe(await page.evaluate(EDGE_BLOCKS_EXPRESSION));
+    if (probe === null) {
+      console.warn('[visual-eval] edge probe unavailable: the page returned no readable blocks');
+      return null;
+    }
+    return judgeEdges(probe.blocks, { placeholdersOnly: probe.placeholdersOnly });
+  } catch (e) {
+    console.warn(`[visual-eval] edge probe unavailable: ${e instanceof Error ? e.message : String(e)}`);
+    return 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,9 +957,26 @@ 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 edge = await measureEdges(page);
+        const screenshot = await page.screenshot({ type: 'png', fullPage: false, clip });
+        return { png: Buffer.from(screenshot), contentHeight: cardHeightPx, overflowX, edge };
+      }
       const contentHeight = await measureContentHeight(page);
+      const edge = await measureEdges(page);
       const screenshot = await page.screenshot({ type: 'png', fullPage: capture === 'full-page' });
-      return { png: Buffer.from(screenshot), contentHeight };
+      return { png: Buffer.from(screenshot), contentHeight, edge };
     } finally {
       await browser.close();
     }
@@ -741,10 +1076,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 +1141,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): VisualIssue | 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 +1178,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 } : {}),
+  };
 }
 
 /**
@@ -829,17 +1208,161 @@ async function frameCanvas(
  * canvas's policy gives an overflow, or `null` when the content fits, could
  * not be measured, or the canvas scrolls by design.
  */
-function fitVerdict(canvas: CanvasClass, frame: CanvasFrame): EvaluationIssue | null {
+function fitVerdict(canvas: CanvasClass, frame: CanvasFrame): VisualIssue | null {
   const contentHeight = frame.attempt.contentHeight;
   if (contentHeight === null || contentHeight <= frame.viewport.height || frame.policy.overflow === 'none') return null;
   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): VisualIssue | 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: 'ok';
+      readonly result: EvaluationResult;
+      readonly inputTokens: number;
+      readonly outputTokens: number;
+      /** ggui#1127 — present when the answer did not parse and its score was salvaged. */
+      readonly salvage?: JudgeSalvage;
+      /** ggui#1687 — the provider's stop reason and the model it says answered; each absent when unreported. */
+      readonly finishReason?: VisionFinishReason;
+      readonly servedModel?: string;
+    }
   | { readonly kind: 'unparsable'; readonly reason: string };
 
+/** ggui#1127 — what a salvaged answer leaves on the record: why, and where the parse broke. Never the answer's text. */
+interface JudgeSalvage {
+  readonly cause: JudgeSalvageCause;
+  /** The provider's normalized stop reason; absent when it reported none. */
+  readonly finishReason?: VisionFinishReason;
+  /** The parser's error, with every quoted span of the answer removed. */
+  readonly parseError: string;
+  /** Where the parse broke, as a character offset into the answer, when the parser said. */
+  readonly offset?: number;
+  /** The answer's length in characters: an offset at the end reads as a cut, one mid-answer as malformed. */
+  readonly chars: number;
+}
+
+/**
+ * ggui#1127 — why an unparsable answer was salvaged. The cause comes from the provider's stop reason, never from the
+ * answer's length: a short answer can still be cut (thinking spends the cap), and a long one can still be malformed.
+ */
+function judgeSalvageOf(error: unknown, text: string, finishReason: VisionFinishReason | undefined): JudgeSalvage {
+  const cause: JudgeSalvageCause =
+    finishReason === undefined ? 'unknown' : finishReason === 'length' ? 'output-cap' : finishReason === 'stop' ? 'malformed' : 'stopped';
+  const message = error instanceof Error ? error.message : String(error);
+  // The JSON is parsed from the first `{` (parseVisualResponse), so the parser's position is shifted by that start.
+  const position = /position (\d+)/.exec(message);
+  const start = text.indexOf('{');
+  const offset = position !== null ? (start > 0 ? start : 0) + Number(position[1]) : undefined;
+  const parseError = message.startsWith('Visual evaluator did not return valid JSON')
+    ? 'no complete JSON object in the answer'
+    : message.replace(/"(?:[^"\\]|\\.)*"/g, '"…"').slice(0, 160);
+  return { cause, ...(finishReason !== undefined ? { finishReason } : {}), parseError, ...(offset !== undefined ? { offset } : {}), chars: text.length };
+}
+
+/** ggui#1127 — a canvas's judge record: the K samples, and which of them (and the criteria call) were salvaged. */
+function judgeRecordOf(
+  k: number,
+  parsed: readonly Extract<JudgedAnswer, { kind: 'ok' }>[],
+  samples: number[],
+  criteria: JudgedAnswer | undefined,
+  requestedModel: string,
+): CanvasJudgeRecord {
+  const salvaged = parsed.flatMap((a) => (a.salvage !== undefined ? [a.salvage.cause] : []));
+  // ggui#1687 — every model the provider said answered, scoring and criteria, deduplicated in call order.
+  const answered = [...parsed, ...(criteria?.kind === 'ok' ? [criteria] : [])];
+  const served = [...new Set(answered.flatMap((a) => (a.servedModel !== undefined ? [a.servedModel] : [])))];
+  const criteriaSalvaged = criteria?.kind === 'ok' ? criteria.salvage?.cause : undefined;
+  return {
+    k,
+    rule: 'median',
+    samples,
+    sigma: populationSigma(samples),
+    notes: parsed.map((a) => a.result.critique ?? ''),
+    ...(salvaged.length > 0 ? { salvaged } : {}),
+    ...(criteriaSalvaged !== undefined ? { criteriaSalvaged } : {}),
+    models: { requested: requestedModel, served },
+  };
+}
+
+/** ggui#1687 — what one call's response says about itself: its stop reason and the model that answered. */
+function callFacts(response: { readonly finishReason?: VisionFinishReason; readonly servedModel?: string }): {
+  finishReason?: VisionFinishReason;
+  servedModel?: string;
+} {
+  return {
+    ...(response.finishReason !== undefined ? { finishReason: response.finishReason } : {}),
+    ...(response.servedModel !== undefined ? { servedModel: response.servedModel } : {}),
+  };
+}
+
+const NO_CRITERIA_ARRAY: CriteriaAnswerCounts = { array: false, received: 0, kept: 0, dropped: { notObject: 0, badId: 0, badVerdict: 0 } };
+
+/** ggui#1687 — the criteria call as it came back, for the block: its answer's counts and its stop reason. */
+function criteriaCallOf(criteria: JudgedAnswer | undefined): { call?: { answer: CriteriaAnswerCounts; finishReason?: VisionFinishReason } } {
+  if (criteria?.kind !== 'ok') return {};
+  const answer = criteria.result.criteriaCounts ?? NO_CRITERIA_ARRAY;
+  return { call: { answer, ...(criteria.finishReason !== undefined ? { finishReason: criteria.finishReason } : {}) } };
+}
+
+/**
+ * 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[][] {
+  // ggui#1127 — a salvaged answer keeps no criteria: it is no read, and its rows say why (criteriaUnansweredReason).
+  return criteria?.kind === 'ok' && criteria.salvage === undefined ? [criteria.result.criteriaAnswers ?? []] : [];
+}
+
+/** ggui#1127 — the reason a salvaged criteria answer's judge rows give, so none reads as a clean `n/a`. */
+function criteriaUnansweredReason(criteria: JudgedAnswer | undefined): { unansweredReason?: string } {
+  return criteria?.kind === 'ok' && criteria.salvage !== undefined
+    ? { unansweredReason: `not answered: the criteria answer was salvaged (${criteria.salvage.cause})` }
+    : {};
+}
+
 /** 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,21 +1392,28 @@ 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 };
+      return { kind: 'ok', result, inputTokens: response.inputTokens, outputTokens: response.outputTokens, ...callFacts(response) };
     } catch (e) {
-      // A TRUNCATED answer (cut inside `issues` at the output cap) is deterministic on
-      // the content — retrying the same prompt reproduces it. The four dimensions are
-      // emitted before `issues`, so the score is recoverable from the closed prefix.
+      // An answer that fails to parse but whose four dimensions closed is SALVAGED (ggui#1127): they are emitted
+      // before `issues`, so the score is recoverable from the closed prefix. Whether it was cut at the output cap or
+      // ended malformed is the provider's stop reason to say, not the answer's length; the record and the warn
+      // line carry the cause, the parse error and where it broke, never the answer's text. One token per leg.
       const salvaged = salvageTruncatedVisualAnswer(response.text, config.passThreshold);
       if (salvaged !== null) {
-        console.warn(`[visual-eval] visual_judge_truncated${canvas ? ` canvas=${canvas}` : ''}: answer cut after ${response.text.length} chars — score recovered from the closed prefix, issues list partial`);
-        return { kind: 'ok', result: salvaged, inputTokens: response.inputTokens, outputTokens: response.outputTokens };
+        const salvage = judgeSalvageOf(e, response.text, response.finishReason);
+        const token = criteriaBlock.length > 0 ? 'visual_criteria_salvaged' : 'visual_judge_salvaged';
+        console.warn(
+          `[visual-eval] ${token}${canvas ? ` canvas=${canvas}` : ''} cause=${salvage.cause} finish=${salvage.finishReason ?? 'unreported'} ` +
+            `at=${salvage.offset ?? '?'}/${salvage.chars} (${salvage.parseError}): score recovered from the closed prefix, issues list partial`,
+        );
+        return { kind: 'ok', result: salvaged, inputTokens: response.inputTokens, outputTokens: response.outputTokens, salvage, ...callFacts(response) };
       }
       const reason = `judge answer unparsable: ${e instanceof Error ? e.message : String(e)}`;
       if (attempt === 1) {
@@ -941,7 +1471,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 +1482,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,13 +1511,8 @@ 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 judgeRecord: CanvasJudgeRecord = {
-        k,
-        rule: 'median',
-        samples,
-        sigma: populationSigma(samples),
-        notes: parsed.map((a) => a.result.critique ?? ''),
-      };
+      const criteriaTokens = criteriaCallTokens(criteriaAnswer);
+      const judgeRecord = judgeRecordOf(k, parsed, samples, criteriaAnswer, model);
       // The fit verdict (ggui#1027): deterministic, in the judge's issue channel.
       const contentHeight = attempt.contentHeight;
       const overflow = contentHeight !== null && contentHeight > viewport.height;
@@ -984,6 +1521,31 @@ 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, edge: attempt.edge ?? null },
+              ...criteriaUnansweredReason(criteriaAnswer),
+              ...criteriaCallOf(criteriaAnswer),
+            })
+          : undefined;
       perCanvasResults.push(result);
       perCanvas.push({
         canvas,
@@ -993,14 +1555,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,7 +1649,21 @@ function aggregateCanvasResults(
     inputTokens += r.inputTokens ?? 0;
     outputTokens += r.outputTokens ?? 0;
   });
+  const criteriaSpent = perCanvas.flatMap((c) => (c.criteriaTokens !== undefined ? [c.criteriaTokens] : []));
+  // ggui#1127 — N of M per leg. A criteria call that parsed or was salvaged reports its spend, so `criteriaTokens`
+  // marks an answered call.
+  const judgeSalvage: JudgeSalvageCounts = {
+    scoring: {
+      salvaged: perCanvas.reduce((sum, c) => sum + (c.judge.salvaged?.length ?? 0), 0),
+      answers: perCanvas.reduce((sum, c) => sum + c.judge.samples.length, 0),
+    },
+    criteria: {
+      salvaged: perCanvas.filter((c) => c.judge.criteriaSalvaged !== undefined).length,
+      answered: perCanvas.filter((c) => c.criteriaTokens !== undefined).length,
+    },
+  };
   return {
+    judgeSalvage,
     passed: perCanvas.every((c) => c.passed),
     finalScore: mean((r) => r.finalScore),
     dimensions,
@@ -1089,6 +1671,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 +1693,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 +1726,136 @@ 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 },
+          ...criteriaUnansweredReason(criteriaAnswer),
+          ...criteriaCallOf(criteriaAnswer),
+        })
+      : undefined;
+  const criteriaTokens = criteriaCallTokens(criteriaAnswer);
+  return {
+    kind: 'ok',
+    verdict: {
+      canvas,
+      viewport,
+      score: median,
+      passed,
+      issues,
+      judge: judgeRecordOf(k, parsed, samples, criteriaAnswer, model),
+      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 } : {}),
+    },
   };
 }
 
@@ -1181,7 +1911,7 @@ export function salvageTruncatedVisualAnswer(text: string, passThreshold: number
     hierarchy,
     aesthetics,
     issues,
-    critique: `[truncated judge answer — score recovered from the closed prefix; ${issues.length} issue(s) kept, the rest and the critique were cut]`,
+    critique: `[salvaged judge answer — it did not parse; score recovered from the closed prefix; ${issues.length} issue(s) kept, the rest and the critique lost]`,
   });
   return parseVisualResponse(rebuilt, passThreshold);
 }
@@ -1217,22 +1947,57 @@ function parseVisualResponse(text: string, passThreshold: number): EvaluationRes
     codeQuality: 0,              // can't assess code from screenshot
   };
 
-  const issues: EvaluationIssue[] = (raw.issues || []).map((i: Record<string, string>) => ({
+  const issues: VisualIssue[] = (raw.issues || []).map((i: Record<string, string>) => ({
     dimension: i.dimension || 'visual',
+    origin: 'judge',
     severity: (i.severity as 'critical' | 'major' | 'minor') || 'minor',
     description: i.description || '',
     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 criteria = parseCriteriaAnswers(raw.criteria);
+
   return {
     passed: finalScore >= passThreshold,
     finalScore,
     dimensions,
     issues,
     critique: raw.critique,
+    ...(criteria.answers !== undefined ? { criteriaAnswers: criteria.answers } : {}),
+    criteriaCounts: criteria.counts,
   };
 }
 
+/**
+ * The criteria answers, tolerant (ggui#1436), and what the tolerance dropped (ggui#1687): an absent or non-array block
+ * reads no row, and each dropped entry is counted by why, so an empty or cut call is visible rather than a row of
+ * clean `n/a`s.
+ */
+function parseCriteriaAnswers(raw: unknown): { answers?: CriteriaAnswer[]; counts: CriteriaAnswerCounts } {
+  if (!Array.isArray(raw)) return { counts: NO_CRITERIA_ARRAY };
+  const answers: CriteriaAnswer[] = [];
+  const dropped = { notObject: 0, badId: 0, badVerdict: 0 };
+  for (const entry of raw) {
+    if (typeof entry !== 'object' || entry === null) {
+      dropped.notObject += 1;
+      continue;
+    }
+    const o = entry as { id?: unknown; verdict?: unknown; evidence?: unknown };
+    if (typeof o.id !== 'string') {
+      dropped.badId += 1;
+      continue;
+    }
+    if (o.verdict !== 'pass' && o.verdict !== 'fail' && o.verdict !== 'n/a') {
+      dropped.badVerdict += 1;
+      continue;
+    }
+    answers.push({ id: o.id, verdict: o.verdict, evidence: typeof o.evidence === 'string' ? o.evidence : '' });
+  }
+  return { answers, counts: { array: true, received: raw.length, kept: answers.length, dropped } };
+}
+
 // ---------------------------------------------------------------------------
 // Default models for visual evaluation
 // ---------------------------------------------------------------------------
@@ -1248,6 +2013,16 @@ function getDefaultVisualModel(provider: 'claude' | 'google'): string {
 // Tier 2 adapter — returns EvalIssue[]
 // ---------------------------------------------------------------------------
 
+/**
+ * ggui#1522 — what a visual leg's judge calls spent: the scoring calls, and the report-only criteria calls apart
+ * (ggui#1436). Priced at the VISUAL agent's model, never folded into a text evaluator's or a coding turn's tokens.
+ */
+export interface VisualLegTokens {
+  readonly inputTokens: number;
+  readonly outputTokens: number;
+  readonly criteria?: CriteriaCallTokens;
+}
+
 /** What the harness's eval round consumes from the visual leg. */
 export interface VisualEvalOutcome {
   /** Tier-2 issues (empty when no browser is available). */
@@ -1264,6 +2039,11 @@ export interface VisualEvalOutcome {
    * summary used to be indistinguishable from a clean single-shot run.
    */
   coverage: VisualCoverage;
+  /**
+   * ggui#1522 — the leg's own spend, when its judge ran and reported tokens. The round records it in the cost
+   * tracker at the visual agent's model and carries it apart; absent on a skipped leg.
+   */
+  tokens?: VisualLegTokens;
 }
 
 /**
@@ -1287,7 +2067,16 @@ export async function runVisualEval(
   const issues: EvalIssue[] = (result.issues || []).map(toEvalIssue);
   const summary = summarizeVisualResult(result);
   const coverage: VisualCoverage = { status: 'ran' };
-  return summary === undefined ? { issues, coverage } : { issues, summary, coverage };
+  // ggui#1522 — the judge's spend rides the outcome; until now it was dropped here, before the harness saw it.
+  const tokens: VisualLegTokens | undefined =
+    result.inputTokens !== undefined && result.outputTokens !== undefined
+      ? {
+          inputTokens: result.inputTokens,
+          outputTokens: result.outputTokens,
+          ...(result.criteriaTokens !== undefined ? { criteria: result.criteriaTokens } : {}),
+        }
+      : undefined;
+  return { issues, ...(summary !== undefined ? { summary } : {}), coverage, ...(tokens !== undefined ? { tokens } : {}) };
 }
 
 /** A judge-shaped issue as the harness's tier-2 issue: critical ⇒ a blocking fail, anything else ⇒ a warn. */
@@ -1300,6 +2089,7 @@ function toEvalIssue(issue: EvaluationIssue): EvalIssue {
     severity: issue.severity === 'critical' ? 'critical' : 'major',
     description: issue.description,
     fix: issue.fix || '',
+    ...(issue.origin !== undefined ? { origin: issue.origin } : {}),
   };
 }
 
@@ -1308,7 +2098,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 +2106,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 +2155,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 +2163,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 };