feat(compare): one narrative paragraph per interactivity target with templated variety

compareTableNarrative now returns string[] — one paragraph per ssrRow (3
default targets, so 3 paragraphs per slug page). Each paragraph picks a
template from a per-situation pool:

  - PER_DOLLAR_BOTH_TEMPLATES — 6 variants for the cost-only narrative
  - PER_DOLLAR_TIED_TEMPLATES — 3 variants for the near-tie case
  - PER_DOLLAR_ZERO_TEMPLATES — 2 variants for zero-cost edge case
  - PER_DOLLAR_SINGLE_TEMPLATES — 3 variants for one-GPU-only rows
  - FULL_BOTH_TEMPLATES — 6 variants for cost+throughput narrative
  - FULL_SINGLE_TEMPLATES — 3 variants for one-GPU-only rows in full mode

Template selection is SSR-deterministic via pickRotated(pool, pageSeed,
rowIndex): the per-page hash picks where to START in the rotation; rowIndex
advances by 1 from there. Result:

  - Same page renders the same 3 paragraphs every request (SSR + hydration
    agree, crawlers see stable text)
  - Different pages start at different points in the rotation → catalog
    reads with variety
  - Within a page, the 3 paragraphs always use 3 *distinct* templates —
    rotation avoids the birthday-problem collisions that random sampling
    of 3 from 6 produces

Page-client renders the paragraph array, with the "(default selection)"
caveat appended only to the last paragraph so the block reads as one piece
of prose instead of three separate footnotes.

Verified live: /compare-per-dollar/deepseek-v4-b200-vs-mi355x renders three
different templates at 17/30/42 tok/s/user;
/compare-per-dollar/kimi-k26-mi300x-vs-mi355x starts at a different template
and also rotates through three distinct ones at 21/28/36 tok/s/user.

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

Author: functionstackx

packages/app/src/app/compare-per-dollar/[slug]/page-client.tsx

@@ -31,9 +31,12 @@ interface ComparePerDollarPageClientProps {
   defaultSequence: string | null;
   defaultPrecision: string | null;
   ssrTableData: SsrTableData;
-  /** SSR-rendered plain-English summary of the dollar-per-million-tokens table
-   *  at the mid target. Null when there's no comparable data. */
-  narrative: string | null;
+  /** One SSR-rendered prose paragraph per interpolated-table row (default
+   *  interactivity target). Each paragraph picks a template variant
+   *  deterministically from the slug so prose stays stable across renders
+   *  but varies across pages in the catalog. Empty array when there's no
+   *  comparable data. */
+  narrative: string[];
   aLabel: string;
   bLabel: string;
   aVendor: string;
@@ -138,18 +141,28 @@ export default function ComparePerDollarPageClient({
                 </Link>
                 .
               </p>
-              {narrative && (
-                <p
-                  className="mt-3 text-sm text-foreground/80 max-w-3xl"
+              {narrative.length > 0 && (
+                <div
+                  className="mt-3 flex flex-col gap-2 max-w-3xl"
                   data-testid="compare-per-dollar-narrative"
                 >
-                  {narrative}{' '}
-                  <span className="text-muted-foreground italic">
-                    (Numbers reflect the default {defaultSequence ?? 'sequence'} ·{' '}
-                    {defaultPrecision ?? 'precision'} selection for this URL — table and chart below
-                    update if you change sequence, precision, or model in the controls.)
-                  </span>
-                </p>
+                  {narrative.map((para, i) => (
+                    <p key={i} className="text-sm text-foreground/80">
+                      {para}
+                      {i === narrative.length - 1 && (
+                        <>
+                          {' '}
+                          <span className="text-muted-foreground italic">
+                            (Numbers reflect the default {defaultSequence ?? 'sequence'} ·{' '}
+                            {defaultPrecision ?? 'precision'} selection for this URL — table and
+                            chart below update if you change sequence, precision, or model in the
+                            controls.)
+                          </span>
+                        </>
+                      )}
+                    </p>
+                  ))}
+                </div>
               )}
               {(aCostPerGpuHr > 0 || bCostPerGpuHr > 0) && (
                 <p

packages/app/src/app/compare/[slug]/page-client.tsx

@@ -34,9 +34,12 @@ interface ComparePageClientProps {
   defaultSequence: string | null;
   defaultPrecision: string | null;
   ssrTableData: SsrTableData;
-  /** SSR-rendered plain-English summary of the interpolated table (mid-target
-   *  operating point + headline ratio). Null when there's no comparable data. */
-  narrative: string | null;
+  /** One SSR-rendered prose paragraph per interpolated-table row (default
+   *  interactivity target). Each paragraph picks a template variant
+   *  deterministically from the slug so prose stays stable across renders
+   *  but varies across pages in the catalog. Empty array when there's no
+   *  comparable data. */
+  narrative: string[];
   aLabel: string;
   bLabel: string;
   aVendor: string;
@@ -115,18 +118,25 @@ export default function ComparePageClient({
                 </Link>
                 .
               </p>
-              {narrative && (
-                <p
-                  className="mt-3 text-sm text-foreground/80 max-w-3xl"
-                  data-testid="compare-narrative"
-                >
-                  {narrative}{' '}
-                  <span className="text-muted-foreground italic">
-                    (Numbers reflect the default {defaultSequence ?? 'sequence'} ·{' '}
-                    {defaultPrecision ?? 'precision'} selection for this URL — table and chart below
-                    update if you change sequence, precision, or model in the controls.)
-                  </span>
-                </p>
+              {narrative.length > 0 && (
+                <div className="mt-3 flex flex-col gap-2 max-w-3xl" data-testid="compare-narrative">
+                  {narrative.map((para, i) => (
+                    <p key={i} className="text-sm text-foreground/80">
+                      {para}
+                      {i === narrative.length - 1 && (
+                        <>
+                          {' '}
+                          <span className="text-muted-foreground italic">
+                            (Numbers reflect the default {defaultSequence ?? 'sequence'} ·{' '}
+                            {defaultPrecision ?? 'precision'} selection for this URL — table and
+                            chart below update if you change sequence, precision, or model in the
+                            controls.)
+                          </span>
+                        </>
+                      )}
+                    </p>
+                  ))}
+                </div>
               )}
               <p className="mt-2 text-sm">
                 <Link