docs: update all documentation for Active Key Capture feature

- CLAUDE.md: add clipboard-patch, per-platform CSS isolation, React SPA
  masking, AWS dual-key, toast stacking to Key Technical Decisions
- implementation-status.md (zh/en): add 12 Active Capture items, Phase 5
  roadmap, 6 fixed issues, update date to 2026-03-17
- docs/10 (zh/en): status from "Future Development" to "Implemented"
- docs/11: update test results table with 8 tested platforms
- docs/13 (zh): create Chinese translation of supported platforms guide
- docs/README.md (zh/en): add links to docs 10, 13 in index and quick ref

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: easyvibecoding

CLAUDE.md

@@ -81,7 +81,12 @@ These are absolute rules — never violate them:
 - **HotkeyManager hold detection**: Must listen for `flagsChanged` events (not just keyDown/keyUp) to detect modifier key release. `CGEventType.flagsChanged` is the only way to detect ⌃/⌥ release.
 - **Keychain ACL**: Test keys must be added by DemoSafe itself (via `VaultManager.addKey`), NOT by external tools (`security` CLI or separate Swift scripts). Keychain ACL is bound to the creating binary's code signature — every recompile invalidates externally-created entries. DEBUG builds auto-seed test keys via `seedTestKeysIfNeeded()` in AppState.
 - **Platform patterns Single Source of Truth**: All platform definitions (regex, selectors, pre-hide CSS) are in `capture-patterns.ts`. To add a new platform: add ONE entry to `CAPTURE_PATTERNS[]` + add URL to `manifest.json`. `pre-hide.ts` and `masker.ts` import from it — no duplication.
-- **Pre-hide anti-flash**: Two layers at `document_start`: CSS `visibility: hidden` from `preHideCSS` field + instant MutationObserver for dialogs. Passive masking runs capture-before-mask to avoid race condition.
+- **Pre-hide anti-flash**: Three layers: (1) Per-platform manifest CSS files (`dist/css/prehide-*.css`) injected before any JS; (2) `pre-hide.ts` at `document_start` with instant MutationObserver for dialogs; (3) Passive masking runs capture-before-mask to avoid race condition.
+- **Per-platform CSS isolation**: Separate CSS files per hostname generated by `scripts/generate-prehide-css.js` at build time. Each platform gets its own `content_scripts` entry in `manifest.json` to prevent cross-platform selector collisions.
+- **Clipboard writeText interception**: `clipboard-patch.ts` runs in `"world": "MAIN"` (page context) to patch `navigator.clipboard.writeText`. Dispatches `CustomEvent('demosafe-clipboard-write')` for content script (ISOLATED world) to listen. Needed for platforms using programmatic clipboard (AI Studio, AWS, Stripe).
+- **React SPA input masking**: For dialog inputs in React/Vue SPAs, do NOT set `visibility: visible` after masking — the framework overwrites `input.value` but keeps our inline styles, exposing plaintext. Instead, keep inputs hidden by manifest CSS.
+- **AWS dual-key capture**: AWS has Access Key ID (`AKIA...`, DOM scan) + Secret Access Key (no prefix, 40-char base64, clipboard-only capture via `isAwsConsolePage()` in `handleClipboardText()`).
+- **Toast stacking**: Multiple consecutive captures show stacked toasts (each calculates top offset from existing toasts) instead of replacing the previous one.
 
 ## Documentation
 

docs/01-product-spec/implementation-status.md

@@ -1,6 +1,6 @@
 # 實作狀態追蹤
 
-> 最後更新：2026-03-16
+> 最後更新：2026-03-17
 
 ## 狀態圖例
 
@@ -75,13 +75,26 @@
 | Options 頁面 | ✅ | Pattern cache 管理 + Dev IPC Config |
 | Dev IPC Config (workaround) | ✅ | 替代 Native Messaging Host |
 | Native Messaging Host | ❌ | Swift binary 未編譯部署 |
-| Smart Extract (掃描網頁) | ❌ | Spec §6 |
-| Key detection (input/textarea) | 🔶 | detectAndSubmitKeys 已寫但未測試 |
+| Active Key Capture | ✅ | 4 層偵測：DOM scan → attribute → clipboard → platform selectors |
+| capture-patterns.ts (SSoT) | ✅ | 11 平台 pattern 定義，單一檔案維護 |
+| Pre-hide anti-flash | ✅ | 三層：manifest CSS → pre-hide.ts → instant MutationObserver |
+| Per-platform CSS isolation | ✅ | 12 個獨立 CSS 檔，build time 生成 |
+| Clipboard writeText interception | ✅ | `clipboard-patch.ts` MAIN world，支援 AI Studio/AWS/Stripe |
+| React SPA masking | ✅ | Dialog input 保持隱藏，不替換 value |
+| AWS dual-key capture | ✅ | Access Key ID (DOM) + Secret Key (clipboard) |
+| Toast stacking | ✅ | 連續 capture 堆疊顯示 |
+| Capture Mode (popup) | ✅ | Start/Stop capture + countdown timer |
+| E2E 測試 (8 平台) | ✅ | GitHub, HuggingFace, GitLab, OpenAI, Anthropic, AI Studio, Google Cloud, AWS |
+| Stripe / Slack / SendGrid | 🔶 | Pattern 已定義，未測試 |
 
 ### 已修復的問題
 
 - Content script 初始狀態不同步：載入時主動向 background 請求 `get_state`
 - `toggle_demo_mode` action 錯誤發送 `get_state`：已修正
