Implement terminal approval UI system

Phase 1: Backend approval tracking
- Add PendingApprovalsManager class to track pending approvals
- Add approval-request, approval-response, approval-expired WebSocket handlers
- Add requestApproval() method to ClaudeCodeService
- Add event forwarding for approval requests

Phase 2: Frontend approval card component
- Create approval-card.js with interactive UI
- Create approval-card.css with styled component
- Add Approve, Custom Instructions, Reject buttons
- Add expandable custom command input

Phase 3: Wire up approval flow end-to-end
- Add handleApprovalRequest, handleApprovalConfirmed, handleApprovalExpired handlers
- Add detectApprovalRequest() to parse AI approval request patterns
- Integrate approval card into WebSocket message flow
- Route approval responses based on source (server vs AI conversational)

This allows the AI agent to request command approval through a clean
UI instead of confusing conversational text responses.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
2026-01-21 14:24:13 +00:00
Unverified
parent 153e365c7b
commit a45b71e1e4
7 changed files with 1564 additions and 15 deletions

View File

@@ -13,6 +13,7 @@
<link rel="stylesheet" href="/claude/claude-ide/components/monaco-editor.css">
<link rel="stylesheet" href="/claude/claude-ide/components/enhanced-chat-input.css">
<link rel="stylesheet" href="/claude/claude-ide/components/session-picker.css">
<link rel="stylesheet" href="/claude/claude-ide/components/approval-card.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<!-- Monaco Editor (VS Code Editor) - AMD Loader -->
@@ -345,6 +346,9 @@
</div>
<script src="/claude/claude-ide/error-monitor.js"></script>
<script src="/claude/claude-ide/semantic-validator.js"></script>
<script src="/claude/claude-ide/components/approval-card.js"></script>
<script src="/claude/claude-ide/command-tracker.js"></script>
<script src="/claude/claude-ide/bug-tracker.js"></script>
<script src="/claude/claude-ide/ide.js"></script>
<script src="/claude/claude-ide/chat-functions.js"></script>