Article pages: structured "Why it belongs" editorial read

Per Codex — make /a/<id> feel like Upbeat Bytes has editorial judgment, not just
a summary wrapper. Trust-building, short, not an essay.

* article_summaries gains what_happened / why_matters / why_belongs (+ migration).
* summarize.explain_article: a separate, fallback-able LLM pass producing three
  short notes (parsed from a labelled WHAT/MATTERS/BELONGS format). generate_summary
  now stores them alongside the summary, and tops up older summaries on next view.
  get_explanation returns them only when all three are present.
* API: share_page + /api/summary expose the explanation.
* share.py: renders the three-part section (accent rule) when complete; otherwise
  the single "Why it's here" reason line is the calm fallback. The page polls and
  swaps in both the summary and the section as they cache.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

goodnews/share.py

@@ -17,7 +17,8 @@ def _tag(name: str, content: str | None, attr: str = "property") -> str:
     return f'<meta {attr}="{escape(name)}" content="{escape(content)}">'
 
 
-def render_share_page(article: dict, base_url: str, summary: str | None = None) -> str:
+def render_share_page(article: dict, base_url: str, summary: str | None = None,
+                      explanation: dict | None = None) -> str:
     aid = article["id"]
     title = (article.get("title") or "Upbeat Bytes").strip()
     why = (article.get("reason_text") or article.get("description")
@@ -63,22 +64,54 @@ def render_share_page(article: dict, base_url: str, summary: str | None = None)
     groupings = f'<div class="chips">{chips}</div>' if chips else ""
     if summary:
         summary_block = f'<p class="summary" id="summary">{escape(summary)}</p>'
-        poll = ""
     else:
         pending = (
             f"✦ We’re putting together a quick summary — in the meantime, "
             f"read the full story at {escape(source)} below."
         )
         summary_block = f'<p class="summary pending" id="summary">{pending}</p>'
-        # Quietly poll; swap the real summary in the moment it's cached.
+
+    # The structured "Why it belongs" editorial section — only when the LLM gave a
+    # clean three-part read; otherwise the single reason line is the calm fallback.
+    def _why_row(lbl: str, text: str) -> str:
+        return f'<div class="why-row"><span class="lbl">{lbl}</span><p>{escape(text)}</p></div>'
+
+    if explanation:
+        why_block = (
+            '<div class="why" id="why">'
+            + _why_row("What happened", explanation["what_happened"])
+            + _why_row("Why it matters", explanation["why_matters"])
+            + _why_row("Why it belongs here", explanation["why_belongs"])
+            + '</div>'
+        )
+    else:
+        why_block = f'<div class="why" id="why"><div class="why-row"><span class="lbl">Why it’s here</span><p>{escape(why)}</p></div></div>'
+
+    # Quietly poll until BOTH the summary and the structured read are cached, then
+    # swap each in (older summaries get topped up with the section on first view).
+    poll = ""
+    if not summary or not explanation:
         poll = f"""<script>
 (function(){{
   var id={aid}, box=document.getElementById('summary'), n=0;
+  function row(l,t){{
+    var d=document.createElement('div'); d.className='why-row';
+    var s=document.createElement('span'); s.className='lbl'; s.textContent=l;
+    var p=document.createElement('p'); p.textContent=t;
+    d.appendChild(s); d.appendChild(p); return d;
+  }}
   function go(){{
     n++;
     fetch('/api/summary/'+id).then(function(r){{return r.json();}}).then(function(d){{
-      if(d&&d.status==='ready'&&d.summary){{ box.textContent=d.summary; box.className='summary'; }}
-      else if(n<12){{ setTimeout(go,2500); }}
+      var done=true;
+      if(d&&d.summary){{ box.textContent=d.summary; box.className='summary'; }} else {{ done=false; }}
+      if(d&&d.explanation){{
+        var w=document.getElementById('why');
+        if(w){{ w.innerHTML=''; w.appendChild(row('What happened',d.explanation.what_happened));
+          w.appendChild(row('Why it matters',d.explanation.why_matters));
+          w.appendChild(row('Why it belongs here',d.explanation.why_belongs)); }}
+      }} else {{ done=false; }}
+      if(!done && n<12){{ setTimeout(go,2500); }}
     }}).catch(function(){{ if(n<12) setTimeout(go,3000); }});
   }}
   go();
@@ -140,9 +173,13 @@ def render_share_page(article: dict, base_url: str, summary: str | None = None)
         font-size:1.7rem; line-height:1.2; margin:6px 0 14px; }}
   .summary {{ font-size:1.05rem; color:var(--ink); margin:0 0 18px; }}
   .summary.pending {{ color:var(--muted); font-style:italic; }}
-  .why {{ color:#3b4754; font-size:.92rem; margin:0 0 22px; }}
+  .why {{ color:#3b4754; font-size:.92rem; margin:0 0 22px;
+          border-left:2px solid var(--accent); padding-left:14px; }}
+  .why-row {{ margin:0 0 12px; }}
+  .why-row:last-child {{ margin-bottom:0; }}
+  .why-row p {{ margin:0; }}
   .why .lbl {{ display:block; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem;
-               color:var(--muted); margin-bottom:3px; }}
+               color:var(--accent-deep); font-weight:600; margin-bottom:2px; }}
   .chips {{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px; }}
   .chip {{ background:#e0eef3; color:var(--accent-deep); border-radius:999px; padding:3px 11px;
            font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; }}
@@ -165,7 +202,7 @@ def render_share_page(article: dict, base_url: str, summary: str | None = None)
         {source_html}
         <h1>{escape(title)}</h1>
         {summary_block}
-        <p class="why"><span class="lbl">Why it's here</span>{escape(why)}</p>
+        {why_block}
         {groupings}
         <div class="actions">
           <a class="primary" href="{escape(src_url)}" target="_blank" rel="noopener" data-src-click>Read the full story at {escape(source)}</a>