nio-cat 0.4.3 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "nio: fes servir Claude Code, Codex, Grok, Antigravity i Ollama del teu ordinador des del mòbil.",
   "license": "MIT",
   "author": "f.cat",

package/src/agents/claude.js

@@ -15,10 +15,15 @@ module.exports = {
 
   start(ctx) {
     const { session, prompt, cfg } = ctx;
-    const args = ['-p', prompt, '--output-format', 'stream-json', '--verbose'];
+    const args = ['-p', prompt, '--output-format', 'stream-json', '--verbose', '--include-partial-messages'];
     if (session.nativeId) args.push('--resume', session.nativeId);
     if (session.model) args.push('--model', session.model);
 
+    if (session.mode === 'tot' && process.getuid?.() === 0) {
+      ctx.fail('Claude Code no deixa el mode «Via lliure» quan s’executa com a root. Canvia els permisos a «Demana permís» o engega nio amb un usuari normal.');
+      return { kill() {} };
+    }
+
     const env = {};
     if (session.mode === 'llegir') {
       args.push('--permission-mode', 'plan');
@@ -65,9 +70,14 @@ function handle(ctx, line) {
         if (ev.model) ctx.meta({ model: ev.model });
       }
       break;
+    case 'stream_event': {
+      const d = ev.event?.type === 'content_block_delta' ? ev.event.delta : null;
+      if (d?.type === 'text_delta' && d.text) ctx.stream(d.text);
+      break;
+    }
     case 'assistant':
       for (const b of ev.message?.content || []) {
-        if (b.type === 'text' && b.text) ctx.text(b.text);
+        if (b.type === 'text' && b.text) ctx.endStream(b.text);
         else if (b.type === 'tool_use') ctx.tool({ id: b.id, name: b.name, input: b.input });
       }
       break;
@@ -91,6 +101,6 @@ function handle(ctx, line) {
       });
       break;
     default:
-      break; // stream_event, rate_limit_event, etc.
+      break; // rate_limit_event, etc.
   }
 }

package/src/hub.js

@@ -72,6 +72,7 @@ class Hub extends EventEmitter {
       updated: s.updated,
       cost: s.cost || 0,
       last: lastText ? clip(lastText.text, 160) : '',
+      error: s.state === 'error' ? clip([...s.events].reverse().find((e) => e.kind === 'error')?.text || '', 200) : '',
       pending: [...this.approvals.values()].filter((a) => a.session === s.id && a.state === 'pending').length,
     };
   }
@@ -116,8 +117,20 @@ class Hub extends EventEmitter {
       this.persist(s);
       return;
     }
-    const ev = this.push(s, 'text', { text });
-    ev.open = true;
+    this.push(s, 'text', { text, open: true });
+  }
+
+  // Tanca el bloc de text en curs amb el text definitiu (o l'afegeix si no hi havia streaming).
+  endStream(s, text) {
+    const last = s.events[s.events.length - 1];
+    if (last && last.kind === 'text' && last.open) {
+      last.text = text;
+      delete last.open;
+      this.emit('out', { type: 'event', session: s.id, event: last });
+      this.touch(s);
+      return;
+    }
+    this.push(s, 'text', { text });
   }
 
   // ---------- sessions ----------
