fix: approval UI not updating after approve click

frontend/src/components/Chat/ToolCallGroup.tsx

@@ -32,6 +32,8 @@ function StatusIcon({ state }: { state: ToolPartState }) {
   switch (state) {
     case 'approval-requested':
       return <HourglassEmptyIcon sx={{ fontSize: 16, color: 'var(--accent-yellow)' }} />;
+    case 'approval-responded':
+      return <CircularProgress size={14} thickness={5} sx={{ color: 'var(--accent-green)' }} />;
     case 'output-available':
       return <CheckCircleOutlineIcon sx={{ fontSize: 16, color: 'success.main' }} />;
     case 'output-error':
@@ -48,6 +50,7 @@ function StatusIcon({ state }: { state: ToolPartState }) {
 function statusLabel(state: ToolPartState): string | null {
   switch (state) {
     case 'approval-requested': return 'awaiting approval';
+    case 'approval-responded': return 'approved';
     case 'input-streaming':
     case 'input-available': return 'running';
     case 'output-denied': return 'denied';
@@ -59,6 +62,7 @@ function statusLabel(state: ToolPartState): string | null {
 function statusColor(state: ToolPartState): string {
   switch (state) {
     case 'approval-requested': return 'var(--accent-yellow)';
+    case 'approval-responded': return 'var(--accent-green)';
     case 'output-available': return 'var(--accent-green)';
     case 'output-error': return 'var(--accent-red)';
     case 'output-denied': return 'var(--muted-text)';

frontend/src/components/SessionChat.tsx

@@ -49,6 +49,9 @@ export default function SessionChat({ sessionId, isActive, onSessionDead }: Sess
       const hasPendingApproval = lastAssistant?.parts.some(
         (p) => p.type === 'dynamic-tool' && p.state === 'approval-requested'
       ) ?? false;
+      const hasApprovedRunning = lastAssistant?.parts.some(
+        (p) => p.type === 'dynamic-tool' && p.state === 'approval-responded'
+      ) ?? false;
 
       if (hasPendingApproval) {
         store.setActivityStatus({ type: 'waiting-approval' });
@@ -81,6 +84,10 @@ export default function SessionChat({ sessionId, isActive, onSessionDead }: Sess
           }
           useLayoutStore.getState().setRightPanelOpen(true);
         }
+      } else if (hasApprovedRunning) {
+        // Tools were approved but still executing — show processing state
+        store.setActivityStatus({ type: 'tool', toolName: 'running' });
+        store.setProcessing(true);
       } else {
         // No pending approval — reset to idle
         store.setActivityStatus({ type: 'idle' });

frontend/src/hooks/useAgentChat.ts

@@ -331,6 +331,17 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
   const approveTools = useCallback(
     async (approvals: Array<{ tool_call_id: string; approved: boolean; feedback?: string | null; edited_script?: string | null }>) => {
       if (!transportRef.current) return false;
+
+      // Transition SDK tool state from approval-requested → approval-responded
+      // so the approval UI disappears immediately (survives session switches).
+      for (const a of approvals) {
+        chat.addToolApprovalResponse({
+          id: `approval-${a.tool_call_id}`,
+          approved: a.approved,
+          reason: a.approved ? undefined : (a.feedback || 'Rejected by user'),
+        });
+      }
+
       const ok = await transportRef.current.approveTools(sessionId, approvals);
       if (ok) {
         // Clear needsAttention since user has responded
@@ -340,7 +351,7 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
       }
       return ok;
     },
-    [sessionId, setProcessing, setNeedsAttention],
+    [sessionId, chat, setProcessing, setNeedsAttention],
   );
 
   return {