# 專案規劃頁 §5 實機截圖 — 執行者 Prompt（自包含）

> 開場 prompt：
> ```
> 請讀 docs/features/FR-047-2607-feature-spec-handbook/handoff/2026-07-05-screenshot-task-prompt.md，
> 完成專案規劃頁 spec §5 的五張實機截圖（亮色模式），嵌入 spec 後 rebuild HTML，
> commit 並更新 tracker，停下等驗收。
> ```
> 模型：Sonnet 即可。

## 目標

拍五張「專案規劃頁」實機截圖（**亮色模式**，user 指定）到 `docs/specs/v1.8.0/project-management/assets/img/`，替換 spec §5 的佔位 callout，rebuild HTML 站。

| # | 檔名 | 內容 |
|---|------|------|
| 1 | planning-overview.png | 整頁（Tab0 左樹 + 預設面板） |
| 2 | planning-control-panel.png | 點選控制項後的 Control 面板 |
| 3 | planning-ao-tasks.png | AO 面板 + 任務卡展開 |
| 4 | planning-batch-menu.png | 批次維護選單展開 |
| 5 | planning-banner.png | FlowPhaseBanner 特寫（頂部裁切） |

## 已探明的路況（省你重走）

1. **環境**：STG `https://192.168.50.188`（活著）；**不要用 MCP 瀏覽器填帳密**（會被權限分類器擋）——用測試專案自己的 playwright + storageState
2. **臨時腳本已寫好**：`compliance-manager-test/scripts/tmp-planning-screenshots.mjs`（untracked 臨時檔，跑完刪）
   - `node scripts/tmp-planning-screenshots.mjs probe` → 驗登入 + dump DOM 線索；`shoot` → 正式拍五張
   - 目標專案「亞州航空」的 PID / RID 已寫在腳本常數
   - `HEADED=1` 環境變數可改 headed 模式
3. **auth-state**：`compliance-manager-test/support/auth-states/admin.json`；過期就在測試 repo 跑 `npm run auth:save` 重產（admin 會開 headed 瀏覽器自己登入，含 Cloudflare 驗證）
4. **⚠️ 未解 bug（接手第一件事）**：auth:save 重產成功後，probe **仍被導回登入頁**。腳本已加 debug（落 `_login-debug.png` + 印 localStorage keys）。候選原因（推測，待 verify）：
   - headless chromium 被 Cloudflare challenge 擋（auth:save 是 headed 成功的）→ 試 `HEADED=1`
   - storage state 的 origin/UA 綁定問題 → 對照 admin.json 的 origins 與腳本 context 設定
   - SPA route guard 在 store hydration 前先踢 → 拉長等待或先 goto 首頁再導頁
5. **亮色模式**：先查 FE 主題存哪（grep FE repo `isDark` / `darkTheme` / `cm_store` 的 theme 欄位），在 context 加 `colorScheme: 'light'` + addInitScript 改 localStorage 強制 light；**拍之前務必確認畫面是亮色**
6. **DB 查 planning 專案**（換目標時用）：STG DB `192.168.50.188:25432 guidant_ai_stg`，帳號 cmmgr（密碼從 BE `.env` 的 `DB_SECRET` JSON 取 `rds_master_password`；`.env` 不能直接 source，會 parse error，用 python 讀）：
   ```sql
   SELECT p.uid, r.uid, p.name FROM compliance.project_audit_rounds r
   JOIN compliance.projects p ON p.id = r.project_id
   WHERE r.status = 'planning' ORDER BY r.updated_at DESC;
   ```

## 完成定義

1. 五張亮色截圖落 `assets/img/`（deviceScaleFactor 2，畫面無敏感資訊疑慮——STG 資料 user 已核可）
2. spec §5 佔位 callout 換成五張 `![說明](assets/img/xxx.png)`（lightbox 自動生效）
3. `python3 scripts/deliverables/render_html.py "docs/specs/v1.8.0"` 全 ✅，開瀏覽器抽查圖有進 HTML
4. 刪除臨時腳本 `tmp-planning-screenshots.mjs`（測試 repo 不留垃圾）
5. BE repo 顯式 `git add`（截圖 + spec md）commit；更新 [tracker](../tracker.md)（pilot 列備註「§5 截圖完成」）；停下等 user 驗收

## 行為規範

不切 branch / 不 push / 禁 `-am`；對 STG 只做讀操作與截圖，不要點任何會寫入的按鈕（儲存 / 匯入 / 開始執行任務 / 階段推進一律不碰）。