@@ -194,6 +207,8 @@ class Hub extends EventEmitter {
     const key = id(16);
     const toolNames = new Map();
     let finished = false;
+    let reported = false;
+    const tail = [];
     const ctx = {
       session: s,
       prompt: text,
@@ -212,6 +227,7 @@ class Hub extends EventEmitter {
         this.touch(s);
       },
       text: (t) => this.push(s, 'text', { text: String(t) }),
+      endStream: (t) => this.endStream(s, String(t)),
       stream: (t) => this.chunk(s, String(t)),
       tool: ({ id: tid, name, input }) => {
         toolNames.set(tid, name);
@@ -223,10 +239,19 @@ class Hub extends EventEmitter {
         if (typeof r.cost === 'number') s.cost = (s.cost || 0) + r.cost;
         this.push(s, 'result', r);
       },
-      error: (msg) => this.push(s, 'error', { text: clip(typeof msg === 'string' ? msg : JSON.stringify(msg), 1200) }),
+      error: (msg) => {
+        reported = true;
+        this.push(s, 'error', { text: clip(typeof msg === 'string' ? msg : JSON.stringify(msg), 1200) });
+      },
+      fail: (msg) => {
+        ctx.error(msg);
+        queueMicrotask(() => ctx.done(1));
+      },
       log: (line) => {
-        // Les línies de stderr només es guarden; el mòbil les mostra plegades.
+        // Les línies de stderr es guarden (el mòbil les mostra plegades) i les últimes expliquen un error.
         if (/^\s*$/.test(line)) return;
+        tail.push(line.trim());
+        if (tail.length > 4) tail.shift();
         this.push(s, 'log', { text: clip(line, 600) });
       },
       ask: ({ tool, input }) => this.requestApproval({ session: s.id, tool, input }),
@@ -238,8 +263,9 @@ class Hub extends EventEmitter {
           if (a.session === sid && a.state === 'pending') this.decide(a.id, 'deny', 'La sessió s’ha acabat');
         }
         if (err) this.push(s, 'error', { text: `No s’ha pogut engegar: ${err.message}` });
-        else if (code && code !== 0 && code !== 130 && code !== 143) {
-          this.push(s, 'error', { text: `L’agent s’ha aturat amb un error (codi ${code})` });
+        else if (code && code !== 0 && code !== 130 && code !== 143 && !reported) {
+          const why = explain(tail);
+          this.push(s, 'error', { text: why || `${agentName(s)} s’ha aturat amb un error (codi ${code})${tail.length ? `:\n${tail.join('\n')}` : ''}` });
         }
         s.state = code === 130 || code === 143 ? 'idle' : code && code !== 0 ? 'error' : 'idle';
         this.push(s, 'status', { state: s.state, code });
@@ -342,6 +368,15 @@ class Hub extends EventEmitter {
   }
 }
 
+// Causes conegudes d'una sortida amb error, explicades en català.
+function explain(lines) {
+  const t = lines.join('\n');
+  if (/cannot be used with root/i.test(t)) return 'Claude Code no deixa el mode «Via lliure» quan s’executa com a root. Canvia els permisos a «Demana permís» o engega nio amb un usuari normal.';
+  if (/not logged in|please run \/login|invalid api key|authentication/i.test(t)) return 'L’agent no té la sessió iniciada en aquest ordinador. Entra-hi per terminal i inicia sessió (per exemple, executant «claude»).';
+  if (/rate limit|usage limit|quota|overloaded|429/i.test(t)) return `L’agent ha arribat al límit d’ús o està saturat. Torna-ho a provar d’aquí una estona.\n${lines.slice(-1)[0] || ''}`.trim();
+  return '';
+}
+
 function agentName(s) {
   return (s && byId[s.agent]?.name) || 'L’agent';
 }

package/web/app/app.js

@@ -31,8 +31,10 @@ const ICON = {
   server: '<rect x="3" y="4" width="18" height="6" rx="2"/><rect x="3" y="14" width="18" height="6" rx="2"/><path d="M7 7h.01M7 17h.01"/>',
   scan: '<path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3M4 12h16"/>',
   check: '<path class="tick" d="M5 12.5l4.5 4.5L19 7.5"/>',
+  mic: '<rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>', speaker: '<path d="M4 9.5v5h3.5L12 18.5v-13L7.5 9.5zM15.5 9a4 4 0 0 1 0 6M18 6.5a8 8 0 0 1 0 11"/>',
   copy: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3"/>'
 };
+const agentBot = (agent, mood = 'idle') => `<span class="abot" data-agent="${esc(agent)}">${bot(mood)}</span>`;
 const AGENT_NAMES = { claude: 'Claude Code', codex: 'Codex', grok: 'Grok', antigravity: 'Antigravity', ollama: 'Ollama', demo: 'Demo', browser: 'Xat local' };
 const MODES = {
   llegir: { label: 'Només llegir', short: 'Llegir' },
@@ -376,7 +378,7 @@ function viewComputers() {
       <section class="panel"><header><h2>Avisos al mòbil</h2></header><div class="body stack"><p class="small">Rep un avís quan un agent et demana permís o acaba la feina.</p>${isIOS && !standalone ? '<p class="muted small">A l’iPhone, primer afegeix nio a la pantalla d’inici (Comparteix → Afegeix a la pantalla d’inici) i obre’l des d’allà.</p>' : ''}<div class="row"><button class="btn ink grow" data-act="push" type="button">Activa els avisos</button><button class="btn" data-act="push-test" type="button">Envia’n un de prova</button></div></div></section>
     </div>
   </div>` : '';
-  return `${head}<div class="computers">${ms.map(computerCard).join('')}</div>${detail}${helpPanel()}`;
+  return `${head}<div class="computers">${ms.map(computerCard).join('')}</div>${detail}${voicePanel()}${helpPanel()}`;
 }
 
 /* ---------- Afegir un ordinador: aquest, un servidor per SSH o un codi */
@@ -490,7 +492,7 @@ function machinesSheet() {
     <div class="row between sheet-foot">${ms.length ? '<a class="btn ghost" href="#/ordinadors" data-close>Gestiona</a>' : '<button class="btn ghost" type="button" data-close>Tanca</button>'}<button class="btn ink" type="button" data-act="add-computer">${svg(ICON.plus)}Afegeix ordinador</button></div>`, (sh) => { $$('[data-close]', sh).forEach((b) => (b.onclick = closeSheet)); });
 }
 function moreSheet() {
-  openSheet(`<h2>Més</h2><div class="list">${['models', 'mobil', 'pissarra'].map((k) => `<a class="card row" href="${HASH[k]}" style="gap:12px">${svg(VIEWS[k].icon)}<b>${VIEWS[k].label}</b></a>`).join('')}<a class="card row" href="#/ordinadors" data-act="help" style="gap:12px"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16v.1"/></svg><b>Com es fa</b></a><button class="card row" type="button" data-act="tour" style="gap:12px"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.6M12 17.2v.1"/></svg><b>Tutorial</b></button></div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
+  openSheet(`<h2>Més</h2><div class="list">${['models', 'mobil', 'pissarra'].map((k) => `<a class="card row" href="${HASH[k]}" style="gap:12px">${svg(VIEWS[k].icon)}<b>${VIEWS[k].label}</b></a>`).join('')}<button class="card row" type="button" data-act="voice" style="gap:12px">${svg(ICON.mic)}<b>Veu</b></button><a class="card row" href="#/ordinadors" data-act="help" style="gap:12px"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16v.1"/></svg><b>Com es fa</b></a><button class="card row" type="button" data-act="tour" style="gap:12px"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.6M12 17.2v.1"/></svg><b>Tutorial</b></button></div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
 }
 
 /* ---------- Sessions */
@@ -511,9 +513,9 @@ function viewSessions() {
   }
   return `${head}${list.length ? `<div class="list">${list.map((s) => `
     <a class="card session-card" href="#/s/${esc(s.id)}">
-      <div class="row between"><span class="agent-tag" data-agent="${esc(s.agent)}">${esc(AGENT_NAMES[s.agent] || s.agent)}</span>${stateChip(s)}</div>
+      <div class="row between"><span class="agent-tag nosq" data-agent="${esc(s.agent)}">${agentBot(s.agent, sessionMood(s))}${esc(AGENT_NAMES[s.agent] || s.agent)}</span>${stateChip(s)}</div>
       <div class="title">${esc(s.title || 'Sessió nova')}</div>
-      ${s.last ? `<div class="last">${esc(s.last)}</div>` : ''}
+      ${s.state === 'error' && s.error ? `<div class="last err">${esc(s.error)}</div>` : s.last ? `<div class="last">${esc(s.last)}</div>` : ''}
       <div class="meta"><span class="mono">${esc(basename(s.cwd))}</span><span>·</span><span>${esc(MODES[s.mode]?.label || '')}</span><span>·</span><span>${ago(s.updated)}</span></div>
     </a>`).join('')}</div>` : `<div class="panel empty">${bot('idle')}<h2>Encara no hi ha cap sessió</h2><p>Tria un agent i una carpeta, i explica-li què ha de fer.</p><button class="btn ink" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button></div>`}`;
 }
@@ -578,7 +580,7 @@ let feedEls = new Map(), toolEls = new Map();
 function renderSession() {
   const id = state.route.id, view = $('#view');
   view.innerHTML = `<section class="chat">
-    <div class="chat-head"><a class="icon-btn" href="#/sessions" aria-label="Torna a les sessions">${svg(ICON.back)}</a><span id="headBot"></span><div class="grow"><h1 id="sessTitle"></h1><div class="sub" id="sessSub"></div></div><button class="icon-btn" data-act="session-more" aria-label="Opcions de la sessió">${svg(ICON.more)}</button></div>
+    <div class="chat-head"><a class="icon-btn" href="#/sessions" aria-label="Torna a les sessions">${svg(ICON.back)}</a><span id="headBot" class="abot"></span><div class="grow"><h1 id="sessTitle"></h1><div class="sub" id="sessSub"></div></div><button class="icon-btn" data-act="session-more" aria-label="Opcions de la sessió">${svg(ICON.more)}</button></div>
     <div class="mode-bar" id="modeBar"></div>
     <div class="feed" id="feed" aria-live="polite"></div>
     <div class="composer" id="composer"></div>
@@ -598,10 +600,10 @@ function renderSessionHead() {
   if (!bar) return;
   $('#sessTitle').textContent = s?.title || 'Sessió nova';
   $('#sessSub').textContent = s ? `${AGENT_NAMES[s.agent] || s.agent} · ${basename(s.cwd)}` : '';
-  const hb = $('#headBot'); if (hb) { hb.innerHTML = bot(sessionMood(s)); window.NioBot?.refresh(); }
+  const hb = $('#headBot'); if (hb) { hb.dataset.agent = s?.agent || ''; hb.innerHTML = bot(sessionMood(s)); window.NioBot?.refresh(); }
   if (!s) { bar.innerHTML = ''; return; }
   const ag = state.info?.agents?.find((a) => a.id === s.agent);
-  bar.innerHTML = `<span class="chip"><span class="agent-tag" data-agent="${esc(s.agent)}">${esc(AGENT_NAMES[s.agent] || s.agent)}</span></span>
+  bar.innerHTML = `<span class="chip"><span class="agent-tag nosq" data-agent="${esc(s.agent)}">${agentBot(s.agent, sessionMood(s))}${esc(AGENT_NAMES[s.agent] || s.agent)}</span></span>
     ${ag?.noModes ? '' : `<button class="chip" data-act="mode" type="button">${esc(MODES[s.mode]?.label || s.mode)}</button>`}
     <span class="chip mono">${esc(basename(s.cwd))}</span>
     <button class="chip mono" data-act="model" type="button" title="Canvia de model">${esc(s.model || 'Model per defecte')}</button>
@@ -645,11 +647,11 @@ function eventNode(e) {
   const s = state.sessions.get(state.route.id);
   switch (e.kind) {
     case 'user': return el(`<div class="msg-user">${esc(e.text)}</div>`);
-    case 'text': return el(`<div class="msg-ai ${e.open && s?.state === 'running' ? 'cursor' : ''}">${md(e.text)}</div>`);
+    case 'text': return el(`<div class="msg-ai ${e.open && s?.state === 'running' ? 'cursor' : ''}" data-seq="${e.seq}">${md(e.text)}${!e.open && voiceOn() ? `<button class="speak" type="button" data-speak aria-label="Escolta la resposta">${svg(ICON.speaker)}<span>Escolta</span></button>` : ''}</div>`);
     case 'tool': return el(`<details class="tool"><summary><span class="name">${esc(e.name)}</span><span class="arg">${esc(toolArg(e.input))}</span><span class="st">…</span></summary><pre>${esc(prettyInput(e.input))}</pre></details>`);
     case 'tool_result': return el(`<details class="tool"><summary><span class="name">${esc(e.name || 'Eina')}</span><span class="arg"></span><span class="st ${e.error ? 'err' : 'ok'}">${e.error ? '✕' : '✓'}</span></summary><pre class="out">${esc(e.output)}</pre></details>`);
     case 'approval': { const a = state.approvals.get(e.approval) || {}; return el(approvalCard({ ...a, approval: e.approval, tool: e.tool, input: e.input, state: e.state && e.state !== 'pending' ? e.state : a.state || e.state }, false)); }
-    case 'error': return el(`<div class="ev-error">${esc(e.text)}</div>`);
+    case 'error': return el(`<div class="ev-error" role="alert"><b>Error</b><span>${esc(e.text)}</span></div>`);
     case 'info': return el(`<div class="ev-info">${esc(e.text)}</div>`);
     case 'result': {
       const bits = [];
@@ -669,10 +671,10 @@ function renderTyping() {
   const last = evs ? [...evs.values()].sort((a, b) => b.seq - a.seq).find((x) => x.kind !== 'status' && x.kind !== 'log') : null;
   const streaming = last && last.kind === 'text' && last.open;
   let t = $('.typing', feed);
-  if (busy && !streaming) { if (!t) { feed.appendChild(el(`<div class="typing">${bot('work')}<span>${esc(AGENT_NAMES[s.agent] || 'L’agent')} està treballant…</span></div>`)); window.NioBot?.refresh(); } }
+  if (busy && !streaming) { if (!t) { feed.appendChild(el(`<div class="typing">${agentBot(s.agent, 'work')}<span>${esc(AGENT_NAMES[s.agent] || 'L’agent')} està treballant…</span></div>`)); window.NioBot?.refresh(); } }
   else if (t) t.remove();
   if (!busy) $$('.msg-ai.cursor', feed).forEach((n) => n.classList.remove('cursor'));
-  const hb = $('#headBot .bot'); if (hb) hb.dataset.mood = sessionMood(s);
+  $$('.mode-bar .abot .bot, #headBot .bot').forEach((b) => { b.dataset.mood = sessionMood(s); });
 }
 /* ---------- Comandes amb «/» (les de nio i les de l'agent) */
 const NIO_CMDS = [
@@ -732,7 +734,7 @@ function renderComposer() {
   if (box.dataset.busy === String(busy) && $('textarea', box)) return;
   box.dataset.busy = String(busy);
   if (s) loadCmds(s.id).then(() => { if (state.route.id === s.id) drawSlash(); });
-  box.innerHTML = `<div class="slash" id="slash" role="listbox" hidden></div><div class="inner"><textarea rows="1" id="msg" placeholder="${busy ? 'L’agent està treballant…' : 'Escriu a l’agent… (/ per a comandes)'}" enterkeyhint="send" aria-label="Missatge" aria-controls="slash"></textarea><button class="send ${busy ? 'stop' : ''}" id="sendBtn" type="button" aria-label="${busy ? 'Atura l’agent' : 'Envia'}">${svg(busy ? ICON.stop : ICON.send)}</button></div>`;
+  box.innerHTML = `<div class="slash" id="slash" role="listbox" hidden></div><div class="inner"><textarea rows="1" id="msg" placeholder="${busy ? 'L’agent està treballant…' : 'Escriu a l’agent… (/ per a comandes)'}" enterkeyhint="send" aria-label="Missatge" aria-controls="slash"></textarea><button class="mic" id="micBtn" type="button" data-mic aria-label="Dicta amb el micròfon">${svg(ICON.mic)}</button><button class="send ${busy ? 'stop' : ''}" id="sendBtn" type="button" aria-label="${busy ? 'Atura l’agent' : 'Envia'}">${svg(busy ? ICON.stop : ICON.send)}</button></div>`;
   const ta = $('#msg'); ta.value = prev;
   const grow = () => autogrow(ta);
   let items = [], sel = 0;
@@ -783,8 +785,11 @@ function openSheet(html, onMount, cls) {
 const closeSheet = () => { const d = $('#sheet'); if (d.open) d.close(); };
 $('#sheet').addEventListener('click', (e) => { if (e.target.id === 'sheet') closeSheet(); });
 
+// Claude Code no deixa «Via lliure» quan nio corre com a root (típic en un VPS).
+const modeBlocked = (agentId, mode) => agentId === 'claude' && mode === 'tot' && state.info?.user === 'root';
 function modeHelp(agentId, mode) {
   const a = state.info?.agents?.find((x) => x.id === agentId);
+  if (modeBlocked(agentId, mode)) return 'No disponible: Claude Code no ho permet quan s’executa com a root. Fes servir «Demana permís» o engega nio amb un usuari normal.';
   if (mode === 'llegir') return 'Llegeix el projecte i et proposa canvis, però no toca cap fitxer.';
   if (mode === 'tot') return 'Treballa sense preguntar. Fes-lo servir només en carpetes on confiïs plenament.';
   if (a?.approvals) return 'Llegeix sol. Abans d’editar un fitxer o d’executar una ordre, et demana permís aquí.';
@@ -867,10 +872,11 @@ async function newSessionSheet(preset = {}) {
       },
       () => {
         const ag = agentOf();
+        if (modeBlocked(sel.agent, sel.mode)) sel.mode = 'preguntar';
         const modelHtml = sel.agent === 'ollama'
           ? `<label class="f"><span>Model</span><select id="modelSel">${(models || []).map((m) => `<option ${m.name === sel.model ? 'selected' : ''}>${esc(m.name)}</option>`).join('') || `<option value="">${models == null ? 'Carregant…' : 'Cap model (ollama pull qwen3:4b)'}</option>`}</select></label>`
           : `<label class="f"><span>Model <span class="muted">(opcional)</span></span><input type="text" id="modelIn" value="${esc(sel.model)}" placeholder="El que l’agent faci servir per defecte" autocapitalize="off" spellcheck="false"></label>`;
-        return `<p class="wiz-q">Quins permisos té?</p>${ag?.noModes ? '<p class="muted small">Aquest agent no té modes de permisos.</p>' : `<div class="list">${Object.entries(MODES).map(([k, m]) => `<button class="card" type="button" data-mode="${k}" aria-pressed="${k === sel.mode}"><b>${m.label}</b><div class="muted small" style="margin-top:4px">${esc(modeHelp(sel.agent, k))}</div></button>`).join('')}</div>`}${modelHtml}`;
+        return `<p class="wiz-q">Quins permisos té?</p>${ag?.noModes ? '<p class="muted small">Aquest agent no té modes de permisos.</p>' : `<div class="list">${Object.entries(MODES).map(([k, m]) => `<button class="card" type="button" data-mode="${k}" aria-pressed="${k === sel.mode}" ${modeBlocked(sel.agent, k) ? 'disabled' : ''}><b>${m.label}</b><div class="muted small" style="margin-top:4px">${esc(modeHelp(sel.agent, k))}</div></button>`).join('')}</div>`}${modelHtml}`;
       },
       () => `<p class="wiz-q">Què ha de fer?</p>
         <dl class="kv"><dt>Agent</dt><dd>${esc(AGENT_NAMES[sel.agent] || sel.agent)}</dd><dt>Carpeta</dt><dd class="mono">${esc(sel.cwd)}</dd>${agentOf()?.noModes ? '' : `<dt>Permisos</dt><dd>${esc(MODES[sel.mode].label)}</dd>`}${sel.model ? `<dt>Model</dt><dd class="mono">${esc(sel.model)}</dd>` : ''}</dl>
@@ -935,7 +941,7 @@ async function modelSheet(s) {
   });
 }
 function modeSheet(s) {
-  openSheet(`<h2>Permisos</h2><div class="list">${Object.entries(MODES).map(([k, m]) => `<button class="card" type="button" data-m="${k}" style="${k === s.mode ? 'border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)' : ''}"><b>${m.label}</b><div class="muted small" style="margin-top:4px">${esc(modeHelp(s.agent, k))}</div></button>`).join('')}</div><p class="muted small">El canvi s’aplica a partir del pròxim missatge.</p>`, (sh) => {
+  openSheet(`<h2>Permisos</h2><div class="list">${Object.entries(MODES).map(([k, m]) => `<button class="card" type="button" data-m="${k}" ${modeBlocked(s.agent, k) ? 'disabled' : ''} style="${k === s.mode ? 'border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)' : ''}"><b>${m.label}</b><div class="muted small" style="margin-top:4px">${esc(modeHelp(s.agent, k))}</div></button>`).join('')}</div><p class="muted small">El canvi s’aplica a partir del pròxim missatge.</p>`, (sh) => {
     $$('[data-m]', sh).forEach((b) => (b.onclick = async () => {
       try { const sum = await api(`/api/sessions/${s.id}`, { method: 'PATCH', body: { mode: b.dataset.m } }); state.sessions.set(s.id, sum); closeSheet(); renderSessionHead(); }
       catch (e) { toast(e.message); }
@@ -1225,9 +1231,81 @@ async function sendLocal() {
   local.messages.push({ role: 'assistant', content: stripThink(acc) || '…' }); local.busy = false; local.stopped = false; setLocalBusy(false);
 }
 
+/* ---------------------------------------------------------------- veu (ElevenLabs) */
+// La clau viu només en aquest navegador; les crides van directes a ElevenLabs, sense passar per nio.
+const VOICE_DEFAULT = { key: '', voice: 'JBFqnCBsd6RMkjVDRZzb', model: 'eleven_v3' };
+const voiceCfg = () => ({ ...VOICE_DEFAULT, ...LS.get('nio.voice', {}) });
+const voiceOn = () => !!voiceCfg().key;
+async function elevenlabs(path, init = {}) {
+  const res = await fetch(`https://api.elevenlabs.io${path}`, { ...init, headers: { 'xi-api-key': voiceCfg().key, ...(init.headers || {}) } });
+  if (res.ok) return res;
+  let why = ''; try { const j = await res.json(); why = j.detail?.message || (typeof j.detail === 'string' ? j.detail : ''); } catch { /* sense cos */ }
+  throw new Error(res.status === 401 ? 'La clau d’ElevenLabs no és vàlida.' : res.status === 429 ? 'ElevenLabs diu que has superat el límit. Prova-ho d’aquí una estona.' : `ElevenLabs: ${why || `error ${res.status}`}`);
+}
+const speech = { audio: null, btn: null, cache: new Map() };
+const speechText = (t) => String(t).replace(/```[\s\S]*?```/g, ' (bloc de codi) ').replace(/`([^`]+)`/g, '$1').replace(/\*\*([^*]+)\*\*/g, '$1').replace(/\[([^\]]+)\]\([^)]+\)/g, '$1').replace(/^#{1,4}\s+/gm, '').replace(/^\s*[-*•]\s+/gm, '').trim().slice(0, 4500);
+function stopSpeech() { speech.audio?.pause(); speech.audio = null; speech.btn?.classList.remove('on', 'wait'); speech.btn = null; }
+async function speak(btn) {
+  if (speech.btn === btn) return stopSpeech();
+  stopSpeech();
+  const ev = state.events.get(state.route.id)?.get(Number(btn.closest('[data-seq]')?.dataset.seq)), text = speechText(ev?.text || '');
+  if (!text) return;
+  speech.btn = btn; btn.classList.add('wait');
+  try {
+    const c = voiceCfg(), k = `${c.voice}|${c.model}|${text}`; let url = speech.cache.get(k);
+    if (!url) {
+      const res = await elevenlabs(`/v1/text-to-speech/${encodeURIComponent(c.voice)}?output_format=mp3_44100_64`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ text, model_id: c.model }) });
+      url = URL.createObjectURL(await res.blob()); speech.cache.set(k, url);
+    }
+    if (speech.btn !== btn) return;
+    const a = new Audio(url); speech.audio = a; a.onended = stopSpeech; await a.play();
+    btn.classList.remove('wait'); btn.classList.add('on');
+  } catch (e) { stopSpeech(); toast(e.message, 4500); }
+}
+const mic = { rec: null, chunks: [], stream: null };
+async function toggleMic() {
+  if (!voiceOn()) return voiceSheet();
+  if (mic.rec) return mic.rec.stop();
+  if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) return toast('Aquest navegador no pot gravar àudio.');
+  try { mic.stream = await navigator.mediaDevices.getUserMedia({ audio: true }); } catch { return toast('No tinc permís per al micròfon. Activa’l als ajustos del navegador.', 4500); }
+  const rec = new MediaRecorder(mic.stream); mic.rec = rec; mic.chunks = [];
+  rec.ondataavailable = (e) => { if (e.data.size) mic.chunks.push(e.data); };
+  rec.onstop = async () => {
+    mic.stream.getTracks().forEach((t) => t.stop()); mic.rec = null;
+    const blob = new Blob(mic.chunks, { type: rec.mimeType || 'audio/webm' });
+    $('#micBtn')?.classList.remove('rec'); $('#micBtn')?.classList.add('wait');
+    try {
+      if (blob.size < 1500) throw new Error('No he sentit res. Prova-ho una altra vegada.');
+      const fd = new FormData(); fd.append('model_id', 'scribe_v1'); fd.append('file', blob, 'veu.webm');
+      const r = await (await elevenlabs('/v1/speech-to-text', { method: 'POST', body: fd })).json(), ta = $('#msg');
+      if (!r.text?.trim()) toast('No he entès res.');
+      else if (ta) { ta.value = `${ta.value ? `${ta.value} ` : ''}${r.text.trim()}`; ta.dispatchEvent(new Event('input')); ta.focus(); }
+    } catch (e) { toast(e.message, 4500); }
+    $('#micBtn')?.classList.remove('wait');
+  };
+  rec.start(); $('#micBtn')?.classList.add('rec');
+}
+function voicePanel() {
+  return `<section class="panel" style="margin-top:28px"><header><h2>Veu</h2>${voiceOn() ? '<span class="chip ok"><i class="dot on"></i>ElevenLabs</span>' : ''}</header><div class="body stack"><p class="small">Dicta els missatges amb el micròfon i escolta les respostes de l’agent, amb ElevenLabs.</p><div class="row"><button class="btn ink" data-act="voice" type="button">${voiceOn() ? 'Canvia la configuració' : 'Configura la veu'}</button></div></div></section>`;
+}
+function voiceSheet() {
+  const c = voiceCfg();
+  openSheet(`<h2>Veu amb ElevenLabs</h2><p class="muted small">Dicta amb el micròfon i escolta les respostes. La clau es queda només en aquest navegador: les crides van directes a ElevenLabs, nio no les veu.</p>
+    <form class="stack" id="voiceForm" style="margin-top:14px">
+      <label class="f"><span>Clau d’API</span><input type="password" id="vKey" value="${esc(c.key)}" placeholder="sk_…" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
+      <label class="f"><span>Identificador de la veu</span><input type="text" id="vVoice" value="${esc(c.voice)}" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
+      <label class="f"><span>Model</span><select id="vModel"><option value="eleven_v3" ${c.model === 'eleven_v3' ? 'selected' : ''}>v3 (inclou català)</option><option value="eleven_multilingual_v2" ${c.model === 'eleven_multilingual_v2' ? 'selected' : ''}>Multilingual v2</option></select></label>
+      <div class="row between sheet-foot"><button class="btn ghost" type="button" id="vOff" ${c.key ? '' : 'disabled'}>Treu la clau</button><button class="btn ink" type="submit">Desa</button></div>
+    </form>`, (sh) => {
+    const save = (v) => { LS.set('nio.voice', v); closeSheet(); if (state.route.name === 'session') renderSession(); else render(); };
+    $('#voiceForm', sh).onsubmit = (e) => { e.preventDefault(); const key = $('#vKey', sh).value.trim(); if (!key) return toast('Enganxa la clau d’API.'); save({ key, voice: $('#vVoice', sh).value.trim() || VOICE_DEFAULT.voice, model: $('#vModel', sh).value }); toast('Veu activada'); };
+    $('#vOff', sh).onclick = () => { save({ ...c, key: '' }); toast('Clau eliminada'); };
+  });
+}
+
 /* ---------------------------------------------------------------- accions */
 document.addEventListener('click', async (e) => {
-  const a = e.target.closest('[data-act], [data-copy], [data-decide], [data-machine], [data-forget], [data-reconnect], [data-lm]');
+  const a = e.target.closest('[data-act], [data-speak], [data-mic], [data-copy], [data-decide], [data-machine], [data-forget], [data-reconnect], [data-lm]');
   if (!a) return;
   if (a.dataset.copy) {
     try { await navigator.clipboard.writeText(a.dataset.copy); } catch { return toast(a.dataset.copy); }
@@ -1238,6 +1316,8 @@ document.addEventListener('click', async (e) => {
     setTimeout(() => { a.innerHTML = html; a.classList.remove('copied'); delete a.dataset.copied; }, 1700);
     return;
   }
+  if (a.dataset.speak != null) return speak(a);
+  if (a.dataset.mic != null) return toggleMic();
   if (a.dataset.decide) return decide(a.closest('[data-approval]'), a.dataset.decide);
   if (a.dataset.machine != null) return switchMachine(Number(a.dataset.machine));
   if (a.dataset.reconnect != null) { const m = store.machines[Number(a.dataset.reconnect)]; return addComputerSheet('vps', { target: m.via, auto: true }); }
@@ -1270,6 +1350,7 @@ document.addEventListener('click', async (e) => {
     case 'lm-clear': local.messages = []; return render();
     case 'palette': return palette();
     case 'tour': return tourStart();
+    case 'voice': return voiceSheet();
   }
 });
 document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t.classList?.contains('switch') && t.dataset.act) { e.preventDefault(); t.click(); } });
@@ -1290,6 +1371,7 @@ function commands() {
   c.push({ label: 'Afegeix un ordinador', hint: 'Crea', run: () => addComputerSheet() });
   [...state.sessions.values()].slice(0, 20).forEach((s) => c.push({ label: s.title || 'Sessió nova', hint: AGENT_NAMES[s.agent] || s.agent, run: () => go(`#/s/${s.id}`) }));
   c.push({ label: 'Com es fa (ajuda)', hint: 'Ajuda', run: () => { go('#/ordinadors'); setTimeout(() => $('#help')?.scrollIntoView({ block: 'start' }), 60); } });
+  c.push({ label: 'Configura la veu (ElevenLabs)', hint: 'Ajustos', run: voiceSheet });
   c.push({ label: 'Fes el tutorial', hint: 'Ajuda', run: tourStart });
   return c;
 }

package/web/app/style.css

@@ -104,7 +104,7 @@ kbd { font: 600 11px var(--font); padding: 1px 6px; border: 1px solid var(--bord
 .icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--fg); }
 .icon-btn:hover { background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
 .icon-btn .badge { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; font-size: 10px; }
-input[type="text"], input[type="url"], input[type="search"], select, textarea.field { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); outline: none; }
+input[type="text"], input[type="password"], input[type="url"], input[type="search"], select, textarea.field { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); outline: none; }
 textarea.field { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.45; }
 input:focus, select:focus, textarea:focus { border-color: var(--fg); }
 select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369615c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; }
@@ -134,8 +134,13 @@ button.chip:hover { border-color: var(--fg); }
 @keyframes pulse { 50% { opacity: .3; } }
 .agent-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
 .agent-tag::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c, var(--fg-muted)); }
-[data-agent="claude"] { --c: var(--accent); } [data-agent="codex"] { --c: var(--moss); } [data-agent="grok"] { --c: var(--fg); }
-[data-agent="antigravity"] { --c: var(--blue); } [data-agent="ollama"] { --c: #b08a5a; } [data-agent="demo"] { --c: var(--lemon); } [data-agent="browser"] { --c: #8a5cf6; }
+[data-agent="claude"] { --c: #e8602c; } [data-agent="codex"] { --c: #2b5bd8; } [data-agent="grok"] { --c: var(--fg); }
+[data-agent="antigravity"] { --c: #0f9d8a; } [data-agent="ollama"] { --c: #b08a5a; } [data-agent="demo"] { --c: var(--lemon); } [data-agent="browser"] { --c: #8a5cf6; }
+.agent-tag.nosq::before { display: none; }
+.abot { display: inline-flex; color: var(--c, var(--fg)); }
+.abot .bot { --s: 20px; --bw: .15; }
+.chat-head .abot .bot { --s: 30px; --bw: .14; }
+.typing .abot .bot { --s: 22px; --bw: .15; }
 .empty { padding: 48px 20px; text-align: center; color: var(--fg-muted); display: grid; justify-items: center; gap: 8px; }
 .empty .bot { --s: 56px; --bw: .13; color: var(--fg); margin-bottom: 8px; }
 .empty h2 { font-size: 20px; font-weight: 500; letter-spacing: -.04em; color: var(--fg); }
@@ -175,6 +180,7 @@ button.chip:hover { border-color: var(--fg); }
 
 /* ---------- Sessions ---------- */
 .session-card .title { font-size: 16px; font-weight: 500; letter-spacing: -.02em; margin-top: 8px; }
+.session-card .last.err { color: var(--red); }
 .session-card .last { color: var(--fg-muted); font-size: 14px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .session-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--fg-muted); }
 .fab { position: fixed; right: 24px; bottom: calc(24px + var(--safe-b)); z-index: 15; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px 0 16px; border: 0; border-radius: 16px; background: var(--fg); color: var(--bg); font-weight: 600; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--fg) 70%, transparent); transition: transform .15s; }
@@ -183,7 +189,6 @@ button.chip:hover { border-color: var(--fg); }
 /* ---------- Xat de sessió ---------- */
 .chat { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
 .chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); }
-.chat-head .bot { --s: 30px; --bw: .14; }
 .chat-head h1 { font-size: 17px; font-weight: 600; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .chat-head .sub { font-size: 12px; color: var(--fg-muted); }
 .mode-bar { display: flex; gap: 6px; padding: 10px 24px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
@@ -210,12 +215,11 @@ button.chip:hover { border-color: var(--fg); }
 .tool pre { margin: 0 12px 12px; padding: 10px 12px; max-height: 320px; overflow: auto; border-radius: 8px; background: var(--code); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
 .ev-info, .ev-result { text-align: center; font-size: 12px; color: var(--fg-muted); }
 .ev-result { display: flex; justify-content: center; gap: 6px; }
-.ev-error { padding: 10px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); background: color-mix(in srgb, var(--red) 6%, var(--white)); color: var(--red); font-size: 14px; white-space: pre-wrap; }
+.ev-error { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); background: color-mix(in srgb, var(--red) 6%, var(--white)); color: var(--red); font-size: 14px; white-space: pre-wrap; }
 .ev-logs { font-size: 12px; color: var(--fg-muted); }
 .ev-logs summary { cursor: pointer; }
 .ev-logs pre { margin-top: 6px; padding: 10px; border-radius: 8px; background: var(--code); font: 11px/1.5 var(--mono); max-height: 220px; overflow: auto; white-space: pre-wrap; }
 .typing { display: flex; align-items: center; gap: 10px; color: var(--fg-muted); font-size: 13px; }
-.typing .bot { --s: 22px; --bw: .15; color: var(--fg); }
 @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
 
 .approval { padding: 16px; border-radius: var(--radius); border: 1.5px solid var(--accent); background: var(--white); display: grid; gap: 10px; animation: rise .25s var(--ease); }
@@ -345,7 +349,7 @@ body.board-mode .view-enter { animation: none; }
   body.chat-mode .mbar { position: fixed; left: 0; right: 0; transform: translateY(var(--vvt, 0px)); }
   body.chat-mode .chat { position: fixed; left: 0; right: 0; top: calc(56px + var(--safe-t) + var(--vvt, 0px)); height: calc(var(--vvh, 100dvh) - 56px - var(--safe-t)); }
   body.chat-mode.kb .composer { padding-bottom: 10px; }
-  .composer textarea, input[type="text"], input[type="url"], input[type="search"], select, textarea.field { font-size: 16px; }
+  .composer textarea, input[type="text"], input[type="password"], input[type="url"], input[type="search"], select, textarea.field { font-size: 16px; }
   .chat-head { display: none; }
   .mode-bar { padding: 10px 16px; }
   .feed { padding: 18px 16px 24px; }
@@ -449,7 +453,8 @@ video.scan { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14p
   .burger { display: none; }
   .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 8px calc(6px + var(--safe-b)); background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
   .tabbar > * { flex: 1; position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 0; background: none; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--fg-muted); text-decoration: none; }
-  .tabbar [aria-current="page"] { color: var(--fg); }
+  .tabbar [aria-current="page"] { color: var(--accent); }
+  .tabbar [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 3px 3px; background: var(--accent); }
   .tabbar .badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
   body:not(.no-tabs):not(.kb) .main { padding-bottom: calc(64px + var(--safe-b)); }
   body.no-tabs .tabbar, body.kb .tabbar { display: none; }
@@ -480,3 +485,13 @@ a.kbd { text-decoration: none; color: inherit; }
 .slash .t { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--bg-2); color: var(--fg-muted); }
 .slash .t.ag { background: color-mix(in srgb, var(--lemon) 60%, var(--bg)); color: var(--fg); }
 @media (max-width: 820px) { .slash { left: 12px; right: 12px; } .slash .h { grid-column: 1 / -1; grid-row: 2; } }
+/* ---------- Veu ---------- */
+.ev-error b { font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
+.speak { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--fg-muted); font-size: 12px; font-weight: 600; }
+.speak:hover { color: var(--fg); border-color: var(--fg); }
+.speak .ico { width: 15px; height: 15px; }
+.speak.wait { opacity: .6; } .speak.on { color: var(--accent); border-color: var(--accent); }
+.composer .mic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); color: var(--fg-muted); }
+.composer .mic:hover { color: var(--fg); border-color: var(--fg); }
+.composer .mic.rec { background: var(--red); border-color: var(--red); color: #fff; animation: pulse 1.1s ease-in-out infinite; }
+.composer .mic.wait { opacity: .5; }

package/web/sw.js

@@ -1,5 +1,5 @@
 // nio · service worker: obre l'app encara que no hi hagi connexió i mostra els avisos.
-const SHELL = 'nio-shell-v3';
+const SHELL = 'nio-shell-v5';
 const FILES = ['/app', '/app/style.css', '/app/app.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
 
 self.addEventListener('install', (e) => {