Surface bridge handoff readiness in results

public/app.js

@@ -182,6 +182,12 @@ function renderItemSourceTrace(item = {}) {
   `;
 }
 
+function readinessTone(status = '') {
+  if (status === 'ready') return 'ready';
+  if (status === 'usable-with-warnings') return 'warn';
+  return status ? 'blocked' : '';
+}
+
 function renderHandoffStatus(handoff = {}) {
   const readiness = handoff.readiness || {};
   if (!readiness.status) return '';
@@ -196,6 +202,37 @@ function renderHandoffStatus(handoff = {}) {
   `;
 }
 
+function renderBridgeHandoffStrip(data = {}) {
+  const handoff = data.handoff || {};
+  const readiness = handoff.readiness || {};
+  if (!readiness.status) return '';
+  const source = handoff.source || data.brief?.source || data.input?.provenance || {};
+  const activeSlice = handoff.activeSlice || {};
+  const activeItem = activeSlice.item || {};
+  const sourceBits = [source.snapshotTitle, source.artifactId].filter(Boolean).join(' · ');
+  const tone = readinessTone(readiness.status);
+  return `
+    <section class="handoff-strip status-${escapeHtml(tone)}" aria-label="Bridge handoff readiness">
+      <div>
+        <span>Bridge readiness</span>
+        <strong>${escapeHtml(readiness.label || readiness.status)}</strong>
+        <p>${escapeHtml(readiness.summary || 'Read the warnings before handing this back to Scattermind.')}</p>
+      </div>
+      <div>
+        <span>Active slice</span>
+        <strong>${escapeHtml(activeItem.title || data.brief?.decisionReceipt?.activeMove || 'No active move')}</strong>
+        <p>${escapeHtml(activeSlice.rule || data.brief?.decisionReceipt?.handoffRule || 'Only the Do first item is active.')}</p>
+      </div>
+      <div>
+        <span>Source</span>
+        <strong>${escapeHtml(sourceBits || 'No artifact attached')}</strong>
+        <p>${escapeHtml(source.originalPromptExcerpt || source.sourceSummaryExcerpt || 'Add source context before treating this as a durable bridge handoff.')}</p>
+      </div>
+      ${(readiness.nextChecks || []).length ? `<small>Next check: ${escapeHtml(readiness.nextChecks[0])}</small>` : ''}
+    </section>
+  `;
+}
+
 function renderFirstScreen(firstScreen = {}) {
   if (!firstScreen.headline) return '';
   const held = firstScreen.holdBack || [];
@@ -366,9 +403,10 @@ function renderResults(data) {
       <p class="eyebrow">${escapeHtml(data.mode?.label || 'Ranked feedback')} · first-pass judgement memo</p>
       <h2>${escapeHtml(brief.headline || 'Ranked feedback map')}</h2>
       <p>${escapeHtml(brief.summary || '')}</p>
-      <div class="memo-stamps"><span>Not an oracle</span><span>${escapeHtml(data.rankConfidence?.level || 'first pass')} confidence</span><span>${ranked.length} items judged</span></div>
+      <div class="memo-stamps"><span>Not an oracle</span><span>${escapeHtml(data.rankConfidence?.level || 'first pass')} confidence</span><span>${ranked.length} items judged</span><span>${escapeHtml(data.handoff?.readiness?.label || data.handoff?.readiness?.status || 'handoff unchecked')}</span></div>
     </div>
 
+    ${renderBridgeHandoffStrip(data)}
     <section class="quick-glance" aria-label="Quick judgement">
       <div><span>Do this first</span><strong>${escapeHtml(glance.topPick || 'Add options')}</strong></div>
       <div><span>Why it wins</span><p>${escapeHtml(glance.whyThisWins || 'The list needs more comparable options.')}</p></div>

public/styles.css

@@ -43,7 +43,8 @@ button,input,textarea{font:inherit} button{cursor:pointer} a{color:inherit;text-
 @media (max-width:1100px){.decision-receipt{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media (max-width:700px){.decision-receipt{grid-template-columns:1fr;box-shadow:5px 5px 0 rgba(21,19,15,.18)}}
 .active-slice-strip{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:10px;margin:-6px 0 22px;padding:12px;border:3px solid var(--ink);background:#15130f;color:#fff;box-shadow:8px 8px 0 var(--blue)}
+.handoff-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:22px 0 -6px;padding:12px;border:3px solid var(--ink);background:#fffaf1;box-shadow:7px 7px 0 rgba(21,19,15,.20)}.handoff-strip.status-ready{box-shadow:7px 7px 0 var(--green)}.handoff-strip.status-warn{box-shadow:7px 7px 0 var(--amber)}.handoff-strip.status-blocked{box-shadow:7px 7px 0 var(--red)}.handoff-strip>div{border:1.5px solid var(--hair);background:#fff6e5;padding:13px}.handoff-strip span{display:block;margin-bottom:7px;color:var(--blue2);text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:1000}.handoff-strip strong{display:block;margin-bottom:7px;font-size:clamp(18px,2vw,26px);line-height:1;letter-spacing:-.04em}.handoff-strip p{margin:0;color:var(--ink2);line-height:1.35}.handoff-strip small{grid-column:1/-1;color:var(--muted);font-weight:850}
 .active-slice-strip>div{border:1.5px solid rgba(255,255,255,.32);background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03));padding:13px}
 .active-slice-strip span{display:block;margin-bottom:7px;color:#bfcaff;text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:1000}.active-slice-strip h3{margin:0 0 8px;font-size:clamp(24px,3vw,42px);line-height:.9;letter-spacing:-.06em}.active-slice-strip p{margin:0;color:#f7efe1;line-height:1.38}.active-slice-strip ul{margin:0;padding-left:18px;color:#f7efe1}.active-slice-strip small{grid-column:1/-1;color:#d9ddff;font-weight:850}.active-slice-main{background:linear-gradient(145deg,rgba(36,92,255,.28),rgba(255,255,255,.04))!important}
-@media (max-width:1100px){.active-slice-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media (max-width:1100px){.active-slice-strip,.handoff-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
-@media (max-width:700px){.active-slice-strip{grid-template-columns:1fr;box-shadow:5px 5px 0 var(--blue)}}
+@media (max-width:700px){.active-slice-strip,.handoff-strip{grid-template-columns:1fr;box-shadow:5px 5px 0 var(--blue)}}