feat(frontend): supervisor presence indicator on agent call card

- useAgentState hook returns { state, supervisorPresence }
- SSE events: supervisor-whisper → "Supervisor coaching" (blue badge)
  supervisor-barge → "Supervisor on call" (brand badge)
  supervisor-left → badge disappears
- Listen mode is silent — no badge shown
- Updated call sites: sidebar.tsx, agent-status-toggle.tsx destructure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/call-desk/active-call-card.tsx

@@ -18,6 +18,7 @@ import { EnquiryForm } from './enquiry-form';
 import { formatPhone } from '@/lib/format';
 import { apiClient } from '@/lib/api-client';
 import { useAuth } from '@/providers/auth-provider';
+import { useAgentState } from '@/hooks/use-agent-state';
 import { cx } from '@/utils/cx';
 import { notify } from '@/lib/toast';
 import type { Lead, CallDisposition } from '@/types/entities';
@@ -49,6 +50,10 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
     const [callerDisconnected, setCallerDisconnected] = useState(false);
     const [suggestedDisposition, setSuggestedDisposition] = useState<CallDisposition | null>(null);
 
+    const agentConfig = localStorage.getItem('helix_agent_config');
+    const agentIdForState = agentConfig ? (() => { try { return JSON.parse(agentConfig).ozonetelAgentId; } catch { return null; } })() : null;
+    const { supervisorPresence } = useAgentState(agentIdForState);
+
     const callDirectionRef = useRef(callState === 'ringing-out' ? 'OUTBOUND' : 'INBOUND');
     const wasAnsweredRef = useRef(callState === 'active');
 
@@ -235,7 +240,15 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
                                     {fullName && <p className="text-xs text-tertiary">{phoneDisplay}</p>}
                                 </div>
                             </div>
-                            <Badge size="md" color="success" type="pill-color">{formatDuration(callDuration)}</Badge>
+                            <div className="flex items-center gap-2">
+                                {supervisorPresence === 'whisper' && (
+                                    <Badge size="sm" color="blue" type="pill-color">Supervisor coaching</Badge>
+                                )}
+                                {supervisorPresence === 'barge' && (
+                                    <Badge size="sm" color="brand" type="pill-color">Supervisor on call</Badge>
+                                )}
+                                <Badge size="md" color="success" type="pill-color">{formatDuration(callDuration)}</Badge>
+                            </div>
                         </div>
 
                         {/* Call controls */}