2026 OpenClaw フロント実戦：
リモート Mac でビジュアル回帰 diff を解析し PR 要約を返す
Percy／Chromatic／自前 diffでピクセル差を出したあと、PR 上で読める要約まで届けるのが本稿の焦点です。起動→JSON 取得→OpenClaw 集約→コメント／Webhookを、SaaS コンソールのログイン必須 URL をテンプレにしない方針で整理します。関連：バンドル閾値と PR 要約、E2E ログトリアージ、Playwright×OpenClaw。
01 ビジュアルビルドの起動と識別子の固定
CI は差分時の終了コードと API／CLI が返す ビルド ID の二点を残します。VISUAL_BUILD_ID と .openclaw/reports/${GIT_SHA}/ で Linux ランナーとレンタル Macを同じ手順に揃えます。
ブラウザ向け「build/12345」URL をレポに焼かない。SSO・権限で壊れやすく、ボットが辿れません。API の種別は Runbook にテキストで、ベース URL とトークンは環境変数のみ。
02 レポート取得：Percy／Chromatic／自前 diff JSON
Percy／Chromatic は HTTP API でビルドと失敗スナップを取得。読み取り専用トークンと PERCY_API_BASE など可変ベース URL に寄せます。
自前（pixelmatch、reg-cli 等）は visual_diff_report.json を一ファイルでアーティファクト化し、jq empty で検証。SaaS も自前もアダプタで同一スキーマに揃え OpenClaw へ渡します。
| ソース | パイプライン入力 | 注意 |
|---|---|---|
| Percy API | シークレットトークン、スナップのページネーション | レート制限：Retry-After 尊重とバックオフ |
| Chromatic API | CI が受け取ったビルド ID、ドキュメントに沿った REST／GraphQL | ログにトークンやレスポンス全文を出さない |
| 自前 JSON | ディスクまたはキャッシュ上のアーティファクト | JSON 内パスはリポジトリ相対のみ |
03
visual_diff_report.json の最小契約
版管理する最小項目：schemaVersion、gitSha、provider、failures[]（スナップ名・ビューポート・差分指標・重要度・リポジトリ相対パス）。画像はアーティファクト、JSON は参照のみ。
PR 本文は「CI ジョブ visual-regression のアーティファクト」など Git 実行ページから辿れる表現を優先。SSO ダッシュボード直リンクは避けます。
04 OpenClaw による失敗の集約と優先順位
エージェントへの手順を固定します。
- 入力：JSON、PR、リポジトリ、
failures先頭 N 件。 - 並べ替え：重要度→差分面積、ディレクトリで圧縮。
- 出力：
visual_pr_summary.md（結果・主要画面・確認手順）。根拠なき原因は仮説のみ。 - トリガー：失敗／warn ゲート。同一 SHA で二重投稿禁止。
05 PR コメントと内部 Webhook
PR コメント APIとHMAC Webhookを併用可。Webhook は Idempotency-Key（SHA＋レポート種別）でリトライ安全に。
コメントは短く、悪化トップを箇条書き、詳細は同 PR の CI 実行へ。機微画像は権限付きアーティファクトのみ。
06 トークンの最小権限とリトライ
Git はPull requests 読み書きに限定した fine-grained／App トークン、または GITHUB_TOKEN＋pull-requests: write。SaaS 視覚ツールは読み取り専用 CI トークンをローテーション。
retry：5xx／タイムアウトで 3 回程度、1s 開始・倍率 2・上限 30s 目安＋jitter。失敗時は空コメントを避けログで明示。
07 FAQ
プロバイダ混在：VISUAL_PROVIDER でアダプタ切替、スキーマは統一。
Mac の役割：WebKit 実機に有効。JSON が同じならゲートは Linux でも可。Node／フォントを揃える。
ログ衛生：Authorization マスク、レスポンス短縮ログ。PR 文にプリサイン URL やトークンを混ぜない。
視覚ジョブ→正規化 JSON→OpenClaw→visual_pr_summary.md→最小権限 PR／署名 Webhook。バックオフと冪等キーで安定化し、SSO コンソール URL 依存を避けます。
継続的な検証環境の契約・接続手順は料金とヘルプ（SSH／VNC）を参照してください。ブログ一覧には OpenClaw・Safari・CI 関連の記事があります。