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

[znat]

Summary

Two related image fixes.

1. Illustrations missing from story detail views

PRArticle (the side panel and the full PR page) and the commit detail page rendered headline → standfirst → body but never referenced story.imageUrl — only the feed (PRFeedItem) did. So feature images showed in the feed but vanished the moment you opened a story.

• site/src/components/PRArticle.tsx — renders the 3:2 illustration after the standfirst (covers the side panel via variant="panel" and the full PR page via variant="page").
• site/src/app/commit/[sha]/[slug]/page.tsx — same, for the commit detail page (which renders its own layout, not PRArticle).

Both reuse PRFeedItem's next/image setup (fill, object-cover, unoptimized, 3:2 aspect).

2. Generate 1K images instead of 2K

generator.ts requested imageSize: '2K'. Our largest render is the feed hero at 720px CSS (~1440px on a 2× display); the side panel is ~480px. 2K (~2048px) is bigger than anything we display, costs ~50% more per image ($0.101 → $0.067 on Gemini 3.1 Flash Image), and makes heavier Blob uploads. Switched to 1K, which fully covers our display sizes.

Per the Gemini image docs + pricing, and a forum report that the preview model may cap at 1K anyway — so this also aligns intent with actual output. aspectRatio: '3:2' is unchanged (and a supported value).

Test plan

• yarn workspace @gitpulse/cli test — 138 passed (updated generator test asserts 1K)
• yarn workspace @gitpulse/site typecheck — clean
• Visual: open a story panel / detail page on a deploy with images and confirm the illustration renders; new images come out 1K

Note: existing stories keep their already-generated (2K) imageUrls — the 1K size applies to newly generated images.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Images now display on commit story pages when available
  • Featured images now display on pull request article pages

• Bug Fixes

  • Adjusted default image size configuration

• Tests

  • Updated test expectations for image size settings

[coderabbitai]

Warning

Review limit reached

@znat, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 39 minutes and 9 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 34170a4f-0e48-4dfd-a615-2113fddd6968

📥 Commits

Reviewing files that changed from the base of the PR and between e81cecb and 972ba34.

📒 Files selected for processing (2)

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

📝 Walkthrough

Walkthrough

This PR optimizes image generation from 2K to 1K resolution in Gemini requests with matching test updates, then adds conditional story image rendering to commit pages and PR article components using Next.js Image with consistent 3:2 aspect ratio styling and responsive sizing.

Changes

Story image generation and display

Layer / File(s)	Summary
Image generation config optimization cli/src/image/generator.ts, cli/src/image/generator.test.ts	Gemini imageConfig.imageSize is reduced from 2K to 1K with documented rationale, and test expectation is updated to match the new default.
Story image display in pages site/src/app/commit/[sha]/[slug]/page.tsx, site/src/components/PRArticle.tsx	Commit and article pages now import next/image and conditionally render story.imageUrl with fixed 3:2 aspect ratio, fill layout, object-cover styling, responsive sizes, and unoptimized rendering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• znat/gitpulse#54: The main PR's update to cli/src/image/generator.ts (Gemini imageConfig.imageSize from 2K→1K) directly adjusts the generateImage implementation introduced in this PR.
• znat/gitpulse#56: Both PRs affect the shared generateImage pipeline; this PR changes Gemini's imageConfig.imageSize default (2K→1K) while PR #56's release illustration generator calls generateImage, so release image generation is impacted.

Poem

🐰 Images now render with care,
One-K pixels floating in air,
Three by two, a perfect view,
Stories bloom when images shine through!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately summarizes the two main changes: displaying story illustrations on detail views and reducing generated image size from 2K to 1K, matching the changeset perfectly.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/story-panel-images

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[greptile-apps]

Greptile Summary

This PR fixes story illustrations missing from detail views (PRArticle and the commit detail page) and reduces generated image size from 2K to 1K. The LCP concerns raised in the previous review round are already addressed — priority={variant === 'page'} is set in PRArticle and priority is unconditionally set on the commit page.

• Image display fix: Both PRArticle.tsx (covering the side panel and PR detail page) and commit/[sha]/[slug]/page.tsx now render a 3:2 fill-based image block after the standfirst, guarded by story.imageUrl, consistent with how PRFeedItem already rendered illustrations.
• Image size reduction: generator.ts switches from imageSize: '2K' to '1K', which fully covers the largest display size (720px CSS / ~1440px on 2×) at lower cost; test updated to match.

Confidence Score: 5/5

Safe to merge — straightforward additive rendering fix with no logic changes to data loading or routing.

All four changed files make narrow, well-scoped changes: two UI files add an image block that only renders when imageUrl is present, one config constant is updated with a matching test fix. The image rendering pattern is identical to the already-working PRFeedItem implementation, and priority handling is correct for each render context.

No files require special attention.

Important Files Changed

Filename	Overview
site/src/components/PRArticle.tsx	Adds conditional image block after standfirst; correctly uses fill+aspect-ratio container, variant-aware sizes hint, and priority={variant==='page'} to address LCP on the full-page view.
site/src/app/commit/[sha]/[slug]/page.tsx	Mirrors the PRArticle image block for the commit detail route; sizes hint (672px) matches the max-w-2xl container; priority is always set since this is always a full-page render.
cli/src/image/generator.ts	Switches imageSize from '2K' to '1K' with a clear comment; aligns with display sizes (max 720px CSS / ~1440px on 2x) and reduces generation cost.
cli/src/image/generator.test.ts	Test expectation updated from '2K' to '1K' to match the generator change; no other test logic affected.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[story.imageUrl?] -->|undefined| B[Skip image block]
    A -->|present| C[Render image container\naspectRatio 3/2, relative, overflow-hidden]

    C --> D{Which component?}

    D -->|PRArticle variant=panel| E[sizes: 480px\npriority: false\nlazy-loaded]
    D -->|PRArticle variant=page| F[sizes: 720px\npriority: true\npreloaded]
    D -->|CommitStoryPage| G[sizes: 672px\npriority: true\npreloaded]

    E --> H[next/image fill + object-cover + unoptimized]
    F --> H
    G --> H

Loading

_{Reviews (2): Last reviewed commit: "perf(site): eager-load the above-the-fol..." | Re-trigger Greptile}

[github-actions]

Vercel preview — built from 972ba34a7f2add7049cccb0df8ed1c33f3084ef1

https://gitpulse-demo-ltb25ohl6-znats-projects.vercel.app