Strengthen rank feedback decision brief

public/app.js

@@ -1,5 +1,5 @@
 const sample = {
-  idea: 'Scattermind clarified a messy course idea. Now I need the first build order, not a dashboard.',
+  idea: 'Scattermind clarified a messy course idea. Now I need feedback on the feature/functionality order, not a dashboard.',
   optionsText: `- Manual build-order preview from one Concept Map
 - Copyable decision brief with Do first / Validate next / Defer / Park
 - Evidence questions beside each next move
@@ -11,9 +11,17 @@ const sample = {
   mode: 'mvp',
 };
 
+const laneMeta = {
+  do: { title: 'Do first', note: 'The active first move. Give it oxygen before the backlog starts breeding.' },
+  test: { title: 'Validate next', note: 'Strong candidates, but they need evidence before build time.' },
+  defer: { title: 'Defer', note: 'Useful later. Dangerous if it steals attention now.' },
+  park: { title: 'Park / cut', note: 'Not in the active decision. Reopen only if new evidence earns it.' },
+};
+
 const form = document.querySelector('#rankForm');
 const results = document.querySelector('#results');
 const toastEl = document.querySelector('#toast');
+let lastResult = null;
 
 function escapeHtml(value) {
   return String(value ?? '').replace(/[&<>"']/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
@@ -43,7 +51,7 @@ function laneClass(lane) {
   return `lane-${lane?.id || 'defer'}`;
 }
 
-function renderMetrics(metrics) {
+function renderMetrics(metrics = {}) {
   const items = [
     ['Value', metrics.value],
     ['Feasible', metrics.feasibility],
@@ -56,45 +64,147 @@ function renderMetrics(metrics) {
   `).join('')}</div>`;
 }
 
+function renderPills(items = []) {
+  if (!items.length) return '';
+  return `<div class="signal-pills">${items.map((item) => `<span>${escapeHtml(item)}</span>`).join('')}</div>`;
+}
+
+function renderRankCard(item) {
+  return `
+    <article class="rank-card ${laneClass(item.lane)}">
+      <div class="rank-topline">
+        <span class="rank-number">#${item.rank}</span>
+        <span class="lane-pill">${escapeHtml(item.lane?.label || 'Ranked')}</span>
+        <strong>${item.metrics.score}</strong>
+      </div>
+      <h3>${escapeHtml(item.title)}</h3>
+      ${item.description && item.description !== item.title ? `<p class="item-description">${escapeHtml(item.description)}</p>` : ''}
+      ${renderPills(item.scoreDrivers || [])}
+      <p><b>Why:</b> ${escapeHtml(item.reason)}.</p>
+      <p><b>Concern:</b> ${escapeHtml(item.concern)}</p>
+      <div class="action-strip">
+        <div><span>Next step</span><p>${escapeHtml(item.nextStep || 'Run the smallest proof step.')}</p></div>
+        <div><span>Evidence question</span><p>${escapeHtml(item.evidenceQuestion || 'What proof would change this ranking?')}</p></div>
+        <div><span>Success / kill signal</span><p>${escapeHtml(item.successSignal || '')} ${escapeHtml(item.killSignal ? `Kill if: ${item.killSignal}` : '')}</p></div>
+      </div>
+      ${renderMetrics(item.metrics)}
+      ${renderPills(item.scoringNotes || [])}
+    </article>
+  `;
+}
+
+function renderLane(ranked, laneId) {
+  const items = ranked.filter((item) => item.lane?.id === laneId);
+  const meta = laneMeta[laneId];
+  return `
+    <section class="lane-column ${items.length ? '' : 'empty-lane'}">
+      <div class="lane-head">
+        <span>${escapeHtml(meta.title)}</span>
+        <b>${items.length}</b>
+      </div>
+      <p>${escapeHtml(meta.note)}</p>
+      <div class="lane-stack">
+        ${items.length ? items.map(renderRankCard).join('') : '<em>No items landed here.</em>'}
+      </div>
+    </section>
+  `;
+}
+
+function markdownBrief(data) {
+  const brief = data.brief || {};
+  const glance = brief.quickGlance || {};
+  const ranked = data.ranked || [];
+  const lanes = ['do', 'test', 'defer', 'park'];
+  const laneTitles = { do: 'Do first', test: 'Validate next', defer: 'Defer', park: 'Park / cut' };
+  return [
+    `# ${brief.headline || 'Ranked feedback map'}`,
+    '',
+    brief.summary || '',
+    '',
+    '## Quick judgement',
+    `- Top pick: ${glance.topPick || 'n/a'}`,
+    `- Why it wins: ${glance.whyThisWins || 'n/a'}`,
+    `- Next action: ${glance.nextAction || 'n/a'}`,
+    `- Evidence question: ${glance.evidenceQuestion || 'n/a'}`,
+    `- Biggest trap: ${glance.biggestTrap || 'n/a'}`,
+    `- Confidence: ${data.rankConfidence?.level || 'n/a'} — ${data.rankConfidence?.reason || ''}`,
+    '',
+    ...lanes.flatMap((lane) => {
+      const items = ranked.filter((item) => item.lane?.id === lane);
+      return [`## ${laneTitles[lane]}`, ...(items.length ? items.map((item) => `- #${item.rank} ${item.title}: ${item.reason}. Next: ${item.nextStep}`) : ['- None']) , ''];
+    }),
+    '## Next 48 hours',
+    ...(brief.next48Hours || []).map((step) => `- ${step}`),
+  ].join('\n');
+}
+
+async function copyText(text, label) {
+  try {
+    await navigator.clipboard.writeText(text);
+    toast(`${label} copied.`);
+  } catch {
+    toast('Clipboard blocked. Browser being a tiny tyrant.');
+  }
+}
+
+function attachResultActions(data) {
+  document.querySelector('#copyBrief')?.addEventListener('click', () => copyText(markdownBrief(data), 'Decision brief'));
+  document.querySelector('#copyActions')?.addEventListener('click', () => copyText((data.brief?.next48Hours || []).map((step, index) => `${index + 1}. ${step}`).join('\n'), '48h actions'));
+  document.querySelector('#copyJson')?.addEventListener('click', () => copyText(JSON.stringify({ brief: data.brief, ranked: data.ranked, buildOrder: data.buildOrderDetails, handoff: data.handoff }, null, 2), 'JSON handoff'));
+}
+
 function renderResults(data) {
+  lastResult = data;
   const ranked = data.ranked || [];
   const brief = data.brief || {};
+  const glance = brief.quickGlance || {};
   results.hidden = false;
   results.innerHTML = `
-    <div class="results-head">
-      <p class="eyebrow">${escapeHtml(data.mode?.label || 'Ranked feedback')}</p>
+    <div class="results-head memo-head">
+      <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>
 
-    <div class="ranked-list">
-      ${ranked.map((item) => `
-        <article class="rank-card ${laneClass(item.lane)}">
-          <div class="rank-topline">
-            <span class="rank-number">#${item.rank}</span>
-            <span class="lane-pill">${escapeHtml(item.lane?.label || 'Ranked')}</span>
-            <strong>${item.metrics.score}</strong>
-          </div>
-          <h3>${escapeHtml(item.title)}</h3>
-          ${item.description && item.description !== item.title ? `<p class="item-description">${escapeHtml(item.description)}</p>` : ''}
-          <p><b>Why:</b> ${escapeHtml(item.reason)}.</p>
-          <p><b>Concern:</b> ${escapeHtml(item.concern)}</p>
-          ${renderMetrics(item.metrics)}
-        </article>
-      `).join('')}
+    <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>
+      <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>
+
+    <div class="result-actions" aria-label="Copy result actions">
+      <button class="button ghost" type="button" id="copyBrief">Copy decision brief</button>
+      <button class="button ghost" type="button" id="copyActions">Copy 48h actions</button>
+      <button class="button ghost" type="button" id="copyJson">Copy JSON handoff</button>
     </div>
 
-    <div class="brief-grid">
+    <div class="lane-board">
+      ${['do', 'test', 'defer', 'park'].map((lane) => renderLane(ranked, lane)).join('')}
+    </div>
+
+    <div class="brief-grid reflection-room">
       <article class="brief-card next-card">
         <span>Next 48 hours</span>
         <ol>${(brief.next48Hours || []).map((step) => `<li>${escapeHtml(step)}</li>`).join('')}</ol>
       </article>
+      <article class="brief-card next-card">
+        <span>Rank confidence</span>
+        <p><b>${escapeHtml(data.rankConfidence?.level || 'First pass')}</b> — ${escapeHtml(data.rankConfidence?.reason || brief.caution || '')}</p>
+      </article>
       ${(brief.whatWouldChangeRanking || []).length ? `
         <article class="brief-card next-card">
           <span>What would change the order</span>
           <ol>${brief.whatWouldChangeRanking.map((change) => `<li>${escapeHtml(change)}</li>`).join('')}</ol>
         </article>
       ` : ''}
+      ${(data.closeCalls || []).length ? `
+        <article class="brief-card next-card">
+          <span>Close calls</span>
+          <ol>${data.closeCalls.map((call) => `<li>${escapeHtml(call.note)}</li>`).join('')}</ol>
+        </article>
+      ` : ''}
       ${(brief.assumptions || []).length ? `
         <article class="brief-card">
           <span>Context carried forward</span>
@@ -102,7 +212,7 @@ function renderResults(data) {
         </article>
       ` : ''}
       ${(brief.expertReflections || []).map((reflection) => `
-        <article class="brief-card">
+        <article class="brief-card expert-card">
           <span>${escapeHtml(reflection.lens)}</span>
           <p>${escapeHtml(reflection.text)}</p>
         </article>
@@ -110,6 +220,7 @@ function renderResults(data) {
     </div>
     <p class="caution">${escapeHtml(brief.caution || 'First-pass judgement, not an oracle.')}</p>
   `;
+  attachResultActions(data);
   results.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 
@@ -118,7 +229,7 @@ async function createFeedbackMap(event) {
   const submit = form.querySelector('button[type="submit"]');
   const payload = Object.fromEntries(new FormData(form).entries());
   submit.disabled = true;
-  submit.textContent = 'Ranking…';
+  submit.textContent = 'Judging…';
   try {
     const response = await fetch('/api/rank-feedback', {
       method: 'POST',