@galda/cli 0.10.34 → 0.10.35

package/app/index.html

@@ -452,6 +452,18 @@
   .vchip.none{color:var(--ink3);border-color:var(--hair2)}
   .vchip.human{color:var(--amber);border-color:rgba(var(--amber-rgb),.5);font-weight:700}
   .vchip.human.high{color:var(--danger);border-color:rgba(var(--danger-rgb),.5)}
+  /* H23 (2026-07-18) evidence-first review card: a fact stops looking like a button —
+     glyph carries the state colour, text stays plain ink, no border/pill (border is
+     reserved for the PR link, the card's only clickable pill). Scoped to .lg-ev so it
+     only affects the Ledger review card; other .vchip call sites are unchanged/out of
+     scope for this pass. Ported from flagship.html .lg-ev .vf (~L401-407). */
+  .lg-ev .vf{display:inline-flex;align-items:center;gap:5px;color:var(--ink2)}
+  .lg-ev .vf .g{font-style:normal}
+  .lg-ev .vf.ok .g{color:var(--green)}
+  .lg-ev .vf.no .g{color:var(--danger)}
+  .lg-ev .vf.none{color:var(--ink3)}
+  .lg-ev .vf.human .g{color:var(--amber)}
+  .lg-ev .vf.human.high .g{color:var(--danger)}
   .pbadge{font-family:var(--mono);font-size:9.5px;padding:1px 6px;border-radius:5px;margin-right:6px;color:var(--iri);border:1px solid rgba(var(--blue-rgb),.35)}
   .blockreason{color:var(--amber)}
   .rvcheck2{font-size:15px;font-weight:600;color:var(--ink);line-height:1.5;margin-bottom:4px}
@@ -829,6 +841,14 @@
   .beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:8px}
   .ba-col{min-width:0}
   .balabel{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink3);margin-bottom:2px}
