feat(nav): menu em acordeão — cada grupo abre/fecha independente

Pedido do usuário: "usar o modelo de arcordeon no menu para que eu
poder reocler cada sub menu" — os 6 grupos com sub-itens (Discador,
Call Center, Telefonia, IA, Relatórios, Administração) ficavam sempre
todos abertos ao mesmo tempo, sem jeito de recolher.

NavList (compartilhado entre sidebar desktop, drawer mobile, Platform e
Tenant) ganhou estado de abrir/fechar por seção — não é exclusivo
(abrir um grupo não fecha os outros). Chevron gira 180° indicando
estado; aria-expanded no botão do cabeçalho. Default: só o grupo que
contém a rota atual começa aberto, os demais começam fechados —
resolve "menu cheio demais" sem esconder onde o usuário está agora.
Estado é local (não persiste num F5 de propósito, mas sobrevive à
navegação entre páginas normalmente, já que o layout não remonta em
troca de rota client-side).

Testado com Playwright de verdade: seção sem rota ativa começa
aria-expanded="false", clicar abre, clicar de novo fecha.

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

TODO.md

@@ -2217,6 +2217,88 @@ para fazer o fluxo de maneira visual usando nodeRED")
       já embute essas coordenadas nos props iniciais do componente —
       não só a API, o carregamento real da tela também foi verificado
 
