Current Friction Points in Exec Approval Workflow

The existing exec approval mechanism exhibits several usability issues that degrade the operator experience:

1. Cross-Context Code Copy Users must manually copy approval codes from the Control UI or notification and paste into a separate terminal or chat interface:

# Current flow requires this manual step:
[Control UI] Copy: /approve abc123-def456-ghi789
[Terminal]    Paste and execute the approve command

2. No Visual Command Preview Operators cannot see the actual command that will execute before approving. The current interface shows only:

• The approval code
• A generic “command requires approval” message
• No syntax highlighting or formatting

3. Execution Context Ambiguity Users receive no clear indication of whether a command will run in:

• Elevated mode (sudo/admin privileges)
• Sandboxed mode (restricted environment)
• The specific workspace or container context

4. Approval Timeout Opacity The countdown mechanism exists server-side but is not surfaced to users, leading to confusion when approvals expire silently.

5. Windows-Specific Quirks On Windows environments, the copy-paste workflow conflicts with:

• PowerShell’s clipboard handling
• Command Prompt encoding differences
• Enterprise restriction policies that block clipboard operations

Architectural Analysis

The current exec approval system was designed with a chat-first paradigm where approvals were expected to happen via the same interface that sent the approval request. This design decision created inherent friction for Control UI users.

1. Protocol Layer (Already Functional)

The gateway’s approval WebSocket protocol already supports all required semantics:

// Existing WebSocket message types (already implemented)
{
  "type": "exec.approval.required",
  "payload": {
    "requestId": "req_abc123",
    "command": "kubectl delete pod nginx --namespace production",
    "executionContext": {
      "mode": "elevated",        // or "sandboxed"
      "workspaceId": "ws_xyz789",
      "userId": "user_123",
      "sudo": true
    },
    "timeoutSeconds": 120,
    "createdAt": "2024-01-15T10:30:00Z"
  }
}

// Approval actions (already implemented)
{
  "type": "exec.approval.response",
  "payload": {
    "requestId": "req_abc123",
    "action": "allow_once" | "allow_always" | "deny",
    "approvedBy": "user_123"
  }
}

2. Frontend Gap Analysis

The Control UI currently:

• ✅ Receives the exec.approval.required WebSocket message
• ❌ Does not render a modal component
• ❌ Does not parse or syntax-highlight the command string
• ❌ Does not display execution context metadata
• ❌ Does not implement the countdown timer
• ❌ Does not send exec.approval.response messages

3. Missing Components

4. State Management Gap

The approval state is not persisted in the UI state management layer:

// Current missing state shape
interface ApprovalState {
  pendingApprovals: Map;
  activeModalId: string | null;
  countdownTimers: Map;
}

// Required but missing selectors
selectPendingApprovals
selectActiveApproval
selectApprovalTimeRemaining

Implementation Guide for Approval Modal

Phase 1: State Management Foundation

Step 1.1: Define TypeScript interfaces

typescript // src/types/approval.ts export type ApprovalAction = ‘allow_once’ | ‘allow_always’ | ‘deny’; export type ExecutionMode = ’elevated’ | ‘sandboxed’;

export interface ExecutionContext { mode: ExecutionMode; workspaceId: string; userId: string; sudo: boolean; containerId?: string; environment?: Record<string, string>; }

export interface PendingApproval { requestId: string; command: string; context: ExecutionContext; timeoutSeconds: number; createdAt: string; expiresAt: string; }

export interface ApprovalResponse { requestId: string; action: ApprovalAction; approvedBy: string; timestamp: string; }

Step 1.2: Create Redux slice

typescript // src/store/approvalSlice.ts import { createSlice, PayloadAction } from ‘@reduxjs/toolkit’; import type { PendingApproval } from ‘../types/approval’;

interface ApprovalState { pendingApprovals: Record<string, PendingApproval>; activeModalRequestId: string | null; }

const initialState: ApprovalState = { pendingApprovals: {}, activeModalRequestId: null, };

const approvalSlice = createSlice({ name: ‘approval’, initialState, reducers: { addPendingApproval: (state, action: PayloadAction) => { state.pendingApprovals[action.payload.requestId] = action.payload; if (!state.activeModalRequestId) { state.activeModalRequestId = action.payload.requestId; } }, removePendingApproval: (state, action: PayloadAction) => { delete state.pendingApprovals[action.payload]; if (state.activeModalRequestId === action.payload) { const remaining = Object.keys(state.pendingApprovals); state.activeModalRequestId = remaining[0] || null; } }, setActiveModal: (state, action: PayloadAction<string | null>) => { state.activeModalRequestId = action.payload; }, }, });

