PR Screenshot

/pr-screenshot
/pr-screenshot "ホバー状態も撮って"

{
  "r2AccountId": "your-cloudflare-account-id",
  "r2Bucket": "your-bucket-name",
  "r2PublicUrl": "https://pub-xxx.r2.dev"
}

SCREENSHOT_DIR=/tmp/pr-screenshots

git branch --show-current
gh pr list --head "$(git branch --show-current)" --json number --jq '.[0].number'
git diff --name-only develop...HEAD

# Supabase が起動中か確認
npx supabase status 2>&1 | head -5

# シードデータを投入（新カラム等を反映）
pnpm seed

# devサーバー起動（バックグラウンド）
# web のみ: ポート3000
# admin も必要なら: ポート3001
npx dotenv -e .env -- pnpm --filter web run dev &
# admin が必要な場合:
# npx dotenv -e .env -- pnpm --filter admin run dev &

# サーバー起動待ち
sleep 8

# 起動ログからポートを確認するか、curl で確認
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 || curl -s -o /dev/null -w "%{http_code}" http://localhost:3002

# 公開済み議案のIDを1件取得
npx supabase db query "SELECT id::text FROM bills WHERE publish_status = 'published' LIMIT 1;"

# admin にログインが必要（session cookie取得）
# admin は Basic Auth やメールログインが必要なので、URL直アクセスで取れない場合がある
# → admin はログインフローを agent-browser で実行してからスクショを撮る

mkdir -p /tmp/pr-screenshots

# セッション名はPR番号を使う
SESSION="pr-${PR_NUMBER}"

# ビューポートをモバイルに設定
agent-browser --session $SESSION set viewport 390 844

# 各URLを開いてスクショ
agent-browser --session $SESSION open "$URL"
agent-browser --session $SESSION wait 3000
agent-browser --session $SESSION screenshot /tmp/pr-screenshots/screenshot-1.png

agent-browser --session $SESSION open "http://localhost:3001/login"
agent-browser --session $SESSION snapshot -i
# メールとパスワードを入力
agent-browser --session $SESSION fill "@eX" "admin@example.com"
agent-browser --session $SESSION fill "@eY" "admin123456"
agent-browser --session $SESSION click "@eZ"  # ログインボタン
agent-browser --session $SESSION wait 3000
# ログイン後、目的のページに遷移

npx wrangler whoami 2>&1

# config.local.json から値を取得（Bash の jq または Read ツールで読む）
R2_ACCOUNT_ID=$(cat .claude/skills/pr-screenshot/config.local.json | jq -r '.r2AccountId')
R2_BUCKET=$(cat .claude/skills/pr-screenshot/config.local.json | jq -r '.r2Bucket')
R2_PUBLIC_URL=$(cat .claude/skills/pr-screenshot/config.local.json | jq -r '.r2PublicUrl')

export CLOUDFLARE_ACCOUNT_ID=$R2_ACCOUNT_ID

# PR番号ベースのパスでアップロード
npx wrangler r2 object put "${R2_BUCKET}/pr-${PR_NUMBER}/screenshot-1.png" \
  --file /tmp/pr-screenshots/screenshot-1.png --remote

# 複数ファイルがある場合はそれぞれアップロード

${R2_PUBLIC_URL}/pr-${PR_NUMBER}/screenshot-1.png

## スクリーンショット

| 説明1 | 説明2 | 説明3 |
|:---:|:---:|:---:|
| <img src="URL1" width="250" /> | <img src="URL2" width="250" /> | <img src="URL3" width="250" /> |

## スクリーンショット

| 説明1 | 説明2 |
|:---:|:---:|
| <img src="URL1" width="350" /> | <img src="URL2" width="350" /> |
| <img src="URL3" width="350" /> | <img src="URL4" width="350" /> |

# devサーバーを停止
pkill -f "next dev.*turbopack" 2>/dev/null

# 一時ファイル削除
rm -rf /tmp/pr-screenshots