nio-cat 0.9.7 → 0.9.9

package/web/app/call.js

@@ -0,0 +1,435 @@
+// nio · Trucada amb en Nio. Una conversa de veu en temps real (ElevenLabs Agents) que coneix l'estat
+// de l'ordinador: quins agents hi ha, com van les sessions, què espera permís. També hi pots encarregar feina.
+// L'ordinador dona un URL signat (la clau no surt mai d'allà); el navegador hi parla directament per WebSocket:
+// micròfon → PCM 16 bits → ElevenLabs → àudio PCM de tornada, que es reprodueix a l'instant i es talla si l'interromps.
+
+const I = {
+  call: '<path d="M6.6 3.5h2.6l1.4 4-2 1.3a12 12 0 0 0 6.6 6.6l1.3-2 4 1.4v2.6a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z"/>',
+  hang: '<path d="M3.2 14.6c-.6-.6-.6-1.6.1-2.2C5.8 10 8.8 8.8 12 8.8s6.2 1.2 8.7 3.6c.7.6.7 1.6.1 2.2l-1.6 1.6c-.5.5-1.4.6-2 .1l-2-1.6a1.5 1.5 0 0 1-.5-1.4l.3-1.6a10 10 0 0 0-6 0l.3 1.6c.1.5-.1 1-.5 1.4l-2 1.6c-.6.5-1.5.4-2-.1z"/>',
+  mic: '<rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>',
+  micOff: '<path d="M9 9v2a3 3 0 0 0 5.1 2.1M15 10V6a3 3 0 0 0-5.7-1.3"/><path d="M5 11a7 7 0 0 0 11.5 5.4M19 11a7 7 0 0 1-.6 2.8M12 18v3M4 4l16 16"/>',
+  close: '<path d="M6 6l12 12M18 6L6 18"/>',
+};
+const TOOL_LABEL = { estat: 'Mirant com va tot…', llegeix_sessio: 'Llegint la sessió…', nova_sessio: 'Encarregant la feina…', envia_missatge: 'Enviant el missatge…', decideix_aprovacio: 'Decidint l’aprovació…' };
+const EXAMPLES = ['Com va tot?', 'Quins agents tinc?', 'Què ha fet Claude Code?', 'Digues a Codex que passi els tests', 'Què espera el meu permís?'];
+const svg = (d) => `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true">${d}</svg>`;
+const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
+const OLD = /ruta no existeix|Error 404/i; // un nio antic, sense trucades
+const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+// Captura del micròfon en un AudioWorklet: passa trossos de Float32 al fil principal.
+const WORKLET = `class P extends AudioWorkletProcessor { process(i) { const c = i[0] && i[0][0]; if (c) this.port.postMessage(c.slice(0)); return true; } } registerProcessor('nio-mic', P);`;
+const rateOf = (fmtName) => Number(String(fmtName || 'pcm_16000').split('_')[1]) || 16000;
+function b64(bytes) { let s = ''; for (let i = 0; i < bytes.length; i += 0x8000) s += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000)); return btoa(s); }
+function unb64(s) { const bin = atob(s), out = new Uint8Array(bin.length); for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i); return out; }
+
+export function createCall(ctx) {
+  const { api, esc, toast, bot } = ctx;
+  let root = null, call = null;
+
+  // ---------------------------------------------------------------- pàgina d'abans de trucar
+  async function mount(el) {
+    root = el;
+    root.innerHTML = page(null);
+    if (!ctx.machine()) return;
+    let st = null;
+    if (!ctx.isDemo()) { try { st = await api('/api/call'); } catch (e) { st = { error: e.message }; } }
+    if (root === el) { root.innerHTML = page(st); }
+  }
+  function unmount() { root = null; }
+  function page(st) {
+    const m = ctx.machine(), demo = ctx.isDemo();
+    const head = `<div class="top"><div><h1>Trucada</h1><p>Parla amb en Nio com en una trucada: et diu quins agents tens, com van les sessions i què espera el teu permís. També li pots encarregar feina.</p></div></div>`;
+    if (!m) return head + ctx.noMachine('La trucada parla amb un ordinador. Connecta’n un per trucar.');
+    const ready = demo || st?.ready, loading = !demo && !st;
+    const why = st?.error ? `<p class="call-why err">${esc(OLD.test(st.error) ? 'Aquest ordinador encara no sap trucar: actualitza nio (cal nio-cat 0.9.9 o més nou).' : st.error)}</p>`
+      : !ready && !loading ? '<p class="call-why">Per trucar cal una clau d’ElevenLabs. Es queda a l’ordinador i el cost va al teu compte d’ElevenLabs.</p>' : '';
+    return `${head}
+      <section class="call-hero">
+        <div class="call-face" aria-hidden="true"><span class="call-ring"></span><span class="call-ring r2"></span>${bot('idle', 'call-bot')}</div>
+        <h2>En Nio, a ${esc(m.name)}</h2>
+        <p class="muted">${demo ? 'A la demo, la trucada és simulada: veus com funciona sense micròfon ni clau.' : 'Veu en temps real amb ElevenLabs. Pots interrompre’l quan vulguis, com en una trucada.'}</p>
+        ${why}
+        <div class="call-cta">${ready || loading
+          ? `<button class="call-btn go" type="button" data-call="start" ${loading ? 'disabled' : ''}>${svg(I.call)}<span>${loading ? 'Comprovant…' : 'Truca'}</span></button>`
+          : '<button class="btn ink" type="button" data-call="voice">Afegeix la clau d’ElevenLabs</button>'}</div>
+      </section>
+      <section class="call-try"><h2 class="sec">Prova de dir-li</h2><div class="call-ex">${EXAMPLES.map((e) => `<span>«${esc(e)}»</span>`).join('')}</div>
+        <ul class="call-notes small muted"><li>Abans d’encarregar feina, enviar un missatge o aprovar res, en Nio t’ho repeteix i espera un sí.</li><li>Les feines que encarregues per veu s’obren amb «Demana permís».</li><li>La primera trucada crea l’agent «nio» al teu compte d’ElevenLabs. ElevenLabs cobra per minut de conversa.</li></ul></section>`;
+  }
+  document.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-call]'); if (!b) return;
+    const a = b.dataset.call;
+    if (a === 'start') start();
+    else if (a === 'voice') ctx.voiceSheet();
+  });
+
+  // ---------------------------------------------------------------- pantalla de la trucada
+  // Com les lletres d'Apple Music: la conversa omple la pantalla, la frase d'ara és gran i s'il·lumina
+  // paraula per paraula al ritme de la veu d'en Nio; les anteriors s'apaguen i pugen.
+  function screen() {
+    const ov = document.createElement('div');
+    ov.className = 'call-ov'; ov.setAttribute('role', 'dialog'); ov.setAttribute('aria-modal', 'true'); ov.setAttribute('aria-label', 'Trucada amb en Nio');
+    ov.innerHTML = `
+      <div class="call-amb" aria-hidden="true"><i></i><i></i><i></i></div>
+      <header class="call-head">
+        <span class="call-me">${bot('work', 'call-bot')}<span><b>Nio</b><small id="cSt">Trucant…</small></span></span>
+        <span class="call-time" id="cTime"></span>
+      </header>
+      <div class="call-lyrics" id="cLyr" aria-live="polite"><div class="call-lines" id="cLines"></div></div>
+      <div class="call-bar">
+        <button class="call-ctl" type="button" data-c="mute" aria-pressed="false" aria-label="Silencia el micròfon">${svg(I.mic)}</button>
+        <button class="call-btn end" type="button" data-c="end" aria-label="Penja">${svg(I.hang)}</button>
+      </div>`;
+    document.body.append(ov);
+    if (!reduce) ov.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 280, easing: 'ease-out' });
+    ov.addEventListener('click', (e) => {
+      const c = e.target.closest('[data-c]')?.dataset.c;
+      if (c === 'end') end('Has penjat');
+      else if (c === 'mute') setMute(!call.muted);
+      else if (c === 'again') { cleanup(); call = null; ov.remove(); start(); }
+      else if (c === 'close') close();
+    });
+    ov.addEventListener('keydown', (e) => { if (e.key === 'Escape') { if (call?.live) end('Has penjat'); else close(); } });
+    // Si llisques per rellegir, el text no et salta a sota durant uns segons.
+    const lyr = ov.querySelector('#cLyr');
+    const hold = () => { if (call) call.userScroll = Date.now(); };
+    lyr.addEventListener('wheel', hold, { passive: true }); lyr.addEventListener('touchmove', hold, { passive: true });
+    ov.querySelector('[data-c="end"]').focus({ preventScroll: true });
+    return ov;
+  }
+  const $o = (s) => call?.ov.querySelector(s);
+  const now = () => (call?.audio ? call.audio.ctx.currentTime : performance.now() / 1000);
+  function setState(st, text) {
+    if (!call) return;
+    call.st = st;
+    call.ov.dataset.st = st;
+    $o('#cSt').textContent = text || { connecting: 'Trucant…', listening: call.muted ? 'Micròfon silenciat' : 'T’escolta', thinking: 'Pensant…', speaking: 'Parlant', ended: 'Trucada acabada' }[st] || '';
+    const b = $o('.call-bot'); if (b) b.dataset.mood = st === 'speaking' ? 'happy' : st === 'thinking' || st === 'connecting' ? 'work' : st === 'ended' ? 'sleep' : 'idle';
+    if (st === 'listening' && !call.muted) hearing(true); else if (st !== 'listening') hearing(false);
+  }
+  function setMute(on) {
+    call.muted = on;
+    const b = $o('[data-c="mute"]'); b.setAttribute('aria-pressed', on); b.setAttribute('aria-label', on ? 'Activa el micròfon' : 'Silencia el micròfon'); b.innerHTML = svg(on ? I.micOff : I.mic);
+    if (call.st === 'listening') setState('listening');
+  }
+
+  // ---- Les línies
+  function addLine(who, text = '', focus = true) {
+    const el = document.createElement('p'); el.className = `call-line ${who}`;
+    const line = { who, text: '', el, words: [], t0: 0, t1: 0, chars: [], spoken: -1 };
+    $o('#cLines').append(el); call.lines.push(line);
+    setText(line, text); if (focus) focusLine(line);
+    if (!reduce) el.animate([{ opacity: 0, transform: 'translateY(18px)' }, { opacity: 1, transform: 'none' }], { duration: 420, easing: 'cubic-bezier(.22,1,.36,1)' });
+    return line;
+  }
+  function setText(line, text) {
+    if (line.text === text) return;
+    line.text = text;
+    if (line.who !== 'nio') { line.el.textContent = text; return; }
+    const parts = text.split(/(\s+)/);
+    line.el.innerHTML = parts.map((p) => (/^\s+$/.test(p) || !p ? p : `<span>${esc(p)}</span>`)).join('');
+    line.words = [...line.el.children]; line.spoken = -1;
+    // Posició (en caràcters) del final de cada paraula, per il·luminar-les al ritme de la veu.
+    let n = 0; line.ends = parts.map((p) => (n += p.length)).filter((_, i) => parts[i] && !/^\s+$/.test(parts[i]));
+    paint(line);
+  }
+  function focusLine(line) {
+    for (const l of call.lines) l.el.classList.toggle('now', l === line);
+    call.focus = line; scrollTo(line);
+  }
+  function scrollTo(line) {
+    const lyr = $o('#cLyr'); if (!lyr || Date.now() - (call.userScroll || 0) < 4000) return;
+    lyr.scrollTo({ top: Math.max(0, line.el.offsetTop - lyr.clientHeight * 0.3), behavior: reduce ? 'auto' : 'smooth' });
+  }
+  // Fins a quin caràcter ha parlat en Nio: amb l'alineació d'ElevenLabs si n'hi ha; si no, pel temps d'àudio.
+  function spokenChars(line, t) {
+    if (line.chars.length) {
+      let k = 0; while (k < line.chars.length && line.chars[k] <= t) k++;
+      return line.text.length * (k / line.chars.length);
+    }
+    if (!line.t1 || line.t1 <= line.t0) return line.done ? line.text.length : 0;
+    return line.text.length * Math.min(1, Math.max(0, (t - line.t0) / (line.t1 - line.t0)));
+  }
+  function paint(line) {
+    if (line.who !== 'nio' || !line.words.length) return;
+    const c = line.done && now() >= line.t1 ? Infinity : spokenChars(line, now());
+    let k = 0; while (k < line.ends.length && line.ends[k] - 1 <= c) k++;
+    if (k === line.spoken) return;
+    line.spoken = k;
+    line.words.forEach((w, i) => w.classList.toggle('on', i < k));
+  }
+  // La línia d'en Nio d'aquest torn (se'n comença una si l'anterior ja s'ha tancat).
+  function nioLine() {
+    const l = call.cur;
+    // Una resposta nova després que l'anterior ja hagi sonat del tot: línia nova.
+    if (l && !l.closed && !(l.done && l.t1 && now() > l.t1 + 0.25)) return l;
+    call.cur = addLine('nio'); return call.cur;
+  }
+  function closeTurn() { if (call.cur) call.cur.closed = true; }
+  // Mentre parles, una línia teva amb tres punts que reaccionen a la veu; s'omple amb la transcripció.
+  function hearing(on) {
+    if (!call || call.ended) return;
+    if (on && !call.ear) { call.ear = addLine('tu ear', '', false); call.ear.el.innerHTML = '<i></i><i></i><i></i>'; call.ear.el.hidden = true; }
+    if (!on && call.ear && !call.ear.text) { call.ear.el.remove(); call.lines.splice(call.lines.indexOf(call.ear), 1); call.ear = null; }
+  }
+  // Porta una línia al final de la conversa (l'«orella» es crea abans de saber si parlaràs).
+  function toEnd(l) { $o('#cLines').append(l.el); call.lines.splice(call.lines.indexOf(l), 1); call.lines.push(l); }
+  function userSaid(text, final) {
+    closeTurn();
+    const l = call.ear || addLine('tu');
+    if (call.ear) toEnd(l);
+    l.el.hidden = false; l.el.classList.remove('ear'); l.who = 'tu';
+    setText(l, text); focusLine(l);
+    call.ear = final ? null : l;
+  }
+  function info(label) {
+    if (call.tool) { call.tool.el.remove(); call.lines.splice(call.lines.indexOf(call.tool), 1); call.tool = null; }
+    if (label) { call.tool = addLine('info'); setText(call.tool, label); }
+  }
+
+  function tick() {
+    if (!call?.live) return;
+    $o('#cTime').textContent = fmt((Date.now() - call.t0) / 1000);
+    const t = now();
+    let lvl = 0;
+    const speaking = call.audio ? t < call.audio.until - 0.02 : call.st === 'speaking';
+    if (call.audio?.inAn) {
+      const an = speaking ? call.audio.outAn : call.audio.inAn, buf = call.audio.buf;
+      an.getFloatTimeDomainData(buf); let sum = 0; for (let i = 0; i < buf.length; i++) sum += buf[i] * buf[i];
+      lvl = Math.min(1, Math.sqrt(sum / buf.length) * (speaking ? 4 : 6));
+      if (call.muted && !speaking) lvl = 0;
+    } else if (call.demo) lvl = speaking ? 0.3 + Math.random() * 0.4 : call.st === 'listening' ? Math.random() * 0.12 : 0;
+    call.lvl = call.lvl * 0.75 + lvl * 0.25;
+    call.ov.style.setProperty('--lvl', call.lvl.toFixed(3));
+    // Els tres punts només surten quan de debò parles.
+    if (call.ear && !call.ear.text) { const show = !speaking && call.lvl > 0.12; if (show && call.ear.el.hidden) { toEnd(call.ear); call.ear.el.hidden = false; focusLine(call.ear); } }
+    for (const l of call.lines) if (l.who === 'nio' && l.spoken < l.words.length) paint(l);
+    if (call.audio && call.st !== 'connecting') {
+      if (speaking && call.st !== 'speaking') setState('speaking');
+      else if (!speaking && call.st === 'speaking') { setState('listening'); if (call.hangAfter) end('En Nio ha penjat'); }
+    }
+    call.raf = requestAnimationFrame(tick);
+  }
+
+  // ---------------------------------------------------------------- començar i acabar
+  const fresh = (extra) => ({ lines: [], muted: false, live: false, t0: 0, lvl: 0, st: 'connecting', seen: new Map(), approvals: new Set(), ...extra });
+  async function start() {
+    if (call) return;
+    if (ctx.isDemo()) return demoCall();
+    if (!navigator.mediaDevices?.getUserMedia || !window.WebSocket || !window.AudioContext) return toast('Aquest navegador no pot fer trucades. Prova Chrome o Safari recents.', 4500);
+    call = fresh();
+    call.ov = screen(); setState('connecting');
+    // L'àudio s'ha d'engegar dins del toc (iPhone): el context i el micròfon, abans de res més.
+    try {
+      const actx = new AudioContext({ latencyHint: 'interactive' });
+      await actx.resume();
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true, channelCount: 1 } });
+      call.audio = { ctx: actx, stream, until: 0, srcs: new Set() };
+    } catch (e) {
+      return fail(/denied|NotAllowed|permission/i.test(`${e.name} ${e.message}`) ? 'No tinc permís per al micròfon. Activa’l als ajustos del navegador i torna-ho a provar.' : `No he pogut obrir el micròfon: ${e.message}`);
+    }
+    let s;
+    try { s = await api('/api/call/start', { method: 'POST', body: {} }); }
+    catch (e) { return fail(OLD.test(e.message) ? 'Aquest ordinador encara no sap trucar: actualitza nio (cal nio-cat 0.9.9 o més nou).' : e.message); }
+    if (!call) return;
+    for (const x of ctx.sessions()) call.seen.set(x.id, x.state);
+    call.approvals = new Set(ctx.approvals());
+    connect(s);
+  }
+  function connect(s) {
+    const ws = new WebSocket(s.signedUrl); call.ws = ws;
+    ws.onopen = () => ws.send(JSON.stringify(s.init));
+    ws.onmessage = (m) => { let d; try { d = JSON.parse(m.data); } catch { return; } onMsg(d); };
+    ws.onerror = () => {};
+    ws.onclose = (e) => {
+      if (!call || call.ws !== ws) return;
+      if (call.live) end(e.code === 1000 ? 'Trucada acabada' : `S’ha tallat${e.reason ? `: ${e.reason}` : ''}`);
+      else fail(e.reason ? `ElevenLabs: ${e.reason}` : 'No he pogut connectar amb ElevenLabs.');
+    };
+  }
+  async function onMsg(d) {
+    if (!call) return;
+    const send = (o) => { if (call.ws?.readyState === 1) call.ws.send(JSON.stringify(o)); };
+    switch (d.type) {
+      case 'conversation_initiation_metadata': {
+        const md = d.conversation_initiation_metadata_event || {};
+        call.inRate = rateOf(md.user_input_audio_format); call.outRate = rateOf(md.agent_output_audio_format);
+        await startMic();
+        call.live = true; call.t0 = Date.now();
+        try { call.lock = await navigator.wakeLock?.request('screen'); } catch { /* sense bloqueig */ }
+        navigator.vibrate?.(20);
+        setState('listening'); tick();
+        break;
+      }
+      case 'audio': play(d.audio_event); break;
+      case 'agent_response': { if (call.cur?.done && call.cur.text) closeTurn(); const l = nioLine(); setText(l, d.agent_response_event?.agent_response || ''); l.done = true; info(''); break; }
+      case 'agent_response_correction': { const l = call.lines.filter((x) => x.who === 'nio').at(-1); if (l) { setText(l, d.agent_response_correction_event?.corrected_agent_response || l.text); l.done = true; } break; }
+      case 'tentative_user_transcript': { const t = d.tentative_user_transcription_event?.user_transcript; if (t?.trim()) userSaid(t, false); break; }
+      case 'user_transcript': { const t = d.user_transcription_event?.user_transcript; if (t?.trim()) { userSaid(t, true); if (call.st !== 'speaking') setState('thinking'); } break; }
+      case 'interruption': {
+        // Tallat a mitja frase: es queda el que s'ha arribat a dir.
+        const l = call.cur;
+        if (l && !l.closed && l.words.length) { const k = Math.max(1, l.spoken); setText(l, `${l.words.slice(0, k).map((w) => w.textContent).join(' ')}…`); l.done = true; l.t1 = 0; }
+        closeTurn(); stopPlayback(); setState('listening');
+        break;
+      }
+      case 'ping': send({ type: 'pong', event_id: d.ping_event?.event_id }); break;
+      case 'client_tool_call': {
+        const c = d.client_tool_call || {};
+        if (c.tool_name === 'penja') { call.hangAfter = true; if (call.st !== 'speaking') setTimeout(() => call?.hangAfter && end('En Nio ha penjat'), 1200); if (c.expects_response) send({ type: 'client_tool_result', tool_call_id: c.tool_call_id, result: 'D’acord', is_error: false }); break; }
+        closeTurn(); info(TOOL_LABEL[c.tool_name] || 'Treballant…');
+        try {
+          const r = await api('/api/call/tool', { method: 'POST', body: { name: c.tool_name, parameters: c.parameters || {} } });
+          send({ type: 'client_tool_result', tool_call_id: c.tool_call_id, result: String(r.result ?? ''), is_error: false });
+        } catch (e) { send({ type: 'client_tool_result', tool_call_id: c.tool_call_id, result: e.message, is_error: true }); }
+        break;
+      }
+      case 'client_error': case 'error': toast(d.error_event?.message || 'Error de la trucada', 4500); break;
+    }
+  }
+  async function startMic() {
+    const A = call.audio, actx = A.ctx;
+    const src = actx.createMediaStreamSource(A.stream);
+    A.inAn = actx.createAnalyser(); A.inAn.fftSize = 512; A.buf = new Float32Array(512);
+    A.out = actx.createGain(); A.outAn = actx.createAnalyser(); A.outAn.fftSize = 512;
+    A.out.connect(A.outAn); A.outAn.connect(actx.destination);
+    src.connect(A.inAn);
+    // Es remostreja a la freqüència que vol ElevenLabs (normalment 16 kHz) i s'envia cada ~100 ms.
+    const ratio = actx.sampleRate / call.inRate, chunk = Math.round(call.inRate / 10);
+    let pend = new Float32Array(0), pos = 0;
+    const onFrame = (f) => {
+      if (!call?.ws || call.ws.readyState !== 1) return;
+      const merged = new Float32Array(pend.length + f.length); merged.set(pend); merged.set(f, pend.length); pend = merged;
+      const n = Math.floor((pend.length - pos) / ratio); if (n <= 0) return;
+      const out = new Int16Array(n);
+      for (let i = 0; i < n; i++) { const v = call.muted ? 0 : pend[Math.floor(pos + i * ratio)]; out[i] = Math.max(-1, Math.min(1, v)) * 0x7fff; }
+      pos += n * ratio; const used = Math.floor(pos); pend = pend.slice(used); pos -= used;
+      A.q = A.q ? concat16(A.q, out) : out;
+      if (A.q.length >= chunk) { call.ws.send(JSON.stringify({ user_audio_chunk: b64(new Uint8Array(A.q.buffer)) })); A.q = null; }
+    };
+    const mute = actx.createGain(); mute.gain.value = 0; mute.connect(actx.destination);
+    if (actx.audioWorklet) {
+      const url = URL.createObjectURL(new Blob([WORKLET], { type: 'text/javascript' }));
+      await actx.audioWorklet.addModule(url); URL.revokeObjectURL(url);
+      const node = new AudioWorkletNode(actx, 'nio-mic'); node.port.onmessage = (e) => onFrame(e.data);
+      src.connect(node); node.connect(mute); A.node = node;
+    } else {
+      const node = actx.createScriptProcessor(2048, 1, 1); node.onaudioprocess = (e) => onFrame(e.inputBuffer.getChannelData(0).slice(0));
+      src.connect(node); node.connect(mute); A.node = node;
+    }
+  }
+  function concat16(a, b) { const o = new Int16Array(a.length + b.length); o.set(a); o.set(b, a.length); return o; }
+  function play(ev) {
+    const data = ev?.audio_base_64;
+    if (!data || !call?.audio?.out) return;
+    const A = call.audio, bytes = unb64(data), pcm = new Int16Array(bytes.buffer, 0, bytes.length >> 1);
+    if (!pcm.length) return;
+    const buf = A.ctx.createBuffer(1, pcm.length, call.outRate), ch = buf.getChannelData(0);
+    for (let i = 0; i < pcm.length; i++) ch[i] = pcm[i] / 0x8000;
+    const src = A.ctx.createBufferSource(); src.buffer = buf; src.connect(A.out);
+    const at = Math.max(A.ctx.currentTime + 0.03, A.until);
+    src.start(at); A.until = at + buf.duration;
+    A.srcs.add(src); src.onended = () => A.srcs.delete(src);
+    // La línia d'aquest torn sap quan sona cada caràcter (alineació) o, si no, quant dura l'àudio.
+    info('');
+    const l = nioLine();
+    if (!l.t0) l.t0 = at;
+    l.t1 = A.until;
+    const al = ev.alignment;
+    if (al?.chars?.length && al.char_start_times_ms?.length) {
+      for (let i = 0; i < al.chars.length; i++) l.chars.push(at + al.char_start_times_ms[i] / 1000);
+      if (!l.done) setText(l, `${l.text}${al.chars.join('')}`);
+    }
+    if (call.focus !== l) focusLine(l);
+  }
+  function stopPlayback() { const A = call?.audio; if (!A) return; for (const s of A.srcs) { try { s.stop(); } catch { /* ja aturat */ } } A.srcs.clear(); A.until = 0; }
+
+  // Avisos en directe: si una sessió acaba o un agent demana permís durant la trucada, en Nio ho sap.
+  function onEvent(msg) {
+    if (!call?.live || !call.ws || call.ws.readyState !== 1) return;
+    let text = '';
+    if (msg.type === 'session') {
+      const s = msg.session, was = call.seen.get(s.id); call.seen.set(s.id, s.state);
+      const name = `${ctx.agentName(s.agent)} a ${String(s.cwd).split('/').pop()}`;
+      if (was === 'running' && s.state === 'idle') text = `Avís: ${name} ha acabat «${s.title || 'la sessió'}». Últim missatge: ${String(s.last || '').slice(0, 200)}`;
+      else if (was !== 'error' && s.state === 'error') text = `Avís: ${name} ha fallat: ${String(s.error || '').slice(0, 160)}`;
+    } else if (msg.type === 'approval' && msg.approval.state === 'pending' && !call.approvals.has(msg.approval.id)) {
+      call.approvals.add(msg.approval.id);
+      text = `Avís: ${ctx.agentName(msg.approval.agent)} demana permís per ${msg.approval.tool}: ${String(msg.approval.title || '').slice(0, 80)}. Ho pots aprovar o rebutjar amb l’eina si la persona vol.`;
+    }
+    if (text) call.ws.send(JSON.stringify({ type: 'contextual_update', text }));
+  }
+
+  function fail(msg) {
+    if (!call) return;
+    cleanup();
+    setState('ended', 'No s’ha pogut trucar');
+    const l = addLine('err'); setText(l, msg);
+    finishBar();
+  }
+  function end(why) {
+    if (!call || call.ended) return;
+    const secs = call.live ? (Date.now() - call.t0) / 1000 : 0;
+    cleanup();
+    navigator.vibrate?.([12, 60, 12]);
+    setState('ended', why || 'Trucada acabada');
+    $o('#cTime').textContent = secs ? fmt(secs) : '';
+    call.ov.style.setProperty('--lvl', '0');
+    // Tota la conversa queda per rellegir, ja il·luminada.
+    for (const l of call.lines) { l.done = true; l.t1 = 0; l.chars = []; paint(l); l.el.classList.remove('now'); }
+    call.ov.classList.add('over');
+    finishBar();
+  }
+  function finishBar() {
+    info('');
+    $o('.call-bar').innerHTML = `<button class="call-ctl" type="button" data-c="close" aria-label="Tanca">${svg(I.close)}</button><button class="call-btn go" type="button" data-c="again">${svg(I.call)}<span>Torna a trucar</span></button>`;
+    $o('[data-c="again"]').focus({ preventScroll: true });
+  }
+  function cleanup() {
+    if (!call) return;
+    call.ended = true; call.live = false; cancelAnimationFrame(call.raf); clearTimeout(call.demoT);
+    if (call.ear && !call.ear.text) { call.ear.el.remove(); call.lines.splice(call.lines.indexOf(call.ear), 1); call.ear = null; }
+    const ws = call.ws; call.ws = null; try { ws?.close(1000); } catch { /* ja tancat */ }
+    stopPlayback();
+    const A = call.audio; if (A) { A.stream?.getTracks().forEach((t) => t.stop()); try { A.node?.disconnect(); } catch { /* res */ } A.ctx.close().catch(() => {}); call.audio = null; }
+    try { call.lock?.release(); } catch { /* res */ }
+  }
+  function close() {
+    if (!call) return;
+    const ov = call.ov; cleanup(); call = null;
+    if (reduce) ov.remove(); else ov.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200, easing: 'ease-in' }).onfinish = () => ov.remove();
+  }
+
+  // ---------------------------------------------------------------- demo: una trucada de mostra, sense àudio
+  function demoCall() {
+    call = fresh({ live: true, t0: Date.now(), demo: true });
+    call.ov = screen(); setState('connecting'); tick();
+    const agents = [...new Set(ctx.sessions().map((s) => ctx.agentName(s.agent)))];
+    const list = agents.length > 1 ? `${agents.slice(0, -1).join(', ')} i ${agents.at(-1)}` : agents[0] || 'cap agent';
+    // En Nio «parla» una frase: les paraules s'il·luminen durant el temps que trigaria a dir-la.
+    const speak = (text) => { info(''); closeTurn(); const l = nioLine(); setText(l, text); l.t0 = now(); l.t1 = l.t0 + text.length / 15; l.done = true; setState('speaking'); return (l.t1 - l.t0) * 1000; };
+    const hear = (text) => { setState('listening'); userSaid(text, true); };
+    const script = [
+      [1100, () => speak(`Hola! Sóc en Nio, et parlo des de l’ordinador ${ctx.machine().name}. Tens ${list}. Hi ha una acció esperant el teu permís. Què vols fer?`)],
+      [null, () => setState('listening')],
+      [1500, () => hear('Què vol fer Codex?')],
+      [500, () => { setState('thinking'); info(TOOL_LABEL.estat); }],
+      [1300, () => speak('Codex vol executar la migració de la base de dades, a la carpeta api. L’aprovo?')],
+      [null, () => setState('listening')],
+      [1400, () => hear('Sí, aprova-la.')],
+      [500, () => { setState('thinking'); info(TOOL_LABEL.decideix_aprovacio); }],
+      [1100, () => speak('Fet, aprovada. Codex ja hi torna a treballar. Alguna cosa més?')],
+      [null, () => setState('listening', 'T’escolta · és una demo')],
+    ];
+    let i = 0, wait = 0;
+    const next = () => {
+      if (!call?.demo || call.ended || i >= script.length) return;
+      const [w, f] = script[i++];
+      call.demoT = setTimeout(() => { if (!call || call.ended) return; const r = f(); wait = typeof r === 'number' ? r + 300 : 0; next(); }, w ?? wait);
+    };
+    next();
+  }
+
+  return { mount, unmount, onEvent, get active() { return !!call; } };
+}

