Decision Panel Component
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Decision Panel Component is a critical security and interaction interface within the Claude Cowork application. Its primary purpose is to provide users with explicit control over sensitive tool executions and to facilitate direct communication between the AI agent and the user via structured questionnaires. It acts as a gatekeeper that ensures the AI cannot perform restricted actions without human intervention.
The component serves two main roles: a Permission Gate for tool authorization (e.g., executing shell commands or editing files) and an Interactive Form for the AskUserQuestion tool. By surfacing tool inputs and request details, it allows the user to "Allow" or "Deny" requests, or provide specific answers to help the agent proceed with complex tasks.
Sources: src/ui/components/DecisionPanel.tsx:1-20, README_ZH.md:85-93
Component Architecture
The DecisionPanel is a functional React component that consumes a PermissionRequest and produces a PermissionResult. It is dynamically rendered within the message stream when the backend identifies a tool call requiring user approval or user input.
Integration Flow
The following diagram illustrates how the Decision Panel sits between the AI's tool request and the final execution result.
The component is instantiated inside EventCard.tsx when a tool_use message type is detected and requires permission.
Sources: src/ui/components/EventCard.tsx:244-255, src/ui/App.tsx:210-214
Functional Modes
The component operates in two distinct modes based on the toolName property of the incoming request.
1. Tool Permission Request
When the AI attempts to use tools like Bash, Edit, or Read, the panel displays a JSON representation of the proposed input. Users can either authorize the action or deny it with a message.
- Allow: Returns
behavior: "allow"along with the original tool input. - Deny: Returns
behavior: "deny"with a "User denied the request" message.
Sources: src/ui/components/DecisionPanel.tsx:143-169
2. Interactive Questionnaire (AskUserQuestion)
If the tool is AskUserQuestion, the panel transforms into a dynamic form builder. It supports multiple question types and input methods.
| Feature | Description | Source |
|---|---|---|
| Header | Optional category/header text for context. | DecisionPanel.tsx:75 |
| Options | Pre-defined labels and descriptions for selection. | DecisionPanel.tsx:82 |
| Multi-Select | Allows selecting multiple options, joined by commas. | DecisionPanel.tsx:50-58 |
| Other Input | Free-text field for custom answers not in options. | DecisionPanel.tsx:109-118 |
| Auto-Submit | Triggers immediately if there is only one non-multi-select question. | DecisionPanel.tsx:90-100 |
Sources: src/ui/components/DecisionPanel.tsx:11-124
Data Structures and Logic
Permission Request Structure
The component relies on the PermissionRequest type, which includes identifying information for the tool and the payload intended for execution.
// derived from types and implementation
type PermissionRequest = {
toolUseId: string;
toolName: string;
input: Record<string, any>;
};
Sources: src/ui/components/DecisionPanel.tsx:17-20, src/ui/components/EventCard.tsx:16-20
Interaction Sequence
The sequence below shows the lifecycle of a permission request through the Decision Panel.
State Management
The component manages internal state to track user selections and text inputs before final submission:
selectedOptions: A record mapping question indices to arrays of selected option labels.otherInputs: A record mapping question indices to raw string input for the "Other" field.canSubmit: A derived boolean that ensures at least one option or text input is provided for every question before allowing submission.
The state is automatically reset whenever the request.toolUseId changes, ensuring no data carry-over between different AI requests.
Sources: src/ui/components/DecisionPanel.tsx:26-47
Conclusion
The Decision Panel Component is the primary interface for human-in-the-loop (HITL) oversight in the Agent Cowork ecosystem. By standardizing how permissions and questions are presented, it ensures a secure execution environment while maintaining a fluid conversational experience between the user and the AI agent.
Sources: README_ZH.md:85-93, src/ui/components/DecisionPanel.tsx:160-170