From 20a7d7d9d5f2e527899191778b91b9adde8dd77f Mon Sep 17 00:00:00 2001
From: grokbot_ty <grokbot_ty@local>
Date: Sun, 27 Sep 2026 09:04:47 -0700
Subject: [PATCH] feat(ui): Jeff-facing copy + 3:4 inventory thumbs + fixed
 overlay font
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Locked UI/copy pass on proto-per-user-woo-creds (Settings/Woo gate polish out of scope):
- Inventory PNG thumbs at 3:4 contain (Review, Publish preview, Photos ready); stop 1:1 cover squaring
- Dimension overlay labels fixed OVERLAY_FONT_PX=36 for every product
- Page 1–3 Jeff-plain copy; drop Measure red tech essays / px scale rows
- Review: lock SVG, consistent red missing/not-ready, View prompt gated (Settings default off)
---
 frontend/src/App.svelte                       |   6 +-
 frontend/src/capture/BatchPhotos.svelte       |  10 +-
 frontend/src/capture/MeasurePanel.svelte      |  64 +++------
 frontend/src/capture/measureInputs.test.ts    |   6 +-
 .../src/capture/photosReadyLineup.test.ts     |  12 +-
 frontend/src/capture/photosReadyLineup.ts     |   8 +-
 .../src/capture/session.batchApply.test.ts    |   6 +-
 frontend/src/capture/session.ts               |   8 +-
 .../src/create/publish/PublishPreview.svelte  |   4 +-
 frontend/src/create/review/Review.svelte      | 130 ++++++++++--------
 .../src/create/review/createDescGate.test.ts  |   2 +-
 frontend/src/create/review/createDescGate.ts  |   4 +-
 frontend/src/create/review/lineup.test.ts     |   4 +-
 frontend/src/create/review/lineup.ts          |   6 +-
 .../create/review/reviewUi.contract.test.ts   |  16 +++
 frontend/src/create/settings/Settings.svelte  |  15 ++
 frontend/src/png/overlay.test.ts              |  42 +++---
 frontend/src/png/overlay.ts                   |  14 +-
 frontend/src/settings/viewPrompt.ts           |  29 ++++
 frontend/tests/e2e/photos-ready.spec.ts       |  20 +--
 frontend/tests/e2e/settings-contrast.spec.ts  |   2 +-
 21 files changed, 231 insertions(+), 177 deletions(-)
 create mode 100644 frontend/src/settings/viewPrompt.ts

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index cc70e5f..5cf5bef 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -140,7 +140,7 @@
       enterReview(id, capture);
     } catch (e) {
       saveError =
-        e instanceof ApiError ? e.message : 'Could not start the slab. Check your connection and try again.';
+        e instanceof ApiError ? e.message : 'Couldn’t start this slab. Check your connection and try again.';
       backToCapture();
     } finally {
       saving = false;
@@ -200,7 +200,7 @@
       </section>
     {:else if curFlow.phase === 'saving'}
       <section class="panel" aria-busy="true">
-        <h1>Saving slab…</h1>
+        <h1>Saving…</h1>
       </section>
     {:else}
       <!-- capture column (single slab, CAPTURE-25/30) -->
@@ -244,7 +244,7 @@
         />
       {/if}
       {#if saving}
-        <div class="row"><span class="busy" aria-live="polite">Saving slab…</span></div>
+        <div class="row"><span class="busy" aria-live="polite">Saving…</span></div>
       {/if}
       {#if saveError}
         <div class="save-err" role="alert" data-testid="save-error">{saveError}</div>
diff --git a/frontend/src/capture/BatchPhotos.svelte b/frontend/src/capture/BatchPhotos.svelte
index f115195..60c6ab1 100644
--- a/frontend/src/capture/BatchPhotos.svelte
+++ b/frontend/src/capture/BatchPhotos.svelte
@@ -31,20 +31,20 @@
 </script>
 
 <section class="panel">
-  <h1>Batch photos</h1>
+  <h1>Add slab photos</h1>
   <ul class="setup">
     <li>Sheet is green or black, fills the frame around the slab.</li>
     <li>Slab fully on the sheet, nothing on top of it.</li>
-    <li>Top-down reference shot: lens parallel to the face.</li>
-    <li>Slab length along the long side of the picture.</li>
+    <li>Take one photo straight above the slab.</li>
+    <li>Keep the slab’s long side aligned with the photo’s long side.</li>
     <li>Add one or more photos of the same slab, then Continue.</li>
   </ul>
 
   {#if photos.length > 0}
-    <ul class="thumbs" aria-label="Batch photos">
+    <ul class="thumbs" aria-label="Slab photos">
       {#each photos as _p, i (urls[i])}
         <li class="thumb">
-          <img src={urls[i]} alt={`Batch photo ${i + 1}`} />
+          <img src={urls[i]} alt={`Photo ${i + 1}`} />
           <button type="button" class="rm" aria-label={`Remove photo ${i + 1}`} on:click={() => onRemove(i)}>Remove</button>
         </li>
       {/each}
diff --git a/frontend/src/capture/MeasurePanel.svelte b/frontend/src/capture/MeasurePanel.svelte
index abb55d8..608114e 100644
--- a/frontend/src/capture/MeasurePanel.svelte
+++ b/frontend/src/capture/MeasurePanel.svelte
@@ -7,7 +7,6 @@
   import { clampTiltDeg, defaultTicks } from './tapeGeometry';
   import PhotoStage from './PhotoStage.svelte';
   import { getCropFill, setCropFill } from '../settings/cropFill';
-  import { cropMarginFraction } from '../png/crop';
   import { getTaxonomy } from '../api/slabs';
   import { speciesLeavesFromTaxonomy } from '../create/settings/speciesLeaves';
   import {
@@ -163,8 +162,7 @@
   <h1>{photosReady ? 'Photos ready' : 'Measure'}</h1>
 
   {#if !photosReady}
-    <p class="hint">Orient the slab on the fixed tape line, then enter length, thickness, and species.</p>
-    <p class="nudge">The black line is <b>fixed</b>: tilting, dragging and zooming the slab never move it. It stays in the middle of the rectangle.</p>
+    <p class="hint">Line up the slab with the black line, then enter length, thickness, and species.</p>
 
     <div class="mode-toggle" role="group" aria-label="Stage gesture mode">
       <button
@@ -184,13 +182,6 @@
         on:click={() => (gestureMode = 'rotate')}
       >Rotate</button>
     </div>
-    <p class="nudge mode-hint">
-      {#if gestureMode === 'zoompan'}
-        Pinch to zoom and drag to pan. Rotation gestures are ignored — switch to Rotate or use the tilt slider.
-      {:else}
-        Two-finger twist to rotate (or use the tilt slider). Pan and pinch-zoom are ignored in this mode.
-      {/if}
-    </p>
 
     <!-- Same binding as Mask/Axis: oriented source + approved bitset.
          PhotoStage paints opaque checkerboard on non-slab (iOS-safe under the
@@ -209,7 +200,7 @@
 
     <div class="controls">
       <div>
-        <p class="ctl-label">Tilt the slab</p>
+        <p class="ctl-label">Tilt</p>
         <div class="angle">
           <button type="button" class="thumb" aria-label="Tilt left" on:click={() => nudgeTilt(-1)}>−</button>
           <input
@@ -220,11 +211,10 @@
           <button type="button" class="thumb" aria-label="Tilt right" on:click={() => nudgeTilt(1)}>+</button>
           <span class="val">{tiltShown}°</span>
         </div>
-        <p class="nudge">±90° · slider always works · in Rotate mode: ← → tilt 1° · Shift+← → 0.1° · two-finger twist</p>
       </div>
 
       <div>
-        <p class="ctl-label">Zoom the slab</p>
+        <p class="ctl-label">Zoom</p>
         <div class="angle">
           <button type="button" class="thumb" aria-label="Zoom out" on:click={() => nudgeZoom(-1)}>−</button>
           <input
@@ -236,40 +226,30 @@
           <span class="val">{Math.round(tape.zoom * 100)}%</span>
         </div>
         <div class="row tight">
-          <button type="button" class="ghost" on:click={fit}>Fit — 100%, centred</button>
+          <button type="button" class="ghost" on:click={fit}>Reset view</button>
         </div>
       </div>
 
       <div>
-        <p class="ctl-label">Crop fill % <span class="sub">global setting</span></p>
+        <p class="ctl-label">Frame fill</p>
         <div class="croprow">
           <input
             type="range" min="50" max="100" step="1"
             value={Math.round(cropFill * 100)}
-            aria-label="Crop fill percent"
+            aria-label="Frame fill"
             on:input={(e) => onFill(Number(e.currentTarget.value))}
           />
           <span class="val">{Math.round(cropFill * 100)}%</span>
         </div>
-        <p class="nudge">
-          settings.crop_fill (default 90). At {Math.round(cropFill * 100)}% the overlay ends sit
-          {(cropMarginFraction(cropFill) * 100).toFixed(1)}% in from top and bottom.
-          The 3:4 aspect never changes. Stored PNGs are not re-cropped.
-        </p>
-      </div>
-
-      <div class="nums">
-        <div><span>Tape span between ticks</span><span class="tab">{tape.spanPx.toFixed(0)} px</span></div>
-        <div><span>Scale (once L entered)</span><span class="tab dim">span / L → px/in</span></div>
       </div>
     </div>
 
     <div class="fields">
       <div class="field">
-        <span class="label">Length L</span>
+        <span class="label">Length (in)</span>
         <input
           type="number"
-          aria-label="Length L"
+          aria-label="Length (in)"
           inputmode="decimal"
           step="0.125"
           min="0"
@@ -335,34 +315,33 @@
   {:else if state.results}
     <div class="results" aria-label="Photos ready">
       <div class="nums">
-        <div><span>Widths</span><span>{fmtEighths(state.results.widths.min)} – {fmtEighths(state.results.widths.max)} (avg {fmtEighths(state.results.widths.avg)})</span></div>
-        <div><span>Sqft</span><span>{state.results.sqft.toFixed(2)}</span></div>
-        <div><span>Bdft</span><span>{state.results.bdft.toFixed(2)}</span></div>
-        <div><span>Scale</span><span>{state.results.scale.toFixed(2)} px/in</span></div>
+        <div><span>Widths (avg {fmtEighths(state.results.widths.avg)})</span><span>{fmtEighths(state.results.widths.min)} – {fmtEighths(state.results.widths.max)}</span></div>
+        <div><span>Square feet</span><span>{state.results.sqft.toFixed(2)}</span></div>
+        <div><span>Board feet</span><span>{state.results.bdft.toFixed(2)}</span></div>
         <div data-testid="photos-ready-species"><span>Species</span><span>{speciesOpts.find((o) => o.id === state.speciesId)?.name ?? (state.speciesId != null ? `#${state.speciesId}` : '—')}</span></div>
       </div>
       {#if state.results.sourceBelowBlock}
         <div class="warn" role="alert" data-testid="size-floor-block">
-          Source shorter side is below 300px — inventory PNG blocked. Retake a larger photo.
+          This photo is too small. Take a closer or larger photo.
         </div>
       {:else if state.results.sourceBelowWarn}
         <div class="warn" data-testid="size-floor-warn">
-          Source shorter side is under 800px (300–799). Photo included; consider a closer/larger shot for best quality.
+          This photo is a bit small. A closer shot will look sharper on the listing.
         </div>
       {/if}
 
-      <ol class="lineup" aria-label="Inventory PNG lineup">
+      <ol class="lineup" aria-label="Photos for the listing">
         {#each lineupItems as item, i (i)}
           {#if item.kind === 'png'}
             <li class="lineup-item png">
               <img src={lineupUrls[i]} alt={photosReadyPngAlt(item)} />
               <span class="role">
                 {#if item.role === 'calibration'}
-                  Clean calibration
+                  Reference photo
                 {:else if item.role === 'overlay'}
-                  Dimension overlay
+                  Photo with measurements
                 {:else}
-                  Batch photo {(item.batchIndex ?? 0) + 1}
+                  Photo {(item.batchIndex ?? 0) + 1}
                 {/if}
               </span>
               {#if item.warn}
@@ -381,7 +360,7 @@
       <!-- Legacy single-PNG fallback only when lineup helper yielded nothing but pngUrl exists -->
       {#if lineupItems.length === 0 && pngUrl && !state.results.sourceBelowBlock}
         <div class="png-wrap">
-          <img src={pngUrl} alt="Inventory PNG" />
+          <img src={pngUrl} alt="Listing photo" />
         </div>
       {/if}
     </div>
@@ -411,8 +390,7 @@
   }
   .mode-btn + .mode-btn { border-left: 1px solid #444; }
   .mode-btn.active { background: #00e5ff; color: #002; }
-  .mode-hint { margin: 0 0 10px; }
-  .nudge { color: #e8a; font-size: 0.74rem; margin: 6px 0 0; line-height: 1.45; }
+  .nudge { color: #aaa; font-size: 0.8rem; margin: 6px 0 0; line-height: 1.45; }
   .controls { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
   .ctl-label { font-size: 0.78rem; color: #aaa; margin: 0 0 6px; }
   .ctl-label .sub { font-size: 0.7rem; color: #777; }
@@ -461,7 +439,7 @@
     background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0;
     background-color: #eee; border-radius: 8px; padding: 8px;
   }
-  .lineup-item.png img { max-width: 100%; border-radius: 4px; display: block; margin: 0 auto; }
+  .lineup-item.png img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 4px; display: block; margin: 0 auto; }
   .role { display: block; margin-top: 8px; font-size: 0.85rem; color: #222; font-weight: 600; }
   .lineup-item.error {
     border: 1px solid #8a3a2a; background: #2a1512; border-radius: 8px;
@@ -470,5 +448,5 @@
   .err-title { color: #ffb4a2; font-weight: 700; font-size: 0.95rem; }
   .err-msg { color: #e8cfc8; font-size: 0.9rem; }
   .png-wrap { margin-top: 16px; text-align: center; background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%); background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0; background-color: #eee; border-radius: 8px; padding: 8px; }
-  .png-wrap img { max-width: 100%; border-radius: 4px; }
+  .png-wrap img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 4px; }
 </style>
diff --git a/frontend/src/capture/measureInputs.test.ts b/frontend/src/capture/measureInputs.test.ts
index df2e03f..f759d16 100644
--- a/frontend/src/capture/measureInputs.test.ts
+++ b/frontend/src/capture/measureInputs.test.ts
@@ -10,12 +10,12 @@ const panelSrc = readFileSync(
   'utf8',
 );
 
-test('MeasurePanel exposes typed number inputs for Length L and Thickness', () => {
+test('MeasurePanel exposes typed number inputs for Length (in) and Thickness', () => {
   const inputs = panelSrc.match(/<input\b[^>]*>/g) ?? [];
   assert.ok(inputs.length >= 2, 'expected at least two <input> fields');
   assert.ok(
-    inputs.some((el) => /type="number"/.test(el) && /aria-label="Length L"/.test(el)),
-    'Length L must be a type=number input',
+    inputs.some((el) => /type="number"/.test(el) && /aria-label="Length \(in\)"/.test(el)),
+    'Length (in) must be a type=number input',
   );
   assert.ok(
     inputs.some((el) => /type="number"/.test(el) && /aria-label="Thickness"/.test(el)),
diff --git a/frontend/src/capture/photosReadyLineup.test.ts b/frontend/src/capture/photosReadyLineup.test.ts
index bfd072c..f0fd93f 100644
--- a/frontend/src/capture/photosReadyLineup.test.ts
+++ b/frontend/src/capture/photosReadyLineup.test.ts
@@ -174,11 +174,11 @@ test('test(photos): warn band keeps clean cal + attaches warn; siblings with war
   assert.deepEqual(roles(lineup), ['png:calibration', 'png:overlay', 'png:batch']);
   assert.equal(lineup[0].kind, 'png');
   if (lineup[0].kind === 'png') {
-    assert.match(lineup[0].warn ?? '', /warn|800|300/i);
+    assert.match(lineup[0].warn ?? '', /bit small|closer shot/i);
   }
   assert.equal(lineup[2].kind, 'png');
   if (lineup[2].kind === 'png') {
-    assert.match(lineup[2].warn ?? '', /warn|800/i);
+    assert.match(lineup[2].warn ?? '', /warn|800|bit small|closer/i);
   }
 });
 
@@ -196,10 +196,10 @@ test('test(photos): MeasurePanel shows Photos ready lineup + M1 numbers + batch
   const panel = readFileSync(join(here, 'MeasurePanel.svelte'), 'utf8');
   assert.match(panel, /Photos ready|photos.?ready/i, 'end screen title after Calculate');
   assert.match(panel, /buildPhotosReadyLineup/, 'must use pure lineup helper');
-  assert.match(panel, /Widths/, 'M1 widths still visible');
-  assert.match(panel, /Sqft/, 'M1 sqft still visible');
-  assert.match(panel, /Bdft/, 'M1 bdft still visible');
-  assert.match(panel, /Scale/, 'M1 scale still visible');
+  assert.match(panel, /Widths \(avg/, 'M1 widths still visible');
+  assert.match(panel, /Square feet/, 'M1 sqft still visible');
+  assert.match(panel, /Board feet/, 'M1 bdft still visible');
+  assert.equal(/\bScale\b/.test(panel) && /px\/in/.test(panel), false, 'Scale / px/in hidden on Photos ready');
   // Dishonest proxies
   assert.ok(
     !/lineup[\s\S]{0,200}state\.source\.blob/.test(panel),
diff --git a/frontend/src/capture/photosReadyLineup.ts b/frontend/src/capture/photosReadyLineup.ts
index f7a4bd9..f0a72c8 100644
--- a/frontend/src/capture/photosReadyLineup.ts
+++ b/frontend/src/capture/photosReadyLineup.ts
@@ -52,7 +52,7 @@ export function buildPhotosReadyLineup(
   if (inventoryPng && !sourceBelowBlock) {
     const warn = sourceBelowWarn
       ? (calibrationWarn
-        ?? 'PNG size warn: shorter side is below 800 px (300–799); photo included')
+        ?? 'This photo is a bit small. A closer shot will look sharper on the listing.')
       : undefined;
     items.push({
       kind: 'png',
@@ -91,8 +91,8 @@ export function buildPhotosReadyLineup(
 }
 
 export function photosReadyPngAlt(item: Extract<PhotosReadyLineupItem, { kind: 'png' }>): string {
-  if (item.role === 'calibration') return 'Calibration inventory PNG';
-  if (item.role === 'overlay') return 'Calibration dimension-overlay PNG';
+  if (item.role === 'calibration') return 'Reference photo';
+  if (item.role === 'overlay') return 'Photo with measurements';
   const n = (item.batchIndex ?? 0) + 1;
-  return `Batch inventory PNG ${n}`;
+  return `Photo ${n}`;
 }
diff --git a/frontend/src/capture/session.batchApply.test.ts b/frontend/src/capture/session.batchApply.test.ts
index 351f833..477fe6d 100644
--- a/frontend/src/capture/session.batchApply.test.ts
+++ b/frontend/src/capture/session.batchApply.test.ts
@@ -283,7 +283,7 @@ test('#62: empty mask on one sibling → per-photo error; others still proceed',
   assert.equal(apply![1], null);
   assert.ok(apply![0] && apply![0].status === 'error', 'empty mask → error');
   if (apply![0]?.status === 'error') {
-    assert.match(apply![0].message, /empty|mask/i, 'clear per-photo empty-mask error');
+    assert.match(apply![0].message, /could not find the slab|empty|mask/i, 'clear per-photo empty-mask error');
   }
   assert.ok(apply![2] && apply![2].status === 'ok', 'other photos still proceed');
   s.dispose();
@@ -322,7 +322,7 @@ test('#62: below block floor (<300) on one sibling → per-photo error; others p
   assert.ok(apply![0] && apply![0].status === 'ok', 'above-floor sibling ok');
   assert.ok(apply![2] && apply![2].status === 'error', 'below-block → error');
   if (apply![2]?.status === 'error') {
-    assert.match(apply![2].message, /floor|300|size/i, 'clear per-photo size-floor error');
+    assert.match(apply![2].message, /too small|floor|300|size/i, 'clear per-photo size-floor error');
   }
   s.dispose();
 });
@@ -360,7 +360,7 @@ test('#62: warn band (300–799) on sibling → ok with warn; photo included', a
   assert.ok(apply![0] && apply![0].status === 'ok', 'above-floor sibling ok');
   assert.ok(apply![2] && apply![2].status === 'ok', 'warn-band → still ok');
   if (apply![2]?.status === 'ok') {
-    assert.match(apply![2].warn ?? '', /warn|800|300/i, 'warn message attached');
+    assert.match(apply![2].warn ?? '', /bit small|closer|warn|800|300/i, 'warn message attached');
   }
   s.dispose();
 });
diff --git a/frontend/src/capture/session.ts b/frontend/src/capture/session.ts
index 1794330..fbfcafb 100644
--- a/frontend/src/capture/session.ts
+++ b/frontend/src/capture/session.ts
@@ -722,7 +722,7 @@ export function createCaptureSession(opts: SessionOpts = {}): CaptureSession {
       const batch = batchPhotos.length ? batchPhotos : [source];
       const batchApply: BatchPhotoResult[] = batch.map((_, index) => (index === calIndex ? null : {
         status: 'error',
-        message: 'Batch photo was not processed',
+        message: 'This photo could not be processed',
       }));
 
       // Process serially so each worker owns exactly one sibling photo and a
@@ -737,7 +737,7 @@ export function createCaptureSession(opts: SessionOpts = {}): CaptureSession {
             slabBounds: EMPTY_ABOX,
           });
           if (derived.mask.slabPx === 0) {
-            throw new Error('empty mask: no slab pixels detected');
+            throw new Error('Could not find the slab in this photo.');
           }
           const siblingSource: Source = {
             ...photo,
@@ -752,10 +752,10 @@ export function createCaptureSession(opts: SessionOpts = {}): CaptureSession {
             siblingBitmap.close();
           }
           if (encoded.sourceBelowBlock) {
-            throw new Error('PNG size floor: shorter side is below 300 px');
+            throw new Error('This photo is too small. Take a closer or larger photo.');
           }
           const warn = encoded.sourceBelowWarn
-            ? 'PNG size warn: shorter side is below 800 px (300–799); photo included'
+            ? 'This photo is a bit small. A closer shot will look sharper on the listing.'
             : undefined;
           batchApply[index] = warn
             ? { status: 'ok', inventoryPng: encoded.blob, warn }
diff --git a/frontend/src/create/publish/PublishPreview.svelte b/frontend/src/create/publish/PublishPreview.svelte
index 024b7ad..0d628fe 100644
--- a/frontend/src/create/publish/PublishPreview.svelte
+++ b/frontend/src/create/publish/PublishPreview.svelte
@@ -56,7 +56,7 @@
   }
   .thumb {
     position: relative;
-    aspect-ratio: 1;
+    aspect-ratio: 3 / 4;
     border: 2px solid #2a2a2a;
     border-radius: 3px;
     overflow: hidden;
@@ -70,7 +70,7 @@
     background-position: 0 0,0 8px,8px -8px,-8px 0;
   }
   .thumb.primary { border-color: #00e5ff; }
-  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
   .pri {
     position: absolute; top: 4px; right: 4px;
     background: #00e5ff; color: #002;
diff --git a/frontend/src/create/review/Review.svelte b/frontend/src/create/review/Review.svelte
index e25d75d..fbe3d3c 100644
--- a/frontend/src/create/review/Review.svelte
+++ b/frontend/src/create/review/Review.svelte
@@ -16,6 +16,7 @@
     type LineupItem,
   } from './lineup';
   import { nextPrimary } from './woodPrimary';
+  import { getShowViewPrompt, VIEW_PROMPT_EVENT } from '../../settings/viewPrompt';
   import { missingCreateDescLabels } from './createDescGate';
   import { missingCreateTitleLabels, titleBuildMissingLabels } from './createTitleGate';
   import { orderWoodCatGroups } from './woodCatOrder';
@@ -138,7 +139,7 @@
   let reviewError = '';
   // #89: explicit "Create" actions. `createBusy` covers the deterministic
   // title/short-desc generation; `canCreateTitle` is its gate (species already
-  // on the slab from Measure + ≥1 wood category). `canCreateDesc` gates Call 2
+  // on the slab from Measure + ≥1 wood category). `canCreateDesc` gates content generate
   // (writes short + long) on title + taxonomy + content LLM — not short/desc/price.
   let createBusy = false;
   let createError = '';
@@ -150,8 +151,8 @@
   });
   $: canCreateTitle = createTitleMissing.length === 0;
   // Create-desc gate: recompute on every field change (no blur required).
-  // Short/description are Call 2 outputs; price is publish-only.
-  // Needs content_llm_enabled + inference URL/key (Call 2); Call 1 stays out.
+  // Short/description are content generate outputs; price is publish-only.
+  // Needs content_llm_enabled + inference URL/key (content generate); Call 1 stays out.
   $: createDescMissing = missingCreateDescLabels({
     contentLlmEnabled: canGenerateContent,
     inferenceConfigured,
@@ -193,7 +194,7 @@
   let genBusy = false;
   let genError = '';
   let canGenerateContent = false;
-  /** Inference URL + API key both configured in Settings (Call 2 creds). */
+  /** Inference URL + API key both configured in Settings (content generate creds). */
   let inferenceConfigured = false;
   const secretConfigured = (s: { configured: boolean } | string | null | undefined): boolean => {
     if (s == null) return false;
@@ -590,7 +591,7 @@
       description = r.description;
       if (r.short_description) shortDescription = r.short_description;
       contentSource = 'llm';
-      // Persist Call 2 short + long (commitReview does not send description — see #89).
+      // Persist content generate short + long (commitReview does not send description — see #89).
       const myToken = ++commitToken;
       const fresh = await updateSlab(slabId, {
         short_description: shortDescription || null,
@@ -607,8 +608,15 @@
     }
   }
 
-  // View prompt: read-only assembled Call 2 text + photo slots (shared server assembler).
+  // View prompt: operator-only; Settings checkbox default off.
+  let showViewPrompt = getShowViewPrompt();
   let viewPromptOpen = false;
+
+  onMount(() => {
+    const sync = () => { showViewPrompt = getShowViewPrompt(); };
+    window.addEventListener(VIEW_PROMPT_EVENT, sync);
+    return () => window.removeEventListener(VIEW_PROMPT_EVENT, sync);
+  });
   let viewPromptBusy = false;
   let viewPromptError = '';
   let viewPrompt: Call2Prompt | null = null;
@@ -712,23 +720,23 @@
 
 {#if loading}
   <section class="review" aria-busy="true" data-testid="review-loading">
-    <h1>Review to Ready</h1>
+    <h1>Review slab</h1>
     <p class="busy">Loading slab…</p>
   </section>
 {:else if loadError}
   <section class="review">
-    <h1>Review to Ready</h1>
+    <h1>Review slab</h1>
     <p class="err" role="alert">{loadError}</p>
     <button type="button" class="ghost" data-testid="back-capture" on:click={goBack}>Back to capture</button>
   </section>
 {:else}
   <section class="review" data-testid="review-screen">
-    <h1>Review to Ready</h1>
+    <h1>Review slab</h1>
 
     <dl class="math">
       <div><dt>Length</dt><dd>{fmt1(capture?.lengthIn ?? slab?.length_in ?? 0)}″</dd></div>
       <div><dt>Thickness</dt><dd>{fmt1(capture?.thicknessIn ?? slab?.thickness_in ?? 0)}″</dd></div>
-      <div><dt>Sqft / Bdft</dt><dd>{fmt2(capture?.sqft ?? slab?.sqft ?? 0)} / {fmt2(capture?.bdft ?? slab?.bdft ?? 0)}</dd></div>
+      <div><dt>Square feet / Board feet</dt><dd>{fmt2(capture?.sqft ?? slab?.sqft ?? 0)} / {fmt2(capture?.bdft ?? slab?.bdft ?? 0)}</dd></div>
     </dl>
 
     <!-- #90 Photo strip: keep/remove + drag-reorder; leftmost kept = primary. -->
@@ -767,12 +775,18 @@
               <span class="ph-seq" aria-hidden="true">{i + 1}</span>
               <!-- Keep checkbox: always checked for required photos; a disabled
                    glyph (no check) when a batch photo is removed. -->
-              <span class="ph-keep" class:required={p.required} aria-hidden="true"></span>
+              <span class="ph-keep" class:required={p.required} aria-hidden="true">
+                {#if p.required}
+                  <svg class="lock" viewBox="0 0 24 24" width="12" height="12" focusable="false">
+                    <path fill="currentColor" d="M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-7-2a2 2 0 0 1 4 0v2h-4V6zm7 14H7V10h10v10z"/>
+                  </svg>
+                {/if}
+              </span>
             </div>
           {/each}
         </div>
         {#if lineupMissing.length}
-          <p class="ph-nudge" data-testid="lineup-nudge" role="alert">
+          <p class="ph-nudge must" data-testid="lineup-nudge" role="alert">
             Keep at least {lineupMissing.map(roleLabel).join(' and ')} — required to publish.
           </p>
         {/if}
@@ -780,7 +794,7 @@
       </div>
     {/if}
 
-    <!-- Call 1 OUT (overnight-whole-app): Suggest-with-AI removed. Call 2 generateContent stays. -->
+    <!-- Call 1 OUT (overnight-whole-app): Suggest-with-AI removed. content generate generateContent stays. -->
     <!-- Species: chosen on Measure; no Review picker (value stays on the slab from createSlab). -->
 
     <!-- Wood categories (multi + inline primary radio set, REVIEW-15 / #90 wireframe) -->
@@ -798,7 +812,7 @@
       />
       {#if primaryOpts.length}
         <div class="primary-set" data-testid="primary-wood-set" role="radiogroup" aria-label="Primary wood category">
-          <div class="ps-lbl">Primary wood category <span class="ps-req">drives title</span></div>
+          <div class="ps-lbl">Primary wood category <span class="ps-req">used for title</span></div>
           {#each primaryOpts as o (o.id)}
             <button
               type="button"
@@ -814,8 +828,7 @@
             </button>
           {/each}
           <p class="ps-note">
-            Primary selects the title &amp; short-description pattern (METADATA-85).
-            Secondary categories feed the description. Default = first selected.
+            Primary is used for the title. Other selected categories can appear in the description.
           </p>
         </div>
       {/if}
@@ -898,11 +911,11 @@
         <input id="short-desc" class="inp" data-testid="short-desc" bind:value={shortDescription} on:input={scheduleFieldCommit} />
         <button type="button" class="btn-sec" data-testid="create-short-desc"
           disabled={!canCreateTitle || createBusy} on:click={createTitle}>
-          {createBusy ? 'Building…' : 'Create short desc'}
+          {createBusy ? 'Building…' : 'Create short description'}
         </button>
       </div>
       {#if !canCreateTitle}
-        <p class="nudge" data-testid="create-title-missing">
+        <p class="nudge must" data-testid="create-title-missing">
           Create title needs: {createTitleMissing.join(', ')}
         </p>
       {/if}
@@ -917,29 +930,31 @@
           data-testid="create-desc"
           on:click={generateContent}
           disabled={!canCreateDesc || genBusy}
-          title={canCreateDesc ? 'Generate short + long description (Call 2)' : `Missing: ${createDescMissing.join(', ')}`}
+          title={canCreateDesc ? 'Generate short and full description' : `Missing: ${createDescMissing.join(', ')}`}
         >
-          {genBusy ? 'Writing…' : 'Create desc'}
-        </button>
-        <button
-          type="button"
-          class="btn-sec"
-          data-testid="view-prompt"
-          on:click={() => { if (viewPromptOpen) viewPromptOpen = false; else void loadViewPrompt(); }}
-          disabled={viewPromptBusy}
-        >
-          {viewPromptBusy ? 'Loading…' : (viewPromptOpen ? 'Hide prompt' : 'View prompt')}
+          {genBusy ? 'Writing…' : 'Create description'}
         </button>
+        {#if showViewPrompt}
+          <button
+            type="button"
+            class="btn-sec"
+            data-testid="view-prompt"
+            on:click={() => { if (viewPromptOpen) viewPromptOpen = false; else void loadViewPrompt(); }}
+            disabled={viewPromptBusy}
+          >
+            {viewPromptBusy ? 'Loading…' : (viewPromptOpen ? 'Hide prompt' : 'View prompt')}
+          </button>
+        {/if}
       </div>
       {#if !canCreateDesc}
-        <p class="nudge" data-testid="create-desc-missing">
-          Create desc needs: {createDescMissing.join(', ')}
+        <p class="nudge must" data-testid="create-desc-missing">
+          Create description needs: {createDescMissing.join(', ')}
         </p>
       {/if}
       {#if viewPromptOpen}
         <div class="prompt-panel" data-testid="view-prompt-panel">
           <div class="prompt-head">
-            <span class="prompt-title">Call 2 prompt (read-only)</span>
+            <span class="prompt-title">Prompt (read-only)</span>
             <button type="button" class="mini" data-testid="copy-prompt" on:click={copyViewPrompt} disabled={!viewPrompt?.text}>
               {viewPromptCopied ? 'Copied' : 'Copy text'}
             </button>
@@ -949,15 +964,13 @@
           {#if viewPrompt}
             <pre class="prompt-text" data-testid="prompt-text">{viewPrompt.text}</pre>
             <div class="prompt-photos" data-testid="prompt-photos">
-              <div class="prompt-photos-lbl">Photo slots (no base64) — up to 8 processed PNGs</div>
+              <div class="prompt-photos-lbl">Photos included</div>
               {#if viewPrompt.photos.length === 0}
-                <p class="nudge">No processed photos on this slab.</p>
+                <p class="nudge">No photos on this slab yet.</p>
               {:else}
                 <ul>
-                  {#each viewPrompt.photos as ph (ph.id)}
-                    <li data-testid="prompt-photo-slot">
-                      seq={ph.seq} · id={ph.id} · {ph.bytes} bytes · long-edge {ph.long_edge_px ?? '?'}px
-                    </li>
+                  {#each viewPrompt.photos as ph, i (ph.id)}
+                    <li data-testid="prompt-photo-slot">Photo {i + 1}</li>
                   {/each}
                 </ul>
               {/if}
@@ -977,10 +990,10 @@
       <input id="price" class="inp" data-testid="price" type="number" step="0.01" bind:value={price} on:input={scheduleFieldCommit} on:change={commitReview} />
     </div>
     <div class="field">
-      <label class="lbl" for="sku">SKU <span class="sug">last field, 3–24 chars</span></label>
+      <label class="lbl" for="sku">SKU <span class="sug">3–24 letters, numbers, or hyphens</span></label>
       <input id="sku" class="inp" data-testid="sku" placeholder="SLAB-…" bind:value={sku} on:input={scheduleFieldCommit} on:blur={commitReview} />
       {#if sku && !/^[A-Za-z0-9-]{3,24}$/.test(sku)}
-        <p class="nudge">SKU must be 3–24 alphanumerics or hyphens.</p>
+        <p class="nudge must">SKU must be 3–24 letters, numbers, or hyphens.</p>
       {/if}
     </div>
 
@@ -997,7 +1010,7 @@
             ].length} field${[...review.missing, ...lineupMissing.map(roleLabel)].length === 1 ? '' : 's'} remaining`}
       </div>
       {#if !(ready() && lineupValid)}
-        <p class="missing" data-testid="missing-list">Missing: {[...review.missing, ...lineupMissing.map(roleLabel)].join(', ')}</p>
+        <p class="missing must" data-testid="missing-list">Missing: {[...review.missing, ...lineupMissing.map(roleLabel)].join(', ')}</p>
       {/if}
     {/if}
     {#if reviewError}<p class="nudge" role="alert">{reviewError}</p>{/if}
@@ -1031,7 +1044,8 @@
   .sel { appearance: none; background-image: linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%); background-position: calc(100% - 16px) 55%,calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
   .ta { resize: vertical; }
   .field { margin-bottom: 12px; }
-  .nudge { color: #e8a; font-size: .74rem; margin: 4px 0 0; }
+  .nudge { color: #aaa; font-size: .74rem; margin: 4px 0 0; }
+  .nudge.must, .must { color: #ff6b6b; }
   .sug { color: #aaa; font-size: .74rem; font-weight: 400; margin-left: 6px; }
   .gen { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
   /* Unified secondary actions: Create title/short/desc, View prompt — same size & label weight. */
@@ -1066,9 +1080,9 @@
   .ps-opt.on .ps-radio::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: #00e5ff; }
   .ps-name { flex: 1; }
   .ps-note { font-size: .7rem; color: #777; margin: 6px 0 0; line-height: 1.4; }
-  .status { margin-top: 14px; font-weight: 700; padding: 10px 12px; border-radius: 3px; background: #2a1512; color: #ffb4a2; font-size: .9rem; }
+  .status { margin-top: 14px; font-weight: 700; padding: 10px 12px; border-radius: 3px; background: #2a1512; color: #ff6b6b; font-size: .9rem; }
   .status.ok { background: #122a12; color: #7fd37f; }
-  .missing { color: #999; font-size: .76rem; margin: 6px 0 0; }
+  .missing { color: #ff6b6b; font-size: .76rem; margin: 6px 0 0; }
   .row { display: flex; gap: 10px; margin-top: 16px; }
   .primary { flex: 1; padding: 14px; font-size: 1rem; border-radius: 3px; border: 0; background: #00e5ff; color: #002; font-weight: 700; cursor: pointer; }
   .primary:disabled { background: #333; color: #777; cursor: not-allowed; }
@@ -1080,7 +1094,7 @@
   .ph-hint { color: #8a8a8a; font-size: .72rem; margin: 0 0 8px; }
   .ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
   @media (max-width: 420px) { .ph-grid { grid-template-columns: repeat(2, 1fr); } }
-  .pcard { position: relative; aspect-ratio: 1; border: 2px solid #2a2a2a; border-radius: 3px; overflow: hidden; cursor: grab;
+  .pcard { position: relative; aspect-ratio: 3 / 4; border: 2px solid #2a2a2a; border-radius: 3px; overflow: hidden; cursor: grab;
     /* Gray checkerboard, matching the Capture lineup (MeasurePanel .lineup-item.png)
        so transparent inventory PNGs read the same on both screens (bug2). */
     background-color: #eee;
@@ -1091,28 +1105,24 @@
   .pcard.kept { border-color: #444; }
   .pcard.primary { border-color: #00e5ff; }
   .pcard:not(.kept) { opacity: .4; }
-  .ph-thumb { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
+  .ph-thumb { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
   .ph-pri { position: absolute; top: 6px; right: 6px; background: #00e5ff; color: #002; font-size: .56rem; font-weight: 800; padding: 1px 5px; border-radius: 2px; letter-spacing: .03em; pointer-events: none; }
   .ph-req { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); background: #ffb020; color: #201500; font-size: .52rem; font-weight: 800; padding: 1px 5px; border-radius: 2px; letter-spacing: .04em; pointer-events: none; }
   .ph-seq { position: absolute; bottom: 6px; left: 6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; font-size: .66rem; display: flex; align-items: center; justify-content: center; pointer-events: none; }
   .ph-keep { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 3px; background: rgba(0,0,0,.5); pointer-events: none; }
   .pcard.kept .ph-keep { background: #00e5ff; border-color: #00e5ff; }
   .pcard.kept .ph-keep::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #002; border-width: 0 2px 2px 0; transform: rotate(45deg); }
-  /* Mandatory photos (clean cal + dimension-overlay): the keep checkbox is
-     checked AND disabled. A bold padlock glyph in the box signals "required —
-     cannot be removed", and the card carries a thin required outline so the
-     owner can tell mandatory photos apart from optional batch photos. */
+  /* Mandatory photos (reference + measurements): keep is locked; SVG lock
+     signals required / cannot remove. */
   .pcard.required { border-color: #00e5ff55; }
-  .pcard.required .ph-keep { background: #00e5ff; border-color: #00e5ff; }
-  /* Padlock: shackle (arc) + body, drawn large enough to read on a 16px box. */
-  .pcard.required .ph-keep::after {
-    content: ''; position: absolute; left: 3px; top: 2px; width: 8px; height: 8px;
-    border: 2px solid #002; border-bottom: none; border-radius: 4px 4px 0 0;
-  }
-  .pcard.required .ph-keep::before {
-    content: ''; position: absolute; left: 2.5px; top: 6px; width: 8px; height: 6px;
-    background: #002; border-radius: 1px;
+  .pcard.required .ph-keep {
+    background: #00e5ff; border-color: #00e5ff; color: #002;
+    display: flex; align-items: center; justify-content: center;
   }
+  .pcard.required .ph-keep::after { content: none; }
+  .pcard.required .ph-keep::before { content: none; }
+  .pcard.required.kept .ph-keep::after { content: none; }
+  .ph-keep .lock { display: block; }
   .pcard.required { cursor: default; }
-  .ph-nudge { color: #e8a; font-size: .74rem; margin: 8px 0 0; }
+  .ph-nudge { color: #ff6b6b; font-size: .74rem; margin: 8px 0 0; }
 </style>
diff --git a/frontend/src/create/review/createDescGate.test.ts b/frontend/src/create/review/createDescGate.test.ts
index 9b1668e..1d91542 100644
--- a/frontend/src/create/review/createDescGate.test.ts
+++ b/frontend/src/create/review/createDescGate.test.ts
@@ -66,7 +66,7 @@ test('Create desc gate: lists each missing field; no short/description/price key
   assert.equal(labels.includes('price'), false);
 });
 
-test('Create desc gate: inference URL+key required even when content LLM on', () => {
+test('Create desc gate: inference URL+key required even when description writing on', () => {
   assert.equal(canCreateDesc({ ...full, inferenceConfigured: false }), false);
   assert.deepEqual(missingCreateDesc({ ...full, inferenceConfigured: false }), [
     'inference_creds',
diff --git a/frontend/src/create/review/createDescGate.ts b/frontend/src/create/review/createDescGate.ts
index d3880c2..9994312 100644
--- a/frontend/src/create/review/createDescGate.ts
+++ b/frontend/src/create/review/createDescGate.ts
@@ -23,8 +23,8 @@ export type CreateDescInput = {
 
 /** Human labels shown under Create desc when the gate fails. */
 export const CREATE_DESC_LABELS: Record<string, string> = {
-  content_llm: 'content LLM on',
-  inference_creds: 'inference URL + API key',
+  content_llm: 'description writing on',
+  inference_creds: 'description connection',
   title: 'title',
   species: 'species',
   wood_categories: '≥1 wood category',
diff --git a/frontend/src/create/review/lineup.test.ts b/frontend/src/create/review/lineup.test.ts
index 27be45d..ebd3f94 100644
--- a/frontend/src/create/review/lineup.test.ts
+++ b/frontend/src/create/review/lineup.test.ts
@@ -67,8 +67,8 @@ test('lineup: missingMinimums only counts KEPT photos', () => {
 });
 
 test('lineup: roleLabel is owner-facing', () => {
-  assert.match(roleLabel('calibration'), /clean/);
-  assert.match(roleLabel('overlay'), /overlay/);
+  assert.match(roleLabel('calibration'), /reference photo/i);
+  assert.match(roleLabel('overlay'), /measurements/i);
 });
 
 test('lineup: resolvePhotoUrl turns an in-memory blob into a blob: URL (bug #1)', () => {
diff --git a/frontend/src/create/review/lineup.ts b/frontend/src/create/review/lineup.ts
index bc931c8..cbd8df4 100644
--- a/frontend/src/create/review/lineup.ts
+++ b/frontend/src/create/review/lineup.ts
@@ -57,9 +57,9 @@ export function lineupValid(kept: LineupItem[]): boolean {
 
 /** A short owner-facing label for a role (used in the minimum nudge). */
 export function roleLabel(role: PhotoRole): string {
-  if (role === 'calibration') return 'a clean photo';
-  if (role === 'overlay') return 'its dimension-overlay copy';
-  return 'a batch photo';
+  if (role === 'calibration') return 'the reference photo';
+  if (role === 'overlay') return 'the photo with measurements';
+  return 'a photo';
 }
 
 /**
diff --git a/frontend/src/create/review/reviewUi.contract.test.ts b/frontend/src/create/review/reviewUi.contract.test.ts
index 1aab880..c022b29 100644
--- a/frontend/src/create/review/reviewUi.contract.test.ts
+++ b/frontend/src/create/review/reviewUi.contract.test.ts
@@ -58,3 +58,19 @@ test('Review UI: live field commit + unified secondary buttons + moisture defaul
   assert.equal(reviewSrc.includes('create-btn'), false);
 });
 
+test('Review UI: Jeff-facing copy + 3:4 thumbs + View prompt gated', () => {
+  assert.match(reviewSrc, /Review slab/);
+  assert.match(reviewSrc, /Square feet \/ Board feet/);
+  assert.match(reviewSrc, /Create short description/);
+  assert.match(reviewSrc, /Create description/);
+  assert.match(reviewSrc, /Generate short and full description/);
+  assert.match(reviewSrc, /3–24 letters, numbers, or hyphens/);
+  assert.match(reviewSrc, /aspect-ratio: 3 \/ 4/);
+  assert.match(reviewSrc, /object-fit: contain/);
+  assert.match(reviewSrc, /getShowViewPrompt/);
+  assert.match(reviewSrc, /showViewPrompt/);
+  assert.equal(reviewSrc.includes('Call 2'), false);
+  assert.equal(reviewSrc.includes('Review to Ready'), false);
+  assert.equal(/aspect-ratio:\s*1\b/.test(reviewSrc), false);
+});
+
diff --git a/frontend/src/create/settings/Settings.svelte b/frontend/src/create/settings/Settings.svelte
index c53e567..5f7f8d7 100644
--- a/frontend/src/create/settings/Settings.svelte
+++ b/frontend/src/create/settings/Settings.svelte
@@ -9,6 +9,7 @@
     withWooHeaders,
   } from '../../api/wooDeviceCreds';
   import { reopenWooGate, isWooAuthFailure } from '../../api/wooGate';
+  import { getShowViewPrompt, setShowViewPrompt } from '../../settings/viewPrompt';
 
   interface SecretState { configured: boolean }
   // Masked mode: object {configured}. Unmasked UAT mode (SLAB_UAT_UNMASK_SECRETS): plain string.
@@ -52,6 +53,7 @@
   // This device only — localStorage; never sent via Settings PUT.
   let deviceWoo = { username: '', appPassword: '' };
   let deviceMsg = '';
+  let showViewPrompt = getShowViewPrompt();
 
   let rateRows: RateRow[] = [];
   let ratesLoading = false;
@@ -409,6 +411,19 @@
       <label><input type="checkbox" bind:checked={form.content_llm_enabled} /> Content LLM Enabled (default false)</label>
     </div>
 
+    <div class="section" data-testid="ui-options">
+      <h3>Review UI</h3>
+      <label>
+        <input
+          type="checkbox"
+          data-testid="show-view-prompt"
+          checked={showViewPrompt}
+          on:change={(e) => (showViewPrompt = setShowViewPrompt(e.currentTarget.checked))}
+        />
+        Show “View prompt” on Review (default off)
+      </label>
+    </div>
+
     <div>
       <label>Brand Voice</label>
       <input bind:value={form.brand_voice} />
diff --git a/frontend/src/png/overlay.test.ts b/frontend/src/png/overlay.test.ts
index 74519c4..2065f25 100644
--- a/frontend/src/png/overlay.test.ts
+++ b/frontend/src/png/overlay.test.ts
@@ -5,6 +5,7 @@ import {
   pickBottomTowardTop,
   axisRightUnit,
   buildOverlayPlan,
+  OVERLAY_FONT_PX,
   inventorySourceMap,
   BODY_WIDTH_FRAC,
   type OverlayPlan,
@@ -139,7 +140,8 @@ test('buildOverlayPlan: length line on axis-right outside slab; widths at 12in s
 
   // Color contract for draw consumers
   assert.equal(plan.stroke, '#000000');
-  assert.ok(plan.fontPx >= 12, `fontPx ${plan.fontPx} large enough to read`);
+  assert.equal(plan.fontPx, OVERLAY_FONT_PX);
+  assert.ok(plan.fontPx >= 28, `fontPx ${plan.fontPx} large enough to read`);
 });
 
 test('buildOverlayPlan: stations measured from EXIF bottom, not tip-inclusive M1 every-6 (#63)', () => {
@@ -253,8 +255,8 @@ test('buildOverlayPlan: width labels sit axis-left outside the slab (#67)', () =
   for (const w of plan.widths) {
     assert.ok(w.labelAt, 'width mark must expose labelAt');
     // left/right tips still on wood edges
-    assert.ok(Math.abs(w.left[1] - 149) <= 2 || Math.abs(w.left[1] - 50) <= 2);
-    assert.ok(Math.abs(w.right[1] - 149) <= 2 || Math.abs(w.right[1] - 50) <= 2);
+    assert.ok(Math.abs(w.left[1] - 149) <= 5 || Math.abs(w.left[1] - 50) <= 5);
+    assert.ok(Math.abs(w.right[1] - 149) <= 5 || Math.abs(w.right[1] - 50) <= 5);
     // labelAt on axis-left = opposite of axis-right from center
     // For this geometry, axis-right is toward smaller y; axis-left toward larger y
     // (outside past the bottom edge y≈149).
@@ -273,29 +275,36 @@ test('buildOverlayPlan: width labels sit axis-left outside the slab (#67)', () =
   assert.ok(lenY < 50 - 4, `length dim stays axis-right outside top edge, got y=${lenY}`);
 });
 
-test('buildOverlayPlan: font smaller than prior 28/scale*1.2 and 22/scale*1.0 (#67,#71)', () => {
+test('buildOverlayPlan: fixed readable measurement font for every product', () => {
   const W = 480, H = 200;
   const bitset = new Uint8Array(W * H);
   for (let y = 50; y < 150; y++) for (let x = 0; x < W; x++) bitset[y * W + x] = 1;
   const box = orientedRect(minAreaRect(bitset, W, H)!, 0);
-  const scale = 10;
-  const plan = buildOverlayPlan({
+  const planA = buildOverlayPlan({
     bitset,
     widthPx: W,
     heightPx: H,
     bbox: box,
-    scale,
+    scale: 10,
     lengthIn: 48,
     lengthLabel: '48"',
     mapToInventory: (x, y) => [x, y],
   });
-  const oldFont67 = Math.max(28, Math.round(scale * 1.2));
-  const oldFont71 = Math.max(22, Math.round(scale * 1.0));
-  assert.ok(plan.fontPx < oldFont67, `fontPx ${plan.fontPx} must be < prior ${oldFont67}`);
-  assert.ok(plan.fontPx < oldFont71, `fontPx ${plan.fontPx} must be < prior ${oldFont71}`);
-  assert.ok(plan.fontPx >= 12, `fontPx ${plan.fontPx} still legible`);
-  // Concrete contract (#71): capped by scale when no inventory size
-  assert.equal(plan.fontPx, Math.max(12, Math.min(16, Math.round(scale * 0.18))));
+  const planB = buildOverlayPlan({
+    bitset,
+    widthPx: W,
+    heightPx: H,
+    bbox: box,
+    scale: 80,
+    lengthIn: 48,
+    lengthLabel: '48"',
+    mapToInventory: (x, y) => [x, y],
+    inventoryW: 1200,
+    inventoryH: 1600,
+  });
+  assert.equal(planA.fontPx, OVERLAY_FONT_PX);
+  assert.equal(planB.fontPx, OVERLAY_FONT_PX);
+  assert.ok(planA.fontPx >= 28, `fontPx ${planA.fontPx} must be large enough to read`);
 });
 
 
@@ -908,9 +917,8 @@ test('buildOverlayPlan: labels inside inventory PNG; length off wood; smaller fo
   });
 
   // Font: one consistent smaller size than prior max(22, scale*1.0)
-  const priorFont = Math.max(22, Math.round(scale * 1.0));
-  assert.ok(plan.fontPx < priorFont, `fontPx ${plan.fontPx} must be < prior ${priorFont}`);
-  assert.ok(plan.fontPx >= 12, `fontPx ${plan.fontPx} still readable`);
+  assert.equal(plan.fontPx, OVERLAY_FONT_PX);
+  assert.ok(plan.fontPx >= 28, `fontPx ${plan.fontPx} still readable`);
 
   // Wood AABB in inventory
   let mMinX = Infinity, mMaxX = -Infinity, mMinY = Infinity, mMaxY = -Infinity;
diff --git a/frontend/src/png/overlay.ts b/frontend/src/png/overlay.ts
index b1cf9ad..9e87b0e 100644
--- a/frontend/src/png/overlay.ts
+++ b/frontend/src/png/overlay.ts
@@ -262,6 +262,9 @@ function probeExtent(
   return { minP, maxP };
 }
 
+/** Jeff-facing dimension labels: fixed size in inventory PNG pixels. */
+export const OVERLAY_FONT_PX = 36;
+
 function fmtInches(inches: number): string {
   const whole = Math.floor(inches + 1e-9);
   const rem = Math.round((inches - whole) * 8);
@@ -286,14 +289,9 @@ export function buildOverlayPlan(input: OverlayPlanInput): OverlayPlan {
   const { bottom, top, ux, uy } = oriented;
   const [rx, ry] = axisRightUnit(ux, uy);
 
-  // Consistent smaller readable font (#71). Cap by inventory size so high
-  // source scale (≈80 px/in) does not dominate the PNG.
-  const fontPx = (() => {
-    if (inventoryW && inventoryH && inventoryW > 0 && inventoryH > 0) {
-      return Math.max(12, Math.min(16, Math.round(Math.min(inventoryW, inventoryH) * 0.016)));
-    }
-    return Math.max(12, Math.min(16, Math.round(scale * 0.18)));
-  })();
+  // Fixed readable measurement font in inventory image pixels (Jeff-facing).
+  // Same size for every product — do not scale with tape px/in or canvas size.
+  const fontPx = OVERLAY_FONT_PX;
   // Inset for stroke + arrowhead so visual tips sit on/inside edges (#71).
   const lineW = Math.max(2, Math.round(fontPx / 10));
   const arrowHead = Math.max(7, fontPx * 0.32);
diff --git a/frontend/src/settings/viewPrompt.ts b/frontend/src/settings/viewPrompt.ts
new file mode 100644
index 0000000..2b70fbb
--- /dev/null
+++ b/frontend/src/settings/viewPrompt.ts
@@ -0,0 +1,29 @@
+/**
+ * Device-local toggle: show Review "View prompt" (default off).
+ * Jeff-facing UI leaves this hidden unless an operator enables it in Settings.
+ */
+const KEY = 'slabuploader.ui.show_view_prompt';
+export const VIEW_PROMPT_EVENT = 'slabuploader:show-view-prompt';
+
+export function getShowViewPrompt(): boolean {
+  try {
+    return localStorage.getItem(KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+export function setShowViewPrompt(on: boolean): boolean {
+  try {
+    if (on) localStorage.setItem(KEY, '1');
+    else localStorage.removeItem(KEY);
+  } catch {
+    /* ignore quota / private mode */
+  }
+  try {
+    window.dispatchEvent(new CustomEvent(VIEW_PROMPT_EVENT, { detail: on }));
+  } catch {
+    /* ignore non-browser */
+  }
+  return on;
+}
diff --git a/frontend/tests/e2e/photos-ready.spec.ts b/frontend/tests/e2e/photos-ready.spec.ts
index fcff5d7..4a09878 100644
--- a/frontend/tests/e2e/photos-ready.spec.ts
+++ b/frontend/tests/e2e/photos-ready.spec.ts
@@ -22,7 +22,7 @@ const ensureFreshBatch = async (page: Page) => {
   await page.goto('/');
   // resumeProbe is async onMount — wait for either Resume or Batch.
   const resumeHeading = page.getByRole('heading', { name: /resume/i });
-  const batchHeading = page.getByRole('heading', { name: 'Batch photos' });
+  const batchHeading = page.getByRole('heading', { name: 'Add slab photos' });
   await expect(resumeHeading.or(batchHeading)).toBeVisible({ timeout: 15_000 });
   if (await resumeHeading.isVisible().catch(() => false)) {
     await page.getByRole('button', { name: /start fresh/i }).click();
@@ -74,8 +74,8 @@ test.describe('M2 #65 Photos-ready e2e (set1-48x2)', () => {
     // Gallery multi-input (not the capture=environment camera input).
     const gallery = page.locator('input[type="file"][multiple]');
     await gallery.setInputFiles([FACE_A, FACE_B]);
-    await expect(page.getByAltText('Batch photo 1')).toBeVisible({ timeout: 30_000 });
-    await expect(page.getByAltText('Batch photo 2')).toBeVisible();
+    await expect(page.getByAltText('Photo 1')).toBeVisible({ timeout: 30_000 });
+    await expect(page.getByAltText('Photo 2')).toBeVisible();
     await shot(page, '01-batch.png');
 
     await page.getByRole('button', { name: 'Continue' }).click();
@@ -89,10 +89,10 @@ test.describe('M2 #65 Photos-ready e2e (set1-48x2)', () => {
 
     await expect(page.getByRole('heading', { name: 'Measure' })).toBeVisible();
     await shot(page, '04-tape-measure.png');
-    await page.getByLabel('Length L').fill('48');
+    await page.getByLabel('Length (in)').fill('48');
     await page.getByLabel('Thickness').fill('2');
     // blur/change commits eighths into session before Calculate.
-    await page.getByLabel('Length L').blur();
+    await page.getByLabel('Length (in)').blur();
     await page.getByLabel('Thickness').blur();
     await shot(page, '05-measure.png');
 
@@ -105,10 +105,10 @@ test.describe('M2 #65 Photos-ready e2e (set1-48x2)', () => {
       timeout: 120_000,
     });
     await expect(page.getByLabel('Photos ready')).toBeVisible();
-    await expect(page.getByText('Clean calibration')).toBeVisible();
-    await expect(page.getByText('Dimension overlay')).toBeVisible();
-    // Sibling face-b should appear as Batch photo 2 (capture order).
-    await expect(page.getByText(/Batch photo 2|Photo 2 failed/)).toBeVisible();
+    await expect(page.getByText('Reference photo')).toBeVisible();
+    await expect(page.getByText('Photo with measurements')).toBeVisible();
+    // Sibling face-b should appear as Photo 2 (capture order).
+    await expect(page.getByText(/Photo 2|Photo 2 failed/)).toBeVisible();
 
     await shot(page, '06-photos-ready.png');
 
@@ -125,7 +125,7 @@ test.describe('M2 #65 Photos-ready e2e (set1-48x2)', () => {
         const st = fs.existsSync(p) ? fs.statSync(p) : null;
         return `  - ${s} (${st ? `${st.size} bytes` : 'MISSING'})`;
       }),
-      `assertions: Photos ready heading; Clean calibration; Dimension overlay; batch sibling slot`,
+      `assertions: Photos ready heading; Reference photo; Photo with measurements; batch sibling slot`,
     ];
     fs.writeFileSync(logPath, lines.join('\n') + '\n', 'utf8');
   });
diff --git a/frontend/tests/e2e/settings-contrast.spec.ts b/frontend/tests/e2e/settings-contrast.spec.ts
index 373e6ce..8a78df9 100644
--- a/frontend/tests/e2e/settings-contrast.spec.ts
+++ b/frontend/tests/e2e/settings-contrast.spec.ts
@@ -109,7 +109,7 @@ test.describe('Settings contrast (Gitea bug #75 black-on-black)', () => {
   test('Regression: SlabList.svelte / Review.svelte / Publish.svelte / GenerateText.svelte remain unchanged (still pass their existing contrast)', async ({ page }) => {
     const regressionScreens = [
       { name: 'Slabs (dev)', heading: /slabs/i },
-      { name: 'Review (dev)', heading: 'Review to Ready' },
+      { name: 'Review (dev)', heading: 'Review slab' },
       { name: 'Publish (dev)', heading: 'Publish to WooCommerce' },
       { name: 'Generate (dev)', heading: 'Generate text' },
     ];