E10 Report issue template + E12 /report archive, to spec

PHASE 0 — the spec, read not recalled. E10: "Hybrid: dark billboard header
that survives every client, light paper body Gmail can't wreck. 600px,
stacked, no webfont dependence." Content law: "One email per slate day.
Top read, what changed, the record. Nothing else." E12: "EVERY ISSUE SHOWS
ITS OWN DAY RECORD -- THE ARCHIVE IS A LEDGER TOO."

COMPOSED, NOT FORKED. The audit had E10 as PARTIAL, not absent:
newsletterService already builds the daily report's CONTENT and lints its
voice. What was missing is the designed hybrid SHELL, so reportTemplate.js
is a template over that builder rather than a second report -- the same
call made for the movement strip, and for the same reason.

PHASE 1 — the hybrid shell is an ENGINEERING constraint, not a look, and
the tests say so: Gmail strips style blocks, Outlook ignores flexbox, and
a dark body renders as a black rectangle in several clients. Hence tables,
inline styles, 600px fixed, system fonts, no image required to read, and
the green SHIFTS from #00D4A0 to #00A57D on paper because the dark-mode
green is unreadable there.

FACT-CONTRACTED: a section whose data is absent is OMITTED and NAMED in
`omitted`, never filled. There is no code path producing a placeholder
figure. The honesty block carries the real numbers -- graded count,
cleared-ceiling count, the realized rate against baseline, and that we do
not issue A grades.

E1'S LAW TRAVELS EVEN THOUGH ITS RENDERING CANNOT. An SVG strip is not
reliable in email, so movementText carries the RULE: green only when the
move favours the read, and a flat market says FLAT · [N]D rather than
showing nothing.

NO DESIGNER SAMPLE DATA. Nabers 1,120.5, No 128, DAY RECORD 9-4 are a spec
for what a live issue renders; pasting them in would be fabrication
carrying a designer's authority and would look entirely correct. Tested.

PHASE 2 — /report is now the real archive, REPLACING the S41 redirect to
/blog. That redirect existed because the surface did not; E12 built it, so
the placeholder is correctly gone and the S41 test is updated rather than
worked around. Every row carries its own day record, and an unknown record
says UNSETTLED -- never a dash that reads as zero. Empty archive is an
honest state.

Backend: public read-only /api/report over Redis issues, plus the Next
proxy. Both surfaces registered under the reachability guard.

A test bug I made twice now: my check for forbidden sample values matched
the template's own doc block, which NAMES those values as things never to
paste. Documentation worth keeping, so both suites strip comments before
matching -- a guard that reads its own warning is not reading the code.

WAVE-2 STATUS: E1, F9-F11, E10, E12 done. Still gated -- F5 article media
and E16/F8 on the card-system reconciliation; the in-season hub IA on the
social chat's formula; E9/E15 on model; E2/E6 on licensing.

Read-only throughout; serving fingerprint unchanged including
newsletterService; accrual clock unchanged at 0 eligible dates.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W1sivYNqY2TS5ftykmHBU9

web/src/app/api/report/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+
+const BACKEND = process.env.BACKEND_URL || 'http://localhost:3001';
+
+/** Next proxy for the public Report archive (the S25 rule). */
+export async function GET() {
+  try {
+    const res = await fetch(`${BACKEND}/api/report`, { next: { revalidate: 300 } });
+    const body = await res.json().catch(() => ({ count: 0, issues: [] }));
+    return NextResponse.json(body, { status: res.ok ? 200 : res.status });
+  } catch {
+    // A dead upstream is an EMPTY archive, never a fabricated one.
+    return NextResponse.json({ count: 0, issues: [], degraded: true });
+  }
+}

web/src/app/report/page.tsx

@@ -1,11 +1,17 @@
-import { redirect } from 'next/navigation';
+import ReportArchive from '@/components/vyndr/ReportArchive';
+
+export const metadata = {
+  title: 'The VYNDR Report — Archive',
+  description: 'One email per slate day. Top read, what changed, the record. Every issue shows its own day record.',
+};
 
 /**
- * /report (Session 41 — P0 audit fix).
+ * E12 — /report, the issue archive.
  *
- * The MORE dropdown links "THE REPORT" to /report, but the blog lives at
- * /blog. Forward there so the link resolves instead of 404ing.
+ * REPLACES the S41 redirect to /blog. That redirect was a placeholder for a
+ * surface that did not exist; this is the surface. The archive is the owned
+ * channel's on-site home and its SEO asset.
  */
 export default function ReportPage() {
-  redirect('/blog');
+  return <ReportArchive />;
 }

web/src/components/vyndr/ReportArchive.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import SectionHead from '@/components/vyndr/SectionHead';
+
+/**
+ * E12 — the Report archive.
+ *
+ * The spec's law, verbatim: **"EVERY ISSUE SHOWS ITS OWN DAY RECORD — THE
+ * ARCHIVE IS A LEDGER TOO."**
+ *
+ * So every row carries the record that issue's reads produced. An archive of
+ * headlines would let a bad day disappear into a title; this one cannot. A row
+ * whose record is unknown says UNSETTLED rather than showing a dash that reads
+ * like zero.
+ */
+
+type Issue = {
+  number?: number; date: string; date_label?: string; headline?: string;
+  top_read?: { subject?: string; grade?: string } | null;
+  record?: { hit?: number; miss?: number; line?: string } | null;
+};
+
+export default function ReportArchive() {
+  const [issues, setIssues] = useState<Issue[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let live = true;
+    (async () => {
+      try {
+        const res = await fetch('/api/report', { cache: 'no-store' });
+        const j = await res.json();
+        if (live) setIssues(Array.isArray(j?.issues) ? j.issues : []);
+      } catch { if (live) setIssues([]); }
+      finally { if (live) setLoading(false); }
+    })();
+    return () => { live = false; };
+  }, []);
+
+  const recordText = (r: Issue['record']) => {
+    if (!r) return null;
+    if (typeof r.line === 'string' && r.line.trim()) return r.line;
+    if (typeof r.hit === 'number' && typeof r.miss === 'number') return `${r.hit}–${r.miss}`;
+    return null;   // unknown is unknown; never a dash that reads as zero
+  };
+
+  return (
+    <main style={{ maxWidth: 820, margin: '0 auto', padding: '24px 20px' }}>
+      <h1 className="mono" style={{ fontSize: 22, fontWeight: 800, letterSpacing: '.08em', margin: 0 }}>
+        THE VYNDR REPORT
+      </h1>
+      <p className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '.06em', margin: '8px 0 0' }}>
+        One email per slate day. Top read, what changed, the record. Nothing else.
+      </p>
+
+      <div style={{ marginTop: 24 }}>
+        <SectionHead>ARCHIVE{issues.length ? ` · ${issues.length} ISSUE${issues.length === 1 ? '' : 'S'}` : ''}</SectionHead>
+
+        {loading && <p className="mono" style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 12 }}>loading the archive…</p>}
+
+        {/* HONEST EMPTY STATE — no issues is a real state, not a broken page. */}
+        {!loading && issues.length === 0 && (
+          <div style={{ marginTop: 12, padding: '18px 16px', border: '1px solid var(--line)' }}>
+            <p className="mono" style={{ fontSize: 13, color: 'var(--text-2)', margin: 0, lineHeight: 1.6 }}>
+              No issues published yet. The first one goes out on the next slate day, and it will show its
+              own record like every one after it.
+            </p>
+          </div>
+        )}
+
+        {!loading && issues.map((iss) => {
+          const rec = recordText(iss.record);
+          return (
+            <div key={iss.date} style={{ display: 'flex', gap: 14, alignItems: 'baseline', padding: '14px 0', borderBottom: '1px solid var(--line)' }}>
+              {typeof iss.number === 'number' && (
+                <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', minWidth: 52 }}>N&ordm; {iss.number}</span>
+              )}
+              <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', minWidth: 74 }}>
+                {iss.date_label || iss.date}
+              </span>
+              <span style={{ fontSize: 14, color: 'var(--text-1)', flex: 1 }}>
+                {iss.headline || 'Untitled issue'}
+              </span>
+              {iss.top_read?.subject && (
+                <span className="mono" style={{ fontSize: 10, color: 'var(--text-3)' }}>
+                  TOP READ · {iss.top_read.subject.toUpperCase()}
+                  {iss.top_read.grade ? ` ${iss.top_read.grade}` : ''}
+                </span>
+              )}
+              {/* THE LAW: every issue shows its own day record. */}
+              <span className="mono" style={{ fontSize: 11, fontWeight: 800, color: rec ? 'var(--text-1)' : 'var(--text-3)' }}>
+                {rec ? `DAY RECORD ${rec}` : 'UNSETTLED'}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </main>
+  );
+}