Claude Code 對(duì)話框/彈窗 UI 樣式匯總小結(jié)
我要評(píng)論會(huì)話過(guò)程中，所有對(duì)話框由 focusedInputDialog 控制，按優(yōu)先級(jí)依次彈出。以下是完整列表。
一、權(quán)限類對(duì)話框
1. 工具權(quán)限確認(rèn) (tool-permission)
觸發(fā)時(shí)機(jī)： 工具（Bash、Write、Read 等）需要用戶批準(zhǔn)時(shí)
UI 描述：
根據(jù)工具類型分發(fā)到不同的權(quán)限子組件：
- BashPermissionRequest — 顯示待執(zhí)行的 shell 命令、工作目錄、以
$開(kāi)頭的命令預(yù)覽 - FileEditPermissionRequest — 顯示文件路徑、diff 變更內(nèi)容（
+11/-22顏色標(biāo)記） - WebFetchPermissionRequest — 顯示目標(biāo) URL
通用結(jié)構(gòu)：
- 覆蓋層（Overlay），阻止主交互
- 工具名稱標(biāo)簽
- 操作描述/預(yù)覽區(qū)域
- 底部分配
<Select>選項(xiàng)："Allow"、"Allow and don't ask again"、"Deny" - Escape 拒絕、Enter 確認(rèn)
組件： PermissionRequest.tsx → 分發(fā)到 BashPermissionRequest / FileEditPermissionRequest 等
2. Sandbox 網(wǎng)絡(luò)權(quán)限 (sandbox-permission)
觸發(fā)時(shí)機(jī)： 工具（WebFetch 等）請(qǐng)求訪問(wèn)外部網(wǎng)絡(luò)時(shí)
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ Network request outside of sandbox │ │ │ │ Host: api.example.com │ (dim) │ │ │ Do you want to allow this connection? │ │ │ │ > Yes │ │ Yes, and don't ask again for api.example.com │ │ No, and tell Claude what to do differently (esc) │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 主機(jī)名以 dim 顏色顯示
- 選項(xiàng)：Allow / Allow + 記住 / Deny + 引導(dǎo)
組件： SandboxPermissionRequest.tsx
3. Worker Sandbox 權(quán)限 (worker-sandbox-permission)
觸發(fā)時(shí)機(jī)： Swarm worker 子代理請(qǐng)求網(wǎng)絡(luò)訪問(wèn)，等待 leader 審批
UI 描述： 與 sandbox-permission 結(jié)構(gòu)相同，但通過(guò) mailbox 協(xié)議跨進(jìn)程響應(yīng)。選項(xiàng)通過(guò) sendSandboxPermissionResponseViaMailbox 發(fā)送回 worker。
組件： SandboxPermissionRequest.tsx（同一組件）
4. Worker 等待中指示器 (非阻塞)
觸發(fā)時(shí)機(jī)： Sub-agent 正在等待 leader 批準(zhǔn)權(quán)限時(shí)顯示
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ ? Waiting for team lead approval │ (warning, bold) │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ │ Tool: WebFetchTool │ (dim) │ Action: Fetch https://api.example.com/data │ (dim) │ Permission request sent to team "my-team" leader │ └──────────────────────────────────────────────────────────────────┘
- 圓角邊框 (
borderStyle="round",borderColor="warning") - 頂部 Spinner + 警告顏色粗體文字
- WorkerBadge（代理名稱 + 顏色）
組件： WorkerPendingPermission.tsx
二、交互輸入類對(duì)話框
5. Hook Prompt 對(duì)話框 (prompt)
觸發(fā)時(shí)機(jī)： Hook 返回 type: "prompt" 需要用戶選擇
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ [title] [info] │ │ │ │ Request message here... │ │ [tool summary] │ (dim) │ │ │ > Option 1 │ │ Option 2 │ │ Option 3 │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 標(biāo)題 + 副標(biāo)題（請(qǐng)求消息）
- 右側(cè)可選的 toolInputSummary（dim 顏色）
<Select>選項(xiàng)列表，映射自 hook 返回的request.options- 支持
app:interrupt快捷鍵中止
組件： PromptDialog.tsx
6. MCP Elicitation 對(duì)話框 (elicitation)
觸發(fā)時(shí)機(jī)： MCP 服務(wù)器請(qǐng)求用戶輸入（表單、URL 確認(rèn)、等待完成）
UI 描述： 三種模式：
表單模式：
┌──────────────────────────────────────────────────────────────────┐ │ MCP server "serverName" requests your input │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ Text input field... │ │ │ └──────────────────────────────────────────────────────────┘ │ │ ○ Option A ○ Option B ○ Option C │ │ ? Checkbox option │ │ │ │ [Accept] [Decline] │ └──────────────────────────────────────────────────────────────────┘
- 動(dòng)態(tài)表單字段：文本輸入、單選/多選枚舉、布爾值、日期/時(shí)間選擇器
- 驗(yàn)證錯(cuò)誤信息
- 內(nèi)聯(lián)快捷鍵提示
等待模式： 域名 + Spinner + "Reload / Open in Browser / Close"
URL 確認(rèn)： "MCP server wants to open a URL" + Accept/Decline
組件： ElicitationDialog.tsx（~1169 行，大型表單引擎）
三、會(huì)話管理類對(duì)話框
7. 成本閾值對(duì)話框 (cost)
觸發(fā)時(shí)機(jī)： 當(dāng)前會(huì)話 API 費(fèi)用達(dá)到閾值時(shí)
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ You've spent $5 on the Anthropic API this session. │ │ │ │ Learn more about how to monitor your spending: │ │ code.claude.com/docs/en/costs │ (link) │ │ │ > Got it, thanks! │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<Dialog>中 - 顯示當(dāng)前會(huì)話消費(fèi)金額
- 提供費(fèi)用監(jiān)控文檔鏈接
- 單一確認(rèn)選項(xiàng)，確認(rèn)后設(shè)置
hasAcknowledgedCostThreshold: true
組件： CostThresholdDialog.tsx
8. 閑置返回對(duì)話框 (idle-return)
觸發(fā)時(shí)機(jī)： 用戶長(zhǎng)時(shí)間離開(kāi)后返回時(shí)
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ You've been away 25m and this conversation is 45K tokens. │ │ │ │ If this is a new task, clearing context will save usage and │ │ be faster. │ │ │ │ > Continue this conversation │ │ Send message as a new conversation │ │ Don't ask me again │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<Dialog>中 - 顯示離開(kāi)時(shí)長(zhǎng) + 當(dāng)前 token 數(shù)
- 三選一：繼續(xù) / 清空后發(fā)送 / 不再提示
組件： IdleReturnDialog.tsx
四、新功能引導(dǎo)類對(duì)話框
9. IDE 集成引導(dǎo) (ide-onboarding)
觸發(fā)時(shí)機(jī)： 首次檢測(cè)到 IDE 擴(kuò)展時(shí)
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ ? Welcome to Claude Code for Visual Studio Code │ │ │ │ installed extension v1.2.3 │ (dim) │ │ │ ? Claude has context about your open files and selected lines │ │ ? View code diffs in your IDE +11 / -22 │ (diff colors) │ ? Cmd+Esc to quickly launch │ │ ? Cmd+Option+K to send selection │ │ │ │ Press Enter to continue │ └──────────────────────────────────────────────────────────────────┘
<Dialog>顏色 theme"ide"- 項(xiàng)目符號(hào)列表介紹 IDE 集成功能
- 差異標(biāo)記顏色展示 diff 指示
- Enter/Escape 關(guān)閉
組件： IdeOnboardingDialog.tsx
10. Effort 選擇引導(dǎo) (effort-callout)
觸發(fā)時(shí)機(jī)： 首次使用 Opus 模型時(shí)（新功能引導(dǎo)）
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ Choose your effort level │ │ │ │ Description text explaining what effort level means... │ │ │ │ low · medium · high │ (effort indicators) │ │ │ > ● Medium (recommended) │ │ ●●● High │ │ ○ Low │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 30 秒自動(dòng)消失計(jì)時(shí)器
- 三級(jí) effort 選擇
組件： EffortCallout.tsx
11. 遠(yuǎn)程控制引導(dǎo) (remote-callout)
觸發(fā)時(shí)機(jī)： 首次啟用 Bridge/遠(yuǎn)程控制時(shí)
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ Remote Control │ │ │ │ Description text explaining how remote control works... │ │ Your CLI session can be accessed from the web or other apps. │ │ │ │ > Enable Remote Control for this session │ │ Never mind │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 僅顯示一次（選擇自動(dòng)持久化）
組件： RemoteCallout.tsx
12. Ultraplan 選擇對(duì)話框 (ultraplan-choice)
觸發(fā)時(shí)機(jī)： 生成執(zhí)行計(jì)劃后，詢問(wèn)用戶是否繼續(xù)
UI 描述： 顯示遠(yuǎn)程執(zhí)行計(jì)劃內(nèi)容供用戶審查/批準(zhǔn)。內(nèi)置獨(dú)立滾動(dòng)（不與主 ScrollBox 聯(lián)動(dòng)）。接收 plan、sessionId、taskId 等回調(diào)。
組件： UltraplanChoiceDialog（非獨(dú)立組件文件，REPL.tsx 內(nèi)聯(lián)使用）
13. Ultraplan 啟動(dòng)對(duì)話框 (ultraplan-launch)
觸發(fā)時(shí)機(jī)： 用戶確認(rèn)后，啟動(dòng) Ultraplan 遠(yuǎn)程執(zhí)行前
UI 描述： 觸發(fā) ultraplan 命令，回聲顯示公告行，傳遞斷開(kāi)連接橋接選項(xiàng)，遠(yuǎn)程會(huì)話就緒時(shí)附加狀態(tài)更新。
組件： UltraplanLaunchDialog（非獨(dú)立組件文件，REPL.tsx 內(nèi)聯(lián)使用）
五、推薦/推廣類對(duì)話框
14. LSP 插件推薦 (lsp-recommendation)
觸發(fā)時(shí)機(jī)： 檢測(cè)到未安裝 LSP 的文件類型時(shí)
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ LSP Plugin Recommendation │ │ │ │ LSP provides code intelligence like go-to-definition and error │ │ checking. │ │ │ │ Plugin: @anthropic/lsp-rust │ (dim) │ Triggered by: .rs files │ (dim) │ │ │ Would you like to install this LSP plugin? │ │ │ │ > Yes, install @anthropic/lsp-rust │ (bold) │ No, not now │ │ Never for @anthropic/lsp-rust │ │ Disable all LSP recommendations │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 30 秒自動(dòng)消失（視為拒絕）
組件： LspRecommendationMenu.tsx
15. 插件提示 (plugin-hint)
觸發(fā)時(shí)機(jī)： 外部命令建議安裝插件時(shí)
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ Plugin Recommendation │ │ │ │ The "my-command" command suggests installing a plugin. │ │ │ │ Plugin: my-plugin │ (dim) │ Marketplace: official │ (dim) │ │ │ Would you like to install it? │ │ │ │ > Yes, install my-plugin │ │ No │ │ No, and don't show plugin installation hints again │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 30 秒自動(dòng)消失
組件： PluginHintMenu.tsx
16. Desktop 升級(jí)引導(dǎo) (desktop-upsell)
觸發(fā)時(shí)機(jī)： 最多 3 次啟動(dòng)時(shí)提示升級(jí)到桌面版
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ Try Claude Code Desktop │ │ │ │ Same Claude Code with visual diffs, live app preview, parallel │ │ sessions, and more. │ │ │ │ > Open in Claude Code Desktop │ │ Not now │ │ Don't ask again │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 選擇 "Open in Desktop" 后切換到
<DesktopHandoff>子組件
組件： DesktopUpsellStartup.tsx
六、消息操作類
17. 消息選擇器 / Rewind (message-selector)
觸發(fā)時(shí)機(jī)： 用戶按 Ctrl+O 或選擇回退消息時(shí)
UI 描述：
─── Rewind ────────────────────────────────────────────────────────── (color: suggestion)
> #1 "Add error handling to the login flow" +5 / -2 (file changes)
#2 "Fix the bug in user authentication" +3 / -1
#3 "Refactor the database schema" (no changes)
(code rollback warning)
Restore code and conversation
Restore conversation
Summarize from here: [____________________________]
Never mind
──────────────────────────────────────────────────────────────────────
- 非對(duì)話框包裝器，內(nèi)聯(lián)選擇器
- 標(biāo)題 "Rewind"（
color="suggestion"） - 每個(gè)用戶消息顯示文件變更統(tǒng)計(jì)
- 代碼回滾警告
- 底部恢復(fù)/摘要選項(xiàng)
- 確認(rèn)模式顯示差異統(tǒng)計(jì)
組件： MessageSelector.tsx
七、Ant 內(nèi)部版（外部構(gòu)建不可見(jiàn)）
18. 模型切換引導(dǎo) (model-switch)
條件編譯： "external" === 'ant' 時(shí)存在
- 提示用戶切換模型
onDone(selection, modelAlias?)回調(diào)可用于切換mainLoopModel
組件： AntModelSwitchCallout
19. Undercover 模式引導(dǎo) (undercover-callout)
條件編譯： "external" === 'ant' 時(shí)存在
- 解釋 Undercover 自動(dòng)啟用
- 簡(jiǎn)單解除回調(diào)
組件： UndercoverAutoCallout
優(yōu)先級(jí)總結(jié)
對(duì)話框按以下優(yōu)先級(jí)彈出（高→低）：
| 優(yōu)先級(jí) | 對(duì)話框 | 條件 |
|---|---|---|
| ?? 最高 | message-selector | 用戶主動(dòng)打開(kāi) |
| 1 | sandbox-permission | 網(wǎng)絡(luò)權(quán)限請(qǐng)求 |
| 2 | tool-permission | 工具權(quán)限請(qǐng)求 |
| 3 | prompt | Hook prompt 交互 |
| 4 | worker-sandbox-permission | Worker 網(wǎng)絡(luò)權(quán)限 |
| 5 | elicitation | MCP 表單輸入 |
| 6 | cost | 費(fèi)用閾值提示 |
| 7 | idle-return | 閑置返回 |
| 8 | ultraplan-choice | Ultraplan 計(jì)劃選擇 |
| 9 | ultraplan-launch | Ultraplan 啟動(dòng) |
| 10 | ide-onboarding | IDE 引導(dǎo) |
| 11 | model-switch | 模型切換（ant-only） |
| 12 | undercover-callout | Undercover 引導(dǎo)（ant-only） |
| 13 | effort-callout | Effort 選擇引導(dǎo) |
| 14 | remote-callout | 遠(yuǎn)程控制引導(dǎo) |
| 15 | lsp-recommendation | LSP 插件推薦 |
| 16 | plugin-hint | 插件建議 |
| ?? 最低 | desktop-upsell | 桌面版推廣 |
用戶輸入時(shí)高優(yōu)先級(jí)對(duì)話框會(huì)暫緩彈出（hasSuppressedDialogs），輸入完成后恢復(fù)。
到此這篇關(guān)于Claude Code 對(duì)話框/彈窗 UI 樣式匯總小結(jié)的文章就介紹到這了,更多相關(guān)Claude Code 對(duì)話框/彈窗 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
本文總結(jié) Claude Code / 本倉(cāng)庫(kù)恢復(fù)版 claude-code 中 hooks 的類型、觸發(fā)時(shí)機(jī)、典型使用場(chǎng)景、配置方式與注意事項(xiàng), 下面就來(lái)詳細(xì)的介紹一下，感興趣的可以了解2026-06-04
Hooks 是用戶自定義的腳本/命令，在 Claude Code 的特定生命周期節(jié)點(diǎn)自動(dòng)執(zhí)行,支持 4 種類型、4 個(gè)生命周期事件,下面小編就和大家詳細(xì)介紹一下Hook這四種類型的具體使用吧2026-06-04
一文總結(jié)Claude Code開(kāi)發(fā)中的常見(jiàn)問(wèn)題與解決方案
Claude Code 作為 Anthropic 推出的 AI 編程助手，在提升開(kāi)發(fā)效率的同時(shí)，也會(huì)在安裝、配置、使用等多個(gè)環(huán)節(jié)遇到各類問(wèn)題,本文整理了用戶在使用過(guò)程中最常碰到的問(wèn)題，按類2026-06-04
這篇文章記錄如何在 Windows 上安裝 Claude Code，并配置 MiniMax 的 Claude Code 兼容接口,以后自己重裝，或者委托具備本機(jī)終端與文件操作能力的 AI Agent 代為部署時(shí)，可2026-06-03
使用Claude Code高效實(shí)現(xiàn)圖像邊緣檢測(cè)的實(shí)踐指南
邊緣檢測(cè)是計(jì)算機(jī)視覺(jué)領(lǐng)域最基礎(chǔ)也最實(shí)用的技術(shù)之一,從人臉識(shí)別、自動(dòng)駕駛的車道線檢測(cè)，到工業(yè)產(chǎn)品的缺陷識(shí)別，邊緣檢測(cè)都是核心預(yù)處理環(huán)節(jié),本文將分享我使用 Python + Op2026-06-03
其實(shí) Claude Code 內(nèi)置了很多斜杠命令，輸入/就能看到完整的命令列表,這些命令覆蓋了會(huì)話管理、上下文控制、并行協(xié)作等方方面面，用好了能省很多事，下面小編就和大家詳細(xì)2026-06-03
Claude Code Hooks 選裝實(shí)戰(zhàn)指南
Claudede Hooks實(shí)戰(zhàn)指南,涵蓋三級(jí)攔截體系,兩腳本開(kāi)箱即用,覆蓋致命、高風(fēng)險(xiǎn)、警告三級(jí)操作,通過(guò)配置settings.json靈活定制攔截策略,支持PowerShell與原生Toast通知,適用于2026-06-03
Claude Code接入DeepSeek V4的兩種方法完整配置指南(2026最新)
Claude Code 是目前最好用的 AI 編程 Agent，但它默認(rèn)只用 Anthropic 的模型，價(jià)格不便宜，本文主要介紹了Claude Code接入DeepSeek V4的兩種方法，有需要的小伙伴可以了解2026-06-03
Claude Code常見(jiàn)報(bào)錯(cuò)排查指南及解決方法
Claude Code 是目前最強(qiáng)大的命令行 AI 編程助手之一，但從安裝、配置到日常使用，尤其是在接入國(guó)內(nèi)大模型 API 時(shí)，開(kāi)發(fā)者總會(huì)遇到形形色色的報(bào)錯(cuò),本文以階段為線索，系統(tǒng)梳2026-06-02- Claude Code 每次調(diào)用工具、等待輸入、結(jié)束會(huì)話，都會(huì)觸發(fā)對(duì)應(yīng)的Hook生命周期事件,Hook 腳本除了做判斷和記錄，還可以把事件轉(zhuǎn)發(fā)到本地 socket，讓一個(gè)常駐進(jìn)程處理所有狀2026-06-02
