nio-cat 0.4.1 → 0.4.4

package/bin/nio.js

@@ -74,12 +74,14 @@ function canOpenBrowser() {
   return true;
 }
 
+let panelOpened = false;
 function openDashboard() {
   const local = `http://127.0.0.1:${cfg.port}`;
   // Per defecte s'obre l'app en línia (sempre al dia), ja connectada a aquest ordinador. Amb --local, la còpia que porta nio.
   const online = !flags.local;
-  const link = pairLink(online ? flags.app || cfg.app : local, local, cfg.token);
-  if (canOpenBrowser() && openUrl(link)) console.log(`  ${c.dim('Panell:')}   ${online ? (flags.app || cfg.app) + '/app' : local}  ${c.dim('(obert al navegador; --no-open per evitar-ho' + (online ? '; --local per fer servir la còpia d\'aquest ordinador' : '') + ')')}`);
+  // &qr=1: el panell mostra el QR per al mòbil tot just obrir-se, a la mateixa pestanya.
+  const link = pairLink(online ? flags.app || cfg.app : local, local, cfg.token) + '&qr=1';
+  if (canOpenBrowser() && openUrl(link)) { panelOpened = true; console.log(`  ${c.dim('Panell:')}   ${online ? (flags.app || cfg.app) + '/app' : local}  ${c.dim('(obert al navegador; --no-open per evitar-ho' + (online ? '; --local per fer servir la còpia d\'aquest ordinador' : '') + ')')}`); }
   else console.log(`  ${c.dim('Panell:')}   ${link}`);
 }
 
