@coventia/softphone 0.3.0 → 0.5.0

package/dist/softphone.css

@@ -237,16 +237,13 @@
    the gutters cost more than they give, and a cramped keypad is worse than a tight one. */
 @container cv (max-width: 300px) {
   .cv-keypad { padding: 0 0.6rem; gap: 6px; }
-  .cv-dial-prefix { padding: 0.7rem 0.6rem 0; }
-  .cv-dial-head { padding: 0.3rem 0.6rem 0.6rem; }
-  .cv-display { font-size: 1.5rem; }
+  .cv-dial-head { margin: 0 0.6rem 0.6rem; }
 }
 
 /* Short hosts. The flex chain already lets the keypad absorb what is left, but below this the keys
    stop being tappable — so buy the height back from the chrome instead of from the keys. */
 @container cv (max-height: 440px) {
-  .cv-dial-prefix { padding-top: 0.5rem; }
-  .cv-dial-head { padding-top: 0.2rem; padding-bottom: 0.4rem; }
+  .cv-dial-head { margin-bottom: 0.4rem; }
   .cv-dial-foot { padding-bottom: 0.5rem; }
   .cv-controls { gap: 0.4rem; padding-bottom: 0.6rem; }
 }
@@ -482,21 +479,51 @@
 .cv-round--hangup:hover:not(:disabled) { filter: brightness(0.94); }
 
 /* ── Dialpad ─────────────────────────────────────────────────────────────────── */
-/* The prefix chip, on its own row above the number.
-   Sharing a line with the number starves it: chip + erase button eat the middle, and a formatted
-   international number needs every pixel. The number is the content; the prefix is a setting. */
-.cv-dial-prefix {
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  padding: 1rem 1rem 0;
-}
+/* The number: ONE bordered field, the prefix inside it on the left and erase on the right — the pattern of the
+   providers' dialers (Talkdesk "[🇺🇸 +1 ▾ | Type or paste a number]", Zendesk, Aircall; outbound-number-per-agent.md
+   §5.5, 2026-10-26). The prefix is part of the number being dialled, so it sits inside the same box. The number
+   shrinks to fit (`DISPLAY_SIZES` in Dialpad.tsx). The field is the positioned ancestor of the country list, so the
+   list spans its width (`left: 0; right: 0`). */
 .cv-dial-head {
   flex-shrink: 0;
+  position: relative;
   display: flex;
   align-items: center;
-  padding: 0.35rem 1rem 0.75rem;
-  gap: 0.25rem;
+  height: 46px;
+  margin: 0 1rem 0.75rem;
+  padding: 0 0.2rem 0 0;
+  border: 1px solid var(--cv-border-strong);
+  border-radius: 10px;
+  background: var(--cv-bg);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+/* With no "Llamar desde" line above it (an org with one number), the field opens the view. */
+.cv-view > .cv-dial-head:first-child { margin-top: 1rem; }
+/* Focus shows on the field, as on any input (WCAG 2.4.7): the accent border and a soft ring. */
+.cv-dial-head:focus-within {
+  border-color: var(--cv-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-accent) 18%, transparent);
+}
+.cv-dial-head > .cv-cp {
+  position: static;
+  width: auto;
+  flex-shrink: 0;
+  align-self: stretch;
+}
+/* The prefix as the field's leading segment: the same chip, flush with the field, divided from the number. */
+.cv-dial-head .cv-cp-chip {
+  height: 100%;
+  padding: 0 0.45rem 0 0.65rem;
+  border: 0;
+  border-right: 1px solid var(--cv-border);
+  border-radius: 9px 0 0 9px;
+  background: var(--cv-surface);
+}
+.cv-dial-head .cv-cp-chip:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: -2px; }
+/* Following a number typed in full ("+44 …"): read-only — the flag alone, no caret, no hover. */
+.cv-cp-chip[data-from-number] {
+  cursor: default;
+  padding: 0 0.6rem;
 }
 /*
  * The outcome of the last attempt, under the number.
@@ -538,20 +565,25 @@
   }
 }
 
+/* Left-aligned after the prefix segment, as a phone field reads ("+34 | 600 11 12 22"). 1.375rem is the start of
+   `DISPLAY_SIZES`, which steps it down until a long number fits the field. */
 .cv-display {
   flex: 1;
   min-width: 0;
-  font: 600 1.75rem var(--cv-font);
+  height: 100%;
+  font: 500 1.375rem var(--cv-font);
   font-variant-numeric: tabular-nums;
-  letter-spacing: -0.02em;
-  text-align: center;
+  letter-spacing: -0.01em;
+  text-align: left;
   color: var(--cv-text);
   border: none;
   background: none;
-  padding: 0;
+  padding: 0 0.6rem;
   caret-color: var(--cv-accent);
 }
