Repository navigation
screenshot pipeline: story-driven hero / docs / gallery captures - #34
Open
borght-dev wants to merge 15 commits into
Open
borght-dev wants to merge 15 commits into
borght-dev wants to merge 15 commits into
Conversation
Spec: replaces scripts/screenshot-heroes.mjs with a story-driven capture pipeline. Stories opt in via parameters.screenshot. Single script enumerates Storybook's static index, captures via Playwright against storybook-static/, writes PNGs to repo-relative paths. Plan: 11 task-by-task steps. Branched from storybook-phase12-main-sidebar because the pipeline tags Phase 12's Hero_* stories. Will need rebase onto master after Phase 12 (#33) merges. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a template story used as the baseline for per-release whatsnew banner stories. Per-release stories will be added in release PRs; each copies this template and adds its own parameters.screenshot. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Storybook 10's storybook-static/index.json does NOT include story parameters. The original script tried to filter stories by reading parameters.screenshot from index.json — got zero matches. Fix: enumerate all story IDs from index.json, then visit each iframe.html and read parameters.screenshot from the running preview's __STORYBOOK_PREVIEW__.currentRender.story.parameters. Two-pass: first probe collects tagged stories + detects duplicate output paths, second pass actually captures. Adds visit-and-probe helper and refactors main() to do the two-pass flow with clearer logging (probing N stories, captured M). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Captures from the 15 stories tagged with parameters.screenshot: - 4 docs/hero/*.png (Phase 12 hero bodies) - 11 site/public/screenshots/*.png (one canonical story per major storied window — flyout, whats-new, worktree-palette, agent-overview, sql, work-item-detail, file-palette, file-viewer, work-item-palette, settings, pr-detail) Known visual fidelity issues (follow-up work): - docs/hero/readme-main.png — composition placement looks inverted (App + PrDetailApp grid columns); the panels render but the layout is off. Pipeline mechanics work end-to-end; the seed/composition design needs iteration. - docs/hero/doc-focus-list.png — focus list shows "No PRs need attention" because the priority-derivation filter in usePriorities rejects the canonical seed shape; the canvas works, the seed needs to populate priorities-eligible PRs. - site/public/screenshots/flyout.png — captured during FlyoutApp's splash phase; the canonical story's init hooks don't fully complete before capture. Needs a longer waitFor selector or a deferred capture marker. The pipeline itself works: probe-then-capture flow, output collisions detected, no errors mid-run. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaced by scripts/capture-screenshots.mjs. The historical design/mockups/whats-new-*.html files (which screenshot-heroes rendered into PNGs) stay as-is for already-shipped releases — their PNGs are already committed under docs/whats-new/<VERSION>/. Removes the corresponding "screenshot-heroes" entry from package.json scripts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
New /captures page renders all 11 site/public/screenshots/*.png in a responsive grid with caption + blurb per shot. Wired into SiteNav between Gallery and Changelog so it's discoverable. Mobile-friendly: single column under 640px, lazy-loaded images. The captures regenerate from `bun run capture-screenshots` and ship as committed artifacts, so the gallery updates the instant the PNGs do. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the React-based mockups (FocusSidebar, MainPRsWindow, DiffViewer, PrDetail, FilePalette, SqlWindow, CiLogPanel, WorkItemsList, FloatingBadgeMock, WorktreePalette) with <img> tags pointing at the real captured PNGs from site/public/screenshots/. Twelve sections, one per available capture: Focus (flyout), Main PRs, PR detail, File viewer, Settings, Agent overview, Worktree palette, File palette, SQL, Work item detail, Work item palette, What's new. CI log and Floating badge slots removed — no real captures yet (will return when those are storied). Adds site/public/screenshots/main-prs.png, copied from docs/hero/doc-prs-list.png, so the Main PRs gallery section has a proper site-served asset. The pipeline can later be enhanced to write the same capture to multiple paths so this duplication becomes unnecessary. The React screen mock components under src/components/screens/ stay in the tree — they may still be used by the home or features page, and a sweep is out of scope for this commit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…chness Three fixture/story tweaks to address review feedback on the first batch of captures: 1) Focus list (docs/hero/doc-focus-list.png) was rendering "No PRs need attention" because computePriorityScores rejected the canonical seed. Add PRS_FOCUS_DEMO with three priority-eligible shapes — own-PR-with-failing-checks-and-stale (myPrRedChecks + myPrStale), reviewer-requested, own-PR-approved-and-mergeable — and seed gitHub.username='borght-dev' in the focus story so the isMine branch fires. 2) Main PRs (site/public/screenshots/main-prs.png) was too narrow: the previous shot was a copy of doc-prs-list.png at 480x800, where the filter pills wrap onto multiple rows. New Hero_GalleryMainPrs story captures the same data at 720x900 → site/public/screenshots/ directly. Drops the file copy in favor of a pipeline-managed asset. 3) Work item detail (site/public/screenshots/work-item-detail.png) looked anemic because LoadedClean used userStoryFreshlyLoaded — a minimal fixture. Production WorkItemDetailPanel filters out empty fields, so a sparse seed renders as nearly nothing. Switch to userStoryWithRichBody + commentsManyAuthors so description, acceptance criteria, sprint, iteration, and a populated comments thread all render. Bonus: re-running the pipeline also touched docs/hero/readme-main.png, site/public/screenshots/pr-detail.png, and settings.png — re-rendered identical-shape PNGs (timestamps, tiny anti-aliasing differences). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 tasks
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces
scripts/screenshot-heroes.mjswith a story-driven pipeline. Stories opt in viaparameters.screenshot. A single new script (scripts/capture-screenshots.mjs) builds a static Storybook, navigates each story's iframe in headless Chromium, reads parameters from the runtime preview API, and writes PNGs to repo-relative output paths.Depends on #33 (Phase 12). PR base is set to
storybook-phase12-main-sidebar; will auto-rebase onto master once #33 merges.What's in this PR (vs Phase 12)
.storybook/screenshot.ts— typedscreenshot()parameter helperscripts/capture-screenshots.mjs— capture script (probe-then-capture two-pass; duplicate-output detection)package.json—capture-screenshotsscript wired;screenshot-heroesscript removedserve-handleradded as dev dep (lightweight static server for the capture)parameters.screenshotannotations added to:Hero_*stories inApp.hero.stories.tsx(from Phase 12)Hero_WhatsNewTemplatebaseline story in WhatsNewApp's stories file (per-release banner workflow scaffold)docs/hero/{readme-main, doc-focus-list, doc-prs-list, doc-work-items}.pngsite/public/screenshots/{flyout, whats-new, worktree-palette, agent-overview, sql, work-item-detail, file-palette, file-viewer, work-item-palette, settings, pr-detail}.pngscreenshot-heroes.mjsdeletedStorybook 10 quirk
The plan's original capture script read
parameters.screenshotfromstorybook-static/index.json. Storybook 10's index.json does NOT include story parameters — it stops atid/name/title/importPath. Fix: navigate to each story's iframe and read parameters from the runtime preview atwindow.__STORYBOOK_PREVIEW__.currentRender.story.parameters. Two-pass flow: first probe collects tagged stories + detects duplicate output paths, second pass captures.Known visual fidelity issues (follow-ups)
The pipeline mechanics work end-to-end. Three of the 15 captures need iteration before they're usable in the README / marketing site:
docs/hero/readme-main.png— composition placement looks inverted (App + PrDetailApp grid columns); panels render but the layout is off. Visual fix needed before embedding in README. Pipeline still works correctly.docs/hero/doc-focus-list.png— focus list shows "No PRs need attention" because the priority-derivation filter inusePrioritiesrejects the canonical seed shape. Seed needs PRs that pass priorities-eligibility.site/public/screenshots/flyout.png— captured during FlyoutApp's splash phase (init hooks didn't fully complete before capture). Needs a longerwaitForselector or a deferred capture marker.The other 12 captures look great — settings, pr-detail, sql, doc-prs-list, whats-new, work-item-detail, agent-overview, worktree-palette, file-palette, file-viewer, work-item-palette, doc-work-items.
README embed deferred to a follow-up PR once the hero composition is fixed; this PR commits the working pipeline + first capture batch.
Per-release whatsnew workflow
Once this lands, every release PR adds
WhatsNewBanner_<slug>stories towhats-new.stories.tsx(each consumingHero_WhatsNewTemplate) withparameters.screenshot.output = 'docs/whats-new/X.Y.Z/<slug>.png'.bun run capture-screenshotsregenerates all PNGs. The hand-builtdesign/mockups/whats-new-X.Y.Z.htmlworkflow retires.Test plan
bun run build-storybookcleanbun run capture-screenshotswrites 15 PNGs, 0 errorsbun run testclean (no test count change vs Phase 12 baseline)screenshot-heroesscript removed from package.json + the .mjs file deletedRoadmap
docs/superpowers/specs/storybook-roadmap.mdupdated: cross-cutting "Hero-shot pipeline" workstream marked done.🤖 Generated with Claude Code