@bastani/atomic 0.9.13 → 0.9.14-alpha.2

package/dist/builtin/workflows/skills/impeccable/scripts/serve-question.mjs

@@ -29,28 +29,53 @@
  *       "materials": ["letterpress", "newsprint"],                // optional, rendered as tags
  *       "viewport": "one line: the first-viewport composition",   // optional
  *       "case": "one line: the fusion verdict, honest",           // optional
+ *       "verdict": "competitive", // optional routing tier: "wins" |
+ *                                // "competitive" | "declined". Declined cards
+ *                                // render demoted after the full cards:
+ *                                // narrow, quiet, catalog art as a labeled
+ *                                // thumb, "Adopt anyway" instead of "Build
+ *                                // this". Still choosable; never deleted.
+ *       "kept": "one line: what the direction kept from this declined world",
+ *       "raised": [ { "from": "challenger-x", "raise": "one line" } ],
+ *                                // assigned card only: donations taken from
+ *                                // declined challengers, rendered as named
+ *                                // raise lines under the identity row
  *       "risk": "one line: the honest risk",                      // optional
  *       "body": "fallback prose when the structured fields are absent",
- *       "sketch": ".impeccable/sketches/assigned.webp",  // optional; may not exist
- *                                // yet: the page shimmer-waits and polls the
- *                                // slot until the file lands, so serve first
- *                                // and generate after
+ *       "comp": ".impeccable/mocks/decision/assigned.webp",  // optional; the card's
+ *                                // full-fidelity direction comp (the legacy
+ *                                // key "sketch" is accepted as an alias). May
+ *                                // not exist yet: the page shimmer-waits and
+ *                                // polls the slot until the file lands, so
+ *                                // serve first and generate after
  *       "hero": "https://... or /abs/path.webp",   // optional inspiration image;
- *                                // rides picture-in-picture when a sketch exists
+ *                                // rides picture-in-picture when a comp exists
  *       "board": "https://... or /abs/path.webp"   // optional secondary image
  *     }, ...
  *   ],
  *   "reroll": true,          // adds a re-roll action (returns {"optionId":"reroll"})
+ *                            // or { "registers": ["safer", "bolder"] } to add
+ *                            // the register steers beside it: the answer then
+ *                            // carries "register" and the agent re-runs
+ *                            // concept-seed with --register <value>
  *   "canon": true,           // adds the "Play it straight" standing exit;
  *                            // direction rounds only (returns {"optionId":"canon"})
  *   "canonCard": { ... },    // optional: the standing exit as a full card with the
- *                            // same anatomy (label, thesis, palette, sketch, ...);
+ *                            // same anatomy (label, thesis, palette, comp, ...);
  *                            // rendered last and visually subordinate. Without it,
  *                            // canon stays a quiet footer action.
- *   "steer": true            // adds a free-text steer field returned with any answer
+ *   "steer": true,           // adds a free-text steer field returned with any answer
+ *   "followup": true         // this round's pick is not terminal: the server
+ *                            // stays open awaiting --update with the next
+ *                            // round (detached mode only), the page shows a
+ *                            // loading hand instead of goodbye, and the
+ *                            // answer carries followup:true so --wait knows
+ *                            // to keep the table. Use it when a decision has
+ *                            // a known second half, e.g. direction first,
+ *                            // then the execution contract.
  * }
  *
- * Options render as large cards: the sketch leads when present, with the
+ * Options render as large cards: the comp leads when present, with the
  * inspiration image picture-in-picture; a hero alone renders full-bleed; a
  * text-only direction gets its identity from the palette chips and tags.
  * Local image paths are served by this server; nothing is uploaded anywhere.
