# 策展 · X (Twitter) 🔥

> 作者：Aziz Becha (@azizbechaa) · 平台：X (Twitter) · 日期：2026-05-10

> 原始來源：https://x.com/azizbechaa/status/2052958269463810305

## 中文摘要

Aziz Becha 推出 Agent Device DevTools VS Code 擴充套件，完全相容 Cursor、VSCode 等編輯器。

Aziz Becha 發布開源的「Agent Device DevTools」VS Code 擴充套件，讓開發者能在 VSCode 環境中撰寫、執行與偵錯 [agent-device](https://incubator.callstack.com/agent-device) 的 `.ad` 腳本，風格類似 Vitest。[GitHub 程式庫](https://github.com/azizbecha/agent-device-vscode)

**撰寫支援**  
擴充套件提供 `.ad` 檔案的完整語法高亮，包括指令、`@eN` 參照、旗標、雙引號字串、` ${VAR}` 變數插值，以及 `#` 註解。  
- 自動補全指令、指令專屬旗標、`context` 金鑰（如 `platform=`、`timeout=`、`retries=`）、`find` 子動作  
- `${...}` 內變數補全，涵蓋內建 `AD_*` 變數及同檔案 `env` 定義名稱  
- `--platform` 或 `context platform=` 後建議 `android` / `ios`，其他值會報錯診斷  
- 指令、指令詞與旗標的懸停文件  

![指令補全](media/screenshots/command-completion.png)  
![變數補全](media/screenshots/variable-completion.png)

**執行介面**  
底部面板的「Run Output」檢視開啟 workspace 範圍的 `.ad` 檔案選擇器，點選檔案即可執行，每步即時顯示：待執行圓圈 → 旋轉 → 綠色 ✓ / 紅色 ✗ / 灰色略過，附即時持續時間計數器。  
- 點擊任一步驟列（通過/失敗/執行中）展開 stdout、stderr 或錯誤區塊，每區塊有複製按鈕  
- 「Stop」按鈕立即終止執行中子程序（轉發 `AbortSignal` 至 `agent-device`）  
- 每行動作上方 CodeLenses：`▶ Run`（僅該行）與 `▶ Run up to here`  
- 原生側邊欄測試圖示：每行視為子 `TestItem` 帶 `range`，執行後顯示通過/失敗圖示  
- Test Explorer 整合：每個 `.ad` 檔案作為 `TestItem`，無論從面板、CodeLens、命令面板或側邊欄執行，皆同步反映 Testing 檢視狀態  

![即時步驟執行與測試結果串流](media/screenshots/run-live.png)  
![Test Explorer 與 Run Output 面板](media/screenshots/test-explorer.png)

**範本功能**  
「+ New」開啟 QuickPick 選擇 9 種啟動範本：空檔案、iOS/Android Settings 煙霧測試、登入流程、搜尋與斷言、滾動探索、滑動手勢、視覺基線、React Native (Metro)。  

![範本選擇器](media/screenshots/templates.png)

**裝置管理**  
「Devices」檢視列出所有 iOS 模擬器與 Android AVD，按平台分組，已開機項目優先。  
- 懸停時顯示 Boot / Shut down 圖示，亦可右鍵選單或命令面板操作  
- iOS 直接呼叫 `xcrun simctl`；Android 使用 `emulator -avd` + `adb emu kill`，確保獨立裝置控制不受 daemon 工作階段鎖定影響  

**報告生成**  
每次執行產生獨立 HTML 報告，儲存至 `<workspace>/.agent-device-reports/<iso-timestamp>/`。  
報告具固定工具列：**搜尋**（`/` 聚焦）、**狀態篩選藥丸**（All / Passed / Failed / Skipped 附計數）、**全部展開 / 全部收合**；每步有 Copy 指令 + stdout/stderr 複製按鈕；自動偵測淺/深色模式；純 HTML/CSS/JS，無外部 asset，可壓縮資料夾分享。

**開發安裝**  
```bash
npm install
npm run watch
```  
按 `F5` 啟動 Extension Development Host，開啟含 `.ad` 檔案的資料夾，點擊底部面板「Agent Device」分頁。

**封裝安裝**  
```bash
npm run package    # 產生 agent-device-devtools-<version>.vsix
code --install-extension agent-device-devtools-<version>.vsix
```

**設定選項**  
經齒輪圖示、「Agent Device: Open Settings」命令面板或 VSCode 設定 UI（篩選 `agentDevice`）開啟，使用者級設定全域適用，workspace 級覆蓋專案專屬。  

| 設定                               | 預設值          | 用途                                                                                      |
| ----------------------------------- | --------------- | -------------------------------------------------------------------------------------------- |
| `agentDevice.cliPath`               | bundled         | 覆蓋 `agent-device` 二進位路徑，適合開發本地 checkout。                                     |
| `agentDevice.session`               | `vscode`        | 重播執行使用的 daemon 工作階段名稱。                                                        |
| `agentDevice.androidSdkPath`        | `$ANDROID_HOME` | 覆蓋 Android SDK 位置，用於尋找 `adb` 與 `emulator`。                                       |
| `agentDevice.report.enabled`        | `true`          | 在 `.agent-device-reports/` 生成 HTML 報告。                                                |
| `agentDevice.notifications.enabled` | `true`          | 顯示成功/失敗彈出通知（狀態列藥丸永遠顯示）。                                               |

**架構設計**  
```
src/
  extension.ts                — 啟用；串聯所有組件
  data/                       — 靜態目錄（指令、範本、平台、變數）
  diagnostics/                — 平台值驗證器
  panels/                     — RunOutputPanel（webview、列表 + 執行檢視）
  providers/                  — 補全、懸停、codelens
  reports/                    — HtmlReportWriter + reportTemplate
  runners/                    — ReplayRunner（事件發射器）、CliRunner、scriptParser
  services/                   — AdFileIndex、DeviceCatalog、AgentDeviceConfig
  testing/                    — AgentDeviceTestController（TestRun 鏡像）
  views/                      — DeviceTreeProvider
  util/                       — duration / pluralize 輔助
media/
  agent-device.svg            — 活動列圖示
  runOutput.css               — webview 樣式（經 webview.asWebviewUri 載入）
syntaxes/
  agent-device.tmLanguage.json
examples/
  demo.ad
```  
執行器每步獨立啟動 `agent-device` CLI（取消即殺死子程序），自行解析 `.ad` 進行變數插值與步驟事件，發射類型化事件串流供所有 UI 消費。CI 建置通過，[MIT 授權](LICENSE)，發行記錄見 `CHANGELOG.md`，發佈文件在 `PUBLISHING.md`。

## 標籤

IDE, 開源專案, Agent, Agent Device, VS Code, Cursor