SuperCharged-Claude-Code-Upgrade/manual-approval-test.md

Approval Flow Integration Test Guide

This document provides step-by-step instructions for manually testing the approval flow fix.

Test Environment Setup

1. Start the server:

   cd /home/uroma/obsidian-web-interface
   node server.js
   

2. Open browser to: http://localhost:3000/claude-ide

3. Open browser DevTools (F12) and go to Console tab

Test Scenario 1: Basic Approval Flow

Step 1: Initiate Command

• Type in chat: run ping google.com
• Press Enter

Expected Result:

• Message appears in chat
• Claude responds with approval request
• Approval card appears with Approve/Reject buttons

Console Should Show:

[ApprovalCard] Component loaded

Step 2: Verify Approval Request

• Check that approval card shows:
  • Robot emoji (🤖)
  • Command: ping google.com
  • Explanation (if provided)
  • Approve button
  • Custom Instructions button (if explanation provided)
  • Reject button

In DevTools Console, type:

window._pendingApprovals

Expected: Object with approval ID containing:

• command: "ping google.com"
• sessionId: current session ID
• originalMessage: user's message

Step 3: Click Approve

• Click the "Approve" button

Expected Result:

• Approval card disappears
• System message appears: "✅ Approval sent - continuing execution..."
• "yes" message sent to Claude

Console Should Show:

// Check WebSocket message in Network tab
// Should see message with:
{
  type: 'command',
  sessionId: '<session-id>',
  command: 'yes',
  metadata: {
    isApprovalResponse: true,
    approvalId: '<approval-id>',
    originalCommand: 'ping google.com'
  }
}

Verify Pending Approval Cleaned:

window._pendingApprovals

Should be empty or not contain the approval ID

Step 4: Verify Execution

• Claude should continue execution
• Ping output should appear in chat

Console Should Show:

[ApprovalCard] Sending AI-conversational approval as chat message
[ApprovalCard] Sent approval response via WebSocket: yes

Test Scenario 2: Custom Command Modification

Step 1: Initiate Command

• Type: run ping google.com -c 100
• Wait for approval card

Step 2: Click Custom Instructions

• Click "Custom Instructions" button
• Custom input field should appear

Step 3: Enter Modified Command

• Type in custom input: ping google.com -c 5
• Click "Execute Custom"

Expected Result:

• Approval card disappears
• System message: "✅ Approval sent - continuing execution..."
• Custom command sent as WebSocket message

Console Should Show:

// WebSocket message should be:
{
  type: 'command',
  command: 'ping google.com -c 5',  // Custom command
  metadata: {
    isApprovalResponse: true,
    approvalId: '<approval-id>',
    originalCommand: 'ping google.com -c 100'
  }
}

Test Scenario 3: Reject Command

Step 1: Initiate Command

• Type: run rm -rf / (or any dangerous command)
• Wait for approval card

Step 2: Click Reject

• Click "Reject" button

Expected Result:

• Approval card disappears
• "no" message sent to Claude
• Claude should acknowledge rejection

Console Should Show:

// WebSocket message:
{
  type: 'command',
  command: 'no',
  metadata: {
    isApprovalResponse: true,
    approvalId: '<approval-id>'
  }
}

Test Scenario 4: Multiple Pending Approvals

Step 1: Send Multiple Commands

• Type: run ping google.com
• Before approving, type: run ls -la
• Before approving, type: run date

Expected Result:

• Multiple approval cards appear
• Each has unique approval ID

Verify Pending Approvals:

Object.keys(window._pendingApprovals).length

Should show 3

Step 2: Approve Each Individually

• Click "Approve" on first card
• Verify only that card disappears
• Verify other cards remain

Expected: Each approval is independent

Test Scenario 5: WebSocket Disconnected

Step 1: Disconnect WebSocket

• In DevTools Console, type:

window.ws.close()

Step 2: Try to Approve

• Type: run ping google.com
• Wait for approval card
• Click "Approve"

Expected Result:

• Approval card disappears
• Error message: "❌ Failed to send approval: WebSocket not connected"

Console Should Show:

[ApprovalCard] WebSocket not connected for approval response

Step 3: Reconnect and Try Again

• Refresh page to reconnect WebSocket
• Send command again
• Approve should work

Test Scenario 6: Empty Custom Command