@@ -79,6 +104,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
+import { openSystemBrowser } from './lib/open-system-browser.mjs';
 
 function arg(name, fallback = null) {
   const i = process.argv.indexOf(`--${name}`);
@@ -122,12 +148,30 @@ function printAnswer(raw) {
     if (a.hero || a.board) {
       console.log("CHOSEN CARD: open the chosen world's board and hero images now, before any code. When your harness only reads files, or runs sandboxed, download them INTO the workspace and open the relative path; a sandboxed viewer rejects absolute paths outside it. They set the craft bar the build must reach.");
     }
-    if (a.sketch) {
-      console.log('CHOSEN SKETCH: the decision sketch at that path may seed one comp probe; the comp round still renders its full set, because a sketch chose the direction, not the composition.');
+    if (a.comp) {
+      console.log('CHOSEN COMP: the decision comp at that path is compositional option one. On a comp-led build the comp round adds two variations beside it; on a code-led build it returns at the finish review as the critique reference. Never regenerate it from scratch.');
     }
     if (a.optionId === 'canon') {
       console.log('CANON CHOSEN: the user picked the category standard on purpose. Ask once for two or three products this should sit alongside; their craft level becomes the quality bar. Execute the canon at full commitment, conventions embraced without irony or smuggled quirk.');
     }
+    if (a.optionId === 'reroll' && a.register) {
+      console.log(`REGISTER: the user steered the next hand to the ${a.register} register. Re-run concept-seed with the same key, the next --reroll round, and --register ${a.register}, then follow what it prints; the register is the user's steering, never yours to pre-select.`);
+    }
+    if (a.followup && a.optionId !== 'reroll') {
+      console.log('FOLLOWUP OPEN: the table stays open and the page is showing a loading hand. Deliver the next round now with --update --key <key> --payload <file>, then collect it with --wait; never leave the page waiting on a round you have not sent.');
+    }
+    if (a.buildPath === 'comp' || a.buildPath === 'code') {
+      // The page never writes the flip itself, but "never write it" overstated
+      // that into a rule the agent then applied to new-work's one-time offer,
+      // which exists for exactly this case: a flip on a project that had no
+      // recorded default is the only moment the preference is ever asked for.
+      const origin = a.buildPathFlipped
+        ? 'flipped on the page, so it binds this session only, and the page never writes it back; the sole exception is new-work’s one-time offer, on a project that had no recorded default at all, which asks after the round closes and writes the answer to .impeccable/config.json'
+        : 'the round’s recorded default';
+      console.log(`BUILD PATH: ${a.buildPath} (${origin}). ${a.buildPath === 'comp'
+        ? 'Comp-led: the chosen card’s comp is law; generate it before building when it does not exist yet, and the finish review audits the build against it.'
+        : 'Code-led: no comp is owed; a comp that already rendered rides at the finish review as the critique reference, and the ambition lives in the direction contract.'}`);
+    }
   } catch { /* raw answer */ }
 }
 
@@ -137,21 +181,29 @@ const portArg = Number(arg('port', '0'));
 const QUESTION_DIR = path.join(process.cwd(), '.impeccable', 'questions');
 const stateFile = (key) => path.join(QUESTION_DIR, `${key}.state.json`);
 const answerFile = (key) => path.join(QUESTION_DIR, `${key}.answer.json`);
+// A code-to-comp flip mid-round: the page records it here and --wait
+// surfaces it as its own event, because the agent must start generating
+// comps while the round is still open. Comp-to-code needs no event; it is
+// free and rides the final ANSWER.
+const flipFile = (key) => path.join(QUESTION_DIR, `${key}.flip.json`);
 
 if (hasFlag('schema')) {
   console.log(JSON.stringify({
     title: 'Choose the visual world',
     question: 'The roll assigned Fillmore Handbill. Keep it, take an alternate, or re-roll.',
     options: [
-      { id: 'assigned', label: 'Fillmore Handbill', kicker: 'THE ROLL', lineage: '1966-71 Fillmore psychedelic handbills', thesis: 'The gig poster that treats every release like a one-night stand.', palette: ['#e8452c', '#f5d64c', '#1b2a52', '#f3ead8'], materials: ['letterpress', 'split-fountain ink'], viewport: 'A full-bleed dated bill with the product name in warped display type.', risk: 'Reads nostalgic when the type is set timidly.', sketch: '.impeccable/sketches/assigned.webp', hero: 'https://impeccable.style/worlds/cards/fillmore-handbill-hero.webp', board: 'https://impeccable.style/worlds/cards/fillmore-handbill.webp' },
-      { id: 'challenger-teletext', label: 'Teletext Service', lineage: 'broadcast teletext magazines', thesis: 'The catalog as a broadcast index: pages, not sections.', case: 'Fuses cleanly: releases map to numbered pages.', sketch: '.impeccable/sketches/challenger-teletext.webp', hero: 'https://impeccable.style/worlds/cards/broadcast-programming-teletext-service-hero.webp' },
+      { id: 'assigned', label: 'Fillmore Handbill', kicker: 'THE ROLL', lineage: '1966-71 Fillmore psychedelic handbills', thesis: 'The gig poster that treats every release like a one-night stand.', palette: ['#e8452c', '#f5d64c', '#1b2a52', '#f3ead8'], materials: ['letterpress', 'split-fountain ink'], viewport: 'A full-bleed dated bill with the product name in warped display type.', risk: 'Reads nostalgic when the type is set timidly.', raised: [{ from: 'challenger-microfiche', raise: 'The bill now owns its whole viewport as one continuous printed sheet.' }], comp: '.impeccable/mocks/decision/assigned.webp', hero: 'https://impeccable.style/worlds/cards/posters-covers-sleeves-fillmore-handbill-hero.webp', board: 'https://impeccable.style/worlds/cards/posters-covers-sleeves-fillmore-handbill.webp' },
+      { id: 'model-pick', label: 'The Broadside Ballad', kicker: 'IMPECCABLE’S PICK', lineage: 'street-sold ballad sheets', thesis: 'Every release printed as the day’s ballad sheet.', palette: ['#1f1c18', '#efe5d0', '#a33327'], materials: ['woodcut', 'rag paper'], viewport: 'One tall sheet, the newest release as today’s ballad.', risk: 'Also the direction most runs in this category land on.', comp: '.impeccable/mocks/decision/model-pick.webp' },
+      { id: 'challenger-teletext', label: 'Teletext Service', verdict: 'competitive', lineage: 'broadcast teletext magazines', thesis: 'The catalog as a broadcast index: pages, not sections.', palette: ['#0000c0', '#ffff00', '#00c000', '#ffffff'], materials: ['block mosaic', 'phosphor glow'], viewport: 'P100 index page, releases as numbered rows.', case: 'Fuses cleanly: releases map to numbered pages; loses narrowly on clarity.', risk: 'Reads retro-novelty when the grid is not strict.', comp: '.impeccable/mocks/decision/challenger-teletext.webp', hero: 'https://impeccable.style/worlds/cards/broadcast-programming-teletext-service-hero.webp' },
+      { id: 'challenger-microfiche', label: 'Microfiche Reader', verdict: 'declined', lineage: 'library microfiche stations', palette: ['#101418', '#9fb4c0'], materials: ['film grain', 'backlit glass'], case: 'Fuses poorly: listeners do not identify with archival retrieval.', kept: 'Total environmental commitment.', hero: 'https://impeccable.style/worlds/cards/archives-microfiche-reader-hero.webp' },
     ],
-    reroll: true,
+    reroll: { registers: ['safer', 'bolder'] },
+    buildPath: { value: 'comp', toggle: true },
     canon: true,
-    canonCard: { label: 'The category standard', thesis: 'What this category ships, executed impeccably.', viewport: 'The arrangement a visitor expects, at full craft.', sketch: '.impeccable/sketches/canon.webp' },
+    canonCard: { label: 'The category standard', thesis: 'What this category ships, executed impeccably.', palette: ['#ffffff', '#111827', '#2563eb'], materials: ['clean grid', 'product photography'], viewport: 'The arrangement a visitor expects, at full craft.', risk: 'Indistinguishable from the competition by design.', comp: '.impeccable/mocks/decision/canon.webp' },
     steer: true,
   }, null, 2));
-  console.log('\nOption ids return verbatim in ANSWER; "reroll" and "canon" are reserved. hero/board/sketch accept URLs or local paths; sketch slots may point at files that do not exist yet (serve first, generate after; the page polls until they land, so never block serving on generation). hero on a challenger is the inspiration it draws from and renders picture-in-picture beside the sketch, never as the promise of the build. canonCard renders the standing exit as a subordinate card with the same anatomy; without it, canon stays a quiet footer action. Include canon only for visual-direction rounds; never present it as your own recommendation. Keep thesis and each fact to one short sentence: the card front shows thesis, identity, and a two-line risk, while first viewport and the case read on the card back behind the Details chip, so long facts cost the reader a flip, not the page its scanability.');
+  console.log('\nOption ids return verbatim in ANSWER; "reroll" and "canon" are reserved. hero/board/comp accept URLs or local paths; comp slots may point at files that do not exist yet (serve first, generate after; the page polls until they land, so never block serving on generation). hero on a challenger is the inspiration it draws from and renders picture-in-picture beside the comp, never as the promise of the build. verdict routes rendering: "wins" and "competitive" challengers keep full cards, "declined" ones render demoted after them (narrow, quiet, art as a labeled thumb, "Adopt anyway"), with their kept line on the front; the page reorders declined cards to the end on its own. raised on the assigned card renders each donation as a named raise line. Salience parity: when the assigned card declares no comp (no image generation this round), catalog art on every card demotes to a labeled thumb, so what looks important is the verdict’s call, never rendering luck. canonCard renders the standing exit as a subordinate card with the same anatomy; without it, canon stays a quiet footer action. Include canon only for visual-direction rounds; never present it as your own recommendation. The pick card is a kicker convention, not a field: kicker "IMPECCABLE’S PICK" on your top-ranked grounded candidate, one at most, never in the lead slot. Every card gets the full anatomy, challengers, canon, and declined included: thesis, palette, materials, viewport, risk; the seed already hands you each challenger’s system rules, so a card with no palette chips is an authoring gap, not a data gap. Keep thesis and each fact to one short sentence: the card front shows thesis, identity, and a two-line risk, while first viewport and the case read on the card back behind the Details chip, so long facts cost the reader a flip, not the page its scanability. A card with no imagery at all has no back; its full read renders on the front, so a text-only round loses nothing. A card may instead declare "wireframe" ({"cols":12,"rows":10,"regions":[{"label":"nav rail","x":0,"y":0,"w":3,"h":10,"accent":true}]}): the page draws it as a layout schematic in the media slot; surface-scope rounds use it on code-led builds, it never counts toward salience, and the card keeps its full read on the front. The comp slot carries the card’s full-fidelity direction comp (the legacy key "sketch" is accepted as an alias). Comp aspect follows the surface: portrait at device viewport for native or mobile-first surfaces, landscape otherwise; the page adapts its cards to either. reroll accepts true or { "registers": ["safer", "bolder"] }: the register buttons steer the next hand along the familiar-to-bold axis, the answer carries "register", and you re-run concept-seed with --register <value> for the next round; offer the registers on direction rounds, and never pre-select one. buildPath rides the payload as { "value": "comp"|"code", "toggle": true }: the value is the recorded default (.impeccable/config.json buildPath, or .impeccable/config.local.json where one machine differs) and the toggle renders a footer switch whose flip binds that session only; the ANSWER then carries buildPath plus buildPathFlipped. On a code-led round each card still declares its comp path as a flip reserve: wireframes render, and a flip to comp makes --wait return once with BUILD PATH FLIPPED so you generate the comps into the declared slots while the round stays open; a flip back to code is free, and a comp that already landed stays as the critique reference. The toggle may only be offered when image generation exists: a harness with no image tool and no API key never sets toggle: true, so the choice never renders where comps cannot be made, and code-led simply rides as the untoggleable value. followup: true keeps the table open after a pick for a second round via --update; send the next payload immediately, the page is waiting on it.');
   process.exit(0);
 }
 
@@ -161,15 +213,32 @@ if (hasFlag('wait')) {
   const pollSec = Number(arg('poll', '60'));
   const deadline = Date.now() + pollSec * 1000;
   const answered = () => fs.existsSync(answerFile(key));
+  // Liveness must survive sandboxes: a sandboxed --wait cannot signal the
+  // daemon (kill throws EPERM even for a living process), so a fresh page
+  // heartbeat in the state file is the primary proof of life, the kill probe
+  // is secondary, and EPERM specifically means "exists, but the sandbox
+  // blocks signals", never "dead". Treating EPERM as death told one session
+  // the user had walked away while they were still reading the board.
   const alive = () => {
-    try { process.kill(JSON.parse(fs.readFileSync(stateFile(key), 'utf8')).pid, 0); return true; }
-    catch { return false; }
+    try {
+      const state = JSON.parse(fs.readFileSync(stateFile(key), 'utf8'));
+      if (state.lastBeat && Date.now() - state.lastBeat < 12000) return true;
+      try { process.kill(state.pid, 0); return true; }
+      catch (err) { return err.code === 'EPERM'; }
+    } catch { return false; }
   };
   let sawClose = false;
   while (Date.now() < deadline) {
     if (answered()) break;
+    // A build-path flip is its own event, not an answer: the round stays
+    // open, and the agent's job right now is comps, not code.
+    if (fs.existsSync(flipFile(key))) {
+      try { fs.rmSync(flipFile(key)); } catch { /* consumed elsewhere */ }
+      console.log('BUILD PATH FLIPPED: comp (for this session only; never write it to settings). The table is still open and the page shows shimmer where the images will land: generate each open card’s comp into its declared path now, lead first, then collect the answer with --wait again. A card whose comp already exists needs nothing.');
+      process.exit(0);
+    }
     if (!alive()) {
-      console.log('serve-question: the question server is gone with no answer');
+      console.log('serve-question: the question server is gone with no answer. This is a server failure, not a user decision: restart it with --start and the same payload, reopen the URL for the user, and wait again. Never proceed without their choice while their browser session is open.');
       process.exit(2);
     }
     try {
@@ -185,12 +254,16 @@ if (hasFlag('wait')) {
   if (!answered()) { console.log(`WAITING: no answer yet after ${pollSec}s; run --wait --key ${key} again`); process.exit(3); }
   const collected = fs.readFileSync(answerFile(key), 'utf8').trim();
   printAnswer(collected);
-  // A re-roll keeps the table open: the server stays alive awaiting --update,
-  // so only the answer file is consumed. Terminal choices clean up fully.
-  let isRerollAnswer = false;
-  try { isRerollAnswer = JSON.parse(collected).optionId === 'reroll'; } catch { /* treat as terminal */ }
+  // A re-roll or a followup-round pick keeps the table open: the server stays
+  // alive awaiting --update, so only the answer file is consumed. Terminal
+  // choices clean up fully.
+  let keepsTableOpen = false;
+  try {
+    const parsedAnswer = JSON.parse(collected);
+    keepsTableOpen = parsedAnswer.optionId === 'reroll' || parsedAnswer.followup === true;
+  } catch { /* treat as terminal */ }
   try { fs.rmSync(answerFile(key)); } catch { /* already gone */ }
-  if (!isRerollAnswer) { try { fs.rmSync(stateFile(key)); } catch { /* already gone */ } }
+  if (!keepsTableOpen) { try { fs.rmSync(stateFile(key)); } catch { /* already gone */ } }
   process.exit(0);
 }
 
@@ -259,6 +332,12 @@ else raw = fs.readFileSync(0, 'utf8');
 let payload;
 let options;
 let localImages = [];
+// Build path (comp-led vs code-led): the payload carries the recorded
+// default; the page's toggle updates the live value per session. The server
+// owns both so the final ANSWER states the path and whether it was flipped
+// even when the round never rendered a toggle.
+let buildPathDefault = null;
+let liveBuildPath = null;
 
 function loadRound(json) {
   const parsed = JSON.parse(json);
@@ -274,10 +353,10 @@ function loadRound(json) {
     localImages.push(abs);
     return `/img/${localImages.length - 1}`;
   };
-  // Sketches stream in after the page is served, so their slots register
+  // Comps stream in after the page is served, so their slots register
   // whether or not the file exists yet; /img answers 404 until it lands and
-  // the page polls the slot. Remote sketch URLs pass through untouched.
-  const sketchSrc = (value) => {
+  // the page polls the slot. Remote comp URLs pass through untouched.
+  const compSrc = (value) => {
     if (!value) return null;
     if (/^https?:\/\//.test(value)) return value;
     localImages.push(path.resolve(value));
@@ -288,14 +367,26 @@ function loadRound(json) {
     ...option,
     heroSrc: imageSrc(option.hero),
     boardSrc: imageSrc(option.board),
-    sketchSrc: sketchSrc(option.sketch),
+    compSrc: compSrc(option.comp ?? option.sketch),
   });
   options = parsed.options.map(decorate);
+  // The verdict routes rendering: full cards first, then the canon, then the
+  // declined cards dead last in their own payload order. The reorder happens
+  // here so a payload that interleaves them still renders the weighing's
+  // shape, and the deck reads as a gradient of standing: contenders, the
+  // familiar door, then the demoted row.
+  const declined = options.filter((o) => o.verdict === 'declined');
+  options = options.filter((o) => o.verdict !== 'declined');
   // The standing exit as a full card: same anatomy, reserved id, rendered
   // subordinate by the page. Without it, canon stays the quiet footer action.
   if (parsed.canonCard && typeof parsed.canonCard === 'object') {
     options = [...options, { ...decorate(parsed.canonCard), id: 'canon', isCanon: true }];
   }
+  options = [...options, ...declined];
+  buildPathDefault = (parsed.buildPath && (parsed.buildPath.value === 'comp' || parsed.buildPath.value === 'code'))
+    ? { value: parsed.buildPath.value, toggle: parsed.buildPath.toggle === true }
+    : null;
+  liveBuildPath = buildPathDefault?.value ?? null;
 }
 try { loadRound(raw); } catch (error) { console.error(`serve-question: ${error.message}`); process.exit(1); }
 const detachedKey = hasFlag('detached-serve') ? arg('key') : null;
@@ -311,7 +402,30 @@ function page() {
   // and material tags give a text-only direction an immediate identity that
   // no generation luck can distort.
   const fact = (label, value, cls = '') => value ? `<p class="fact${cls ? ` ${cls}` : ''}"><span class="fact-label">${label}</span>${esc(value)}</p>` : '';
-  const hasBack = (option) => Boolean(option.viewport || option.case || (option.boardSrc && option.heroSrc));
+  const demoted = (option) => option.verdict === 'declined';
+  // The build path (comp-led vs code-led) is a workflow preference, not a
+  // design decision: the payload carries the recorded default and whether
+  // the page offers the toggle. On a code-led round a declared comp path is
+  // a flip reserve, not a face: wireframes render, and the slot only starts
+  // shimmering when the user flips to comp.
+  const buildPath = buildPathDefault;
+  const codeLed = buildPath?.value === 'code';
+  // Salience parity: a card's imagery weight is capped by the assigned card's.
+  // When the lead card has no media at all (no image generation this round,
+  // and no catalog art of its own), full-bleed catalog art beside a text-only
+  // assigned card would let rendering luck outvote the weighing: users click
+  // the colorful thing. Declined cards are thumb-only regardless; the verdict
+  // demoted them, and a full-bleed hero would promote them right back.
+  const identityRound = !(options[0] && (options[0].compSrc || options[0].heroSrc || options[0].boardSrc));
+  // A declined card never renders a full media face, comp included: even a
+  // declared comp would buy back the salience the verdict took away.
+  const faceComp = (option) => (demoted(option) || codeLed) ? null : option.compSrc;
+  const thumbOnly = (option) => !faceComp(option) && Boolean(option.heroSrc || option.boardSrc) && (demoted(option) || identityRound);
+  const hasMedia = (option) => Boolean(faceComp(option) || ((option.heroSrc || option.boardSrc) && !thumbOnly(option)));
+  // The back exists to keep long facts off a card whose front is an image;
+  // a card with no art has no flip chip to reach it, so it gets no back and
+  // the full read lives on the front instead.
+  const hasBack = (option) => hasMedia(option) && Boolean(option.viewport || option.case || (option.boardSrc && option.heroSrc));
   const anatomy = (option) => {
     const rows = [];
     if (option.thesis) rows.push(`<p class="thesis">${esc(option.thesis)}</p>`);
@@ -323,10 +437,44 @@ function page() {
       idBits.push(option.materials.slice(0, 4).map((m) => `<span class="tag">${esc(m)}</span>`).join(''));
     }
     if (idBits.length) rows.push(`<div class="identity">${idBits.join('')}</div>`);
+    // Donations from declined challengers render as named raise lines: the
+    // assigned card arrives already raised by the hand it beat, and the raise
+    // is readable, because a raise nobody can read did not happen. One raise
+    // renders inline; several become a compact cycler (click advances), so a
+    // generous hand cannot blow the card out of proportion.
+    if (Array.isArray(option.raised) && option.raised.length) {
+      const nameOf = (id) => options.find((o) => o.id === id)?.label || String(id ?? '');
+      const raiseLines = option.raised.slice(0, 6).map((r) => `<p class="raise"><span class="fact-label">From ${esc(nameOf(r.from))}</span>${esc(r.raise || r.kept || '')}</p>`);
+      const raisesHead = (count) => `<div class="raises-head"><span class="fact-label">Improved by Impeccable's worlds</span>${count > 1 ? `<span class="raises-count" data-raises-count>1/${count}</span>` : ''}</div>`;
+      if (raiseLines.length > 1) {
+        rows.push(`<div class="raises raises-cycle" role="button" tabindex="0" title="Click or press Enter for the next improvement" aria-label="How Impeccable's worlds improved this direction; activate to see the next improvement">
+              ${raisesHead(raiseLines.length)}
+              ${raiseLines.join('')}
+              <span class="sr-live" aria-live="polite"></span>
+            </div>`);
+      } else {
+        rows.push(`<div class="raises">${raisesHead(1)}${raiseLines[0]}</div>`);
+      }
+    }
+    // Demoted art stays reachable as a labeled thumb: the catalog world
+    // explains where the direction comes from without buying it back the
+    // salience the verdict took away.
+    if (thumbOnly(option)) {
+      rows.push(`<figure class="inspo" title="Inspiration: the world this direction draws from. Your page will not look like this image."><img src="${esc(option.heroSrc || option.boardSrc)}" alt=""><figcaption>inspired by</figcaption></figure>`);
+    }
     // The front carries only what the choice needs: thesis, identity, and the
     // honest risk clamped to two lines. First viewport and the case read on
-    // the card's back; once the sketch lands, the first viewport is a picture.
-    rows.push(fact('Risk', option.risk, 'clamp'));
+    // the card's back; once the comp lands, the first viewport is a picture.
+    // With no art there is no back, so the full read fills the room the
+    // image would have taken.
+    if (hasMedia(option)) {
+      rows.push(fact('Risk', option.risk, 'clamp'));
+    } else {
+      rows.push(fact('First viewport', option.viewport));
+      rows.push(fact('The case', option.case));
+      rows.push(fact('Kept', option.kept));
+      rows.push(fact('Risk', option.risk));
+    }
     if (!option.thesis && option.body) rows.push(`<p class="detail">${esc(option.body)}</p>`);
     else if (option.body && option.thesis && !hasBack(option)) rows.push(`<p class="detail more">${esc(option.body)}</p>`);
     return rows.join('\n            ');
@@ -334,42 +482,76 @@ function page() {
   const backFacts = (option) => [
     fact('First viewport', option.viewport),
     fact('The case', option.case),
+    fact('Kept', option.kept),
     fact('Risk', option.risk),
     option.body && option.thesis ? `<p class="detail more">${esc(option.body)}</p>` : '',
   ].filter(Boolean).join('\n            ');
   const media = (option) => {
-    const inspiration = option.heroSrc ? `<figure class="pip" title="Inspiration: the world this direction draws from. Your page will not look like this image.">
-              <img src="${esc(option.heroSrc)}" alt="">
+    const inspirationSrc = option.heroSrc || option.boardSrc;
+    const inspiration = inspirationSrc ? `<figure class="pip" title="Inspiration: the world this direction draws from. Your page will not look like this image.">
+              <img src="${esc(inspirationSrc)}" alt="">
               <figcaption>inspiration</figcaption>
             </figure>` : '';
     const details = hasBack(option) ? flipChip('Details') : '';
-    if (option.sketchSrc) {
-      return `<div class="media sketching" data-sketch="${esc(option.sketchSrc)}">
-            <div class="shimmer"><span class="sketch-note">sketching&hellip;</span></div>
-            <img class="sketch" alt="" hidden>
+    // Thumb-only art renders inside the body via anatomy(), never as a face,
+    // and a declined card's comp slot is ignored outright.
+    if (thumbOnly(option)) return '';
+    if (faceComp(option)) {
+      const textOnlyFacts = backFacts(option);
+      return `<div class="media comp-pending" data-comp="${esc(option.compSrc)}">
+            <div class="shimmer"><span class="comp-note">rendering&hellip;</span></div>
+            <img class="comp" alt="" hidden>
             ${inspiration}
+            <template class="text-only-facts">${textOnlyFacts}</template>
             <div class="chips">${expandChip}${details}</div>
           </div>`;
     }
     if (option.heroSrc || option.boardSrc) {
-      return `<div class="media">
+      // Without a comp the catalog art is the card's face; it stays a
+      // labeled reference so it never reads as the promise of the build.
+      return `<div class="media" title="Inspiration: the world this direction draws from. Your page will not look like this image.">
             <img src="${esc(option.heroSrc || option.boardSrc)}" alt="">
+            <p class="media-label">inspiration</p>
             <div class="chips">${expandChip}${details}</div>
           </div>`;
     }
     return '';
   };
+  // Wireframe media: a code-led card's layout schematic, authored as grid
+  // regions in the payload and drawn by the page; boxes and labels, no art.
+  // It fills the media slot only when the card has no imagery, and it never
+  // counts toward salience or earns a card back: the full read stays on the
+  // front, exactly like a text-only card.
+  const wire = (option) => {
+    const frame = option.wireframe;
+    if (!frame || !Array.isArray(frame.regions) || !frame.regions.length || media(option) || demoted(option)) return '';
+    const cols = Number(frame.cols) > 0 ? Number(frame.cols) : 12;
+    const rows = Number(frame.rows) > 0 ? Number(frame.rows) : 10;
+    const pct = (n, total) => `${Math.max(0, Math.min(100, (n / total) * 100)).toFixed(2)}%`;
+    const cells = frame.regions.slice(0, 12).map((region) => {
+      const x = Number(region.x) || 0;
+      const y = Number(region.y) || 0;
+      const w = Math.max(Number(region.w) || 1, 0.5);
+      const h = Math.max(Number(region.h) || 1, 0.5);
+      return `<div class="wire-region${region.accent ? ' accent' : ''}" style="left:${pct(x, cols)};top:${pct(y, rows)};width:${pct(w, cols)};height:${pct(h, rows)}"><span>${esc(region.label || '')}</span></div>`;
+    }).join('');
+    return `<div class="media wire" role="img" aria-label="Layout schematic">
+            <div class="wire-field">${cells}</div>
+            <p class="media-label">layout</p>
+          </div>`;
+  };
+  const chooseLabel = (option) => option.isCanon ? 'Play it straight' : demoted(option) ? 'Adopt anyway' : 'Build this';
   const cards = options.map((option, index) => `
-    <article class="card${option.isCanon ? ' canon' : ''}" style="--fan:${index === 0 ? '0deg' : (index % 2 ? '1.4deg' : '-1.2deg')};--deal:${index * 90}ms" data-id="${esc(option.id)}">
+    <article class="card${option.isCanon ? ' canon' : ''}${demoted(option) ? ' declined' : ''}" style="--fan:${index === 0 ? '0deg' : (index % 2 ? '1.4deg' : '-1.2deg')};--deal:${index * 90}ms" data-id="${esc(option.id)}"${codeLed && option.compSrc && !demoted(option) ? ` data-comp-slot="${esc(option.compSrc)}"` : ''}>
       <div class="card-inner">
-        <div class="face front${index === 0 ? ' lead' : ''}${media(option) ? '' : ' text-only'}">
-          ${option.kicker ? `<span class="kicker">${esc(option.kicker)}</span>` : option.isCanon ? '<span class="kicker standing">The standing door</span>' : ''}
-          ${media(option)}
+        <div class="face front${index === 0 ? ' lead' : ''}${(media(option) || wire(option)) ? '' : ' text-only'}">
+          ${option.kicker ? `<span class="kicker">${esc(option.kicker)}</span>` : demoted(option) ? '<span class="kicker declined-k">Declined</span>' : option.isCanon ? '<span class="kicker standing">The standing door</span>' : ''}
+          ${media(option) || wire(option)}
           <div class="body">
             ${option.lineage ? `<p class="tier">${esc(option.lineage)}</p>` : ''}
             <h2>${esc(option.label)}</h2>
             ${anatomy(option)}
-            <button class="choose" data-id="${esc(option.id)}">${option.isCanon ? 'Play it straight' : 'Build this'}</button>
+            <button class="choose" data-id="${esc(option.id)}">${chooseLabel(option)}</button>
           </div>
         </div>
         ${hasBack(option) ? `<div class="face back${index === 0 ? ' lead' : ''}">
@@ -380,7 +562,7 @@ function page() {
           <div class="body back-body">
             ${option.boardSrc ? `<p class="tier">The full read &middot; ${esc(option.label)}</p>` : ''}
             ${backFacts(option)}
-            <button class="choose" data-id="${esc(option.id)}">${option.isCanon ? 'Play it straight' : 'Build this'}</button>
+            <button class="choose" data-id="${esc(option.id)}">${chooseLabel(option)}</button>
           </div>
         </div>` : ''}
       </div>
@@ -413,9 +595,12 @@ function page() {
     --ks-font-display: "Alumni Sans", "Albert Sans", Arial, sans-serif;
     --ks-font: "Albert Sans", "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif;
     --ks-mono: "SFMono-Regular", "Roboto Mono", "JetBrains Mono", Consolas, monospace;
+    /* One inset shared by the content column, the deck's snap padding, and
+       the sticky footer, so all three align on the same 90rem column. */
+    --page-inset: max(clamp(1rem, 5vw, 4rem), calc((100vw - 90rem) / 2));
   }
   * { box-sizing: border-box; margin: 0; }
-  body { background: var(--ks-lacquer); color: var(--ks-text); font: 15px/1.55 var(--ks-font); padding: 1.8rem clamp(1rem, 5vw, 4rem) 2rem; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
+  body { background: var(--ks-lacquer); color: var(--ks-text); font: 15px/1.55 var(--ks-font); padding: 1.8rem clamp(1rem, 5vw, 4rem) 0; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
   #ambient { position: fixed; inset: -40px; z-index: 0; background-size: cover; background-position: center; filter: blur(34px) saturate(1.05); opacity: 0; transition: opacity .55s ease, background-image .2s; pointer-events: none; }
   #scrim { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, oklch(7% 0.006 95 / 0.62), oklch(7% 0.006 95 / 0.78)); pointer-events: none; }
   header, main, footer { position: relative; z-index: 1; }
@@ -427,7 +612,7 @@ function page() {
   .brand { display: flex; align-items: center; gap: .55rem; color: var(--ks-kinpaku); }
   .brand svg { width: 22px; height: 22px; }
   .wordmark { font-family: var(--ks-font-display); font-weight: 400; font-size: 1.125rem; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1; color: var(--ks-kinpaku); }
-  .headline { display: flex; align-items: center; gap: .9rem; }
+  .headline { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
   .headline-die { flex: none; width: 34px; height: 34px; color: var(--ks-kinpaku); }
   h1 { font-family: var(--ks-font-display); font-weight: 100; font-size: clamp(2.6rem, 5vw, 4.2rem); letter-spacing: -0.01em; line-height: 1.02; color: var(--ks-champagne); }
   .question { color: var(--ks-text-muted); margin-top: .7rem; max-width: 52rem; }
@@ -439,9 +624,24 @@ function page() {
   .deck-shell { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
   /* One row in a wide viewport, one column in a tall one; the deck scrolls on
      its axis with snap points and the arrows page it card by card. */
-  .grid { --deck-inset: max(clamp(1rem, 5vw, 4rem), calc((100vw - 90rem) / 2)); display: flex; gap: 1.6rem; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px var(--deck-inset); scroll-padding-inline: var(--deck-inset); align-items: stretch; }
+  .grid { --deck-inset: var(--page-inset); display: flex; gap: 1.6rem; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px var(--deck-inset); scroll-padding-inline: var(--deck-inset); align-items: stretch; }
   .grid::-webkit-scrollbar { display: none; }
-  .grid > .card { flex: 0 0 clamp(20rem, 27vw, 27rem); scroll-snap-align: center; }
+  /* Wide enough that the comp carries the card: at 27vw the imagery read
+     as a thumbnail above a column of copy, and the copy won the attention
+     contest the comp is supposed to win. */
+  .grid > .card { flex: 0 0 clamp(24rem, 34vw, 34rem); scroll-snap-align: center; }
+  /* Short landscape viewports (13-inch laptops): header, a 34vw card, and the
+     footer do not fit 800px of height, so the headline compacts and the deck
+     narrows. Height is the axis that gives; the sticky footer keeps the
+     round's verbs on screen while a too-tall card scrolls. */
+  @media (min-aspect-ratio: 1/1) and (max-height: 900px) {
+    body { padding-top: 1.1rem; }
+    h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
+    .question { margin-top: .45rem; }
+    .stage { gap: 1rem; }
+    .grid > .card { flex-basis: clamp(20rem, 27vw, 27rem); }
+    .grid > .card.declined { flex-basis: clamp(13rem, 18vw, 18rem); }
+  }
   .nav { position: absolute; z-index: 6; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: oklch(7% 0.006 95 / 0.78); border: 1px solid var(--ks-rule); color: var(--ks-kinpaku); cursor: pointer; backdrop-filter: blur(6px); transition: border-color .2s, color .2s, opacity .2s; }
   .nav:hover { border-color: var(--ks-kinpaku-deep); color: var(--ks-kinpaku-pale); }
   .nav[disabled] { opacity: .25; cursor: default; }
@@ -468,6 +668,14 @@ function page() {
     .nav.next { right: auto; left: 50%; top: auto; bottom: 6px; transform: translate(-50%, 0); }
     .fade-prev { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 72px; background: linear-gradient(180deg, var(--ks-lacquer), transparent); }
     .fade-next { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 72px; background: linear-gradient(0deg, var(--ks-lacquer), transparent); }
+    /* In the vertical deck the cross axis is horizontal: flex-start would
+       shrink a declined card to content WIDTH, not height, so it stretches
+       like every other card and its height is already its own. */
+    .grid > .card.declined { align-self: stretch; }
+    /* The sticky bar is a wide-viewport fix. Here it would sit over the
+       deck's More pager and cost a third of a phone screen, and the deck
+       already scrolls internally, so the footer stays in the page flow. */
+    footer { position: static; width: auto; margin: 1rem 0 0; padding: .7rem 0 1.2rem; background: transparent; border-top: 0; backdrop-filter: none; }
   }
   .card { position: relative; perspective: 1400px; transform: rotate(var(--fan, 0deg)); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
   .card:hover { transform: rotate(0deg) translateY(-4px); }
@@ -491,8 +699,13 @@ function page() {
      region entirely instead of reserving a blank 16:9 void. */
   .face.text-only .kicker { position: static; align-self: flex-start; margin: 14px 0 0 14px; }
   .face.text-only .body { padding-top: 12px; }
-  .media { position: relative; width: 100%; aspect-ratio: 16/9; flex: none; }
+  /* 16/10 matches the landscape comp frame; portrait art overrides the
+     slot with its own exact ratio at load (see the load listener), and the
+     deck narrows so portrait cards line up side by side. */
+  .media { position: relative; width: 100%; aspect-ratio: 16/10; flex: none; }
+  .grid.portrait-media > .card { flex-basis: clamp(14rem, 19vw, 19rem); }
   .media img { width: 100%; height: 100%; object-fit: cover; display: block; background: linear-gradient(100deg, var(--ks-graphite) 40%, var(--ks-graphite-2) 50%, var(--ks-graphite) 60%); }
+  .media > img:not([hidden]) { cursor: zoom-in; }
   .face.back { background: var(--ks-lacquer-raised); }
   .back-bar { margin-top: auto; background: var(--ks-lacquer-raised); }
   .hero-blank { width: 100%; height: 100%; background: linear-gradient(100deg, var(--ks-graphite) 40%, var(--ks-graphite-2) 50%, var(--ks-graphite) 60%); }
@@ -522,24 +735,82 @@ function page() {
   .body.back-body { overflow-y: auto; flex: 1; scrollbar-width: thin; }
   /* Inspiration rides picture-in-picture: the catalog world explains where the
      direction comes from without promising what the build will look like. */
-  /* Hovering the inspiration takes over the whole media region; the sketch is
+  /* Hovering the inspiration takes over the whole media region; the comp is
      the promise, the inspiration is a glance, so the glance must cost nothing. */
   .pip { position: absolute; z-index: 2; left: 10px; bottom: 10px; margin: 0; width: 84px; height: 64px; border: 1px solid var(--ks-rule); border-radius: 6px; overflow: hidden; background: var(--ks-lacquer); cursor: zoom-in; transition: left .35s cubic-bezier(.16,1,.3,1), bottom .35s cubic-bezier(.16,1,.3,1), width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1), border-radius .35s ease; box-shadow: 0 6px 18px oklch(0% 0 0 / 0.45); }
   .pip img { display: block; width: 100%; height: 100%; object-fit: cover; }
   .pip figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--ks-mono); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ks-text); text-align: center; padding: 3px 0 4px; background: oklch(7% 0.006 95 / 0.72); backdrop-filter: blur(3px); }
   .pip:hover { left: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; z-index: 3; }
-  .sketch-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ks-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ks-text-faint); }
+  .comp-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ks-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ks-text-faint); }
+  /* Catalog art standing in for a comp-less card is a reference, and says so
+     on its face; the same pill later carries "artwork unavailable". */
+  .media-label { position: absolute; z-index: 2; left: 10px; bottom: 10px; margin: 0; font-family: var(--ks-mono); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ks-text); padding: 3px 8px 4px; background: oklch(7% 0.006 95 / 0.72); border: 1px solid var(--ks-rule); border-radius: 4px; backdrop-filter: blur(3px); }
+  /* Art that never arrives collapses to the card's own palette (painted
+     inline from its swatches) instead of sitting as a dark void wearing a
+     zoom cursor; the scrim keeps the label legible over saturated fields,
+     passes clicks through, and the flip chips stay above it. A card with no
+     palette falls back to the quiet graphite field. */
+  .media.unavailable { background: linear-gradient(100deg, var(--ks-graphite) 40%, var(--ks-graphite-2) 50%, var(--ks-graphite) 60%); }
+  .media.unavailable::after { content: ""; position: absolute; inset: 0; z-index: 1; background: oklch(10% 0.008 95 / 0.45); pointer-events: none; }
+  .media.unavailable .chips { z-index: 2; }
   /* A stand-in is honest about being one: dimmed, labeled, and replaced by
-     the real sketch whenever it lands. */
-  .media.stand-in img.sketch { filter: brightness(.72) saturate(.85); }
+     the real comp whenever it lands. */
+  .media.stand-in img.comp { filter: brightness(.72) saturate(.85); }
   .media.stand-in .pip { display: none; }
   .stand-in-label { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; font-family: var(--ks-mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ks-text); text-align: center; padding: 4px 0 5px; background: oklch(7% 0.006 95 / 0.78); backdrop-filter: blur(3px); }
-  .media.sketching { position: relative; }
-  .media.sketching .shimmer { position: absolute; inset: 0; }
-  .media img.sketch { position: relative; z-index: 1; }
+  .media.comp-pending { position: relative; }
+  .media.comp-pending .shimmer { position: absolute; inset: 0; }
+  .media img.comp { position: relative; z-index: 1; }
   /* The generic .media img display:block would defeat [hidden] and float an
-     empty block over the shimmer; an unloaded sketch must truly not render. */
+     empty block over the shimmer; an unloaded comp must truly not render. */
   .media img[hidden] { display: none; }
+  /* Declined challengers: the weighing demoted them, so the card is narrower
+     and quieter, its catalog art rides as a labeled thumb in the body, and
+     the action reads "Adopt anyway". Adoptable, never deleted: the demoted
+     row is the hand's proof of judgment. */
+  /* Narrow AND short: without align-self the stretch default drags a thin
+     declined card to the tallest contender's height, a strange stilt of a
+     card beside the full hand. */
+  .grid > .card.declined { flex: 0 0 clamp(15rem, 21vw, 21rem); align-self: flex-start; }
+  .card.declined .face { background: var(--ks-graphite); }
+  .card.declined:hover .face { border-color: var(--ks-text-faint); }
+  .card.declined h2 { font-size: 1rem; color: var(--ks-text); }
+  .kicker.declined-k { background: transparent; border: 1px solid var(--ks-rule); color: var(--ks-text-faint); }
+  .card.declined button.choose { background: transparent; color: var(--ks-text-muted); border: 1px solid var(--ks-rule); font-size: .85rem; padding: 8px 22px; }
+  .card.declined button.choose:hover { background: var(--ks-graphite-2); border-color: var(--ks-text-muted); }
+  /* Wireframe media: the code-led schematic. Quiet boxes in the card's own
+     chrome; uniform salience across cards by construction, so it needs no
+     parity rules. */
+  .media.wire { background: var(--ks-lacquer); border-bottom: 1px solid var(--ks-rule); }
+  .wire-field { position: absolute; inset: 12px 12px 26px; }
+  .wire-region { position: absolute; border: 1px solid oklch(78% 0 0 / 0.26); border-radius: 3px; background: oklch(78% 0 0 / 0.05); display: flex; align-items: center; justify-content: center; overflow: hidden; }
+  .wire-region span { font-family: var(--ks-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ks-text-faint); text-align: center; padding: 2px 4px; }
+  .wire-region.accent { border-color: oklch(84% 0.19 80.46 / 0.5); background: oklch(84% 0.19 80.46 / 0.06); }
+  .wire-region.accent span { color: var(--ks-kinpaku-rich); }
+  /* Thumb-scale inspiration: present, labeled, zoomable, and incapable of
+     outshouting a text-only assigned card. */
+  .inspo { position: relative; flex: none; margin: 2px 0; width: 104px; height: 64px; border: 1px solid var(--ks-rule); border-radius: 6px; overflow: hidden; cursor: zoom-in; background: var(--ks-lacquer); }
+  .inspo img { display: block; width: 100%; height: 100%; object-fit: cover; }
+  .inspo figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--ks-mono); font-size: .48rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ks-text); text-align: center; padding: 2px 0 3px; background: oklch(7% 0.006 95 / 0.72); }
+  /* Raises: the improvements the dealt worlds donated to the assigned
+     direction, each named for its donor world. Patina, not kinpaku:
+     provenance, not a call to action. A quiet contained panel, never an
+     accent side-tab. */
+  .raises { display: flex; flex-direction: column; gap: 4px; margin: 2px 0; padding: 7px 10px 8px; background: oklch(70% 0.12 188 / 0.06); border: 1px solid oklch(70% 0.12 188 / 0.22); border-radius: 8px; }
+  .raise { font-size: .78rem; color: var(--ks-text-muted); line-height: 1.45; }
+  .raise .fact-label { color: var(--ks-patina); }
+  /* Several kept ideas cycle instead of stacking: one visible at a time, a
+     counter for the rest, the whole block advances on click. */
+  .raises-cycle { cursor: pointer; transition: border-color .2s ease; }
+  .raises-cycle:hover { border-color: oklch(70% 0.12 188 / 0.45); }
+  .raises-cycle .raise { display: none; }
+  .raises-cycle .raise.active { display: block; }
+  .raises-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+  .raises-head .fact-label { color: var(--ks-patina); }
+  .raises-count { font-family: var(--ks-mono); font-size: .58rem; letter-spacing: .14em; color: var(--ks-text-faint); }
+  .raises-count::after { content: " \\203A"; }
+  .raises-cycle:hover .raises-count { color: var(--ks-patina); }
+  .sr-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   /* The standing exit as a card: present with full anatomy, never dressed as a
      contender. Graphite instead of kinpaku, and it never takes the lead ring. */
   .card.canon .face { border-color: var(--ks-rule); background: var(--ks-graphite); }
@@ -549,12 +820,47 @@ function page() {
   .card.canon button.choose:hover { border-color: var(--ks-text-muted); background: var(--ks-graphite-2); }
   button.choose { margin-top: auto; align-self: start; background: var(--ks-kinpaku); color: var(--ks-dark-ink); border: 0; font-family: var(--ks-font); font-size: 1rem; font-weight: 500; line-height: 1.35; padding: 10px 38px; border-radius: 6px; cursor: pointer; transition: background .15s; }
   button.choose:hover { background: var(--ks-kinpaku-pale); }
-  footer { width: 100%; max-width: 90rem; margin: 1.6rem auto 0; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
+  /* The round's verbs stay reachable on short viewports: the footer is a
+     full-bleed bar stuck to the viewport bottom and the deck scrolls under
+     it. Same inset as the content column, so the controls stay aligned. */
+  footer { position: sticky; bottom: 0; z-index: 10; width: 100vw; margin: 1.2rem calc(50% - 50vw) 0; padding: .7rem var(--page-inset) calc(.7rem + env(safe-area-inset-bottom, 0px)); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; background: oklch(7% 0.006 95 / 0.82); backdrop-filter: blur(10px); border-top: 1px solid var(--ks-rule); }
   #steer { flex: 1; min-width: 16rem; background: var(--ks-lacquer-raised); color: var(--ks-text); border: 1px solid var(--ks-rule); border-radius: 7px; padding: .6rem .85rem; font: inherit; }
   #steer:focus { outline: none; border-color: var(--ks-patina); }
-  #reroll { display: inline-flex; align-items: center; align-self: stretch; gap: 8px; padding: 0 16px; font-family: var(--ks-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-kinpaku); background: transparent; border: 1px solid var(--ks-rule); border-radius: 6px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
-  #reroll:hover { color: var(--ks-kinpaku-pale); border-color: var(--ks-kinpaku-deep); }
-  #reroll svg { width: 15px; height: 15px; }
+  /* Build-path toggle: a workflow preference surfaced as a quiet segmented
+     control on the headline row, right-aligned opposite the title, its trade stated in
+     one line that changes with the selection. The default comes from the
+     payload (settings); flipping binds this session only, and the agent
+     learns about a code-to-comp flip live. Rendered only when the payload
+     offers it, which the agent does only when image generation exists. */
+  #build-path { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; margin-left: auto; }
+  .bp-switch { display: inline-flex; border: 1px solid var(--ks-rule); border-radius: 6px; overflow: hidden; }
+  .bp-note { text-align: right; }
+  .bp-opt { font-family: var(--ks-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; background: transparent; border: 0; color: var(--ks-text-faint); cursor: pointer; transition: color .2s ease, background-color .2s ease; }
+  .bp-opt + .bp-opt { border-left: 1px solid var(--ks-rule); }
+  .bp-opt.active { color: var(--ks-dark-ink); background: var(--ks-kinpaku-rich); }
+  .bp-opt:not(.active):hover { color: var(--ks-text); }
+  .bp-note { font-family: var(--ks-mono); font-size: .58rem; letter-spacing: .04em; color: var(--ks-text-faint); max-width: 21rem; line-height: 1.5; }
+  /* Flipping to comp starts billed, minutes-long generation, so it asks
+     first; flipping back is free and never does. */
+  #bp-confirm { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: oklch(4% 0.004 95 / 0.72); opacity: 0; transition: opacity .2s ease; }
+  #bp-confirm[hidden] { display: none; }
+  #bp-confirm.open { opacity: 1; }
+  .bp-confirm-panel { max-width: 26rem; margin: 1rem; background: var(--ks-lacquer-raised); border: 1px solid var(--ks-rule); border-radius: 10px; padding: 1.4rem 1.5rem 1.3rem; box-shadow: 0 30px 80px oklch(0% 0 0 / 0.55); }
+  .bp-confirm-panel h2 { font-family: var(--ks-font); font-size: 1.125rem; font-weight: 500; color: var(--ks-champagne); margin-bottom: .55rem; }
+  .bp-confirm-panel p { font-size: .875rem; line-height: 1.55; color: var(--ks-text-muted); }
+  .bp-confirm-actions { display: flex; gap: .6rem; margin-top: 1.1rem; }
+  .bp-confirm-go { background: var(--ks-kinpaku); color: var(--ks-dark-ink); border: 0; font: inherit; font-weight: 500; padding: 9px 22px; border-radius: 6px; cursor: pointer; }
+  .bp-confirm-go:hover { background: var(--ks-kinpaku-pale); }
+  .bp-confirm-stay { background: transparent; color: var(--ks-text-muted); border: 1px solid var(--ks-rule); font: inherit; padding: 9px 18px; border-radius: 6px; cursor: pointer; }
+  .bp-confirm-stay:hover { color: var(--ks-text); border-color: var(--ks-text-faint); }
+  .reroll-btn { display: inline-flex; align-items: center; align-self: stretch; gap: 8px; padding: 0 16px; font-family: var(--ks-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-kinpaku); background: transparent; border: 1px solid var(--ks-rule); border-radius: 6px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
+  .reroll-btn:hover { color: var(--ks-kinpaku-pale); border-color: var(--ks-kinpaku-deep); }
+  .reroll-btn svg { width: 15px; height: 15px; }
+  .reroll-btn[disabled] { opacity: .4; cursor: default; }
+  /* The register steers read quieter than the plain roll: they are exits from
+     the current register, not the round's main verbs. */
+  #reroll-safer, #reroll-bolder { color: var(--ks-text-muted); min-height: 38px; }
+  #reroll-safer:hover, #reroll-bolder:hover { color: var(--ks-text); border-color: var(--ks-text-faint); }
   /* The quiet exit: always available, never argued with, visually subordinate
      to the dealt cards and the re-roll so it reads as the user's own door,
      not a recommendation. */
@@ -575,6 +881,17 @@ function page() {
 <div id="ambient" aria-hidden="true"></div>
 <div id="scrim" aria-hidden="true"></div>
 <div id="lightbox" hidden><img alt=""></div>
+<template id="tpl-expand-chip">${expandChip}</template>
+${buildPath?.toggle ? `<div id="bp-confirm" role="dialog" aria-modal="true" aria-labelledby="bp-confirm-title" hidden>
+  <div class="bp-confirm-panel">
+    <h2 id="bp-confirm-title">Flip to comp-first?</h2>
+    <p>The agent starts rendering a comp for every open card right away, about a minute or two per card on your image provider, and the images land on the cards as they finish. This flip binds this session only.</p>
+    <div class="bp-confirm-actions">
+      <button type="button" class="bp-confirm-go" data-confirm>Render comps</button>
+      <button type="button" class="bp-confirm-stay" data-cancel>Keep code-first</button>
+    </div>
+  </div>
+</div>` : ''}
 <header>
   <div class="brand">
     <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"/><path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"/></svg>
@@ -586,6 +903,13 @@ function page() {
     <div class="headline">
       <svg class="headline-die" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="8.4" cy="8.4" r="1.5" fill="currentColor"/><circle cx="15.6" cy="8.4" r="1.5" fill="currentColor"/><circle cx="8.4" cy="15.6" r="1.5" fill="currentColor"/><circle cx="15.6" cy="15.6" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>
       <h1>${esc(payload.title || 'Choose a direction')}</h1>
+      ${buildPath?.toggle ? `<div id="build-path" data-default="${buildPath.value}">
+        <div class="bp-switch" role="radiogroup" aria-label="Build path">
+          <button type="button" class="bp-opt" data-bp="comp" role="radio" aria-checked="false">Comp first</button>
+          <button type="button" class="bp-opt" data-bp="code" role="radio" aria-checked="false">Code first</button>
+        </div>
+        <p class="bp-note" data-bp-note></p>
+      </div>` : ''}
     </div>
     ${payload.question ? `<p class="question">${esc(payload.question)}</p>` : ''}
     <div class="deck-shell">
@@ -599,16 +923,33 @@ function page() {
 </main>
 <footer>
   ${payload.steer ? '<input id="steer" placeholder="Optional steer: what should be different or kept?">' : ''}
-  ${payload.reroll ? '<button id="reroll"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="8.4" cy="8.4" r="1.5" fill="currentColor"/><circle cx="15.6" cy="8.4" r="1.5" fill="currentColor"/><circle cx="8.4" cy="15.6" r="1.5" fill="currentColor"/><circle cx="15.6" cy="15.6" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg><span>Re-roll</span></button>' : ''}
+  ${(() => {
+    if (!payload.reroll) return '';
+    const die = '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="8.4" cy="8.4" r="1.5" fill="currentColor"/><circle cx="15.6" cy="8.4" r="1.5" fill="currentColor"/><circle cx="8.4" cy="15.6" r="1.5" fill="currentColor"/><circle cx="15.6" cy="15.6" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>';
+    const registers = Array.isArray(payload.reroll.registers) ? payload.reroll.registers.filter((r) => r === 'safer' || r === 'bolder') : [];
+    // The registers are the user's steering wheel on the familiar-to-bold
+    // axis; the plain re-roll sits between them so the spatial order matches
+    // the axis it names.
+    const safer = registers.includes('safer') ? '<button class="reroll-btn" id="reroll-safer" title="Deal the familiar register: conventional grounded directions plus the category standard against named competitors"><span>&larr; Safer hand</span></button>' : '';
+    const bolder = registers.includes('bolder') ? '<button class="reroll-btn" id="reroll-bolder" title="Deal foreign forms only, at full commitment"><span>Bolder hand &rarr;</span></button>' : '';
+    return `${safer}<button class="reroll-btn" id="reroll">${die}<span>Re-roll</span></button>${bolder}`;
+  })()}
   ${payload.canon && !payload.canonCard ? '<button id="canon" title="Skip the roll: build the page this category ships, executed impeccably">Play it straight</button>' : ''}
 </footer>
 <script>
   const steer = () => document.getElementById('steer')?.value || '';
+  // A followup round's pick keeps the tab: the next round arrives via
+  // --update, so the page shows the loading hand instead of goodbye. Detached
+  // mode only, and the page must agree with the server: a blocking server
+  // exits on any pick and has no update channel, so a followup payload there
+  // still gets the goodbye screen, never a loading hand nothing will resolve.
+  const FOLLOWUP = ${payload.followup === true && Boolean(detachedKey) ? 'true' : 'false'};
   const beat = () => { try { navigator.sendBeacon('/heartbeat'); } catch { fetch('/heartbeat', { method: 'POST' }); } };
   beat();
   setInterval(beat, 5000);
   async function answer(optionId) {
     await fetch('/answer', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ optionId, steer: steer() }) });
+    if (FOLLOWUP) { await awaitNextRound(); return; }
     document.body.innerHTML = '<div class="done"><svg viewBox="0 0 24 24" width="38" height="38" fill="oklch(84% 0.19 80.46)" aria-hidden="true"><path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"/><path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"/></svg>Choice recorded. The agent is resuming; you can close this tab.</div>';
   }
   document.querySelectorAll('button.choose').forEach(b => b.addEventListener('click', () => answer(b.dataset.id)));
@@ -617,6 +958,25 @@ function page() {
     b.closest('.card').classList.toggle('flipped');
   }));
 
+  // Raise cycler: click (or Enter) advances to the next donation.
+  document.querySelectorAll('.raises-cycle').forEach(cycle => {
+    const raises = [...cycle.querySelectorAll('.raise')];
+    const count = cycle.querySelector('[data-raises-count]');
+    let at = 0;
+    const live = cycle.querySelector('.sr-live');
+    const show = (announce) => {
+      raises.forEach((raise, i) => raise.classList.toggle('active', i === at));
+      if (count) count.textContent = (at + 1) + '/' + raises.length;
+      // Screen readers hear the raise they just advanced to; the initial
+      // render stays quiet so page load does not narrate every card.
+      if (announce && live) live.textContent = 'Improvement ' + (at + 1) + ' of ' + raises.length + ': ' + (raises[at]?.textContent || '');
+    };
+    show(false);
+    const advance = (e) => { e.stopPropagation(); at = (at + 1) % raises.length; show(true); };
+    cycle.addEventListener('click', advance);
+    cycle.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); advance(e); } });
+  });
+
   // Deal from the stack: cards begin piled at the grid's center, blurred,
   // then travel to their seats with a stagger.
   const cards = [...document.querySelectorAll('.card')];
@@ -650,56 +1010,303 @@ function page() {
     }));
   }
 
-  // Sketches stream in after the deal: poll each slot until the file lands,
+  // Comps stream in after the deal: poll each slot until the file lands,
   // then swap the shimmer for the image. Generation is genuinely slow and a
   // sequential batch puts the last card many minutes out, so patience is the
   // default: a slot only shows its inspiration as a stand-in when it has
   // waited four minutes AND nothing has landed anywhere for four minutes, the
-  // stand-in is labeled as such, and polling continues so the real sketch
+  // stand-in is labeled as such, and polling continues so the real comp
   // still swaps in whenever it arrives. Progress anywhere resets patience.
   const landTracker = { last: Date.now() };
-  document.querySelectorAll('.media.sketching').forEach(m => {
-    const url = m.dataset.sketch;
-    const img = m.querySelector('img.sketch');
-    const note = m.querySelector('.sketch-note');
+  const pollComp = (m) => {
+    const url = m.dataset.comp;
+    // A converted slot is the SAME node across flip cycles, so a probe from an
+    // earlier cycle can still be in flight when the next one starts. Without a
+    // generation stamp its late onload settles the new slot: shimmer stripped,
+    // pending state cleared, comp still hidden, live poll stopped.
+    const generation = String(Number(m.dataset.pollGen || 0));
+    const current = () => String(Number(m.dataset.pollGen || 0)) === generation;
+    const img = m.querySelector('img.comp');
+    const note = m.querySelector('.comp-note');
     const started = Date.now();
     // A live elapsed count is the difference between "working" and "frozen".
-    const tick = setInterval(() => { if (note) note.textContent = 'sketching · ' + Math.round((Date.now() - started) / 1000) + 's'; }, 1000);
-    const settle = () => { clearInterval(tick); m.classList.remove('sketching', 'stand-in'); m.querySelector('.shimmer')?.remove(); m.querySelector('.stand-in-label')?.remove(); };
-    const standIn = () => {
+    const tick = setInterval(() => { if (note) note.textContent = 'rendering · ' + Math.round((Date.now() - started) / 1000) + 's'; }, 1000);
+    const settle = () => { clearInterval(tick); m.classList.remove('comp-pending', 'stand-in'); m.querySelector('.shimmer')?.remove(); m.querySelector('.stand-in-label')?.remove(); };
+    const fallback = () => {
       const pip = m.querySelector('.pip img');
-      if (!pip || m.classList.contains('stand-in')) return;
-      img.src = pip.getAttribute('src'); img.hidden = false;
-      m.classList.add('stand-in');
-      m.querySelector('.shimmer')?.remove();
-      clearInterval(tick);
-      const label = document.createElement('p');
-      label.className = 'stand-in-label';
-      label.textContent = 'inspiration · sketch pending';
-      m.appendChild(label);
+      if (pip) {
+        if (m.classList.contains('stand-in')) return false;
+        img.src = pip.getAttribute('src'); img.hidden = false;
+        m.classList.add('stand-in');
+        m.querySelector('.shimmer')?.remove();
+        clearInterval(tick);
+        const label = document.createElement('p');
+        label.className = 'stand-in-label';
+        label.textContent = 'inspiration · comp pending';
+        m.appendChild(label);
+        return false;
+      }
+
+      // No comp and no inspiration is the text-only card the payload would
+      // have rendered without a comp declaration. Bring the complete read
+      // forward before removing the now-unreachable back face.
+      const card = m.closest('.card');
+      const front = card?.querySelector('.face.front');
+      const body = front?.querySelector('.body');
+      const back = card?.querySelector('.face.back');
+      const textOnlyFacts = m.querySelector('template.text-only-facts');
+      const choose = body?.querySelector(':scope > button.choose');
+      if (body && textOnlyFacts && choose) {
+        const plainDetail = body.querySelector(':scope > .detail:not(.more)');
+        [...body.children].filter((el) => el.classList.contains('fact') || el.matches('.detail.more')).forEach((el) => el.remove());
+        choose.before(textOnlyFacts.content.cloneNode(true));
+        if (plainDetail) choose.before(plainDetail);
+      }
+      card?.classList.remove('flipped');
+      front?.classList.add('text-only');
+      back?.remove();
+      settle();
+      m.remove();
+      return true;
     };
     const tryLoad = () => {
+      // A slot the user flipped back out of either leaves the DOM or, when it
+      // was an inspiration face converted in place, stays and loses its
+      // pending state. Either way its loop is done.
+      if (!m.isConnected || !m.classList.contains('comp-pending') || !current()) { clearInterval(tick); return; }
       const probe = new Image();
-      probe.onload = () => { landTracker.last = Date.now(); img.src = probe.src; img.hidden = false; settle(); };
+      probe.onload = () => {
+        // A stale generation also ends this run's clock. tryLoad clears it on
+        // re-entry, and an in-flight probe that finishes stale schedules no
+        // re-entry, so returning without clearing ran the interval for the rest
+        // of the page's life.
+        if (!current()) { clearInterval(tick); return; }
+        landTracker.last = Date.now();
+        const target = m.querySelector('img.comp') || img;
+        target.src = probe.src;
+        target.hidden = false;
+        settle();
+      };
       probe.onerror = () => {
+        if (!current()) { clearInterval(tick); return; }
         const quiet = Date.now() - landTracker.last > 240000;
-        if (Date.now() - started > 240000 && quiet) standIn();
+        if (Date.now() - started > 240000 && quiet && fallback()) return;
         setTimeout(tryLoad, m.classList.contains('stand-in') ? 5000 : 2500);
       };
       probe.src = url + (url.includes('?') ? '&' : '?') + 't=' + Date.now();
     };
     tryLoad();
+  };
+  document.querySelectorAll('.media.comp-pending').forEach(pollComp);
+
+  // Build-path toggle: the default is the round's recorded preference and
+  // flipping binds this session only. Flipping code to comp swaps every
+  // reserve slot (data-comp-slot) to its shimmer and tells the server, so
+  // the waiting agent starts generating; flipping back is free: pending
+  // slots return to their wireframes, a comp that already landed stays.
+  const bp = document.getElementById('build-path');
+  if (bp) {
+    const notes = {
+      comp: 'An image sets the bar first and the build must match it. Bolder composition; comps render before code.',
+      code: 'Code builds directly; the ambition is written into the contract and audited at the finish. Leaner, faster.',
+    };
+    const noteEl = bp.querySelector('[data-bp-note]');
+    let current = bp.dataset.default;
+    const set = (value) => {
+      current = value;
+      bp.querySelectorAll('.bp-opt').forEach(b => {
+        const on = b.dataset.bp === value;
+        b.classList.toggle('active', on);
+        b.setAttribute('aria-checked', String(on));
+      });
+      if (noteEl) noteEl.textContent = notes[value];
+    };
+    set(current);
+    const INSPO_TITLE = 'Inspiration: the world this direction draws from. Your page will not look like this image.';
+    // Every media slot carries the expand affordance. A slot built here after
+    // the deal used to ship without one, so a comp the user waited minutes for
+    // could not be opened.
+    const ensureChips = (m) => {
+      if (m.querySelector('.chips')) return;
+      const tpl = document.getElementById('tpl-expand-chip');
+      if (!tpl) return;
+      const chips = document.createElement('div');
+      chips.className = 'chips';
+      chips.appendChild(tpl.content.cloneNode(true));
+      m.appendChild(chips);
+    };
+    const shimmerHtml = '<div class="shimmer"><span class="comp-note">rendering&hellip;</span></div><img class="comp" alt="" hidden>';
+    const enterComp = () => {
+      document.querySelectorAll('.card[data-comp-slot]').forEach(card => {
+        const front = card.querySelector('.face.front');
+        if (!front || front.querySelector('.media.comp-pending') || front.querySelector('.media img.comp:not([hidden])')) return;
+        // On a code-led card the inspiration IS the face. Comp-first demotes it
+        // to the corner, so convert that slot in place rather than inserting a
+        // second one: two stacked images say the catalog art and the comp are
+        // peers, and the whole point of the corner is that they are not.
+        const inspo = front.querySelector('.media:not(.wire):not(.comp-pending)');
+        let m;
+        if (inspo) {
+          m = inspo;
+          m.dataset.compRestore = 'inspiration';
+          m.dataset.comp = card.dataset.compSlot;
+          m.classList.add('comp-pending');
+          m.removeAttribute('title');
+          m.querySelector('.media-label')?.remove();
+          const art = m.querySelector(':scope > img');
+          if (art) {
+            const pip = document.createElement('figure');
+            pip.className = 'pip';
+            pip.title = INSPO_TITLE;
+            const cap = document.createElement('figcaption');
+            cap.textContent = 'inspiration';
+            pip.append(art, cap);
+            m.appendChild(pip);
+          }
+          m.insertAdjacentHTML('afterbegin', shimmerHtml);
+        } else {
+          m = document.createElement('div');
+          m.className = 'media comp-pending';
+          m.dataset.comp = card.dataset.compSlot;
+          m.innerHTML = shimmerHtml;
+          const wireEl = front.querySelector('.media.wire');
+          if (wireEl) { wireEl.hidden = true; front.insertBefore(m, wireEl); }
+          else { front.classList.remove('text-only'); front.insertBefore(m, front.querySelector('.body')); }
+        }
+        ensureChips(m);
+        pollComp(m);
+      });
+    };
+    const exitComp = () => {
+      document.querySelectorAll('.card[data-comp-slot]').forEach(card => {
+        const front = card.querySelector('.face.front');
+        const pending = front?.querySelector('.media.comp-pending');
+        if (!pending) return; // landed comps stay; they exist either way
+        // A converted slot is restored, not removed: the inspiration goes back
+        // to being the face, so flipping back leaves the card as it was dealt.
+        if (pending.dataset.compRestore === 'inspiration') {
+          // Everything the pending state added has to leave, presentation
+          // included: a slot that reached stand-in kept its "inspiration comp
+          // pending" label beside a fresh one, and a slot whose art had failed
+          // came back still marked unavailable.
+          pending.classList.remove('comp-pending', 'stand-in');
+          delete pending.dataset.compRestore;
+          delete pending.dataset.comp;
+          pending.dataset.pollGen = String(Number(pending.dataset.pollGen || 0) + 1);
+          pending.querySelector('.shimmer')?.remove();
+          pending.querySelector('img.comp')?.remove();
+          pending.querySelector('.stand-in-label')?.remove();
+          pending.querySelectorAll('.media-label').forEach((el) => el.remove());
+          const pip = pending.querySelector('.pip');
+          const art = pip?.querySelector('img');
+          if (art) pending.insertBefore(art, pending.firstChild);
+          pip?.remove();
+          // No art means the image failed to load before the flip, so hand the
+          // slot back to the same honest treatment rather than calling it art.
+          const label = document.createElement('p');
+          label.className = 'media-label';
+          label.textContent = art ? 'inspiration' : 'artwork unavailable';
+          pending.insertBefore(label, pending.querySelector('.chips'));
+          if (art) pending.title = INSPO_TITLE; else pending.classList.add('unavailable');
+          return;
+        }
+        pending.remove();
+        const wireEl = front.querySelector('.media.wire');
+        if (wireEl) wireEl.hidden = false;
+        else if (!front.querySelector('.media')) front.classList.add('text-only');
+      });
+    };
+    const apply = (value) => {
+      set(value);
+      fetch('/build-path', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ value }) });
+      if (value === 'comp') enterComp(); else exitComp();
+    };
+    // Flipping to comp starts real generation, so it confirms first; the
+    // flip back is free and applies immediately.
+    const confirm = document.getElementById('bp-confirm');
+    const closeConfirm = () => { confirm.classList.remove('open'); confirm.hidden = true; };
+    confirm.querySelector('[data-confirm]').addEventListener('click', () => { closeConfirm(); apply('comp'); });
+    confirm.querySelector('[data-cancel]').addEventListener('click', closeConfirm);
+    confirm.addEventListener('click', (e) => { if (e.target === confirm) closeConfirm(); });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !confirm.hidden) closeConfirm(); });
+    bp.querySelectorAll('.bp-opt').forEach(b => b.addEventListener('click', () => {
+      const value = b.dataset.bp;
+      if (value === current) return;
+      if (value === 'comp') {
+        confirm.hidden = false;
+        requestAnimationFrame(() => confirm.classList.add('open'));
+        return;
+      }
+      apply(value);
+    }));
+  }
+
+  // A declared image that never loads (missing catalog asset, offline shell)
+  // must not sit as a dark void: the slot collapses to the card's own
+  // palette, labeled honestly, and the card competes on its facts. Sketch
+  // slots are excluded; their polling owns the wait.
+  const artFailed = (img) => {
+    const m = img.closest('.media');
+    if (!m || m.classList.contains('comp-pending') || m.classList.contains('unavailable')) return;
+    m.classList.add('unavailable');
+    const colors = [...(img.closest('.card')?.querySelectorAll('.swatches i') || [])].map(i => i.style.background).filter(Boolean);
+    if (colors.length) m.style.background = 'linear-gradient(135deg, ' + colors.map((c, i) => c + ' ' + Math.round(i * 100 / colors.length) + '% ' + Math.round((i + 1) * 100 / colors.length) + '%').join(', ') + ')';
+    m.querySelector('.media-label')?.remove();
+    m.querySelector('.chip.expand')?.remove();
+    m.removeAttribute('title');
+    img.remove();
+    const label = document.createElement('p');
+    label.className = 'media-label';
+    label.textContent = 'artwork unavailable';
+    m.appendChild(label);
+  };
+  document.querySelectorAll('.media:not(.comp-pending) > img').forEach(img => {
+    if (img.complete && img.naturalWidth === 0 && img.getAttribute('src')) artFailed(img);
+    else img.addEventListener('error', () => artFailed(img), { once: true });
+  });
+  // A broken inspiration PIP or thumb just leaves; nothing depends on it.
+  document.querySelectorAll('.pip img, .inspo img').forEach(img => {
+    const gone = () => img.closest('.pip, .inspo')?.remove();
+    if (img.complete && img.naturalWidth === 0) gone();
+    else img.addEventListener('error', gone, { once: true });
   });
 