+  /* diff box + zoomed inset (HANDOFF-review-card-diffbox-2026-07-18) — only emitted
+     by beforeAfterBoxedHtml(), so these never touch the plain pair above or the
+     older per-task renderReviewChecklist before/after (out of scope, untouched). */
+  .ba-imgwrap{position:relative;margin-top:8px}
+  .ba-imgwrap .proofimg{width:100%;height:auto;max-height:none;object-fit:initial;margin-top:0;display:block}
+  .ba-box{position:absolute;border:1.5px solid var(--danger);border-radius:2px;pointer-events:none}
+  .ba-zoomhd{margin-top:14px}
+  .lg-ev .ba-zoomimg{display:block;width:100%;height:auto;max-height:none;object-fit:initial;margin-top:8px;border-radius:9px;border:1px solid var(--hair2)}
   .reqbtns{display:flex;gap:8px;margin-top:4px}
   .reqbtn{height:30px;padding:0 14px;border-radius:9px;border:1px solid var(--hair2);background:transparent;
     color:var(--ink2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
@@ -1781,40 +1801,95 @@
   .sa-ic{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--ink3);display:grid;place-items:center;cursor:pointer;flex:0 0 30px}
   .sa-ic:hover{color:var(--ink);background:transparent} /* icon hover = glyph colour only (§5.5) */
   .sa-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
-  /* ── Context Ledger card (H06 / flagship .lg-*): 1 goal = 1 台帳 — context + evidence
-     on one card. Ported verbatim from docs/design/flagship/flagship.html (~L339-420),
-     flagship --red/--green-bg substituted for the app's real tokens (--danger,
-     rgba(var(--green-rgb),.x)/color-mix — see theme.css :root, no --green-bg here). */
-  .lg-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:13px}
+  /* ── Review card, evidence-first (H23 2026-07-18 full spec, superseding H22/H06):
+     Evidence sits right under the title/meta row, Context is a closed-by-default
+     <details> with a one-line quote summary, and Evidence itself branches by task
+     kind (image/logic/docs/missing). Context / Done when / Evidence all sit on ONE
+     flush surface now — hairlines only, no more Evidence-only canvas box (§5.5 "面の
+     処理はパネル全体に均一"). Ported from docs/design/flagship/flagship.html
+     (~L340-434), flagship --red/--green-bg substituted for the app's real tokens
+     (--danger, rgba(var(--green-rgb),.x)). Old Plan/Review-thread/Changed-files&diff
+     folds (.lg-det/.lg-plan/.lg-thread/.lg-diffwrap) are retired in favour of the
+     What-we-did/What-to-look-at bullet lists inside Context. */
+  .lg-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
   .lg-hd .no{flex:0 0 auto;font:600 11px/1 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
   .lg-hd .t{flex:1;font:600 15px/1.3 var(--ui);letter-spacing:-.014em}
   .lg-state{flex:0 0 auto;font:600 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase} /* state = colour text only (§5.5 no badge) */
   .lg-state.review{color:var(--blue)}
-  .lg-ctx{display:grid;grid-template-columns:66px 1fr;gap:7px 12px;margin-bottom:14px;font-size:12.5px;line-height:1.5}
-  .lg-ctx .k{font:600 8.5px/1.8 var(--mono);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase}
-  .lg-ctx .v{color:var(--ink)}
-  .lg-ev{background:var(--canvas);border-radius:12px;padding:11px 13px;margin-bottom:13px}
+  /* meta row: PR link / token savings (real tap-to-open toggle) / Run locally — a
+     compact row directly under the title (H23 §1, pattern 1 won over a plain text
+     line and title-row-right-aligned chips). */
+  .lg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:9px 0 13px}
+  .lg-meta .none{font:500 10.5px/1.5 var(--mono);color:var(--ink3);font-style:italic}
+  .sa-prlink.sm{font-size:9.5px;padding:4px 7px}
+  .sa-runlocal{display:inline-flex;align-items:center;gap:5px;font:600 10px/1 var(--mono);letter-spacing:.03em;
+    color:var(--blue);background:transparent;border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);
+    border-radius:7px;padding:5px 9px 5px 8px;cursor:pointer}
+  .sa-runlocal:hover{border-color:var(--blue)}
+  .sa-runlocal svg{width:11px;height:11px;fill:currentColor;stroke:none}
+  .tokchip{display:inline-flex;align-items:center;gap:4px;font:600 9.5px/1 var(--mono);letter-spacing:.02em;color:var(--green);
+    background:rgba(var(--green-rgb),.12);border:0;border-radius:7px;padding:5px 9px;box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.22);
+    cursor:pointer}
+  .tokchip:hover{box-shadow:inset 0 0 0 1px var(--green)}
+  .tokchevron{font-style:normal;font-size:11px;line-height:1;transition:transform .2s;opacity:.75}
+  .tokchip.open .tokchevron{transform:rotate(90deg)}
+  .tokdetail{display:none;margin:0 0 13px;padding:9px 11px;background:var(--canvas);border-radius:8px}
+  .tokdetail.open{display:block}
+  .tokdetail .k{font:600 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px;display:block}
+  .tokdetail .v{font:500 11px/1.6 var(--mono);color:var(--ink2)}
+  /* Context: closed by default, one-line quote summary, chevron large + far right (H23 §2) */
+  .lg-ctx{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;font-size:12.5px;line-height:1.5}
+  .lg-fact{display:grid;grid-template-columns:66px 1fr;gap:7px 12px}
+  .lg-fact .k{font:600 8.5px/1.8 var(--mono);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase}
+  .lg-fact .v{color:var(--ink)}
+  .lg-goal{border:0}
+  .lg-goal>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--ink3);min-width:0}
+  .lg-goal>summary::-webkit-details-marker{display:none}
+  .lg-goal>summary .k{font:600 8.5px/1.8 var(--mono);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;flex:0 0 auto}
+  .lg-goal>summary .v{color:var(--ink);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
+  .lg-goal>summary .gtoggle{font-style:normal;font-size:19px;line-height:1;transition:transform .2s;flex:0 0 auto;
+    margin-left:auto;color:var(--ink3);padding-left:10px}
+  .lg-goal:hover>summary{color:var(--ink2)}
+  .lg-goal:hover>summary .gtoggle{color:var(--ink)}
+  .lg-goal[open]>summary .gtoggle{transform:rotate(90deg)}
+  .lg-context{margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
+  /* fanned-out goal: list every sibling task/goal so a reviewer never wonders whether
+     the AI silently dropped part of a long ask (H23 §2/§4). */
+  .lg-splitnote{background:var(--canvas);border-radius:8px;padding:10px 12px;margin-bottom:13px}
+  .lg-splitnote .hd{font:600 8.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
+  .lg-splitnote ul{margin:0;padding:0;list-style:none;font-size:11.5px;line-height:1.8;color:var(--ink3)}
+  .lg-splitnote li.cur{color:var(--ink)}
+  .lg-splitnote li.cur b{color:var(--green);font-weight:600}
+  .lg-notfound{font-size:11.5px;line-height:1.65;color:var(--ink3);font-style:italic;margin-bottom:13px}
+  .lg-bullethd{font:600 8px/1 var(--mono);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;margin:13px 0 6px}
+  .lg-bullets{margin:0;padding:0 0 0 16px;font-size:12px;line-height:1.65;color:var(--ink2)}
+  .lg-bullets li{margin-bottom:5px}
+  /* Evidence: same flush surface as Context/Done when — hairline only, no boxed canvas
+     (H23 §5.5 correction: "コンテキストとダウンウェインとエビデンスが全部違うレイヤー") */
+  .lg-ev{border-top:1px solid var(--hair);padding-top:13px;margin-top:2px}
   .lg-ev .lg-evhd{font:600 8.5px/1 var(--mono);letter-spacing:.13em;color:var(--ink3);text-transform:uppercase;margin-bottom:10px}
   .lg-ev .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 15px;font:500 11.5px/1.2 var(--mono);font-variant-numeric:tabular-nums}
   .lg-ev .a{color:var(--green);font-style:normal} .lg-ev .d{color:var(--danger);font-style:normal}
   .lg-ev .fls{color:var(--ink3)}
   .lg-ev img{display:block;width:100%;max-height:190px;object-fit:cover;object-position:top;border-radius:9px;margin-top:11px;cursor:zoom-in}
-  /* staged disclosure = native <details> (§1.5-8 answer the folded case first) */
-  .lg-det{border-top:1px solid var(--hair)}
-  .lg-det>summary{list-style:none;padding:10px 2px;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;color:var(--ink2)}
-  .lg-det>summary::-webkit-details-marker{display:none}
-  .lg-det>summary::before{content:"›";color:var(--ink3);font-size:14px;transition:transform .2s;line-height:1}
-  .lg-det[open]>summary::before{transform:rotate(90deg)}
-  .lg-det>summary:hover{color:var(--ink)}
-  .lg-det>summary .c{margin-left:auto;font:500 10px/1 var(--mono);color:var(--ink3)}
-  .lg-det>summary .c .a{color:var(--green);font-style:normal} .lg-det>summary .c .d{color:var(--danger);font-style:normal}
-  .lg-plan{padding:2px 2px 11px 16px;font-size:12px;color:var(--ink2)}
-  .lg-plan .step{display:flex;gap:9px;padding:3px 0;line-height:1.5}
-  .lg-plan .step .n{flex:0 0 auto;font:600 10px/1.6 var(--mono);color:var(--ink3)}
-  .lg-thread{padding:0 2px 11px}
-  .lg-tmsg{display:flex;gap:9px;padding:4px 0;font-size:12px;line-height:1.5}
-  .lg-tmsg .who{flex:0 0 46px;font:600 9.5px/1.7 var(--mono);color:var(--ink3)}
-  .lg-diffwrap{padding:0 0 11px}
+  /* logic-only hero: no UI to show, so the number IS the evidence */
+  .lg-herostat{display:flex;align-items:baseline;gap:10px;margin:4px 0 12px}
+  .lg-herostat .n{font:700 30px/1 var(--mono);color:var(--green);font-variant-numeric:tabular-nums}
+  .lg-herostat.fail .n{color:var(--danger)}
+  .lg-herostat .l{font:500 11px/1.4 var(--ui);color:var(--ink3)}
+  /* docs-only hero: GitHub-style diff — added lines get a green band + "+" gutter */
+  .lg-diffblock{background:var(--canvas);border-radius:7px;padding:7px 0;font:400 11.5px/1.8 var(--mono);
+    color:var(--ink2);margin-top:6px;overflow-x:auto}
+  .lg-diffblock .ln{display:flex;padding:0 11px}
+  .lg-diffblock .ln.a{background:rgba(var(--green-rgb),.14)}
+  .lg-diffblock .gutter{flex:0 0 14px;color:var(--green);font-weight:700;user-select:none}
+  .lg-diffblock .ln:not(.a) .gutter{color:transparent}
+  .lg-diffblock .ln.a .txt{color:var(--green)}
+  /* missing-capture hero: an honest small amber note, never a fabricated image */
+  .lg-missinghd{display:flex;align-items:center;gap:8px;font:600 9px/1 var(--mono);letter-spacing:.1em;
+    text-transform:uppercase;color:var(--amber);margin-bottom:9px}
+  .lg-missinghd svg{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:2}
+  .lg-manualnote{font-size:12px;line-height:1.7;color:var(--ink2);background:var(--canvas);border-radius:8px;padding:11px 13px}
   /* risk/conflict = small inline amber, never a filled panel (§1.5-8 don't paint the surface) */
   .lg-risk{display:flex;align-items:center;gap:8px;color:var(--amber);font-size:12px;line-height:1.4;padding:9px 2px;border-top:1px solid var(--hair)}
   .lg-risk svg{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@@ -1847,6 +1922,7 @@
   /* To Do timeline: order via tone + labels, no axis line (§1.5-4) */
   #fsRoot .tl{position:relative}
   #fsRoot .tlcap{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;padding:13px 0 5px 0} /* left 8->0: sit the DOING/Next up/Later labels on the same spine as the section headings (Masa 2026-07-18) */
+  #fsRoot .tlcap.needs{color:var(--amber)} /* "Needs you" caption tinted to the attention accent, matching the board's Needs-you column (Masa 2026-07-19). Colour on the label only — the rows below carry their own in-row colour per §1.5-8. */
   #fsRoot .trow{position:relative;padding:6px 6px 6px 0;border-radius:8px;font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:9px} /* left 8->0: row dot lines up with the Review/To Do headings' left edge, not 8px inside it (Masa 2026-07-18) */
   #fsRoot .trow .tt{color:color-mix(in srgb,var(--ink) 84%,var(--panel))} /* §13.2 soften To Do row name (not pure black); left chat feed keeps --ink */
   #fsRoot .trow:hover{background:var(--hover-s)}
@@ -3231,6 +3307,40 @@ function buildReviewDigest({ goals, tasks } = {}){
   }
   return rows;
 }
+// Review title: mirrors the label convention used throughout (reviewSummary.changed
+// → plan[0] → text) — pulled into one place so the review card's own title and its
+// sibling-goal titles (H23 split note) stay consistent.
+function saReviewTitle(g){
+  return String(g?.reviewSummary?.changed || g?.plan?.[0] || g?.text || '').replace(/\s+/g, ' ').trim().slice(0, 90);
+}
+// H23 (2026-07-18) evidence-kind detection. Mirrors engine/lib.mjs isUiChange() /
+// hasTestRelevantChanges() — kept in sync manually since the browser script isn't a
+// module. flagship's demo data carries an explicit `kind` field
+// ('image'|'logic'|'docs'|'missing'); real goals/tasks have no such field, so the
+// review card derives one from real signals it already has (a captured proof image,
+// whether changed files look like UI source, whether they're all docs-only). This
+// is a HEURISTIC, not a stored fact on the goal — flagged as a judgment call in the
+// H23 implementation PR for a human to correct if it misclassifies real data.
+const UI_TOUCH_RE_LOCAL = /^app\/|\.(?:html|css|tsx|jsx|vue|svelte)$/i;
+function isUiChangeLocal(files){ return (files ?? []).some((f) => UI_TOUCH_RE_LOCAL.test(String(f ?? ''))); }
+const DOC_ONLY_RE_LOCAL = /(^|\/)(README|START-HERE|CHANGELOG|LICENSE)(\.[\w.-]+)?$|(^|\/)docs\/.*\.(md|mdx|txt)$|\.mdx?$|\.txt$/i;
+function hasTestRelevantChangesLocal(files){
+  const fs = (files ?? []).map((f) => String(f ?? '').trim()).filter(Boolean);
+  if (!fs.length) return true;
+  return fs.some((f) => !DOC_ONLY_RE_LOCAL.test(f));
+}
+// Priority: image (a real capture exists) > missing (UI touched, should have a
+// capture per PRD §4(C) but doesn't) > docs (every changed file is docs-only) >
+// logic (verified only by tests, no UI). Falls back to 'image' (today's generic
+// fact-row + no image) when no signal is conclusive — never claims a stronger kind
+// than the data actually supports.
+function saEvidenceKind(filePaths, hasProofImg, testResult){
+  if (hasProofImg) return 'image';
+  if (isUiChangeLocal(filePaths)) return 'missing';
+  if (filePaths.length && !hasTestRelevantChangesLocal(filePaths)) return 'docs';
+  if (testResult?.ran) return 'logic';
+  return 'image';
+}
 // Mirrors engine/lib.mjs buildReviewSummary()/requirementSummaryLine() (task 96)
 // — kept in sync manually since the browser script isn't a module. Used by both
 // the review checklist top summary and the chat-side review导线.
@@ -3435,6 +3545,92 @@ function beforeAfterMediaHtml(taskId, proof, altLabel){
     <div class="ba-col"><span class="balabel">After</span>${proofMediaHtml(taskId, proof, altLabel)}</div>
   </div>`;
 }
+// Diff box + zoomed inset (HANDOFF-review-card-diffbox-2026-07-18): on top of the
+// plain before/after pair above, isolate the region that actually changed and draw
+// a red box over it on both images, plus a cropped/enlarged row below. Computed
+// client-side from the two PNGs via <canvas> pixel comparison at render time — not
+// baked in at capture time — so it works retroactively on every proof pair already
+// on disk with no new server-side image dependency (see the handoff for the full
+// rationale). Reference algorithm, verified against a real before/after pair
+// (composer icon swap, 640x200): correctly isolated a 57x52px box centered on the
+// changed icon — 0.13% image coverage, no false positives elsewhere in the frame.
+function computeDiffBox(beforeImg, afterImg, { threshold = 24, minCoverage = 0.0005, maxCoverage = 0.7, pad = 0.03 } = {}) {
+  const w = beforeImg.naturalWidth, h = beforeImg.naturalHeight;
+  if (w !== afterImg.naturalWidth || h !== afterImg.naturalHeight) return null; // different-shaped images: don't guess
+  const c1 = document.createElement('canvas'); c1.width = w; c1.height = h;
+  const c2 = document.createElement('canvas'); c2.width = w; c2.height = h;
+  c1.getContext('2d').drawImage(beforeImg, 0, 0, w, h);
+  c2.getContext('2d').drawImage(afterImg, 0, 0, w, h);
+  const d1 = c1.getContext('2d').getImageData(0, 0, w, h).data;
+  const d2 = c2.getContext('2d').getImageData(0, 0, w, h).data;
+  let minX = w, minY = h, maxX = -1, maxY = -1, diffPx = 0;
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const i = (y * w + x) * 4;
+      const d = Math.abs(d1[i] - d2[i]) + Math.abs(d1[i + 1] - d2[i + 1]) + Math.abs(d1[i + 2] - d2[i + 2]);
+      if (d > threshold) {
+        diffPx++;
+        if (x < minX) minX = x; if (x > maxX) maxX = x;
+        if (y < minY) minY = y; if (y > maxY) maxY = y;
+      }
+    }
+  }
+  const total = w * h;
+  if (maxX < 0 || diffPx / total < minCoverage) return null; // no real difference — don't box a no-op
+  if (diffPx / total > maxCoverage) return null; // diff too diffuse to be "a spot" — a full redesign shouldn't get a red box either
+  const padPx = Math.round(Math.max(w, h) * pad);
+  minX = Math.max(0, minX - padPx); minY = Math.max(0, minY - padPx);
+  maxX = Math.min(w, maxX + padPx); maxY = Math.min(h, maxY + padPx);
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function baLoadImage(src){
+  return new Promise((resolve, reject) => {
+    const im = new Image();
+    im.onload = () => resolve(im);
+    im.onerror = () => reject(new Error(`image failed to load: ${src}`));
+    im.src = src;
+  });
+}
+// Crop {x,y,w,h} out of a decoded image and scale it up into a small inset — same
+// aspect ratio as the box, never stretched. Magnification is capped at 6x so a
+// near-single-pixel box doesn't blow up into mush.
+function baZoomDataUrl(img, box, maxW = 420, maxH = 200){
+  const scale = Math.min(maxW / box.w, maxH / box.h, 6);
+  const outW = Math.max(1, Math.round(box.w * scale));
+  const outH = Math.max(1, Math.round(box.h * scale));
+  const c = document.createElement('canvas'); c.width = outW; c.height = outH;
+  c.getContext('2d').drawImage(img, box.x, box.y, box.w, box.h, 0, 0, outW, outH);
+  return c.toDataURL('image/png');
+}
+// Async: loads the before/after PNGs, runs computeDiffBox(), and — only when a real
+// box is found — renders the before/after pair with a red box overlay on each image
+// (percent-positioned so it tracks the image's displayed size at any viewport width)
+// plus a "Zoomed on the boxed area" row below. Returns null on every fallback
+// condition (no PNG pair, load failure, no clean box) so the caller keeps showing
+// the plain beforeAfterMediaHtml() pair unchanged — never a guessed or empty box
+// (HANDOFF-review-card-diffbox-2026-07-18). Only kind==='image' Ledger evidence
+// (saEvidenceHtml) calls this; the older per-task renderReviewChecklist before/after
+// is explicitly out of scope for this handoff and stays on beforeAfterMediaHtml.
+async function beforeAfterBoxedHtml(taskId, proof, altLabel){
+  const beforeSrc = proof?.beforePng, afterSrc = proof?.png;
+  if (!beforeSrc || !afterSrc) return null; // the box needs two real stills, not a GIF frame
+  let beforeImg, afterImg;
+  try {
+    [beforeImg, afterImg] = await Promise.all([
+      baLoadImage(withKey(`/proof/${taskId}/${beforeSrc}`)),
+      baLoadImage(withKey(`/proof/${taskId}/${afterSrc}`)),
+    ]);
+  } catch { return null; } // a missing/broken file is a fallback, not a crash
+  const box = computeDiffBox(beforeImg, afterImg);
+  if (!box) return null;
+  const w = beforeImg.naturalWidth, h = beforeImg.naturalHeight;
+  const boxStyle = `left:${(box.x / w * 100).toFixed(3)}%;top:${(box.y / h * 100).toFixed(3)}%;width:${(box.w / w * 100).toFixed(3)}%;height:${(box.h / h * 100).toFixed(3)}%`;
+  const frame = (img, label) => `<div class="ba-col"><span class="balabel">${label}</span><div class="ba-imgwrap"><img class="proofimg" src="${img.src}" alt="${label.toLowerCase()}: ${altLabel}" loading="lazy"><div class="ba-box" style="${boxStyle}"></div></div></div>`;
+  const zoomCol = (dataUrl, label) => `<div class="ba-col"><img class="ba-zoomimg" src="${dataUrl}" alt="zoomed ${label.toLowerCase()}: ${altLabel}"></div>`;
+  return `<div class="beforeafter">${frame(beforeImg, 'Before')}${frame(afterImg, 'After')}</div>
+    <div class="lg-evhd ba-zoomhd">Zoomed on the boxed area</div>
+    <div class="beforeafter ba-zoomrow">${zoomCol(baZoomDataUrl(beforeImg, box), 'before')}${zoomCol(baZoomDataUrl(afterImg, box), 'after')}</div>`;
+}
 // swap the still for the real video only on demand, one at a time
 document.addEventListener('click', (e) => {
   const w = e.target.closest('.proofwrap');
@@ -5554,19 +5750,27 @@ function renderFsLane(){
   renderFsReview(); renderFsTodo();
   if (fsUI.todoView === 'board') renderFsBoard();
 }
-// Which board column a GOAL belongs in. Follows goalChip()'s rule so the board and
-// the status chips can never drift; the two columns the chips have no word for
-// (Later / Needs you) are spelled out here. Pure: goal in, column key out.
-function fsBoardBucket(goal){
+// Which board column a GOAL belongs in. Follows goalChip()'s rule so the board and the
+// status chips can never drift; the two columns the chips have no word for (Later / Needs
+// you) are spelled out here. Takes the goal's TASKS so it can tell a genuinely in-flight
+// goal from one whose status got stuck 'running' after every task already finished — that
+// stale case is what piled old goals into Doing (Masa 2026-07-19). Pure: goal + tasks in.
+function fsBoardBucket(goal, tasks){
   const s = goal?.status;
   if (s === 'pending') return 'later';                          // shelved by the composer's "Later"
   if (s === 'needsInput') return 'needs';                       // a clarifying question is waiting on the user
   if (['blocked', 'failed', 'partial', 'interrupted'].includes(s)) return 'needs'; // stopped/errored — needs YOUR action (retry), like the flagship board which puts .drow.err in Needs you. Not "Doing" — Doing is only what's actively moving (Masa 2026-07-18)
   if (s === 'review') return 'review';
-  if (s === 'done' || s === 'reverted') return 'done';          // both terminal; REVERTED is not "in flight"
+  if (s === 'done' || s === 'reverted' || s === 'skipped') return 'done'; // terminal; skipped is finished, not in flight (it used to fall through to the doing default)
   if (s === 'stacked' || s === 'sending') return 'todo';
-  if (s === 'running' && !goal.startedAt) return 'todo';        // goalChip: planned, nothing started yet
-  return 'doing';                                               // planning / running / retesting — actively in flight only
+  if (s === 'running' && !goal?.startedAt) return 'todo';       // goalChip: planned, nothing started yet
+  // Otherwise the goal is in flight (planning / retesting / running-and-started). BUT a
+  // goal whose status stuck 'running' after every task already finished is NOT moving —
+  // that is exactly what piled stale goals into Doing (Masa 2026-07-19, "Doing に11件").
+  // If it has tasks and they're all terminal, it belongs in Done, not Doing.
+  const mine = (tasks ?? []).filter((t) => t.goalId === goal?.id && !t.reply);
+  if (mine.length && mine.every((t) => ['done', 'skipped'].includes(t.status))) return 'done';
+  return 'doing';                                               // planning / retesting / actively in flight
 }
 // Kanban board — GOAL-level: one card per goal, never per task.
 //
@@ -5601,7 +5805,7 @@ function renderFsBoard(){
   // the goal is moving) — a coloured word (Failed/Interrupted) says it instead.
   const goalTasks = (g) => list.filter((t) => t.goalId === g.id && !t.reply);
   const goalCard = (g) => {
-    const bkt = fsBoardBucket(g);
+    const bkt = fsBoardBucket(g, list);
     // errored is status-based now (blocked/failed/partial/interrupted live in the Needs-you column,
     // not Doing). Doing holds only what's actively moving, so bkt==='doing' ⇒ healthy in flight.
     const errored = ['blocked', 'failed', 'partial', 'interrupted'].includes(g.status);
@@ -5636,7 +5840,7 @@ function renderFsBoard(){
   };
   const no = (g) => goalNo.get(g.id) ?? Infinity;
   const bucket = { todo: [], doing: [], needs: [], review: [], done: [], later: [] };
-  for (const g of pgoals) bucket[fsBoardBucket(g)].push(g);
+  for (const g of pgoals) bucket[fsBoardBucket(g, list)].push(g);
   for (const k of Object.keys(bucket)) bucket[k].sort((a, b) => k === 'done' ? no(b) - no(a) : no(a) - no(b));
   // To Do / Doing / Needs you / Review / Done / Later — the original design's columns
   // (Masa 2026-07-16). "Needs you" = a clarifying question is waiting on the user —
@@ -5840,7 +6044,7 @@ function fsBucketTodo(){
 // error as a small in-row colour element (§1.5-8), quiet Done fold.
 function renderFsTodo(){
   const el = $('fsTodoSec'); if (!el) return;
-  const { pgoals, list, running, failed, blocked, queued, doneAll, later } = fsBucketTodo();
+  const { pgoals, list, running, failed, blocked, needsInput, queued, doneAll, later } = fsBucketTodo();
   const tt = (s, n) => esc(String(s ?? '').replace(/\s+/g, ' ').slice(0, n ?? 70));
   // LATER = deliberately shelved goals (composer "Later" send → server status 'pending';
   // PRD §8.2 top gap — they were invisible in flagship). Staged disclosure: the cap
@@ -5855,16 +6059,29 @@ function renderFsTodo(){
   const goalNo = new Map();
   for (const g of pgoals) { const n = goalReviewNumber({ goal: g, tasks: list }); if (n != null) goalNo.set(g.id, n); }
   const noSpan = (goalId) => { const n = goalId != null ? goalNo.get(goalId) : null; return n != null ? `<span class="gno" data-n="${n}">#${n}</span>` : ''; };
+  // DOING = only what is actively moving (running task rows). Stopped/errored work moved
+  // out to its own "Needs you" caption below (Masa 2026-07-19) — folding it into Doing read
+  // as "still in flight".
   const doingRows =
     running.map((t) => `<div class="drow"><div class="trow now"><span class="st run"></span>${noSpan(t.goalId)}<span class="tt">${tt(t.title)}</span><span class="pct num">${progressFor(t)}%</span>${fsActs(t.goalId)}</div>
-      <div class="tbar"><i style="width:${progressFor(t)}%"></i></div></div>`).join('')
+      <div class="tbar"><i style="width:${progressFor(t)}%"></i></div></div>`).join('');
+  // NEEDS YOU: stopped/errored work that used to fold into Doing, now under its own caption so
+  // it no longer reads as "still in flight" (Masa 2026-07-19). Three kinds share it, each
+  // keeping the affordances it already had — nothing about the failed-task and blocked-goal
+  // rows changed except the caption they sit under:
+  //   • a failed/interrupted TASK — the rich Retry/Resume row;
+  //   • a BLOCKED goal — the Retry/Archive goal row (a blocked goal can ALSO have a stopped
+  //     task; both rows show, as before — they carry different, goal- vs task-level actions);
+  //   • a needsInput goal — new here: a clarifying question waiting on you (Answer opens it,
+  //     where the chat feed's question card takes the actual answer).
+  const needsRows =
     // Doing-failure UI (HANDOFF-v45 §11, revises v45 §6): a stopped task shows NO progress
     // bar (a dead bar pushed Retry down) — state is a COLOURED TEXT WORD only, no badge.
     // Interrupted (amber, ⏸, "Resume") is distinguished from Failed (red, ✗, "Retry") —
     // both still call the same /retry endpoint, which already resumes the session when one
     // exists (server-side retry = "resume if possible, else re-run"; there is no separate
     // resume endpoint to call).
-    + failed.map((t) => { const isInt = t.status === 'interrupted';
+    failed.map((t) => { const isInt = t.status === 'interrupted';
       const word = isInt ? 'Interrupted' : 'Failed', icon = isInt ? '⏸' : '✗', label = isInt ? 'Resume' : 'Retry';
       // don't restate the state word as the "reason" too (e.g. "Interrupted / Interrupted")
       // when the task has no distinct result text — the coloured word already said it, so
@@ -5877,7 +6094,10 @@ function renderFsTodo(){
       <div class="acts2"><button class="errbtn" data-fsretry="${t.id}">${label}</button><button class="errbtn" data-fslog="${t.id}">View log</button></div></div></div>`; }).join('')
     + blocked.map((g) => `<div class="drow err"><div class="trow now"><span class="st run bad"></span>${noSpan(g.id)}<span class="tt">${tt(g.reviewSummary?.check || g.plan?.[0] || g.text, 60)}</span><span class="stword">Failed</span></div>
       <div class="errline"><div class="msg"><span class="x">✗</span>${tt(g.blocked?.reason ?? 'blocked', 180)}</div>
-      <div class="acts2"><button class="errbtn" data-fsreverify="${g.id}">Retry</button><button class="errbtn" data-fsglog="${g.id}">View log</button><button class="errbtn" data-fsarchive="${g.id}">Archive</button></div></div></div>`).join('');
+      <div class="acts2"><button class="errbtn" data-fsreverify="${g.id}">Retry</button><button class="errbtn" data-fsglog="${g.id}">View log</button><button class="errbtn" data-fsarchive="${g.id}">Archive</button></div></div></div>`).join('')
+    + needsInput.map((g) => `<div class="drow err int"><div class="trow now"><span class="st run int"></span>${noSpan(g.id)}<span class="tt">${tt(g.text || g.plan?.[0], 60)}</span><span class="stword int">Needs input</span></div>
+      <div class="errline"><div class="msg"><span class="x int">?</span>${tt(g.question?.text || 'A question is waiting on you', 180)}</div>
+      <div class="acts2"><button class="errbtn" data-fsglog="${g.id}">Answer</button></div></div></div>`).join('');
   const NCAP = 6;
   const upShown = fsUI.todoMore ? queued : queued.slice(0, NCAP);
   const seenGoals = new Set();
@@ -5898,11 +6118,12 @@ function renderFsTodo(){
   // "Next up" pool only) — so a project sitting in Doing/Later with an empty Next-up
   // queue showed "To Do 0" directly above visible Doing/Later rows. The header labels
   // the whole lane ("To Do"), so it now counts everything the lane actually renders
-  // below it: Doing (running + failed/interrupted + blocked-goal rows) + Next up
-  // (queued) + Later (pending goals). "· next-up order" stays keyed off queued.length
-  // specifically, since that suffix describes the Next-up sublist's own sort, not the
-  // lane total.
-  const todoTotal = running.length + failed.length + blocked.length + queued.length + later.length;
+  // below it: Doing (running) + Needs you (failed/interrupted tasks + stopped/needsInput
+  // goals) + Next up (queued) + Later (pending goals). "· next-up order" stays keyed off
+  // queued.length specifically, since that suffix describes the Next-up sublist's own sort,
+  // not the lane total.
+  const needsCount = failed.length + blocked.length + needsInput.length;
+  const todoTotal = running.length + needsCount + queued.length + later.length;
   // Free-tier pending counter (H22): on the free plan the header shows the wall
   // — pending goals out of the 5-slot cap — reddening at the cap and gone once
   // paid. Reads the SAME numbers the gate enforces (state.billing, never a local
@@ -5917,7 +6138,8 @@ function renderFsTodo(){
   el.innerHTML = `<div class="lhd sechd" id="fsTodoHd"><span class="hd fstdlabel">To Do</span>${_todoNum}<span class="fold fstdlabel">▾</span></div>
     <div class="tl">
       ${doingRows ? `<span class="tlcap" style="padding-top:0">Doing</span>${doingRows}` : ''}
-      ${upRows ? `<span class="tlcap"${doingRows ? '' : ' style="padding-top:0"'}>Next up</span>${upRows}` : ''}
+      ${needsRows ? `<span class="tlcap needs"${doingRows ? '' : ' style="padding-top:0"'}>Needs you</span>${needsRows}` : ''}
+      ${upRows ? `<span class="tlcap"${doingRows || needsRows ? '' : ' style="padding-top:0"'}>Next up</span>${upRows}` : ''}
       ${queued.length > NCAP ? `<div class="morefold" id="fsTodoMore">${fsUI.todoMore ? 'less' : `+${queued.length - NCAP} more`}<span class="g">›</span></div>` : ''}
       ${laterRows ? `<span class="tlcap">Later</span>${laterRows}` : ''}
       <button class="qadd" data-fsnew="1" title="New goal"><span class="paplus"></span>New</button>
@@ -7411,7 +7633,7 @@ function closeSummaryPera(){ $('summaryOverlay').classList.remove('show'); }
 // 4 archived / 5 reverted — session-local; the server round-trip is what
 // settles it (see saSync's "returned to review" reset).
 // ============================================================================
-const SA = { open: false, items: [], diffs: {} , detOpen: new Set(), focusGid: null, focusScrolled: false, focusTimer: null, cur: null };
+const SA = { open: false, items: [], diffs: {}, diffBoxHtml: {}, detOpen: new Set(), focusGid: null, focusScrolled: false, focusTimer: null, cur: null };
 window.SA = SA; // top-level const isn't a window property; external checks probe window.SA (same convention as window.state above)
 const SA_SVG = {
   ok: '<svg viewBox="0 0 24 24"><path d="M4 12l5 5L20 6"/></svg>',
@@ -7424,27 +7646,40 @@ function saRows(){
   return buildReviewDigest({ goals: gs, tasks: ts }).map((r) => {
     const g = gs.find((x) => x.id === r.goalIds[0]);
     const pt = ts.find((t) => r.goalIds.includes(t.goalId) && t.proof && (t.proof.png || t.proof.gif));
-    // Review thread: every rework/reply task for this goal is one round —
-    // the user's own text (queueReplyTask stores it as title/detail) followed
-    // by the worker's report (task.result), if it has finished.
-    const thread = ts.filter((t) => r.goalIds.includes(t.goalId) && t.reply)
-      .sort((a, b) => (a.num ?? 0) - (b.num ?? 0))
-      .flatMap((t) => {
-        const msgs = [['You', String(t.detail || t.title || '').replace(/\s+/g, ' ').trim()]];
-        if (t.result) msgs.push(['Claude', String(t.result).replace(/\s+/g, ' ').trim().slice(0, 400)]);
-        return msgs;
-      });
+    // "What we did" (H23 §2, replaces the old Plan/Review-thread folds): one bullet
+    // per finished requirement task's own report; falls back to the goal's plan
+    // steps when nothing has finished yet (e.g. a plan awaiting approval — the plan
+    // IS "what we're going to do" in that case, which is the honest content to show).
+    const doneTasks = ts.filter((t) => r.goalIds.includes(t.goalId) && !t.reply && t.result)
+      .sort((a, b) => (a.num ?? 0) - (b.num ?? 0));
+    const did = doneTasks.length
+      ? doneTasks.map((t) => String(t.result).replace(/\s+/g, ' ').trim().slice(0, 160))
+      : (Array.isArray(g?.plan) ? g.plan.filter(Boolean).map((s) => String(s).replace(/\s+/g, ' ').trim()) : []);
+    // Sibling goals (H23 §2/§4 "did the AI drop part of what I asked"): buildReviewDigest
+    // already collapses goals that share one PR into a single row (goalIds.length > 1)
+    // — the real-data analog of a long ask fanning out into several tracked pieces.
+    // The row's primary goal (goalIds[0], whose text/title drive this card) is marked
+    // "cur"; the rest are listed so nothing reads as silently dropped.
+    const siblings = r.goalIds.length > 1
+      ? r.goalIds.map((gid) => {
+          const sg = gs.find((x) => x.id === gid);
+          return { no: goalReviewNumber({ goal: sg, tasks: ts }), title: saReviewTitle(sg), cur: gid === r.goalIds[0] };
+        })
+      : null;
     return {
       ids: r.goalIds, goalId: r.goalIds[0], goal: g,
       no: r.reviewNumber,
-      title: String(g?.reviewSummary?.changed || g?.plan?.[0] || g?.text || '').replace(/\s+/g, ' ').trim().slice(0, 90),
+      title: saReviewTitle(g),
       check: String(g?.reviewSummary?.check || r.checkLine || '').replace(/\s+/g, ' ').trim(),
       goalText: String(g?.text ?? '').replace(/\s+/g, ' ').trim(),
-      plan: Array.isArray(g?.plan) ? g.plan.filter(Boolean) : [],
-      thread, risk: g?.risk ?? null,
+      did, siblings, risk: g?.risk ?? null,
       note: g?.retest?.passed ? g.retest.note : null,
       pr: r.pr, testResult: r.testResult,
       proofTaskId: pt?.id ?? null, proofImg: pt?.proof?.png ?? pt?.proof?.gif ?? null,
+      // Ledger before/after (docs/design/HANDOFF-review-card-evidence-first-2026-07-18.md
+      // §3 kind==='image'): most tasks never have a "before" capture, so this is almost
+      // always null and beforeAfterMediaHtml() falls back to the single-shot view.
+      proofBefore: pt?.proof?.beforePng ?? pt?.proof?.beforeGif ?? null,
       // Token-frugality is the product's whole pitch — surface it here too, not
       // just in the per-goal review modal. buildReviewSummary computes the same
       // estimate; reuse its logic directly off the goal's runUsage/runTokens.
@@ -7461,6 +7696,79 @@ function saRows(){
     };
   });
 }
+// Meta row: PR link / token savings (real tap-to-open toggle) / Run locally — under
+// the title (H23 §1). Run-locally has no real per-task command yet — this is the
+// CDO's answer to "let me test this locally", left for CTO/engine to decide what it
+// actually triggers (docs/design/HANDOFF-review-card-evidence-first-2026-07-18.md
+// §5). Shown only for tasks with a real automated check to plausibly re-run
+// (it.testResult.ran), and tapping it is honest about not being wired yet rather
+// than pretending to execute anything — never a fake "running…" state.
+function saMetaRowHtml(it, i){
+  const canRunLocal = Boolean(it.testResult?.ran);
+  if (!it.pr && !it.tokenOpt && !canRunLocal) {
+    return '<div class="lg-meta"><span class="none">No PR link / token-savings data on this task.</span></div>';
+  }
+  const chips = [];
+  if (it.pr) chips.push(`<a class="sa-prlink sm" href="${esc(it.pr)}" target="_blank" title="Open pull request">PR #${esc((it.pr.match(/pull\/(\d+)/) ?? [, ''])[1])} ↗</a>`);
+  if (it.tokenOpt) {
+    const pct = Number(it.tokenOpt.percent);
+    const label = pct > 0 ? `saved ${pct}% tokens` : 'token usage';
+    chips.push(`<button class="tokchip" type="button" data-saact="tok:${i}">${esc(label)} <i class="tokchevron">›</i></button>`);
+  }
+  if (canRunLocal) chips.push(`<button class="sa-runlocal" type="button" data-saact="runlocal:${i}" title="Run this locally"><svg viewBox="0 0 24 24"><path d="M6 4l14 8-14 8V4z"/></svg>Run locally</button>`);
+  const tokCmp = it.tokenOpt?.basis === 'baseline' ? 'vs your recent average' : 'from prompt caching';
+  const tokTech = (it.tokenOpt?.techniques ?? []).slice(0, 4).join(' / ');
+  const tokDetail = it.tokenOpt ? `<div class="tokdetail" id="tokdetail${i}"><span class="k">How this run used tokens</span><span class="v">${esc(tokCmp)} · ${esc(tokTech)}</span></div>` : '';
+  const runNote = canRunLocal ? `<div class="tokdetail" id="runlocal${i}"><span class="v">No local run command is wired for this task yet.</span></div>` : '';
+  return `<div class="lg-meta">${chips.join('')}</div>${tokDetail}${runNote}`;
+}
+// Context: closed by default, one-line verbatim-quote summary, chevron large and at
+// the far right (H23 §2). Quotes goal.text — the user's own words — never
+// task.detail/title (AI-authored; an earlier round of this design mistakenly quoted
+// the AI's own read on the request as "your ask" and it wasn't recognizable).
+function saContextHtml(it, gk){
+  const goalTxt = it.goalText;
+  const summary = goalTxt
+    ? `"${esc(goalTxt.length > 60 ? `${goalTxt.slice(0, 60)}…` : goalTxt)}"`
+    : 'No verbatim ask on record for this goal.';
+  const split = it.siblings
+    ? `<div class="lg-splitnote"><div class="hd">Split into ${it.siblings.length} goals — nothing else was dropped</div><ul>${it.siblings.map((s) => `<li class="${s.cur ? 'cur' : ''}">${s.no != null ? `#${esc(s.no)} ` : ''}${esc(s.title)}${s.cur ? ' <b>(this one)</b>' : ''}</li>`).join('')}</ul></div>`
+    : '';
+  const did = it.did?.length ? `<div class="lg-bullethd">What we did</div><ul class="lg-bullets">${it.did.map((s) => `<li>${esc(s)}</li>`).join('')}</ul>` : '';
+  const look = it.look?.length ? `<div class="lg-bullethd">What to look at</div><ul class="lg-bullets">${it.look.map((s) => `<li>${esc(s)}</li>`).join('')}</ul>` : '';
+  const inner = (split || did || look) ? `${split}${did}${look}` : '<div class="lg-notfound">Nothing else on record for this goal.</div>';
+  const open = SA.detOpen.has(`${gk}:ctx`) ? ' open' : '';
+  return `<details class="lg-goal" data-detkey="${gk}:ctx"${open}><summary><span class="k">Context</span><span class="v">${summary}</span><i class="gtoggle">›</i></summary><div class="lg-context">${inner}</div></details>`;
+}
+// Evidence hero: shape follows task kind, not one image-shaped template (H23 §3).
+// Real data check: most finished tasks have no proof image at all (logic-only /
+// docs-only / research changes verify without a screenshot) — kind is derived, see
+// saEvidenceKind() above.
+function saEvidenceHtml(kind, factRow, img, filePaths, diffText, gtr, it){
+  if (kind === 'logic') {
+    const passed = gtr?.passed ?? 0, failed = gtr?.failed ?? 0, ok = gtr?.ok !== false;
+    const n = ok ? String(passed) : `${passed}/${passed + failed}`;
+    return `<div class="lg-ev"><div class="lg-evhd">Evidence — tests, no UI to show</div>
+      <div class="lg-herostat${ok ? '' : ' fail'}"><span class="n">${esc(n)}</span><span class="l">tests passed<br>${esc(filePaths.join(', '))}</span></div></div>`;
+  }
+  if (kind === 'docs') {
+    const lines = diffText ? diffText.split('\n').filter((l) => l.length) : [];
+    const diffHtml = lines.map((l) => {
+      const isAdd = l.startsWith('+');
+      return `<div class="ln${isAdd ? ' a' : ''}"><span class="gutter">+</span><span class="txt">${esc(l.slice(1) || l)}</span></div>`;
+    }).join('');
+    return `<div class="lg-ev"><div class="lg-evhd">Evidence — the diff, no test to run</div>
+      <div class="row"><span class="fls">${esc(filePaths.join(', '))} · docs-only, no test target</span></div>
+      ${diffHtml ? `<div class="lg-diffblock">${diffHtml}</div>` : ''}</div>`;
+  }
+  if (kind === 'missing') {
+    const note = it.check || 'Please verify this change manually — no automated capture exists for it.';
+    return `<div class="lg-ev"><div class="lg-missinghd"><svg viewBox="0 0 24 24"><path d="M12 8v5M12 16.5v.5"/><path d="M10.3 3.9 2.4 18a1.9 1.9 0 0 0 1.7 2.9h15.8a1.9 1.9 0 0 0 1.7-2.9L13.7 3.9a1.9 1.9 0 0 0-3.4 0z"/></svg>No capture — this touched the UI and should have one</div>
+      <div class="lg-manualnote">${esc(note)}</div></div>`;
+  }
+  // kind === 'image' (default)
+  return `<div class="lg-ev"><div class="lg-evhd">Evidence</div><div class="row">${factRow}</div>${img}</div>`;
+}
 function saItemHtml(it, i){
   const done = { 1: ['ok', '✓', 'Approved'], 2: ['no', '↩', 'Dismissed — re-testing ×3'], 3: ['no', '↩', 'Feedback sent — returned to To Do'], 4: ['ar', '—', 'Archived'], 5: ['no', '↩', 'Reverted — change undone'] }[it.st];
   if (done) {
@@ -7473,46 +7781,50 @@ function saItemHtml(it, i){
   // Honest evidence chips (mirrors the vchip tested/proof/needs-you logic in
   // renderReviewChecklist ~L3742-3752): absence of a signal is shown as a muted
   // chip, never silently dropped — an untested/proofless goal must never LOOK verified.
+  // H23: facts stop looking like buttons — glyph carries the state colour, text
+  // stays plain ink, no border/pill (border is reserved for the PR link).
   const gtr = it.testResult;
   const testsChip = gtr?.ran
-    ? (gtr.ok ? `<span class="vchip ok">✓ ${gtr.passed} passed</span>` : `<span class="vchip no">✗ ${gtr.passed}/${gtr.passed + (gtr.failed || 0)} passed</span>`)
-    : '<span class="vchip none">— not tested</span>';
+    ? (gtr.ok ? `<span class="vf ok"><i class="g">✓</i>${gtr.passed} passed</span>` : `<span class="vf no"><i class="g">✗</i>${gtr.passed}/${gtr.passed + (gtr.failed || 0)} passed</span>`)
+    : '<span class="vf none">— not tested</span>';
   const hasProofImg = it.proofImg && it.proofTaskId != null;
-  const pm = d ? `<span><i class="a">+${d.add}</i> <i class="d">−${d.del}</i></span>` : ''; // omit when unknown (v46)
-  const pr = it.pr ? `<a class="sa-prlink" href="${esc(it.pr)}" target="_blank" title="Open pull request">PR #${esc((it.pr.match(/pull\/(\d+)/) ?? [, ''])[1])} ↗</a>` : '';
-  const img = hasProofImg ? `<img class="proofimg" src="${withKey(`/proof/${it.proofTaskId}/${it.proofImg}`)}" alt="proof" loading="lazy">` : '';
-  // Details: PR description (goal text + plain-language changed line) → changed
-  // files → code diff. Server has no diff for this goal → render what exists
-  // and omit the rest honestly (no fabrication).
-  const desc = esc(String(it.goal?.reviewSummary?.changed ? `${it.goal.reviewSummary.changed} — ${it.goal?.text ?? ''}` : it.goal?.text ?? '').slice(0, 500));
-  let files = '', diffBlock = '', miss = '', nf = 0;
-  if (d) {
-    nf = d.files.length;
-    files = nf ? `<div class="files">${d.files.map((f) => `${esc(f.path)}  +${f.add} −${f.del}`).join('<br>')}</div>` : '';
-    diffBlock = d.diff ? `<div class="sa-diff">${d.diff.split('\n').map((l) => `<div class="${l.startsWith('+') ? 'ln-a' : l.startsWith('-') ? 'ln-d' : ''}">${esc(l) || ' '}</div>`).join('')}${d.truncated ? '<div>… diff truncated</div>' : ''}</div>` : '';
-  } else if (d === null) {
-    const cf = [...new Set((state.tasks || []).filter((t) => it.ids.includes(t.goalId)).flatMap((t) => t.changedFiles ?? []))];
-    nf = cf.length;
-    files = nf ? `<div class="files">${cf.map(esc).join('<br>')}</div>` : '';
-    miss = '<div class="miss">no code diff recorded for this goal</div>';
+  // Before/after (H23 spec §3 kind==='image'): reuse the same beforeafter/ba-col/
+  // balabel renderer as the older per-task checklist (beforeAfterMediaHtml, ~L3281).
+  // it.proofBefore is null for the ~all tasks with no "before" capture, so this
+  // falls back to the identical single <img class="proofimg"> markup it replaced.
+  // Diff-box + zoom inset (HANDOFF-review-card-diffbox-2026-07-18) is computed async
+  // after the card first paints (saEnhanceDiffBoxes, below saRender). SA.diffBoxHtml
+  // holds the result — a string once a box is found, null once ruled out, undefined
+  // until then — so it survives every later saRender() the same way SA.diffs already
+  // does for the changed-files diff.
+  const boxedImg = SA.diffBoxHtml[it.goalId];
+  const img = hasProofImg
+    ? (typeof boxedImg === 'string' ? boxedImg : beforeAfterMediaHtml(it.proofTaskId, { png: it.proofImg, beforePng: it.proofBefore }, 'proof'))
+    : '';
+  // Changed-file paths feed both the evidence-kind heuristic and the docs-kind diff —
+  // same source the old "Changed files & diff" fold used (d from the diff endpoint,
+  // falling back to task.changedFiles when the server has no diff for this goal).
+  let filePaths = [], nf = 0;
+  if (d) { filePaths = d.files.map((f) => f.path); nf = filePaths.length; }
+  else if (d === null) {
+    filePaths = [...new Set((state.tasks || []).filter((t) => it.ids.includes(t.goalId)).flatMap((t) => t.changedFiles ?? []))];
+    nf = filePaths.length;
   }
-  const evRow = [
+  const kind = saEvidenceKind(filePaths, hasProofImg, gtr);
+  const factRow = [
     testsChip,
-    it.note ? `<span class="vchip ok">✓ ${esc(it.note)}</span>` : '',
-    pm,
+    it.note ? `<span class="vf ok"><i class="g">✓</i>${esc(it.note)}</span>` : '',
     `<span class="fls">${nf} file${nf === 1 ? '' : 's'}</span>`,
-    pr,
-    hasProofImg ? '' : '<span class="vchip none">— no proof</span>',
+    hasProofImg ? '' : '<span class="vf none">— no proof</span>',
   ].filter(Boolean).join('');
   const gk = it.goalId;
-  const planHtml = it.plan?.length
-    ? `<details class="lg-det" data-detkey="${gk}:plan"${SA.detOpen.has(`${gk}:plan`) ? ' open' : ''}><summary>Plan<span class="c">${it.plan.length} steps</span></summary><div class="lg-plan">${it.plan.map((s, n) => `<div class="step"><span class="n">${n + 1}</span><span>${esc(s)}</span></div>`).join('')}</div></details>`
-    : '';
-  const threadHtml = it.thread?.length
-    ? `<details class="lg-det" data-detkey="${gk}:thread"${SA.detOpen.has(`${gk}:thread`) ? ' open' : ''}><summary>Review thread<span class="c">${it.thread.length}</span></summary><div class="lg-thread">${it.thread.map((m) => `<div class="lg-tmsg"><span class="who">${esc(m[0])}</span><span>${esc(m[1])}</span></div>`).join('')}</div></details>`
-    : '';
-  const diffCount = d ? `${nf} · <i class="a">+${d.add}</i> <i class="d">−${d.del}</i>` : `${nf} file${nf === 1 ? '' : 's'}`;
-  const diffHtml = `<details class="lg-det" data-detkey="${gk}:diff"${SA.detOpen.has(`${gk}:diff`) ? ' open' : ''}><summary>Changed files &amp; diff<span class="c">${diffCount}</span></summary><div class="lg-diffwrap"><div class="desc">${desc}</div>${files}${diffBlock}${miss}</div></details>`;
+  // "What to look at" (H23 §2): the changed files themselves — a real, non-fabricated
+  // pointer for the reviewer's eyes, same file list that used to live in the retired
+  // "Changed files & diff" fold.
+  const look = filePaths.slice(0, 8);
+  if (filePaths.length > 8) look.push(`+${filePaths.length - 8} more`);
+  const contextHtml = saContextHtml({ goalText: it.goalText, siblings: it.siblings, did: it.did, look }, gk);
+  const evidenceHtml = saEvidenceHtml(kind, factRow, img, filePaths, d?.diff ?? null, gtr, it);
   // shouldPause = classifyChangeRisk (engine/lib.mjs) already forced this goal to
   // stop in review for exactly this reason — surface it; a non-blocking low-risk
   // read isn't worth a permanent row on every card (goal 427 §4 already covers it
@@ -7523,16 +7835,9 @@ function saItemHtml(it, i){
     : '';
   return `<div class="sa-item lg${it.goalId === SA.cur ? ' cur' : ''}" data-gid="${it.goalId}">
     <div class="lg-hd"><span class="no">${it.no != null ? `#${it.no}` : ''}</span><span class="t">${esc(it.title)}</span><span class="lg-state review">Review</span></div>
-    <div class="lg-ctx"><span class="k">Goal</span><span class="v">${esc(it.goalText || it.title)}</span><span class="k">Done when</span><span class="v">${esc(it.check)}</span></div>
-    <div class="lg-ev">
-      <div class="lg-evhd">Evidence</div>
-      <div class="row">${evRow}</div>
-      ${tokenOptimizationHtml(it.tokenOpt)}
-      ${img}
-    </div>
-    ${planHtml}
-    ${threadHtml}
-    ${diffHtml}
+    ${saMetaRowHtml(it, i)}
+    <div class="lg-ctx">${contextHtml}<div class="lg-fact"><span class="k">Done when</span><span class="v">${esc(it.check)}</span></div></div>
+    ${evidenceHtml}
     ${riskHtml}
     <div class="sa-act"><button class="sa-app" data-saact="app:${i}">${SA_SVG.ok}Approve</button><button class="sa-dis" data-saact="dis:${i}">Dismiss</button><div class="sa-chatwrap"><input class="sa-chat" data-i="${i}" placeholder="What's wrong? Send back to Claude Code…"><button class="sa-send" data-saact="send:${i}" title="Send back"><svg viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button></div><button class="sa-ic" title="Archive" data-saact="arch:${i}">${SA_SVG.arch}</button><button class="sa-ic" title="Revert" data-saact="rev:${i}">${SA_SVG.trash}</button></div>
   </div>`;
@@ -7550,7 +7855,7 @@ function saRender(){
   // Native <details> would collapse on every rebuild (SSE tick, approve, etc.) —
   // track what's open per goal+section in SA.detOpen (persists across re-renders)
   // and wire each one's toggle to keep that set current.
-  for (const det of S.querySelectorAll('.lg-det[data-detkey]')) {
+  for (const det of S.querySelectorAll('.lg-goal[data-detkey]')) {
     det.addEventListener('toggle', () => {
       const k = det.dataset.detkey;
       if (det.open) SA.detOpen.add(k); else SA.detOpen.delete(k);
@@ -7597,6 +7902,25 @@ async function saFetchDiffs(){
   }));
   if (SA.open) saSync();
 }
+// Diff-box + zoom inset (HANDOFF-review-card-diffbox-2026-07-18): unlike
+// saFetchDiffs above (whose fetch settling triggers a full saSync()/saRender()), this
+// patches each card's already-rendered .beforeafter node directly — a full re-render
+// here would reset scroll, close every open <details>, and drop an in-progress reply
+// keystroke, all just to draw a box around one screenshot. SA.diffBoxHtml is still
+// cached per goal, so if a later SSE-driven saSync() does rebuild the card anyway,
+// saItemHtml() picks the cached result back up with no flicker to the plain pair.
+async function saEnhanceDiffBoxes(){
+  const targets = SA.items.filter((it) => it.proofImg && it.proofTaskId != null && it.proofBefore && SA.diffBoxHtml[it.goalId] === undefined);
+  await Promise.all(targets.map(async (it) => {
+    let html = null;
+    try { html = await beforeAfterBoxedHtml(it.proofTaskId, { png: it.proofImg, beforePng: it.proofBefore }, esc(it.title ?? '')); }
+    catch { html = null; } // a decode/pixel-diff failure is a fallback, never a crash
+    SA.diffBoxHtml[it.goalId] = html; // cache even on null — never re-attempt an already-answered "no box"
+    if (!html || !SA.open) return;
+    const host = document.querySelector(`.sa-item[data-gid="${it.goalId}"] .beforeafter`);
+    if (host) host.outerHTML = html; // html itself opens with the replacement .beforeafter
+  }));
+}
 function saOpen(focusGoalId){
   SA.open = true;
   SA.items = saRows().map((r) => ({ ...r, st: 0 }));
@@ -7618,6 +7942,7 @@ function saOpen(focusGoalId){
   saRender();
   $('seeall').classList.add('open');
   saFetchDiffs();
+  saEnhanceDiffBoxes();
 }
 function saClose(){ SA.open = false; SA.focusGid = null; if (SA.focusTimer) { clearTimeout(SA.focusTimer); SA.focusTimer = null; } $('seeall').classList.remove('open'); }
 // Continuous review (Masa 2026-07-08): move a persistent "current" card with
@@ -7676,6 +8001,10 @@ $('seeall').addEventListener('click', async (e) => {
   const it = SA.items[i];
   if (k === 'close') return saClose();
   if (!it) return;
+  // meta-row toggles (H23): tap the token chip to reveal the technique breakdown, tap
+  // Run-locally to reveal the honest "not wired yet" note — neither performs an action.
+  if (k === 'tok') { b.classList.toggle('open'); $('seeall').querySelector(`#tokdetail${i}`)?.classList.toggle('open'); return; }
+  if (k === 'runlocal') { $('seeall').querySelector(`#runlocal${i}`)?.classList.toggle('open'); return; }
   // every verdict auto-advances the focus to the next pending card (tempo).
   if (k === 'app') { const bx = b.getBoundingClientRect(); confettiBurst(bx.left + bx.width / 2, bx.top + bx.height / 2); return saAct(it, 1, 'approve').then((ok) => { if (ok) saAdvanceFocus(it.goalId); }); }
   if (k === 'dis') return saAct(it, 2, 'retest').then((ok) => { if (ok) saAdvanceFocus(it.goalId); });