@coventia/softphone 0.1.0 → 0.2.0

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';
 
@@ -679,6 +679,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(() => {
@@ -791,17 +910,195 @@ var STATUS_LABEL = {
   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
+}) {
+  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." })
+  ] });
+}
 function CallScreen({
   call,
   incomingCallAction
 }) {
   const view = useCall(call);
+  const softphone = useSoftphone();
   const [showTransfer, setShowTransfer] = useState(false);
   const [transferTo, setTransferTo] = useState("");
+  const [consultCall, setConsultCall] = useState(null);
+  const [consultOutcome, setConsultOutcome] = useState(null);
+  const [myUserId, setMyUserId] = useState(null);
+  const consultView = useCall(consultCall);
+  const consultIntentRef = useRef(null);
   const [showDevices, setShowDevices] = useState(false);
   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) => {
@@ -826,6 +1123,19 @@ 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(":");
@@ -844,7 +1154,79 @@ function CallScreen({
         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) }),
@@ -874,31 +1256,6 @@ function CallScreen({
           /* @__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: [
@@ -1695,117 +2052,6 @@ function MicPermissionGate({ children }) {
   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."
-  }
-};
 function ErrorGate({
   error,
   onRetry
@@ -2137,6 +2383,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 +2495,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 +2521,9 @@ function SoftphoneWidget(props) {
       className: className ? `cv-softphone ${className}` : "cv-softphone",
       ...theme === "system" ? {} : { "data-cv-theme": theme },
       children: [
+        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, ...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("div", { className: "cv-tabs", role: "tablist", children: tabs.map(({ id, icon: Icon3, label }) => /* @__PURE__ */ jsxs(
           "button",
           {
             role: "tab",
@@ -2199,7 +2536,7 @@ function SoftphoneWidget(props) {
             ]
           },
           id
-        )) })
+        )) }) : null
       ]
     }
   );