export const { addPendingApproval, removePendingApproval, setActiveModal } = approvalSlice.actions; export default approvalSlice.reducer;

Phase 2: WebSocket Integration

Step 2.1: Handle incoming approval messages

typescript // src/services/websocket/handlers.ts import { addPendingApproval, removePendingApproval } from ‘../../store/approvalSlice’;

export const handleExecApprovalRequired = (payload: PendingApproval, dispatch: AppDispatch) => { const expiresAt = new Date(); expiresAt.setSeconds(expiresAt.getSeconds() + payload.timeoutSeconds);

dispatch(addPendingApproval({ …payload, expiresAt: expiresAt.toISOString(), })); };

export const handleExecApprovalComplete = (requestId: string, dispatch: AppDispatch) => { dispatch(removePendingApproval(requestId)); };

export const handleExecApprovalTimeout = (requestId: string, dispatch: AppDispatch) => { dispatch(removePendingApproval(requestId)); // Emit timeout event to gateway websocketService.send({ type: ’exec.approval.timeout’, payload: { requestId }, }); };

Phase 3: Modal Component Implementation

Step 3.1: Create ApprovalModal component

tsx // src/components/Approval/ApprovalModal.tsx import React, { useEffect, useState } from ‘react’; import { useDispatch, useSelector } from ‘react-redux’; import { selectActiveApproval, selectApprovalTimeRemaining } from ‘../../store/selectors’; import { removePendingApproval, setActiveModal } from ‘../../store/approvalSlice’; import { sendApprovalResponse } from ‘../../services/websocket’; import CommandHighlighter from ‘../CommandHighlighter’; import ExecutionBadge from ‘../ExecutionBadge’; import type { ApprovalAction } from ‘../../types/approval’;

const ApprovalModal: React.FC = () => { const dispatch = useDispatch(); const activeApproval = useSelector(selectActiveApproval); const [timeRemaining, setTimeRemaining] = useState(0);

useEffect(() => { if (!activeApproval) return;

const interval = setInterval(() => {
  const remaining = Math.max(
    0,
    Math.floor((new Date(activeApproval.expiresAt).getTime() - Date.now()) / 1000)
  );
  setTimeRemaining(remaining);
  
  if (remaining === 0) {
    handleResponse('deny');
  }
}, 1000);

return () => clearInterval(interval);

}, [activeApproval]);

const handleResponse = async (action: ApprovalAction) => { if (!activeApproval) return;

await sendApprovalResponse({
  requestId: activeApproval.requestId,
  action,
  approvedBy: currentUserId,
  timestamp: new Date().toISOString(),
});

dispatch(removePendingApproval(activeApproval.requestId));

};

if (!activeApproval) return null;

return (

    <div className="approval-modal__command">
      <CommandHighlighter command={activeApproval.command} />
    </div>
    
    <div className="approval-modal__context">
      <dl>
        <dt>Workspace</dt>
        <dd>{activeApproval.context.workspaceId}</dd>
        <dt>Timeout</dt>
        <dd>{timeRemaining}s remaining</dd>
      </dl>
    </div>
    
    <footer className="approval-modal__actions">
      <button 
        className="btn btn--danger"
        onClick={() => handleResponse('deny')}
      >
        Deny
      </button>
      <button 
        className="btn btn--secondary"
        onClick={() => handleResponse('allow_once')}
      >
        Allow Once
      </button>
      <button 
        className="btn btn--primary"
        onClick={() => handleResponse('allow_always')}
      >
        Allow Always
      </button>
    </footer>
  </div>
</div>

{tokens.map((token, index) => (
<span key={index} className={token token--${token.type}}>
{token.value}

))}

# Test commands to verify highlighting:
kubectl get pods -n production --watch
docker exec -it abc123 /bin/bash
find /var/log -name "*.log" -mtime +7 -exec rm {} \;
ssh user@host "sudo systemctl restart nginx"

setPosition({
  top: Math.min(viewportHeight / 2 - modalHeight / 2, 20) + 'px',
  left: Math.min(viewportWidth / 2 - modalWidth / 2, 20) + 'px',
});