nio-cat 0.9.5 → 0.9.6

package/README.md

@@ -8,7 +8,7 @@ Els teus agents (Claude Code i Codex) als teus ordinadors, controlats des del m
 curl -fsSL https://www.nio.cat/install.sh | sh
 ```
 
-Instal·la nio i `cloudflared` al teu usuari, el deixa com a servei (systemd o launchd) i mostra un codi QR. Escaneja’l amb el mòbil a [nio.cat/app](https://www.nio.cat/app). Per provar-lo sense instal·lar res: `npx nio-cat`.
+Instal·la nio i `cloudflared` al teu usuari, el deixa com a servei (systemd o launchd) i obre nio al navegador amb un codi QR. Escaneja’l amb el mòbil. Per provar-lo sense instal·lar res: `npx nio-cat`, o la demo de [nio.cat/app](https://www.nio.cat/app), amb un ordinador simulat.
 
 ## Què fa
 
@@ -16,7 +16,7 @@ Instal·la nio i `cloudflared` al teu usuari, el deixa com a servei (systemd o l
 - **Aprovacions** amb el motiu, al mòbil, al push o a Telegram, i **registre** de totes les accions (`~/.nio/audit.jsonl`).
 - **Feines**: cua, cadenes («quan acabi, que Codex ho revisi») i programació (cron).
 - **Memòria compartida** a `~/.nio/memory`, amb un servidor MCP (`nio mcp`) registrat a Claude Code i Codex.
-- **Telegram** (el teu bot) i **veu** (ElevenLabs o OpenAI), amb les claus a l’ordinador.
+- **Telegram** (el teu bot) i **veu**: dictat gratis amb Whisper a l’ordinador (whisper.cpp + ffmpeg; l’àudio no en surt), o ElevenLabs i OpenAI amb les teves claus.
 - **Navegador i escriptori** amb agent-browser i agent-desktop: mirar passa sol, actuar sempre demana permís.
 
 ## Arquitectura

package/bin/nio.js

@@ -22,7 +22,7 @@ const { Control } = require('../src/control');
 const { Remote } = require('../src/remote');
 const { Jobs } = require('../src/jobs');
 const { addServer } = require('../src/ssh');
-const { pairLink, terminalQr, writePairPage, makeCode, codeLink, terminalQrSize } = require('../src/pair');
+const { pairLink, writePairPage, makeCode, codeLink } = require('../src/pair');
 const { which } = require('../src/proc');
 
 const argv = process.argv.slice(2);
@@ -111,17 +111,10 @@ async function showPair(publicUrl) {
   const { code: secret } = auth.createCode({ secret: true });
   const link = pairLink(app, publicUrl, secret), code = makeCode(publicUrl, secret), qrLink = codeLink(app, code);
   const file = writePairPage(link, code, qrLink);
-  // El QR sempre al terminal, el més gran que hi càpiga: gran (2 caràcters per mòdul), compacte (mig bloc) i,
-  // si ni així hi cap d'ample, cap QR i només el codi. Amb poques files, el marge passa de 2 a 1 mòdul.
-  const rows = process.stdout.rows || 999, cols = process.stdout.columns || 999;
-  const fits = (m, big) => { const z = terminalQrSize(qrLink, m, big); return z.rows + 4 <= rows && z.cols <= cols; };
-  const opt = [[2, true], [2, false], [1, false]].find(([m, big]) => fits(m, big)) || (terminalQrSize(qrLink, 1).cols <= cols ? [1, false] : null);
+  // El QR no surt al terminal (no s'hi veu bé): és al panell que s'obre al navegador.
   console.log(`\n  ${c.b('Connecta el mòbil')}\n`);
-  if (opt) {
-    console.log(`  Escaneja aquest codi amb la càmera${panelOpened ? ' (també el tens al navegador)' : ''}:\n`);
-    console.log(terminalQr(qrLink, { margin: opt[0], big: opt[1] }));
-  } else console.log(`  La finestra és massa estreta per al QR${panelOpened ? '; el tens al navegador' : '. Fes-la més ampla i torna-ho a provar: nio pair'}.`);
-  console.log(`\n  ${opt ? 'O copia' : 'Copia'} aquest codi i enganxa'l a Sessions → Tria un ordinador:\n`);
+  if (panelOpened) console.log('  He obert nio al navegador: escaneja el QR que hi surt amb la càmera del mòbil.\n  O, al mòbil, obre nio.cat/app → Ordinadors → Afegeix i enganxa aquest codi:\n');
+  else console.log('  Al mòbil, obre nio.cat/app → Ordinadors → Afegeix i enganxa aquest codi:\n');
   console.log(`  ${code}\n`);
   console.log(c.dim('  Serveix per a un sol dispositiu i caduca en 15 minuts. Per a un altre: nio pair.\n'));
   if (flags.open) {
@@ -414,7 +407,7 @@ async function start() {
     --quick             Túnel ràpid encara que n'hi hagi un amb nom
     --local             Obre la còpia del panell d'aquest ordinador (si el navegador bloqueja nio.cat, p. ex. Safari)
     --open              Obre al navegador la pàgina del codi QR
-  nio pair              Mostra el codi QR una altra vegada
+  nio pair              Obre el navegador amb el QR per connectar el mòbil (i mostra el codi)
 
   nio ssh usuari@servidor   Afegeix un servidor (VPS) per SSH: hi engega nio amb un túnel i el pots fer servir des del mòbil.
     --port <n>          Port de nio al servidor (7717)

package/package.json

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

package/src/pair.js

@@ -25,7 +25,7 @@ function makeCode(url, token) {
   else bytes = Buffer.concat([Buffer.from([0]), Buffer.from(`${url}\n${token}`)]);
   return `nio-${bytes.toString('base64url')}`;
 }
-// Enllaç curt per al QR: una adreça de l'app amb el codi al fragment. Un QR més petit cap millor al terminal.
+// Enllaç curt per al QR: una adreça de l'app amb el codi al fragment. Com més curt, més fàcil d'escanejar.
 const codeLink = (app, code) => `${app.replace(/\/$/, '')}/app#${code}`;
 
 function qr(text) {
@@ -35,47 +35,6 @@ function qr(text) {
   return q;
 }
 
-// QR per al terminal, compacte: cada caràcter «▀» pinta dos mòduls (dalt amb el color de la lletra, baix amb el del fons).
-// Ocupa la meitat d'alt i d'ample que amb dos espais per mòdul. Sempre negre sobre blanc, amb tema clar o fosc.
-function terminalQr(text, { color = !process.env.NO_COLOR, margin = 2, big = false } = {}) {
-  if (big) return terminalQrBig(text, { color, margin });
-  const q = qr(text);
-  const n = q.getModuleCount();
-  const M = margin;
-  const dark = (r, c) => r >= 0 && c >= 0 && r < n && c < n && q.isDark(r, c);
-  const lines = [];
-  for (let r = -M; r < n + M; r += 2) {
-    let line = '';
-    for (let c = -M; c < n + M; c++) {
-      const t = dark(r, c), b = r + 1 < n + M ? dark(r + 1, c) : false;
-      if (color) line += `\x1b[${t ? 30 : 97};${b ? 40 : 107}m▀`;
-      else line += t && b ? ' ' : t ? '▄' : b ? '▀' : '█';
-    }
-    lines.push(`  ${line}${color ? '\x1b[0m' : ''}`);
-  }
-  return lines.join('\n');
-}
-
-// QR gran: dos espais amb color de fons per mòdul. Quadrat i molt fàcil d'escanejar, però ocupa el doble.
-function terminalQrBig(text, { color, margin: M }) {
-  const q = qr(text), n = q.getModuleCount();
-  const dark = (r, c) => r >= 0 && c >= 0 && r < n && c < n && q.isDark(r, c);
-  const lines = [];
-  for (let r = -M; r < n + M; r++) {
-    let line = '', prev = null;
-    for (let c = -M; c < n + M; c++) {
-      const d = dark(r, c);
-      if (color) { if (d !== prev) line += d ? '\x1b[40m' : '\x1b[107m'; line += '  '; }
-      else line += d ? '  ' : '██';
-      prev = d;
-    }
-    lines.push(`  ${line}${color ? '\x1b[0m' : ''}`);
-  }
-  return lines.join('\n');
-}
-
-// SVG propi: una sola forma amb tires horitzontals de mòduls, vora de 4 mòduls i vores nítides.
-// (El de la llibreria dibuixa cada mòdul per separat i, en escalar-lo, deixa línies fines entre mòduls.)
 function qrSvg(text) {
   const q = qr(text), n = q.getModuleCount(), M = 4;
   let d = '';
@@ -102,17 +61,11 @@ main{width:min(420px,100% - 40px);padding:40px 0}h1{font-size:30px;font-weight:5
 .qr{background:#fffefd;border:1px solid #cec7bd;padding:18px;border-radius:16px;margin:24px 0}.qr svg{width:100%;height:auto;display:block}
 code{display:block;word-break:break-all;font:12px/1.5 ui-monospace,Menlo,monospace;background:#e6e1d8;padding:12px 14px;border-radius:12px;color:#272224}small{display:block;margin-top:20px;font-size:13px;color:#69615c}</style></head>
 <body><main><h1>Connecta el mòbil</h1><p>Escaneja el codi amb la càmera. S’obrirà nio ja connectat a aquest ordinador.</p><div class="qr">${svg}</div>
-<p>O copia aquest codi i enganxa'l a <b>Sessions → Tria un ordinador</b>:</p><code>${code}</code><small>Aquest codi dona accés als teus agents. Guarda'l com una contrasenya.</small></main></body></html>`;
+<p>O copia aquest codi i enganxa'l a <b>nio.cat/app → Ordinadors → Afegeix</b>:</p><code>${code}</code><small>Aquest codi dona accés als teus agents. Guarda'l com una contrasenya.</small></main></body></html>`;
   const file = path.join(HOME, 'pair.html');
   fs.writeFileSync(file, html, { mode: 0o600 });
   return file;
 }
 
-module.exports = { pairLink, terminalQr, writePairPage, qrSvg, makeCode, codeLink };
+module.exports = { pairLink, writePairPage, qrSvg, makeCode, codeLink };
 
-// Mida del QR al terminal: files i columnes que ocupa amb un marge donat.
-function terminalQrSize(text, margin = 2, big = false) {
-  const n = qr(text).getModuleCount() + margin * 2;
-  return big ? { rows: n, cols: n * 2 + 2 } : { rows: Math.ceil(n / 2), cols: n + 2 };
-}
-module.exports.terminalQrSize = terminalQrSize;

package/src/voice.js

@@ -2,7 +2,9 @@
 // Veu: transcripció (STT) i lectura en veu alta (TTS) amb les claus de l'usuari.
 // Les claus viuen en aquest ordinador (~/.nio/config.json → voice) i mai no tornen a l'app.
 // L'àudio fa: mòbil → aquest ordinador → proveïdor. Proveïdors intercanviables: ElevenLabs i OpenAI.
+// Per entendre't també hi ha Whisper, gratis i sense clau, que funciona a l'ordinador mateix (whisper.js).
 const config = require('./config');
+const whisper = require('./whisper');
 
 const httpErr = (status, message) => Object.assign(new Error(message), { status });
 const MAX_AUDIO = 25 * 1024 * 1024;
@@ -67,11 +69,14 @@ async function errText(r) {
 }
 
 const cfgOf = (cfg) => cfg.voice || {};
-// Proveïdor per a cada cosa: el triat, si en té la clau; si no, qualsevol que en tingui.
+// Proveïdor per a cada cosa: el triat, si en té la clau (o Whisper, si és a punt); si no, Whisper
+// (gratis) per entendre't i, si tampoc, qualsevol que tingui clau.
 function pick(cfg, which) {
   const v = cfgOf(cfg), keys = v.keys || {};
   const want = v[which] || v.provider;
+  if (which === 'stt' && want === 'whisper' && whisper.ready(cfg)) return 'whisper';
   if (want && keys[want]) return want;
+  if (which === 'stt' && whisper.ready(cfg)) return 'whisper';
   return Object.keys(PROVIDERS).find((p) => keys[p]) || null;
 }
 
@@ -84,13 +89,15 @@ function status(cfg) {
     speak: !!v.speak,
     lang: v.lang || 'ca',
     voice: v.voice || {},
+    whisper: whisper.status(cfg),
   };
 }
 
 async function transcribe(cfg, audio, mime) {
   const p = pick(cfg, 'stt');
-  if (!p) throw httpErr(400, 'Aquest ordinador no té cap clau de veu. Posa-la a Ajustos → Veu.');
+  if (!p) throw httpErr(400, 'Aquest ordinador encara no té veu. Activa Whisper (gratis) o posa una clau a Ajustos → Veu.');
   if (!audio?.length) throw httpErr(400, 'No hi ha àudio');
+  if (p === 'whisper') return { text: await whisper.transcribe(cfg, audio, mime, cfgOf(cfg).lang || 'ca'), provider: p };
   return { text: (await PROVIDERS[p].stt(cfg.voice.keys[p], audio, mime, cfgOf(cfg).lang || 'ca')).trim(), provider: p };
 }
 
@@ -132,7 +139,8 @@ function routes(cfg) {
             v.keys[id] = k.trim();
           }
         }
-        for (const w of ['stt', 'tts']) if (body[w] === null || PROVIDERS[body[w]]) v[w] = body[w] || undefined;
+        for (const w of ['stt', 'tts']) if (body[w] === null || PROVIDERS[body[w]] || (w === 'stt' && body[w] === 'whisper')) v[w] = body[w] || undefined;
+        if (body.whisper && typeof body.whisper === 'object' && whisper.MODELS[body.whisper.model]) v.whisper = { ...v.whisper, model: body.whisper.model };
         if (typeof body.speak === 'boolean') v.speak = body.speak;
         if (typeof body.lang === 'string' && /^[a-z]{2}$/.test(body.lang)) v.lang = body.lang;
         if (body.voice && typeof body.voice === 'object') {
@@ -143,6 +151,16 @@ function routes(cfg) {
         return status(cfg);
       },
     },
+    {
+      // Whisper: «install» (Homebrew + model) o «download» (només el model).
+      method: 'POST',
+      path: '/api/voice/whisper',
+      handler: ({ body }) => {
+        if (body.action === 'install') whisper.install(cfg);
+        else whisper.download(cfg);
+        return status(cfg);
+      },
+    },
     {
       method: 'POST',
       path: '/api/voice/stt',

package/src/whisper.js

@@ -0,0 +1,148 @@
+'use strict';
+// Whisper a l'ordinador: transcripció gratuïta i sense clau. L'àudio no surt d'aquest ordinador.
+// Fa servir whisper.cpp (whisper-cli) amb ffmpeg per convertir l'àudio del navegador, o el
+// «whisper» de Python (openai-whisper) si és el que hi ha. El model de whisper.cpp es baixa una
+// sola vegada a ~/.nio/whisper.
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const { execFile, spawn } = require('child_process');
+const { HOME } = require('./config');
+const { which, childEnv } = require('./proc');
+
+const DIR = path.join(HOME, 'whisper');
+const HF = 'https://huggingface.co/ggerganov/whisper.cpp/resolve/main';
+// Als Mac amb xip d'Apple, el turbo (quantitzat) va ràpid i entén molt bé el català. A la resta, el small.
+const MODELS = {
+  'large-v3-turbo-q5_0': { file: 'ggml-large-v3-turbo-q5_0.bin', size: 574e6, label: 'Turbo (millor)' },
+  'small-q5_1': { file: 'ggml-small-q5_1.bin', size: 190e6, label: 'Small (més lleuger)' },
+};
+const defaultModel = () => (process.platform === 'darwin' && process.arch === 'arm64' ? 'large-v3-turbo-q5_0' : 'small-q5_1');
+
+const job = { download: null, install: null, error: null }; // feines en curs (una de cada)
+
+const httpErr = (status, message) => Object.assign(new Error(message), { status });
+const cppBin = () => which('whisper-cli') || which('whisper-cpp');
+const pyBin = () => which('whisper');
+const modelId = (cfg) => (MODELS[cfg.voice?.whisper?.model] ? cfg.voice.whisper.model : defaultModel());
+const modelPath = (cfg) => path.join(DIR, MODELS[modelId(cfg)].file);
+
+function engine() {
+  if (cppBin() && which('ffmpeg')) return 'cpp';
+  if (pyBin() && which('ffmpeg')) return 'python';
+  return null;
+}
+
+function ready(cfg) {
+  const e = engine();
+  return e === 'python' || (e === 'cpp' && fs.existsSync(modelPath(cfg)));
+}
+
+function status(cfg) {
+  const e = engine(), missing = [];
+  if (!cppBin() && !pyBin()) missing.push('whisper-cpp');
+  if (!which('ffmpeg')) missing.push('ffmpeg');
+  return {
+    name: 'Whisper',
+    engine: e,
+    ready: ready(cfg),
+    missing,
+    model: modelId(cfg),
+    models: Object.fromEntries(Object.entries(MODELS).map(([id, m]) => [id, { label: m.label, size: m.size, have: fs.existsSync(path.join(DIR, m.file)) }])),
+    needsModel: e === 'cpp' && !fs.existsSync(modelPath(cfg)),
+    downloading: job.download ? { model: job.download.model, pct: job.download.pct } : null,
+    installing: !!job.install,
+    canInstall: process.platform === 'darwin' && !!which('brew'),
+    install: installHint(),
+    error: job.error,
+  };
+}
+
+function installHint() {
+  if (process.platform === 'darwin') return 'brew install whisper-cpp ffmpeg';
+  if (which('apt-get')) return 'sudo apt install ffmpeg pipx && pipx install openai-whisper';
+  return 'Instal·la whisper.cpp (whisper-cli) i ffmpeg';
+}
+
+// Baixa el model (una sola vegada). Torna de seguida; el progrés surt a status().
+function download(cfg) {
+  const id = modelId(cfg), m = MODELS[id], dest = path.join(DIR, m.file);
+  if (fs.existsSync(dest) || job.download) return;
+  fs.mkdirSync(DIR, { recursive: true });
+  const tmp = `${dest}.part`, d = (job.download = { model: id, pct: 0 });
+  job.error = null;
+  (async () => {
+    const res = await fetch(`${HF}/${m.file}`);
+    if (!res.ok || !res.body) throw new Error(`No he pogut baixar el model (${res.status})`);
+    const total = Number(res.headers.get('content-length')) || m.size;
+    const out = fs.createWriteStream(tmp);
+    let got = 0;
+    for await (const chunk of res.body) {
+      got += chunk.length;
+      d.pct = Math.min(99, Math.round((got / total) * 100));
+      if (!out.write(chunk)) await new Promise((r) => out.once('drain', r));
+    }
+    await new Promise((r, j) => out.end((e) => (e ? j(e) : r())));
+    fs.renameSync(tmp, dest);
+  })()
+    .catch((e) => { job.error = e.message; fs.rm(tmp, { force: true }, () => {}); })
+    .finally(() => { job.download = null; });
+}
+
+// Al Mac amb Homebrew, nio ho pot instal·lar sol. Després baixa el model.
+function install(cfg) {
+  if (job.install) return;
+  if (!(process.platform === 'darwin' && which('brew'))) throw httpErr(400, `Instal·la-ho al terminal de l’ordinador: ${installHint()}`);
+  job.error = null;
+  const want = ['whisper-cpp', 'ffmpeg'].filter((p) => (p === 'ffmpeg' ? !which('ffmpeg') : !cppBin()));
+  if (!want.length) return download(cfg);
+  const p = (job.install = spawn(which('brew'), ['install', ...want], { env: childEnv({ HOMEBREW_NO_AUTO_UPDATE: '1' }), stdio: ['ignore', 'ignore', 'pipe'] }));
+  let errOut = '';
+  p.stderr.on('data', (c) => { errOut = (errOut + c).slice(-400); });
+  p.on('error', (e) => { job.error = e.message; job.install = null; });
+  p.on('close', (code) => {
+    job.install = null;
+    if (code) job.error = `brew install ha fallat: ${errOut.trim().split('\n').pop() || code}`;
+    else download(cfg);
+  });
+}
+
+function run(bin, args, timeout = 180000) {
+  return new Promise((resolve, reject) => {
+    execFile(bin, args, { timeout, env: childEnv(), maxBuffer: 8 * 1024 * 1024 }, (err, stdout, stderr) => {
+      if (err) reject(httpErr(502, `Whisper: ${String(stderr || err.message).trim().split('\n').pop().slice(0, 200)}`));
+      else resolve(String(stdout));
+    });
+  });
+}
+
+function ext(mime) {
+  return /ogg/.test(mime || '') ? 'ogg' : /mp4|m4a|aac/.test(mime || '') ? 'm4a' : /mpeg|mp3/.test(mime || '') ? 'mp3' : /wav/.test(mime || '') ? 'wav' : 'webm';
+}
+
+async function transcribe(cfg, audio, mime, lang = 'ca') {
+  const e = engine();
+  if (!e) throw httpErr(400, `Falta Whisper en aquest ordinador. Instal·la’l: ${installHint()}`);
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'nio-veu-'));
+  try {
+    const input = path.join(tmp, `audio.${ext(mime)}`);
+    fs.writeFileSync(input, audio);
+    if (e === 'python') {
+      await run(pyBin(), [input, '--model', 'turbo', '--language', lang, '--output_format', 'txt', '--output_dir', tmp, '--fp16', 'False', '--verbose', 'False']);
+      return fs.readFileSync(path.join(tmp, 'audio.txt'), 'utf8').trim();
+    }
+    if (!fs.existsSync(modelPath(cfg))) {
+      download(cfg);
+      throw httpErr(409, 'Baixant el model de Whisper (només el primer cop). Torna-ho a provar d’aquí a uns minuts.');
+    }
+    const wav = path.join(tmp, 'audio.wav');
+    await run(which('ffmpeg'), ['-nostdin', '-loglevel', 'error', '-i', input, '-ar', '16000', '-ac', '1', '-c:a', 'pcm_s16le', wav], 60000);
+    const threads = String(Math.max(1, Math.min(8, os.cpus().length - 1)));
+    const out = await run(cppBin(), ['-m', modelPath(cfg), '-f', wav, '-l', lang, '-t', threads, '-nt', '-np']);
+    return out.split('\n').map((l) => l.trim()).filter((l) => l && !/^\[(BLANK_AUDIO|Música|Music)\]$/i.test(l)).join(' ').trim();
+  } finally {
+    fs.rm(tmp, { recursive: true, force: true }, () => {});
+  }
+}
+
+module.exports = { status, ready, download, install, transcribe, MODELS, DIR };

package/web/app/app.js

@@ -373,8 +373,9 @@ const pairFrom = (text) => parsePair(text) || parseCode(text);
 // Cap pantalla ensenya adreces: cada ordinador és un nom, una icona i un estat.
 const hostOf = (u) => { try { return new URL(u).hostname; } catch { return ''; } };
 const isLoop = (u) => ['127.0.0.1', 'localhost', '[::1]'].includes(hostOf(u));
+const isDemo = (m = machine()) => !!window.NioDemo?.isDemo(m);
 const machineIcon = (m) => (m.kind === 'vps' ? ICON.server : ICON.machine);
-const machineSub = (m) => (m.kind === 'vps' ? `Servidor${m.via ? ` · ${m.via}` : ''}` : isLoop(m.url) ? 'Aquest ordinador' : 'Ordinador');
+const machineSub = (m) => (isDemo(m) ? 'Simulat dins del navegador' : m.kind === 'vps' ? `Servidor${m.via ? ` · ${m.via}` : ''}` : isLoop(m.url) ? 'Aquest ordinador' : 'Ordinador');
 function addMachine({ url, token, name, kind, via }) {
   const ms = store.machines; let i = ms.findIndex((m) => m.url === url);
   if (i >= 0) { ms[i].token = token; if (kind) ms[i].kind = kind; if (via) ms[i].via = via; }
@@ -383,6 +384,16 @@ function addMachine({ url, token, name, kind, via }) {
   state.sessions.clear(); state.approvals.clear(); state.events.clear(); state.loaded.clear(); state.info = null; state.ollama = null;
   connect();
 }
+// Demo: un ordinador simulat (app/demo.js) per provar-ho tot sense instal·lar res.
+function startDemo() {
+  closeSheet();
+  addMachine({ url: window.NioDemo.url, token: 'demo', name: 'Ordinador de demo', kind: 'demo' });
+  go('#/sessions');
+}
+function exitDemo() {
+  const i = store.machines.findIndex((m) => isDemo(m));
+  if (i >= 0) forgetMachine(i);
+}
 // El codi o l'enllaç porta un secret d'un sol ús: el canviem per una clau pròpia d'aquest dispositiu,
 // que es pot revocar des d'Ordinadors. Si és la clau principal (el panell que obre nio) o un nio antic
 // que encara no fa aparellament, el valor ja és una clau i el fem servir tal qual.
@@ -470,7 +481,7 @@ function route() {
 
 /* ---------------------------------------------------------------- pintat general */
 function renderChrome() {
-  renderPanic();
+  renderPanic(); renderDemoBar();
   const r = state.route, n = state.approvals.size, active = r.name === 'session' ? 'sessions' : r.name;
   let prev = '';
   $('#nav').innerHTML = Object.entries(VIEWS).map(([k, v], i) => {
@@ -550,7 +561,7 @@ function computerCard(m, i) {
     : pr == null ? '' : pr ? '<span class="chip ok"><i class="dot on"></i>En línia</span>' : '<span class="chip"><i class="dot"></i>Fora de línia</span>';
   return `<div class="card computer ${on ? 'active' : ''}">
     <div class="row" style="flex-wrap:nowrap;gap:12px;align-items:flex-start"><span class="c-ico">${svg(machineIcon(m))}</span><div class="grow"><div class="row between"><b>${esc(m.name)}</b>${st}</div><div class="muted small">${esc(machineSub(m))}</div></div></div>
-    <div class="row c-actions">${on ? `<button class="btn ink sm" data-act="open-sessions" type="button">Sessions</button>${isPhone() ? '' : `<button class="btn sm" data-act="mobile-qr" type="button">Continua al mòbil</button>`}` : `<button class="btn ink sm" data-machine="${i}" type="button">Obre</button>`}${m.kind === 'vps' && m.via && (!on || !state.connected) ? `<button class="btn sm" data-reconnect="${i}" type="button">Torna a connectar</button>` : ''}<button class="btn ghost sm" data-rename="${i}" type="button">Canvia el nom</button><button class="btn ghost sm" data-forget="${i}" type="button">Oblida</button></div>
+    <div class="row c-actions">${on ? `<button class="btn ink sm" data-act="open-sessions" type="button">Sessions</button>${isPhone() || isDemo(m) ? '' : `<button class="btn sm" data-act="mobile-qr" type="button">Continua al mòbil</button>`}` : `<button class="btn ink sm" data-machine="${i}" type="button">Obre</button>`}${m.kind === 'vps' && m.via && (!on || !state.connected) ? `<button class="btn sm" data-reconnect="${i}" type="button">Torna a connectar</button>` : ''}${isDemo(m) ? `<button class="btn ghost sm" data-act="demo-exit" type="button">Surt de la demo</button>` : `<button class="btn ghost sm" data-rename="${i}" type="button">Canvia el nom</button><button class="btn ghost sm" data-forget="${i}" type="button">Oblida</button>`}</div>
   </div>`;
 }
 // Ajuda sempre a mà: com es fa cada cosa, i què mirar si no connecta.
@@ -585,7 +596,7 @@ function helpPanel(open) {
     ])}<p>Exemple: ${k('/mode p')} passa la sessió a «Demana permís».</p>`)}
     ${q('Git i GitHub', `<p>Dins una sessió, ${k('/git')} (o Opcions → Git i GitHub) mostra els canvis, fa <b>commit</b> (en una branca nova si ets a ${k('main')}) i crea un <b>PR</b>. Cap clau no passa per nio: fa servir el ${k('git')} i el ${k('gh')} de l’ordinador.</p>`)}
     ${q('Avisos al mòbil', `<p>A <b>Ajustos → Avisos</b>, prem <b>Activa els avisos</b>. Rebràs una notificació quan un agent et demana permís o acaba la feina. L’avís arriba buit; el detall el demana el mòbil directament a l’ordinador.</p><p>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>`)}
-    ${q('Veu', `<p>A <b>Ajustos → Veu</b> pots posar la teva clau d’ElevenLabs per <b>dictar</b> els missatges amb el micròfon i <b>escoltar</b> les respostes. La clau es queda només en aquest navegador.</p>`)}
+    ${q('Veu', `<p>A <b>Ajustos → Veu</b> actives <b>Whisper</b> per <b>dictar</b> els missatges amb el micròfon, gratis i sense que l’àudio surti de l’ordinador. Per <b>escoltar</b> les respostes, hi pots posar una clau d’ElevenLabs o OpenAI, que es queda a l’ordinador.</p>`)}
 
     ${grp('Eines')}
     ${q('Pantalla remota', `<p>Mira i controla l’escriptori d’un ordinador des del mòbil. A <b>Ordinadors</b>, baixa fins a la secció <b>Pantalla</b> i prem <b>Obre la pantalla</b>. S’obre a pantalla completa. Cal activar abans <b>Apps de l’escriptori</b> a la mateixa secció.</p><ul><li><b>Mirar</b>: només veus la pantalla, en directe. Amb un dit la mous quan has fet zoom.</li><li><b>Controlar</b>: toc = clic; doble toc = doble clic; mantenir premut = clic dret; dos dits = desplaçar o fer zoom. El botó <b>1 dit</b> canvia entre desplaçar i arrossegar, i el botó <b>2 dits</b> entre desplaçar l’ordinador i fer zoom amb pessics. <b>Teclat</b> obre el teclat del mòbil, i dalt hi tens ${k('⌘')} ${k('⌥')} ${k('⌃')} ${k('⇧')}, ${k('Esc')}, ${k('Tab')} i fletxes.</li><li><b>Zoom amb dos dits</b>: pessiga per apropar i arrossega amb dos dits per moure’t. Al mode Mirar sempre va així, amb doble toc per alternar entre enquadrar i apropar. Al mode Controlar, tria al botó <b>2 dits</b> si els dos dits desplacen l’ordinador o fan zoom. A l’ordinador, pessiga al trackpad o ${k('Ctrl')} + roda. Els botons <b>− 100% +</b> i <b>1:1</b> fan el mateix i funcionen en tots dos modes.</li><li><b>Desa captura</b>: baixa el fotograma actual com a imatge. <b>Captura</b> (a la secció) en fa una de sola, sense obrir la pantalla.</li><li><b>Si surt negra</b>: al Mac, dona el permís de <b>Gravació de pantalla</b> (i <b>Accessibilitat</b> per controlar) al Terminal on corre <span class="mono">nio-cat</span> i reinicia’l. A Linux, per controlar cal <span class="mono">xdotool</span>.</li></ul>`)}
@@ -646,7 +657,7 @@ function viewComputers() {
     const steps = isPhone()
       ? [['Engega nio a l’ordinador', 'Al terminal: <span class="mono">npx nio-cat</span>.'], ['Escaneja el QR', 'O escriu el codi <span class="mono">nio-…</span> que surt al terminal.'], ['Dona feina a un agent', 'Crea una sessió i segueix-la en directe.']]
       : [['Engega nio', 'Al terminal: <span class="mono">npx nio-cat</span>. S’obre aquesta web ja connectada.'], ['O afegeix un servidor', 'Amb SSH: <span class="mono">usuari@servidor</span>. nio hi fa la resta.'], ['Continua al mòbil', 'Amb un QR o un codi, quan vulguis.']];
-    return `${head}<div class="panel empty">${bot('idle')}<h2>Connecta el teu primer ordinador</h2><ol class="stepper">${steps.map(([t, d], i) => `<li><span class="n">${i + 1}</span><div><b>${t}</b><p>${d}</p></div></li>`).join('')}</ol><button class="btn ink" data-act="add-computer" type="button">${svg(ICON.plus)}Afegeix ordinador</button></div>`;
+    return `${head}<div class="panel empty">${bot('idle')}<h2>Connecta el teu primer ordinador</h2><ol class="stepper">${steps.map(([t, d], i) => `<li><span class="n">${i + 1}</span><div><b>${t}</b><p>${d}</p></div></li>`).join('')}</ol><div class="row" style="justify-content:center"><button class="btn ink" data-act="add-computer" type="button">${svg(ICON.plus)}Afegeix ordinador</button><button class="btn" data-act="demo" type="button">Prova una demo</button></div><p class="muted small">La demo fa servir un ordinador simulat, aquí mateix. No cal instal·lar res.</p></div>`;
   }
   const detail = m && state.connected ? `<h2 class="sec">${esc(m.name)}</h2>
   <div class="grid2 one">
@@ -721,7 +732,7 @@ function addComputerSheet(tab, opts = {}) {
       const saved = d && store.machines.findIndex((x) => x.id === d.id);
       if (d && saved >= 0) set('saved', `${intro('Aquest ordinador ja és a la llista', 'El tens connectat com a «' + esc(d.name) + '».')}<div class="row"><button class="btn ink" type="button" data-open-saved="${saved}">Obre sessions</button></div>`);
       else if (d) set('found', `${intro('nio funciona en aquest ordinador', 'Aquest navegador encara no hi té accés. Torna a engegar nio i obrirà el panell ja connectat.')}${cmdBox('npx nio-cat')}`);
-      else set('none', `${intro('Engega nio en aquest ordinador')}${todo(['Obre un terminal a la carpeta dels teus projectes.', `Executa:${cmdBox('npx nio-cat')}`, 'S’obrirà aquest panell ja connectat.'])}${live('Esperant que nio s’engegui…')}<p class="hint">Cal Node.js 18 o més nou.</p>`);
+      else set('none', `${intro('Engega nio en aquest ordinador')}${todo(['Obre un terminal a la carpeta dels teus projectes.', `Executa:${cmdBox('npx nio-cat')}`, 'S’obrirà aquest panell ja connectat.'])}${live('Esperant que nio s’engegui…')}<p class="hint">Cal Node.js 18 o més nou.</p>${store.machines.length ? '' : '<div class="or"><span>o</span></div><button class="btn block" type="button" data-close data-act="demo">Prova una demo, sense instal·lar res</button>'}`);
       if (saved < 0 || !d) poll = setTimeout(local, 3000);
     };
     const runSsh = async (target) => {
@@ -1602,7 +1613,7 @@ function modeSheet(s) {
 const isLocalMachine = () => { const m = machine(); try { return !!m && ['127.0.0.1', 'localhost', '[::1]'].includes(new URL(m.url).hostname); } catch { return false; } };
 function mobileHint() {
   const m = machine(), key = `nio.mobHint.${m?.id || m?.url}`;
-  if (!m || isPhone() || !state.connected || LS.get(key, false)) return '';
+  if (!m || isDemo(m) || isPhone() || !state.connected || LS.get(key, false)) return '';
   return `<div class="panel hint"><div class="row between" style="flex-wrap:wrap;gap:12px"><div><b>Vols fer-lo servir al mòbil?</b><p class="muted small" style="margin-top:2px">Escaneja un codi i continues des del telèfon, amb les mateixes sessions.</p></div><div class="row"><button class="btn ghost" type="button" data-act="mobile-hint-off">Ara no</button><button class="btn ink" type="button" data-act="mobile-qr">Mostra el QR</button></div></div></div>`;
 }
 let qrTimer = 0;
@@ -1925,6 +1936,12 @@ async function sendLocal() {
 let screen = null; // { caps, last, actions }
 const controlOn = () => !!(state.info?.control?.navegador?.enabled || state.info?.control?.escriptori?.enabled || screen?.caps?.navegador?.enabled || screen?.caps?.escriptori?.enabled);
 // Aturada d'emergència: sempre a la vista mentre el control estigui actiu.
+function renderDemoBar() {
+  let bar = $('#demoBar');
+  if (!isDemo()) return bar?.remove();
+  if (bar) return;
+  $('#main').insertAdjacentHTML('afterbegin', `<div class="demo-bar" id="demoBar" role="status"><span><b>Demo</b> · un ordinador simulat, res no surt del navegador.</span><span class="row"><button class="btn sm ink" type="button" data-act="add-computer">Connecta el teu</button><button class="btn sm ghost" type="button" data-act="demo-exit">Surt</button></span></div>`);
+}
 function renderPanic() {
   syncScreenBtn();
   $('#panicBtn')?.remove();
@@ -2332,6 +2349,7 @@ async function speak(btn) {
 function autoSpeak(ev) { if (nodeVoice?.speak && nodeVoice?.tts && !document.hidden && ev?.text) { stopSpeech(); playText(ev.text); } }
 const mic = { rec: null, chunks: [], stream: null };
 async function toggleMic() {
+  if (isDemo()) return toast('A la demo no hi ha micròfon. Amb nio instal·lat, dictes amb Whisper, gratis.', 4500);
   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.');
@@ -2355,18 +2373,20 @@ async function toggleMic() {
 function voicePanel() {
   if (!machine()) return '';
   const v = nodeVoice, P = v?.providers || {};
-  const on = Object.entries(P).filter(([, p]) => p.key).map(([, p]) => p.name);
-  return `<section class="panel"><header><h2>Veu</h2>${on.length ? `<span class="chip ok"><i class="dot on"></i>${esc(on.join(' · '))}</span>` : ''}</header><div class="body stack"><p class="small">Dicta els missatges amb el micròfon i escolta les respostes. Les claus es queden a l’ordinador (${esc(machine().name)}); l’àudio va del mòbil a l’ordinador i d’allà al proveïdor.</p>${v ? '' : '<p class="muted small">Aquest ordinador encara no té la veu (cal nio 0.7 o més nou).</p>'}<div class="row"><button class="btn ink" data-act="voice" type="button" ${v ? '' : 'disabled'}>${on.length ? 'Canvia la configuració' : 'Configura la veu'}</button></div></div></section>`;
+  const on = [...(v?.whisper?.ready ? ['Whisper'] : []), ...Object.entries(P).filter(([, p]) => p.key).map(([, p]) => p.name)];
+  return `<section class="panel"><header><h2>Veu</h2>${on.length ? `<span class="chip ok"><i class="dot on"></i>${esc(on.join(' · '))}</span>` : ''}</header><div class="body stack"><p class="small">Dicta els missatges amb el micròfon i escolta les respostes. Amb <b>Whisper</b> és gratis i l’àudio no surt de l’ordinador (${esc(machine().name)}). Si hi poses una clau d’ElevenLabs o OpenAI, també es queda a l’ordinador.</p>${v ? '' : '<p class="muted small">Aquest ordinador encara no té la veu (cal nio 0.7 o més nou).</p>'}<div class="row"><button class="btn ink" data-act="voice" type="button" ${v ? '' : 'disabled'}>${on.length ? 'Canvia la configuració' : 'Configura la veu'}</button></div></div></section>`;
 }
 async function voiceSheet() {
   await loadVoice();
   if (!nodeVoice) return toast('Aquest ordinador encara no té la veu. Actualitza nio (npx nio-cat@latest).', 5000);
+  if (isDemo()) return toast('A la demo no hi ha veu. Amb nio instal·lat, dictes amb Whisper, gratis.', 4500);
   const v = nodeVoice, old = LS.get('nio.voice', {});
-  openSheet(`<h2>Veu</h2><p class="muted small">Les claus es desen a l’ordinador «${esc(machine().name)}» i no tornen mai al mòbil. Amb una sola clau n’hi ha prou.</p>
+  openSheet(`<h2>Veu</h2><p class="muted small">Per dictar n’hi ha prou amb Whisper, gratis i a l’ordinador «${esc(machine().name)}». Les claus són opcionals: serveixen per escoltar les respostes en veu alta. Es desen a l’ordinador i no tornen mai al mòbil.</p>
+    <div id="whisperBox" style="margin-top:14px">${whisperCard(v.whisper)}</div>
     <form class="stack" id="voiceForm" style="margin-top:14px">
       <label class="f"><span>Clau d’ElevenLabs ${v.providers.elevenlabs.key ? `<span class="muted">(desada: ${esc(v.providers.elevenlabs.key)})</span>` : ''}</span><input type="password" id="vEl" placeholder="${v.providers.elevenlabs.key ? 'Deixa-ho buit per mantenir-la' : 'sk_…'}" value="${!v.providers.elevenlabs.key && old.key ? esc(old.key) : ''}" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
       <label class="f"><span>Clau d’OpenAI ${v.providers.openai.key ? `<span class="muted">(desada: ${esc(v.providers.openai.key)})</span>` : ''}</span><input type="password" id="vOa" placeholder="${v.providers.openai.key ? 'Deixa-ho buit per mantenir-la' : 'sk-…'}" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
-      <div class="grid-2"><label class="f"><span>Per entendre’t</span><select id="vStt"><option value="">Automàtic</option><option value="elevenlabs" ${v.stt === 'elevenlabs' ? 'selected' : ''}>ElevenLabs Scribe</option><option value="openai" ${v.stt === 'openai' ? 'selected' : ''}>OpenAI</option></select></label>
+      <div class="grid-2"><label class="f"><span>Per entendre’t</span><select id="vStt"><option value="">Automàtic</option>${v.whisper ? `<option value="whisper" ${v.stt === 'whisper' ? 'selected' : ''}>Whisper (gratis)</option>` : ''}<option value="elevenlabs" ${v.stt === 'elevenlabs' ? 'selected' : ''}>ElevenLabs Scribe</option><option value="openai" ${v.stt === 'openai' ? 'selected' : ''}>OpenAI</option></select></label>
       <label class="f"><span>Per parlar</span><select id="vTts"><option value="">Automàtic</option><option value="elevenlabs" ${v.tts === 'elevenlabs' ? 'selected' : ''}>ElevenLabs</option><option value="openai" ${v.tts === 'openai' ? 'selected' : ''}>OpenAI</option></select></label></div>
       <label class="row check"><input type="checkbox" id="vSpeak" ${v.speak ? 'checked' : ''}> <span>Llegeix en veu alta les respostes de la sessió oberta</span></label>
       ${old.key ? '<p class="muted small">Tenies una clau d’ElevenLabs desada en aquest navegador: la passo a l’ordinador i l’esborro d’aquí.</p>' : ''}
@@ -2375,8 +2395,38 @@ async function voiceSheet() {
     const put = async (body, msg) => { try { nodeVoice = await api('/api/voice', { method: 'PUT', body }); try { localStorage.removeItem('nio.voice'); } catch { /* res */ } closeSheet(); toast(msg); if (state.route.name === 'session') renderSession(); else render(); } catch (e) { toast(e.message, 4500); } };
     $('#voiceForm', sh).onsubmit = (e) => { e.preventDefault(); const keys = {}; const el = $('#vEl', sh).value.trim(), oa = $('#vOa', sh).value.trim(); if (el) keys.elevenlabs = el; if (oa) keys.openai = oa; put({ keys, stt: $('#vStt', sh).value || null, tts: $('#vTts', sh).value || null, speak: $('#vSpeak', sh).checked }, 'Veu desada a l’ordinador'); };
     $('#vOff', sh).onclick = () => { if (confirm('Es treuran les claus de veu d’aquest ordinador.')) put({ keys: { elevenlabs: null, openai: null } }, 'Claus eliminades'); };
+    // Whisper: instal·lar, baixar el model i seguir-ne el progrés mentre la fulla és oberta.
+    const wbox = $('#whisperBox', sh);
+    const draw = (w) => { if (w) { nodeVoice.whisper = w; wbox.innerHTML = whisperCard(w); } };
+    const poll = async () => {
+      if (!wbox.isConnected) return;
+      try { const r = await api('/api/voice'); nodeVoice = r; draw(r.whisper); if (r.whisper?.downloading || r.whisper?.installing) setTimeout(poll, 1500); } catch { /* ho tornarem a provar en obrir */ }
+    };
+    wbox.onclick = async (e) => {
+      const b = e.target.closest('[data-whisper]'); if (!b) return;
+      b.disabled = true;
+      try { const r = await api('/api/voice/whisper', { method: 'POST', body: { action: b.dataset.whisper } }); nodeVoice = r; draw(r.whisper); setTimeout(poll, 1000); } catch (err) { toast(err.message, 5000); b.disabled = false; }
+    };
+    wbox.onchange = async (e) => {
+      if (e.target.id !== 'wModel') return;
+      try { const r = await api('/api/voice', { method: 'PUT', body: { whisper: { model: e.target.value } } }); nodeVoice = r; draw(r.whisper); } catch (err) { toast(err.message); }
+    };
+    if (v.whisper?.downloading || v.whisper?.installing) setTimeout(poll, 1000);
   });
 }
+function whisperCard(w) {
+  if (!w) return '<div class="card"><b>Whisper</b><div class="muted small">Actualitza nio a l’ordinador per dictar gratis amb Whisper (npx nio-cat@latest).</div></div>';
+  const mb = (n) => `${Math.round(n / 1e6)} MB`, m = w.models?.[w.model], live = (t) => `<p class="live"><i class="pulse"></i>${t}</p>`;
+  const models = `<label class="f" style="margin-top:10px"><span>Model</span><select id="wModel">${Object.entries(w.models || {}).map(([id, x]) => `<option value="${esc(id)}" ${id === w.model ? 'selected' : ''}>${esc(x.label)} · ${mb(x.size)}${x.have ? ' · baixat' : ''}</option>`).join('')}</select></label>`;
+  let body;
+  if (w.installing) body = live('Instal·lant whisper-cpp i ffmpeg amb Homebrew… pot trigar uns minuts.');
+  else if (w.downloading) body = `${live(`Baixant el model… ${w.downloading.pct}%`)}<div class="progress"><i style="width:${w.downloading.pct}%"></i></div>`;
+  else if (w.ready) body = `<p class="small">A punt. Prem el micròfon i parla: l’àudio no surt de l’ordinador.</p>${w.engine === 'cpp' ? models : ''}`;
+  else if (w.missing?.length) body = w.canInstall ? `<p class="small">Falta ${esc(w.missing.join(' i '))}. nio ho pot instal·lar amb Homebrew.</p><div class="row"><button class="btn ink" type="button" data-whisper="install">Instal·la Whisper</button></div>` : `<p class="small">Instal·la-ho al terminal de l’ordinador i torna a obrir aquesta fulla:</p>${cmdBox(w.install)}`;
+  else if (w.needsModel) body = `<p class="small">Només falta baixar el model, una sola vegada.</p>${models}<div class="row" style="margin-top:10px"><button class="btn ink" type="button" data-whisper="download">Baixa el model${m ? ` (${mb(m.size)})` : ''}</button></div>`;
+  else body = '';
+  return `<div class="card"><div class="row between"><b>Whisper · gratis</b>${w.ready ? '<span class="chip ok"><i class="dot on"></i>Actiu</span>' : ''}</div>${body}${w.error ? `<p class="small" style="color:var(--red)">${esc(w.error)}</p>` : ''}</div>`;
+}
 
 /* ---------------------------------------------------------------- accions */
 document.addEventListener('click', (e) => {
@@ -2444,6 +2494,8 @@ document.addEventListener('click', async (e) => {
     case 'activity-refresh': activity = null; return loadActivity();
     case 'push-test': try { const r = await api('/api/push/test', { method: 'POST' }); toast(r.subs ? 'Enviat. Arribarà en uns segons.' : 'Primer activa els avisos'); } catch (err) { toast(err.message); } return;
     case 'add-computer': return addComputerSheet();
+    case 'demo': return startDemo();
+    case 'demo-exit': return exitDemo();
     case 'open-sessions': return go('#/sessions');
     case 'help': return go('#/ajuda');
     case 'more': return moreSheet();
@@ -2478,7 +2530,7 @@ function commands() {
   if (machine()) c.push({ label: 'Nova sessió', hint: 'Crea', run: newSessionSheet });
   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: 'Configura la veu (ElevenLabs)', hint: 'Ajustos', run: voiceSheet });
+  c.push({ label: 'Configura la veu (Whisper, gratis)', hint: 'Ajustos', run: voiceSheet });
   c.push({ label: 'Fes el tutorial', hint: 'Ajuda', run: tourStart });
   return c;
 }

package/web/app/demo.js

@@ -0,0 +1,221 @@
+// nio · demo: un ordinador simulat dins del navegador, per provar l'app sense instal·lar res.
+// Respon les mateixes adreces que el programa (/api/…) a les adreces «demo:…», amb sessions,
+// text en directe, eines i aprovacions de mentida. No surt res del navegador i es reinicia en recarregar.
+(() => {
+  const ROOT = '/Users/tu/projectes';
+  const AGENTS = [
+    { id: 'claude', name: 'Claude Code', beta: false, approvals: true, noModes: false, login: '', available: true, version: 'simulat' },
+    { id: 'codex', name: 'Codex', beta: false, approvals: true, noModes: false, login: '', available: true, version: 'simulat' },
+  ];
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  const rid = () => Math.random().toString(36).slice(2, 12);
+  const err = (status, error) => Object.assign(new Error(error), { status });
+  const NOPE = 'Això no es pot fer a la demo. Instal·la nio a l’ordinador per fer-ho de debò: npx nio-cat';
+
+  const sessions = new Map(), approvals = new Map(), streams = new Set(), runs = new Map(), audit = [];
+  const out = (msg) => { const data = new TextEncoder().encode(`data: ${JSON.stringify(msg)}\n\n`); for (const c of streams) try { c.enqueue(data); } catch { streams.delete(c); } };
+
+  function summary(s) {
+    const last = [...s.events].reverse().find((e) => e.kind === 'text' || e.kind === 'user');
+    return { id: s.id, agent: s.agent, title: s.title, cwd: s.cwd, mode: s.mode, model: '', state: s.state, created: s.created, updated: s.updated, cost: s.cost || 0, last: last ? last.text.slice(0, 160) : '', error: '', pending: [...approvals.values()].filter((a) => a.session === s.id && a.state === 'pending').length };
+  }
+  const list = () => [...sessions.values()].sort((a, b) => b.updated - a.updated).map(summary);
+  const pending = () => [...approvals.values()].filter((a) => a.state === 'pending').map(({ resolve, ...a }) => a);
+  const touch = (s) => { s.updated = Date.now(); out({ type: 'session', session: summary(s) }); };
+  function push(s, kind, data = {}) {
+    const last = s.events[s.events.length - 1];
+    if (last?.open) { delete last.open; out({ type: 'event', session: s.id, event: last }); }
+    const ev = { seq: s.events.length + 1, t: Date.now(), kind, ...data };
+    s.events.push(ev); out({ type: 'event', session: s.id, event: ev }); touch(s);
+    return ev;
+  }
+  async function stream(s, text, run) {
+    const ev = push(s, 'text', { text: '', open: true });
+    for (const w of text.split(/(?<= )/)) {
+      if (run.stopped) return;
+      ev.text += w; out({ type: 'delta', session: s.id, seq: ev.seq, text: w });
+      await sleep(35 + Math.random() * 45);
+    }
+    delete ev.open; out({ type: 'event', session: s.id, event: ev }); touch(s);
+  }
+  function ask(s, tool, input) {
+    const a = { id: rid(), session: s.id, agent: s.agent, title: s.title, tool, input, reason: input.description || '', state: 'pending', created: Date.now() };
+    approvals.set(a.id, a); s.state = 'waiting';
+    push(s, 'approval', { approval: a.id, tool, input, reason: a.reason, state: 'pending' });
+    out({ type: 'approval', approval: pending().find((x) => x.id === a.id) });
+    return new Promise((r) => { a.resolve = r; });
+  }
+  function decide(id, decision) {
+    const a = approvals.get(id);
+    if (!a || a.state !== 'pending') return null;
+    a.state = decision === 'allow' ? 'allowed' : 'denied'; a.decided = Date.now(); a.by = 'Aquest navegador';
+    audit.unshift({ t: Date.now(), type: 'approval', session: a.session, agent: a.agent, title: a.title, tool: a.tool, what: a.input.command || a.input.file_path || a.tool, why: a.reason, decision: a.state, by: a.by, asked: a.created });
+    const s = sessions.get(a.session);
+    if (s) {
+      const ev = s.events.find((e) => e.kind === 'approval' && e.approval === id);
+      if (ev) { ev.state = a.state; out({ type: 'event', session: s.id, event: ev }); }
+      if (s.state === 'waiting') s.state = runs.has(s.id) ? 'running' : 'idle';
+      touch(s);
+    }
+    const { resolve, ...pub } = a;
+    out({ type: 'approval', approval: pub });
+    resolve?.(a.state === 'allowed' ? 'allow' : 'deny');
+    return pub;
+  }
+
+  // Què fa l'agent simulat segons el que li demanes. Sempre: llegeix, proposa un canvi, el demana i prova.
+  function plan(text, s) {
+    const t = text.toLowerCase(), dir = s.cwd.split('/').pop();
+    if (/test|prova/.test(t)) return { intro: `Miro quins tests hi ha a ${dir} i quins fallen.`, read: 'package.json', readOut: '{\n  "scripts": { "test": "node --test" }\n}', edit: { file_path: `${s.cwd}/test/usuaris.test.js`, old_string: '', new_string: "test('crea un usuari', async () => {\n  const u = await crear({ nom: 'Anna' });\n  assert.equal(u.nom, 'Anna');\n});", description: 'Afegeixo un test per crear usuaris' }, bash: 'npm test', bashOut: '✓ 14 tests passen (0,8 s)', end: 'Fet. He afegit el test que faltava i **tots els tests passen**.' };
+    if (/fosc|dark|color|disseny|css|estil/.test(t)) return { intro: 'Faig una ullada als estils per afegir-hi el que em demanes.', read: 'src/styles.css', readOut: ':root {\n  --bg: #fff;\n  --text: #1a1a1a;\n}', edit: { file_path: `${s.cwd}/src/styles.css`, old_string: ':root {\n  --bg: #fff;', new_string: ':root {\n  --bg: #fff;\n}\n@media (prefers-color-scheme: dark) {\n  :root { --bg: #141414; --text: #eee; }', description: 'Afegeixo els colors del mode fosc' }, bash: 'npm run build', bashOut: '✓ build fet en 1,9 s', end: 'Llest. El mode fosc s’activa sol quan el sistema el fa servir. Vols que hi afegeixi un botó per canviar-lo a mà?' };
+    if (/error|bug|falla|arregla|peta/.test(t)) return { intro: 'Busco d’on ve l’error.', read: 'src/server.js', readOut: "app.get('/usuaris/:id', (req, res) => {\n  res.json(db.usuaris[req.params.id].nom);\n});", edit: { file_path: `${s.cwd}/src/server.js`, old_string: 'res.json(db.usuaris[req.params.id].nom);', new_string: "const u = db.usuaris[req.params.id];\n  if (!u) return res.status(404).json({ error: 'No existeix' });\n  res.json(u.nom);", description: 'Retorno un 404 quan l’usuari no existeix' }, bash: 'npm test', bashOut: '✓ 12 tests passen', end: 'Trobat: quan l’usuari no existia, el servidor petava. Ara respon un **404** i els tests passen.' };
+    return { intro: `Entesos. Començo per entendre com està organitzat ${dir}.`, read: 'README.md', readOut: `# ${dir}\nProjecte d’exemple de la demo de nio.`, edit: { file_path: `${s.cwd}/NOTES.md`, old_string: '', new_string: `## Pendent\n- ${text.slice(0, 80)}`, description: 'Apunto la tasca a les notes del projecte' }, bash: 'git status --short', bashOut: ' M NOTES.md', end: 'Fet. A la versió de debò, aquí l’agent treballaria als fitxers del teu ordinador i et demanaria permís abans de cada canvi.' };
+  }
+  async function work(s, text) {
+    const run = { stopped: false }; runs.set(s.id, run);
+    const p = plan(text, s), tool = (name, input, output, error) => { const id = rid(); push(s, 'tool', { id, name, input }); return { id, done: () => push(s, 'tool_result', { id, name, output, error: !!error }) }; };
+    const allowed = async (name, input) => s.mode === 'tot' || (await ask(s, name, input)) === 'allow';
+    try {
+      await sleep(500); await stream(s, p.intro, run); if (run.stopped) return;
+      const r = tool('Read', { file_path: p.read }, p.readOut); await sleep(700); r.done(); if (run.stopped) return;
+      if (s.mode === 'llegir') { await stream(s, 'Treballo en mode només lectura, així que no toco res. Et proposo aquest canvi:\n\n```\n' + p.edit.new_string + '\n```', run); return; }
+      await sleep(400);
+      // Un fitxer nou és «Write»; un canvi a un fitxer que ja hi és, «Edit».
+      const [eName, eInput] = p.edit.old_string ? ['Edit', p.edit] : ['Write', { file_path: p.edit.file_path, content: p.edit.new_string, description: p.edit.description }];
+      if (!(await allowed(eName, eInput))) { if (!run.stopped) await stream(s, 'D’acord, no hi toco. Què vols que faci?', run); return; }
+      if (run.stopped) return;
+      const e = tool(eName, eInput, eName === 'Write' ? 'Fitxer creat' : 'Fitxer actualitzat'); await sleep(500); e.done();
+      if (!(await allowed('Bash', { command: p.bash, description: 'Comprovo que tot funciona' }))) { if (!run.stopped) await stream(s, 'Entesos, no ho executo. El canvi ja és fet.', run); return; }
+      if (run.stopped) return;
+      const b = tool('Bash', { command: p.bash }, p.bashOut); await sleep(1100); b.done();
+      await stream(s, p.end, run);
+      const cost = 0.02 + Math.random() * 0.08; s.cost = (s.cost || 0) + cost; push(s, 'result', { cost, ms: 6000, turns: 3 });
+    } finally {
+      runs.delete(s.id);
+      for (const a of approvals.values()) if (a.session === s.id && a.state === 'pending') decide(a.id, 'deny');
+      s.state = 'idle'; push(s, 'status', { state: 'idle', code: run.stopped ? 130 : 0 });
+    }
+  }
+  function create({ agent, cwd, title, mode }) {
+    if (!AGENTS.some((a) => a.id === agent)) throw err(400, `A la demo només hi ha ${AGENTS.map((a) => a.name).join(' i ')}`);
+    const s = { id: rid(), agent, cwd: cwd || `${ROOT}/web-botiga`, title: title || '', mode: ['llegir', 'preguntar', 'tot'].includes(mode) ? mode : 'preguntar', state: 'idle', created: Date.now(), updated: Date.now(), cost: 0, events: [] };
+    sessions.set(s.id, s); touch(s); return s;
+  }
+  function send(s, text) {
+    if (runs.has(s.id)) throw err(409, 'L’agent encara està treballant. Espera que acabi o atura’l.');
+    text = String(text || '').trim(); if (!text) throw err(400, 'El missatge és buit');
+    if (!s.title) s.title = text.replace(/\s+/g, ' ').slice(0, 60);
+    push(s, 'user', { text }); s.state = 'running'; push(s, 'status', { state: 'running' });
+    work(s, text);
+    return summary(s);
+  }
+
+  // Sessions d'exemple: una d'acabada, una que espera permís i una d'antiga.
+  function seed() {
+    const ago = (min) => Date.now() - min * 60000;
+    const mk = (agent, dir, title, min, evs, extra = {}) => {
+      const s = { id: rid(), agent, cwd: `${ROOT}/${dir}`, title, mode: 'preguntar', state: 'idle', created: ago(min + 5), updated: ago(min), cost: extra.cost || 0, events: evs.map((e, i) => ({ seq: i + 1, t: ago(min + (evs.length - i) / 4), ...e })) };
+      sessions.set(s.id, s); return s;
+    };
+    mk('claude', 'web-botiga', 'Afegeix el mode fosc a la botiga', 12, [
+      { kind: 'user', text: 'Afegeix el mode fosc a la botiga' }, { kind: 'status', state: 'running' },
+      { kind: 'text', text: 'Miro com estan definits els colors.' },
+      { kind: 'tool', id: 'a1', name: 'Read', input: { file_path: 'src/styles.css' } }, { kind: 'tool_result', id: 'a1', name: 'Read', output: ':root {\n  --bg: #fff;\n  --text: #1a1a1a;\n}', error: false },
+      { kind: 'tool', id: 'a2', name: 'Edit', input: { file_path: `${ROOT}/web-botiga/src/styles.css`, old_string: '--bg: #fff;', new_string: '--bg: #fff;\n}\n@media (prefers-color-scheme: dark) {\n  :root { --bg: #141414; }' } }, { kind: 'tool_result', id: 'a2', name: 'Edit', output: 'Fitxer actualitzat', error: false },
+      { kind: 'tool', id: 'a3', name: 'Bash', input: { command: 'npm run build' } }, { kind: 'tool_result', id: 'a3', name: 'Bash', output: '✓ build fet en 1,9 s', error: false },
+      { kind: 'text', text: 'Fet. El **mode fosc** s’activa sol quan el sistema el fa servir.' }, { kind: 'result', cost: 0.07, ms: 41000, turns: 4 }, { kind: 'status', state: 'idle', code: 0 },
+    ], { cost: 0.07 });
+    const w = mk('codex', 'api', 'Prepara la migració de la base de dades', 2, [
+      { kind: 'user', text: 'Prepara la migració de la base de dades' }, { kind: 'status', state: 'running' },
+      { kind: 'text', text: 'He escrit la migració que afegeix la columna «telefon» a usuaris. Ara l’he d’executar.' },
+    ]);
+    const a = { id: rid(), session: w.id, agent: 'codex', title: w.title, tool: 'Bash', input: { command: 'npm run migrate', description: 'Executo la migració a la base de dades local' }, reason: 'Executo la migració a la base de dades local', state: 'pending', created: ago(1) };
+    approvals.set(a.id, a); w.state = 'waiting'; runs.set(w.id, { stopped: false }); w.events.push({ seq: w.events.length + 1, t: ago(1), kind: 'approval', approval: a.id, tool: a.tool, input: a.input, reason: a.reason, state: 'pending' });
+    // Quan la decideixis, la sessió continua.
+    a.resolve = async (d) => {
+      const run = runs.get(w.id) || { stopped: false }; runs.set(w.id, run); w.state = 'running'; touch(w);
+      if (run.stopped) { runs.delete(w.id); w.state = 'idle'; push(w, 'status', { state: 'idle', code: 130 }); return; }
+      if (d === 'allow') { push(w, 'tool', { id: 'm1', name: 'Bash', input: { command: 'npm run migrate' } }); await sleep(900); push(w, 'tool_result', { id: 'm1', name: 'Bash', output: '✓ 1 migració aplicada', error: false }); await stream(w, 'Migració aplicada. La taula d’usuaris ja té la columna «telefon».', run); }
+      else await stream(w, 'D’acord, no l’executo. La tens a migrations/004_telefon.sql per quan vulguis.', run);
+      runs.delete(w.id); w.state = 'idle'; push(w, 'status', { state: 'idle', code: 0 });
+    };
+    mk('claude', 'api', 'Escriu tests per a /usuaris', 60 * 26, [
+      { kind: 'user', text: 'Escriu tests per a /usuaris' }, { kind: 'text', text: 'He afegit 6 tests a test/usuaris.test.js. Tots passen.' }, { kind: 'result', cost: 0.11, ms: 52000, turns: 5 },
+    ], { cost: 0.11 });
+  }
+  seed();
+
+  const MEMORY = {
+    'preferencies.md': '# Preferències\n\n- Respon en català.\n- Fes commits petits i explica’ls bé.\n',
+    'projectes/web-botiga.md': '# web-botiga\n\nBotiga en línia feta amb Astro. Els colors són a src/styles.css.\n',
+  };
+  const DIRS = { [ROOT]: ['web-botiga', 'api', 'notes'], [`${ROOT}/api`]: ['src', 'test'], [`${ROOT}/web-botiga`]: ['public', 'src'] };
+
+  async function route(method, p, q, body) {
+    let m;
+    if (method === 'GET') {
+      if (p === '/api/info') return { name: 'nio', version: 'demo', host: 'Ordinador de demo', platform: 'darwin', user: 'tu', publicUrl: null, agents: AGENTS, roots: [ROOT], vapidKey: null, id: 'demo', device: { id: 'demo', name: 'Aquest navegador', primary: true }, demo: true, control: null };
+      if (p === '/api/sessions') return list();
+      if (p === '/api/approvals') return pending();
+      if ((m = p.match(/^\/api\/sessions\/([\w-]+)$/))) { const s = sessions.get(m[1]); if (!s) throw err(404, 'Aquesta sessió no existeix'); const since = Number(q.get('since') || 0); return { session: summary(s), events: s.events.filter((e) => e.seq > since) }; }
+      if (/^\/api\/sessions\/[\w-]+\/commands$/.test(p)) return [];
+      if (/^\/api\/sessions\/[\w-]+\/git$/.test(p)) return { repo: false };
+      if (p === '/api/projects') return [{ path: ROOT, name: 'projectes', root: true, git: false }, ...DIRS[ROOT].map((n) => ({ path: `${ROOT}/${n}`, name: n, root: false, git: n !== 'notes' }))];
+      if (p === '/api/fs') { const d = (q.get('path') || ROOT).replace(/\/+$/, '') || ROOT; return { path: d, parent: d === '/Users/tu' ? null : d.replace(/\/[^/]+$/, '') || null, home: '/Users/tu', git: false, dirs: (DIRS[d] || []).map((n) => ({ name: n, path: `${d}/${n}`, hidden: false })) }; }
+      if (p === '/api/memory') return { dir: '~/.nio/memory', files: Object.entries(MEMORY).map(([path, c]) => ({ path, size: c.length, updated: Date.now() - 86400000 })) };
+      if ((m = p.match(/^\/api\/memory\/f\/(.+)$/))) { const path = decodeURIComponent(m[1]); if (!(path in MEMORY)) throw err(404, 'Aquest fitxer no existeix'); return { path, content: MEMORY[path], updated: Date.now() - 86400000 }; }
+      if (p === '/api/memory/search') { const t = (q.get('q') || '').toLowerCase(), r = []; for (const [path, c] of Object.entries(MEMORY)) c.split('\n').forEach((l, i) => l.toLowerCase().includes(t) && t && r.push({ path, line: i + 1, text: l })); return r; }
+      if (p === '/api/jobs') return { jobs: [], routing: [], max: 2 };
+      if (p === '/api/audit') return audit.slice(0, 300);
+      if (p === '/api/devices') return [{ id: 'demo', name: 'Aquest navegador', primary: true, created: null, lastSeen: Date.now(), current: true }];
+      if (p === '/api/voice') return { providers: {}, stt: null, tts: null, speak: false, lang: 'ca', voice: {}, demo: true };
+      if (p === '/api/control') return { navegador: { installed: false, ready: false, enabled: false }, escriptori: { installed: false, ready: false, why: 'A la demo no hi ha escriptori', enabled: false, screenshot: false }, platform: 'darwin' };
+      if (p === '/api/screen') return { last: null, enabled: false };
+      if (p === '/api/desktop/status') return { w: 0, h: 0, screen: null, accessibility: null, platform: 'darwin', input: false, capture: false, enabled: false };
+      if (p === '/api/telegram') return { configured: false, bot: null, running: false, allowed: [], pending: [], agent: null, cwd: ROOT, mode: 'preguntar', notify: true, voice: false };
+      if (p === '/api/ollama') return { available: false, host: '', models: [], running: [], pulling: [] };
+      if (p === '/api/ollama/models' || p === '/api/notices' || p === '/api/ssh/hosts') return [];
+      if (p === '/api/github') return { available: false, authed: false };
+    }
+    if (method === 'POST') {
+      if (p === '/api/sessions') { const s = create(body); if (body.text) send(s, body.text); return summary(s); }
+      if ((m = p.match(/^\/api\/sessions\/([\w-]+)\/message$/))) { const s = sessions.get(m[1]); if (!s) throw err(404, 'Aquesta sessió no existeix'); return send(s, body.text); }
+      if ((m = p.match(/^\/api\/sessions\/([\w-]+)\/stop$/))) { const r = runs.get(m[1]), s = sessions.get(m[1]); if (!r) return { stopped: false }; r.stopped = true; for (const a of approvals.values()) if (a.session === m[1] && a.state === 'pending') decide(a.id, 'deny'); if (s) push(s, 'info', { text: 'Has aturat l’agent' }); return { stopped: true }; }
+      if ((m = p.match(/^\/api\/approvals\/([\w-]+)$/))) { const a = decide(m[1], body.decision === 'allow' ? 'allow' : 'deny'); if (!a) throw err(404, 'Aquesta petició ja s’ha resolt'); return a; }
+      if (p === '/api/voice/stt') throw err(400, 'A la demo no hi ha micròfon. Amb nio instal·lat, dictes amb Whisper, gratis, a l’ordinador.');
+    }
+    if ((m = p.match(/^\/api\/sessions\/([\w-]+)$/))) {
+      const s = sessions.get(m[1]); if (!s) throw err(404, 'Aquesta sessió no existeix');
+      if (method === 'PATCH') { if (['llegir', 'preguntar', 'tot'].includes(body.mode)) s.mode = body.mode; if (typeof body.title === 'string') s.title = body.title.slice(0, 120); touch(s); return summary(s); }
+      if (method === 'DELETE') { runs.get(s.id) && (runs.get(s.id).stopped = true); sessions.delete(s.id); out({ type: 'removed', session: s.id }); return { ok: true }; }
+    }
+    if ((m = p.match(/^\/api\/memory\/f\/(.+)$/))) {
+      if (method === 'PUT') { MEMORY[decodeURIComponent(m[1])] = String(body.content ?? ''); return { ok: true }; }
+      if (method === 'DELETE') { delete MEMORY[decodeURIComponent(m[1])]; return { ok: true }; }
+    }
+    throw err(400, NOPE);
+  }
+
+  const json = (status, data) => new Response(JSON.stringify(data), { status, headers: { 'content-type': 'application/json' } });
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input, opts = {}) => {
+    const href = typeof input === 'string' ? input : input?.url || String(input);
+    if (!href.startsWith('demo:')) return realFetch(input, opts);
+    const u = new URL(href.replace(/^demo:[^/]*/, 'http://demo')), method = (opts.method || 'GET').toUpperCase();
+    if (u.pathname === '/api/stream') {
+      let ctl;
+      const body = new ReadableStream({
+        start(c) { ctl = c; streams.add(c); c.enqueue(new TextEncoder().encode(`data: ${JSON.stringify({ type: 'hello', sessions: list(), approvals: pending() })}\n\n`)); },
+        cancel() { streams.delete(ctl); },
+      });
+      opts.signal?.addEventListener('abort', () => { streams.delete(ctl); try { ctl.close(); } catch { /* ja tancat */ } });
+      return new Response(body, { status: 200, headers: { 'content-type': 'text/event-stream' } });
+    }
+    await sleep(60);
+    let body = {};
+    try { body = typeof opts.body === 'string' ? JSON.parse(opts.body) : {}; } catch { /* àudio o res */ }
+    try { return json(200, await route(method, u.pathname, u.searchParams, body)); }
+    catch (e) { return json(e.status || 500, { error: e.message }); }
+  };
+  window.NioDemo = { url: 'demo:nio', isDemo: (m) => !!m && String(m.url).startsWith('demo:') };
+})();

package/web/app/index.html

@@ -72,6 +72,7 @@
 
 <script src="/bot.js"></script>
 <script src="/board.js"></script>
+<script src="/app/demo.js"></script>
 <script src="/app/app.js" type="module"></script>
 </body>
 </html>

package/web/app/style.css

@@ -712,3 +712,9 @@ html.rd-open, html.rd-open body { overflow: hidden; }
 #jobWhen button { flex: 1 0 auto; padding: 0 12px; }
 #jobTimes .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
 #jobMinsU { flex: 1; }
+
+/* Demo: avís d'ordinador simulat */
+.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 16px 40px 0; padding: 10px 12px 10px 16px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--panel); font-size: 13px; }
+.demo-bar b { color: var(--accent); }
+body.chat-mode .demo-bar, body.board-mode .demo-bar { display: none; }
+@media (max-width: 820px) { .demo-bar { margin: 12px 16px 0; } }

package/web/index.html

@@ -223,7 +223,7 @@ main { padding-bottom: 8px; }
       <article class="card c-peach"><span class="tag">Pantalla remota</span><h3>L’escriptori, a la butxaca</h3><p>Obre l’escriptori de l’ordinador des del mòbil. Amb <strong>Mirar</strong> només veus què fa l’agent; amb <strong>Controlar</strong> hi cliques, arrossegues i escrius. Pessiga amb dos dits per fer zoom. Els agents també hi poden mirar webs i apps, sempre amb permís.</p></article>
       <article class="card c-lemonsoft"><span class="tag">Pissarra</span><h3>Pensar dibuixant</h3><p>Un llenç infinit per a fluxos, mapes mentals i organigrames, amb figures, fletxes i llapis. Si li expliques a en Nio què vols, te’ls dibuixa. Exporta a PNG, SVG o JSON.</p></article>
       <article class="card c-blue"><span class="tag">Agents</span><h3>Git i GitHub</h3><p>Clona un repositori, mira els canvis, fes commit i crea un PR des del mòbil, amb el <code>git</code> i el <code>gh</code> de l’ordinador.</p></article>
-      <article class="card c-lilac"><span class="tag">Connexió</span><h3>Telegram i veu</h3><p>Parla amb el teu bot o amb notes de veu, aprova amb un botó i escolta les respostes. Les claus es queden a l’ordinador.</p></article>
+      <article class="card c-lilac"><span class="tag">Connexió</span><h3>Telegram i veu</h3><p>Parla amb el teu bot o amb notes de veu, aprova amb un botó i escolta les respostes. Dictes gratis amb Whisper, que funciona a l’ordinador: l’àudio no en surt.</p></article>
       <article class="card c-green"><span class="tag">Xat local</span><h3>Ollama i xat local</h3><p>Fes servir models gratuïts a l’ordinador, o un model petit dins del navegador del mòbil, sense connexió.</p></article>
     </div>
   </section>

package/web/sw.js

@@ -1,6 +1,6 @@
 // nio · service worker: obre l'app encara que no hi hagi connexió i mostra els avisos.
-const SHELL = 'nio-shell-v37';
-const FILES = ['/app', '/app/style.css', '/app/app.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
+const SHELL = 'nio-shell-v38';
+const FILES = ['/app', '/app/style.css', '/app/app.js', '/app/demo.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
 
 self.addEventListener('install', (e) => {
   e.waitUntil(caches.open(SHELL).then((c) => c.addAll(FILES)).catch(() => {}));