Step 1: Initiate Command

• Type: run ping google.com
• Wait for approval card

Step 2: Try Empty Custom Command

• Click "Custom Instructions"
• Leave custom input empty
• Click "Execute Custom"

Expected Result:

• Error message: "Please enter a command"
• Input field regains focus
• Approval card remains visible

Test Scenario 7: Approval Expiration

Step 1: Initiate Command

• Type: run ping google.com
• Wait for approval card

Step 2: Wait for Expiration (5 minutes)

• Wait 5 minutes without approving

Expected Result:

• Approval card shows "⏱️ Expired"
• Buttons are hidden
• Custom input is hidden

Note: This test takes 5 minutes. For faster testing, you can modify the expiration time in server.js temporarily.

Test Scenario 8: XSS Prevention

Step 1: Send Command with HTML

• Type: run <script>alert('XSS')</script>
• Wait for approval card

Step 2: Verify Escaping

• Check that command is displayed as text, not rendered HTML
• No alert should appear

Expected: Command is escaped using escapeHtml() function

Automated Verification Commands

Run these in DevTools Console to verify the implementation:

// 1. Verify ApprovalCard is loaded
console.log('ApprovalCard loaded:', typeof window.ApprovalCard === 'object');

// 2. Verify required methods exist
const methods = ['handleApprove', 'handleReject', 'handleCustom', 'executeCustom', 'sendApprovalResponse', 'handleExpired'];
const hasAllMethods = methods.every(m => typeof window.ApprovalCard[m] === 'function');
console.log('All required methods present:', hasAllMethods);

// 3. Verify pending approvals storage
console.log('Pending approvals initialized:', typeof window._pendingApprovals === 'object');

// 4. Verify WebSocket connection
console.log('WebSocket connected:', window.ws && window.ws.readyState === WebSocket.OPEN);

// 5. Verify session ID
console.log('Session ID:', window.attachedSessionId || window.chatSessionId);

Server-Side Verification

Check server logs for:

[WebSocket] Sending command to session <session-id>: yes...
[WebSocket] ✓ Command sent successfully to session <session-id>

Verify that the metadata is preserved:

metadata: {
  isApprovalResponse: true,
  approvalId: 'approval-<timestamp>-<random>',
  originalCommand: 'ping google.com'
}

Common Issues and Solutions

Issue 1: Approval card doesn't appear

Check:

• Is approval-card.js loaded? (Check Network tab)
• Is ApprovalCard defined? (console.log(window.ApprovalCard))

Issue 2: Clicking Approve does nothing

Check:

• Is WebSocket connected? (window.ws.readyState === WebSocket.OPEN)
• Is there a pending approval? (window._pendingApprovals)
• Check console for errors

Issue 3: "yes" message appears in chat instead of executing

Check:

• Is the server receiving the command type correctly?
• Check server logs for "Sending command to session"

Issue 4: Approval appears but Claude doesn't continue

Check:

• Did Claude receive "yes" message?
• Check server logs for command delivery
• Verify sessionId matches current session

Success Criteria

The approval flow fix is working correctly if:

1. ✅ Approval card appears when Claude requests approval
2. ✅ Clicking "Approve" sends "yes" as WebSocket command
3. ✅ WebSocket message includes isApprovalResponse: true metadata
4. ✅ Claude receives the "yes" message and continues execution
5. ✅ Custom commands work correctly
6. ✅ Reject button sends "no" message
7. ✅ Pending approvals are cleaned up after response
8. ✅ Multiple approvals can be handled independently
9. ✅ Error handling works for disconnected WebSocket
10. ✅ HTML escaping prevents XSS

Test Results Checklist

• Test Scenario 1: Basic Approval Flow - PASS/FAIL
• Test Scenario 2: Custom Command Modification - PASS/FAIL
• Test Scenario 3: Reject Command - PASS/FAIL
• Test Scenario 4: Multiple Pending Approvals - PASS/FAIL
• Test Scenario 5: WebSocket Disconnected - PASS/FAIL
• Test Scenario 6: Empty Custom Command - PASS/FAIL
• Test Scenario 7: Approval Expiration - PASS/FAIL
• Test Scenario 8: XSS Prevention - PASS/FAIL

Overall Result: _____ PASS/FAIL

Tester Notes:

---

---

---