feat(design): {{DESIGN_DETECTOR}} wired into design-review, ship review-lite, review army, design-html

The user-installed impeccable engine becomes a deterministic pre-pass in four
skills, through one resolver with three renders: {{DESIGN_DETECTOR}} (the probe
block and how to read every sentinel), {{DESIGN_DETECTOR:phase0}} (design-
review's mechanical scan), {{DESIGN_DETECTOR:gate}} (design-html's bounded slop
gate). Every rendered invocation is `bun --no-env-file run <bin>/gstack-design-
detect.ts ... --host <host>` and every scan ends with the DETECT_EXIT_CODE echo
so exit 2 (findings) never aborts a block.

design-review: probe in Setup; Phase 0 picks DOM mode (URL target) or source
mode (diff-aware, no URL) once; source mode scans the changed frontend files in
Setup, DOM mode never reads source (Rule 4). Phase 3 gains a DOM-dump step per
page: both browser engines load the shared script from lib/dom-dump.js (Aside
splices it into a double-quoted repl script; the fallback engine copies it into
a temp dir for `$B eval --out --raw`), the dump is size-capped, run through
gstack-redact (a HIGH finding skips the page), and persisted under
$REPORT_DIR/dom/$RUN_ID/; one scan runs after the last page, labeled "static
scan of the rendered DOM; cross-origin CSS not resolved". REPORT_DIR honors
GSTACK_HOME so the wrapper's allow-list and the report dir agree; RUN_ID is set
once in Setup. design-baseline.json is schemaVersion 2 with runId, targetSet,
base, and a detector block (mode, engine, byRule, byPage), written temp+rename
with a per-run copy; Regression Output diffs ids only when mode and target set
match, caveats an engine change, and calls live-page count deltas advisory.
Phase 7 hands deferred detector findings to the `handoff=` command the scan
printed; Phase 9 recomputes the same way and deletes the dumps unless
--keep-dom; Phase 10 reports `Detector: N → M`.

ship review-lite gains step 0 (probe, `scan --changed <base>`, tier buckets,
detector + checklist dedupe, advisory and ignored never count) and a
`detector` count in its log payload; the PR body gets a Detector line (rule
ids and counts only). The Review Army Design specialist runs the mechanical
pass at the top of review/design-checklist.md, which now carries it. design-
html probes after DESIGN_SETUP and runs the one-pass gate before screenshots.

lib/dom-dump.js is generated by gen-skill-docs from lib/dom-dump-script.ts
(Claude host, --out-dir aware, dry-run freshness) and pinned byte-equal, so the
prose never carries the script. The contract gains DETECT_JSON, DOM_DUMP_OK,
and the self-describing set; its test now checks both directions.

Budget: design-review eager 25.6K → 28.5K. The plan's target was +2.5K; after
the levers it named (ids-only detector rules, no inline script, trimmed prose)
it lands at +2.87K, and the remainder is doctrine and detector wiring, so the
ceiling moves to the captured 31,319 for design-review only (the full capture
would also have loosened 21 ceilings this branch never touched; those stay).
design-html skeleton re-baselined to 54,000 (measured 53,592). Codex and
Factory ship goldens refreshed (review-lite step 0 and the PR-body line render
inline there).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

lib/design-detect-contract.ts

