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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user