@bravophone/webphone 0.1.2 → 0.2.1

package/host/js/bravophone-route-selector.js

@@ -0,0 +1,1099 @@
+/**
+ * BravoPhone > Seletor de origem do número (rotas de saída)
+ *
+ * Fonte: GET {API_BASE}/api/trunks -> [{ id, nome, dominio, numeroRota, status }]
+ * Só entram troncos com status ATIVO. A lista é recarregada a cada 3 minutos;
+ * se a atualização falhar, as rotas já carregadas continuam valendo.
+ *
+ * Mapeamento: nome -> name (exibido) | dominio -> host (tipo da chamada)
+ *             numeroRota -> prefix (invisível, concatenado no INVITE)
+ *
+ * Regras:
+ *  - 0 ou 1 rota  -> o seletor NAO e exibido (com 1 rota o prefixo dela continua valendo)
+ *  - 2+ rotas     -> exibe o seletor acima do teclado do discador
+ *  - host casando com *.wavoip.com -> a chamada e apresentada como WhatsApp
+ *    qualquer outro host           -> telefonia convencional
+ *  - prefix e INVISIVEL para o usuario; e concatenado no destino na hora do INVITE
+ *    (ex.: prefix "01*" + 5511973951769 -> to = 01*5511973951769; prefix null -> numero puro)
+ *  - name e o texto exibido no seletor
+ *
+ * A concatenacao do prefixo acontece em js/libwebphone.js, no dialpad.call(),
+ * que e o unico funil de chamadas de saida (discador, click-to-call e historico
+ * todos preenchem o dialpad e disparam webphone-dial-now).
+ */
+(function () {
+  "use strict";
+
+  var DEBUG_PREFIX = "BravoPhone > RouteSelector >";
+  var STORAGE_KEY = "bravophoneSelectedRoute";
+
+  /* AMBIENTE: HOMOLOGACAO. Mesma constante usada pelo popup.js (BP_API_BASE);
+     para virar producao troque aqui, no popup.js e no host_permissions. */
+  var API_BASE = "https://reports-hmg.teambravotech.com";
+  var TOKEN_STORAGE_KEY = "bravophoneVxToken";
+
+  /**
+   * Caminho dos troncos. O servidor autentica esta rota pelo header
+   * X-Vx-Token — a mesma credencial de /api/ramais. O cookie de sessao do
+   * painel so vale same-origin, dentro da propria pagina do report, porque a
+   * resposta nao traz Access-Control-Allow-Credentials. Aqui e header, nunca
+   * cookie.
+   * Para testar outro caminho sem rebuild, gravar em bravophoneTrunksPath:
+   *   chrome.storage.local.set({ bravophoneTrunksPath: "/api/voxfree/trunks" })
+   */
+  var TRUNKS_PATH = "/api/trunks";
+  var TRUNKS_PATH_STORAGE_KEY = "bravophoneTrunksPath";
+
+  /**
+   * Lista manual de fallback, usada só quando a API falha. Formato aceito: o
+   * mesmo da API ({ id, nome, dominio, numeroRota, status }) ou o interno
+   * ({ id, name, host, prefix }). Serve para validar UI e prefixo enquanto o
+   * endpoint nao esta disponivel:
+   *   chrome.storage.local.set({ bravophoneRoutesOverride: [ ... ] })
+   */
+  var OVERRIDE_STORAGE_KEY = "bravophoneRoutesOverride";
+
+  /** Recarrega a lista de troncos a cada 3 minutos. */
+  var REFRESH_INTERVAL_MS = 3 * 60 * 1000;
+
+  /**
+   * A API devolve numeroRota sem o separador ("01"), mas o destino do INVITE usa
+   * "01*5511973951769". Entao o "*" e acrescentado aqui quando ja nao vier.
+   */
+  var PREFIX_SEPARATOR = "*";
+
+  /**
+   * Troncos ativos da API.
+   * Resposta: [{ id, nome, dominio, numeroRota, status }]
+   * @returns {Promise<Array<{id:string,name:string,host:string,prefix:?string}>>}
+   */
+  function fetchRoutes() {
+    return Promise.all([loadToken(), readStorage(TRUNKS_PATH_STORAGE_KEY)]).then(function (result) {
+      var token = result[0];
+      var path = result[1] || TRUNKS_PATH;
+
+      /* Sem token nao adianta pedir. Antes o fetch saia mesmo assim, com
+         headers vazio, e o 401 que voltava parecia erro de servidor quando na
+         verdade era sessao ausente no cliente. O cookie tambem nao salva: sem
+         Access-Control-Allow-Credentials na resposta, credentials:"include"
+         nao autentica cross-origin. Quando o login gravar o token,
+         watchToken() recarrega as rotas sozinho. */
+      if (!token) {
+        var semSessao = new Error(
+          "sem " + TOKEN_STORAGE_KEY + " no storage — faca login pelo webphone"
+        );
+        semSessao.status = 0;
+        semSessao.semSessao = true;
+        throw semSessao;
+      }
+
+      var url = API_BASE + path + (path.indexOf("?") >= 0 ? "&" : "?") + "_=" + Date.now();
+      var options = { cache: "no-store", headers: { "X-Vx-Token": token } };
+
+      return fetch(url, options).then(function (response) {
+        if (!response.ok) {
+          var reason =
+            response.status === 401
+              ? "401 com X-Vx-Token enviado — token recusado: logout ja feito ou token de outro ambiente (hmg e producao tem stores separados); refaca o login"
+              : response.status === 404
+              ? "404 — o caminho " + path + " nao existe neste ambiente"
+              : "HTTP " + response.status;
+          var error = new Error(reason + " em " + path);
+          error.status = response.status;
+          throw error;
+        }
+        return response.json();
+      });
+    });
+  }
+
+  function readStorage(key) {
+    return new Promise(function (resolve) {
+      if (!hasStorage()) return resolve(null);
+      try {
+        chrome.storage.local.get(key, function (data) {
+          resolve((data && data[key]) || null);
+        });
+      } catch (err) {
+        resolve(null);
+      }
+    });
+  }
+
+  function loadToken() {
+    return readStorage(TOKEN_STORAGE_KEY);
+  }
+
+  /**
+   * Converte um tronco no formato interno; devolve null se inutilizavel.
+   * Aceita o formato da API ({ nome, dominio, numeroRota, status }) e o interno
+   * ({ name, host, prefix }), usado pela lista manual de fallback.
+   */
+  function mapTrunk(trunk) {
+    if (!trunk || typeof trunk !== "object") return null;
+    if (trunk.status != null && String(trunk.status).toUpperCase() !== "ATIVO") return null;
+
+    var raw = trunk.numeroRota != null ? trunk.numeroRota : trunk.prefix;
+    var prefix = null;
+    if (raw != null) {
+      var value = String(raw).trim();
+      if (value && value.toLowerCase() !== "null") {
+        prefix =
+          value.slice(-PREFIX_SEPARATOR.length) === PREFIX_SEPARATOR
+            ? value
+            : value + PREFIX_SEPARATOR;
+      }
+    }
+
+    return {
+      id: trunk.id,
+      name: trunk.nome != null ? trunk.nome : trunk.name,
+      host: trunk.dominio != null ? trunk.dominio : trunk.host,
+      prefix: prefix,
+      /* nas rotas wavoip e o id do device — a chave do status do WhatsApp */
+      user: trunk.usuario != null ? trunk.usuario : (trunk.user != null ? trunk.user : null)
+    };
+  }
+
+  function mapTrunks(payload) {
+    var list = Array.isArray(payload) ? payload : payload && Array.isArray(payload.data) ? payload.data : [];
+    var out = [];
+    for (var i = 0; i < list.length; i++) {
+      var route = mapTrunk(list[i]);
+      if (route) out.push(route);
+    }
+    return out;
+  }
+
+  /**
+   * Resolve quando a PRIMEIRA carga de rotas termina — com sucesso, com erro ou
+   * pela lista manual de fallback. Quem vai discar precisa esperar por isto:
+   * enquanto a lista nao chegou, getSelected() devolve null, getPrefix()
+   * devolve "" e applyPrefix() vira no-op — a chamada sai sem o prefixo do
+   * tronco. E exatamente o que acontecia nas ligacoes pedidas pelas paginas: o
+   * background abre o webphone e manda discar 250ms depois, bem antes de
+   * /api/trunks responder. Discando dentro do webphone o problema nao aparece
+   * porque a essa altura as rotas ja carregaram ha tempo.
+   */
+  var readyResolve = null;
+  var readyPromise = new Promise(function (resolve) { readyResolve = resolve; });
+  var alreadyReady = false;
+
+  function markReady() {
+    if (alreadyReady) return;
+    alreadyReady = true;
+    readyResolve(routes);
+  }
+
+  var routes = [];
+  var selectedId = null;
+  var listeners = [];
+  var isOpen = false;
+  var rootEl = null;
+  var refreshTimer = null;
+  var pendingRefresh = false;
+
+  /* ----------------------------------------------------------------- rotas */
+
+  function normalizeRoute(route, index) {
+    if (!route || typeof route !== "object") return null;
+    var host = typeof route.host === "string" ? route.host.trim() : "";
+    var name = typeof route.name === "string" && route.name.trim() ? route.name.trim() : host;
+    if (!name) return null;
+    return {
+      id: route.id != null ? String(route.id) : host + "#" + index,
+      name: name,
+      host: host,
+      prefix: route.prefix == null || route.prefix === "" ? null : String(route.prefix),
+      user: route.user == null || route.user === "" ? null : String(route.user)
+    };
+  }
+
+  function normalizeRoutes(list) {
+    if (!Array.isArray(list)) return [];
+    var out = [];
+    for (var i = 0; i < list.length; i++) {
+      var r = normalizeRoute(list[i], i);
+      if (r) out.push(r);
+    }
+    return out;
+  }
+
+  /** host casa com *.wavoip.com (o proprio dominio tambem conta) */
+  function isWhatsappHost(host) {
+    if (!host) return false;
+    var h = String(host).trim().toLowerCase();
+    h = h.replace(/^[a-z]+:\/\//, ""); // tira esquema, se vier
+    h = h.split("/")[0].split("@").pop().split(":")[0]; // tira caminho, user e porta
+    return h === "wavoip.com" || /\.wavoip\.com$/.test(h);
+  }
+
+  function isWhatsappRoute(route) {
+    return !!route && isWhatsappHost(route.host);
+  }
+
+  function getSelected() {
+    if (!routes.length) return null;
+    for (var i = 0; i < routes.length; i++) {
+      if (routes[i].id === selectedId) return routes[i];
+    }
+    return routes[0];
+  }
+
+  function setSelected(id, persist) {
+    var previous = selectedId;
+    selectedId = id;
+    if (persist !== false) storeSelection(id);
+    if (previous !== id) notify();
+  }
+
+  function notify() {
+    var route = getSelected();
+    for (var i = 0; i < listeners.length; i++) {
+      try {
+        listeners[i](route);
+      } catch (err) {
+        console.error(DEBUG_PREFIX, "listener error", err);
+      }
+    }
+  }
+
+  /* --------------------------------------------------------------- storage */
+
+  function hasStorage() {
+    return typeof chrome !== "undefined" && chrome.storage && chrome.storage.local;
+  }
+
+  function loadSelection() {
+    return new Promise(function (resolve) {
+      if (!hasStorage()) return resolve(null);
+      try {
+        chrome.storage.local.get(STORAGE_KEY, function (data) {
+          resolve((data && data[STORAGE_KEY]) || null);
+        });
+      } catch (err) {
+        resolve(null);
+      }
+    });
+  }
+
+  function storeSelection(id) {
+    if (!hasStorage()) return;
+    try {
+      var payload = {};
+      payload[STORAGE_KEY] = id;
+      chrome.storage.local.set(payload);
+    } catch (err) {
+      /* storage indisponivel: a selecao vale so para esta sessao */
+    }
+  }
+
+  /* ------------------------------------------------------------------ i18n */
+
+  function t(key, fallback) {
+    try {
+      if (typeof chrome !== "undefined" && chrome.i18n) {
+        var msg = chrome.i18n.getMessage(key);
+        if (msg) return msg;
+      }
+    } catch (err) {
+      /* ignore */
+    }
+    return fallback;
+  }
+
+  function routeKindLabel(route) {
+    return isWhatsappRoute(route)
+      ? t("routeSelectorWhatsapp", "WhatsApp")
+      : t("routeSelectorPhone", "Telefonia convencional");
+  }
+
+  /* ------------------------------------------------- status do WhatsApp */
+
+  /**
+   * O tronco wavoip traz `usuario` = id do device. O estado do numero vem de
+   * GET {DEVICES_BASE}/{usuario}/whatsapp/all_info, consultado a cada 10s
+   * enquanto o popup estiver aberto:
+   *
+   *   result.status "open"        -> conectado            (bolinha verde)
+   *   result.status "connecting"  -> falta parear o numero (bolinha ambar +
+   *                                  link para o QR)
+   *   qualquer outro, ou erro/404 -> desconectado         (bolinha vermelha)
+   *
+   * Enquanto a primeira resposta nao chega a bolinha fica cinza: "desconectado"
+   * so e afirmado depois de o servidor responder, para o chip nao acusar queda
+   * que nao existe.
+   *
+   * devices.wavoip.com precisa estar em host_permissions — sem isso o fetch do
+   * popup morre no CORS.
+   */
+  var DEVICES_BASE = "https://devices.wavoip.com";
+  var STATUS_INTERVAL_MS = 10 * 1000;
+
+  var deviceStatus = {}; /* usuario -> { status, phone, name } */
+  var statusTimer = null;
+  var statusInFlight = false;
+
+  function statusUrl(user) {
+    return DEVICES_BASE + "/" + encodeURIComponent(user) + "/whatsapp/all_info";
+  }
+
+  function qrUrl(user) {
+    return DEVICES_BASE + "/" + encodeURIComponent(user) + "/whatsapp/qr-image";
+  }
+
+  function whatsappUsers() {
+    var users = [];
+    for (var i = 0; i < routes.length; i++) {
+      var route = routes[i];
+      if (!isWhatsappRoute(route) || !route.user) continue;
+      if (users.indexOf(route.user) < 0) users.push(route.user);
+    }
+    return users;
+  }
+
+  function fetchDeviceStatus(user) {
+    return fetch(statusUrl(user), { cache: "no-store" })
+      .then(function (response) {
+        if (!response.ok) throw new Error("HTTP " + response.status);
+        return response.json();
+      })
+      .then(function (payload) {
+        var result = payload && payload.result;
+        return {
+          status: (result && result.status) || "unknown",
+          phone: (result && result.phone) || null,
+          name: (result && result.name) || null
+        };
+      })
+      .catch(function (err) {
+        return { status: "error", phone: null, name: null, error: String((err && err.message) || err) };
+      });
+  }
+
+  function statusSignature() {
+    return Object.keys(deviceStatus)
+      .sort()
+      .map(function (user) { return user + ":" + deviceStatus[user].status; })
+      .join("|");
+  }
+
+  function refreshDeviceStatus() {
+    var users = whatsappUsers();
+    if (!users.length || statusInFlight) return Promise.resolve();
+
+    statusInFlight = true;
+    var antes = statusSignature();
+
+    return Promise.all(
+      users.map(function (user) {
+        return fetchDeviceStatus(user).then(function (info) { deviceStatus[user] = info; });
+      })
+    ).then(function () {
+      statusInFlight = false;
+      if (statusSignature() === antes) return;
+      console.info(DEBUG_PREFIX, "status dos numeros:", users.map(function (u) {
+        return u.slice(0, 8) + "=" + deviceStatus[u].status;
+      }));
+      /* so redesenha; a lista aberta continua aberta e as bolinhas atualizam */
+      if (rootEl) render();
+    }).catch(function () {
+      statusInFlight = false;
+    });
+  }
+
+  function startStatusPolling() {
+    if (statusTimer || !whatsappUsers().length) return;
+    refreshDeviceStatus();
+    statusTimer = setInterval(refreshDeviceStatus, STATUS_INTERVAL_MS);
+  }
+
+  function stopStatusPolling() {
+    if (!statusTimer) return;
+    clearInterval(statusTimer);
+    statusTimer = null;
+  }
+
+  /** null quando a rota nao e whatsapp ou nao tem device; undefined-safe. */
+  function statusOf(route) {
+    if (!isWhatsappRoute(route) || !route.user) return null;
+    return deviceStatus[route.user] || null;
+  }
+
+  function statusKind(info) {
+    if (!info) return "unknown";        /* ainda nao respondeu */
+    if (info.status === "open") return "on";
+    if (info.status === "connecting") return "pending";
+    return "off";
+  }
+
+  function statusLabel(info) {
+    switch (statusKind(info)) {
+      case "on":
+        return t("routeSelectorWhatsappOn", "Número conectado") + (info.phone ? " · " + info.phone : "");
+      case "pending":
+        return t("routeSelectorWhatsappPending", "Aguardando leitura do QR Code");
+      case "unknown":
+        return t("routeSelectorWhatsappChecking", "Verificando conexão…");
+      default:
+        return t("routeSelectorWhatsappOff", "Número desconectado");
+    }
+  }
+
+  /* ------------------------------------------------------------------- css */
+
+  var STYLE_ID = "bp-route-selector-style";
+  var CSS = [
+    // chip compacto, ancorado acima do display do numero
+    ".bp-route-selector{position:relative;flex:none;display:flex;justify-content:flex-start;padding-top:2px;margin-bottom:2px;z-index:40}",
+    ".bp-route-selector__toggle{max-width:100%;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 3px;",
+    "border-radius:999px;background:var(--bp-panel-alt,#1c2131);border:1px solid var(--bp-border,#262c40);",
+    "color:var(--bp-text,#e7e9ee);cursor:pointer;text-align:left;line-height:1;",
+    "transition:border-color .15s ease,background .15s ease}",
+    ".bp-route-selector__toggle:hover{background:var(--bp-border,#262c40);border-color:var(--bp-text-faint,#6b7488)}",
+    ".bp-route-selector__toggle:focus{outline:none;border-color:var(--bp-accent,#22c55e)}",
+    ".bp-route-selector__icon{position:relative;flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}",
+    // bolinha de conexao do numero, encostada no canto do icone do whatsapp
+    ".bp-route-selector__dot{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;",
+    "box-sizing:content-box;border:1.5px solid var(--bp-panel-alt,#1c2131)}",
+    ".bp-route-selector__dot--on{background:#22c55e}",
+    ".bp-route-selector__dot--pending{background:#f59e0b}",
+    ".bp-route-selector__dot--off{background:#ef4444}",
+    ".bp-route-selector__dot--unknown{background:var(--bp-text-faint,#6b7488)}",
+    ".bp-route-selector__qr{display:inline-block;margin-top:3px;font-size:10px;font-weight:600;",
+    "color:var(--bp-accent,#22c55e);text-decoration:underline;cursor:pointer}",
+    ".bp-route-selector__qr:hover{opacity:.8}",
+    ".bp-route-selector__icon svg{width:13px;height:13px;display:block}",
+    ".bp-route-selector__icon--whatsapp{background:#25d366;color:#0b141a}",
+    ".bp-route-selector__icon--phone{background:var(--bp-blue,#3b82f6);color:#fff}",
+    // no chip os textos ficam em uma linha so; na lista, empilhados
+    ".bp-route-selector__texts{min-width:0;display:flex;align-items:baseline;gap:5px;overflow:hidden}",
+    ".bp-route-selector__name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}",
+    ".bp-route-selector__kind{font-size:10px;color:var(--bp-text-dim,#9aa2b8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}",
+    ".bp-route-selector__toggle .bp-route-selector__kind::before{content:'\\00b7';margin-right:5px}",
+    ".bp-route-selector__option .bp-route-selector__texts{display:block;flex:1}",
+    ".bp-route-selector__option .bp-route-selector__name,",
+    ".bp-route-selector__option .bp-route-selector__kind{display:block;line-height:1.3}",
+    ".bp-route-selector__chevron{flex:none;width:11px;height:11px;color:var(--bp-text-faint,#6b7488);transition:transform .15s ease}",
+    ".bp-route-selector--open .bp-route-selector__chevron{transform:rotate(180deg)}",
+    ".bp-route-selector--open .bp-route-selector__toggle{border-color:var(--bp-accent,#22c55e)}",
+    ".bp-route-selector__list{position:absolute;left:0;top:100%;margin-top:5px;min-width:230px;max-width:100%;z-index:41;",
+    // altura de ~5 opcoes: a 6a fica cortada pela metade, que e o que avisa
+    // que a lista rola. overscroll-behavior segura o scroll dentro do dropdown.
+    "border-radius:12px;overflow-x:hidden;overflow-y:auto;max-height:230px;overscroll-behavior:contain;",
+    "background:var(--bp-panel-alt,#1c2131);border:1px solid var(--bp-border,#262c40);",
+    "box-shadow:0 12px 28px -8px rgba(0,0,0,.65)}",
+    ".bp-route-selector__list::-webkit-scrollbar{width:8px}",
+    ".bp-route-selector__list::-webkit-scrollbar-track{background:transparent}",
+    ".bp-route-selector__list::-webkit-scrollbar-thumb{border-radius:999px;border:2px solid transparent;",
+    "background:var(--bp-border,#262c40);background-clip:content-box}",
+    ".bp-route-selector__list::-webkit-scrollbar-thumb:hover{background:var(--bp-text-faint,#6b7488);background-clip:content-box}",
+    ".bp-route-selector__option{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;background:transparent;border:0;",
+    "color:var(--bp-text,#e7e9ee);cursor:pointer;text-align:left}",
+    ".bp-route-selector__option:hover{background:var(--bp-border,#262c40)}",
+    ".bp-route-selector__option + .bp-route-selector__option{border-top:1px solid var(--bp-border-soft,#1f2536)}",
+    ".bp-route-selector__check{flex:none;width:12px;height:12px;color:var(--bp-accent,#22c55e)}"
+  ].join("");
+
+  function ensureStyle() {
+    if (document.getElementById(STYLE_ID)) return;
+    var style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = CSS;
+    (document.head || document.documentElement).appendChild(style);
+  }
+
+  /* -------------------------------------------------------------------- ui */
+
+  var SVG_NS = "http://www.w3.org/2000/svg";
+
+  function svg(viewBox, paths, cls) {
+    var el = document.createElementNS(SVG_NS, "svg");
+    el.setAttribute("viewBox", viewBox);
+    el.setAttribute("fill", "currentColor");
+    if (cls) el.setAttribute("class", cls);
+    for (var i = 0; i < paths.length; i++) {
+      var p = document.createElementNS(SVG_NS, "path");
+      p.setAttribute("d", paths[i]);
+      el.appendChild(p);
+    }
+    return el;
+  }
+
+  function whatsappIcon() {
+    return svg("0 0 24 24", [
+      "M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 1.82c2.16 0 4.19.84 5.72 2.37a8.04 8.04 0 0 1 2.37 5.72c0 4.46-3.63 8.09-8.09 8.09a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.11.82.83-3.04-.2-.31a8.13 8.13 0 0 1-1.24-4.23c0-4.46 3.63-8.09 8.2-8.09Zm-2.4 4.1c-.17 0-.45.06-.69.31-.24.25-.9.88-.9 2.15 0 1.27.92 2.5 1.05 2.67.13.17 1.8 2.86 4.46 3.9 2.21.86 2.66.69 3.14.65.48-.04 1.55-.63 1.77-1.24.22-.61.22-1.14.16-1.25-.07-.11-.24-.17-.5-.3-.26-.13-1.55-.77-1.79-.85-.24-.09-.41-.13-.59.13-.17.25-.67.85-.82 1.02-.15.18-.3.2-.56.07-.26-.13-1.1-.41-2.1-1.3-.78-.69-1.3-1.55-1.45-1.81-.15-.26-.02-.4.11-.53.12-.12.26-.3.39-.46.13-.15.17-.26.26-.44.09-.17.04-.33-.02-.46-.07-.13-.58-1.41-.8-1.93-.21-.5-.42-.44-.58-.44l-.5-.01Z"
+    ]);
+  }
+
+  function phoneIcon() {
+    return svg("0 0 20 20", [
+      "M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.5 11.5 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15C7.82 18 2 12.18 2 5V3.5Z"
+    ]);
+  }
+
+  function chevronIcon() {
+    return svg("0 0 20 20", [
+      "M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z"
+    ], "bp-route-selector__chevron");
+  }
+
+  function checkIcon() {
+    return svg("0 0 20 20", [
+      "M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-3.5-3.5a1 1 0 1 1 1.4-1.4l2.8 2.79 6.8-6.79a1 1 0 0 1 1.4 0Z"
+    ], "bp-route-selector__check");
+  }
+
+  function buildIconBadge(route) {
+    var wrap = document.createElement("span");
+    var whats = isWhatsappRoute(route);
+    wrap.className =
+      "bp-route-selector__icon " +
+      (whats ? "bp-route-selector__icon--whatsapp" : "bp-route-selector__icon--phone");
+    wrap.appendChild(whats ? whatsappIcon() : phoneIcon());
+
+    /* tronco wavoip sem `usuario` nao tem device para consultar: sem bolinha,
+       em vez de uma bolinha cinza eterna */
+    if (whats && route.user) {
+      var info = statusOf(route);
+      var dot = document.createElement("span");
+      dot.className = "bp-route-selector__dot bp-route-selector__dot--" + statusKind(info);
+      dot.title = statusLabel(info);
+      wrap.appendChild(dot);
+    }
+
+    return wrap;
+  }
+
+  function buildTexts(route) {
+    var texts = document.createElement("span");
+    texts.className = "bp-route-selector__texts";
+
+    var name = document.createElement("span");
+    name.className = "bp-route-selector__name";
+    name.textContent = route.name;
+
+    var kind = document.createElement("span");
+    kind.className = "bp-route-selector__kind";
+    kind.textContent = routeKindLabel(route);
+
+    texts.appendChild(name);
+    texts.appendChild(kind);
+    return texts;
+  }
+
+  function closeList() {
+    if (!isOpen) return;
+    isOpen = false;
+    if (pendingRefresh) refreshUi(); // atualizacao que chegou com o dropdown aberto
+    else render();
+  }
+
+  function onDocumentClick(event) {
+    if (!isOpen || !rootEl) return;
+    if (!rootEl.contains(event.target)) closeList();
+  }
+
+  function onDocumentKeydown(event) {
+    if (isOpen && event.key === "Escape") {
+      event.stopPropagation();
+      closeList();
+    }
+  }
+
+  function render() {
+    if (!rootEl) return;
+
+    var selected = getSelected();
+    if (!selected || routes.length < 2) {
+      // 0 ou 1 rota: nada de seletor na tela (o prefixo da unica rota continua valendo)
+      rootEl.remove();
+      rootEl = null;
+      isOpen = false;
+      return;
+    }
+
+    rootEl.className = "bp-route-selector" + (isOpen ? " bp-route-selector--open" : "");
+    rootEl.textContent = "";
+
+    var toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.className = "bp-route-selector__toggle";
+    var infoSelecionada = statusOf(selected);
+    toggle.title =
+      t("routeSelectorLabel", "Origem da chamada") +
+      ": " +
+      selected.name +
+      " · " +
+      routeKindLabel(selected) +
+      (infoSelecionada || (isWhatsappRoute(selected) && selected.user)
+        ? " · " + statusLabel(infoSelecionada)
+        : "");
+    toggle.setAttribute("aria-haspopup", "listbox");
+    toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
+    toggle.appendChild(buildIconBadge(selected));
+    toggle.appendChild(buildTexts(selected));
+    toggle.appendChild(chevronIcon());
+    toggle.addEventListener("click", function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      isOpen = !isOpen;
+      render();
+    });
+    rootEl.appendChild(toggle);
+
+    if (!isOpen) return;
+
+    var list = document.createElement("div");
+    list.className = "bp-route-selector__list";
+    list.setAttribute("role", "listbox");
+
+    routes.forEach(function (route) {
+      var option = document.createElement("button");
+      option.type = "button";
+      option.className = "bp-route-selector__option";
+      option.setAttribute("role", "option");
+      option.setAttribute("aria-selected", route.id === selected.id ? "true" : "false");
+      option.appendChild(buildIconBadge(route));
+
+      var texts = buildTexts(route);
+      /* "connecting" = numero ainda nao pareado: o caminho para resolver isso e
+         ler o QR, entao o link fica na propria opcao */
+      if (statusKind(statusOf(route)) === "pending") {
+        var qr = document.createElement("span");
+        qr.className = "bp-route-selector__qr";
+        qr.textContent = t("routeSelectorLinkNumber", "Vincular número");
+        qr.title = qrUrl(route.user);
+        qr.addEventListener("click", function (event) {
+          event.preventDefault();
+          event.stopPropagation();
+          window.open(qrUrl(route.user), "_blank", "noopener");
+        });
+        texts.appendChild(qr);
+      }
+      option.appendChild(texts);
+
+      if (route.id === selected.id) option.appendChild(checkIcon());
+      option.addEventListener("click", function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        isOpen = false;
+        setSelected(route.id);
+        render();
+      });
+      list.appendChild(option);
+    });
+
+    rootEl.appendChild(list);
+  }
+
+  /* ---------------------------------------------------------------- mount */
+
+  /**
+   * O discador renderiza .display (numero) e depois .keypad, irmaos dentro da
+   * mesma raiz. Existe outro elemento .display em outro componente do bundle,
+   * entao ancoramos pelo .keypad (unico) e subimos para o .display irmao dele.
+   * O chip entra ACIMA do display; sem display, entra acima do proprio keypad.
+   */
+  function findAnchor() {
+    var keypad = document.querySelector("#app .keypad");
+    if (!keypad || !keypad.parentNode) return null;
+
+    var siblings = keypad.parentNode.children;
+    for (var i = 0; i < siblings.length; i++) {
+      if (siblings[i].classList.contains("display")) return siblings[i];
+    }
+    return keypad;
+  }
+
+  /**
+   * A tela de ligacao (.call-screen) e um overlay absolute inset-0 por cima do
+   * discador. O chip nao pode aparecer durante a chamada — nem "furando" o
+   * overlay pelo z-index, nem ocupando espaco atras dele.
+   */
+  function isCallActive() {
+    var screen = document.querySelector("#app .call-screen");
+    return !!screen && screen.getClientRects().length > 0;
+  }
+
+  function unmount() {
+    if (!rootEl) return;
+    rootEl.remove();
+    rootEl = null;
+    isOpen = false;
+  }
+
+  function mount() {
+    if (routes.length < 2) return unmount();
+    if (isCallActive()) return unmount();
+
+    var anchor = findAnchor();
+    if (!anchor || !anchor.parentNode) return;
+    if (rootEl && rootEl.isConnected && rootEl.parentNode === anchor.parentNode) return;
+
+    ensureStyle();
+    if (rootEl) rootEl.remove();
+    rootEl = document.createElement("div");
+    rootEl.className = "bp-route-selector";
+    isOpen = false;
+    anchor.parentNode.insertBefore(rootEl, anchor);
+    render();
+    console.info(DEBUG_PREFIX, "seletor montado", { acima: anchor.className });
+  }
+
+  /**
+   * Decide se o chip deve estar na tela agora: some durante a ligacao e volta
+   * quando ela termina; reinsere quando o Vue remonta o discador (troca de aba).
+   */
+  function syncPresence() {
+    if (isCallActive()) return unmount();
+    if (!rootEl || !rootEl.isConnected) {
+      rootEl = null;
+      mount();
+    }
+  }
+
+  function watchDom() {
+    var scheduled = false;
+    var observer = new MutationObserver(function () {
+      // o cronometro da ligacao dispara mutacoes a cada segundo: agrupa por frame
+      if (scheduled) return;
+      scheduled = true;
+      requestAnimationFrame(function () {
+        scheduled = false;
+        syncPresence();
+      });
+    });
+    observer.observe(document.documentElement, { childList: true, subtree: true });
+  }
+
+  /* -------------------------------------------------------------- init/api */
+
+  function routesSignature(list) {
+    return list
+      .map(function (r) {
+        return [r.id, r.name, r.host, r.prefix || "", r.user || ""].join("|");
+      })
+      .join("//");
+  }
+
+  /**
+   * Troca a lista de rotas preservando a selecao atual sempre que o id ainda
+   * existir. Se o dropdown estiver aberto, a re-renderizacao espera ele fechar
+   * para nao trocar as opcoes debaixo do clique do usuario.
+   */
+  function applyRoutes(list, preferredId) {
+    var next = normalizeRoutes(list);
+    var changed = routesSignature(next) !== routesSignature(routes);
+    var wanted = preferredId != null ? String(preferredId) : selectedId;
+
+    routes = next;
+
+    /* liga/desliga o polling conforme a lista passe a ter (ou deixe de ter)
+       tronco wavoip com device */
+    if (whatsappUsers().length) startStatusPolling();
+    else stopStatusPolling();
+
+    var previousSelection = selectedId;
+    if (!routes.length) {
+      selectedId = null;
+    } else if (routes.some(function (r) { return r.id === wanted; })) {
+      selectedId = wanted;
+    } else {
+      selectedId = routes[0].id;
+      if (previousSelection && previousSelection !== selectedId) {
+        console.warn(DEBUG_PREFIX, "rota selecionada saiu da lista; usando", selectedId);
+      }
+    }
+
+    if (!changed && selectedId === previousSelection) return routes;
+
+    if (isOpen) {
+      pendingRefresh = true; // aplicado em closeList()
+    } else {
+      refreshUi();
+    }
+    if (selectedId !== previousSelection) notify();
+    return routes;
+  }
+
+  function refreshUi() {
+    pendingRefresh = false;
+    if (rootEl) {
+      rootEl.remove();
+      rootEl = null;
+    }
+    mount();
+  }
+
+  /** Busca as rotas na API e aplica. Em caso de falha, mantem as rotas atuais. */
+  function load(isRefresh) {
+    return Promise.all([fetchRoutes(), isRefresh ? Promise.resolve(selectedId) : loadSelection()])
+      .then(function (result) {
+        var mapped = mapTrunks(result[0]);
+        applyRoutes(mapped, result[1]);
+
+        console.info(DEBUG_PREFIX, isRefresh ? "rotas atualizadas" : "rotas carregadas", {
+          total: routes.length,
+          seletorVisivel: routes.length > 1,
+          selecionada: selectedId
+        });
+
+        return routes;
+      })
+      .catch(function (err) {
+        var motivo = err && err.message ? err.message : err;
+        if (err && err.semSessao) {
+          console.warn(DEBUG_PREFIX, "rotas nao carregadas:", motivo);
+        } else {
+          console.error(
+            DEBUG_PREFIX,
+            isRefresh ? "falha ao atualizar rotas" : "falha ao carregar rotas",
+            motivo
+          );
+        }
+        if (routes.length) return routes; // mantem o que ja estava valendo
+
+        return readStorage(OVERRIDE_STORAGE_KEY).then(function (override) {
+          if (!Array.isArray(override) || !override.length) return routes;
+          console.warn(
+            DEBUG_PREFIX,
+            "API indisponivel — usando a lista manual de",
+            OVERRIDE_STORAGE_KEY,
+            "(" + override.length + " item(ns))"
+          );
+          applyRoutes(mapTrunks(override));
+          return routes;
+        });
+      });
+  }
+
+  function startAutoRefresh() {
+    if (refreshTimer) return;
+    refreshTimer = setInterval(function () {
+      load(true);
+    }, REFRESH_INTERVAL_MS);
+  }
+
+  function stopAutoRefresh() {
+    if (!refreshTimer) return;
+    clearInterval(refreshTimer);
+    refreshTimer = null;
+  }
+
+  var api = {
+    /** Todas as rotas disponiveis. */
+    getRoutes: function () {
+      return routes.slice();
+    },
+    /** Rota atualmente selecionada (ou null). */
+    getSelected: getSelected,
+    /**
+     * Resolve quando a primeira carga de rotas termina. Espere por ela antes de
+     * discar: sem a lista carregada nao ha rota selecionada e o prefixo do
+     * tronco nao entra no destino do INVITE.
+     */
+    whenReady: function () {
+      return readyPromise;
+    },
+    /** Seleciona uma rota pelo id. */
+    select: function (id) {
+      setSelected(String(id));
+      render();
+    },
+    /** Prefixo da rota selecionada, sempre string ("" quando prefix e null). */
+    getPrefix: function () {
+      var route = getSelected();
+      return route && route.prefix ? route.prefix : "";
+    },
+    /** Concatena o prefixo da rota selecionada no destino do INVITE. */
+    applyPrefix: function (target) {
+      var number = target == null ? "" : String(target);
+      var prefix = api.getPrefix();
+      if (!prefix || !number) return number;
+      if (number.indexOf(prefix) === 0) return number; // ja prefixado
+      return prefix + number;
+    },
+    /**
+     * Remove o prefixo de tronco de um destino — o inverso de applyPrefix().
+     * Testa TODAS as rotas conhecidas, nao so a selecionada: o numero pode ter
+     * saido por outro tronco (rediscagem, entrada antiga do historico). O
+     * fallback por formato ("01*", "14*") ainda pega registros gravados antes
+     * de o vazamento ser corrigido.
+     */
+    stripPrefix: function (target) {
+      var number = target == null ? "" : String(target);
+      if (!number) return number;
+      for (var i = 0; i < routes.length; i++) {
+        var p = routes[i].prefix;
+        if (p && number.length > p.length && number.indexOf(p) === 0) {
+          return number.slice(p.length);
+        }
+      }
+      var generico = /^\d{1,4}\*(.+)$/.exec(number);
+      return generico ? generico[1] : number;
+    },
+    /** true quando o host da rota casa com *.wavoip.com. */
+    isWhatsapp: function (route) {
+      return isWhatsappRoute(route || getSelected());
+    },
+    /** Substitui as rotas em tempo de execucao, no formato interno. */
+    setRoutes: function (list) {
+      return applyRoutes(list);
+    },
+    /** Refaz a busca na API agora (o refresh automatico continua no intervalo). */
+    reload: function () {
+      return load(routes.length > 0);
+    },
+    /** Liga/desliga o refresh automatico de 3 minutos. */
+    startAutoRefresh: startAutoRefresh,
+    stopAutoRefresh: stopAutoRefresh,
+    /**
+     * Diagnostico pelo console: testa varios caminhos com e sem X-Vx-Token,
+     * usando /api/voxfree/profile como controle (esse a extensao sabe que
+     * funciona). Serve para provar se o token vale para a rota dos troncos.
+     */
+    diagnose: function () {
+      return Promise.all([
+        loadToken(),
+        readStorage(TRUNKS_PATH_STORAGE_KEY),
+        readStorage("bravophoneRamaisUrl")
+      ]).then(function (session) {
+        var token = session[0];
+        var paths = [
+          "/api/voxfree/profile", // controle: token valido tem que dar 200
+          session[1] || TRUNKS_PATH,
+          "/api/voxfree/trunks",
+          "/api/voxfree/troncos",
+          "/api/troncos"
+        ];
+        if (session[2]) paths.push(session[2]); // ramaisUrl: 2o controle
+
+        var probe = function (path, withToken) {
+          var url = API_BASE + path + (path.indexOf("?") >= 0 ? "&" : "?") + "_=" + Date.now();
+          /* sem credentials: cookie nunca autentica cross-origin aqui (a
+             resposta nao traz Access-Control-Allow-Credentials), entao a
+             coluna "sem token" mede mesmo a ausencia de credencial */
+          return fetch(url, {
+            cache: "no-store",
+            headers: withToken && token ? { "X-Vx-Token": token } : {}
+          })
+            .then(function (response) {
+              return response.text().then(function (body) {
+                return { status: response.status, body: body.slice(0, 90) };
+              });
+            })
+            .catch(function (err) {
+              return { status: "rede", body: String(err && err.message) };
+            });
+        };
+
+        return Promise.all(
+          paths.map(function (path) {
+            return Promise.all([probe(path, true), probe(path, false)]).then(function (r) {
+              return {
+                caminho: path,
+                "com X-Vx-Token": r[0].status,
+                "sem token": r[1].status,
+                resposta: r[0].body
+              };
+            });
+          })
+        ).then(function (rows) {
+          console.table(rows);
+          console.log(DEBUG_PREFIX, "estado", {
+            temToken: !!token,
+            rotasCarregadas: routes.length,
+            chipVisivel: routes.length > 1,
+            chipNoDom: !!(rootEl && rootEl.isConnected),
+            discadorNaTela: !!document.querySelector("#app .keypad")
+          });
+          return rows;
+        });
+      });
+    },
+    /** Reinsere o chip no discador (util para depurar pelo console). */
+    remount: function () {
+      if (rootEl) rootEl.remove();
+      rootEl = null;
+      mount();
+      return !!rootEl;
+    },
+    /** Notificado a cada troca de rota. */
+    onChange: function (callback) {
+      if (typeof callback === "function") listeners.push(callback);
+    }
+  };
+
+  window.BravoPhoneRoutes = api;
+
+  document.addEventListener("click", onDocumentClick, true);
+  document.addEventListener("keydown", onDocumentKeydown, true);
+
+  /**
+   * A rota tambem pode ser trocada de fora: o cartao de ligacao das paginas
+   * (content-script-wavoip.js) grava bravophoneSelectedRoute antes de pedir a
+   * discagem. Sem escutar o storage, um popup ja aberto continuaria com a rota
+   * anterior e a chamada sairia pelo tronco errado.
+   */
+  function watchExternalSelection() {
+    if (!hasStorage() || !chrome.storage.onChanged) return;
+    chrome.storage.onChanged.addListener(function (changes, area) {
+      if (area !== "local" || !changes[STORAGE_KEY]) return;
+
+      var id = changes[STORAGE_KEY].newValue;
+      if (id == null) return;
+      id = String(id);
+      if (id === selectedId) return;
+      if (!routes.some(function (r) { return r.id === id; })) return;
+
+      console.info(DEBUG_PREFIX, "rota trocada por fora:", id);
+      setSelected(id, false); /* ja esta gravado; nao regravar */
+      if (isOpen) pendingRefresh = true; // aplicado em closeList()
+      else refreshUi();
+    });
+  }
+
+  /**
+   * O token chega depois: este script roda no parse do popup.html, antes de o
+   * popup.js (defer) montar o Vue e muito antes de o usuario terminar o login.
+   * Sem isto a primeira carga falhava por falta de sessao e as rotas so
+   * apareciam no refresh de 3 minutos.
+   */
+  function watchToken() {
+    if (!hasStorage() || !chrome.storage.onChanged) return;
+    chrome.storage.onChanged.addListener(function (changes, area) {
+      if (area !== "local" || !changes[TOKEN_STORAGE_KEY]) return;
+      if (!changes[TOKEN_STORAGE_KEY].newValue) return; /* logout: nao recarrega */
+      console.info(DEBUG_PREFIX, TOKEN_STORAGE_KEY, "gravado — recarregando as rotas");
+      load(!!routes.length);
+    });
+  }
+
+  function boot() {
+    watchDom();
+    watchExternalSelection();
+    watchToken();
+    load().then(function () {
+      markReady();
+      startAutoRefresh();
+    });
+    /* se /api/trunks pendurar, a discagem nao pode ficar presa esperando: sai
+       sem prefixo, que e melhor do que nao sair */
+    setTimeout(markReady, 8000);
+    // o popup pode ficar minutos aberto sem foco: revalida ao voltar a aparecer
+    document.addEventListener("visibilitychange", function () {
+      if (!document.hidden) load(true);
+    });
+    window.addEventListener("unload", function () {
+      stopAutoRefresh();
+      stopStatusPolling();
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot);
+  } else {
+    boot();
+  }
+})();