feat(frontend): Monitoramento em tempo real (WebSocket via proxy SSE)

O RealtimeGateway (backend, desde a PHASE 13) autentica a conexão
socket.io via auth.token no handshake — um JWT bruto que um
EventSource/WebSocket do browser não tem como mandar sem passar por JS
legível no client, quebrando o princípio seguido em todo o resto do
frontend (token só existe no cookie httpOnly). Resolvido com um proxy:
apps/frontend/src/app/api/monitoring/stream/route.ts roda no servidor,
conecta no socket.io real com o access token do lado do servidor, e
reencaminha cada evento pro browser como Server-Sent Events — o
EventSource do client só precisa do cookie de sessão, nunca do token.

/app/monitoramento: badge de conexão, contadores de sessão (chamadas
criadas/atendidas/encerradas), filas ao vivo (QUEUE_MEMBER_COUNT), estado
de agentes ao vivo (AGENT_STATE_CHANGED, semeado do GET /agents inicial),
feed dos últimos 50 eventos. Menu "Monitoramento" vira 1 link direto em
vez de 5 sub-itens placeholder — o painel novo já cobre tudo numa página
só.

Testado ponta a ponta contra o pipeline real (não simulado): cliente
socket.io cru confirmou a API entregando o evento, curl -N confirmou o
proxy reencaminhando, e com a página aberta de verdade num browser
(Puppeteer) disparei POST /agents/me/login e /logout por fora — o badge
do agente mudou ao vivo e os eventos apareceram no feed sem recarregar a
página. Smoke test de regressão nas 19 telas anteriores, todas 200.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BFaBaBSQGhyXGEgtTYZGV8

apps/frontend/src/lib/realtime-types.ts

@@ -0,0 +1,36 @@
+export interface RealtimeEvent {
+  type: string;
+  occurredAt: string;
+  callUuid?: string;
+  tenantId?: string;
+  b2bcallCallId?: string;
+  b2bcallCampaignId?: string;
+  data: Record<string, unknown>;
+}
+
+/** `agent`/`queue` do mod_callcenter vêm como "<id>@<domain>" (secao 45,
+ * 50); `agentId` de AGENT_STATE_CHANGED já vem cru (publicado pela API,
+ * não pelo FreeSWITCH). Uma função só resolve os dois formatos. */
+export function stripDomain(value: string | undefined): string | undefined {
+  return value?.split("@")[0];
+}
+
+export const EVENT_CATEGORY: Record<string, "call" | "agent" | "queue" | "extension" | "gateway" | "other"> = {
+  CALL_CREATED: "call",
+  CALL_RINGING: "call",
+  CALL_ANSWERED: "call",
+  CALL_BRIDGED: "call",
+  CALL_UNBRIDGED: "call",
+  CALL_ENDED: "call",
+  EXTENSION_REGISTERED: "extension",
+  EXTENSION_UNREGISTERED: "extension",
+  AGENT_STATUS_CHANGED: "agent",
+  AGENT_STATE_CHANGED: "agent",
+  AGENT_OFFERED_CALL: "agent",
+  AGENT_BRIDGE_FAILED: "agent",
+  QUEUE_MEMBER_COUNT: "queue",
+  QUEUE_MEMBER_LEFT: "queue",
+  GATEWAY_UP: "gateway",
+  GATEWAY_DOWN: "gateway",
+  BACKGROUND_JOB_COMPLETED: "other",
+};