-.cv-display::placeholder { color: var(--cv-faint); font-weight: 400; }
+/* `--cv-muted`, not `--cv-faint`: a placeholder is read like any text (4.5:1). */
+.cv-display::placeholder { color: var(--cv-muted); font-weight: 400; }
+/* The field around it shows focus (`.cv-dial-head:focus-within`). */
 .cv-display:focus { outline: none; }
 
 /* The spacer/erase pair keeps the number optically centred. */
@@ -607,8 +639,9 @@
   font-size: 9px;
   font-weight: 600;
   letter-spacing: 0.14em;
-  /* Decorative: the letters carry no information the digit doesn't. `faint`, not `muted`. */
-  color: var(--cv-faint);
+  /* `muted` (was `faint`, 2.5:1): the letters are read when dialling a number written in letters (900-FLORES),
+     so they are text, held to 4.5:1 like any other (design critique, 2026-10-26). */
+  color: var(--cv-muted);
   line-height: 1;
 }
 
@@ -687,6 +720,23 @@
 
 .cv-call-name { font-size: 1rem; font-weight: 600; line-height: 1.2; }
 .cv-call-number { font-size: 0.75rem; color: var(--cv-muted); margin-top: 2px; }
+/* Which of the org's numbers this outbound call shows. Smaller than the callee: context, not identity — but muted,
+   not faint: --cv-faint is under 4.5:1 at this size in both themes, and the agent may need to read it mid-call. */
+.cv-call-from {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  margin-top: 4px;
+  font-size: 0.72rem;
+  color: var(--cv-muted);
+}
+.cv-call-from span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .cv-timer {
   display: flex;
@@ -1867,6 +1917,16 @@
   text-overflow: ellipsis;
 }
 .cv-detail-row-chevron { color: var(--cv-faint); flex-shrink: 0; }
