← gitpulse
Merged
Size
XL
Change Breakdown
New Feature75%
Tests5%
Security5%
Maintenance10%
Dependencies5%
#24feat: Redesign PR detail page (port from gitsky)

PR detail page redesigned with widgets and tabbed story view

The PR detail page gets a visual overhaul: richer metadata up top, a subtitle with the PR title and author, and story content moves into switchable tabs with a proper diff viewer for code changes.

GitPulse users visiting a PR detail page now see a completely reorganized layout. A top meta row displays the merged status, a five-bar size widget with a tooltip explaining the rating, and a segmented category bar showing what kind of work the PR contains — feature, refactor, bugfix, or other categories — with percentages.

The PR subtitle shows the author's avatar, username, merge date, and a link that displays both the PR number and full title ("#24 My New Feature ↗"), making it clearer which PR you're reading about on mobile. Story and technical content move from a collapsed details block into tabbed panels: the Story tab shows the human-readable narrative, while Technical exposes code examples, diffs, and implementation notes.

Code blocks within stories render with line numbers in a gitsky-style container. When code contains git diffs — additions and deletions — the viewer adds a Diff tab that colors lines green for added content and red for removed content, with old/new line numbers in separate gutters. This makes reviewing what actually changed in a PR far more scannable than reading raw text.

For developers running the site locally, a new data:fetch command pulls the latest published stories from the deployed GitPulse site into site/public/data/, so the local dev server has real content to render without manual setup. The script guards against path traversal attacks when fetching story files.

The analyzer action now captures the PR title alongside the number and URL, so older data without this field still renders gracefully as just the number with an arrow.