package/web/app/demo.js

@@ -314,6 +314,7 @@
     if (method === 'GET') {
       if (p === '/api/info') return { name: 'nio', version: 'demo', host: 'Ordinador de demo', platform: 'darwin', user: 'tu', publicUrl: null, agents: AGENTS, roots: [ROOT], vapidKey: null, id: 'demo', device: { id: 'demo', name: 'Aquest navegador', primary: true }, demo: true, control: caps };
       if (p === '/api/usage') return DEMO_USAGE;
+      if (p === '/api/claude-sessions') return { sessions: [{ sessionId: 'demo-terminal', pid: 1, cwd: `${ROOT}/web-botiga`, kind: 'interactive', status: 'busy', name: '', title: 'Arregla el pagament amb targeta', startedAt: Date.now() - 40 * 60000, updated: Date.now() - 2 * 60000, ask: 'Els pagaments amb targeta fallen quan el client canvia de moneda. Mira-ho i arregla-ho.', last: '', terminal: { app: 'iTerm', tmux: false, screen: false, ssh: false }, transcript: true }] };
       if (p === '/api/notes') return { notes: NOTES };
       if (p === '/api/notes/engines') return { engines: [{ id: 'ollama:qwen3:4b', label: 'qwen3:4b · 4.0B', local: true, group: 'Local (Ollama)', params: 4 }] };
     if (p === '/api/sessions') return list();

package/web/app/index.html

@@ -36,6 +36,7 @@
 <link rel="stylesheet" href="/board.css">
 <link rel="stylesheet" href="/app/style.css">
 <link rel="stylesheet" href="/app/notes.css">
+<link rel="stylesheet" href="/app/call.css">
 </head>
 <body>
 <header class="mbar">