Add active slice first-screen receipt

public/app.js

@@ -196,6 +196,33 @@ function renderHandoffStatus(handoff = {}) {
   `;
 }
 
+function renderFirstScreen(firstScreen = {}) {
+  if (!firstScreen.headline) return '';
+  const held = firstScreen.holdBack || [];
+  const guardrails = firstScreen.guardrails || [];
+  return `
+    <section class="active-slice-strip" aria-label="Active build slice">
+      <div class="active-slice-main">
+        <span>One thing to do now</span>
+        <h3>${escapeHtml(firstScreen.headline)}</h3>
+        <p>${escapeHtml(firstScreen.primaryAction || 'Run the smallest manual proof before product machinery.')}</p>
+      </div>
+      <div>
+        <span>Proof question</span>
+        <p>${escapeHtml(firstScreen.proofQuestion || 'What evidence would change this order?')}</p>
+      </div>
+      <div>
+        <span>Why this wins</span>
+        <p>${escapeHtml(firstScreen.why || 'It is the best first proof slice.')}</p>
+      </div>
+      ${held.length ? `<div><span>Hold back</span><ul>${held.map((item) => `<li><b>${escapeHtml(item.title)}</b>${item.lane ? ` — ${escapeHtml(item.lane)}` : ''}</li>`).join('')}</ul></div>` : ''}
+      ${guardrails.length ? `<small>Guardrails: ${guardrails.map(escapeHtml).join(' · ')}</small>` : ''}
+      ${firstScreen.sourceAnchor ? `<small>Source anchor: ${escapeHtml(firstScreen.sourceAnchor)}</small>` : ''}
+      <small>${escapeHtml(firstScreen.rule || 'One active move. Everything else waits.')}</small>
+    </section>
+  `;
+}
+
 function renderDecisionReceipt(receipt = {}) {
   if (!receipt.activeMove) return '';
   const held = receipt.doNotStartYet || [];
@@ -348,6 +375,7 @@ function renderResults(data) {
       <div><span>Proof to collect</span><p>${escapeHtml(glance.evidenceQuestion || 'Name the evidence that would change the ranking.')}</p></div>
       <div><span>Trap to avoid</span><p>${escapeHtml(glance.biggestTrap || brief.caution || 'Do not treat first-pass judgement as final truth.')}</p></div>
     </section>
+    ${renderFirstScreen(brief.firstScreen || {})}
     ${renderDecisionReceipt(brief.decisionReceipt || {})}
     ${renderSourceTrace(glance.sourceTrace || {})}
 

public/styles.css

@@ -42,3 +42,8 @@ button,input,textarea{font:inherit} button{cursor:pointer} a{color:inherit;text-
 .decision-receipt{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:10px;margin:-6px 0 22px;padding:12px;border:2px solid var(--ink);background:#fffaf1;box-shadow:6px 6px 0 rgba(21,19,15,.18)}.decision-receipt>div{border:1.5px solid var(--hair);background:#fff6e5;padding:12px}.decision-receipt span{display:block;margin-bottom:7px;color:var(--blue2);text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:1000}.decision-receipt strong{display:block;font-size:clamp(20px,2.3vw,30px);line-height:1;letter-spacing:-.05em}.decision-receipt p{margin:0;color:var(--ink2);line-height:1.35}.decision-receipt ul{margin:0;padding-left:18px;color:var(--ink2)}.decision-receipt small{grid-column:1/-1;color:var(--muted);font-weight:850}.source-trace{margin:-4px 0 22px;padding:14px 16px;border:2px dashed var(--ink);background:#fff6e5;color:var(--ink2);box-shadow:5px 5px 0 rgba(21,19,15,.16)}.source-trace span,.handoff-card>span{display:block;margin-bottom:8px;color:var(--blue2);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:1000}.source-trace b{display:block;margin-bottom:6px;font-size:14px}.source-trace p{margin:0;color:var(--muted);line-height:1.45}.item-source-trace{margin:12px 0;padding:9px 10px;border:1.5px dashed var(--hair);background:#fffaf1;color:var(--ink2)}.item-source-trace summary{cursor:pointer;color:var(--blue2);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}.item-source-trace p{margin:8px 0 6px;color:var(--muted);font-size:13px;line-height:1.4}.item-source-trace small{display:block;color:var(--muted);font-size:11px;font-weight:800}.handoff-card{border-left:8px solid var(--green)}.handoff-card.status-usable-with-warnings{border-left-color:var(--amber)}.handoff-card.status-needs-source-context,.handoff-card.status-blocked{border-left-color:var(--red)}.handoff-warnings{display:grid;gap:6px;margin-top:12px}.handoff-warnings code{display:block;white-space:normal;border:1px solid var(--hair);background:#f3eee4;padding:7px 9px;font-size:12px;color:var(--ink2)}
 @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)}
+.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:700px){.active-slice-strip{grid-template-columns:1fr;box-shadow:5px 5px 0 var(--blue)}}