工具權限確認卡

放在對話訊息流裡、代理要執行有副作用的工具之前出現的授權卡。卡片列出工具名、風險等級、一句話說明與參數摘要，底部提供「拒絕」「永遠允許此工具」「允許」三個選擇；做出決定後，參數區與按鈕列淡出收起，整張卡以 layout 動畫收合成一行紀錄（「已允許：寫入檔案 · src/notes/今日.md」），點一下可重新展開檢視參數。高風險工具會加上紅色色帶、隱藏「永遠允許」並把預設焦點放在「拒絕」；也可以設定倒數秒數，逾時自動視為拒絕。和顯示「執行狀態」的工具呼叫卡互補，這張卡負責「執行前的授權」。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<ToolPermissionCard/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/tool-permission-card.json

使用

import { ToolPermissionCard } from "@/components/ui/tool-permission-card";

<ToolPermissionCard
  toolName="寫入檔案"
  description="代理想在專案中建立一個新檔案"
  risk="low"
  params={[
    { label: "路徑", value: "src/notes/今日.md", mono: true },
    { label: "大小", value: "1.2 KB" },
  ]}
  onDecision={async (decision) => {
    // 把授權結果送回你的代理執行環境；reject 會讓卡片維持待決定
    await sendToAgent({ tool: "write_file", decision });
  }}
/>

Props

ToolPermissionStatus 為 "pending" \| "allowed" \| "denied" \| "always"。

ToolPermissionParam

細節

• 收合動畫：決定瞬間參數區與按鈕列以 AnimatePresence 退場（透明度與高度歸零），外層 motion.div 帶 layout，在 collapseDuration 內以 easeInOut 收成一行；結果圖示（✓／✕／∞）以 spring 從 0.6 倍彈到原尺寸，顏色依結果為 emerald／red／sky。
• 收合後的紀錄列是一顆按鈕，點擊可展開檢視說明與參數；展開內容唯讀，決定不可更改。
• onDecision 回傳 Promise 時，被按下的按鈕顯示 spinner 並設定 aria-busy，其他按鈕暫停使用；Promise reject 時卡片維持待決定，可再按一次。
• expiresIn 倒數以卡片底部的細進度條呈現，最後四分之一轉紅；歸零時呼叫 onDecision("deny") 並收合為「已拒絕」。
• 按鈕 hover 過渡與展開箭頭的旋轉都使用 --wb-tool-permission-card-duration，可在全域覆寫。

可及性

• 卡片為 role="group"，以 aria-labelledby 指向工具名
• 待決定時，焦點在卡片內按 Escape 拒絕；焦點不在按鈕上時按 Enter 允許（焦點在按鈕上時 Enter 交給該按鈕），並含 IME 組字保護
• 預設聚焦「允許」，高風險時改為聚焦「拒絕」，降低誤按的代價；聚焦時不捲動頁面，訊息流裡有多張卡時可用 autoFocus={false} 關閉
• 決定後焦點移到收合後的紀錄列（若決定時焦點在卡片內），紀錄列以 aria-expanded 標示展開狀態，並以 aria-live="polite" 宣告「已允許寫入檔案」等結果
• 倒數進度條對輔助科技隱藏，剩餘秒數以 sr-only 文字提供
• 使用者系統開啟「減少動態效果」時，收合不做高度與 layout 動畫、紀錄列以 120ms 淡入直接切換，結果圖示不彈跳，倒數進度條改為數字顯示