-  // Inspiration PIP opens the full catalog card in the lightbox.
-  document.querySelectorAll('.pip').forEach(p => p.addEventListener('click', (e) => {
-    e.stopPropagation();
-    const img = p.querySelector('img');
-    if (!img) return;
-    lightboxImg.src = img.getAttribute('src');
-    lightbox.hidden = false;
-    requestAnimationFrame(() => lightbox.classList.add('open'));
-  }));
+  // Every zoom target resolves in ONE delegated listener, in priority order.
+  // Delegation is what lets a slot built by a build-path flip work at all, and
+  // a single listener is what keeps the targets from fighting: stopPropagation
+  // ends bubbling, not other listeners on the same target, so split across two
+  // handlers a click on the corner inspiration opened the inspiration and then
+  // the comp overwrote it in the lightbox. Per-element handlers elsewhere (the
+  // flip chip, the raise cycler) still stop bubbling before the event lands
+  // here, so they keep their own behavior.
+  document.addEventListener('click', (e) => {
+    const target = e.target;
+    if (!target || !target.closest) return;
+    // The corner inspiration wins over the slot it sits inside.
+    const pip = target.closest('.pip, .inspo');
+    if (pip) {
+      const art = pip.querySelector('img');
+      if (art) openLightbox(art);
+      return;
+    }
+    const chip = target.closest('.chip');
+    if (chip) {
+      // Only expand zooms. Any other chip owns its click and must not fall
+      // through to the media underneath it.
+      if (!chip.classList.contains('expand')) return;
+      const card = chip.closest('.card');
+      const face = card && card.classList.contains('flipped') ? '.face.back' : '.face.front';
+      const shown = card && card.querySelector(face + ' .media img:not([hidden])');
+      if (shown && shown.getAttribute('src')) openLightbox(shown);
+      return;
+    }
+    // The whole image is the zoom target, not just the chip; the chip stays as
+    // the visible affordance.
+    const media = target.closest('.media');
+    if (!media) return;
+    const art = media.querySelector(':scope > img:not([hidden])');
+    if (art && art.getAttribute('src')) openLightbox(art);
+  });
 
   // Deck paging: arrows appear only when the deck overflows its axis, page
   // one card at a time, and follow the aspect-ratio flip between row and column.