+/* A second line under a row's value, for two facts that would each be cut off sharing one line ("Llamada desde":
+   the name the org gave the number, then the number). */
+.cv-detail-row-sub {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--cv-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .cv-detail-foot { flex-shrink: 0; padding: 0.85rem 1.25rem 1.1rem; }
 .cv-detail-call { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
@@ -1956,6 +2016,18 @@
 /* `--cv-danger-strong` is the AS-TEXT danger token (see its definition): red-600 on the light `--cv-bg`,
    red-400 on the dark one. */
 .cv-settings-error { margin: 0.6rem 0.2rem 0; font-size: 0.78rem; line-height: 1.4; color: var(--cv-danger-strong); }
+/* Why the choice cannot change right now, and until when (Número de salida). Calm, like the dialpad's notice: the
+   phone keeps working. Above the list, so it is in sight of the row just tapped. */
+.cv-settings-notice {
+  margin: 0 0 0.75rem;
+  padding: 0.6rem 0.75rem;
+  border-radius: 10px;
+  background: var(--cv-surface-2);
+  color: var(--cv-text);
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+.cv-settings-notice[data-kind='error'] { color: var(--cv-danger-strong); }
 
 /*
   Ajustes as a list (custom-ringtone.md §4.6, revised 2026-10-14): each row names a setting, shows its CURRENT
@@ -2043,6 +2115,15 @@ button.cv-settings-nav:focus-visible { outline: 2px solid var(--cv-accent); outl
 .cv-choice-check { flex-shrink: 0; color: var(--cv-accent-strong); visibility: hidden; }
 .cv-choice[data-checked] .cv-choice-check { visibility: visible; }
 .cv-choice-playing { display: inline-flex; flex-shrink: 0; color: var(--cv-accent-strong); }
+/* A tagged choice (Número de salida): the label and its tag on one line, like the dialpad's list. */
+.cv-choice-line { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
+/* Locked while a change is in flight or must wait: the chosen row stays clear, the others step back. */
+.cv-choice[data-disabled] { cursor: default; }
+.cv-choice[data-disabled]:not([data-checked]) { opacity: 0.55; }
+.cv-choice[data-disabled]:hover { background: none; }
+.cv-choice-applying { display: inline-flex; flex-shrink: 0; color: var(--cv-muted); }
+/* Exempt from reduced-motion like `.cv-empty-spinner`: the rotation is the information. */
+.cv-choice-applying-icon { animation: cv-spin 0.8s linear infinite; }
 
 .cv-settings-test,
 .cv-settings-retry {
@@ -2461,3 +2542,153 @@ button.cv-settings-nav:focus-visible { outline: 2px solid var(--cv-accent); outl
   color: var(--cv-muted);
   font-size: 0.78rem;
 }
+
+/* ── "Llamar desde" (outbound-number-per-agent.md §5.5) ─────────────────────── */
+/* "Llamar desde: Oficina ▾" — a light line right above the number field, as the providers' dialers label their
+   caller ID ("Caller ID: … ▾", "Outbound on: … ▾", "From: … ▾"; outbound-number-per-agent.md §5.5, 2026-10-26). Not a
+   strip with a divider: under the host's own header that read as a second title bar. The line is the positioned
+   ancestor, so its list and callout drop under it. */
+.cv-on {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  padding: 0.9rem 1rem 0.4rem;
+}
+.cv-on-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  max-width: 100%;
+  min-width: 0;
+  height: 26px;
+  margin-left: -0.3rem;
+  padding: 0 0.3rem;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--cv-text);
+  font: 0.8rem var(--cv-font);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.cv-on-chip:hover { background: var(--cv-surface-2); }
+.cv-on-chip:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 0; }
+.cv-on-label { flex-shrink: 0; color: var(--cv-muted); }
+.cv-on-chip .cv-on-current { font-weight: 600; }
+.cv-on-icon { color: var(--cv-accent-strong); flex-shrink: 0; }
+.cv-on-spin { animation: cv-spin 0.9s linear infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .cv-on-spin { animation: none; }
+}
+.cv-on-current {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Drops under the strip, over the number and the keypad, inset to the strip's edges. Capped so that in the CRM's
+   473px panel it never reaches the tab bar: the LIST gives way (it scrolls), never the title or a refusal message. */
+.cv-on-pop {
+  top: calc(100% + 4px);
+  left: 0.5rem;
+  right: 0.5rem;
+  max-width: none;
+  max-height: 330px;
+}
+.cv-on-pop .cv-cp-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
+}
+.cv-on-title {
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0.5rem 0.75rem 0.4rem;
+  border-bottom: 1px solid var(--cv-border);
+  font: 600 0.7rem var(--cv-font);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--cv-muted);
+}
+.cv-on-item { align-items: flex-start; }
+/* Locked while a change is applying or the limit says wait: still legible (the choice is visible), not usable. */
+.cv-on-item[aria-disabled='true'] { cursor: default; }
+.cv-on-item[aria-disabled='true']:not([aria-selected='true']) { opacity: 0.55; }
+.cv-on-item[aria-disabled='true']:not([aria-selected='true']):hover { background: none; }
+.cv-on-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.cv-on-line {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+.cv-on-sub {
+  color: var(--cv-muted);
+  font-size: 0.74rem;
+  font-variant-numeric: tabular-nums;
+}
+/* A quiet, neutral pill: it tells the agent what the number is for, it is not a warning. Shared with Ajustes. */
+.cv-on-tag,
+.cv-choice-tag {
+  flex-shrink: 0;
+  padding: 0 0.35rem;
+  border: 1px solid var(--cv-border-strong);
+  border-radius: 999px;
+  color: var(--cv-muted);
+  font-size: 0.66rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+/* The usage rule IS information (when not to call from this number): --cv-muted, not --cv-faint, which is under
+   4.5:1 at this size in both themes (see `.cv-empty-sub`). */
+.cv-on-hint,
+.cv-choice-hint {
+  color: var(--cv-muted);
+  font-size: 0.7rem;
+  line-height: 1.3;
+}
+.cv-on-item .cv-cp-check { margin-top: 2px; }
+/* Why a change cannot happen right now, and until when. Calm, not alarming: the phone keeps working. */
+.cv-on-notice {
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0.55rem 0.75rem;
+  border-top: 1px solid var(--cv-border);
+  background: var(--cv-surface-2);
+  color: var(--cv-text);
+  font-size: 0.74rem;
+  line-height: 1.4;
+}
+.cv-on-notice[data-kind='error'] { color: var(--cv-danger-strong); }
+/* A change that did not go through, after the (optimistic) list already closed: the same words, where the list
+   was (under the strip). Same place and surface as the list; dismissed by a tap elsewhere, when the wait is over,
+   or after a few seconds. */
+.cv-on-callout {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0.5rem;
+  right: 0.5rem;
+  margin: 0;
+  z-index: 20;
+  padding: 0.6rem 0.75rem;
+  background: var(--cv-surface);
+  border: 1px solid var(--cv-border);
+  border-radius: var(--cv-radius);
+  box-shadow: var(--cv-shadow);
+  color: var(--cv-text);
+  font-size: 0.74rem;
+  line-height: 1.4;
+  transform-origin: top center;
+  animation: cv-cp-in 0.14s cubic-bezier(0.2, 0, 0.2, 1);
+}
+.cv-on-callout[data-kind='error'] { color: var(--cv-danger-strong); }
+@media (prefers-reduced-motion: reduce) {
+  .cv-on-callout { animation: none; }
+}

package/dist/{sources-M3GYMS6V.js → sources-QL2LRZVH.js}

@@ -1,3 +1,4 @@
+import { outboundNumberRefused } from './chunk-5E5OEXS2.js';
 import { invalidateToken } from './chunk-MHOJHG5E.js';
 
 // src/sources.ts
@@ -39,10 +40,12 @@ function withNameResolution(source, resolve) {
 // src/coventia/api.ts
 var ApiError = class extends Error {
   status;
-  constructor(status, message) {
+  body;
+  constructor(status, message, body = null) {
     super(message);
     this.name = "ApiError";
     this.status = status;
+    this.body = body;
   }
 };
 function createRequest(config, method) {
@@ -63,9 +66,9 @@ function createRequest(config, method) {
     });
     const body = await res.json().catch(() => null);
     const message = body?.message ?? `${path} \u2014 HTTP ${res.status}`;
-    if (!res.ok) throw new ApiError(res.status, message);
+    if (!res.ok) throw new ApiError(res.status, message, body);
     if (body?.success === false) {
-      throw new ApiError(res.status, message);
+      throw new ApiError(res.status, message, body);
     }
     return body;
   }
@@ -149,6 +152,7 @@ var toPresenceEntry = (row) => ({
   name: row.name ?? null,
   state: toPresenceState(row.state)
 });
+var toLineLocation = (raw) => raw === "desktop" || raw === "browser" ? raw : null;
 var toWebSocketUrl = (httpUrl) => httpUrl.replace(/^http/, "ws").replace(/\/+$/, "");
 function coventiaSources(config) {
   const get = createGet(config);
@@ -206,6 +210,8 @@ function coventiaSources(config) {
         // row's `called_did` is the OTHER party (already `number` above); showing it again as "DID"
         // would just repeat the row under a wrong label.
         ...toDirection(row.direction) === "inbound" && row.called_did ? { did: row.called_did } : {},
+        // And the other way round: which of the org's numbers an outbound call showed.
+        ...toDirection(row.direction) === "outbound" && row.from_number ? { from: row.from_number } : {},
         recorded,
         handledBy,
         // The detail page's one enrichment fetch — signed recording URLs, plus this SAME chain with
@@ -275,6 +281,16 @@ function coventiaSources(config) {
               if (ws.readyState !== WS.OPEN) return;
               ws.send(JSON.stringify({ type: "bye" }));
             },
+            // `line: true` is what makes the server treat this socket as taking part in the line owner;
+            // without it (or with an id it rejects) the `hello` is ignored, as an older SDK's would be.
+            hello: (clientId) => {
+              if (ws.readyState !== WS.OPEN) return;
+              ws.send(JSON.stringify({ type: "hello", clientId, line: true }));
+            },
+            claimLine: () => {
+              if (ws.readyState !== WS.OPEN) return;
+              ws.send(JSON.stringify({ type: "line-claim" }));
+            },
             close: () => {
               ws.onclose = null;
               ws.onerror = null;
@@ -294,6 +310,12 @@ function coventiaSources(config) {
             callbacks.onSnapshot((msg.agents ?? []).map(toPresenceEntry));
           } else if (msg.type === "delta" && msg.agent) {
             callbacks.onDelta(toPresenceEntry(msg.agent));
+          } else if (msg.type === "line" && (msg.state === "here" || msg.state === "elsewhere")) {
+            callbacks.onLine?.({ state: msg.state, where: msg.state === "here" ? null : toLineLocation(msg.where) });
+          } else if (msg.type === "line-claim-result") {
+            callbacks.onClaimResult?.(
+              msg.ok === true ? { ok: true } : { ok: false, reason: typeof msg.reason === "string" ? msg.reason : "unavailable" }
+            );
           }
         };
         ws.onclose = () => {
@@ -323,10 +345,10 @@ function coventiaSources(config) {
     return { catalogue, orgDefault: body.orgDefault ?? null, mine: body.user ?? null, effective };
   };
   const CACHE_PREFIX = "coventia-softphone:ringtones:";
-  const cacheKey = async () => {
+  const cacheKey = async (prefix = CACHE_PREFIX) => {
     try {
       const { identity } = await config.tokenSource.getToken();
-      return `${CACHE_PREFIX}${fileBase}|${config.organizationId ?? "-"}|${identity}`;
+      return `${prefix}${fileBase}|${config.organizationId ?? "-"}|${identity}`;
     } catch {
       return null;
     }
@@ -359,6 +381,68 @@ function coventiaSources(config) {
     ),
     cached: recall
   };
+  const KINDS = /* @__PURE__ */ new Set(["landline", "mobile", "commercial", "other"]);
+  const STATES = /* @__PURE__ */ new Set(["applied", "pending", "failed", "unassigned"]);
+  const toOutboundSettings = (body) => {
+    const numbers = (body.numbers ?? []).map((n) => ({
+      id: n.id,
+      number: n.number,
+      label: n.label ?? null,
+      kind: KINDS.has(n.kind ?? "") ? n.kind : "other"
+    }));
+    const known = (id) => id && numbers.some((n) => n.id === id) ? id : null;
+    return {
+      numbers,
+      orgDefault: body.orgDefault ?? null,
+      mine: known(body.mine),
+      // Defensive: a malformed answer naming a number that is not in the list reads as the org default.
+      effective: known(body.effective) ?? known(body.orgDefault),
+      extension: body.extension ?? null,
+      state: STATES.has(body.state ?? "") ? body.state : "applied",
+      changeAvailableInSeconds: Math.max(0, Math.ceil(Number(body.changeAvailableInSeconds) || 0))
+    };
+  };
+  const OUTBOUND_PREFIX = "coventia-softphone:outbound-number:";
+  const rememberOutbound = async (settings) => {
+    const key = await cacheKey(OUTBOUND_PREFIX);
+    try {
+      if (key) globalThis.localStorage?.setItem(key, JSON.stringify(settings));
+    } catch {
+    }
+    return settings;
+  };
+  const recallOutbound = async () => {
+    const key = await cacheKey(OUTBOUND_PREFIX);
+    try {
+      const raw = key ? globalThis.localStorage?.getItem(key) : null;
+      const s = raw ? JSON.parse(raw) : null;
+      const ok = s && Array.isArray(s.numbers) && s.numbers.every((n) => typeof n?.id === "string" && typeof n.number === "string") && (s.effective === null || s.numbers.some((n) => n.id === s.effective));
+      return ok ? { ...s, changeAvailableInSeconds: 0 } : null;
+    } catch {
+      return null;
+    }
+  };
+  const outboundNumbers = {
+    get: async (signal) => rememberOutbound(toOutboundSettings(await get(`${base}/outbound-numbers`, org, signal))),
+    // `null` = back to the org default: the empty id is dropped from the query, which the backend reads that way.
+    setMine: async (id) => {
+      try {
+        return rememberOutbound(
+          toOutboundSettings(await post(`${base}/outbound-numbers/user`, { ...org, did_id: id ?? "" }))
+        );
+      } catch (error) {
+        const body = error instanceof ApiError ? error.body : null;
+        if (error instanceof ApiError && error.status === 429 && body?.code === "rate_limited") {
+          throw outboundNumberRefused({
+            reason: body.reason === "user" ? "user" : "platform",
+            retryAfterSeconds: Math.max(1, Math.ceil(Number(body.retryAfterSeconds) || 1))
+          });
+        }
+        throw error;
+      }
+    },
+    cached: recallOutbound
+  };
   const contacts = config.contacts ?? coventiaContacts;
   const resolve = config.resolveContact ?? (config.contacts ? resolverFromContacts(config.contacts) : coventiaResolve);
   const history = withNameResolution(rawHistory, resolve);
@@ -371,10 +455,11 @@ function coventiaSources(config) {
     listAgents: coventiaListAgents,
     transferOutcomes,
     presence,
-    ringtones
+    ringtones,
+    outboundNumbers
   };
 }
 
 export { coventiaSources, resolverFromContacts };
-//# sourceMappingURL=sources-M3GYMS6V.js.map
-//# sourceMappingURL=sources-M3GYMS6V.js.map
+//# sourceMappingURL=sources-QL2LRZVH.js.map
+//# sourceMappingURL=sources-QL2LRZVH.js.map