nio-cat 0.9.13 → 0.9.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.9.13",
+  "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/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/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,7 +619,7 @@ 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?.(() => {});
@@ -905,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)); });
 }
@@ -1327,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() {
@@ -2551,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 '';
@@ -2562,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>
@@ -2575,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) => {
@@ -2790,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();
@@ -3100,7 +3159,7 @@ 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);
 

package/web/app/index.html

@@ -33,6 +33,7 @@
 <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.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); } }

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; } }

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-v59';
-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(() => {}));