+## PHASE 62 — 3 achados reais reportados pelo usuário numa mensagem só:
+fila sem edição, agente sem jeito de ficar online, destino de rota de
+entrada em texto livre
+- [x] **Filas sem edição**: `queues.controller.ts` só tinha create/list/
+      delete — nunca existiu `PATCH`. Adicionado `UpdateQueueDto` +
+      `PATCH /queues/:id` (mesmos campos do create) e um botão "Editar"
+      por linha na tela (formulário inline reaproveitando o mesmo
+      componente do "Nova fila"). Testado com Playwright de verdade:
+      abrir o form pré-preenchido com os valores reais, editar, salvar,
+      confirmar que a tabela atualizou
+- [x] **"Não achei como deixar o agente online"**: os endpoints
+      `/agents/me/login|pause|resume|logout` sempre existiram (desde uma
+      fase anterior), mas NENHUMA tela chamava eles — só existia o CRUD
+      admin de Agentes (criar o vínculo usuário+ramal), nunca um controle
+      pro próprio usuário logado ficar disponível. Faltavam também
+      `GET /agents/me` (pra saber SE tem agente vinculado e qual o
+      estado) e `GET /agents/me/pause-reasons` (motivos de pausa sem
+      exigir `agents.view`, que listaria TODOS os agentes do tenant —
+      permissão que o role "agent" nunca teve e não devia ganhar só pra
+      isso). Widget novo na topbar (`AgentStatusWidget`, visível em
+      qualquer página) só aparece pra quem tem Agent vinculado; mostra
+      estado atual + botões Entrar/Pausar/Retomar/Sair
+- [x] Achado real construindo o widget: as Server Actions de
+      login/logout/pause/resume exportadas como arrow function que só
+      repassavam argumentos quebravam em runtime ("Server Actions must
+      be async functions") — o MESMO bug já documentado antes nesta
+      sessão (wizard de campanhas). Corrigido declarando como
+      `async function` de verdade
+- [x] Testado ponta a ponta com Playwright, logado como um agente de
+      teste de verdade (usuário novo, role "agent", Agent vinculado a um
+      ramal real): Offline → clicar "Entrar" → Disponível → "Pausar" +
+      escolher motivo → Em pausa → "Retomar" → Disponível → "Sair" →
+      Offline, tudo pela tela, sem nenhuma chamada de API manual
+- [x] **Destino de rota de entrada era texto livre**: agora um dropdown
+      de "Tipo de destino" (Ramal/IVR/Fila/Grupo de ramais) + um segundo
+      dropdown listando as opções reais do tenant pra cada tipo. Isso
+      exigiu construir de verdade 2 mecanismos de dialplan que NUNCA
+      tinham sido testados (fila e grupo não eram destinos possíveis até
+      aqui, só ficavam bonitos na tela se eu não tivesse implementado
+      certo):
+      - `InboundRoute.destinationType` (novo enum) decide como
+        `buildInboundRouteXml` (packages/telephony) interpreta o
+        destino — `callcenter` (nova application no allowlist, mesmo
+        risco zero de `pickup`) pra QUEUE, `bridge` multi-leg
+        (`user/A@domain,user/B@domain,...`) pra CALL_GROUP
+      - CALL_GROUP nunca salva um snapshot dos membros: `apps/
+        freeswitch-config` resolve a lista de ramais do grupo TODA VEZ
+        que uma chamada de entrada chega, então trocar quem está no
+        grupo já vale na próxima chamada, sem re-salvar a rota
+      - EXTENSION/IVR continuam usando exatamente o mesmo `transfer` já
+        testado nas PHASEs 56/58 — nenhuma mudança de comportamento
+- [x] Testado ponta a ponta com chamadas reais nos 2 mecanismos novos:
+      **fila** — softphone externo discou o DID, `show channels`
+      confirmou a chamada dentro da application `callcenter` com o nome
+      certo da fila (`<queueId>@<domain>`); **grupo** — 2 ramais reais
+      registrados no mesmo `callGroup`, a chamada de entrada tocou nos
+      DOIS AO MESMO TEMPO (confirmado via `show channels`, mesmo
+      `call_uuid` nas duas legs `RINGING`), atender em um cancelou o
+      outro automaticamente — ring group de verdade, não só um bridge
+      pra um único ramal
+- [ ] Grupo de ramais só é alcançável por Rota de Entrada — não existe
+      (e não foi pedido) um jeito de discar um grupo de dentro do
+      dialplan "default" via feature code
+
+## PHASE 63 — Menu em acordeão (pedido do usuário: "usar o modelo de
+arcordeon no menu para que eu poder reocler cada sub menu")
+- [x] `NavList` (compartilhado entre sidebar desktop e drawer mobile,
+      Platform e Tenant) ganhou estado de abrir/fechar por seção — cada
+      grupo (Discador, Call Center, Telefonia, IA, Relatórios,
+      Administração) alterna independente dos outros (não é exclusivo:
+      abrir um não fecha os demais). Chevron gira 180° indicando estado;
+      `aria-expanded` no botão do cabeçalho
+- [x] Default: só o grupo que contém a rota atual começa aberto, os
+      demais começam fechados — resolve a reclamação de "menu cheio
+      demais" sem esconder onde o usuário está agora. Estado é local
+      (não persiste num F5 de propósito) mas sobrevive à navegação entre
+      páginas normalmente, porque o layout que contém a sidebar não
+      remonta em troca de rota client-side
+- [x] Testado com Playwright de verdade: seção sem rota ativa começa
+      `aria-expanded="false"`, clicar abre (`true`), clicar de novo fecha
+      (`false`)
+
 ---
 
 ## Riscos conhecidos

apps/frontend/src/components/shell/nav-list.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { NavSection } from "./nav-types";
 
@@ -12,6 +14,25 @@ import type { NavSection } from "./nav-types";
 export function NavList({ items, collapsed = false, onNavigate }: { items: NavSection[]; collapsed?: boolean; onNavigate?: () => void }) {
   const pathname = usePathname();
 
+  // Acordeão (pedido do usuário: "poder recolher cada sub menu") — cada
+  // grupo abre/fecha independente dos outros, não é exclusivo (abrir um
+  // não fecha os demais). Default: só o grupo com a rota atual começa
+  // aberto — os outros começam fechados, já que a lista completa de
+  // grupos nunca cabe sem rolar. Estado local (não persiste num F5 de
+  // propósito: sobrevive normalmente à navegação entre páginas, porque o
+  // layout que contém a sidebar não remonta em troca de rota client-side).
+  const [openSections, setOpenSections] = useState<Record<string, boolean>>(() =>
+    Object.fromEntries(
+      items
+        .filter((s) => s.children)
+        .map((s) => [s.label, s.children!.some((leaf) => leaf.href && pathname.startsWith(leaf.href))]),
+    ),
+  );
+
+  function toggleSection(label: string) {
+    setOpenSections((prev) => ({ ...prev, [label]: !prev[label] }));
+  }
+
   return (
     <ul className="space-y-0.5">
       {items.map((section) => {
@@ -60,19 +81,28 @@ export function NavList({ items, collapsed = false, onNavigate }: { items: NavSe
         }
 
         const sectionHasActiveChild = section.children?.some((leaf) => leaf.href && pathname.startsWith(leaf.href));
+        const isOpen = collapsed || (openSections[section.label] ?? false);
 
         return (
           <li key={section.label} className="pt-2">
-            <div
+            <button
+              type="button"
+              onClick={() => toggleSection(section.label)}
+              aria-expanded={isOpen}
               className={cn(
-                "flex items-center gap-3 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide",
+                "flex w-full items-center gap-3 rounded-md px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors hover:bg-muted",
                 sectionHasActiveChild ? "text-foreground" : "text-muted-foreground/70",
               )}
             >
               <Icon className="h-4 w-4 shrink-0" aria-hidden />
-              {!collapsed && <span>{section.label}</span>}
-            </div>
-            {!collapsed && section.children && (
+              {!collapsed && (
+                <>
+                  <span className="flex-1 text-left">{section.label}</span>
+                  <ChevronDown className={cn("h-3.5 w-3.5 shrink-0 transition-transform", isOpen ? "rotate-180" : "")} aria-hidden />
+                </>
+              )}
+            </button>
+            {!collapsed && isOpen && section.children && (
               <ul className="ml-[26px] space-y-0.5 border-l border-border pl-3">
                 {section.children.map((leaf) => {
                   const leafActive = leaf.href && pathname.startsWith(leaf.href);