@@ -40,6 +40,10 @@ export const SENTINEL = {
   DETECT_PARSE_ERROR: 'DETECT_PARSE_ERROR',
   DETECT_OUTPUT_TOO_LARGE: 'DETECT_OUTPUT_TOO_LARGE',
   INTERNAL_ERROR: 'DESIGN_DETECT_INTERNAL_ERROR',
+  /** printed by rendered bash: the temp file holding a scan's JSON */
+  DETECT_JSON: 'DETECT_JSON',
+  /** printed by rendered bash after a DOM dump is persisted */
+  DOM_DUMP_OK: 'DOM_DUMP_OK',
   DOM_DUMP_REDACTION_BLOCKED: 'DOM_DUMP_REDACTION_BLOCKED',
   DOM_DUMP_TOO_LARGE: 'DOM_DUMP_TOO_LARGE',
   DESIGN_MD_FORMAT: 'DESIGN_MD_FORMAT',
@@ -50,6 +54,18 @@ export const SENTINEL = {
 
 export type SentinelName = keyof typeof SENTINEL;
 
+/**
+ * Sentinels whose line explains itself after the colon (a path, a version, a
+ * reason). Prose need not teach them; the agent notes them and moves on. The
+ * contract test requires every OTHER sentinel to be taught somewhere the agent
+ * reads.
+ */
+export const SELF_DESCRIBING_SENTINELS: readonly string[] = [
+  SENTINEL.HOOK_OTHER, SENTINEL.IGNORED_FILES, SENTINEL.CONFIG_UNREADABLE, SENTINEL.ENV_IGNORED,
+  SENTINEL.ENGINE_UNTESTED, SENTINEL.DETECT_EXIT, SENTINEL.DETECT_REFUSED, SENTINEL.DETECT_NO_TARGETS,
+  SENTINEL.DETECT_TIMEOUT, SENTINEL.DETECT_PARSE_ERROR, SENTINEL.DETECT_OUTPUT_TOO_LARGE,
+];
+
 /** Engine versions the committed fixtures were captured from. */
 export const TESTED_ENGINE_VERSIONS: readonly string[] = ['0.1.3'];
 

lib/dom-dump-script.ts

@@ -2,7 +2,8 @@
 // in the page before handing the result to the design detector.
 //
 // Pure module: no I/O, no imports from scripts/. Consumers:
-//   scripts/resolvers/design.ts   renders it once as a fenced JS block (Phase 3)
+//   scripts/resolvers/design.ts   Phase 3 prose tells the agent to load lib/dom-dump.js
+//   lib/dom-dump.js               committed copy gen-skill-docs writes; the engines load it at runtime
 //   test/fixtures/*.dom.html      captured by running it through the browse engine
 //   test/impeccable-fixtures.test.ts  pins that the committed dump came from THIS script
 //
@@ -81,6 +82,14 @@ export const DOM_DUMP_SCRIPT = String.raw`(() => {
   return "<!DOCTYPE html>\n" + root.outerHTML + "\n<!-- gstack-dom-dump: " + notes.join("; ") + " -->\n";
 })()`;
 
+/**
+ * Committed copy of DOM_DUMP_SCRIPT for the browser engines to load at runtime
+ * (written by gen-skill-docs, pinned byte-equal by test/impeccable-fixtures.test.ts).
+ * Skills `cat` it into an Aside script or `cp` it beside `$B eval`; the prose
+ * never carries the script text.
+ */
+export const DOM_DUMP_FILE = 'lib/dom-dump.js';
+
 /** Marker the dump script leaves on the inlined-stylesheet node. */
 export const DOM_DUMP_STYLE_ATTR = 'data-gstack-dom-css';
 /** Prefix of the trailing HTML comment the dump script appends. */

lib/dom-dump.js

@@ -0,0 +1,50 @@
+(() => {
+  const root = document.documentElement.cloneNode(true);
+  const head = root.querySelector("head") || root;
+  const inlined = [];
+  const crossOrigin = [];
+  const liveLinks = Array.from(document.querySelectorAll("link"));
+  const cloneLinks = Array.from(root.querySelectorAll("link"));
+  liveLinks.forEach((link, i) => {
+    const sheet = link.sheet;
+    if (!sheet) return;
+    try {
+      const text = Array.from(sheet.cssRules).map((rule) => rule.cssText).join("\n");
+      inlined.push("/* gstack-dom-dump: " + (sheet.href || "link") + " */\n" + text);
+      if (cloneLinks[i]) cloneLinks[i].remove();
+    } catch (err) {
+      crossOrigin.push(sheet.href || "(unknown)");
+    }
+  });
+  if (inlined.length) {
+    const style = document.createElement("style");
+    style.setAttribute("data-gstack-dom-css", "");
+    const dataUrl = new RegExp("url\\((\"?)data:[^)]{1024,}\\)", "g");
+    const rgb = new RegExp("rgb\\((\\d+), (\\d+), (\\d+)\\)", "g");
+    const hex = (n) => Number(n).toString(16).padStart(2, "0");
+    style.textContent = inlined.join("\n")
+      .replace(dataUrl, "url(data:,gstack-stripped)")
+      .replace(rgb, (m, r, g, b) => "#" + hex(r) + hex(g) + hex(b));
+    head.appendChild(style);
+  }
+  let scripts = 0;
+  for (const el of Array.from(root.querySelectorAll("script"))) {
+    if (el.textContent) { el.textContent = ""; scripts += 1; }
+  }
+  for (const el of Array.from(root.querySelectorAll("textarea"))) el.textContent = "";
+  for (const el of Array.from(root.querySelectorAll("*"))) {
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name;
+      const value = attr.value;
+      if (name === "value" && (el.nodeName === "INPUT" || el.nodeName === "TEXTAREA")) el.setAttribute(name, "");
+      else if ((name === "value" || name.indexOf("data-") === 0) && value.length > 32) el.setAttribute(name, "");
+      else if (name === "content" && el.nodeName === "META" && el.getAttribute("name") !== "viewport") el.setAttribute(name, "");
+      else if (name === "href" && value.indexOf("?") !== -1) el.setAttribute(name, value.split("?")[0]);
+      else if (value.indexOf("data:") === 0 && value.length > 1024) el.setAttribute(name, "data:,gstack-stripped");
+    }
+  }
+  const notes = ["shadow DOM and constructed stylesheets not captured"];
+  if (crossOrigin.length) notes.push("cross-origin stylesheets not resolved: " + crossOrigin.join(" "));
+  if (scripts) notes.push("scripts stripped: " + scripts + "; styles injected at runtime not captured");
+  return "<!DOCTYPE html>\n" + root.outerHTML + "\n<!-- gstack-dom-dump: " + notes.join("; ") + " -->\n";
+})()