nio-cat 0.9.11 → 0.9.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.9.11",
+  "version": "0.9.14",
   "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/agents/claude.js

@@ -23,10 +23,9 @@ module.exports = {
     // Que l'agent posi un títol que resumeixi la feina (eina MCP de nio; el hub el desa).
     args.push('--append-system-prompt', 'Treballes dins una sessió de nio. Quan entenguis la tasca, crida l’eina mcp__nio__sessio_titol amb un títol de 3-7 paraules que la resumeixi, en l’idioma de l’usuari; torna-la a cridar només si la feina canvia de tema.');
 
-    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() {} };
-    }
+    // Com a root (un VPS), Claude Code no accepta bypassPermissions: «Via lliure» hi fa servir el mode auto,
+    // que també treballa sol però fa revisar cada acció a un classificador (el mateix que el Claude Code remot).
+    const root = process.getuid?.() === 0;
 
     const env = {};
     const gate = (extra = {}) => {
@@ -38,7 +37,7 @@ module.exports = {
     if (session.mode === 'llegir') {
       args.push('--permission-mode', 'plan');
     } else if (session.mode === 'tot') {
-      args.push('--permission-mode', 'bypassPermissions');
+      args.push('--permission-mode', root ? 'auto' : 'bypassPermissions');
       // Amb el control del navegador o l'escriptori actiu, les ordres que hi actuen sempre es pregunten.
       if (control) gate({ NIO_GATE: 'tot' });
     } else {

package/src/notes.js

@@ -195,9 +195,11 @@ class Notes {
   async liveTranscribe(n, sg) {
     if (!this.notes.includes(n)) return;
     try {
-      const { text } = await voice.transcribe(this.cfg, fs.readFileSync(this.liveFile(n, sg)), sg.mime, n.live.lang);
-      const t = String(text || '').replace(/\s+/g, ' ').trim();
-      sg.text = HALLUCINATION.test(t) ? '' : t; sg.state = 'ok'; sg.error = '';
+      // El final del tros anterior fa de context: Whisper hi enganxa millor les frases i hi escriu igual els noms.
+      const prev = n.live.segs.filter((x) => x.seq < sg.seq && x.text).pop()?.text || '';
+      const { text } = await voice.transcribe(this.cfg, fs.readFileSync(this.liveFile(n, sg)), sg.mime, n.live.lang, { prompt: prev.slice(-200) });
+      const t = unloop(String(text || '').replace(/\s+/g, ' ').trim());
+      sg.text = HALLUCINATION.test(t) || (prev && t === prev) ? '' : t; sg.state = 'ok'; sg.error = '';
     } catch (e) {
       sg.state = 'error'; sg.error = String(e.message || e).slice(0, 300);
     }
@@ -218,8 +220,8 @@ class Notes {
         const pick = await this.pickEngine(L.engine);
         if (!pick) return; // sense model: al final es deixa la transcripció
         const part = { from: ready[0].seq, to: ready[ready.length - 1].seq, text: '', error: '' };
-        if (text.trim().length > 40) {
-          try { part.text = (await this.ask(pick, LIVE_TASKS.part[L.kind], text, false)).text.trim(); }
+        if (words(text) >= MIN_WORDS) {
+          try { part.text = cleanOut((await this.ask(pick, LIVE_TASKS.part[L.kind], text, false)).text); }
           catch (e) { part.error = String(e.message || e).slice(0, 200); }
         }
         if (!this.notes.includes(n)) return;
@@ -260,6 +262,11 @@ class Notes {
         await this.liveParts(n, true);
         const transcript = L.segs.map((x) => x.text).filter(Boolean).join(' ').trim();
         if (!transcript) throw new Error('No s’ha transcrit res: no hi ha res a resumir.');
+        // Amb quatre paraules, el model no té res a resumir i acaba resumint les seves instruccions.
+        if (words(transcript) < MIN_WORDS) {
+          if (!n.text.trim()) n.text = transcript;
+          throw new Error('Hi ha massa poca transcripció per fer-ne un resum: l’he deixada a la nota. Comprova que el micròfon capti bé la veu.');
+        }
         const pick = await this.pickEngine(L.engine);
         if (!pick) {
           if (!n.text.trim()) n.text = transcript;
@@ -274,11 +281,19 @@ class Notes {
           for (const b of blocks) { const g = groups[groups.length - 1]; if (g && g.join('\n\n').length + b.length < max * 0.8) g.push(b); else groups.push([b]); }
           if (groups.length === blocks.length) groups.splice(0, groups.length, ...Array.from({ length: Math.ceil(blocks.length / 2) }, (_, i) => blocks.slice(i * 2, i * 2 + 2)));
           blocks = [];
-          for (const g of groups) blocks.push((await this.ask(pick, LIVE_TASKS.condense, g.join('\n\n'), false)).text.trim());
+          for (const g of groups) blocks.push(cleanOut((await this.ask(pick, LIVE_TASKS.condense, g.join('\n\n'), false)).text) || g.join('\n\n').slice(0, max / 2));
+        }
+        let r = await this.ask(pick, LIVE_TASKS.final[L.kind], blocks.join('\n\n').slice(0, max), true);
+        if (echoes(r.text) || echoes(r.title)) r = await this.ask(pick, LIVE_TASKS.final[L.kind], blocks.join('\n\n').slice(0, max), true); // un segon intent
+        if (echoes(r.text) || echoes(r.title)) {
+          if (!n.text.trim()) n.text = transcript;
+          throw new Error('El model ha resumit les instruccions en lloc de la classe. He deixat la transcripció a la nota: torna-ho a provar amb un model més gran.');
         }
-        const r = await this.ask(pick, LIVE_TASKS.final[L.kind], blocks.join('\n\n').slice(0, max), true);
         const text = str(r.text, 200000).trim();
-        if (!text) throw new Error('El model no ha tornat cap resum. Torna-ho a provar o tria’n un altre.');
+        if (!text) {
+          if (!n.text.trim()) n.text = transcript;
+          throw new Error('El model diu que la transcripció no té prou contingut per resumir-la. L’he deixada a la nota.');
+        }
         if (!this.notes.includes(n)) return;
         const title = str(r.title, 120).trim();
         if (title && n.title === L.autoTitle) { n.title = `${title}`; L.autoTitle = n.title; }
@@ -300,7 +315,7 @@ class Notes {
 
   async ask(pick, task, body, json) {
     const local = pick.id.startsWith('ollama:'), wrap = !json && local;
-    const user = `--- TRANSCRIPCIÓ ---\n${body}\n--- FI ---\n\n${task}${wrap ? '\n\nTorna només JSON amb aquest format: {"text":"…"}. El text pot tenir salts de línia.' : ''}`;
+    const user = `--- TRANSCRIPCIÓ ---\n${body}\n--- FI ---\n\n${task}\n\nFes-ho només amb el que es diu entre «--- TRANSCRIPCIÓ ---» i «--- FI ---». No parlis d’aquestes instruccions ni de tu mateix. Si la transcripció no té prou contingut, torna el text buit.${wrap ? '\n\nTorna només JSON amb aquest format: {"text":"…"}. El text pot tenir salts de línia.' : ''}`;
     const raw = await runModel(this.cfg, pick.id, LIVE_SYSTEM, user, json || wrap, { numCtx: local ? 8192 : 0 });
     return json ? parseJson(raw) : wrap ? { text: String(parseJson(raw).text ?? '') } : { text: raw };
   }
@@ -419,6 +434,18 @@ const LIVE_LANGS = ['ca', 'es', 'en'];
 const PART_CHARS = 3500; // ≈ 4-5 minuts de veu per tros d'apunts
 // Whisper s'inventa aquestes frases quan sent silenci o soroll.
 const HALLUCINATION = /^[\s.…]*$|^(gràcies( per (veure|mirar|escoltar)[^.!]*)?|subtítols[^.!]*|amara\.org[^.!]*|gracias( por (ver|mirar)[^.!]*)?|subtítulos[^.!]*|thank you( for watching)?|thanks for watching)[.!…\s]*$/i;
+const MIN_WORDS = 25; // per sota, no hi ha res a apuntar ni a resumir
+const words = (t) => (String(t || '').match(/[\p{L}\p{N}]+/gu) || []).length;
+// Whisper de vegades es queda encallat repetint la mateixa frase: se'n deixa una.
+function unloop(t) {
+  let out = t;
+  for (let n = 1; n <= 12; n++) out = out.replace(new RegExp(`((?:\\S+\\s+){${n - 1}}\\S+)(?:\\s+\\1(?![\\p{L}\\p{N}])){3,}`, 'gu'), '$1');
+  return out;
+}
+// La resposta parla de les instruccions (el «system prompt») en lloc de la transcripció.
+const ECHO = /assistent de notes|transcripci[óo] autom[àa]tica|no t[’']inventis|no facis servir cap eina|---\s*(TRANSCRIPCI[ÓO]|FI)\s*---|torna nom[ée]s json|en l[’']idioma de la transcripci[óo]|les meves instruccions|system prompt/i;
+const echoes = (t) => ECHO.test(String(t || ''));
+const cleanOut = (t) => { const v = String(t || '').trim(); return echoes(v) ? '' : v; };
 const LIVE_SYSTEM = 'Ets l’assistent de notes de nio. Treballes amb la transcripció automàtica d’una classe o d’una reunió: pot tenir paraules mal transcrites, que pots corregir quan el context ho deixa clar. No t’inventis res que no s’hi digui. Respon en l’idioma de la transcripció (si dubtes, en català). No facis servir cap eina.';
 const LIVE_TASKS = {
   part: {

package/src/telegram.js

@@ -86,7 +86,13 @@ class Telegram {
           signal: this.ctrl.signal,
         });
         const j = await r.json();
-        if (!j.ok) throw new Error(j.description || r.status);
+        if (!j.ok) {
+          // 409: un altre ordinador (o programa) llegeix el mateix bot. Telegram només en deixa un per bot.
+          if (j.error_code === 409 && !this.conflict) this.audit.add({ type: 'telegram', what: 'Un altre ordinador fa servir aquest mateix bot: cada ordinador en necessita un de propi' });
+          if (j.error_code === 409) this.conflict = Date.now();
+          throw new Error(j.description || r.status);
+        }
+        this.conflict = 0;
         for (const u of j.result) {
           this.offset = u.update_id + 1;
           await this.onUpdate(u).catch((e) => this.audit.add({ type: 'telegram', what: `Error: ${e.message}` }));
@@ -247,6 +253,7 @@ class Telegram {
       configured: !!t.token,
       bot: this.me ? { username: this.me.username, name: this.me.first_name } : null,
       running: this.running,
+      conflict: !!this.conflict && Date.now() - this.conflict < 5 * 60e3,
       allowed: t.allowed || [],
       pending: (t.pending || []).filter((p) => !this.allowed(p.id)),
       agent: t.agent || null,
@@ -281,6 +288,16 @@ class Telegram {
               t.token = prev;
               throw httpErr(400, `Telegram no accepta aquest testimoni: ${e.message}`);
             }
+            // Un bot només el pot llegir un ordinador alhora: si ja el fa servir un altre, cal un bot nou per a aquest.
+            // (Sense «offset», aquesta consulta no dona per llegit cap missatge.)
+            if (tok !== prev) {
+              const busy = await this.call('getUpdates', { timeout: 0, limit: 1 }).then(() => false, (e) => /conflict|409/i.test(e.message));
+              if (busy) {
+                t.token = prev;
+                this.me = null;
+                throw httpErr(409, 'Aquest bot ja el fa servir un altre ordinador. Telegram només deixa llegir un bot des d’un lloc: crea’n un altre a @BotFather (/newbot) per a aquest ordinador.');
+              }
+            }
             this.stop();
             this.offset = undefined;
           }

package/src/voice.js

@@ -103,13 +103,13 @@ function status(cfg) {
   };
 }
 
-async function transcribe(cfg, audio, mime, lang) {
+async function transcribe(cfg, audio, mime, lang, opts = {}) {
   const p = pick(cfg, 'stt');
   lang = lang || cfgOf(cfg).lang || 'ca';
   const l = lang === 'auto' ? '' : lang; // «auto»: que el proveïdor ho endevini
   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, lang), provider: p };
+  if (p === 'whisper') return { text: await whisper.transcribe(cfg, audio, mime, lang, opts), provider: p };
   return { text: (await PROVIDERS[p].stt(cfg.voice.keys[p], audio, mime, l)).trim(), provider: p };
 }
 

package/src/whisper.js

@@ -120,7 +120,7 @@ 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') {
+async function transcribe(cfg, audio, mime, lang = 'ca', { prompt = '' } = {}) {
   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-'));
@@ -128,7 +128,7 @@ async function transcribe(cfg, audio, mime, lang = 'ca') {
     const input = path.join(tmp, `audio.${ext(mime)}`);
     fs.writeFileSync(input, audio);
     if (e === 'python') {
-      await run(pyBin(), [input, '--model', 'turbo', ...(lang === 'auto' ? [] : ['--language', lang]), '--output_format', 'txt', '--output_dir', tmp, '--fp16', 'False', '--verbose', 'False']);
+      await run(pyBin(), [input, '--model', 'turbo', ...(lang === 'auto' ? [] : ['--language', lang]), '--output_format', 'txt', '--output_dir', tmp, '--fp16', 'False', '--verbose', 'False', ...(prompt ? ['--initial_prompt', prompt] : [])]);
       return fs.readFileSync(path.join(tmp, 'audio.txt'), 'utf8').trim();
     }
     if (!fs.existsSync(modelPath(cfg))) {
@@ -138,7 +138,7 @@ async function transcribe(cfg, audio, mime, lang = 'ca') {
     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']);
+    const out = await run(cppBin(), ['-m', modelPath(cfg), '-f', wav, '-l', lang, '-t', threads, '-nt', '-np', ...(prompt ? ['--prompt', prompt] : [])]);
     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 }, () => {});

package/web/app/android.js

@@ -0,0 +1,37 @@
+// nio dins l'app d'Android: l'únic lloc on la web s'adapta a l'app.
+// La resta del codi fa servir les APIs estàndard del navegador i no sap que és dins una app; aquí es tradueixen
+// a la part nativa (window.NioAndroid, a android/src/cat/nio/app/MainActivity.java) les que el WebView no té.
+// Fora de l'app, aquest fitxer no fa res. Per afegir-hi una cosa nova: un mètode a Bridge (Java) i el pont aquí.
+(() => {
+  const NA = window.NioAndroid;
+  if (!NA) return;
+  document.documentElement.classList.add('android');
+
+  // Descàrregues (<a download href="blob:…">: exportar la pissarra, desar una captura…) → carpeta Baixades del mòbil.
+  const base64 = (blob) => new Promise((ok, ko) => { const r = new FileReader(); r.onload = () => ok(String(r.result).split(',')[1] || ''); r.onerror = ko; r.readAsDataURL(blob); });
+  async function save(href, name) {
+    try { const blob = await (await fetch(href)).blob(); NA.saveFile(name || 'nio', blob.type || 'application/octet-stream', await base64(blob)); }
+    catch { NA.saveFile('', '', ''); } // l'app avisa que no s'ha pogut desar
+  }
+  const isBlob = (a) => a.hasAttribute('download') && /^(blob|data):/.test(a.href);
+  if (NA.saveFile) { // les versions de l'app anteriors a la 1.0.2 no ho tenen
+    const click = HTMLAnchorElement.prototype.click;
+    HTMLAnchorElement.prototype.click = function () { if (isBlob(this)) return void save(this.href, this.getAttribute('download')); return click.call(this); };
+    document.addEventListener('click', (e) => { const a = e.target.closest?.('a[download]'); if (a && isBlob(a)) { e.preventDefault(); save(a.href, a.getAttribute('download')); } }, true);
+  }
+
+  // Copiar: el porta-retalls del WebView no sempre deixa escriure; el d'Android sí.
+  if (!NA.copy) { /* app antiga */ } else if (navigator.clipboard) navigator.clipboard.writeText = (t) => Promise.resolve(NA.copy(String(t)));
+  else Object.defineProperty(navigator, 'clipboard', { value: { writeText: (t) => Promise.resolve(NA.copy(String(t))) }, configurable: true });
+
+  // Pantalla encesa: el WebView no sempre té navigator.wakeLock; l'app manté la pantalla encesa mentre hi ha algun bloqueig.
+  if (NA.keepAwake) {
+    const held = new Set();
+    const lock = { request: async () => {
+      const s = { released: false, type: 'screen', onrelease: null, addEventListener() {}, removeEventListener() {},
+        async release() { if (s.released) return; s.released = true; held.delete(s); if (!held.size) NA.keepAwake(false); s.onrelease?.(); } };
+      held.add(s); NA.keepAwake(true); return s;
+    } };
+    try { Object.defineProperty(navigator, 'wakeLock', { value: lock, configurable: true }); } catch { /* es queda el del WebView */ }
+  }
+})();

package/web/app/app.js

@@ -224,7 +224,7 @@ async function pollLoop(ctrl) {
       const [list, aps] = await Promise.all([api('/api/sessions'), api('/api/approvals')]);
       if (ctrl.signal.aborted) return;
       state.connected = true; state.lastError = null; alive = Date.now();
-      if (first) { first = false; state.synced = true; const r = state.route; state.sessions = new Map(list.map((x) => [x.id, x])); state.approvals = new Map(aps.map((a) => [a.id, a])); if (r.name === 'session') openSession(r.id); else render(); }
+      if (first) { first = false; state.synced = true; const r = state.route; state.sessions = new Map(list.map((x) => [x.id, x])); state.approvals = new Map(aps.map((a) => [a.id, a])); if (r.name === 'session') openSession(r.id); else render(); saveSnap(); }
       else {
         const r = state.route, seen = new Set();
         for (const x of list) {
@@ -290,14 +290,53 @@ async function relocate(i) {
   } catch { return false; }
 }
 
+/* ---------- Instantània de cada ordinador
+   En canviar d'ordinador es pinta a l'instant el que ja en sabíem (sessions, aprovacions, ús i info) i es posa al dia
+   quan arriba l'«hello». Mentre la llista d'ordinadors és oberta, els altres es refresquen en segon pla. */
+const SNAP_KEY = 'nio.snap';
+const snaps = new Map(Object.entries(LS.get(SNAP_KEY, {}) || {}));
+let snapT = 0;
+const persistSnaps = () => LS.set(SNAP_KEY, Object.fromEntries([...snaps].filter(([k]) => store.machines.some((m) => mkey(m) === k))));
+function saveSnap() {
+  const m = machine(); if (!m || isDemo(m) || !state.synced) return;
+  clearTimeout(snapT);
+  snapT = setTimeout(() => {
+    if (mkey(machine()) !== mkey(m) || !state.synced) return;
+    snaps.set(mkey(m), { t: Date.now(), info: state.info, usage: state.usage || null, approvals: [...state.approvals.values()], sessions: [...state.sessions.values()].sort((a, b) => b.updated - a.updated).slice(0, 80) });
+    persistSnaps();
+  }, 500);
+}
+function restoreSnap(m) {
+  const s = snaps.get(mkey(m)); if (!s) return false;
+  state.info = s.info || null; state.usage = s.usage || null;
+  state.sessions = new Map((s.sessions || []).map((x) => [x.id, x])); state.approvals = new Map((s.approvals || []).map((a) => [a.id, a]));
+  return true;
+}
+const snapBusy = new Set();
+async function refreshSnaps() {
+  await Promise.all(store.machines.map(async (m) => {
+    const k = mkey(m);
+    if (m === machine() || isDemo(m) || snapBusy.has(k) || Date.now() - (snaps.get(k)?.t || 0) < 15000) return;
+    snapBusy.add(k);
+    try {
+      const get = (p) => fetch(`${m.url}${p}`, { headers: { Authorization: `Bearer ${m.token}` }, cache: 'no-store', signal: AbortSignal.timeout(6000) }).then((r) => { if (!r.ok) throw new Error(r.status); return r.json(); });
+      const [info, sessions, approvals, usage] = await Promise.all([get('/api/info'), get('/api/sessions'), get('/api/approvals'), get('/api/usage').catch(() => null)]);
+      if (m === machine()) return;
+      snaps.set(k, { t: Date.now(), info, usage, approvals, sessions: sessions.sort((a, b) => b.updated - a.updated).slice(0, 80) }); persistSnaps();
+    } catch { /* no hi arribo: es queda la d'abans */ } finally { snapBusy.delete(k); }
+  }));
+}
+
 async function connect() {
   streamCtrl?.abort(); state.synced = false;
   const m = machine();
   if (!m) { state.connected = false; return render(); }
   const ctrl = new AbortController(); streamCtrl = ctrl;
   try {
-    state.info = await api('/api/info');
-    const res = await fetch(`${m.url}/api/stream?d=${encodeURIComponent(deviceId())}&k=${isPhone() ? 'phone' : 'desktop'}`, { headers: { Authorization: `Bearer ${m.token}` }, signal: ctrl.signal, cache: 'no-store' });
+    // La info i el flux en paral·lel: el canvi d'ordinador no espera dues anades i tornades seguides.
+    const [info, res] = await Promise.all([api('/api/info'), fetch(`${m.url}/api/stream?d=${encodeURIComponent(deviceId())}&k=${isPhone() ? 'phone' : 'desktop'}`, { headers: { Authorization: `Bearer ${m.token}` }, signal: ctrl.signal, cache: 'no-store' })]);
+    if (ctrl.signal.aborted) return;
+    state.info = info;
     if (res.status === 401) throw Object.assign(new Error('La clau no és vàlida. Torna a connectar amb el codi QR.'), { fatal: true });
     if (!res.ok || !res.body) throw new Error(`Error ${res.status}`);
     state.connected = true; state.lastError = null; retry = 0; alive = Date.now();
@@ -372,6 +411,7 @@ function renameMachine(host, id) {
 function handle(msg) {
   const r = state.route;
   callCtl?.onEvent(msg);
+  if (/^(session|removed|approval|usage)$/.test(msg.type)) saveSnap();
   switch (msg.type) {
     case 'device':
       if (!isPhone() && msg.device !== deviceId()) { if ($('#qrBox')) closeSheet(); toast('Mòbil connectat correctament', 2000); }
@@ -382,6 +422,7 @@ function handle(msg) {
       state.approvals = new Map(msg.approvals.map((a) => [a.id, a])); state.usage = msg.usage || state.usage; notesCtl?.reload();
       state.loaded.clear(); state.events.clear();
       if (r.name === 'session') openSession(r.id); else render();
+      saveSnap(); if (store.machines.length > 1) setTimeout(refreshSnaps, 4000);
       break;
     case 'session':
       state.sessions.set(msg.session.id, msg.session);
@@ -493,8 +534,10 @@ async function pairAndAdd(pair, { msg = 'Ordinador connectat', after } = {}) {
 }
 // Passa a un altre ordinador de la llista i es queda a la mateixa secció.
 function switchMachine(i) {
-  closeSheet(); store.active = i; streamCtrl?.abort(); tgState = undefined; nodeVoice = null;
-  state.ollama = null; state.sessions.clear(); state.approvals.clear(); state.events.clear(); state.loaded.clear(); state.connected = false; state.info = null; state.lastError = null;
+  closeSheet(); store.active = i; streamCtrl?.abort(); tgState = undefined; tgOthers = []; nodeVoice = null;
+  state.ollama = null; state.sessions.clear(); state.approvals.clear(); state.events.clear(); state.loaded.clear(); state.connected = false; state.info = null; state.usage = null; state.lastError = null;
+  restoreSnap(machine()); // el que ja en sabíem, a l'instant; l'«hello» ho posa al dia
+  if (state.route.name === 'notes' && !notesCtl?.open) lastName = null; // les notes de l'altre ordinador es tornen a muntar (a l'instant si ja les coneixíem)
   connect();
   if (state.route.name === 'session') go('#/sessions'); else render();
 }
@@ -576,14 +619,14 @@ function renderChrome() {
   const s = r.name === 'session' ? state.sessions.get(r.id) : null;
   $('#here').textContent = s ? s.title || 'Sessió nova' : VIEWS[r.name]?.label || '';
   $('#mRight').innerHTML = r.name === 'session'
-    ? `<button class="icon-btn" data-act="session-more" aria-label="Opcions de la sessió">${svg(ICON.more)}</button>`
+    ? `${usageChip(s?.agent, true)}<button class="icon-btn" data-act="session-more" aria-label="Opcions de la sessió">${svg(ICON.more)}</button>`
     : `<a class="icon-btn" href="#/aprovacions" aria-label="${n ? `Aprovacions, ${n} pendents` : 'Aprovacions'}">${svg(ICON.bell)}${n ? `<span class="badge">${n}</span>` : ''}</a>`;
   document.title = n ? `(${n}) nio` : `nio // ${s ? s.title || 'Sessió' : VIEWS[r.name]?.label || 'Panell'}`;
   if ('setAppBadge' in navigator) (n ? navigator.setAppBadge(n) : navigator.clearAppBadge()).catch?.(() => {});
 }
 let notesCtl = null, callCtl = null;
 const getCall = () => (callCtl ||= createCall({ api, esc, toast, bot, machine, isDemo, noMachine, voiceSheet, agentName: (a) => AGENT_NAMES[a] || a, sessions: () => [...state.sessions.values()], approvals: () => [...state.approvals.keys()], refresh: () => {} }));
-const getNotes = () => (notesCtl ||= createNotes({ api, nodeAudio, toast, esc, machine, voiceOn, voiceSheet, isDemo, isPhone, openSheet, closeSheet, mobileQrSheet }));
+const getNotes = () => (notesCtl ||= createNotes({ api, nodeAudio, toast, esc, machine, voiceOn, voiceSheet, isDemo, isPhone, openSheet, closeSheet, mobileQrSheet, nodeVersion: () => state.info?.version || '', nodeAtLeast: (v) => !state.info || verAtLeast(state.info.version, v), installCmd: INSTALL_CMD }));
 function render() {
   const r = state.route, view = $('#view'), board = r.name === 'pissarra';
   if (r.name !== 'sessions') manage = null;
@@ -738,10 +781,12 @@ function noMachine(text) {
 function viewSettings() {
   const head = '<div class="top"><div><h1>Ajustos</h1><p>Avisos al mòbil, veu i Telegram. Es configuren per a cada ordinador.</p></div></div>';
   if (!machine()) return `${head}<div class="stack-lg" style="max-width:640px">${settingsOff()}</div>`;
-  const avisos = machine() ? `<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>' : ''}${pushOn ? '<p class="small"><span class="chip ok">' + svg(ICON.check) + 'Avisos activats en aquest dispositiu</span></p>' : ''}<div class="row">${pushOn ? '<button class="btn ink grow" data-act="push-test" type="button">Envia’n un de prova</button><button class="btn" data-act="push-off" type="button">Desactiva</button>' : '<button class="btn ink grow" data-act="push" type="button">Activa els avisos</button>'}</div></div></section>` : '';
+  const avisos = window.NioAndroid && machine() ? '<section class="panel"><header><h2>Avisos al mòbil</h2></header><div class="body stack"><p class="small">Dins l’app d’Android, els avisos encara no hi són. Per rebre’ls, connecta Telegram aquí sota o activa’ls obrint nio.cat al navegador.</p></div></section>' : machine() ? `<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>' : ''}${pushOn ? '<p class="small"><span class="chip ok">' + svg(ICON.check) + 'Avisos activats en aquest dispositiu</span></p>' : ''}<div class="row">${pushOn ? '<button class="btn ink grow" data-act="push-test" type="button">Envia’n un de prova</button><button class="btn" data-act="push-off" type="button">Desactiva</button>' : '<button class="btn ink grow" data-act="push" type="button">Activa els avisos</button>'}</div></div></section>` : '';
   if (machine() && pushOn === null) refreshPush();
   if (machine() && tgState === undefined) loadTelegram();
-  return `${head}<div class="stack-lg cols">${avisos}${voicePanel()}<div id="tgPanel">${telegramPanel()}</div></div>`;
+  // App d'Android: només es proposa des del navegador d'un mòbil Android (dins l'app ja no cal).
+  const android = /Android/i.test(navigator.userAgent) && !window.NioAndroid ? `<section class="panel"><header><h2>App d’Android</h2></header><div class="body stack"><p class="small">nio a pantalla completa i, sobretot, <b>classes i reunions que es continuen gravant amb la pantalla bloquejada</b>. En instal·lar-la, el navegador et demanarà permís per instal·lar apps d’aquesta font. Dins l’app, torna a connectar l’ordinador amb el QR.</p><div class="row"><a class="btn ink grow" href="/nio-android.apk" download="nio.apk">Baixa l’app (APK)</a></div></div></section>` : '';
+  return `${head}<div class="stack-lg cols">${android}${avisos}${voicePanel()}<div id="tgPanel">${telegramPanel()}</div></div>`;
 }
 // Ajustos sense ordinador: un sol avís a dalt i les seccions de mostra, desactivades.
 function settingsOff() {
@@ -806,15 +851,27 @@ async function sshAdd(target, onStep, via) {
   if (!last || last.error) throw new Error(last?.error || 'S’ha tallat la connexió');
   return last;
 }
+// Lector de QR: BarcodeDetector si el navegador en té; si no (Firefox, l'app d'Android), jsQR, que llegeix la imatge en JavaScript.
+let jsQRload = null;
+const loadJsQR = () => (jsQRload ||= new Promise((ok, ko) => { const s = document.createElement('script'); s.src = 'https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js'; s.onload = () => (window.jsQR ? ok(window.jsQR) : ko(new Error('jsQR'))); s.onerror = () => { jsQRload = null; ko(new Error('No he pogut carregar el lector de QR')); }; document.head.appendChild(s); }));
 async function startScan(video, onText) {
-  const det = new BarcodeDetector({ formats: ['qr_code'] });
+  let detect;
+  if ('BarcodeDetector' in window) { const det = new BarcodeDetector({ formats: ['qr_code'] }); detect = async () => (await det.detect(video))[0]?.rawValue; }
+  else {
+    const jsQR = await loadJsQR(), cv = document.createElement('canvas'), g = cv.getContext('2d', { willReadFrequently: true });
+    detect = async () => {
+      const w = Math.min(640, video.videoWidth), h = Math.round(video.videoHeight * (w / video.videoWidth)); if (!w || !h) return null;
+      cv.width = w; cv.height = h; g.drawImage(video, 0, 0, w, h);
+      return jsQR(g.getImageData(0, 0, w, h).data, w, h, { inversionAttempts: 'dontInvert' })?.data;
+    };
+  }
   const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
   video.srcObject = stream; await video.play(); let alive = true;
-  (async () => { while (alive) { try { const r = await det.detect(video); if (r[0]) onText(r[0].rawValue); } catch { /* quadre sense QR */ } await sleep(250); } })();
+  (async () => { while (alive) { try { const t = await detect(); if (t) onText(t); } catch { /* quadre sense QR */ } await sleep(250); } })();
   return { stop() { alive = false; stream.getTracks().forEach((t) => t.stop()); } };
 }
 function addComputerSheet(tab, opts = {}) {
-  const phone = isPhone(), canScan = 'BarcodeDetector' in window && !!navigator.mediaDevices?.getUserMedia;
+  const phone = isPhone(), canScan = !!navigator.mediaDevices?.getUserMedia;
   const TABS = phone ? [['code', 'Codi o QR', ICON.scan], ['vps', 'Servidor', ICON.server]] : [['local', 'Aquest ordinador', ICON.machine], ['vps', 'Servidor', ICON.server], ['code', 'Tinc un codi', ICON.scan]];
   let cur = TABS.some((t) => t[0] === tab) ? tab : TABS[0][0], poll = 0, scan = null, shown = '', hosts = [];
   const intro = (t, d) => `<div class="add-intro"><h3>${t}</h3>${d ? `<p>${d}</p>` : ''}</div>`;
@@ -891,6 +948,7 @@ function addComputerSheet(tab, opts = {}) {
 }
 function machinesSheet() {
   const ms = store.machines;
+  refreshSnaps();
   openSheet(`<h2>Ordinadors</h2>${ms.length ? `<div class="stack">${ms.map((x, i) => `<button class="card row" type="button" data-machine="${i}" style="flex-wrap:nowrap"><span class="c-ico">${svg(machineIcon(x))}</span><span class="grow"><b>${esc(x.name)}</b><div class="muted small">${esc(machineSub(x))}</div></span>${i === store.active ? `<span class="chip ok"><i class="dot ${state.connected ? 'on' : ''}"></i>Actiu</span>` : ''}</button>`).join('')}</div>` : '<p class="muted small">Encara no hi ha cap ordinador.</p>'}
     <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)); });
 }
@@ -1313,12 +1371,14 @@ function renderSession() {
 function sessionMood(s) { return !s ? 'idle' : s.state === 'running' ? 'work' : s.state === 'waiting' || s.pending ? 'peek' : s.state === 'error' ? 'sleep' : 'idle'; }
 // Ús de la subscripció de l'agent (5 h i setmana), com a esfis. Només si l'agent l'ha informat.
 const hhmm = (t) => new Date(t * 1000).toLocaleString('ca', { weekday: t * 1000 - Date.now() > 864e5 ? 'short' : undefined, hour: '2-digit', minute: '2-digit' });
-function usageChip(agent) {
+// mini: la versió de la barra de dalt del mòbil (l'anell i la finestra més plena; tocant-la, el detall).
+function usageChip(agent, mini) {
   const u = state.usage?.[agent]; if (!u?.windows?.length) return '';
   const tip = u.windows.map((w) => `${w.label}: ${Math.round(w.used * 100)} %${w.resetsAt ? ` · es reinicia ${hhmm(w.resetsAt)}` : ''}`).join('\n');
   // Etiquetes curtes: «5h», «7d». La icona és un anell que s'omple amb la finestra més plena.
   const short = (l) => (l === 'setmana' ? '7d' : l.replace(/\s+/g, '')), top = Math.max(...u.windows.map((w) => w.used)), pct = Math.round(top * 100);
   const ring = `<svg class="ico ring" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5" class="rt"/><circle cx="12" cy="12" r="8.5" pathLength="100" stroke-dasharray="${Math.max(pct, 2)} 100" transform="rotate(-90 12 12)" class="rv"/></svg>`;
+  if (mini) { const w = u.windows.find((x) => x.used === top); return `<button class="chip mono usage mini" type="button" data-act="usage" data-hi="${top >= 0.8 ? 1 : 0}" aria-label="${esc(`Ús de la subscripció. ${tip.replace(/\n/g, '. ')}`)}">${ring}<span class="uw" data-hi="${top >= 0.8 ? 1 : 0}">${esc(short(w.label))} ${pct}%</span></button>`; }
   return `<span class="chip mono usage" data-hi="${top >= 0.8 ? 1 : 0}" title="${esc(`Ús de la subscripció\n${tip}`)}">${ring}${u.windows.map((w) => `<span class="uw" data-hi="${w.used >= 0.8 ? 1 : 0}">${esc(short(w.label))} (${Math.round(w.used * 100)}%)</span>`).join('')}</span>`;
 }
 function renderSessionHead() {
@@ -1663,8 +1723,7 @@ $('#sheet').addEventListener('close', () => setTimeout(focusMain, 0));
 
 // Al mòbil, els fulls es tanquen lliscant cap avall, com els de l'iPhone: el full segueix el dit
 // i, si baixa prou o es llença, marxa; si no, torna a pujar. Si el contingut té scroll, primer s'ha d'arribar a dalt.
-(() => {
-  const d = $('#sheet');
+function dragToClose(d, close) {
   let g = null;
   const scrollerOf = (t) => { for (let el = t; el && el !== d.parentElement; el = el.parentElement) { if (el.scrollHeight > el.clientHeight + 1 && /auto|scroll/.test(getComputedStyle(el).overflowY)) return el; if (el === d) break; } return null; };
   const reset = () => { d.style.transition = ''; d.style.transform = ''; };
@@ -1692,21 +1751,27 @@ $('#sheet').addEventListener('close', () => setTimeout(focusMain, 0));
     const x = g; g = null; if (!x || x.lock !== 'y') return;
     const [t0, y0] = x.pts[0], [t1, y1] = x.pts[x.pts.length - 1], v = (y1 - y0) / Math.max(1, t1 - t0);
     if (e.type === 'touchend' && (x.dy > Math.min(160, d.offsetHeight * 0.28) || (v > 0.5 && x.dy > 20))) {
-      if (reduce) { reset(); closeSheet(); return; }
+      if (reduce) { reset(); close(); return; }
       d.style.transition = 'transform .2s cubic-bezier(.4,0,1,1)'; d.style.transform = `translateY(${d.offsetHeight + 20}px)`;
-      setTimeout(() => { closeSheet(); requestAnimationFrame(reset); }, 200);
+      setTimeout(() => { close(); requestAnimationFrame(reset); }, 200);
     } else { d.style.transition = 'transform .3s cubic-bezier(.22,1,.36,1)'; d.style.transform = ''; setTimeout(reset, 300); }
   };
   d.addEventListener('touchend', end, { passive: true });
   d.addEventListener('touchcancel', end, { passive: true });
   d.addEventListener('close', reset);
-})();
+}
+dragToClose($('#sheet'), () => closeSheet());
+dragToClose($('#palette'), () => $('#palette').close());
 
-// 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';
+// Claude Code no deixa «Via lliure» (bypassPermissions) quan nio corre com a root (típic en un VPS).
+// Des de nio-cat 0.9.12, com a root fa servir el mode auto de Claude Code; només les versions anteriors el bloquegen.
+const verAtLeast = (v, min) => { const a = String(v || '').split('.').map(Number), b = min.split('.').map(Number); for (let i = 0; i < 3; i++) { if ((a[i] || 0) !== b[i]) return (a[i] || 0) > b[i]; } return true; };
+const asRoot = (agentId) => agentId === 'claude' && state.info?.user === 'root';
+const modeBlocked = (agentId, mode) => mode === 'tot' && asRoot(agentId) && !verAtLeast(state.info?.version, '0.9.12');
 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 (modeBlocked(agentId, mode)) return 'No disponible en aquesta versió de nio quan s’executa com a root. Actualitza nio (curl -fsSL https://www.nio.cat/install.sh | sh) o fes servir «Demana permís».';
+  if (mode === 'tot' && asRoot(agentId)) return 'Treballa sense preguntar amb el mode auto de Claude Code (com a root no n’hi ha d’altre): un classificador revisa cada acció i atura les arriscades.';
   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í.';
@@ -2532,9 +2597,16 @@ document.addEventListener('click', async (e) => {
 
 /* ---------------------------------------------------------------- Telegram (bot propi, configurat a l'ordinador) */
 let tgState;
+let tgOthers = []; // bots dels altres ordinadors: [{ name, bot, allowed }]
 async function loadTelegram() {
   try { tgState = await api('/api/telegram'); } catch { tgState = null; }
   const box = $('#tgPanel'); if (box) box.innerHTML = telegramPanel();
+  const mine = machine(), others = store.machines.filter((m) => m !== mine && mkey(m) !== mkey(mine) && !isDemo(m));
+  const got = await Promise.all(others.map((m) => fetch(`${m.url}/api/telegram`, { headers: { Authorization: `Bearer ${m.token}` }, cache: 'no-store', signal: AbortSignal.timeout(5000) })
+    .then((r) => (r.ok ? r.json() : null)).then((t) => (t?.configured ? { name: m.name, bot: t.bot?.username || '', allowed: t.allowed || [] } : null)).catch(() => null)));
+  if (machine() !== mine && mkey(machine()) !== mkey(mine)) return;
+  tgOthers = got.filter(Boolean);
+  if (tgOthers.length && $('#tgPanel')) $('#tgPanel').innerHTML = telegramPanel();
 }
 function telegramPanel() {
   if (!machine()) return '';
@@ -2543,9 +2615,11 @@ function telegramPanel() {
   if (t === null) return '<section class="panel"><header><h2>Telegram</h2></header><div class="body"><p class="muted small">Aquest ordinador encara no té Telegram (cal nio 0.7 o més nou).</p></div></section>';
   if (!t.configured) return `<section class="panel"><header><h2>Telegram</h2></header><div class="body stack">
     <p class="small">Parla amb els agents d’aquest ordinador des de Telegram: instruccions, notes de veu, avisos i aprovacions amb botons. El bot és teu i el testimoni es queda a l’ordinador.</p>
-    <ol class="muted small" style="padding-left:1.2em"><li>A Telegram, obre <b>@BotFather</b> i envia <span class="mono">/newbot</span>.</li><li>Copia el testimoni que et dona i enganxa’l aquí.</li><li>Escriu qualsevol cosa al teu bot i torna aquí per autoritzar el teu xat.</li></ol>
+    ${tgOthers.length ? `<p class="small tg-note">Cada ordinador necessita <b>el seu bot</b>: Telegram només deixa llegir un bot des d’un lloc. ${tgOthers.map((o) => `<b>${esc(o.name)}</b> ja fa servir ${o.bot ? '@' + esc(o.bot) : 'un bot'}`).join(', ')}; crea’n un altre per a aquest${tgOthers.some((o) => o.allowed.length) ? ' i els teus xats hi quedaran autoritzats sols' : ''}.</p>` : ''}
+    <ol class="muted small" style="padding-left:1.2em"><li>A Telegram, obre <b>@BotFather</b> i envia <span class="mono">/newbot</span>${tgOthers.length ? ' (un nom diferent, p. ex. amb el nom de l’ordinador)' : ''}.</li><li>Copia el testimoni que et dona i enganxa’l aquí.</li><li>Escriu qualsevol cosa al teu bot i torna aquí per autoritzar el teu xat.</li></ol>
     <form class="row" id="tgForm" style="flex-wrap:nowrap"><input type="password" id="tgToken" placeholder="123456:ABC…" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Testimoni del bot"><button class="btn ink" type="submit">Connecta</button></form></div></section>`;
   return `<section class="panel"><header><h2>Telegram</h2><span class="chip ok"><i class="dot on"></i>${esc(t.bot ? '@' + t.bot.username : 'Connectat')}</span></header><div class="body stack">
+    ${t.conflict ? '<p class="small form-error">Un altre ordinador llegeix aquest mateix bot i es reparteixen els missatges. Cada ordinador necessita el seu: desconnecta’l d’un dels dos i crea’n un altre a @BotFather.</p>' : ''}
     ${t.pending.length ? `<div class="stack"><b class="small">Volen parlar amb el bot</b>${t.pending.map((p) => `<div class="agent-row"><span class="grow"><b>${esc(p.name)}</b><div class="muted small">${p.username ? '@' + esc(p.username) + ' · ' : ''}${ago(p.t)} · xat ${esc(p.id)}</div></span><button class="btn sm ink" data-tg-allow="${esc(p.id)}" data-name="${esc(p.name)}" type="button">Autoritza</button></div>`).join('')}<p class="muted small">Autoritza només els xats que reconeguis. La resta s’ignoren.</p></div>` : ''}
     <div class="stack"><b class="small">Xats autoritzats</b>${t.allowed.length ? t.allowed.map((a) => `<div class="agent-row"><span class="grow"><b>${esc(a.name)}</b><div class="muted small">xat ${esc(a.id)}</div></span><button class="btn sm danger" data-tg-drop="${esc(a.id)}" type="button">Treu</button></div>`).join('') : `<p class="muted small">Encara cap. Escriu al bot ${t.bot ? '<b>@' + esc(t.bot.username) + '</b>' : ''} i el teu xat apareixerà aquí.</p>`}</div>
     <div class="grid-2"><label class="f"><span>Agent</span><select id="tgAgent">${['claude', 'codex'].map((a) => `<option value="${a}" ${t.agent === a ? 'selected' : ''}>${AGENT_NAMES[a]}</option>`).join('')}</select></label>
@@ -2556,7 +2630,10 @@ function telegramPanel() {
 }
 document.addEventListener('submit', async (e) => {
   if (e.target.id !== 'tgForm') return; e.preventDefault();
-  try { tgState = await api('/api/telegram', { method: 'PUT', body: { token: $('#tgToken').value.trim() } }); toast('Bot connectat'); } catch (err) { toast(err.message, 5000); }
+  try { tgState = await api('/api/telegram', { method: 'PUT', body: { token: $('#tgToken').value.trim() } }); toast('Bot connectat'); } catch (err) { toast(err.message, 7000); }
+  // Els xats que ja parlen amb els bots dels altres ordinadors també poden parlar amb aquest.
+  const known = new Map(tgOthers.flatMap((o) => o.allowed).map((a) => [String(a.id), a]));
+  if (tgState?.configured) for (const a of known.values()) if (!tgState.allowed.some((x) => String(x.id) === String(a.id))) tgState = await api('/api/telegram/allow', { method: 'POST', body: { id: Number(a.id), name: a.name } }).catch(() => tgState);
   $('#tgPanel').innerHTML = telegramPanel();
 });
 document.addEventListener('change', async (e) => {
@@ -2771,6 +2848,7 @@ document.addEventListener('click', async (e) => {
     case 'model': { const s = state.sessions.get(state.route.id); if (s) modelSheet(s); return; }
     case 'mode': { const s = state.sessions.get(state.route.id); if (s) modeSheet(s); return; }
     case 'session-more': return sessionOptions(state.route.id);
+    case 'usage': { const u = state.usage?.[state.sessions.get(state.route.id)?.agent]; if (u?.windows) toast(`Ús de la subscripció · ${u.windows.map((w) => `${w.label}: ${Math.round(w.used * 100)} %${w.resetsAt ? ` (es reinicia ${hhmm(w.resetsAt)})` : ''}`).join(' · ')}`, 5000); return; }
     case 'refresh-agents': try { state.info = await api('/api/info?refresh=1'); render(); toast('Agents actualitzats'); } catch (err) { toast(err.message); } return;
     case 'push': return enablePush();
     case 'push-off': return disablePush();
@@ -3041,6 +3119,20 @@ if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/sw.js').catch(() => {});
   navigator.serviceWorker.addEventListener('message', (e) => { if (e.data?.type === 'open-session' && e.data.id) go(`#/s/${e.data.id}`); });
 }
+// L'app d'Android (i la de la pantalla d'inici) es queda oberta dies sense recarregar: en tornar-hi, si hi ha una versió
+// nova de la web (sw.js canvia a cada canvi de l'app), es recarrega, però només si no estàs fent res a mitges.
+(() => {
+  const ver = async () => { try { return (await (await fetch('/sw.js', { cache: 'no-store' })).text()).match(/nio-shell-v\d+/)?.[0] || null; } catch { return null; } };
+  const busy = () => document.querySelector('dialog[open], .nt-ov, .call-ov, .rd, .lv-pill, .lv-rec') || [...document.querySelectorAll('textarea, input[type=text], input:not([type])')].some((t) => t.value.trim());
+  let mine = null, hiddenAt = 0;
+  ver().then((v) => { mine = v; });
+  document.addEventListener('visibilitychange', async () => {
+    if (document.hidden) { hiddenAt = Date.now(); return; }
+    if (!mine || Date.now() - hiddenAt < 60000) return;
+    const now = await ver();
+    if (now && now !== mine && !document.hidden && !busy()) location.reload();
+  });
+})();
 addEventListener('hashchange', route);
 // El mòbil congela la pàgina en segon pla i el flux queda mort sense cap error: l'ordinador envia un ping cada 15 s,
 // així que si fa més de 40 s que no arriba res (o en tornar a l'app, més de 20 s), es torna a connectar sol.
@@ -3067,17 +3159,18 @@ if (['127.0.0.1', 'localhost', '[::1]'].includes(location.hostname)) {
 }
 setNav(false);
 if (!checkPairHash()) state.route = parseRoute();
-if (machine()) connect();
+if (machine()) { restoreSnap(machine()); connect(); }
 if (state.route.name === 'session') openSession(state.route.id); else render();
 if (T.on) tourGo(T.i); else if (!T.seen && !machine()) setTimeout(tourStart, 700);
 
 /* ---------------------------------------------------------------- lliscar entre pàgines (mòbil) */
 (() => {
-  const PAGES = ['sessions', 'approvals', 'ordinadors'];
+  // Les pàgines de la barra de baix, en el mateix ordre («Pantalla» i «Més» no són pàgines: obren un full).
+  const PAGES = ['sessions', 'notes', 'ordinadors'];
   const view = $('#view');
   let g = null, timer = 0;
   const scrollsX = (el) => { for (; el && el !== view; el = el.parentElement) { if (el.scrollWidth > el.clientWidth + 2 && /auto|scroll/.test(getComputedStyle(el).overflowX)) return true; } return false; };
-  const blocked = (t) => !mq.matches || document.body.classList.contains('nav-open') || $('#sheet')?.open || state.route.name === 'session' || t.closest?.('input, textarea, select, [contenteditable], [data-noswipe]') || scrollsX(t);
+  const blocked = (t) => !mq.matches || document.body.classList.contains('nav-open') || $('#sheet')?.open || state.route.name === 'session' || t.closest?.('input, textarea, select, [contenteditable], [data-noswipe], .nt-card') || scrollsX(t); // a Notes, lliscar una targeta l'arxiva
   const target = (dir) => PAGES[PAGES.indexOf(state.route.name) + dir];
   const put = (x, o) => { view.style.setProperty('--sx', x + 'px'); view.style.setProperty('--so', String(o)); };
   const clear = () => { view.classList.remove('swiping', 'swipe-anim'); view.style.removeProperty('--sx'); view.style.removeProperty('--so'); };

package/web/app/index.html

@@ -32,6 +32,8 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Caveat:wght@500;600&display=swap" rel="stylesheet">
+<script>/* App d'Android: la pàgina va per sota de les barres del sistema; l'app en diu la mida abans de pintar. */try{var i=JSON.parse(NioAndroid.insets()),d=document.documentElement;d.style.setProperty('--safe-t',i.t+'px');d.style.setProperty('--safe-b',i.b+'px');d.classList.add('android')}catch(e){}</script>
+<script src="/app/android.js"></script>
 <link rel="stylesheet" href="/bot.css">
 <link rel="stylesheet" href="/board.css">
 <link rel="stylesheet" href="/app/style.css">

package/web/app/notes-live.js

@@ -6,6 +6,9 @@
 const SEG_MS = Number(globalThis.NIO_LIVE_SEG_MS) || 20000; // durada de cada tros: prou curt per veure-ho gairebé en directe, prou llarg perquè Whisper tingui context
 const SILENCE = 0.003; // per sota d'aquest volum (RMS) tot el tros, no s'envia: Whisper s'inventa frases en el silenci
 const KINDS = { classe: 'Classe', reunio: 'Reunió' };
+const LIVE_MIN = '0.9.11', OLD = /ruta no existeix|Error 404/i; // un nio antic, sense classes ni reunions
+// Dins l'app d'Android, grava un servei natiu: continua amb la pantalla bloquejada (android/LiveService.java).
+const NA = typeof window !== 'undefined' && window.NioAndroid?.liveStart ? window.NioAndroid : null;
 const LANGS = [['ca', 'Català'], ['es', 'Castellà'], ['en', 'Anglès']];
 const STATES = { rec: 'Gravant', closing: 'Acabant de transcriure…', summarizing: 'Fent el resum…', done: 'Resum fet', error: 'No s’ha pogut resumir' };
 const LI = {
@@ -44,11 +47,28 @@ export function createLive({ ctx, api, esc, toast, svg, getNote, setNote, loadEn
   }
 
   // ---------------------------------------------------------------- començar
+  // L’ordinador té un nio d’abans de les classes: cal actualitzar-lo allà (la web ja és nova).
+  function oldSheet() {
+    const v = ctx.nodeVersion(), cmd = ctx.installCmd;
+    ctx.openSheet(`<h2>Cal actualitzar nio</h2>
+      <div class="stack">
+        <p>${v ? `Aquest ordinador té nio ${esc(v)}` : 'Aquest ordinador té un nio antic'} i «Classe o reunió» necessita la ${LIVE_MIN} o més nova.</p>
+        <p class="small muted">Obre un terminal a l’ordinador i executa:</p>
+        <pre class="mono small" style="white-space:pre-wrap;user-select:all">${esc(cmd)}</pre>
+        <p class="small muted">Quan acabi, torna aquí i prova-ho de nou.</p>
+        <div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button><button class="btn ink" type="button" data-copy>Copia l’ordre</button></div>
+      </div>`, (sh) => {
+      sh.querySelector('[data-close]').onclick = ctx.closeSheet;
+      sh.querySelector('[data-copy]').onclick = () => navigator.clipboard?.writeText(cmd).then(() => toast('Ordre copiada'), () => toast('No l’he pogut copiar'));
+    });
+  }
+
   async function startSheet() {
     if (ctx.isDemo()) return toast('A la demo no hi ha micròfon. Amb nio instal·lat, grava una classe i Whisper la transcriu a l’ordinador.', 5000);
+    if (!ctx.nodeAtLeast(LIVE_MIN)) return oldSheet();
     if (!ctx.voiceOn()) { toast('Cal activar Whisper per transcriure (gratis, a l’ordinador).', 3500); return ctx.voiceSheet(); }
     if (rec) return open(rec.id);
-    if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) return toast('Aquest navegador no pot gravar àudio.');
+    if (!NA && (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder)) return toast('Aquest navegador no pot gravar àudio.');
     const kind0 = LSget('nio.live.kind', 'classe'), lang0 = LANGS.some(([k]) => k === LSget('nio.live.lang', 'ca')) ? LSget('nio.live.lang', 'ca') : 'ca';
     ctx.openSheet(`<h2>Classe o reunió</h2>
       <div class="stack lv-start">
@@ -56,7 +76,7 @@ export function createLive({ ctx, api, esc, toast, svg, getNote, setNote, loadEn
         <label class="f">Idioma<select id="lvLang">${LANGS.map(([k, l]) => `<option value="${k}" ${k === lang0 ? 'selected' : ''}>${l}</option>`).join('')}</select></label>
         <label class="f">Model per als apunts i el resum<select id="lvEng"><option>Mirant quins models hi ha…</option></select></label>
         <p class="small muted" id="lvWhat"></p>
-        <p class="small lv-warn">Deixa nio obert i la pantalla encesa: si el mòbil es bloqueja, el navegador atura el micròfon.</p>
+        <p class="small lv-warn">${NA ? 'Pots bloquejar el mòbil: l’app continua gravant i ho envia a l’ordinador.' : 'Deixa nio obert i la pantalla encesa: si el mòbil es bloqueja, el navegador atura el micròfon. Amb l’app d’Android, no cal.'}</p>
         <div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Cancel·la</button><button class="btn ink" type="button" data-go>${svg('<circle cx="12" cy="12" r="6" fill="currentColor" stroke="none"/>')}Comença a gravar</button></div>
       </div>`, async (sh) => {
       let kind = kind0;
@@ -75,6 +95,16 @@ export function createLive({ ctx, api, esc, toast, svg, getNote, setNote, loadEn
       });
       sh.querySelector('[data-go]').onclick = async (ev) => {
         const b = ev.currentTarget; b.disabled = true;
+        if (NA) {
+          const lang = sh.querySelector('#lvLang').value, engine = sel.value || '';
+          LSset('nio.live.kind', kind); LSset('nio.live.lang', lang); if (engine) LSset('nio.notes.engine', engine);
+          try {
+            const n = await api('/api/notes/live', { method: 'POST', body: { kind, lang, engine } });
+            setNote(n); ctx.closeSheet(); open(n.id);
+            await nativeStart(n);
+          } catch (e) { b.disabled = false; if (OLD.test(e.message)) return oldSheet(); toast(e.message, 4500); }
+          return;
+        }
         // El micròfon es demana dins del clic: Safari no el deixa demanar més tard.
         let stream;
         try { stream = await mic(); } catch { b.disabled = false; return toast('No tinc permís per al micròfon. Activa’l als ajustos del navegador.', 4500); }
@@ -84,7 +114,7 @@ export function createLive({ ctx, api, esc, toast, svg, getNote, setNote, loadEn
           const n = await api('/api/notes/live', { method: 'POST', body: { kind, lang, engine } });
           setNote(n); ctx.closeSheet();
           begin(n, stream); open(n.id);
-        } catch (e) { stream.getTracks().forEach((t) => t.stop()); b.disabled = false; toast(e.message, 4500); }
+        } catch (e) { stream.getTracks().forEach((t) => t.stop()); b.disabled = false; if (OLD.test(e.message)) return oldSheet(); toast(e.message, 4500); }
       };
     });
   }
@@ -105,7 +135,46 @@ export function createLive({ ctx, api, esc, toast, svg, getNote, setNote, loadEn
     segment(rec);
     rec.tick = setInterval(() => { drawRec(); drawPill(); }, 500);
   }
-  const elapsed = (r) => r.base + (Date.now() - r.t0) / 1000;
+  const elapsed = (r) => (r.native ? r.st.elapsed || 0 : r.base + (Date.now() - r.t0) / 1000);
+
+  // ---------------------------------------------------------------- gravació nativa (app d'Android)
+  async function nativeStart(n) {
+    const m = ctx.machine(), segs = n.live?.segs || [], last = segs[segs.length - 1];
+    const cfg = { url: m.url, token: m.token, id: n.id, seq: last ? last.seq + 1 : 0, base: last ? last.at + last.dur : 0, segMs: SEG_MS, kind: KINDS[n.live?.kind] || 'Classe' };
+    let r = NA.liveStart(JSON.stringify(cfg));
+    if (r === 'perm') {
+      // L'app demana el permís del micròfon i avisa quan l'usuari ha respost.
+      r = await new Promise((done) => addEventListener('nio-native', function on(e) { if (!e.detail?.live) return; removeEventListener('nio-native', on); done(e.detail.live === 'started' ? 'ok' : 'denied'); }));
+    }
+    if (r !== 'ok') { toast(r === 'denied' ? 'Sense permís per al micròfon no puc gravar. Activa’l a Ajustos → Apps → nio → Permisos.' : 'No he pogut començar a gravar.', 5000); draw(); return; }
+    nativeWatch(n.id, m.url);
+    // HyperOS (Xiaomi) i altres aturen les apps en segon pla: es demana que no ho faci amb nio.
+    try { if (NA.batteryOk && !NA.batteryOk() && !LSget('nio.live.battery', false)) { LSset('nio.live.battery', true); toast('Perquè no s’aturi amb la pantalla bloquejada, permet que nio funcioni sense restriccions de bateria.', 6000); NA.batteryHelp(); } } catch { /* res */ }
+  }
+  function nativeWatch(id, url) {
+    if (rec?.native) clearInterval(rec.tick);
+    const r = rec = { native: true, id, url, running: true, stopping: false, lost: false, queue: [], st: {} };
+    const tick = () => {
+      let st = {}; try { st = JSON.parse(NA.liveStatus()); } catch { /* res */ }
+      r.st = st; r.lost = !!st.lost; r.stopping = !!st.stopping;
+      // Si el túnel ha canviat d'adreça, els trossos pendents van a la nova.
+      const m = ctx.machine(); if (m && m.url !== r.url) { r.url = m.url; try { NA.liveTarget(m.url, m.token); } catch { /* res */ } }
+      if (!st.active) { clearInterval(r.tick); if (rec === r) { rec = null; pill?.remove(); pill = null; draw(); } return; }
+      const bar = view && view.el.querySelector('.lv-meter i'); if (bar) bar.style.transform = `scaleX(${Math.min(1, (st.level || 0) * 1.2).toFixed(3)})`;
+      // La vista es redibuixa quan canvia l'estat (o si encara no mostra la gravació d'aquí).
+      if (view?.id === id) { const st2 = view.el.querySelector('.lv-st'); if (!st2 || st2.textContent !== nativeText(r)) draw(); }
+      drawRec(); drawPill();
+    };
+    r.tick = setInterval(tick, 500); tick();
+  }
+  function nativeText(r) {
+    const q = r.st.queue || 0;
+    return r.stopping ? (q ? `Enviant ${q} ${q === 1 ? 'tros' : 'trossos'}…` : 'Acabant…')
+      : r.lost ? 'El micròfon és ocupat (una trucada?). Tornarà a gravar sol quan quedi lliure.'
+      : q > 1 ? `Sense connexió amb l’ordinador: ${q} trossos esperant` : 'Grava amb la pantalla bloquejada i transcriu cada 20 s';
+  }
+  // Si l'app es torna a obrir amb una gravació en marxa, se'n recupera l'estat.
+  if (NA) { try { const st = JSON.parse(NA.liveStatus()); if (st.active && st.id) setTimeout(() => nativeWatch(st.id, ctx.machine()?.url), 0); } catch { /* res */ } }
   function segment(r) {
     if (!r.running || r.lost) return;
     if (r.stream.getAudioTracks().every((t) => t.readyState === 'ended')) { r.lost = true; draw(); return; }
@@ -117,8 +186,8 @@ export function createLive({ ctx, api, esc, toast, svg, getNote, setNote, loadEn
     mr.onstop = () => {
       clearTimeout(r.timer);
       const dur = (Date.now() - start) / 1000, blob = new Blob(chunks, { type: mr.mimeType || 'audio/webm' });
-      if (blob.size > 1500 && r.peak >= SILENCE) { r.queue.push({ seq: r.seq++, at: Math.round(at * 10) / 10, dur: Math.round(dur * 10) / 10, blob }); pump(r); }
-      else if (dur > 2) r.skipped++;
+      if (blob.size > 1500 && r.peak >= SILENCE) { r.queue.push({ seq: r.seq++, at: Math.round(at * 10) / 10, dur: Math.round(dur * 10) / 10, blob }); if (r.quiet) { r.quiet = 0; draw(); } pump(r); }
+      else if (dur > 2) { r.skipped++; r.quiet = (r.quiet || 0) + 1; if (r.quiet === 2) draw(); } // trossos en silenci seguits: el micròfon no capta la veu
       if (r.running && !r.lost) segment(r);
       else if (!r.running) finish(r);
     };
@@ -147,6 +216,7 @@ export function createLive({ ctx, api, esc, toast, svg, getNote, setNote, loadEn
   }
   function stop() {
     const r = rec; if (!r) return;
+    if (r.native) { NA.liveStop(); r.stopping = true; draw(); return; }
     r.running = false; r.stopping = true;
     if (r.mr?.state === 'recording') r.mr.stop(); else finish(r);
     draw();
@@ -168,6 +238,11 @@ export function createLive({ ctx, api, esc, toast, svg, getNote, setNote, loadEn
   }
   // El micròfon s'ha aturat (pantalla bloquejada, trucada…): es continua a la mateixa nota amb un clic.
   async function resume(id) {
+    if (NA) {
+      if (rec?.native && rec.id === id) return; // l'app ja hi torna sola quan el micròfon queda lliure
+      try { const n = await api(`/api/notes/${id}/live/resume`, { method: 'POST' }); setNote(n); await nativeStart(n); draw(); } catch (e) { toast(e.message, 4500); }
+      return;
+    }
     let stream;
     try { stream = await mic(); } catch { return toast('No tinc permís per al micròfon.', 4000); }
     if (rec && rec.id === id) {
@@ -275,15 +350,16 @@ export function createLive({ ctx, api, esc, toast, svg, getNote, setNote, loadEn
     t2?.addEventListener('scroll', () => { if (view) view.follow = t2.scrollHeight - t2.scrollTop - t2.clientHeight < 60; }, { passive: true });
   }
   function recBar(n) {
-    const r = rec, waiting = r.queue.length;
-    const status = r.stopping ? (waiting ? `Enviant ${waiting} ${waiting === 1 ? 'tros' : 'trossos'}…` : 'Acabant…')
+    const r = rec, waiting = r.native ? r.st.queue || 0 : r.queue.length;
+    const status = r.native ? nativeText(r) : r.stopping ? (waiting ? `Enviant ${waiting} ${waiting === 1 ? 'tros' : 'trossos'}…` : 'Acabant…')
       : r.lost ? 'El micròfon s’ha aturat (pantalla bloquejada o una altra app). Prem «Continua».'
-      : waiting > 1 ? `Sense connexió amb l’ordinador: ${waiting} trossos esperant` : 'Grava i transcriu cada 20 s';
+      : waiting > 1 ? `Sense connexió amb l’ordinador: ${waiting} trossos esperant`
+      : r.quiet >= 2 ? 'No sento res: apropa el micròfon o tria’n un altre a la icona del navegador' : 'Grava i transcriu cada 20 s';
     return `<div class="lv-rec ${r.lost ? 'lost' : ''}">
       <i class="lv-dot ${r.lost || r.stopping ? 'off' : ''}"></i><b class="lv-time">${fmt(elapsed(r))}</b>
       <span class="lv-meter" aria-hidden="true"><i></i></span>
       <span class="lv-st">${esc(status)}</span>
-      ${r.lost && !r.stopping ? `<button class="btn sm" type="button" data-lv="resume">Continua</button>` : ''}
+      ${r.lost && !r.stopping && !r.native ? `<button class="btn sm" type="button" data-lv="resume">Continua</button>` : ''}
       ${r.stopping ? '' : `<button class="btn ink sm" type="button" data-lv="stop">${svg('<rect x="7" y="7" width="10" height="10" rx="2"/>')}Atura i resumeix</button>`}
     </div>`;
   }

package/web/app/notes.css

@@ -145,6 +145,12 @@ body:has(.nt-ov) { overflow: hidden; }
 .nt-more-sheet button.danger { color: var(--red); }
 .nt-more-sheet button.muted { color: var(--fg-muted); text-align: center; }
 
+/* Al mòbil, el panell «Més» i els desplegables són fulls de baix que segueixen el dit: el navegador no s'ho queda per desplaçar. */
+.nt-more-sheet, .nt-pop-sheet { touch-action: none; }
+.nt-pop.nt-pop-sheet { position: absolute; z-index: 6; left: 0 !important; right: 0; bottom: 0 !important; top: auto; min-width: 0; max-width: none; max-height: 75% !important; overflow: auto; overscroll-behavior: contain; padding: 6px 12px calc(14px + var(--safe-b)); border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(39,34,36,.14); animation: nt-sheet-up .28s cubic-bezier(.22,1,.36,1); }
+.nt-pop-sheet input, .nt-pop-sheet select { touch-action: manipulation; }
+@keyframes nt-sheet-up { from { transform: translateY(100%); } }
+
 /* finestretes */
 .nt-pop { position: absolute; z-index: 5; min-width: 220px; max-width: min(340px, calc(100% - 16px)); padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); box-shadow: 0 18px 50px -14px rgba(39,34,36,.5); animation: nt-pop .18s var(--ease); transform-origin: bottom left; }
 @keyframes nt-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@@ -173,6 +179,8 @@ body:has(.nt-ov) { overflow: hidden; }
 .nt-ai-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
 
 @media (max-width: 700px) {
+  /* Els desplegables de la nota (color, etiqueta, assistent) ocupen l'amplada, amb marge: no se surten pels costats. */
+  .nt-pop { left: 10px !important; right: 10px; max-width: none; min-width: 0; }
   .page:has(.nt) { padding-inline: 14px; }
   .nt-title h1 { font-size: 26px; } .nt-title p { display: none; }
   .nt-top { margin-bottom: 12px; } .nt-tools .btn span { display: none; } .nt-tools .btn { padding: 0 11px; }

package/web/app/notes.js

@@ -54,6 +54,7 @@ export function createNotes(ctx) {
   let view = 'notes', q = '', layout = LSget('nio.notes.layout', 'grid');
   let ed = null, aborter = null;
   const historyNotes = new Map();
+  const byMachine = new Map(); // ordinador -> notes que en coneixem
   const pendingSaves = new Set();
   let loadError = '';
   const machineKey = () => ctx.machine()?.id || ctx.machine()?.url;
@@ -87,6 +88,7 @@ export function createNotes(ctx) {
       const r = await api('/api/notes');
       if (requestedMachine !== machineKey()) { loading = false; if (root) load(); return; }
       notes = new Map(r.notes.map((n) => [n.id, n])); loaded = true;
+      byMachine.set(requestedMachine, notes);
       for (const entry of pendingSaves) if (entry.id && entry.machineKey === machineKey()) notes.set(entry.id, entry.n);
       if (ed?.id) notes.set(ed.id, ed.n);
     }
@@ -101,7 +103,12 @@ export function createNotes(ctx) {
   // ---------------------------------------------------------------- pàgina
   function mount(el) {
     root = el; aborter?.abort(); aborter = new AbortController();
-    if (notesMachine !== machineKey()) { notesMachine = machineKey(); notes.clear(); loaded = false; engines = null; q = ''; view = 'notes'; }
+    if (notesMachine !== machineKey()) {
+      // Les notes de l'ordinador d'abans es queden a la memòria: si hi tornes, surten a l'instant i es posen al dia.
+      if (loaded) byMachine.set(notesMachine, notes);
+      notesMachine = machineKey(); engines = null; q = ''; view = 'notes';
+      notes = byMachine.get(notesMachine) || new Map(); loaded = byMachine.has(notesMachine);
+    }
     if (history.state?.nioNote) { const { nioNote, ...rest } = history.state; history.replaceState(rest, '', location.href); }
     root.innerHTML = `<div class="nt">
       <div class="nt-top">
@@ -491,11 +498,11 @@ export function createNotes(ctx) {
     title.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); ($('.nt-ed-text', c) || $('.nt-item input[type=text]', c))?.focus(); } });
     c.addEventListener('click', onEditorClick);
     drawBody(); drawAudio(); drawLabels(); drawMode();
-    bindMoreDrag($('#edMore', c), $('#edScrim', c));
+    bindMoreDrag($('#edMore', c), $('#edScrim', c), () => closeMore(true));
   }
   // El panell «Més» segueix el dit cap avall i es tanca si baixa prou o es llença; si no, torna a pujar.
   let moreDraggedAt = 0;
-  function bindMoreDrag(sheet, scrim) {
+  function bindMoreDrag(sheet, scrim, close) {
     let g = null;
     sheet.addEventListener('pointerdown', (e) => { if (e.pointerType === 'mouse') return; g = { y0: e.clientY, dy: 0, pid: e.pointerId, pts: [[e.timeStamp, e.clientY]], moved: false }; }, { passive: true });
     sheet.addEventListener('pointermove', (e) => {
@@ -512,7 +519,7 @@ export function createNotes(ctx) {
       const d = g; g = null; if (!d.moved) return;
       moreDraggedAt = Date.now();
       const [t0, y0] = d.pts[0], [t1, y1] = d.pts[d.pts.length - 1], v = (y1 - y0) / Math.max(1, t1 - t0);
-      if (d.dy > sheet.offsetHeight * 0.3 || (v > 0.4 && d.dy > 12)) closeMore(true);
+      if (d.dy > sheet.offsetHeight * 0.3 || (v > 0.4 && d.dy > 12)) close();
       else { sheet.style.transition = ''; scrim.style.transition = ''; sheet.style.transform = ''; scrim.style.opacity = ''; }
     };
     sheet.addEventListener('pointerup', end); sheet.addEventListener('pointercancel', end);
@@ -575,7 +582,7 @@ export function createNotes(ctx) {
   async function onEditorClick(ev) {
     const b = ev.target.closest('[data-e]'), c = ed?.card; if (!b || !ed) { if (ed?.pop && !ev.target.closest('.nt-pop')) closePop(); if (ed && !ev.target.closest('.nt-more-sheet')) closeMore(true); return; }
     const a = b.dataset.e;
-    if (ev.target.closest('.nt-more-sheet') && Date.now() - moreDraggedAt < 350) return; // era un arrossegament, no un toc
+    if (ev.target.closest('.nt-more-sheet, .nt-pop-sheet') && Date.now() - moreDraggedAt < 350) return; // era un arrossegament, no un toc
     if (a === 'more-close') return closeMore(true);
     if (a !== 'more' && !ev.target.closest('.nt-more-sheet')) closeMore(true);
     if (a === 'retry-save') { b.disabled = true; await flush(ed); b.disabled = false; return; }
@@ -624,10 +631,28 @@ export function createNotes(ctx) {
     s.style.transform = 'translateY(105%)'; sc.style.opacity = '0';
     setTimeout(hide, 220);
   }
-  function closePop() { ed?.pop?.remove(); if (ed) ed.pop = null; }
+  function closePop(animated) {
+    const p = ed?.pop; if (!p) return; ed.pop = null;
+    const sc = p.previousElementSibling?.classList.contains('nt-pop-scrim') ? p.previousElementSibling : null;
+    if (!animated || reduce || !p.classList.contains('nt-pop-sheet')) { p.remove(); sc?.remove(); return; }
+    p.style.transition = 'transform .22s cubic-bezier(.4,0,1,1)'; p.style.transform = 'translateY(105%)';
+    if (sc) { sc.style.transition = 'opacity .22s'; sc.style.opacity = '0'; }
+    setTimeout(() => { p.remove(); sc?.remove(); }, 220);
+  }
+  // Al mòbil, els desplegables (color, etiqueta, assistent) són fulls de baix: a l'amplada, amb nansa, i es tanquen lliscant cap avall.
+  const phone = matchMedia('(max-width: 700px)');
+  const popGrab = (p) => (p.classList.contains('nt-pop-sheet') ? '<div class="nt-more-grab"></div>' : '');
   function pop(anchor, html) {
     closePop();
     const p = document.createElement('div'); p.className = 'nt-pop'; p.innerHTML = html;
+    if (phone.matches) {
+      const sc = document.createElement('div'); sc.className = 'nt-more-scrim nt-pop-scrim';
+      sc.addEventListener('click', () => closePop(true));
+      p.classList.add('nt-pop-sheet'); p.setAttribute('role', 'dialog'); p.insertAdjacentHTML('afterbegin', '<div class="nt-more-grab"></div>');
+      ed.card.append(sc, p); ed.pop = p;
+      bindMoreDrag(p, sc, () => closePop(true));
+      return p;
+    }
     ed.card.append(p); ed.pop = p;
     const a = anchor.getBoundingClientRect(), r = ed.card.getBoundingClientRect(), w = p.offsetWidth;
     p.style.maxHeight = `${Math.max(80, a.top - Math.max(r.top, window.visualViewport?.offsetTop || 0) - 16)}px`;
@@ -636,14 +661,14 @@ export function createNotes(ctx) {
   }
   function popColor(b) {
     const p = pop(b, `<div class="nt-colors">${COLORS.map(([k, l]) => `<button type="button" class="nt-dot" data-color="${k}" aria-label="${l}" title="${l}" ${ed.n.color === k ? 'aria-pressed="true"' : ''}></button>`).join('')}</div>`);
-    p.addEventListener('click', (e) => { const d = e.target.closest('.nt-dot'); if (d) { set({ color: d.dataset.color }); closePop(); } });
+    p.addEventListener('click', (e) => { const d = Date.now() - moreDraggedAt < 350 ? null : e.target.closest('.nt-dot'); if (d) { set({ color: d.dataset.color }); closePop(); } });
   }
   function popLabel(b) {
     const mine = new Set(ed.n.labels), labs = labelsOf().filter((l) => !mine.has(l));
     const p = pop(b, `<form class="nt-lf"><input type="text" placeholder="Nova etiqueta" maxlength="30" aria-label="Nova etiqueta" autocomplete="off"><button class="btn ink sm" type="submit">Afegeix</button></form>${labs.length ? `<div class="nt-lsug">${labs.map((l) => `<button type="button" class="nt-chip" data-l="${esc(l)}">${esc(l)}</button>`).join('')}</div>` : ''}`);
     const add = (l) => { l = l.trim().toLowerCase(); if (!l || ed.n.labels.includes(l) || ed.n.labels.length >= 12) return; set({ labels: [...ed.n.labels, l] }); drawLabels(); closePop(); };
     $('form', p).onsubmit = (e) => { e.preventDefault(); add($('input', p).value); };
-    p.addEventListener('click', (e) => { const c = e.target.closest('[data-l]'); if (c) add(c.dataset.l); });
+    p.addEventListener('click', (e) => { const c = Date.now() - moreDraggedAt < 350 ? null : e.target.closest('[data-l]'); if (c) add(c.dataset.l); });
     setTimeout(() => $('input', p).focus(), 30);
   }
 
@@ -698,19 +723,19 @@ export function createNotes(ctx) {
   async function popAi(b) {
     const p = pop(b, '<p class="muted small nt-pad">Mirant quins models hi ha…</p>');
     const list = await loadEngines(); if (ed?.pop !== p) return;
-    if (!list.length) { p.innerHTML = '<p class="small nt-pad">No hi ha cap model en aquest ordinador.<br>Instal·la <b>Ollama</b> i un model (<span class="mono">ollama pull qwen3:4b</span>) o <b>Claude Code</b>.</p>'; return; }
+    if (!list.length) { p.innerHTML = popGrab(p) + '<p class="small nt-pad">No hi ha cap model en aquest ordinador.<br>Instal·la <b>Ollama</b> i un model (<span class="mono">ollama pull qwen3:4b</span>) o <b>Claude Code</b>.</p>'; return; }
     // Per defecte: el model local més petit de 3 mil milions de paràmetres o més; si no, Claude ràpid; si no, el primer.
     const auto = (list.find((e) => e.local && e.id.startsWith('ollama:') && e.params >= 3) || list.find((e) => e.id === 'claude:haiku') || list[0]).id;
     const saved0 = LSget('nio.notes.engine', ''), saved = list.some((e) => e.id === saved0) ? saved0 : auto, groups = [...new Set(list.map((e) => e.group))];
     const hasText = !!ed.n.text.trim() || !!ed.n.items?.length;
-    p.innerHTML = `<label class="nt-pad small"><span class="muted">Model</span><select id="aiEng" class="nt-sel">${groups.map((g) => `<optgroup label="${esc(g)}">${list.filter((e) => e.group === g).map((e) => `<option value="${esc(e.id)}" ${e.id === saved ? 'selected' : ''}>${esc(e.label)}</option>`).join('')}</optgroup>`).join('')}</select></label>
+    p.innerHTML = popGrab(p) + `<label class="nt-pad small"><span class="muted">Model</span><select id="aiEng" class="nt-sel">${groups.map((g) => `<optgroup label="${esc(g)}">${list.filter((e) => e.group === g).map((e) => `<option value="${esc(e.id)}" ${e.id === saved ? 'selected' : ''}>${esc(e.label)}</option>`).join('')}</optgroup>`).join('')}</select></label>
       <div class="nt-acts-list">${ACTIONS.map(([k, l, d]) => `<button type="button" data-ai="${k}" ${hasText ? '' : 'disabled'}><b>${l}</b><span>${d}</span></button>`).join('')}</div>
       <form class="nt-lf" id="aiForm"><input type="text" placeholder="O demana-li qualsevol cosa…" maxlength="300" aria-label="Instrucció pròpia" ${hasText ? '' : 'disabled'}><button class="btn ink sm" type="submit" ${hasText ? '' : 'disabled'}>Envia</button></form>
       <p class="nt-note small muted" id="aiNote"></p>`;
     const eng = $('#aiEng', p), note = $('#aiNote', p);
     const upd = () => { const e = list.find((x) => x.id === eng.value); note.textContent = e?.local ? 'Es queda a l’ordinador: cap dada surt de casa.' : 'Aquest text s’envia al servei del model (Anthropic, OpenAI o núvol d’Ollama).'; };
     eng.onchange = () => { LSset('nio.notes.engine', eng.value); upd(); }; upd();
-    p.addEventListener('click', (e) => { const x = e.target.closest('[data-ai]'); if (x && !x.disabled) runAi(x.dataset.ai, eng.value); });
+    p.addEventListener('click', (e) => { const x = Date.now() - moreDraggedAt < 350 ? null : e.target.closest('[data-ai]'); if (x && !x.disabled) runAi(x.dataset.ai, eng.value); });
     $('#aiForm', p).onsubmit = (e) => { e.preventDefault(); const v = $('input', p).value.trim(); if (v) runAi('custom', eng.value, v); };
   }
   async function runAi(action, engine, prompt) {

package/web/app/style.css

@@ -141,6 +141,10 @@ button.chip:hover { border-color: var(--fg); }
 .chip.usage .ring .rv { stroke: var(--moss); }
 .chip.usage[data-hi="1"] .ring .rv { stroke: var(--red); }
 .chip.usage .uw[data-hi="1"] { color: var(--red); font-weight: 600; }
+/* Al mòbil, l'ús va a la barra de dalt (a la barra de xips quedava fora de la pantalla, per la dreta). */
+.chip.usage.mini { height: 32px; padding: 0 10px 0 8px; font-size: 12px; white-space: nowrap; flex: none; cursor: pointer; }
+#mRight { display: flex; align-items: center; gap: 4px; }
+@media (max-width: 820px) { .mode-bar .chip.usage { display: none; } }
 .chip.beta { height: 20px; padding: 0 7px; font-size: 10px; color: var(--fg-muted); }
 .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-in-out infinite; }
 @keyframes pulse { 50% { opacity: .3; } }
@@ -304,6 +308,15 @@ dialog.sheet[open] { animation: pop .22s var(--ease); }
 #palette li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
 #palette li[aria-selected="true"] { background: var(--bg-2); }
 #palette li span { color: var(--fg-muted); font-size: 12px; }
+/* Al mòbil, la paleta és un full de baix com els altres, i es tanca lliscant cap avall. */
+@media (max-width: 820px) {
+  #palette { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0; padding-bottom: var(--safe-b); max-height: 82dvh; }
+  #palette[open] { display: flex; flex-direction: column; animation: sheet-up .3s var(--ease); }
+  #palette::before { content: ''; display: block; width: 36px; height: 4px; margin: 8px auto 2px; border-radius: 4px; background: var(--border); flex: none; }
+  #palette input { border-radius: 0; flex: none; }
+  #palette ul { max-height: none; flex: 1; min-height: 0; }
+  #palette li { min-height: 46px; align-items: center; font-size: 15px; }
+}
 
 .tour { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
 .tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px color-mix(in srgb, var(--fg) 42%, transparent), 0 0 0 2px var(--white) inset; transition: left .35s var(--ease), top .35s var(--ease), width .35s var(--ease), height .35s var(--ease); }
@@ -458,7 +471,9 @@ dialog.sheet.wiz .sheet-in { padding: 0; gap: 0; flex: 1; min-height: 0; display
 .fs-pick b { overflow-wrap: anywhere; }
 .fs-list { max-height: none; }
 @media (max-width: 820px) {
-  dialog.sheet.wiz { height: min(92dvh, calc(var(--vvh, 100dvh) - 8px)); }
+  /* Al mòbil, els assistents (Nova sessió, Afegeix ordinador…) fan l'alçada del contingut, no la de tota la pantalla. */
+  dialog.sheet.wiz { height: auto; max-height: min(92dvh, calc(var(--vvh, 100dvh) - 8px - var(--safe-t))); }
+  dialog.sheet.wiz .sheet-in, dialog.sheet.wiz .wiz-body { flex: 0 1 auto; }
   .wiz-head { padding: 10px 18px 8px; }
   .wiz-body { padding: 4px 18px 14px; }
   .wiz-foot { padding: 12px 18px calc(14px + var(--safe-b)); }
@@ -724,7 +739,7 @@ html.rd-open, html.rd-open body { overflow: hidden; }
 @media (max-width: 560px) { .rd-bar { padding: 8px 10px; gap: 8px; } .rd-stat, #rdFull { display: none; } .rd-seg button { padding: 9px 11px; } }
 
 .rd-stage img { transform-origin: center; will-change: transform; }
-.rd-tools { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: rgba(22, 22, 23, .86); border: 1px solid #36363a; backdrop-filter: blur(8px); z-index: 2; max-width: calc(100% - 20px); }
+.rd-tools { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: rgba(22, 22, 23, .86); border: 1px solid #36363a; backdrop-filter: blur(8px); z-index: 2; max-width: calc(100% - 20px); }
 .rd-tools .rd-btn { padding: 10px 12px; min-width: 40px; }
 .rd-pct { min-width: 56px !important; font-variant-numeric: tabular-nums; }
 .rd-sep { width: 1px; align-self: stretch; background: #36363a; }

package/web/board.css

@@ -109,7 +109,7 @@
 .bd-chat .chips::-webkit-scrollbar { display: none; }
 .bd-chat .chip-s { flex: none; scroll-snap-align: start; max-width: 260px; box-sizing: border-box; height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 12px; line-height: 30px; text-align: center; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font-size: 12px; font-weight: 500; cursor: pointer; }
 .bd-chat .chip-s:hover { border-color: var(--fg); }
-.bd-chat .cin { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
+.bd-chat .cin { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px calc(14px + var(--safe-b, 0px)); border-top: 1px solid var(--border); }
 .bd-chat .cin textarea { flex: 1; min-height: 42px; max-height: 140px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); resize: none; font: inherit; font-size: 14px; line-height: 1.4; outline: none; }
 .bd-chat .cin textarea:focus { border-color: var(--fg); }
 .bd-chat .send { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; background: var(--fg); color: var(--bg); cursor: pointer; }
@@ -118,9 +118,9 @@
 
 @media (max-width: 1100px) { .board-root { --chat-w: 320px; } }
 @media (max-width: 820px) {
-  .board-root { height: calc(100dvh - 56px - env(safe-area-inset-top)); }
+  .board-root { height: calc(100dvh - 56px - var(--safe-t, 0px)); }
   .chat-open .bd-tools, .chat-open .bd-right { transform: none; }
-  .bd-tools { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 10px; right: 10px; transform: none; overflow-x: auto; scrollbar-width: none; }
+  .bd-tools { top: auto; bottom: calc(12px + var(--safe-b, 0px)); left: 10px; right: 10px; transform: none; overflow-x: auto; scrollbar-width: none; }
   .bd-tools::-webkit-scrollbar { display: none; }
   .bd .tb { width: 40px; height: 40px; flex: none; }
   .bd .tb small { display: none; }
@@ -131,7 +131,7 @@
   .bd .chat-t > span:not(.bot) { display: none; }
   .only-m { display: grid !important; }
   .bd-style { display: none; }
-  .style-open .bd-style:not([hidden]) { display: grid; left: 10px; right: 10px; top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; grid-template-columns: 1fr 1fr; }
+  .style-open .bd-style:not([hidden]) { display: grid; left: 10px; right: 10px; top: auto; bottom: calc(70px + var(--safe-b, 0px)); width: auto; grid-template-columns: 1fr 1fr; }
   .bd-help .cols { grid-template-columns: 1fr; }
   .bd-chat { position: absolute; top: auto; left: 0; right: 0; bottom: 0; z-index: 9; width: auto; height: min(78%, 600px); border: 0; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; transform: translateY(105%); transition: transform .34s var(--bd-ease), visibility 0s linear .34s; box-shadow: 0 -20px 50px -30px color-mix(in srgb, var(--fg) 55%, transparent); }
   .chat-open .bd-chat { transform: none; transition: transform .34s var(--bd-ease), visibility 0s; }
@@ -145,7 +145,7 @@
   .chat-open .bd-chat { transform: none; transition: transform .34s var(--bd-ease), visibility 0s; }
   .bd-chat header::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--border); }
   .chat-open .bd-tools, .chat-open .bd-right { transform: none; }
-  .bd-tools { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 10px; right: 10px; transform: none; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
+  .bd-tools { top: auto; bottom: calc(12px + var(--safe-b, 0px)); left: 10px; right: 10px; transform: none; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
   .bd-tools::-webkit-scrollbar { display: none; }
   .bd .tb { flex: none; }
   .bd .tb small { display: none; }
@@ -156,7 +156,7 @@
   .bd .chat-t > span:not(.bot) { display: none; }
   .bd .tb.only-m { display: grid !important; }
   .bd-style { display: none; }
-  .style-open .bd-style:not([hidden]) { display: grid; left: 10px; right: 10px; top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; grid-template-columns: 1fr 1fr; }
+  .style-open .bd-style:not([hidden]) { display: grid; left: 10px; right: 10px; top: auto; bottom: calc(70px + var(--safe-b, 0px)); width: auto; grid-template-columns: 1fr 1fr; }
 }
 @container stage (max-width: 440px) {
   .bd .tb[data-tool="hand"], .bd .tb[data-tool="line"], .bd .tb[data-bd="lock"] { display: none; }
@@ -181,7 +181,7 @@
   .bd-chat header { padding-top: 22px; }
   .bd-chat .msgs { overscroll-behavior: contain; }
   .bd-chat .cin textarea { font-size: 16px; }
-  .bd-chat .cin { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
+  .bd-chat .cin { padding-bottom: calc(12px + var(--safe-b, 0px)); }
 }
 @container stage (max-width: 720px) {
   .bd-scrim { display: block; position: absolute; inset: 0; z-index: 8; border: 0; background: color-mix(in srgb, var(--fg) 30%, transparent); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
@@ -232,10 +232,10 @@
 /* Mòbil en horitzontal: poc d'alçada */
 @media (max-height: 480px) and (max-width: 940px) {
   .bd-chat { height: min(92%, 600px); }
-  .bd-tools { bottom: calc(6px + env(safe-area-inset-bottom)); left: auto; right: auto; max-width: calc(100% - 20px); }
+  .bd-tools { bottom: calc(6px + var(--safe-b, 0px)); left: auto; right: auto; max-width: calc(100% - 20px); }
   .bd-tools { left: 50%; transform: translateX(-50%); }
   .bd .tb { height: 40px; }
-  .style-open .bd-style:not([hidden]) { bottom: calc(58px + env(safe-area-inset-bottom)); max-height: calc(100% - 130px); overflow-y: auto; grid-template-columns: repeat(2, 1fr); }
+  .style-open .bd-style:not([hidden]) { bottom: calc(58px + var(--safe-b, 0px)); max-height: calc(100% - 130px); overflow-y: auto; grid-template-columns: repeat(2, 1fr); }
   .bd-help-in { padding: 14px; }
   .bd-empty { display: none; }
 }

package/web/index.html

@@ -218,6 +218,7 @@ main { padding-bottom: 8px; }
   <section aria-labelledby="que">
     <div class="sec-head"><span class="eyebrow">Què hi pots fer</span><h2 id="que">Tot el que necessites per treballar amb agents</h2></div>
     <div class="grid">
+      <article class="card big c-lemon"><div class="big-l"><span class="tag">Notes</span><h3>Classe o reunió, apuntada sola</h3><p>Grava amb el micròfon del mòbil o de l’ordinador i Whisper ho transcriu a l’ordinador mentre es parla. Cada 4 o 5 minuts, un model en fa apunts; quan acabes, surt el resum de tot.</p><p class="muted">Tries l’idioma (català, castellà o anglès) i el model. L’àudio no surt dels teus ordinadors.</p></div><dl class="rows stack"><div><dt><strong>En directe</strong></dt><dd>La transcripció apareix cada 20 segons, al costat dels apunts.</dd></div><div><dt><strong>Classe</strong></dt><dd>Conceptes clau, punts importants i preguntes per repassar.</dd></div><div><dt><strong>Reunió</strong></dt><dd>Resum, decisions, tasques amb qui se’n fa càrrec i temes oberts.</dd></div><div><dt><strong>App d’Android</strong></dt><dd>Continua gravant amb la pantalla bloquejada, i si es talla la connexió guarda els trossos fins que torna.</dd></div></dl></article>
       <article class="card c-blue"><span class="tag">Agents</span><h3>Sessions en directe</h3><p>Claude Code, Codex, Grok i Antigravity a qualsevol dels teus ordinadors. Tries la carpeta i els permisos, i la resposta arriba mentre treballa.</p></article>
       <article class="card c-rose"><span class="tag">Seguretat</span><h3>Aprovacions</h3><p>Abans d’editar, executar o clicar res, te’n demana permís amb el motiu. Ho aproves o ho rebutges amb un toc, i tot queda registrat.</p></article>
       <article class="card c-lilac"><span class="tag">Connexió</span><h3>Avisos al mòbil</h3><p>Una notificació quan un agent et demana permís o acaba. Arriba buida: el detall el demana el mòbil directament a l’ordinador.</p></article>
@@ -230,6 +231,9 @@ main { padding-bottom: 8px; }
       <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. 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>
+      <article class="card c-peach"><span class="tag">Notes</span><h3>Notes i veu</h3><p>Notes amb llistes, colors i etiquetes, guardades a l’ordinador. Dicta-les o adjunta-hi àudio i es transcriu; llisca una nota per arxivar-la. Des de l’ordinador, pots fer servir el mòbil com a micròfon.</p></article>
+      <article class="card c-rose"><span class="tag">Agents</span><h3>Truca a en Nio</h3><p>Parla amb en Nio en temps real (ElevenLabs, amb la teva clau): et diu com van les sessions, li encarregues feina i aproves de paraula. La conversa surt en directe, paraula per paraula.</p></article>
+      <article class="card c-blue"><span class="tag">Agents</span><h3>Continua les sessions del terminal</h3><p>Les converses de Claude Code obertes al terminal de l’ordinador surten a Sessions. Toca’n una i continua-la des del mòbil amb tot l’historial.</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-v53';
-const FILES = ['/app', '/app/style.css', '/app/notes.css', '/app/call.css', '/app/app.js', '/app/notes.js', '/app/notes-live.js', '/app/call.js', '/app/demo.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
+const SHELL = 'nio-shell-v61';
+const FILES = ['/app', '/app/style.css', '/app/notes.css', '/app/call.css', '/app/app.js', '/app/notes.js', '/app/notes-live.js', '/app/call.js', '/app/demo.js', '/app/android.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(() => {}));