@@ -739,7 +1346,7 @@ function page() {
   const ambient = document.getElementById('ambient');
   document.querySelectorAll('.card').forEach(card => {
     card.addEventListener('mouseenter', () => {
-      const art = card.querySelector('.face.front .media img:not([hidden])') || card.querySelector('.face.front .pip img');
+      const art = card.querySelector('.face.front .media img:not([hidden])') || card.querySelector('.face.front .pip img') || card.querySelector('.face.front .inspo img');
       if (!art || !art.getAttribute('src')) return;
       ambient.style.backgroundImage = 'url("' + art.getAttribute('src') + '")'; ambient.style.opacity = '1';
     });
@@ -749,22 +1356,35 @@ function page() {
   // Expand: lightbox for whichever face is showing.
   const lightbox = document.getElementById('lightbox');
   const lightboxImg = lightbox.querySelector('img');
-  document.querySelectorAll('.expand').forEach(b => b.addEventListener('click', (e) => {
-    e.stopPropagation();
-    const card = b.closest('.card');
-    const face = card.classList.contains('flipped') ? '.face.back' : '.face.front';
-    const img = card.querySelector(face + ' .media img:not([hidden])');
-    if (!img || !img.getAttribute('src')) return;
+  // Declared, not assigned to a const, so the delegated handlers above can call
+  // it wherever they sit in this file.
+  function openLightbox(img) {
     lightboxImg.src = img.getAttribute('src');
     lightbox.hidden = false;
     requestAnimationFrame(() => lightbox.classList.add('open'));
-  }));
+  }
+  // Portrait art (native / mobile-first surfaces): the slot takes the
+  // image's own ratio so nothing crops, and the whole deck narrows so
+  // portrait cards sit side by side. Load events don't bubble; capture.
+  document.addEventListener('load', (e) => {
+    const img = e.target;
+    if (!(img instanceof HTMLImageElement) || !img.matches('.media > img')) return;
+    if (img.naturalHeight > img.naturalWidth * 1.05) {
+      const m = img.closest('.media');
+      m.classList.add('portrait');
+      m.style.aspectRatio = img.naturalWidth + ' / ' + img.naturalHeight;
+      document.querySelector('.grid')?.classList.add('portrait-media');
+    }
+  }, true);
   const closeLightbox = () => { lightbox.classList.remove('open'); setTimeout(() => { lightbox.hidden = true; }, 250); };
   lightbox.addEventListener('click', closeLightbox);
   document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !lightbox.hidden) closeLightbox(); });
   document.getElementById('canon')?.addEventListener('click', () => answer('canon'));
-  document.getElementById('reroll')?.addEventListener('click', async () => {
-    await fetch('/answer', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ optionId: 'reroll', steer: steer() }) });
+  const dealAgain = async (register) => {
+    await fetch('/answer', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ optionId: 'reroll', steer: steer(), ...(register ? { register } : {}) }) });
+    await awaitNextRound();
+  };
+  async function awaitNextRound() {
     const grid = document.querySelector('.grid');
     const cardsNow = [...grid.querySelectorAll('.card')];
     const g = grid.getBoundingClientRect();
@@ -781,14 +1401,17 @@ function page() {
     }
     const cardHeight = cardsNow[0] ? cardsNow[0].getBoundingClientRect().height : 0;
     grid.innerHTML = cardsNow.map(() => '<article class="card skeleton"' + (cardHeight ? ' style="height:' + cardHeight + 'px"' : '') + '><div class="card-inner"><div class="face front"><div class="media"><div class="shimmer"></div></div><div class="body"><div class="line tier w40"></div><div class="line title w70"></div><div class="line w90"></div><div class="line w80"></div><div class="line w60"></div><div class="line button"></div></div></div></div></article>').join('');
-    document.getElementById('reroll')?.setAttribute('disabled', '');
+    document.querySelectorAll('.reroll-btn').forEach(b => b.setAttribute('disabled', ''));
     const poll = setInterval(async () => {
       try {
         const status = await (await fetch('/next-status')).json();
         if (status.ready) { clearInterval(poll); location.reload(); }
       } catch { /* server briefly busy */ }
     }, 1200);
-  });
+  }
+  document.getElementById('reroll')?.addEventListener('click', () => dealAgain());
+  document.getElementById('reroll-safer')?.addEventListener('click', () => dealAgain('safer'));
+  document.getElementById('reroll-bolder')?.addEventListener('click', () => dealAgain('bolder'));
 </script>`;
 }
 
@@ -836,6 +1459,26 @@ const server = http.createServer((req, res) => {
     fs.createReadStream(abs).pipe(res);
     return;
   }
+  if (req.method === 'POST' && req.url === '/build-path') {
+    let body = '';
+    req.on('data', (chunk) => { body += chunk; });
+    req.on('end', () => {
+      res.writeHead(200, { 'content-type': 'application/json' });
+      res.end('{"ok":true}');
+      let value = null;
+      try { value = JSON.parse(body).value; } catch { /* ignore */ }
+      if (value !== 'comp' && value !== 'code') return;
+      const wasComp = liveBuildPath === 'comp';
+      liveBuildPath = value;
+      // Only a flip TO comp needs the agent mid-round: comps must start
+      // rendering into the declared slots. The reverse is free.
+      if (detachedKey && value === 'comp' && !wasComp) {
+        fs.mkdirSync(QUESTION_DIR, { recursive: true });
+        fs.writeFileSync(flipFile(detachedKey), JSON.stringify({ buildPath: 'comp' }) + '\n');
+      }
+    });
+    return;
+  }
   if (req.method === 'POST' && req.url === '/answer') {
     let body = '';
     req.on('data', (chunk) => { body += chunk; });
@@ -845,22 +1488,30 @@ const server = http.createServer((req, res) => {
       let parsed = {};
       try { parsed = JSON.parse(body); } catch { /* empty steer */ }
       const chosen = options.find((o) => o.id === parsed.optionId);
+      const isReroll = parsed.optionId === 'reroll';
+      // A followup round's pick is not terminal: the table stays open for the
+      // next round (--update), exactly like a re-roll. Detached mode only;
+      // the blocking mode has no update channel, so its picks stay terminal.
+      const followupOpen = Boolean(detachedKey) && payload.followup === true && !isReroll;
       const answer = JSON.stringify({
         optionId: parsed.optionId ?? null,
         steer: parsed.steer ?? '',
+        ...(isReroll && (parsed.register === 'safer' || parsed.register === 'bolder') ? { register: parsed.register } : {}),
+        ...(followupOpen ? { followup: true } : {}),
         ...(chosen?.hero || chosen?.board ? { hero: chosen.hero ?? null, board: chosen.board ?? null } : {}),
-        ...(chosen?.sketch ? { sketch: chosen.sketch } : {}),
+        ...((chosen?.comp ?? chosen?.sketch) ? { comp: chosen.comp ?? chosen.sketch } : {}),
+        ...(liveBuildPath && !isReroll ? { buildPath: liveBuildPath, buildPathFlipped: liveBuildPath !== (buildPathDefault?.value ?? null) } : {}),
       });
-      const isReroll = parsed.optionId === 'reroll';
       if (detachedKey) {
         fs.mkdirSync(QUESTION_DIR, { recursive: true });
         fs.writeFileSync(answerFile(detachedKey), answer + '\n');
       } else {
         printAnswer(answer);
       }
-      // A re-roll in detached mode keeps the table open: the client shows a
-      // loading hand and reloads when --update delivers the next round.
-      if (!(isReroll && detachedKey)) setTimeout(() => process.exit(0), 150);
+      // A re-roll or followup pick in detached mode keeps the table open: the
+      // client shows a loading hand and reloads when --update delivers the
+      // next round.
+      if (!((isReroll || followupOpen) && detachedKey)) setTimeout(() => process.exit(0), 150);
     });
     return;
   }
@@ -878,8 +1529,7 @@ server.listen(portArg, '127.0.0.1', () => {
     console.log('Waiting for the user to choose in the browser (Ctrl-C aborts)...');
   }
   if (!hasFlag('no-open')) {
-    const opener = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
-    try { spawn(opener, [url], { stdio: 'ignore', detached: true }).unref(); } catch { /* URL printed anyway */ }
+    openSystemBrowser(url);
   }
   if (timeoutSec > 0) {
     setTimeout(() => {