+- GitLab 2026 改版：selectors 從 `#created-personal-access-token` 更新為 `.gl-alert-success`
+- OpenAI React SPA：`input.value` 被框架覆蓋導致明文暴露，改用 CSS 隱藏
+- AWS Secret Key `trimmed` 變數未定義：修正為 `text.trim()`
+- preHideCSS 過廣：OpenAI `input[type="text"]` 隱藏了 Name input，已縮窄
 
 ---
 
@@ -127,3 +140,14 @@
 - ~~WebSocket 連線~~ ✅
 - ~~Content Script masking~~ ✅
 - ~~Toggle Demo Mode~~ ✅
+
+### Phase 5: Active Key Capture ✅
+- ~~capture-patterns.ts SSoT~~ ✅
+- ~~Per-platform CSS isolation~~ ✅
+- ~~Pre-hide anti-flash (3 層)~~ ✅
+- ~~Clipboard writeText interception~~ ✅
+- ~~React SPA masking~~ ✅
+- ~~AWS dual-key capture~~ ✅
+- ~~Toast stacking~~ ✅
+- ~~E2E 測試 8 平台~~ ✅
+- Stripe / Slack / SendGrid 🔶

docs/10-active-key-capture.md

@@ -1,7 +1,8 @@
 # 主動式 API Key 網頁截取
 
-> 狀態：❌ 未來開發
-> 優先順序：中高（Phase 2 核心功能）
+> 狀態：✅ 已實作（Phase 5）
+> 8 平台 E2E 測試通過：GitHub, HuggingFace, GitLab, OpenAI, Anthropic, AI Studio, Google Cloud, AWS
+> 詳見 [支援平台清單](en/13-supported-platforms.md) 及 [平台截取策略](11-platform-specific-capture-strategies.md)
 
 ---
 

docs/11-platform-specific-capture-strategies.md