@@ -95,8 +97,7 @@ async function showPair(publicUrl) {
     console.log(`\n  ${c.b('Escaneja aquest codi amb el mòbil')}\n`);
     console.log(terminalQr(qrLink, { margin }));
   } else {
-    console.log(`\n  ${c.warn('El terminal és massa petit per al QR.')} Fes-lo més gran o obre ${file}`);
-    if (canOpenBrowser()) openUrl(file);
+    console.log(`\n  ${c.warn('El terminal és massa petit per al QR.')} ${panelOpened ? 'El tens al panell del navegador.' : 'Fes-lo més gran, o obre el panell i prem «Continua al mòbil».'}`);
   }
   console.log(`\n  ${c.b('Codi:')} ${code}`);
   console.log(c.dim('  Copia\'l i enganxa\'l a Sessions → Tria un ordinador.'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.4.1",
+  "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/commands.js

@@ -0,0 +1,51 @@
+'use strict';
+// Comandes pròpies de cada agent que es poden escriure amb «/» a la sessió.
+// Claude Code: les teves comandes (~/.claude/commands i .claude/commands del projecte) i les skills.
+// Es passen a l'agent tal qual («/nom arguments»); el mode d'impressió les entén.
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+function frontmatter(file) {
+  let txt = '';
+  try { txt = fs.readFileSync(file, 'utf8').slice(0, 4000); } catch { return {}; }
+  const m = txt.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+  const out = {};
+  if (m) for (const l of m[1].split('\n')) { const kv = l.match(/^([\w-]+):\s*(.*)$/); if (kv) out[kv[1]] = kv[2].trim().replace(/^["']|["']$/g, ''); }
+  if (!out.description) {
+    const first = txt.replace(/^---[\s\S]*?---\s*/, '').split('\n').map((l) => l.trim()).find((l) => l && !l.startsWith('#'));
+    if (first) out.description = first;
+  }
+  return out;
+}
+
+function listDir(dir) {
+  try { return fs.readdirSync(dir, { withFileTypes: true }); } catch { return []; }
+}
+
+function claudeCommands(cwd) {
+  const out = new Map();
+  const bases = [path.join(os.homedir(), '.claude'), cwd && path.join(cwd, '.claude')].filter(Boolean);
+  for (const base of bases) {
+    // Comandes: commands/nom.md i commands/espai/nom.md (→ «espai:nom»)
+    const cdir = path.join(base, 'commands');
+    for (const e of listDir(cdir)) {
+      if (e.isFile() && e.name.endsWith('.md')) { const n = e.name.slice(0, -3); out.set(n, { name: n, hint: frontmatter(path.join(cdir, e.name)).description || '', kind: 'comanda' }); }
+      else if (e.isDirectory()) for (const f of listDir(path.join(cdir, e.name))) if (f.isFile() && f.name.endsWith('.md')) { const n = `${e.name}:${f.name.slice(0, -3)}`; out.set(n, { name: n, hint: frontmatter(path.join(cdir, e.name, f.name)).description || '', kind: 'comanda' }); }
+    }
+    // Skills: skills/nom/SKILL.md
+    const sdir = path.join(base, 'skills');
+    for (const e of listDir(sdir)) {
+      if (!e.isDirectory() && !e.isSymbolicLink()) continue;
+      const fm = frontmatter(path.join(sdir, e.name, 'SKILL.md'));
+      if (fm.description || fs.existsSync(path.join(sdir, e.name, 'SKILL.md'))) { const n = fm.name || e.name; if (/^[\w:.-]+$/.test(n)) out.set(n, { name: n, hint: fm.description || '', kind: 'skill' }); }
+    }
+  }
+  return [...out.values()].map((c) => ({ ...c, hint: c.hint.slice(0, 110) })).sort((a, b) => a.name.localeCompare(b.name)).slice(0, 150);
+}
+
+function agentCommands(agent, cwd) {
+  return agent === 'claude' ? claudeCommands(cwd) : [];
+}
+
+module.exports = { agentCommands };

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/src/server.js

@@ -11,6 +11,7 @@ const { save } = require('./config');
 const { httpErr } = require('./hub');
 const github = require('./github');
 const { addServer, knownHosts } = require('./ssh');
+const { agentCommands } = require('./commands');
 const { pairLink, qrSvg, makeCode, codeLink } = require('./pair');
 
 // L'app web: copiada dins del paquet en publicar-lo, o l'arrel del repositori en desenvolupament.
@@ -269,6 +270,11 @@ function createServer({ cfg, hub, getPublicUrl, getApp }) {
         return { ok: true };
       }
     }
+    if ((r = m(/^\/api\/sessions\/([\w-]+)\/commands$/)) && method === 'GET') {
+      const s = hub.get(r[1]);
+      if (!s) throw httpErr(404, 'Aquesta sessió no existeix');
+      return agentCommands(s.agent, s.cwd);
+    }
     if ((r = m(/^\/api\/sessions\/([\w-]+)\/git(?:\/(commit|pr))?$/))) {
       const s = hub.get(r[1]);
       if (!s) throw httpErr(404, 'Aquesta sessió no existeix');

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' },
@@ -247,9 +249,14 @@ function forgetMachine(i) {
 }
 function checkPairHash() {
   const pair = parsePair(location.hash) || parseCode(location.hash); if (!pair) return false;
+  const hashAtStart = location.hash;
   history.replaceState(null, '', location.pathname + '#/sessions');
   state.route = { name: 'sessions' };
-  addMachine(pair); render(); toast('Ordinador connectat'); return true;
+  const wantQr = new URLSearchParams(location.hash.replace(/^#/, '')).get('qr') === '1' || /[#&]qr=1\b/.test(hashAtStart);
+  addMachine(pair); render(); toast('Ordinador connectat');
+  // Quan nio obre el panell, el QR per al mòbil surt tot seguit, sense cap pestanya nova.
+  if (wantQr && !isPhone()) setTimeout(mobileQrSheet, 500);
+  return true;
 }
 
 /* ---------------------------------------------------------------- navegació */
@@ -371,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 */
@@ -485,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 */
@@ -506,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>`}`;
 }
@@ -573,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>
@@ -593,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>
@@ -640,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 = [];
@@ -664,10 +671,61 @@ 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 = [
+  { name: 'mode', hint: 'Canvia els permisos', args: [['llegir', 'Només llegir', 'l'], ['preguntar', 'Demana permís', 'p'], ['tot', 'Via lliure', 't']] },
+  { name: 'model', hint: 'Canvia de model' },
+  { name: 'stop', hint: 'Atura l’agent' },
+  { name: 'nova', hint: 'Nova sessió amb el mateix agent i carpeta' },
+  { name: 'git', hint: 'Git i GitHub: commit i PR' },
+  { name: 'nom', hint: 'Posa nom a la sessió', free: true },
+  { name: 'opcions', hint: 'Opcions de la sessió' },
+  { name: 'ajuda', hint: 'Llista de comandes' }
+];
+const cmdCache = new Map();
+async function loadCmds(id) {
+  if (cmdCache.has(id) || !machine()) return;
+  cmdCache.set(id, []);
+  try { cmdCache.set(id, await api(`/api/sessions/${id}/commands`)); } catch { /* sense comandes de l'agent */ }
+}
+const agentCmds = (id) => cmdCache.get(id) || [];
+function pickMode(arg) {
+  const a = String(arg || '').trim().toLowerCase(); if (!a) return null;
+  const m = NIO_CMDS[0].args.find(([k, , al]) => k === a || al === a || k.startsWith(a) || (a === 'lliure' && k === 'tot'));
+  return m ? m[0] : null;
+}
+async function runCmd(s, name, arg) {
+  const patch = async (body, msg) => { try { const sum = await api(`/api/sessions/${s.id}`, { method: 'PATCH', body }); state.sessions.set(s.id, sum); renderSessionHead(); if (msg) toast(msg); } catch (e) { toast(e.message, 4200); } };
+  switch (name) {
+    case 'mode': { const m = pickMode(arg); if (!arg) return modeSheet(s); if (!m) return toast('Els permisos són: llegir (l), preguntar (p) o tot (t)'); return patch({ mode: m }, `Permisos: ${MODES[m].label}`); }
+    case 'model': return arg ? patch({ model: arg }, `Model: ${arg}`) : modelSheet(s);
+    case 'stop': try { await api(`/api/sessions/${s.id}/stop`, { method: 'POST' }); toast('Aturat'); } catch (e) { toast(e.message); } return;
+    case 'nova': return newSessionSheet({ agent: s.agent, cwd: s.cwd, mode: s.mode });
+    case 'git': return gitSheet(s.id);
+    case 'nom': return arg ? patch({ title: arg }, 'Nom desat') : toast('Escriu el nom: /nom Arregla els tests');
+    case 'opcions': return sessionOptions(s.id);
+    case 'ajuda': return helpCmdsSheet(s);
+  }
+}
+function helpCmdsSheet(s) {
+  const ac = agentCmds(s.id);
+  openSheet(`<h2>Comandes</h2><p class="muted small">Escriu <span class="mono">/</span> al missatge per veure-les.</p><div class="list">${NIO_CMDS.map((c) => `<div class="card"><b class="mono">/${c.name}</b>${c.args ? ' <span class="muted small mono">l · p · t</span>' : ''}<div class="muted small">${esc(c.hint)}</div></div>`).join('')}</div>${ac.length ? `<p class="muted small">De ${esc(AGENT_NAMES[s.agent] || s.agent)}: ${ac.length} comandes i skills. Se li envien a l’agent tal qual.</p>` : ''}<div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button></div>`, (sh) => { $('[data-close]', sh).onclick = closeSheet; });
+}
+// Llista de suggeriments segons el que hi ha escrit: «/», «/mo», «/mode l».
+function slashItems(s, v) {
+  const m = v.match(/^\/([\w:.-]*)$/), a = v.match(/^\/mode\s+(\S*)$/i);
+  if (a) { const q = a[1].toLowerCase(); return NIO_CMDS[0].args.filter(([k, , al]) => !q || k.startsWith(q) || al === q).map(([k, h, al]) => ({ fill: `/mode ${k}`, run: ['mode', k], label: `/mode ${k}`, hint: `${h} · ${al}`, tag: 'nio' })); }
+  if (!m) return [];
+  const q = m[1].toLowerCase();
+  const nio = NIO_CMDS.map((c) => ({ ...c, tag: 'nio' }));
+  const ag = agentCmds(s.id).map((c) => ({ name: c.name, hint: c.hint, tag: AGENT_NAMES[s.agent] || s.agent, agent: true }));
+  const all = [...nio, ...ag], starts = all.filter((c) => c.name.toLowerCase().startsWith(q)), has = all.filter((c) => !c.name.toLowerCase().startsWith(q) && c.name.toLowerCase().includes(q));
+  return [...starts, ...has].slice(0, 40).map((c) => ({ ...c, label: `/${c.name}` }));
 }
 function renderComposer() {
   const box = $('#composer'); if (!box) return;
@@ -675,17 +733,46 @@ function renderComposer() {
   const prev = $('textarea', box)?.value || '';
   if (box.dataset.busy === String(busy) && $('textarea', box)) return;
   box.dataset.busy = String(busy);
-  box.innerHTML = `<div class="inner"><textarea rows="1" id="msg" placeholder="${busy ? 'L’agent està treballant…' : 'Escriu a l’agent…'}" enterkeyhint="send" aria-label="Missatge"></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>`;
+  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="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);
-  grow(); ta.addEventListener('input', grow);
+  let items = [], sel = 0;
+  const pop = $('#slash');
+  function drawSlash() {
+    const cur = state.sessions.get(state.route.id); if (!cur || !pop.isConnected) return;
+    items = ta.value.includes('\n') ? [] : slashItems(cur, ta.value);
+    pop.hidden = !items.length; if (!items.length) return;
+    sel = Math.min(sel, items.length - 1);
+    pop.innerHTML = items.map((c, i) => `<button type="button" role="option" data-i="${i}" aria-selected="${i === sel}"><span class="n mono">${esc(c.label)}</span><span class="h">${esc(c.hint || '')}</span><span class="t ${c.agent ? 'ag' : ''}">${esc(c.tag)}</span></button>`).join('');
+    $('[aria-selected="true"]', pop)?.scrollIntoView({ block: 'nearest' });
+  }
+  const pick = (i) => {
+    const c = items[i]; if (!c) return; const cur = state.sessions.get(state.route.id);
+    if (c.run) { ta.value = ''; grow(); drawSlash(); return runCmd(cur, ...c.run); }
+    if (c.args || c.free || c.agent) { ta.value = `/${c.name} `; grow(); sel = 0; drawSlash(); ta.focus(); return; }
+    ta.value = ''; grow(); drawSlash(); runCmd(cur, c.name, '');
+  };
+  ta.addEventListener('input', () => { grow(); sel = 0; drawSlash(); });
+  pop.addEventListener('pointerdown', (e) => { const b = e.target.closest('[data-i]'); if (b) { e.preventDefault(); pick(+b.dataset.i); } });
   const send = async () => {
     const text = ta.value.trim(); if (!text || !s) return;
-    ta.value = ''; grow();
+    const c = text.match(/^\/([\w:.-]+)(?:\s+([\s\S]*))?$/), nio = c && NIO_CMDS.find((x) => x.name === c[1].toLowerCase());
+    ta.value = ''; grow(); drawSlash();
+    if (nio) return runCmd(s, nio.name, (c[2] || '').trim());
     try { await api(`/api/sessions/${s.id}/message`, { method: 'POST', body: { text } }); }
     catch (e) { ta.value = text; grow(); toast(e.message, 4200); }
   };
-  ta.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey && !isTouch && !e.isComposing) { e.preventDefault(); send(); } });
+  ta.addEventListener('keydown', (e) => {
+    if (items.length && !pop.hidden) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); sel = (sel + 1) % items.length; return drawSlash(); }
+      if (e.key === 'ArrowUp') { e.preventDefault(); sel = (sel - 1 + items.length) % items.length; return drawSlash(); }
+      if (e.key === 'Tab' || (e.key === 'Enter' && !e.shiftKey && !isTouch && !e.isComposing && !/^\/\S+\s/.test(ta.value))) { e.preventDefault(); return pick(sel); }
+      if (e.key === 'Escape') { e.preventDefault(); pop.hidden = true; items = []; return; }
+    }
+    if (e.key === 'Enter' && !e.shiftKey && !isTouch && !e.isComposing) { e.preventDefault(); send(); }
+  });
+  grow(); drawSlash();
   $('#sendBtn').onclick = async () => { if (busy) { try { await api(`/api/sessions/${s.id}/stop`, { method: 'POST' }); } catch (e) { toast(e.message); } } else send(); };
 }
 
@@ -698,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í.';
@@ -782,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>
@@ -850,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); }
@@ -1140,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); }
@@ -1153,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 }); }
@@ -1185,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(); } });
@@ -1205,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; }
@@ -469,3 +474,24 @@ video.scan { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14p
 .help-body b { color: var(--fg); font-weight: 600; }
 .empty .stepper { text-align: left; max-width: 640px; margin: 16px auto 18px; }
 a.kbd { text-decoration: none; color: inherit; }
+
+/* Comandes amb «/» */
+.composer { position: relative; }
+.slash { position: absolute; left: 24px; right: 24px; bottom: 100%; max-width: 760px; margin: 0 auto 6px; max-height: min(320px, 45dvh); overflow-y: auto; overscroll-behavior: contain; display: grid; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); box-shadow: 0 10px 30px rgba(39, 34, 36, .12); z-index: 5; }
+.slash button { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; text-align: left; padding: 9px 10px; border: 0; border-radius: 9px; background: none; }
+.slash button[aria-selected="true"] { background: var(--bg-2); }
+.slash .n { font-weight: 600; }
+.slash .h { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); font-size: 13px; }
+.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) => {