Skip to content

Add PR visual diffs for components and application screens - #24

Merged
turtton merged 2 commits into
mainfrom
codex/pr-visual-diff
Oct 1, 2026
Merged

turtton merged 2 commits into
mainfrom
codex/pr-visual-diff

Conversation

@turtton

@turtton turtton commented Sep 30, 2026 •

Copy link
Copy Markdown
Member

共有コンポーネントやアプリ画面を変更したPRで、mainとの差分をPR上で確認できるようにします。UI catalog全ストーリーとBooskiff・Emumetの代表14状態をPC・モバイルで撮影し、変更前・変更後・差分を gh pr comment --attach で直接添付します。

  • 撮影開始時のmainとPR headを同一Chromiumで比較。固定時刻・固定データの実際のSSR/ハイドレーションを撮影し、Dockerやbackend checkoutに依存しません。
  • 投稿はdefault branchの信頼したコードで実行。PNGを制限・再生成し、撮影SHAをGitHub APIと照合します。古い投稿、途中の添付失敗、50ファイルを超えるレポートを扱い、無関係なコメントを上書きしません。
  • R2設定を不要にします。画像添付に標準GITHUB_TOKENは使えないため、専用Secret VISUAL_DIFF_GH_TOKEN が必要です。
  • 撮影対象を追加する手順とSecret設定を visual/README.md に記載しました。

検証: Bunテスト48件(CIと同じBun 1.3.13)、strict TypeScript、actionlint、zizmorが成功。UI catalog52枚とアプリ画面28枚をブラウザーで撮影し、同じrevisionを繰り返した画像が一致することを確認しました。current側ドライバーによるmain側アプリの撮影も一致しました。

GitHub CIも成功し、両revisionで各80枚を撮影、Changed/New/Deleted=0・Passed=80を確認しました。gh --attachによる実投稿も検証済みです。

初回PRではworkflow_run投稿処理がmainに存在しないため、自動添付はマージ後に有効になります。Secret設定と導入PRのマージ後、同一repositoryの変更PRで実際の自動投稿を確認する必要があります。

@turtton

turtton commented Sep 30, 2026

Copy link
Copy Markdown
Member Author

添付機能の検証サンプルです。main c99a532 とこのPR d8c3ed0 のBooskiff Driveを、同じブラウザー・固定データで撮影しました。このPRはCIの追加のみで、画面差分はありません。

main このPR
mainのDrive PRのDrive

この投稿は手動の gh pr comment --attach 動作検証です。自動投稿は、導入PRのマージ後にdefault branch上の workflow_run から有効になります。

@turtton
turtton merged commit 8635e20 into main Oct 1, 2026
2 checks passed
@turtton
turtton deleted the codex/pr-visual-diff branch October 1, 2026 01:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant