fix(site): show story illustrations on detail views + generate 1K images

cli/src/image/generator.test.ts

@@ -59,7 +59,7 @@ describe('generateImage (gemini)', () => {
       contents: 'the prompt',
       config: {
         responseModalities: ['TEXT', 'IMAGE'],
-        imageConfig: { aspectRatio: '3:2', imageSize: '2K' },
+        imageConfig: { aspectRatio: '3:2', imageSize: '1K' },
       },
     });
   });

cli/src/image/generator.ts

@@ -33,7 +33,11 @@ export async function generateImage(
       contents: prompt,
       config: {
         responseModalities: ['TEXT', 'IMAGE'],
-        imageConfig: { aspectRatio: '3:2', imageSize: '2K' },
+        // 1K (~1024px) covers our largest render — the feed hero at 720px CSS
+        // (~1440px on a 2x display) and the ~480px side panel. 2K (~2048px) is
+        // bigger than anything we show and costs ~50% more per image
+        // ($0.101 vs $0.067), so it's wasted resolution + heavier Blob uploads.
+        imageConfig: { aspectRatio: '3:2', imageSize: '1K' },
       },
     }),
     GEMINI_TIMEOUT_MS,

site/src/app/commit/[sha]/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import Link from 'next/link';
+import Image from 'next/image';
 import { primaryCategory, categoryDisplayName } from '@/lib/stories';
 import { loadStories, loadStoryBySha } from '@/lib/stories-loader';
 import { buildStoryMetadata, canonicalUrl } from '@/lib/seo';
@@ -89,6 +90,23 @@ export default async function CommitStoryPage({
         </h1>
         <p className="font-feed-body standfirst mb-2xl">{story.standfirst}</p>
 
+        {story.imageUrl && (
+          <div
+            className="relative w-full overflow-hidden rounded-md mb-2xl"
+            style={{ aspectRatio: '3/2' }}
+          >
+            <Image
+              src={story.imageUrl}
+              alt={story.headline}
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 672px"
+              priority
+              unoptimized
+            />
+          </div>
+        )}
+
         <div className="font-feed-body text-foreground-secondary leading-relaxed whitespace-pre-line mb-2xl">
           {story.story}
         </div>

site/src/components/PRArticle.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import type { Story } from '@/lib/stories';
 import { PRMetaRow } from './PRMetaRow';
 import { PRSubtitle, PRMobileReference } from './PRSubtitle';
@@ -42,6 +43,24 @@ export function PRArticle({
         commitUrl={story.kind === 'direct-push' ? story.commitUrl : undefined}
       />
       <p className="standfirst font-feed-body mb-10">{story.standfirst}</p>
+      {story.imageUrl && (
+        <div
+          className="relative w-full overflow-hidden rounded-md mb-10"
+          style={{ aspectRatio: '3/2' }}
+        >
+          <Image
+            src={story.imageUrl}
+            alt={story.headline}
+            fill
+            className="object-cover"
+            sizes={variant === 'panel' ? '(max-width: 768px) 100vw, 480px' : '(max-width: 768px) 100vw, 720px'}
+            // The full-page illustration is above the fold (likely LCP) — eager-load
+            // + preload it. The panel can open below the fold, so leave it lazy.
+            priority={variant === 'page'}
+            unoptimized
+          />
+        </div>
+      )}
       <PRStoryBody
         story={story.story}
         technicalDescription={story.technicalDescription || undefined}