@@ -319,11 +319,14 @@ export interface CapturePattern {
 
 | 平台 | 截取 | 遮蔽 | Pre-hide | Toast | 存入 Core |
 |------|------|------|----------|-------|----------|
-| GitHub (Classic PAT) | ✅ | ✅ | ✅ | ✅ | ✅ |
-| HuggingFace | ✅ | ✅ | ✅ | ✅ | ✅ |
-| Anthropic/Claude | ✅ | ✅ | ✅ | ✅ | ✅ |
-| 測試頁面 | ✅ | ✅ | — | ✅ | ✅ |
-| OpenAI | ❓ 未測 | ❓ | ❓ | ❓ | ❓ |
+| GitHub (Classic PAT) | ✅ | ✅ masked | ✅ | ✅ | ✅ |
+| HuggingFace | ✅ | ✅ hidden | ✅ | ✅ | ✅ |
+| Anthropic/Claude | ✅ | ✅ hidden+masked | ✅ | ✅ | ✅ |
+| GitLab | ✅ | ✅ hidden (disc) | ✅ | ✅ | ✅ |
+| OpenAI | ✅ | ✅ hidden (React SPA) | ✅ | ✅ | ✅ |
+| AI Studio (Gemini) | ✅ clipboard | ✅ truncated | ✅ | ✅ | ✅ |
+| Google Cloud | ✅ | ✅ | ✅ | ✅ | ✅ |
+| AWS | ✅ dual-key | ✅ masked+clipboard | ✅ | ✅ stacked | ✅ |
 | Stripe | ❓ 未測 | ❓ | ❓ | ❓ | ❓ |
-| Google Cloud | ❓ 未測 | ❓ | ❓ | ❓ | ❓ |
-| AWS | ❓ 未測 | ❓ | ❓ | ❓ | ❓ |
+| Slack | ❓ 未測 | ❓ | ❓ | ❓ | ❓ |
+| SendGrid | ❓ 未測 | ❓ | ❓ | ❓ | ❓ |

docs/13-supported-platforms.md

@@ -0,0 +1,44 @@
+# 支援平台
+
+DemoSafe 目前支援以下平台的主動金鑰截取與遮蔽：
+
+| 平台 | Key Prefix | 截取方式 | 狀態 |
+|------|-----------|---------|------|
+| GitHub | `ghp_`, `github_pat_`, `gho_` | DOM 掃描 + 遮蔽 | ✅ 已測試 |
+| HuggingFace | `hf_` | Input 隱藏 + 截取 | ✅ 已測試 |
+| GitLab | `glpat-` | Input 輪詢 + 截取 | ✅ 已測試 |
+| OpenAI | `sk-proj-`, `sk-or-v1-` | Input 隱藏 (React SPA) | ✅ 已測試 |
+| Anthropic | `sk-ant-` | 文字隱藏 + 遮蔽 | ✅ 已測試 |
+| Google AI Studio | `AIzaSy` | 剪貼簿攔截 | ✅ 已測試 |
+| Google Cloud | `AIzaSy` | Dialog input 截取 | ✅ 已測試 |
+| AWS | `AKIA` + Secret Key | DOM 遮蔽 + 剪貼簿攔截 | ✅ 已測試 |
+| Stripe | `sk_live_`, `pk_live_`, `rk_live_` | Pattern 已定義 | ⏳ 未測試 |
+| Slack | `xoxb-`, `xoxp-`, `xapp-` | Pattern 已定義 | ⏳ 未測試 |
+| SendGrid | `SG.` | Pattern 已定義 | ⏳ 未測試 |
+
+## 新增平台支援
+
+API Key 的生態系統非常多元 — 數百個平台各有獨特的 key 格式、UI 結構和前端框架。我們無法內建支援所有平台。
+
+我們的架構採用 **Single Source of Truth** 設計：新增一個平台只需在 `capture-patterns.ts` 加一筆定義 + 在 `manifest.json` 加 URL match，不需修改其他程式碼。
+
+### 如何貢獻
+
+如果你使用的平台尚未支援，歡迎貢獻！
+
+1. **開 Issue** — 描述平台名稱、key 格式（prefix、長度）、顯示 key 的 URL。附上 key 建立流程的截圖會非常有幫助。
+
+2. **提交 PR** — 在 [`capture-patterns.ts`](../packages/chrome-extension/src/content-scripts/capture-patterns.ts) 加入新的 pattern 定義，並在 `manifest.json` 加入 URL match。
+
+3. **使用分析 Skill** — 如果你有 Claude Code，執行 `/analyze-platform <url>` 可以自動分析平台的 DOM 結構並生成 pattern 定義。
+
+### 平台特殊問題
+
+不同平台使用不同的前端框架和 key 顯示方式，常見挑戰：
+
+- **React / Vue SPA** — `input.value` 被框架覆蓋；key 必須透過 CSS 隱藏而非替換值
+- **Clipboard API** — 部分平台使用 `navigator.clipboard.writeText`；需要 MAIN world 腳本注入
+- **動態 class 名稱** — 混淆的 CSS class 每次 build 會改變；selector 必須使用穩定屬性（`role`, `data-*`, `aria-label`）
+- **子域名變化** — 如 AWS 使用區域子域名（`us-east-1.console.aws.amazon.com`）
+
+歡迎任何回饋、bug 報告或貢獻來擴展平台覆蓋範圍！

docs/README.md

@@ -18,6 +18,7 @@
 | `10-active-key-capture.md` | 主動式 API Key 網頁截取（Chrome Extension 自動偵測擷取） |
 | `11-platform-specific-capture-strategies.md` | 各平台 API Key 截取策略（DOM 結構、選擇器、實作計畫） |
 | `12-platform-scraper-toolkit.md` | Platform Scraper 開發者維護工具（CDP 探測 + pattern 自動更新） |
+| `13-supported-platforms.md` | 支援平台清單、貢獻指南、平台特殊問題 |
 
 ## 來源文件對照
 
@@ -39,5 +40,7 @@
 | 了解 Chrome Extension 架構 | [chrome-extension-architecture.md](02-technical-architecture/chrome-extension-architecture.md) |
 | 了解 VS Code Extension 架構 | [vscode-extension-architecture.md](02-technical-architecture/vscode-extension-architecture.md) |
 | 了解 Terminal Masking 方案 | [08-terminal-masking-research.md](08-terminal-masking-research.md) |
+| 了解主動截取功能 | [10-active-key-capture.md](10-active-key-capture.md) |
+| 查看支援平台 + 新增平台 | [13-supported-platforms.md](13-supported-platforms.md) |
 
 > 所有文件以繁體中文撰寫，技術名詞保留英文原文。

docs/en/01-product-spec/implementation-status.md

@@ -1,6 +1,6 @@
 # Implementation Status Tracking
 
-> Last updated: 2026-03-16
+> Last updated: 2026-03-17
 
 ## Status Legend
 
@@ -75,13 +75,26 @@
 | Options page | ✅ | Pattern cache management + Dev IPC Config |
 | Dev IPC Config (workaround) | ✅ | Alternative to Native Messaging Host |
 | Native Messaging Host | ❌ | Swift binary not compiled/deployed |
-| Smart Extract (scan web pages) | ❌ | Spec §6 |
-| Key detection (input/textarea) | 🔶 | detectAndSubmitKeys written but not tested |
+| Active Key Capture | ✅ | 4-layer detection: DOM scan → attribute → clipboard → platform selectors |
+| capture-patterns.ts (SSoT) | ✅ | 11 platform pattern definitions, single file maintenance |
+| Pre-hide anti-flash | ✅ | 3 layers: manifest CSS → pre-hide.ts → instant MutationObserver |
+| Per-platform CSS isolation | ✅ | 12 separate CSS files, generated at build time |
+| Clipboard writeText interception | ✅ | `clipboard-patch.ts` MAIN world, supports AI Studio/AWS/Stripe |
+| React SPA masking | ✅ | Dialog inputs stay hidden, no value replacement |
+| AWS dual-key capture | ✅ | Access Key ID (DOM) + Secret Key (clipboard) |
+| Toast stacking | ✅ | Consecutive captures show stacked toasts |
+| Capture Mode (popup) | ✅ | Start/Stop capture + countdown timer |
+| E2E tested (8 platforms) | ✅ | GitHub, HuggingFace, GitLab, OpenAI, Anthropic, AI Studio, Google Cloud, AWS |
+| Stripe / Slack / SendGrid | 🔶 | Patterns defined, untested |
 
 ### Fixed Issues
 
 - Content script initial state out of sync: Proactively requests `get_state` from background on load
 - `toggle_demo_mode` action incorrectly sending `get_state`: Fixed
+- GitLab 2026 redesign: selectors updated from `#created-personal-access-token` to `.gl-alert-success`
+- OpenAI React SPA: `input.value` overwritten by framework causing plaintext exposure, switched to CSS hiding
+- AWS Secret Key `trimmed` variable undefined: fixed to `text.trim()`
+- preHideCSS too broad: OpenAI `input[type="text"]` hid Name input, narrowed scope
 
 ---
 
@@ -127,3 +140,14 @@ Per Spec §9 Roadmap:
 - ~~WebSocket connection~~ ✅
 - ~~Content Script masking~~ ✅
 - ~~Toggle Demo Mode~~ ✅
+
+### Phase 5: Active Key Capture ✅
+- ~~capture-patterns.ts SSoT~~ ✅
+- ~~Per-platform CSS isolation~~ ✅
+- ~~Pre-hide anti-flash (3 layers)~~ ✅
+- ~~Clipboard writeText interception~~ ✅
+- ~~React SPA masking~~ ✅
+- ~~AWS dual-key capture~~ ✅
+- ~~Toast stacking~~ ✅
+- ~~E2E tested 8 platforms~~ ✅
+- Stripe / Slack / SendGrid 🔶

docs/en/10-active-key-capture.md

@@ -1,7 +1,8 @@
 # Active API Key Web Capture
 
-> Status: Future Development
-> Priority: Medium-High (Phase 2 Core Feature)
+> Status: ✅ Implemented (Phase 5)
+> 8 platforms E2E tested: GitHub, HuggingFace, GitLab, OpenAI, Anthropic, AI Studio, Google Cloud, AWS
+> See [Supported Platforms](13-supported-platforms.md) and [Platform Capture Strategies](../11-platform-specific-capture-strategies.md)
 
 ---
 

docs/en/README.md

@@ -16,6 +16,7 @@ This directory splits the original `.docx` specification documents into searchab
 | `08-terminal-masking-research.md` | Terminal Masking technical research (node-pty vs ANSI fg=bg vs hybrid approach) |
 | `09-api-key-rotation-best-practices.md` | API Key deployment and rotation best practices by platform, zero-downtime rotation patterns |
 | `10-active-key-capture.md` | Active API Key web capture (Chrome Extension auto-detection and capture) |
+| `13-supported-platforms.md` | Supported platforms table, contribution guide, and platform quirks |
 
 ## Source Document Mapping
 
@@ -37,5 +38,7 @@ This directory splits the original `.docx` specification documents into searchab
 | Understand Chrome Extension architecture | [chrome-extension-architecture.md](02-technical-architecture/chrome-extension-architecture.md) |
 | Understand VS Code Extension architecture | [vscode-extension-architecture.md](02-technical-architecture/vscode-extension-architecture.md) |
 | Understand Terminal Masking approaches | [08-terminal-masking-research.md](08-terminal-masking-research.md) |
+| Understand Active Key Capture | [10-active-key-capture.md](10-active-key-capture.md) |
+| See supported platforms + add new ones | [13-supported-platforms.md](13-supported-platforms.md) |
 
 > All documents are written in English. Traditional Chinese versions are available in the parent docs/ directory.