@coventia/softphone 0.1.0 → 0.2.1

package/dist/ui/index.js

@@ -1,6 +1,6 @@
 import { isWebRtcSupported } from '../chunk-KAXEMJ7E.js';
-import { useSoftphone, useSoftphoneState, useCall, useActiveCall, useIsLeader, useLastError, useDevices } from '../chunk-3V2L6UTK.js';
-import '../chunk-N2N2EQQJ.js';
+import { useSoftphone, useSoftphoneState, useCall, usePresence, useActiveCall, useIsLeader, useLastError, useDevices } from '../chunk-LMJXX4YM.js';
+import '../chunk-7R6LOOAI.js';
 import { forwardRef, createElement, useState, useRef, useLayoutEffect, useEffect, useCallback, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -550,21 +550,263 @@ function caretAfterDigits(formatted, digitsBefore) {
 function digitsBeforeCaret(text, caret) {
   return (text.slice(0, caret).match(/\d/g) ?? []).length;
 }
-var KEYS = [
-  ["1", "", true],
-  ["2", "ABC", true],
-  ["3", "DEF", true],
-  ["4", "GHI", true],
-  ["5", "JKL", true],
-  ["6", "MNO", true],
-  ["7", "PQRS", true],
-  ["8", "TUV", true],
-  ["9", "WXYZ", true],
-  ["*", "", false],
-  ["0", "+", true],
-  ["#", "", false]
+
+// src/ui/dialing/keys.ts
+var KEYPAD_KEYS = [
+  ["1", ""],
+  ["2", "ABC"],
+  ["3", "DEF"],
+  ["4", "GHI"],
+  ["5", "JKL"],
+  ["6", "MNO"],
+  ["7", "PQRS"],
+  ["8", "TUV"],
+  ["9", "WXYZ"],
+  ["*", ""],
+  ["0", "+"],
+  ["#", ""]
 ];
-function Dialpad({ outcome = null, onIntent } = {}) {
+
+// src/ui/audio/audio.ts
+var TONE_HZ = 425;
+function createRemoteAudio() {
+  const el = document.createElement("audio");
+  el.autoplay = true;
+  el.style.display = "none";
+  document.body.appendChild(el);
+  return {
+    attach(stream) {
+      el.srcObject = stream;
+      void el.play().catch(() => {
+      });
+    },
+    detach() {
+      el.srcObject = null;
+    },
+    destroy() {
+      el.srcObject = null;
+      el.remove();
+    },
+    async setOutputDevice(deviceId) {
+      if (typeof el.setSinkId !== "function") return;
+      try {
+        await el.setSinkId(deviceId ?? "");
+      } catch {
+      }
+    }
+  };
+}
+var shared = null;
+function sharedContext() {
+  if (shared) return shared;
+  const Ctor = typeof AudioContext !== "undefined" ? AudioContext : globalThis.webkitAudioContext;
+  if (!Ctor) return null;
+  shared = new Ctor();
+  return shared;
+}
+function primeAudio() {
+  const ctx = sharedContext();
+  if (ctx && ctx.state === "suspended") void ctx.resume?.().catch(() => {
+  });
+}
+function playRingtone() {
+  const ctx = sharedContext();
+  if (!ctx) return { stop() {
+  } };
+  const gain = ctx.createGain();
+  gain.gain.value = 0;
+  gain.connect(ctx.destination);
+  const osc = ctx.createOscillator();
+  osc.type = "sine";
+  osc.frequency.value = TONE_HZ;
+  osc.connect(gain);
+  osc.start();
+  const LEVEL = 0.8;
+  const RAMP = 0.02;
+  const burst = (at, dur) => {
+    gain.gain.setValueAtTime(0, at);
+    gain.gain.linearRampToValueAtTime(LEVEL, at + RAMP);
+    gain.gain.setValueAtTime(LEVEL, at + dur - RAMP);
+    gain.gain.linearRampToValueAtTime(0, at + dur);
+  };
+  const scheduleCycle = (at) => {
+    burst(at, 0.4);
+    burst(at + 0.6, 0.4);
+    return 3;
+  };
+  const LOOKAHEAD = 0.5;
+  const TICK_MS = 150;
+  const LEAD = 0.08;
+  let stopped = false;
+  let timer = null;
+  let nextAt = 0;
+  const pump = () => {
+    while (nextAt < ctx.currentTime + LOOKAHEAD) nextAt += scheduleCycle(nextAt);
+  };
+  void Promise.resolve(ctx.resume?.()).catch(() => {
+  }).finally(() => {
+    if (stopped) return;
+    nextAt = ctx.currentTime + LEAD;
+    pump();
+    timer = setInterval(pump, TICK_MS);
+  });
+  return {
+    stop() {
+      stopped = true;
+      if (timer) clearInterval(timer);
+      try {
+        osc.stop();
+      } catch {
+      }
+      try {
+        gain.disconnect();
+      } catch {
+      }
+    }
+  };
+}
+function playCallEndedTone() {
+  const ctx = sharedContext();
+  if (!ctx) return;
+  const gain = ctx.createGain();
+  gain.gain.value = 0;
+  gain.connect(ctx.destination);
+  const osc = ctx.createOscillator();
+  osc.type = "sine";
+  osc.frequency.value = TONE_HZ;
+  osc.connect(gain);
+  osc.start();
+  const LEVEL = 0.55;
+  const RAMP = 8e-3;
+  const BEEP = 0.25;
+  void Promise.resolve(ctx.resume?.()).catch(() => {
+  }).finally(() => {
+    const at = ctx.currentTime + 0.02;
+    gain.gain.setValueAtTime(0, at);
+    gain.gain.linearRampToValueAtTime(LEVEL, at + RAMP);
+    gain.gain.setValueAtTime(LEVEL, at + BEEP - RAMP);
+    gain.gain.linearRampToValueAtTime(0, at + BEEP);
+    const totalMs = (at + BEEP - ctx.currentTime) * 1e3;
+    setTimeout(() => {
+      try {
+        osc.stop();
+      } catch {
+      }
+      try {
+        gain.disconnect();
+      } catch {
+      }
+    }, totalMs);
+  });
+}
+var DTMF_ROWS_HZ = [697, 770, 852, 941];
+var DTMF_COLS_HZ = [1209, 1336, 1477];
+var DTMF_LAYOUT = ["123", "456", "789", "*0#"];
+function dtmfFrequencies(key) {
+  if (key.length !== 1) return null;
+  for (let row = 0; row < DTMF_LAYOUT.length; row++) {
+    const col = DTMF_LAYOUT[row].indexOf(key);
+    if (col !== -1) return [DTMF_ROWS_HZ[row], DTMF_COLS_HZ[col]];
+  }
+  return null;
+}
+function playKeyTone(key) {
+  const hz = dtmfFrequencies(key);
+  if (!hz) return;
+  const ctx = sharedContext();
+  if (!ctx) return;
+  const LEVEL = 0.2;
+  const RAMP = 6e-3;
+  const DURATION = 0.12;
+  const LEAD = 0.01;
+  const gain = ctx.createGain();
+  gain.gain.value = 0;
+  gain.connect(ctx.destination);
+  const oscillators = hz.map((freq) => {
+    const osc = ctx.createOscillator();
+    osc.type = "sine";
+    osc.frequency.value = freq;
+    osc.connect(gain);
+    osc.start();
+    return osc;
+  });
+  const fire = () => {
+    const at = ctx.currentTime + LEAD;
+    gain.gain.setValueAtTime(0, at);
+    gain.gain.linearRampToValueAtTime(LEVEL, at + RAMP);
+    gain.gain.setValueAtTime(LEVEL, at + DURATION - RAMP);
+    gain.gain.linearRampToValueAtTime(0, at + DURATION);
+    for (const osc of oscillators) osc.stop(at + DURATION);
+    oscillators[0].onended = () => gain.disconnect();
+  };
+  if (ctx.state === "running") fire();
+  else void Promise.resolve(ctx.resume?.()).catch(() => {
+  }).finally(fire);
+}
+var ringbackUrl = null;
+function ringbackSource() {
+  if (ringbackUrl) return ringbackUrl;
+  const sampleRate = 48e3;
+  const channels = 2;
+  const bytesPerSample = 2;
+  const amp = 0.5;
+  const toneSec = 1.5;
+  const silenceSec = 3;
+  const totalFrames = Math.round((toneSec + silenceSec) * sampleRate);
+  const toneFrames = Math.round(toneSec * sampleRate);
+  const ramp = Math.round(0.02 * sampleRate);
+  const blockAlign = channels * bytesPerSample;
+  const dataSize = totalFrames * blockAlign;
+  const buffer = new ArrayBuffer(44 + dataSize);
+  const view = new DataView(buffer);
+  const str = (off, s) => {
+    for (let i = 0; i < s.length; i++) view.setUint8(off + i, s.charCodeAt(i));
+  };
+  str(0, "RIFF");
+  view.setUint32(4, 36 + dataSize, true);
+  str(8, "WAVE");
+  str(12, "fmt ");
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, channels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * blockAlign, true);
+  view.setUint16(32, blockAlign, true);
+  view.setUint16(34, bytesPerSample * 8, true);
+  str(36, "data");
+  view.setUint32(40, dataSize, true);
+  for (let i = 0; i < totalFrames; i++) {
+    let sample = 0;
+    if (i < toneFrames) {
+      let env = 1;
+      if (i < ramp) env = i / ramp;
+      else if (i > toneFrames - ramp) env = Math.max(0, (toneFrames - i) / ramp);
+      sample = Math.sin(2 * Math.PI * TONE_HZ * (i / sampleRate)) * amp * env;
+    }
+    const s16 = Math.round(sample * 32767);
+    const off = 44 + i * blockAlign;
+    for (let c = 0; c < channels; c++) view.setInt16(off + c * bytesPerSample, s16, true);
+  }
+  ringbackUrl = URL.createObjectURL(new Blob([buffer], { type: "audio/wav" }));
+  return ringbackUrl;
+}
+function playRingback() {
+  const el = document.createElement("audio");
+  el.src = ringbackSource();
+  el.loop = true;
+  el.style.display = "none";
+  document.body.appendChild(el);
+  void el.play().catch(() => {
+  });
+  return {
+    stop() {
+      el.pause();
+      el.remove();
+    }
+  };
+}
+var NOT_DIALABLE = /* @__PURE__ */ new Set(["*", "#"]);
+function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
   const softphone = useSoftphone();
   const state = useSoftphoneState();
   const [value, setValue] = useState("");
@@ -585,6 +827,7 @@ function Dialpad({ outcome = null, onIntent } = {}) {
   const append = (key) => {
     onIntent?.();
     setValue((v) => v + key);
+    if (keyTones) playKeyTone(key);
   };
   const backspace = () => {
     onIntent?.();
@@ -629,22 +872,25 @@ function Dialpad({ outcome = null, onIntent } = {}) {
       )
     ] }),
     /* @__PURE__ */ jsx("p", { className: "cv-dial-outcome", role: "status", part: "error", "data-shown": outcome !== null, children: outcome?.text ?? "" }),
-    /* @__PURE__ */ jsx("div", { className: "cv-keypad", children: KEYS.map(([key, letters, dialable]) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "cv-key",
-        "data-dialable": dialable,
-        onClick: () => dialable && append(key),
-        "aria-disabled": !dialable,
-        title: dialable ? void 0 : "Solo disponible durante una llamada",
-        children: [
-          /* @__PURE__ */ jsx("b", { children: key }),
-          letters ? /* @__PURE__ */ jsx("small", { children: letters }) : null
-        ]
-      },
-      key
-    )) }),
+    /* @__PURE__ */ jsx("div", { className: "cv-keypad", children: KEYPAD_KEYS.map(([key, letters]) => {
+      const dialable = !NOT_DIALABLE.has(key);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "cv-key",
+          "data-dialable": dialable,
+          onClick: () => dialable && append(key),
+          "aria-disabled": !dialable,
+          title: dialable ? void 0 : "Solo disponible durante una llamada",
+          children: [
+            /* @__PURE__ */ jsx("b", { children: key }),
+            letters ? /* @__PURE__ */ jsx("small", { children: letters }) : null
+          ]
+        },
+        key
+      );
+    }) }),
     /* @__PURE__ */ jsx("div", { className: "cv-dial-foot", children: /* @__PURE__ */ jsx(
       "button",
       {
@@ -679,6 +925,125 @@ function elapsedSeconds(since, now) {
   if (!since) return 0;
   return Math.floor((now - since.getTime()) / 1e3);
 }
+function formatAge(totalSeconds) {
+  const s = Math.max(0, Math.floor(totalSeconds));
+  if (s < 60) return "justo ahora";
+  const mm = Math.floor(s / 60);
+  if (mm < 60) return `hace ${mm} min`;
+  const hh = Math.floor(mm / 60);
+  return `hace ${hh} h`;
+}
+
+// src/ui/lib/error-text.ts
+var ERROR_TEXT = {
+  // ── Engine lifecycle ────────────────────────────────────────────────────────
+  // Integrator mistakes rather than user-facing failures, but they must still read as something
+  // rather than as a blank panel if one ever reaches the UI.
+  "engine/duplicate-instance": {
+    title: "Tel\xE9fono duplicado",
+    body: "Hay otro tel\xE9fono abierto en esta p\xE1gina. Cierra uno y vuelve a cargar."
+  },
+  "engine/not-started": { title: "El tel\xE9fono a\xFAn no est\xE1 listo" },
+  "engine/destroyed": {
+    title: "Tel\xE9fono cerrado",
+    body: "Vuelve a cargar la p\xE1gina para usarlo de nuevo."
+  },
+  // ── Auth ────────────────────────────────────────────────────────────────────
+  // Never "token": the user has no idea what one is. What they can act on is the session.
+  "auth/token-fetch-failed": {
+    title: "Sin conexi\xF3n con el servidor",
+    body: "No se ha podido activar el tel\xE9fono. Reint\xE9ntalo en unos segundos."
+  },
+  "auth/token-rejected": {
+    title: "Sesi\xF3n caducada",
+    body: "Vuelve a iniciar sesi\xF3n para poder llamar."
+  },
+  // ── Media ───────────────────────────────────────────────────────────────────
+  // Verbatim from MicPermissionGate, which already says these well and says them first.
+  //
+  // NEVER ACTUALLY SHOWN via this table — these four codes (through `media/playback-blocked`, below)
+  // are never raised as a `SoftphoneError` at all. See the fuller comment on each in `core/errors.ts`
+  // for why. Copy kept here anyway so the catalogue and this file stay the same shape as every other
+  // code — `error-text.test.ts` would fail the build the moment they drifted.
+  "media/permission-denied": {
+    title: "Micr\xF3fono bloqueado",
+    body: "Perm\xEDtelo en tu navegador para poder llamar."
+  },
+  "media/no-input-device": {
+    title: "Sin micr\xF3fono",
+    body: "Conecta un micr\xF3fono y vuelve a intentarlo."
+  },
+  "media/webrtc-unsupported": {
+    title: "Llamadas no disponibles",
+    body: "Este navegador no admite llamadas. Prueba con Chrome, Edge o Firefox."
+  },
+  "media/playback-blocked": { title: "Toca la pantalla para activar el sonido" },
+  // ── Network / signalling ────────────────────────────────────────────────────
+  // "Centralita" rather than "SIP" or "registro": the user knows what a phone system is.
+  "net/registration-failed": {
+    title: "No se pudo conectar",
+    body: "No hemos podido conectar con la centralita. Reintenta en unos segundos."
+  },
+  "net/transport-failed": {
+    title: "Conexi\xF3n perdida",
+    body: "Se ha perdido la conexi\xF3n con la centralita."
+  },
+  // NEVER ACTUALLY SHOWN either — CallScreen's own "Reconectando…" already covers this, off the
+  // call's `reconnecting` state rather than this channel. See the comment in `core/errors.ts`.
+  "net/ice-failed": { title: "Recuperando el audio\u2026" },
+  // ── Call ────────────────────────────────────────────────────────────────────
+  /*
+      THE VOICE RULE FOR THIS BLOCK: say what HAPPENED, not what it is called.
+  
+      These were status labels — "Llamada perdida", "Llamada rechazada", "Sin respuesta". Each is a
+      name for a category rather than an account of an event, which is why they read as a database enum
+      someone forgot to translate into human. Worse, a label hides the ACTOR: "Llamada rechazada" never
+      says who rejected what, so the user reading it after declining a call and the user reading it
+      after being declined see the same three words.
+  
+      So each one is a short sentence about what the other person, or the phone, did — the form
+      `call/busy` already had, and the reason it was the only one here that read clearly.
+  
+      Impersonal third-person plural ("contestaron", "colgaron") throughout: the user does not know who
+      is at the other end, and it is what Spanish uses when the subject is unknown. Mixing it with the
+      singular across neighbouring lines reads as carelessness.
+  
+      LENGTH IS A HARD CONSTRAINT, not a preference. `.cv-dial-outcome` is one line at a fixed
+      `1.15rem`, and the keypad below it is `flex: 1` — a title that wraps resizes every key and shifts
+      the grid under a finger already reaching for it. `error-text.test.ts` caps this at 48 characters.
+    */
+  "call/not-answerable": { title: "Esa llamada ya ha terminado" },
+  /*
+    NOT "Comunicando", which is what this said and what sent us looking. SIP 486 is both "the line is
+    engaged" AND what almost every endpoint sends when a person presses decline — including our own
+    `reject()`. One code, two events, no way to tell them apart, so the copy has to hold both rather
+    than assert the less likely one. `call/rejected` can be definite: an endpoint sending 603 Decline
+    means exactly that.
+  */
+  "call/busy": { title: "No contestaron o la l\xEDnea estaba ocupada" },
+  "call/no-answer": { title: "No contestaron" },
+  "call/rejected": { title: "No aceptaron tu llamada" },
+  /*
+    The legacy CRM said "La persona que llamaba colgó antes de que pudieras contestar." — the right
+    fact, at three times the width of the line that has to hold it. This keeps the fact and drops the
+    words: the user needs to know the call was FOR them and that nobody is waiting on the line.
+    "Llamada perdida" alone tested badly for exactly the label reason above — it names the category
+    without saying anyone rang.
+  */
+  "call/missed": { title: "Colgaron antes de que pudieras contestar" },
+  // "No se pudo completar la llamada" was our own "something went wrong": true of every failure and
+  // useful for none. The number is what the user can actually act on.
+  "call/failed": { title: "No se pudo conectar con ese n\xFAmero" },
+  // The load-bearing half is the SECOND sentence: the original call is still up, and a user who
+  // thinks they dropped it will hang up on a client to "fix" it.
+  "call/transfer-failed": { title: "No se pudo transferir. Sigues en la llamada" },
+  "call/unsupported": { title: "Esta funci\xF3n no est\xE1 disponible" },
+  // ── Provider ────────────────────────────────────────────────────────────────
+  "provider/provision-failed": {
+    title: "No se pudo activar el tel\xE9fono",
+    body: "Si el problema contin\xFAa, contacta con soporte."
+  }
+};
 function useTicker(enabled, intervalMs = 1e3) {
   const [now, setNow] = useState(() => Date.now());
   useEffect(() => {
@@ -760,65 +1125,262 @@ function DevicePickers() {
     )
   ] });
 }
-function Control({
-  icon: Icon3,
-  label,
-  pressed = false,
-  tone,
-  onClick
+function Control({
+  icon: Icon3,
+  label,
+  pressed = false,
+  tone,
+  onClick,
+  disabled = false,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "cv-ctrl-item", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "cv-ctrl",
+        "data-tone": pressed ? tone : void 0,
+        "aria-pressed": pressed,
+        "aria-label": label,
+        onClick,
+        disabled,
+        title,
+        children: /* @__PURE__ */ jsx(Icon3, { size: 19 })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "cv-ctrl-label", "aria-hidden": true, children: label })
+  ] });
+}
+var STATUS_LABEL = {
+  ringing: "Llamada entrante",
+  dialing: "Llamando\u2026",
+  early: "Llamando\u2026",
+  answering: "Conectando\u2026",
+  reconnecting: "Reconectando\u2026",
+  held: "En espera"
+};
+var CONSULT_FAIL_CODE = {
+  busy: "call/busy",
+  "no-answer": "call/no-answer",
+  rejected: "call/rejected",
+  failed: "call/failed"
+};
+function consultFailText(reason) {
+  return ERROR_TEXT[CONSULT_FAIL_CODE[reason] ?? "call/transfer-failed"].title;
+}
+var MIN_CONSULT_HOLD_SECONDS = 10;
+function ConsultScreen({
+  mainName,
+  consultView,
+  now,
+  onReturn,
+  onComplete,
+  onHangupAll
+}) {
+  const s = consultView.state;
+  const answered = s === "active";
+  const name = consultView.remote.displayName;
+  const number = consultView.remote.number;
+  const showNumber = number !== name;
+  const heldSeconds = elapsedSeconds(consultView.answeredAt, now);
+  const [rawM = "0", ss = "00"] = formatDuration(heldSeconds).split(":");
+  const mm = rawM.padStart(2, "0");
+  const canComplete = heldSeconds >= MIN_CONSULT_HOLD_SECONDS;
+  return /* @__PURE__ */ jsxs("div", { className: "cv-view", children: [
+    /* @__PURE__ */ jsxs("div", { className: "cv-call", children: [
+      /* @__PURE__ */ jsxs("button", { type: "button", className: "cv-consult-hold-banner", onClick: onReturn, children: [
+        /* @__PURE__ */ jsx(Pause, { size: 13, "aria-hidden": true }),
+        mainName,
+        " en espera \xB7 Volver"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "cv-avatar-wrap", children: [
+        /* @__PURE__ */ jsx("div", { className: "cv-avatar", "aria-hidden": true, children: initials(name) }),
+        answered ? /* @__PURE__ */ jsx("span", { className: "cv-avatar-dot", "aria-hidden": true }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "cv-call-name", children: name }),
+      showNumber ? /* @__PURE__ */ jsx("div", { className: "cv-call-number", children: number }) : null,
+      answered ? /* @__PURE__ */ jsxs("div", { className: "cv-timer", "aria-label": "Duraci\xF3n de la llamada", children: [
+        /* @__PURE__ */ jsx("b", { children: mm }),
+        /* @__PURE__ */ jsx("i", { children: ":" }),
+        /* @__PURE__ */ jsx("b", { children: ss })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "cv-call-status", children: STATUS_LABEL[s] ?? "" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "cv-controls", children: [
+      /* @__PURE__ */ jsxs("div", { className: "cv-transfer-actions", children: [
+        answered ? /* @__PURE__ */ jsx("button", { className: "cv-btn cv-btn--accent", onClick: onComplete, disabled: !canComplete, children: "Completar" }) : null,
+        /* @__PURE__ */ jsx("button", { className: "cv-btn", onClick: onReturn, children: "Cancelar" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "cv-controls-primary", children: /* @__PURE__ */ jsxs("div", { className: "cv-ctrl-item", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "cv-round cv-round--hangup",
+            onClick: onHangupAll,
+            "aria-label": "Colgar todo",
+            children: /* @__PURE__ */ jsx(PhoneOff, { size: 26 })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Colgar todo" })
+      ] }) })
+    ] })
+  ] });
+}
+var PRESENCE_LABEL = {
+  disponible: "Disponible",
+  en_llamada: "En llamada",
+  desconectado: "Desconectado"
+};
+var PRESENCE_RANK = {
+  disponible: 0,
+  en_llamada: 1,
+  desconectado: 2
+};
+function filterAgents(agents, query) {
+  const q = query.trim().toLowerCase();
+  return agents.filter((a) => !q || (a.name ?? "").toLowerCase().includes(q) || a.extension.includes(q)).sort(
+    (a, b) => PRESENCE_RANK[a.state] - PRESENCE_RANK[b.state] || (a.name ?? a.extension).localeCompare(b.name ?? b.extension)
+  );
+}
+function truncateForButton(text, max = 16) {
+  return text.length > max ? `${text.slice(0, max)}\u2026` : text;
+}
+function TransferPicker({
+  agents,
+  myUserId,
+  query,
+  onSelect
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "cv-ctrl-item", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "cv-ctrl",
-        "data-tone": pressed ? tone : void 0,
-        "aria-pressed": pressed,
-        "aria-label": label,
-        onClick,
-        children: /* @__PURE__ */ jsx(Icon3, { size: 19 })
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { className: "cv-ctrl-label", "aria-hidden": true, children: label })
+  const others = agents.filter((a) => a.userId !== myUserId);
+  if (others.length === 0) return null;
+  const filtered = filterAgents(others, query);
+  return /* @__PURE__ */ jsxs("div", { className: "cv-presence", children: [
+    /* @__PURE__ */ jsx("div", { className: "cv-presence-list", role: "listbox", "aria-label": "Compa\xF1eros", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "cv-presence-empty", children: "Sin coincidencias" }) : filtered.map((agent) => {
+      const isBusy = agent.state === "en_llamada";
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          className: "cv-presence-item",
+          disabled: isBusy,
+          onClick: () => onSelect(agent.extension),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "cv-presence-dot", "data-state": agent.state, "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: "cv-presence-name", children: agent.name ?? agent.extension }),
+            /* @__PURE__ */ jsxs("span", { className: "cv-presence-meta", children: [
+              agent.extension,
+              " \xB7 ",
+              PRESENCE_LABEL[agent.state]
+            ] })
+          ]
+        },
+        agent.userId
+      );
+    }) }),
+    /* @__PURE__ */ jsx("p", { className: "cv-presence-legend", children: "Desconectado: sin conexi\xF3n en el softphone web. Puede atender desde otro dispositivo." })
   ] });
 }
-var STATUS_LABEL = {
-  ringing: "Llamada entrante",
-  dialing: "Llamando\u2026",
-  early: "Llamando\u2026",
-  answering: "Conectando\u2026",
-  reconnecting: "Reconectando\u2026",
-  held: "En espera"
-};
 function CallScreen({
   call,
-  incomingCallAction
+  incomingCallAction,
+  keyTones = true
 }) {
   const view = useCall(call);
-  const [showTransfer, setShowTransfer] = useState(false);
+  const softphone = useSoftphone();
+  const [panel, setPanel] = useState(null);
+  const showTransfer = panel === "transfer";
+  const showKeypad = panel === "keypad";
+  const showDevices = panel === "devices";
+  const togglePanel = (p) => setPanel((cur) => cur === p ? null : p);
   const [transferTo, setTransferTo] = useState("");
-  const [showDevices, setShowDevices] = useState(false);
+  const [consultCall, setConsultCall] = useState(null);
+  const [consultOutcome, setConsultOutcome] = useState(null);
+  const [myUserId, setMyUserId] = useState(null);
+  const consultView = useCall(consultCall);
+  const consultIntentRef = useRef(null);
   const controlsRef = useRef(null);
   const now = useTicker(view?.state === "active");
+  const consultNow = useTicker(consultView?.state === "active");
   const isConnected = view ? view.state === "active" || view.state === "held" || view.state === "reconnecting" : false;
+  const transferPickerActive = isConnected && showTransfer && !consultCall;
+  const presence = usePresence(transferPickerActive);
+  useEffect(() => {
+    const listAgents = softphone.sources?.listAgents;
+    if (!listAgents) return;
+    let cancelled = false;
+    void listAgents().then((d) => !cancelled && setMyUserId(d.me?.userId ?? null)).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [softphone]);
+  useEffect(() => {
+    if (!consultCall) return;
+    return consultCall.on("ended" /* Ended */, ({ reason }) => {
+      const intent = consultIntentRef.current;
+      consultIntentRef.current = null;
+      setConsultCall(null);
+      if (!intent) {
+        setConsultOutcome(reason);
+        if (call.state !== "ended") void call.unhold();
+      }
+    });
+  }, [consultCall, call]);
+  const startConsult = async (target) => {
+    const t = (target ?? transferTo).trim();
+    if (!t) return;
+    setConsultOutcome(null);
+    setConsultCall(await call.startConsult(t));
+  };
+  const selectPresenceAgent = (extension) => {
+    setTransferTo(extension);
+    void startConsult(extension);
+  };
+  const [quickTransfer, setQuickTransfer] = useState(false);
+  const selectPresenceAgentAuto = (extension) => {
+    void call.transfer(extension);
+  };
+  const completeTransfer = async () => {
+    if (!consultCall) return;
+    const target = transferTo.trim();
+    consultIntentRef.current = "complete";
+    await consultCall.hangup();
+    await call.transfer(target);
+  };
+  const cancelConsult = async () => {
+    consultIntentRef.current = "cancel";
+    await call.cancelConsult();
+  };
   useEffect(() => {
     if (!showDevices) return;
     const onKey = (e) => {
-      if (e.key === "Escape") setShowDevices(false);
+      if (e.key === "Escape") setPanel(null);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [showDevices]);
+  useEffect(() => {
+    if (!showKeypad) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setPanel(null);
     };
     document.addEventListener("keydown", onKey);
     if (!isConnected) return () => document.removeEventListener("keydown", onKey);
     const root = controlsRef.current?.getRootNode() ?? document;
     const onDown = (e) => {
-      if (!controlsRef.current?.contains(e.target)) setShowDevices(false);
+      if (!controlsRef.current?.contains(e.target)) setPanel(null);
     };
     root.addEventListener("pointerdown", onDown);
     return () => {
       document.removeEventListener("keydown", onKey);
       root.removeEventListener("pointerdown", onDown);
     };
-  }, [showDevices, isConnected]);
+  }, [showKeypad, isConnected]);
+  useEffect(() => {
+    if (view && view.state !== "active") setPanel((cur) => cur === "keypad" ? null : cur);
+  }, [view?.state]);
   if (!view || view.state === "ended") return null;
   const s = view.state;
   const isRinging = s === "ringing";
@@ -826,14 +1388,27 @@ function CallScreen({
   const name = view.remote.displayName;
   const number = view.remote.number;
   const showNumber = number !== name;
+  if (consultCall && consultView) {
+    return /* @__PURE__ */ jsx(
+      ConsultScreen,
+      {
+        mainName: name,
+        consultView,
+        now: consultNow,
+        onReturn: () => void cancelConsult(),
+        onComplete: () => void completeTransfer(),
+        onHangupAll: () => void call.hangup()
+      }
+    );
+  }
   const incomingAction = isRinging && view.remote.contact && incomingCallAction ? incomingCallAction : null;
   const IncomingActionIcon = incomingAction?.icon ?? ExternalLink;
   const [rawM = "0", ss = "00"] = formatDuration(elapsedSeconds(view.answeredAt, now)).split(":");
   const mm = rawM.padStart(2, "0");
   return /* @__PURE__ */ jsxs("div", { className: "cv-view", children: [
-    /* @__PURE__ */ jsx("div", { className: "cv-call", children: !inCall && showDevices ? /* @__PURE__ */ jsxs("div", { className: "cv-call-devices-inline", children: [
+    /* @__PURE__ */ jsx("div", { className: "cv-call", children: showDevices ? /* @__PURE__ */ jsxs("div", { className: "cv-call-devices-inline", children: [
       /* @__PURE__ */ jsxs("div", { className: "cv-call-devices-header", children: [
-        /* @__PURE__ */ jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setShowDevices(false), children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setPanel(null), children: [
           /* @__PURE__ */ jsx(ArrowLeft, { size: 13, "aria-hidden": true }),
           "Volver"
         ] }),
@@ -841,10 +1416,82 @@ function CallScreen({
       ] }),
       /* @__PURE__ */ jsxs("p", { className: "cv-call-devices-context", children: [
         showNumber ? `${number} \xB7 ` : "",
-        STATUS_LABEL[s] ?? ""
+        s === "active" ? `${mm}:${ss}` : STATUS_LABEL[s] ?? ""
       ] }),
       /* @__PURE__ */ jsx("div", { className: "cv-settings-section-body", children: /* @__PURE__ */ jsx(DevicePickers, {}) })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    ] }) : transferPickerActive ? (
+      /*
+        Found live (2026-09-29): the agent list a moment ago picked between showing ONE agent row
+        or forcing a scroll — `.cv-presence-list`'s own `max-height` had already been trimmed twice
+        (T7, then T3) chasing that, and both times the room it was chasing lived somewhere else.
+        The full avatar/name/giant-timer block above stayed on screen, unconditionally, the WHOLE
+        time the picker was open — exactly the anti-pattern `.cv-call-devices-inline` (above) was
+        already built to avoid for the pre-connect device picker: "an inline swap, not an overlay,
+        so it gets the full box, not a leftover sliver." The picker never got that same treatment.
+        Measured live (a temporary harness, `playground/react/picker-harness.*`, real Chromium at
+        this SDK's own real embed footprint, 310×520): the avatar+name+timer block alone cost
+        ~150px of `.cv-call`'s ~340px of usable height — more than the entire agent list, the mode
+        toggle, and the free-text row combined. Reusing `.cv-call-devices-inline`'s OWN "who's
+        calling doesn't disappear" compact context line (below) instead of the full block gives
+        that ~150px back to the one thing this screen is actually for right now: the list.
+      */
+      /* @__PURE__ */ jsxs("div", { className: "cv-transfer", children: [
+        /* @__PURE__ */ jsxs("div", { className: "cv-transfer-context", children: [
+          /* @__PURE__ */ jsx("span", { className: "cv-call-devices-title", children: name }),
+          /* @__PURE__ */ jsxs("p", { className: "cv-call-devices-context", children: [
+            showNumber ? `${number} \xB7 ` : "",
+            s === "active" ? `${mm}:${ss}` : STATUS_LABEL[s] ?? ""
+          ] })
+        ] }),
+        consultOutcome ? /* @__PURE__ */ jsx("p", { className: "cv-dial-outcome", role: "status", "data-shown": "true", children: consultFailText(consultOutcome) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "cv-transfer-row", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "cv-search",
+              value: transferTo,
+              onChange: (e) => setTransferTo(e.target.value),
+              placeholder: "Nombre, ext. o n\xFAmero",
+              "aria-label": "Transferir a",
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "cv-btn cv-btn--accent",
+              disabled: !transferTo.trim(),
+              onClick: () => void startConsult(),
+              children: transferTo.trim() ? `Llamar a ${truncateForButton(transferTo.trim())}` : "Llamar"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "cv-segmented", role: "tablist", "aria-label": "Modo de transferencia", children: [
+          { key: "consult", label: "Hablar primero" },
+          { key: "auto", label: "Transferir directo" }
+        ].map(({ key, label }) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": quickTransfer === (key === "auto"),
+            className: "cv-segmented-btn",
+            onClick: () => setQuickTransfer(key === "auto"),
+            children: label
+          },
+          key
+        )) }),
+        /* @__PURE__ */ jsx(
+          TransferPicker,
+          {
+            agents: presence,
+            myUserId,
+            query: transferTo,
+            onSelect: quickTransfer ? selectPresenceAgentAuto : selectPresenceAgent
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: "cv-avatar-wrap", children: [
         isRinging ? /* @__PURE__ */ jsx("span", { className: "cv-avatar-ping", "aria-hidden": true }) : null,
         /* @__PURE__ */ jsx("div", { className: "cv-avatar", "aria-hidden": true, children: initials(name) }),
@@ -857,7 +1504,7 @@ function CallScreen({
         /* @__PURE__ */ jsx("i", { children: ":" }),
         /* @__PURE__ */ jsx("b", { children: ss })
       ] }) : /* @__PURE__ */ jsx("div", { className: "cv-call-status", children: s === "held" ? /* @__PURE__ */ jsx("span", { className: "cv-badge-hold", children: STATUS_LABEL[s] }) : STATUS_LABEL[s] ?? "" }),
-      !inCall ? /* @__PURE__ */ jsxs("div", { className: "cv-call-chips", children: [
+      /* @__PURE__ */ jsxs("div", { className: "cv-call-chips", children: [
         incomingAction ? /* @__PURE__ */ jsxs(
           "button",
           {
@@ -870,36 +1517,11 @@ function CallScreen({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setShowDevices(true), children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setPanel("devices"), children: [
           /* @__PURE__ */ jsx(Headphones, { size: 13, "aria-hidden": true }),
           "Dispositivos"
         ] })
-      ] }) : null,
-      inCall && showTransfer ? /* @__PURE__ */ jsxs("div", { className: "cv-transfer", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            className: "cv-search",
-            value: transferTo,
-            onChange: (e) => setTransferTo(e.target.value),
-            placeholder: "Extensi\xF3n o n\xFAmero",
-            "aria-label": "Transferir a",
-            autoFocus: true
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "cv-btn cv-btn--accent",
-            disabled: !transferTo.trim(),
-            onClick: () => {
-              void call.transfer(transferTo.trim());
-              setShowTransfer(false);
-            },
-            children: "Transferir"
-          }
-        )
-      ] }) : null
+      ] })
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "cv-controls", ref: controlsRef, children: isRinging ? /* @__PURE__ */ jsxs("div", { className: "cv-controls-primary", children: [
       /* @__PURE__ */ jsxs("div", { className: "cv-ctrl-item", children: [
@@ -958,17 +1580,19 @@ function CallScreen({
             label: "Transferir",
             pressed: showTransfer,
             tone: "accent",
-            onClick: () => setShowTransfer((v) => !v)
+            onClick: () => togglePanel("transfer")
           }
         ),
         /* @__PURE__ */ jsx(
           Control,
           {
-            icon: Headphones,
-            label: "Dispositivos",
-            pressed: showDevices,
+            icon: Grid3x3,
+            label: "Teclado",
+            pressed: showKeypad,
             tone: "accent",
-            onClick: () => setShowDevices((v) => !v)
+            disabled: s !== "active",
+            title: s === "held" ? "Reanuda la llamada para usar el teclado" : s === "reconnecting" ? "No disponible mientras se reconecta" : void 0,
+            onClick: () => togglePanel("keypad")
           }
         )
       ] }) : null,
@@ -986,7 +1610,22 @@ function CallScreen({
         ),
         /* @__PURE__ */ jsx("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Colgar" })
       ] }) }),
-      inCall && showDevices ? /* @__PURE__ */ jsx("div", { className: "cv-device-popover cv-device-popover--above", role: "dialog", "aria-label": "Dispositivos de audio", children: /* @__PURE__ */ jsx(DevicePickers, {}) }) : null
+      inCall && showKeypad ? /* @__PURE__ */ jsx("div", { className: "cv-keypad-popover cv-keypad-popover--above", role: "dialog", "aria-label": "Teclado", children: KEYPAD_KEYS.map(([key, letters]) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "cv-key",
+          onClick: () => {
+            call.sendDigits(key);
+            if (keyTones) playKeyTone(key);
+          },
+          children: [
+            /* @__PURE__ */ jsx("b", { children: key }),
+            letters ? /* @__PURE__ */ jsx("small", { children: letters }) : null
+          ]
+        },
+        key
+      )) }) : null
     ] }) })
   ] });
 }
@@ -1653,159 +2292,48 @@ function MicPrompt({
   }
   if (state === "denied") {
     const guide = unblockGuide();
-    return /* @__PURE__ */ jsxs("div", { className: "cv-gate", "data-state": state, "data-tone": "danger", children: [
-      /* @__PURE__ */ jsx("span", { className: "cv-gate-mark", children: /* @__PURE__ */ jsx(MicOff, { size: 22 }) }),
-      /* @__PURE__ */ jsx("h3", { className: "cv-gate-title", children: "Micr\xF3fono bloqueado" }),
-      /* @__PURE__ */ jsx("p", { children: "Perm\xEDtelo en tu navegador para poder llamar." }),
-      /* @__PURE__ */ jsxs("details", { className: "cv-help", children: [
-        /* @__PURE__ */ jsxs("summary", { children: [
-          /* @__PURE__ */ jsx(CircleHelp, { size: 13, "aria-hidden": true }),
-          "C\xF3mo permitirlo"
-        ] }),
-        /* @__PURE__ */ jsx("ol", { children: guide.steps.map((step) => /* @__PURE__ */ jsx("li", { children: step }, step)) }),
-        guide.url ? /* @__PURE__ */ jsxs("a", { href: guide.url, target: "_blank", rel: "noreferrer noopener", children: [
-          "Gu\xEDa del navegador",
-          /* @__PURE__ */ jsx(ExternalLink, { size: 11, "aria-hidden": true })
-        ] }) : null
-      ] })
-    ] });
-  }
-  if (state === "warming") {
-    return /* @__PURE__ */ jsxs("div", { className: "cv-gate", "data-state": state, children: [
-      /* @__PURE__ */ jsx("span", { className: "cv-gate-mark", children: /* @__PURE__ */ jsx(Mic, { size: 22 }) }),
-      /* @__PURE__ */ jsx("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
-      /* @__PURE__ */ jsx("p", { children: "Acepta el aviso que muestra el navegador para continuar." })
-    ] });
-  }
-  if (state === "checking") {
-    return /* @__PURE__ */ jsxs("div", { className: "cv-gate", "data-state": state, children: [
-      /* @__PURE__ */ jsx("span", { className: "cv-gate-mark", children: /* @__PURE__ */ jsx(Mic, { size: 22 }) }),
-      /* @__PURE__ */ jsx("p", { children: "Preparando el micr\xF3fono\u2026" })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "cv-gate", "data-state": state, children: [
-    /* @__PURE__ */ jsx("span", { className: "cv-gate-mark", children: /* @__PURE__ */ jsx(Mic, { size: 22 }) }),
-    /* @__PURE__ */ jsx("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
-    /* @__PURE__ */ jsx("p", { children: "Lo necesitamos para que puedas hablar durante las llamadas." }),
-    /* @__PURE__ */ jsx("button", { className: "cv-btn cv-btn--accent", onClick: onRequest, children: "Permitir micr\xF3fono" })
-  ] });
-}
-function MicPermissionGate({ children }) {
-  const { state, request } = useMicPermission();
-  if (state === "ready") return /* @__PURE__ */ jsx(Fragment, { children });
-  return /* @__PURE__ */ jsx("div", { className: "cv-softphone", children: /* @__PURE__ */ jsx(MicPrompt, { state, onRequest: () => void request() }) });
-}
-
-// src/ui/lib/error-text.ts
-var ERROR_TEXT = {
-  // ── Engine lifecycle ────────────────────────────────────────────────────────
-  // Integrator mistakes rather than user-facing failures, but they must still read as something
-  // rather than as a blank panel if one ever reaches the UI.
-  "engine/duplicate-instance": {
-    title: "Tel\xE9fono duplicado",
-    body: "Hay otro tel\xE9fono abierto en esta p\xE1gina. Cierra uno y vuelve a cargar."
-  },
-  "engine/not-started": { title: "El tel\xE9fono a\xFAn no est\xE1 listo" },
-  "engine/destroyed": {
-    title: "Tel\xE9fono cerrado",
-    body: "Vuelve a cargar la p\xE1gina para usarlo de nuevo."
-  },
-  // ── Auth ────────────────────────────────────────────────────────────────────
-  // Never "token": the user has no idea what one is. What they can act on is the session.
-  "auth/token-fetch-failed": {
-    title: "Sin conexi\xF3n con el servidor",
-    body: "No se ha podido activar el tel\xE9fono. Reint\xE9ntalo en unos segundos."
-  },
-  "auth/token-rejected": {
-    title: "Sesi\xF3n caducada",
-    body: "Vuelve a iniciar sesi\xF3n para poder llamar."
-  },
-  // ── Media ───────────────────────────────────────────────────────────────────
-  // Verbatim from MicPermissionGate, which already says these well and says them first.
-  //
-  // NEVER ACTUALLY SHOWN via this table — these four codes (through `media/playback-blocked`, below)
-  // are never raised as a `SoftphoneError` at all. See the fuller comment on each in `core/errors.ts`
-  // for why. Copy kept here anyway so the catalogue and this file stay the same shape as every other
-  // code — `error-text.test.ts` would fail the build the moment they drifted.
-  "media/permission-denied": {
-    title: "Micr\xF3fono bloqueado",
-    body: "Perm\xEDtelo en tu navegador para poder llamar."
-  },
-  "media/no-input-device": {
-    title: "Sin micr\xF3fono",
-    body: "Conecta un micr\xF3fono y vuelve a intentarlo."
-  },
-  "media/webrtc-unsupported": {
-    title: "Llamadas no disponibles",
-    body: "Este navegador no admite llamadas. Prueba con Chrome, Edge o Firefox."
-  },
-  "media/playback-blocked": { title: "Toca la pantalla para activar el sonido" },
-  // ── Network / signalling ────────────────────────────────────────────────────
-  // "Centralita" rather than "SIP" or "registro": the user knows what a phone system is.
-  "net/registration-failed": {
-    title: "No se pudo conectar",
-    body: "No hemos podido conectar con la centralita. Reintenta en unos segundos."
-  },
-  "net/transport-failed": {
-    title: "Conexi\xF3n perdida",
-    body: "Se ha perdido la conexi\xF3n con la centralita."
-  },
-  // NEVER ACTUALLY SHOWN either — CallScreen's own "Reconectando…" already covers this, off the
-  // call's `reconnecting` state rather than this channel. See the comment in `core/errors.ts`.
-  "net/ice-failed": { title: "Recuperando el audio\u2026" },
-  // ── Call ────────────────────────────────────────────────────────────────────
-  /*
-      THE VOICE RULE FOR THIS BLOCK: say what HAPPENED, not what it is called.
-  
-      These were status labels — "Llamada perdida", "Llamada rechazada", "Sin respuesta". Each is a
-      name for a category rather than an account of an event, which is why they read as a database enum
-      someone forgot to translate into human. Worse, a label hides the ACTOR: "Llamada rechazada" never
-      says who rejected what, so the user reading it after declining a call and the user reading it
-      after being declined see the same three words.
-  
-      So each one is a short sentence about what the other person, or the phone, did — the form
-      `call/busy` already had, and the reason it was the only one here that read clearly.
-  
-      Impersonal third-person plural ("contestaron", "colgaron") throughout: the user does not know who
-      is at the other end, and it is what Spanish uses when the subject is unknown. Mixing it with the
-      singular across neighbouring lines reads as carelessness.
-  
-      LENGTH IS A HARD CONSTRAINT, not a preference. `.cv-dial-outcome` is one line at a fixed
-      `1.15rem`, and the keypad below it is `flex: 1` — a title that wraps resizes every key and shifts
-      the grid under a finger already reaching for it. `error-text.test.ts` caps this at 48 characters.
-    */
-  "call/not-answerable": { title: "Esa llamada ya ha terminado" },
-  /*
-    NOT "Comunicando", which is what this said and what sent us looking. SIP 486 is both "the line is
-    engaged" AND what almost every endpoint sends when a person presses decline — including our own
-    `reject()`. One code, two events, no way to tell them apart, so the copy has to hold both rather
-    than assert the less likely one. `call/rejected` can be definite: an endpoint sending 603 Decline
-    means exactly that.
-  */
-  "call/busy": { title: "No contestaron o la l\xEDnea estaba ocupada" },
-  "call/no-answer": { title: "No contestaron" },
-  "call/rejected": { title: "No aceptaron tu llamada" },
-  /*
-    The legacy CRM said "La persona que llamaba colgó antes de que pudieras contestar." — the right
-    fact, at three times the width of the line that has to hold it. This keeps the fact and drops the
-    words: the user needs to know the call was FOR them and that nobody is waiting on the line.
-    "Llamada perdida" alone tested badly for exactly the label reason above — it names the category
-    without saying anyone rang.
-  */
-  "call/missed": { title: "Colgaron antes de que pudieras contestar" },
-  // "No se pudo completar la llamada" was our own "something went wrong": true of every failure and
-  // useful for none. The number is what the user can actually act on.
-  "call/failed": { title: "No se pudo conectar con ese n\xFAmero" },
-  // The load-bearing half is the SECOND sentence: the original call is still up, and a user who
-  // thinks they dropped it will hang up on a client to "fix" it.
-  "call/transfer-failed": { title: "No se pudo transferir. Sigues en la llamada" },
-  "call/unsupported": { title: "Esta funci\xF3n no est\xE1 disponible" },
-  // ── Provider ────────────────────────────────────────────────────────────────
-  "provider/provision-failed": {
-    title: "No se pudo activar el tel\xE9fono",
-    body: "Si el problema contin\xFAa, contacta con soporte."
+    return /* @__PURE__ */ jsxs("div", { className: "cv-gate", "data-state": state, "data-tone": "danger", children: [
+      /* @__PURE__ */ jsx("span", { className: "cv-gate-mark", children: /* @__PURE__ */ jsx(MicOff, { size: 22 }) }),
+      /* @__PURE__ */ jsx("h3", { className: "cv-gate-title", children: "Micr\xF3fono bloqueado" }),
+      /* @__PURE__ */ jsx("p", { children: "Perm\xEDtelo en tu navegador para poder llamar." }),
+      /* @__PURE__ */ jsxs("details", { className: "cv-help", children: [
+        /* @__PURE__ */ jsxs("summary", { children: [
+          /* @__PURE__ */ jsx(CircleHelp, { size: 13, "aria-hidden": true }),
+          "C\xF3mo permitirlo"
+        ] }),
+        /* @__PURE__ */ jsx("ol", { children: guide.steps.map((step) => /* @__PURE__ */ jsx("li", { children: step }, step)) }),
+        guide.url ? /* @__PURE__ */ jsxs("a", { href: guide.url, target: "_blank", rel: "noreferrer noopener", children: [
+          "Gu\xEDa del navegador",
+          /* @__PURE__ */ jsx(ExternalLink, { size: 11, "aria-hidden": true })
+        ] }) : null
+      ] })
+    ] });
   }
-};
+  if (state === "warming") {
+    return /* @__PURE__ */ jsxs("div", { className: "cv-gate", "data-state": state, children: [
+      /* @__PURE__ */ jsx("span", { className: "cv-gate-mark", children: /* @__PURE__ */ jsx(Mic, { size: 22 }) }),
+      /* @__PURE__ */ jsx("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
+      /* @__PURE__ */ jsx("p", { children: "Acepta el aviso que muestra el navegador para continuar." })
+    ] });
+  }
+  if (state === "checking") {
+    return /* @__PURE__ */ jsxs("div", { className: "cv-gate", "data-state": state, children: [
+      /* @__PURE__ */ jsx("span", { className: "cv-gate-mark", children: /* @__PURE__ */ jsx(Mic, { size: 22 }) }),
+      /* @__PURE__ */ jsx("p", { children: "Preparando el micr\xF3fono\u2026" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "cv-gate", "data-state": state, children: [
+    /* @__PURE__ */ jsx("span", { className: "cv-gate-mark", children: /* @__PURE__ */ jsx(Mic, { size: 22 }) }),
+    /* @__PURE__ */ jsx("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
+    /* @__PURE__ */ jsx("p", { children: "Lo necesitamos para que puedas hablar durante las llamadas." }),
+    /* @__PURE__ */ jsx("button", { className: "cv-btn cv-btn--accent", onClick: onRequest, children: "Permitir micr\xF3fono" })
+  ] });
+}
+function MicPermissionGate({ children }) {
+  const { state, request } = useMicPermission();
+  if (state === "ready") return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx("div", { className: "cv-softphone", children: /* @__PURE__ */ jsx(MicPrompt, { state, onRequest: () => void request() }) });
+}
 function ErrorGate({
   error,
   onRetry
@@ -1862,203 +2390,6 @@ function useCallOutcome() {
     clear
   };
 }
-
-// src/ui/audio/audio.ts
-var TONE_HZ = 425;
-function createRemoteAudio() {
-  const el = document.createElement("audio");
-  el.autoplay = true;
-  el.style.display = "none";
-  document.body.appendChild(el);
-  return {
-    attach(stream) {
-      el.srcObject = stream;
-      void el.play().catch(() => {
-      });
-    },
-    detach() {
-      el.srcObject = null;
-    },
-    destroy() {
-      el.srcObject = null;
-      el.remove();
-    },
-    async setOutputDevice(deviceId) {
-      if (typeof el.setSinkId !== "function") return;
-      try {
-        await el.setSinkId(deviceId ?? "");
-      } catch {
-      }
-    }
-  };
-}
-var shared = null;
-function sharedContext() {
-  if (shared) return shared;
-  const Ctor = typeof AudioContext !== "undefined" ? AudioContext : globalThis.webkitAudioContext;
-  if (!Ctor) return null;
-  shared = new Ctor();
-  return shared;
-}
-function primeAudio() {
-  const ctx = sharedContext();
-  if (ctx && ctx.state === "suspended") void ctx.resume?.().catch(() => {
-  });
-}
-function playRingtone() {
-  const ctx = sharedContext();
-  if (!ctx) return { stop() {
-  } };
-  const gain = ctx.createGain();
-  gain.gain.value = 0;
-  gain.connect(ctx.destination);
-  const osc = ctx.createOscillator();
-  osc.type = "sine";
-  osc.frequency.value = TONE_HZ;
-  osc.connect(gain);
-  osc.start();
-  const LEVEL = 0.8;
-  const RAMP = 0.02;
-  const burst = (at, dur) => {
-    gain.gain.setValueAtTime(0, at);
-    gain.gain.linearRampToValueAtTime(LEVEL, at + RAMP);
-    gain.gain.setValueAtTime(LEVEL, at + dur - RAMP);
-    gain.gain.linearRampToValueAtTime(0, at + dur);
-  };
-  const scheduleCycle = (at) => {
-    burst(at, 0.4);
-    burst(at + 0.6, 0.4);
-    return 3;
-  };
-  const LOOKAHEAD = 0.5;
-  const TICK_MS = 150;
-  const LEAD = 0.08;
-  let stopped = false;
-  let timer = null;
-  let nextAt = 0;
-  const pump = () => {
-    while (nextAt < ctx.currentTime + LOOKAHEAD) nextAt += scheduleCycle(nextAt);
-  };
-  void Promise.resolve(ctx.resume?.()).catch(() => {
-  }).finally(() => {
-    if (stopped) return;
-    nextAt = ctx.currentTime + LEAD;
-    pump();
-    timer = setInterval(pump, TICK_MS);
-  });
-  return {
-    stop() {
-      stopped = true;
-      if (timer) clearInterval(timer);
-      try {
-        osc.stop();
-      } catch {
-      }
-      try {
-        gain.disconnect();
-      } catch {
-      }
-    }
-  };
-}
-function playCallEndedTone() {
-  const ctx = sharedContext();
-  if (!ctx) return;
-  const gain = ctx.createGain();
-  gain.gain.value = 0;
-  gain.connect(ctx.destination);
-  const osc = ctx.createOscillator();
-  osc.type = "sine";
-  osc.frequency.value = TONE_HZ;
-  osc.connect(gain);
-  osc.start();
-  const LEVEL = 0.55;
-  const RAMP = 8e-3;
-  const BEEP = 0.25;
-  void Promise.resolve(ctx.resume?.()).catch(() => {
-  }).finally(() => {
-    const at = ctx.currentTime + 0.02;
-    gain.gain.setValueAtTime(0, at);
-    gain.gain.linearRampToValueAtTime(LEVEL, at + RAMP);
-    gain.gain.setValueAtTime(LEVEL, at + BEEP - RAMP);
-    gain.gain.linearRampToValueAtTime(0, at + BEEP);
-    const totalMs = (at + BEEP - ctx.currentTime) * 1e3;
-    setTimeout(() => {
-      try {
-        osc.stop();
-      } catch {
-      }
-      try {
-        gain.disconnect();
-      } catch {
-      }
-    }, totalMs);
-  });
-}
-var ringbackUrl = null;
-function ringbackSource() {
-  if (ringbackUrl) return ringbackUrl;
-  const sampleRate = 48e3;
-  const channels = 2;
-  const bytesPerSample = 2;
-  const amp = 0.5;
-  const toneSec = 1.5;
-  const silenceSec = 3;
-  const totalFrames = Math.round((toneSec + silenceSec) * sampleRate);
-  const toneFrames = Math.round(toneSec * sampleRate);
-  const ramp = Math.round(0.02 * sampleRate);
-  const blockAlign = channels * bytesPerSample;
-  const dataSize = totalFrames * blockAlign;
-  const buffer = new ArrayBuffer(44 + dataSize);
-  const view = new DataView(buffer);
-  const str = (off, s) => {
-    for (let i = 0; i < s.length; i++) view.setUint8(off + i, s.charCodeAt(i));
-  };
-  str(0, "RIFF");
-  view.setUint32(4, 36 + dataSize, true);
-  str(8, "WAVE");
-  str(12, "fmt ");
-  view.setUint32(16, 16, true);
-  view.setUint16(20, 1, true);
-  view.setUint16(22, channels, true);
-  view.setUint32(24, sampleRate, true);
-  view.setUint32(28, sampleRate * blockAlign, true);
-  view.setUint16(32, blockAlign, true);
-  view.setUint16(34, bytesPerSample * 8, true);
-  str(36, "data");
-  view.setUint32(40, dataSize, true);
-  for (let i = 0; i < totalFrames; i++) {
-    let sample = 0;
-    if (i < toneFrames) {
-      let env = 1;
-      if (i < ramp) env = i / ramp;
-      else if (i > toneFrames - ramp) env = Math.max(0, (toneFrames - i) / ramp);
-      sample = Math.sin(2 * Math.PI * TONE_HZ * (i / sampleRate)) * amp * env;
-    }
-    const s16 = Math.round(sample * 32767);
-    const off = 44 + i * blockAlign;
-    for (let c = 0; c < channels; c++) view.setInt16(off + c * bytesPerSample, s16, true);
-  }
-  ringbackUrl = URL.createObjectURL(new Blob([buffer], { type: "audio/wav" }));
-  return ringbackUrl;
-}
-function playRingback() {
-  const el = document.createElement("audio");
-  el.src = ringbackSource();
-  el.loop = true;
-  el.style.display = "none";
-  document.body.appendChild(el);
-  void el.play().catch(() => {
-  });
-  return {
-    stop() {
-      el.pause();
-      el.remove();
-    }
-  };
-}
-
-// src/ui/audio/useCallAudio.ts
 function useCallAudio(enabled) {
   const softphone = useSoftphone();
   const remote = useRef(null);
@@ -2137,6 +2468,94 @@ function useCallAudio(enabled) {
     };
   }, [softphone, enabled]);
 }
+function TransferNotices({
+  notices,
+  dismiss
+}) {
+  const softphone = useSoftphone();
+  const now = useTicker(notices.length > 0, 15e3);
+  const callBack = (notice) => {
+    dismiss(notice.id);
+    if (notice.caller) void softphone.call(notice.caller).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "cv-transfer-notices",
+      role: "status",
+      part: "transfer-notices",
+      "data-has-notices": notices.length > 0,
+      children: [
+        notices.length > 1 ? /* @__PURE__ */ jsxs("p", { className: "cv-transfer-notices-count", children: [
+          notices.length,
+          " traspasos sin conectar"
+        ] }) : null,
+        notices.map((notice) => /* @__PURE__ */ jsxs("div", { className: "cv-transfer-notice", part: "transfer-notice", children: [
+          /* @__PURE__ */ jsx("span", { className: "cv-transfer-notice-mark", "aria-hidden": true, children: /* @__PURE__ */ jsx(PhoneMissed, { size: 16 }) }),
+          /* @__PURE__ */ jsxs("div", { className: "cv-transfer-notice-body", children: [
+            /* @__PURE__ */ jsxs("div", { className: "cv-transfer-notice-header", children: [
+              /* @__PURE__ */ jsxs("p", { className: "cv-transfer-notice-title", children: [
+                "El traspaso a ",
+                notice.target,
+                " no se conect\xF3"
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "cv-transfer-notice-dismiss",
+                  onClick: () => dismiss(notice.id),
+                  "aria-label": "Descartar aviso",
+                  part: "transfer-notice-dismiss",
+                  children: /* @__PURE__ */ jsx(X, { size: 14 })
+                }
+              )
+            ] }),
+            notice.caller ? /* @__PURE__ */ jsxs("p", { className: "cv-transfer-notice-subtitle", children: [
+              notice.caller,
+              " se ha desconectado."
+            ] }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "cv-transfer-notice-footer", children: [
+              /* @__PURE__ */ jsx("p", { className: "cv-transfer-notice-age", children: formatAge(elapsedSeconds(notice.at, now)) }),
+              notice.caller ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "cv-btn cv-btn--accent cv-transfer-notice-callback",
+                  onClick: () => callBack(notice),
+                  part: "transfer-notice-callback",
+                  children: [
+                    /* @__PURE__ */ jsx(Phone, { size: 14, "aria-hidden": true }),
+                    "Llamar de vuelta"
+                  ]
+                }
+              ) : null
+            ] })
+          ] })
+        ] }, notice.id))
+      ]
+    }
+  );
+}
+function useTransferNotices() {
+  const softphone = useSoftphone();
+  const [notices, setNotices] = useState([]);
+  const nextId = useRef(0);
+  const dismiss = useCallback((id) => {
+    setNotices((prev) => prev.filter((n) => n.id !== id));
+  }, []);
+  useEffect(
+    () => softphone.on("transferOutcome" /* TransferOutcome */, (payload) => {
+      if (payload.status === "not-connected") {
+        const id = nextId.current++;
+        setNotices((prev) => [...prev, { id, target: payload.target, caller: payload.caller, at: payload.at }]);
+      }
+    }),
+    [softphone]
+  );
+  return { notices, dismiss };
+}
 function SoftphoneWidget(props) {
   const {
     contacts,
@@ -2161,7 +2580,9 @@ function SoftphoneWidget(props) {
   useCallAudio(sounds);
   const blocked = requireMic && mic.state !== "ready";
   const fatal = useLastError();
+  const screenIsFree = !call && !blocked && !fatal && !isFollower;
   const { outcome, clear: clearOutcome } = useCallOutcome();
+  const { notices: transferNotices, dismiss: dismissTransferNotice } = useTransferNotices();
   const retry = () => {
     void (async () => {
       try {
@@ -2185,8 +2606,9 @@ function SoftphoneWidget(props) {
       className: className ? `cv-softphone ${className}` : "cv-softphone",
       ...theme === "system" ? {} : { "data-cv-theme": theme },
       children: [
-        /* @__PURE__ */ jsx("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ jsx(LeaderGate, {}) : blocked ? /* @__PURE__ */ jsx(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ jsx(CallScreen, { call, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ jsx(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ jsx(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ jsx(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ jsx(SettingsTab, {}) : /* @__PURE__ */ jsx(Dialpad, { outcome, onIntent: clearOutcome }) }),
-        call || blocked || fatal || isFollower ? null : /* @__PURE__ */ jsx("div", { className: "cv-tabs", role: "tablist", children: tabs.map(({ id, icon: Icon3, label }) => /* @__PURE__ */ jsxs(
+        screenIsFree ? /* @__PURE__ */ jsx(TransferNotices, { notices: transferNotices, dismiss: dismissTransferNotice }) : null,
+        /* @__PURE__ */ jsx("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ jsx(LeaderGate, {}) : blocked ? /* @__PURE__ */ jsx(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ jsx(CallScreen, { call, keyTones: sounds, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ jsx(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ jsx(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ jsx(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ jsx(SettingsTab, {}) : /* @__PURE__ */ jsx(Dialpad, { outcome, onIntent: clearOutcome, keyTones: sounds }) }),
+        screenIsFree ? /* @__PURE__ */ jsx("div", { className: "cv-tabs", role: "tablist", children: tabs.map(({ id, icon: Icon3, label }) => /* @__PURE__ */ jsxs(
           "button",
           {
             role: "tab",
@@ -2199,7 +2621,7 @@ function SoftphoneWidget(props) {
             ]
           },
           id
-        )) })
+        )) }) : null
       ]
     }
   );