nio-cat 0.4.4 → 0.5.0

package/bin/nio.js

@@ -9,7 +9,7 @@ const config = require('../src/config');
 const { Hub } = require('../src/hub');
 const { createServer } = require('../src/server');
 const { detectAll } = require('../src/agents');
-const { startTunnel } = require('../src/tunnel');
+const { startTunnel, startNamedTunnel } = require('../src/tunnel');
 const { addServer } = require('../src/ssh');
 const { pairLink, terminalQr, writePairPage, makeCode, codeLink, terminalQrSize } = require('../src/pair');
 const { which } = require('../src/proc');
@@ -22,7 +22,7 @@ for (let i = 0; i < argv.length; i++) {
   if (a.startsWith('--')) {
     const [k, v] = a.slice(2).split('=');
     if (v !== undefined) flags[k] = v;
-    else if (['port', 'url', 'app', 'local-port', 'dir'].includes(k)) flags[k] = argv[++i];
+    else if (['port', 'url', 'app', 'local-port', 'dir', 'tunnel-token'].includes(k)) flags[k] = argv[++i];
     else flags[k] = true;
   } else pos.push(a);
 }
@@ -153,6 +153,20 @@ async function start() {
     console.log(c.dim('  Per connectar-t’hi des de qualsevol lloc, instal·la’l (a macOS: brew install cloudflared) i torna a engegar nio.'));
   }
 
+  // Adreça fixa: túnel amb nom de Cloudflare. Es desa i els reinicis la mantenen.
+  if (flags['tunnel-token'] && flags.url) {
+    cfg.tunnelToken = flags['tunnel-token'];
+    cfg.fixedUrl = flags.url.replace(/\/+$/, '');
+    config.save(cfg);
+    delete flags.url;
+  }
+  if (flags['forget-fixed']) {
+    delete cfg.tunnelToken;
+    delete cfg.fixedUrl;
+    config.save(cfg);
+  }
+  const fixed = cfg.tunnelToken && cfg.fixedUrl && !flags.url && !flags['no-tunnel'] && !flags.lan ? cfg : null;
+
   const hub = new Hub(cfg);
   let publicUrl = flags.url || null;
   const host = flags.lan ? '0.0.0.0' : '127.0.0.1';
@@ -188,6 +202,17 @@ async function start() {
       return showPair(publicUrl);
     }
 
+    if (fixed) {
+      const nt = startNamedTunnel(cfg.tunnelToken, () => {
+        publicUrl = cfg.fixedUrl;
+        console.log(`  ${c.dim('Adreça fixa:')} ${publicUrl}`);
+        cfg.lastUrl = publicUrl;
+        config.save(cfg);
+        showPair(publicUrl);
+      });
+      if (nt) return console.log(c.dim('  Obrint el túnel fix…'));
+    }
+
     const t = startTunnel(cfg.port, (url) => {
       publicUrl = url;
       console.log(`  ${c.dim('Túnel:')}    ${url}  ${c.dim('(Cloudflare, sense cost)')}`);
@@ -242,6 +267,8 @@ async function start() {
     --lan               Connexió dins la mateixa wifi
     --url <adreça>      Una adreça pública teva (Tailscale o similar)
     --no-tunnel         Només des d'aquest ordinador
+    --tunnel-token <t> --url <adreça>   Adreça fixa amb un túnel de Cloudflare amb nom (es desa; la propera vegada n'hi ha prou amb nio)
+    --forget-fixed      Oblida l'adreça fixa i torna al túnel temporal
     --port <n>          Port local (7717 si no dius res)
     --no-open           No obris el panell al navegador d'aquest ordinador
     --local             Obre la còpia del panell d'aquest ordinador (si el navegador bloqueja nio.cat, p. ex. Safari)

package/package.json

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

package/src/server.js

@@ -143,6 +143,7 @@ const MODEL_NAME = /^[\w][\w.\-/]{0,100}(:[\w.\-]{1,60})?$/;
 
 function createServer({ cfg, hub, getPublicUrl, getApp }) {
   const streams = new Set();
+  const seenDevices = new Map(); // mòbils que s'han connectat (per avisar l'ordinador que mostra el QR)
   const pulls = new Map(); // descàrregues de models d'Ollama en curs
 
   hub.on('out', (msg) => {
@@ -388,6 +389,12 @@ function createServer({ cfg, hub, getPublicUrl, getApp }) {
           connection: 'keep-alive',
         });
         res.write(`data: ${JSON.stringify({ type: 'hello', sessions: hub.list(), approvals: hub.pendingApprovals() })}\n\n`);
+        const dev = String(url.searchParams.get('d') || '').slice(0, 40), kind = url.searchParams.get('k') === 'phone' ? 'phone' : 'desktop';
+        if (dev && kind === 'phone' && Date.now() - (seenDevices.get(dev) || 0) > 10 * 60 * 1000) {
+          const data = `data: ${JSON.stringify({ type: 'device', device: dev, kind })}\n\n`;
+          for (const o of streams) o.write(data);
+        }
+        if (dev) seenDevices.set(dev, Date.now());
         streams.add(res);
         req.on('close', () => streams.delete(res));
         return;
@@ -396,12 +403,14 @@ function createServer({ cfg, hub, getPublicUrl, getApp }) {
       if (url.pathname === '/api/ssh/add' && req.method === 'POST') {
         res.writeHead(200, { 'content-type': 'application/x-ndjson; charset=utf-8', 'cache-control': 'no-store', 'x-accel-buffering': 'no' });
         const send = (o) => res.write(JSON.stringify(o) + '\n');
+        const beat = setInterval(() => send({ ping: 1 }), 8000);
         try {
           const b = await readBody(req);
           send({ done: true, ...(await addServer(String(b.target || '').trim(), { onStep: (step) => send({ step }) })) });
         } catch (e) {
           send({ error: e.message });
         }
+        clearInterval(beat);
         return res.end();
       }
       try {

package/src/tunnel.js

@@ -25,4 +25,25 @@ function startTunnel(port, onUrl) {
   return child;
 }
 
-module.exports = { startTunnel };
+// Túnel amb nom (compte gratuït de Cloudflare): l'adreça no canvia entre reinicis.
+function startNamedTunnel(token, onReady) {
+  const bin = which('cloudflared');
+  if (!bin) return null;
+  const child = spawn(bin, ['tunnel', '--no-autoupdate', 'run', '--token', token], {
+    env: childEnv(),
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+  let ready = false;
+  const scan = (d) => {
+    if (!ready && /Registered tunnel connection/i.test(String(d))) {
+      ready = true;
+      onReady();
+    }
+  };
+  child.stdout.on('data', scan);
+  child.stderr.on('data', scan);
+  process.on('exit', () => child.kill());
+  return child;
+}
+
+module.exports = { startTunnel, startNamedTunnel };

package/web/app/app.js

@@ -19,6 +19,8 @@ const ICON = {
   phone: '<rect x="6" y="3" width="12" height="18" rx="3"/><path d="M10.5 17.5h3"/>',
   machine: '<rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/>',
   board: '<path d="M4 20l1.2-4.4L16 4.8a2 2 0 0 1 2.9 0l.3.3a2 2 0 0 1 0 2.9L8.4 18.8z"/>',
+  settings: '<path d="M5 7h9M18 7h1M5 17h1M10 17h9"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/>',
+  help: '<circle cx="12" cy="12" r="9"/><path d="M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.6M12 17.2v.1"/>',
   models: '<path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M4 7.5l8 4.5 8-4.5M12 12v9"/>',
   trash: '<path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/>',
   download: '<path d="M12 4v11M7 10l5 5 5-5M5 20h14"/>',
@@ -29,6 +31,7 @@ const ICON = {
   refresh: '<path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7"/>', back: '<path d="M15 5l-7 7 7 7"/>',
   bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
   server: '<rect x="3" y="4" width="18" height="6" rx="2"/><rect x="3" y="14" width="18" height="6" rx="2"/><path d="M7 7h.01M7 17h.01"/>',
+  close: '<path d="M6 6l12 12M18 6L6 18"/>',
   scan: '<path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3M4 12h16"/>',
   check: '<path class="tick" d="M5 12.5l4.5 4.5L19 7.5"/>',
   mic: '<rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>', speaker: '<path d="M4 9.5v5h3.5L12 18.5v-13L7.5 9.5zM15.5 9a4 4 0 0 1 0 6M18 6.5a8 8 0 0 1 0 11"/>',
@@ -59,9 +62,26 @@ const machine = () => store.machines[store.active] || store.machines[0] || null;
 /* ---------------------------------------------------------------- utilitats */
 function toast(msg, ms = 2800) {
   const box = $('#toasts'), t = document.createElement('div');
-  t.className = 'toast'; t.textContent = msg;
-  while (box.children.length >= 2) box.firstElementChild.remove();
-  box.appendChild(t); setTimeout(() => t.remove(), ms);
+  t.className = 'toast'; t.setAttribute('role', 'status'); t.textContent = msg;
+  while (box.children.length >= 3) box.firstElementChild.remove();
+  box.appendChild(t);
+  let x0 = null, dx = 0, timer = setTimeout(() => dismiss(0), ms);
+  const dismiss = (dir) => {
+    clearTimeout(timer); if (!t.isConnected) return;
+    if (!dir) { t.classList.add('out'); setTimeout(gone, 200); return; }
+    t.style.transition = 'transform .18s var(--ease), opacity .18s'; t.style.transform = `translateX(${dir * 120}%)`; t.style.opacity = '0'; setTimeout(gone, 190);
+  };
+  const gone = () => { t.remove(); if (!box.children.length) try { box.hidePopover(); } catch {} };
+  t.addEventListener('pointerdown', (e) => { x0 = e.clientX; dx = 0; clearTimeout(timer); t.setPointerCapture(e.pointerId); t.style.transition = 'none'; });
+  t.addEventListener('pointermove', (e) => { if (x0 === null) return; dx = e.clientX - x0; t.style.transform = `translateX(${dx}px)`; t.style.opacity = String(Math.max(0.2, 1 - Math.abs(dx) / 220)); });
+  const end = () => { if (x0 === null) return; x0 = null; if (Math.abs(dx) > 60) return dismiss(Math.sign(dx)); t.style.transition = 'transform .18s var(--ease), opacity .18s'; t.style.transform = ''; t.style.opacity = ''; timer = setTimeout(() => dismiss(0), 2000); };
+  t.addEventListener('pointerup', end); t.addEventListener('pointercancel', end);
+  raiseToasts();
+}
+// Les alertes viuen a la capa superior (popover) perquè quedin per sobre de les fulles i no es vegin borroses.
+function raiseToasts() {
+  const box = $('#toasts'); if (!box?.children.length) return;
+  try { box.hidePopover(); } catch {} try { box.showPopover(); } catch {}
 }
 function ago(ts) {
   const s = Math.round((Date.now() - ts) / 1000);
@@ -125,7 +145,7 @@ async function connect() {
   const ctrl = new AbortController(); streamCtrl = ctrl;
   try {
     state.info = await api('/api/info');
-    const res = await fetch(`${m.url}/api/stream`, { headers: { Authorization: `Bearer ${m.token}` }, signal: ctrl.signal, cache: 'no-store' });
+    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' });
     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;
@@ -147,13 +167,37 @@ async function connect() {
     state.lastError = e.message === 'Failed to fetch' || e.name === 'TypeError' ? (location.protocol === 'https:' && /^http:\/\/(127\.0\.0\.1|localhost)/.test(m.url) ? 'El navegador no deixa que aquesta web parli amb aquest ordinador. Prova Chrome, o engega nio amb --local.' : 'No arribo a l’ordinador') : e.message;
     render();
     if (e.fatal) return;
+    if (m.kind === 'vps' && m.via && retry >= 2) autoReconnect(m);
     setTimeout(() => machine() && !ctrl.signal.aborted && connect(), Math.min(15000, 1000 * 2 ** retry++));
   }
 }
+// Un servidor caigut es torna a connectar sol: un altre ordinador connectat hi entra per SSH i en desa l'adreça nova.
+const reconTry = new Map();
+async function autoReconnect(m) {
+  const t = reconTry.get(m.via) || { at: 0, n: 0, busy: false };
+  if (t.busy || t.n >= 3 || Date.now() - t.at < 45000) return;
+  t.busy = true; t.at = Date.now(); t.n++; reconTry.set(m.via, t);
+  try {
+    let helper = null;
+    for (const h of store.machines) {
+      if (h.url === m.url || h.kind === 'vps' || h.url.startsWith('demo:')) continue;
+      try { const r = await fetch(`${h.url}/api/info`, { headers: { Authorization: `Bearer ${h.token}` }, cache: 'no-store', signal: AbortSignal.timeout(5000) }); if (r.ok) { helper = h; break; } } catch { /* prova el següent */ }
+    }
+    if (!helper) return;
+    toast(`Reconnectant amb ${m.name}…`);
+    const r = await sshAdd(m.via, () => {}, helper);
+    const ms = store.machines, i = ms.findIndex((x) => x.via === m.via && x.kind === 'vps');
+    if (i < 0) return;
+    ms[i].url = r.url; ms[i].token = r.token; store.machines = ms;
+    reconTry.delete(m.via); retry = 0;
+    if (store.active === i) connect();
+    toast(`${ms[i].name} torna a ser aquí`);
+  } catch (e) { toast(`No he pogut reconnectar: ${e.message}`); } finally { t.busy = false; }
+}
 // Posa nom i identificador a l'ordinador actiu i fusiona els duplicats (el mateix ordinador desat amb dues adreces: wifi i 127.0.0.1).
 function renameMachine(host, id) {
   let ms = store.machines; const cur = ms[store.active]; if (!cur) return;
-  if (host) cur.name = host;
+  if (host && !cur.renamed) cur.name = host;
   if (id) {
     cur.id = id;
     const keep = cur.url, list = ms.filter((m) => m === cur || m.id !== id);
@@ -165,6 +209,9 @@ function renameMachine(host, id) {
 function handle(msg) {
   const r = state.route;
   switch (msg.type) {
+    case 'device':
+      if (!isPhone() && msg.device !== deviceId()) { if ($('#qrBox')) closeSheet(); toast('Mòbil connectat correctament', 2000); }
+      break;
     case 'hello':
       state.sessions = new Map(msg.sessions.map((s) => [s.id, s]));
       state.approvals = new Map(msg.approvals.map((a) => [a.id, a]));
@@ -266,9 +313,11 @@ const VIEWS = {
   ordinadors: { label: 'Ordinadors', icon: ICON.machine, group: 'Ordinadors' },
   models: { label: 'Models', icon: ICON.models, group: 'Ordinadors' },
   mobil: { label: 'Xat local', icon: ICON.phone, group: 'Eines' },
-  pissarra: { label: 'Pissarra', icon: ICON.board, group: 'Eines' }
+  pissarra: { label: 'Pissarra', icon: ICON.board, group: 'Eines' },
+  ajustos: { label: 'Ajustos', icon: ICON.settings, group: 'Compte' },
+  ajuda: { label: 'Ajuda', icon: ICON.help, group: 'Compte' }
 };
-const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', ordinadors: '#/ordinadors', models: '#/models', mobil: '#/xat-local', pissarra: '#/pissarra' };
+const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', ordinadors: '#/ordinadors', models: '#/models', mobil: '#/xat-local', pissarra: '#/pissarra', ajustos: '#/ajustos', ajuda: '#/ajuda' };
 const NEEDS_MACHINE = new Set(['sessions', 'approvals', 'models', 'session']);
 function parseRoute() {
   const h = location.hash.replace(/^#\/?/, '');
@@ -300,7 +349,7 @@ function renderChrome() {
   const m = machine(), sc = $('#sideConn');
   sc.innerHTML = m ? `<i class="dot ${state.connected ? 'on' : ''}"></i><span>${esc(m.name)}</span>${svg(ICON.chev)}` : `<i class="dot"></i><span>Afegeix un ordinador</span>${svg(ICON.plus)}`;
   sc.setAttribute('role', 'button'); sc.tabIndex = 0; sc.classList.add('switch'); sc.dataset.act = 'machines'; sc.title = 'Ordinadors';
-  const more = ['models', 'mobil', 'pissarra'].includes(r.name);
+  const more = ['mobil', 'pissarra', 'ajustos', 'ajuda'].includes(r.name);
   $('#tabbar').innerHTML = [['sessions', ICON.sessions, 'Sessions', active === 'sessions'], ['approvals', ICON.approvals, 'Aprovacions', active === 'approvals'], ['ordinadors', ICON.machine, 'Ordinadors', active === 'ordinadors']]
     .map(([k, ic, l, on]) => `<a href="${HASH[k]}" ${on ? 'aria-current="page"' : ''}>${svg(ic)}<span>${l}</span>${k === 'approvals' && n ? `<b class="badge">${n}</b>` : ''}</a>`).join('')
     + `<button type="button" data-act="more" ${more ? 'aria-current="page"' : ''}>${svg(ICON.more)}<span>Més</span></button>`;
@@ -326,7 +375,7 @@ function render() {
   else if (board) { view.innerHTML = '<div class="page"><div class="board-root" id="boardRoot"></div></div>'; window.NioBoard?.mount($('#boardRoot')); brainsForBoard(); }
   else {
     const html = r.name === 'mobil' ? viewLocal() : null;
-    view.innerHTML = html && local.engine ? html : `<div class="page">${html ? html : r.name === 'ordinadors' ? viewComputers() : r.name === 'sessions' ? viewSessions() : r.name === 'approvals' ? viewApprovals() : viewModels()}</div>`;
+    view.innerHTML = html && local.engine ? html : `<div class="page">${html ? html : r.name === 'ordinadors' ? viewComputers() : r.name === 'sessions' ? viewSessions() : r.name === 'approvals' ? viewApprovals() : r.name === 'ajustos' ? viewSettings() : r.name === 'ajuda' ? viewHelp() : viewModels()}</div>`;
     if (r.name === 'mobil') bindLocal();
     if (r.name === 'models' && machine()) loadOllama();
   }
@@ -336,6 +385,7 @@ function render() {
 }
 
 /* ---------- Ordinadors (llista, afegir i detall de l'actiu) */
+const deviceId = () => { let d = LS.get('nio.device', ''); if (!d) { d = Math.random().toString(36).slice(2, 12); LS.set('nio.device', d); } return d; };
 const isPhone = () => isTouch || matchMedia('(max-width: 820px)').matches;
 const cmdBox = (c) => `<div class="cmd big"><code>${esc(c)}</code><button class="btn sm" data-copy="${esc(c)}" type="button">${svg(ICON.copy)}Copia</button></div>`;
 function computerCard(m, i) {
@@ -343,7 +393,7 @@ function computerCard(m, i) {
   const st = on ? (state.connected ? '<span class="chip ok"><i class="dot on"></i>Connectat</span>' : `<span class="chip">${esc(state.lastError ? 'Sense connexió' : 'Connectant…')}</span>`) : '';
   return `<div class="card computer ${on ? 'active' : ''}">
     <div class="row" style="flex-wrap:nowrap;gap:12px;align-items:flex-start"><span class="c-ico">${svg(machineIcon(m))}</span><div class="grow"><div class="row between"><b>${esc(m.name)}</b>${st}</div><div class="muted small">${esc(machineSub(m))}</div></div></div>
-    <div class="row c-actions">${on ? `<button class="btn ink sm" data-act="open-sessions" type="button">Sessions</button>${isPhone() ? '' : `<button class="btn sm" data-act="mobile-qr" type="button">Continua al mòbil</button>`}` : `<button class="btn ink sm" data-machine="${i}" type="button">Obre</button>`}${m.kind === 'vps' && m.via && (!on || !state.connected) ? `<button class="btn sm" data-reconnect="${i}" type="button">Torna a connectar</button>` : ''}<button class="btn ghost sm" data-forget="${i}" type="button">Oblida</button></div>
+    <div class="row c-actions">${on ? `<button class="btn ink sm" data-act="open-sessions" type="button">Sessions</button>${isPhone() ? '' : `<button class="btn sm" data-act="mobile-qr" type="button">Continua al mòbil</button>`}` : `<button class="btn ink sm" data-machine="${i}" type="button">Obre</button>`}${m.kind === 'vps' && m.via && (!on || !state.connected) ? `<button class="btn sm" data-reconnect="${i}" type="button">Torna a connectar</button>` : ''}<button class="btn ghost sm" data-rename="${i}" type="button">Canvia el nom</button><button class="btn ghost sm" data-forget="${i}" type="button">Oblida</button></div>
   </div>`;
 }
 // Ajuda sempre a mà: com es fa cada cosa, i què mirar si no connecta.
@@ -356,9 +406,16 @@ function helpPanel(open) {
     ${q('Què cal al servidor', `<ul><li>Entrar-hi per SSH sense contrasenya. Si no, executa <span class="mono">ssh-copy-id usuari@servidor</span> a l’ordinador.</li><li>Node.js 18 o més nou.</li><li>Claude Code instal·lat i amb sessió iniciada: entra al servidor i executa <span class="mono">claude</span> un cop.</li><li>Linux amb <span class="mono">curl</span> o <span class="mono">wget</span> (nio hi instal·la <span class="mono">cloudflared</span> sol).</li></ul>`)}
     ${q('No es connecta', `<ul><li><b>«No arribo a l’ordinador»</b>: comprova que nio continua engegat al terminal.</li><li><b>El servidor ha deixat de respondre</b>: si s’ha reiniciat, l’adreça canvia. Prem <b>Torna a connectar</b> a la seva targeta.</li><li><b>Safari no connecta</b>: obre nio amb <span class="mono">npx nio-cat --local</span>, o fes servir Chrome.</li><li><b>La clau no és vàlida</b>: torna a afegir l’ordinador amb el codi nou.</li></ul>`)}
     ${q('D’on es gasta', `<p>nio no fa cap crida pel seu compte. Cada agent treballa a l’ordinador o al servidor amb el teu compte (Claude, Codex, Grok…). Ollama funciona al teu ordinador i no gasta res.</p>`)}
-    <div class="row"><button class="btn sm" type="button" data-act="tour">Fes el tutorial</button></div>
   </div></section>`;
 }
+function viewSettings() {
+  const head = '<div class="top"><div><h1>Ajustos</h1><p>Avisos al mòbil i veu.</p></div></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>' : ''}<div class="row"><button class="btn ink grow" data-act="push" type="button">Activa els avisos</button><button class="btn" data-act="push-test" type="button">Envia’n un de prova</button></div></div></section>` : '';
+  return `${head}<div class="stack-lg" style="max-width:640px">${avisos}${voicePanel()}</div>`;
+}
+function viewHelp() {
+  return `<div class="top"><div><h1>Ajuda</h1><p>Com es fa cada cosa i què mirar si no connecta.</p></div><button class="btn ink" type="button" data-act="tour">Fes el tutorial</button></div><div style="max-width:720px">${helpPanel()}</div>`;
+}
 function viewComputers() {
   const ms = store.machines, m = machine(), info = state.info;
   const head = `<div class="top"><div><h1>Ordinadors</h1><p>On treballen els agents: el teu ordinador o un servidor. Tria’n un i dona-li feina.</p></div><button class="btn ink" id="addComputer" data-act="add-computer" type="button">${svg(ICON.plus)}Afegeix ordinador</button></div>`;
@@ -366,19 +423,16 @@ function viewComputers() {
     const steps = isPhone()
       ? [['Engega nio a l’ordinador', 'Al terminal: <span class="mono">npx nio-cat</span>.'], ['Escaneja el QR', 'O escriu el codi <span class="mono">nio-…</span> que surt al terminal.'], ['Dona feina a un agent', 'Crea una sessió i segueix-la en directe.']]
       : [['Engega nio', 'Al terminal: <span class="mono">npx nio-cat</span>. S’obre aquesta web ja connectada.'], ['O afegeix un servidor', 'Amb SSH: <span class="mono">usuari@servidor</span>. nio hi fa la resta.'], ['Continua al mòbil', 'Amb un QR o un codi, quan vulguis.']];
-    return `${head}<div class="panel empty">${bot('idle')}<h2>Connecta el teu primer ordinador</h2><ol class="stepper">${steps.map(([t, d], i) => `<li><span class="n">${i + 1}</span><div><b>${t}</b><p>${d}</p></div></li>`).join('')}</ol><button class="btn ink" data-act="add-computer" type="button">${svg(ICON.plus)}Afegeix ordinador</button></div>${helpPanel()}`;
+    return `${head}<div class="panel empty">${bot('idle')}<h2>Connecta el teu primer ordinador</h2><ol class="stepper">${steps.map(([t, d], i) => `<li><span class="n">${i + 1}</span><div><b>${t}</b><p>${d}</p></div></li>`).join('')}</ol><button class="btn ink" data-act="add-computer" type="button">${svg(ICON.plus)}Afegeix ordinador</button></div>`;
   }
   const detail = m && state.connected ? `<h2 class="sec">${esc(m.name)}</h2>
-  <div class="grid2">
+  <div class="grid2 one">
     <div class="stack">
       <section class="panel"><header><h2>Agents</h2><button class="btn sm ghost" data-act="refresh-agents" type="button">${svg(ICON.refresh)}Torna a detectar</button></header><div class="body">${info ? info.agents.map((a) => `<div class="agent-row"><i class="dot ${a.available ? 'on' : ''}"></i><div class="grow"><div class="row"><span class="agent-tag" data-agent="${esc(a.id)}">${esc(a.name)}</span>${a.beta ? '<span class="chip beta">beta</span>' : ''}</div><div class="muted small mono">${esc(a.available ? a.version || 'Disponible' : a.login)}</div></div></div>`).join('') : '<p class="muted">Carregant…</p>'}</div></section>
       ${info ? `<section class="panel"><header><h2>Sistema</h2></header><div class="body"><dl class="kv"><dt>Sistema</dt><dd>${esc(info.platform)} · ${esc(info.user)}</dd><dt>Versió de nio</dt><dd>${esc(info.version)}</dd></dl></div></section>` : ''}
     </div>
-    <div class="stack">
-      <section class="panel"><header><h2>Avisos al mòbil</h2></header><div class="body stack"><p class="small">Rep un avís quan un agent et demana permís o acaba la feina.</p>${isIOS && !standalone ? '<p class="muted small">A l’iPhone, primer afegeix nio a la pantalla d’inici (Comparteix → Afegeix a la pantalla d’inici) i obre’l des d’allà.</p>' : ''}<div class="row"><button class="btn ink grow" data-act="push" type="button">Activa els avisos</button><button class="btn" data-act="push-test" type="button">Envia’n un de prova</button></div></div></section>
-    </div>
   </div>` : '';
-  return `${head}<div class="computers">${ms.map(computerCard).join('')}</div>${detail}${voicePanel()}${helpPanel()}`;
+  return `${head}<div class="computers">${ms.map(computerCard).join('')}</div>${detail}`;
 }
 
 /* ---------- Afegir un ordinador: aquest, un servidor per SSH o un codi */
@@ -390,8 +444,12 @@ async function probeLocal() {
   } catch { return null; }
 }
 // Afegeix un servidor per SSH des de l'ordinador actiu. El progrés arriba línia a línia.
-async function sshAdd(target, onStep) {
-  const m = machine(); if (!m) throw new Error('Primer connecta un ordinador');
+function sshHelper() {
+  const a = machine(), ok = (x) => x && x.kind !== 'vps' && !x.url.startsWith('demo:');
+  return ok(a) ? a : store.machines.find(ok) || null;
+}
+async function sshAdd(target, onStep, via) {
+  const m = via || sshHelper(); if (!m) throw new Error('Primer connecta un ordinador');
   const res = await fetch(`${m.url}/api/ssh/add`, { method: 'POST', headers: { Authorization: `Bearer ${m.token}`, 'content-type': 'application/json' }, body: JSON.stringify({ target }) });
   if (!res.ok || !res.body) throw new Error((await res.json().catch(() => ({}))).error || 'Aquest ordinador no pot afegir servidors. Actualitza nio.');
   const reader = res.body.getReader(), dec = new TextDecoder(); let buf = '', last = null;
@@ -400,7 +458,7 @@ async function sshAdd(target, onStep) {
     buf += dec.decode(value, { stream: true }); let i;
     while ((i = buf.indexOf('\n')) >= 0) {
       const o = JSON.parse(buf.slice(0, i)); buf = buf.slice(i + 1);
-      if (o.step) onStep(o.step); else last = o;
+      if (o.step) onStep(o.step); else if (!o.ping) last = o;
     }
   }
   if (!last || last.error) throw new Error(last?.error || 'S’ha tallat la connexió');
@@ -415,56 +473,59 @@ async function startScan(video, onText) {
 }
 function addComputerSheet(tab, opts = {}) {
   const phone = isPhone(), canScan = 'BarcodeDetector' in window && !!navigator.mediaDevices?.getUserMedia;
-  const TABS = phone ? [['code', 'Codi o QR'], ['vps', 'Servidor (SSH)']] : [['local', 'Aquest ordinador'], ['vps', 'Servidor (SSH)'], ['code', 'Tinc un codi']];
+  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>`;
+  const todo = (items) => `<ol class="todo">${items.map((x, i) => `<li><span class="n">${i + 1}</span><div>${x}</div></li>`).join('')}</ol>`;
+  const live = (t) => `<p class="live"><i class="pulse"></i>${t}</p>`;
   openSheet('', (sh) => {
-    sh.innerHTML = `<div class="wiz-head"><div class="grab"></div><div class="row between" style="flex-wrap:nowrap"><h2>Afegeix un ordinador</h2><button class="icon-btn" type="button" data-close aria-label="Tanca">×</button></div><div class="seg" id="addTabs" role="group">${TABS.map(([k, l]) => `<button type="button" data-tab="${k}">${l}</button>`).join('')}</div></div><div class="wiz-body" id="addBody"></div>`;
+    sh.innerHTML = `<div class="wiz-head"><div class="grab"></div><div class="row between" style="flex-wrap:nowrap"><h2>Afegeix un ordinador</h2><button class="icon-btn" type="button" data-close aria-label="Tanca">${svg(ICON.close)}</button></div><div class="seg" id="addTabs" role="group" aria-label="Com vols connectar-lo">${TABS.map(([k, l, ic]) => `<button type="button" data-tab="${k}">${svg(ic)}<span>${l}</span></button>`).join('')}</div></div><div class="wiz-body" id="addBody"></div>`;
     const body = $('#addBody', sh);
     const stop = () => { clearTimeout(poll); scan?.stop(); scan = null; shown = ''; };
     const set = (key, html) => { if (key === shown) return false; shown = key; body.innerHTML = html; return true; };
     const draw = () => {
-      stop(); if (cur === 'vps' && !hosts.length && machine()) api('/api/ssh/hosts').then((h) => { hosts = h; if (cur === 'vps' && shown === 'vps') { shown = ''; vps(); } }).catch(() => {});
+      stop(); if (cur === 'vps' && !hosts.length && machine()) api('/api/ssh/hosts').then((h) => { hosts = h; if (cur === 'vps' && shown === 'vps' && !$('#sshSteps', sh)?.children.length) { shown = ''; vps(); } }).catch(() => {});
       $$('#addTabs button', sh).forEach((b) => b.setAttribute('aria-pressed', b.dataset.tab === cur));
       body.scrollTop = 0;
       if (cur === 'local') local(); else if (cur === 'vps') vps(); else code();
     };
     const local = async () => {
-      set('wait', '<p class="muted small">Mirant si nio funciona en aquest ordinador…</p>');
+      set('wait', live('Mirant si nio funciona en aquest ordinador…'));
       const d = await probeLocal(); if (cur !== 'local') return;
       const saved = d && store.machines.findIndex((x) => x.id === d.id);
-      if (d && saved >= 0) set('saved', `<p class="wiz-q">Aquest ordinador ja és a la llista</p><p class="muted small">${esc(d.name)}</p><div class="row"><button class="btn ink" type="button" data-open-saved="${saved}">Obre</button></div>`);
-      else if (d) set('found', `<p class="wiz-q">nio funciona en aquest ordinador</p><p class="muted small">Aquest navegador encara no hi té accés. Torna a engegar nio perquè obri el panell ja connectat:</p>${cmdBox('npx nio-cat')}`);
-      else set('none', `<p class="wiz-q">Engega nio en aquest ordinador</p><p class="muted small">Al terminal, des de la carpeta dels teus projectes:</p>${cmdBox('npx nio-cat')}<p class="muted small">S’obrirà aquest panell ja connectat. Cal Node.js 18 o més nou.</p>`);
+      if (d && saved >= 0) set('saved', `${intro('Aquest ordinador ja és a la llista', 'El tens connectat com a «' + esc(d.name) + '».')}<div class="row"><button class="btn ink" type="button" data-open-saved="${saved}">Obre sessions</button></div>`);
+      else if (d) set('found', `${intro('nio funciona en aquest ordinador', 'Aquest navegador encara no hi té accés. Torna a engegar nio i obrirà el panell ja connectat.')}${cmdBox('npx nio-cat')}`);
+      else set('none', `${intro('Engega nio en aquest ordinador')}${todo(['Obre un terminal a la carpeta dels teus projectes.', `Executa:${cmdBox('npx nio-cat')}`, 'S’obrirà aquest panell ja connectat.'])}${live('Esperant que nio s’engegui…')}<p class="hint">Cal Node.js 18 o més nou.</p>`);
       if (saved < 0 || !d) poll = setTimeout(local, 3000);
     };
     const runSsh = async (target) => {
-      const steps = $('#sshSteps', sh), btn = $('#sshForm button', sh); if (!steps) return; btn.disabled = true; steps.innerHTML = '';
+      const steps = $('#sshSteps', sh), btn = $('#sshForm button', sh); if (!steps || !target) return; btn.disabled = true; steps.innerHTML = ''; shown = 'run';
       const add = (t) => { $$('li.on', steps).forEach((l) => { l.className = 'ok'; }); steps.insertAdjacentHTML('beforeend', `<li class="on">${esc(t)}…</li>`); };
       try {
-        const r = await sshAdd(target, add);
+        add(`Connectant amb ${target}`);
+        const r = await sshAdd(target, add, sshHelper());
         LS.set('nio.lastSsh', target);
         const old = store.machines.findIndex((x) => x.via === target && x.kind === 'vps');
-        if (old >= 0) { const ms = store.machines; ms.splice(old, 1); store.machines = ms; store.active = Math.min(store.active, Math.max(0, ms.length - 1)); }
-        addMachine({ url: r.url, token: r.token, name: r.host, kind: 'vps', via: target });
+        let keepName = null; if (old >= 0) { const ms = store.machines; if (ms[old].renamed) keepName = ms[old].name; ms.splice(old, 1); store.machines = ms; store.active = Math.min(store.active, Math.max(0, ms.length - 1)); }
+        addMachine({ url: r.url, token: r.token, name: keepName || r.host, kind: 'vps', via: target });
+        if (keepName) { const ms = store.machines; ms[store.active].renamed = true; store.machines = ms; }
         shown = 'vps-ok';
-        body.innerHTML = `<p class="wiz-q">${esc(r.host)} és a punt</p>${r.claude ? '<p class="muted small">Ja el pots fer servir: crea-hi una sessió amb Claude Code.</p>' : '<p class="muted small">Claude Code no hi és. Entra al servidor, instal·la’l i inicia sessió amb <span class="mono">claude</span>.</p>'}<div class="row"><a class="btn ink" href="#/sessions" data-close>Obre sessions</a><button class="btn" type="button" data-act="mobile-qr">Continua al mòbil</button></div>`;
-      } catch (err) { $$('li.on', steps).forEach((l) => { l.className = 'err'; }); steps.insertAdjacentHTML('beforeend', `<li class="err">${esc(err.message)}</li>`); btn.disabled = false; }
+        body.innerHTML = `${intro(`${esc(r.host)} és a punt`, r.claude ? 'Ja el pots fer servir: crea-hi una sessió amb Claude Code.' : 'Claude Code no hi és. Entra al servidor, instal·la’l i inicia sessió amb <span class="mono">claude</span>.')}<div class="row"><a class="btn ink" href="#/sessions" data-close>Obre sessions</a><button class="btn" type="button" data-act="mobile-qr">Continua al mòbil</button></div>`;
+      } catch (err) { $$('li.on', steps).forEach((l) => { l.className = 'err'; }); steps.insertAdjacentHTML('beforeend', `<li class="err">${esc(err.message)}</li>`); btn.disabled = false; shown = 'vps'; }
     };
     const vps = () => {
-      const m = machine();
-      if (!m) return set('vps-no', `<p class="wiz-q">Primer, un ordinador</p><p class="muted small">El servidor s’afegeix des d’un ordinador que ja tinguis connectat, perquè és ell qui hi entra per SSH.</p>${phone ? '' : '<button class="btn" type="button" data-tab="local">Afegeix aquest ordinador</button>'}`);
-      set('vps', `<p class="wiz-q">Un servidor amb Claude Code</p>
-        <p class="muted small">${esc(m.name)} hi entra per SSH, hi engega nio amb un túnel segur i el deixa llest per al mòbil.</p>
-        ${hosts.length ? `<div class="row">${hosts.map((h) => `<button class="chip" type="button" data-host="${esc(h.target)}" title="${esc(h.host)}">${esc(h.target)}</button>`).join('')}</div>` : ''}
-        <form class="pair-form" id="sshForm"><input type="text" id="sshIn" value="${esc(opts.target || LS.get('nio.lastSsh', ''))}" placeholder="usuari@servidor" autocomplete="off" autocapitalize="off" spellcheck="false" required aria-label="Usuari i servidor"><button class="btn ink" type="submit">Afegeix</button></form>
+      const m = sshHelper();
+      if (!m) return set('vps-no', `${intro('Primer, un ordinador', 'El servidor s’afegeix des d’un ordinador (no des d’un altre servidor), perquè és ell qui hi entra per SSH.')}${phone ? '<p class="hint">Des del mòbil, connecta primer l’ordinador amb el codi o el QR.</p>' : '<div class="row"><button class="btn" type="button" data-tab="local">Afegeix aquest ordinador</button></div>'}`);
+      set('vps', `${intro('Un servidor amb Claude Code', `${esc(m.name)} hi entra per SSH, hi engega nio amb un túnel segur i el deixa llest per al mòbil.`)}
+        <form class="field-row" id="sshForm"><input type="text" id="sshIn" value="${esc(opts.target || LS.get('nio.lastSsh', ''))}" placeholder="usuari@servidor" autocomplete="off" autocapitalize="off" spellcheck="false" required aria-label="Usuari i servidor"><button class="btn ink" type="submit">Afegeix</button></form>
+        ${hosts.length ? `<div class="hosts"><span>Del teu <span class="mono">~/.ssh/config</span></span><div class="row">${hosts.map((h) => `<button class="chip" type="button" data-host="${esc(h.target)}" title="${esc(h.host)}">${esc(h.target)}</button>`).join('')}</div></div>` : ''}
         <ul class="steps" id="sshSteps"></ul>
-        <p class="muted small">Cal entrar-hi sense contrasenya (clau SSH) i que el servidor tingui Node.js 18 o més nou. Claude Code hi ha d’estar instal·lat i amb sessió iniciada.</p>`);
+        <ul class="checks"><li>Accés per SSH sense contrasenya (clau SSH)</li><li>Node.js 18 o més nou</li><li>Claude Code instal·lat i amb sessió iniciada</li></ul>`);
     };
     const code = () => {
-      set('code', `<p class="wiz-q">${phone ? 'Escaneja o escriu el codi' : 'Escriu el codi'}</p>
-        <form class="pair-form" id="pairForm"><input type="text" id="pairInput" placeholder="nio-…" autocomplete="off" autocapitalize="off" spellcheck="false" required aria-label="Codi de connexió"><button class="btn ink" type="submit">Connecta</button></form>
-        ${canScan ? `<button class="btn" type="button" data-scan>${svg(ICON.scan)}Escaneja un QR</button><video class="scan" id="scanVideo" playsinline muted hidden></video>` : phone ? '<p class="muted small">Per escanejar, obre la càmera del mòbil i apunta al QR: s’obrirà nio.</p>' : ''}
-        <p class="muted small">El codi surt al terminal, sota el QR, o a «Continua al mòbil».</p>`);
+      set('code', `${intro(phone ? 'Escaneja o escriu el codi' : 'Escriu el codi', 'Surt al terminal, sota el QR, o a «Continua al mòbil».')}
+        <form class="field-row" id="pairForm"><input type="text" id="pairInput" placeholder="nio-…" autocomplete="off" autocapitalize="off" spellcheck="false" required aria-label="Codi de connexió"><button class="btn ink" type="submit">Connecta</button></form>
+        ${canScan ? `<div class="or"><span>o</span></div><button class="btn block" type="button" data-scan>${svg(ICON.scan)}Escaneja un QR</button><video class="scan" id="scanVideo" playsinline muted hidden></video>` : phone ? '<p class="hint">Per escanejar, obre la càmera del mòbil i apunta al QR: s’obrirà nio.</p>' : ''}`);
     };
     sh.onclick = async (e) => {
       const t = e.target.closest('[data-tab]'); if (t) { cur = t.dataset.tab; return draw(); }
@@ -484,15 +545,29 @@ function addComputerSheet(tab, opts = {}) {
     };
     draw();
     if (opts.auto && cur === 'vps') setTimeout(() => runSsh(opts.target), 50);
-  }, 'wiz');
+  }, 'wiz compact');
 }
 function machinesSheet() {
   const ms = store.machines;
   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)); });
 }
+function renameSheet(i) {
+  const m = store.machines[i]; if (!m) return;
+  openSheet(`<h2>Canvia el nom</h2><p class="muted small">Només el veus tu, en aquest dispositiu. L’ordinador es continua dient «${esc(m.name)}» a la resta.</p>
+    <form class="field-row" id="renameForm"><input type="text" id="renameIn" value="${esc(m.name)}" maxlength="40" autocomplete="off" spellcheck="false" required aria-label="Nom de l’ordinador"><button class="btn ink" type="submit">Desa</button></form>`, (sh) => {
+    const inp = $('#renameIn', sh); setTimeout(() => { inp.focus(); inp.select(); }, 60);
+    $('#renameForm', sh).onsubmit = (e) => {
+      e.preventDefault(); e.stopPropagation();
+      const v = inp.value.trim(); if (!v) return;
+      const ms = store.machines; if (!ms[i]) return;
+      ms[i].name = v; ms[i].renamed = true; store.machines = ms; closeSheet(); render(); toast('Nom desat');
+    };
+  });
+}
 function moreSheet() {
-  openSheet(`<h2>Més</h2><div class="list">${['models', 'mobil', 'pissarra'].map((k) => `<a class="card row" href="${HASH[k]}" style="gap:12px">${svg(VIEWS[k].icon)}<b>${VIEWS[k].label}</b></a>`).join('')}<button class="card row" type="button" data-act="voice" style="gap:12px">${svg(ICON.mic)}<b>Veu</b></button><a class="card row" href="#/ordinadors" data-act="help" style="gap:12px"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16v.1"/></svg><b>Com es fa</b></a><button class="card row" type="button" data-act="tour" style="gap:12px"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.6M12 17.2v.1"/></svg><b>Tutorial</b></button></div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
+  const item = (k) => `<a class="card row" href="${HASH[k]}" style="gap:12px">${svg(VIEWS[k].icon)}<b>${VIEWS[k].label}</b></a>`;
+  openSheet(`<h2>Més</h2><div class="list">${['mobil', 'pissarra', 'ajustos', 'ajuda'].map(item).join('')}</div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
 }
 
 /* ---------- Sessions */
@@ -778,8 +853,8 @@ function renderComposer() {
 
 /* ---------- Fulls */
 function openSheet(html, onMount, cls) {
-  const d = $('#sheet'); d.classList.toggle('wiz', cls === 'wiz'); const si = $('#sheetIn'); si.onclick = si.onsubmit = si.oninput = si.onchange = null; si.innerHTML = cls === 'wiz' ? '' : `<div class="grab"></div>${html}`;
-  if (!d.open) d.showModal(); if (T.on) $('#tour').hidden = true;
+  const d = $('#sheet'); d.classList.toggle('wiz', !!cls?.startsWith('wiz')); d.classList.toggle('compact', cls === 'wiz compact'); const si = $('#sheetIn'); si.onclick = si.onsubmit = si.oninput = si.onchange = null; si.innerHTML = cls?.startsWith('wiz') ? '' : `<div class="grab"></div>${html}`;
+  if (!d.open) d.showModal(); raiseToasts(); if (T.on) $('#tour').hidden = true;
   onMount?.($('#sheetIn'));
 }
 const closeSheet = () => { const d = $('#sheet'); if (d.open) d.close(); };
@@ -817,7 +892,7 @@ async function newSessionSheet(preset = {}) {
     const body = () => { $('#wizBody', sh).innerHTML = VIEWS_[step](); after(); };
     const head = () => {
       const last = step === STEPS.length - 1;
-      $('#wizHead', sh).innerHTML = `<div class="grab"></div><div class="row between" style="flex-wrap:nowrap"><h2>Nova sessió</h2><button class="icon-btn" type="button" data-close aria-label="Tanca">×</button></div>
+      $('#wizHead', sh).innerHTML = `<div class="grab"></div><div class="row between" style="flex-wrap:nowrap"><h2>Nova sessió</h2><button class="icon-btn" type="button" data-close aria-label="Tanca">${svg(ICON.close)}</button></div>
         <div class="wiz-dots">${STEPS.map((n, i) => `<button type="button" class="wiz-dot ${i === step ? 'on' : i < step ? 'done' : ''}" data-step="${i}" ${i < step ? '' : 'disabled'} aria-label="${i + 1}. ${n}"></button>`).join('')}</div>
         <p class="muted small">Pas ${step + 1} de ${STEPS.length} · ${STEPS[step]}</p>`;
       $('#wizFoot', sh).innerHTML = `<button class="btn ghost" type="button" ${step ? 'data-back' : 'data-close'}>${step ? 'Enrere' : 'Cancel·la'}</button><button class="btn ink" type="button" ${last ? 'data-start' : 'data-next'}>${last ? 'Comença' : 'Continua'}</button>`;
@@ -858,7 +933,7 @@ async function newSessionSheet(preset = {}) {
     };
 
     const VIEWS_ = [
-      () => `<p class="wiz-q">Quin agent vols fer servir?</p><div class="picker">${agents.map((a) => `<button type="button" class="pick ${a.available ? '' : 'off'}" data-agent-id="${esc(a.id)}" aria-pressed="${a.id === sel.agent}"><div class="row between"><span class="agent-tag" data-agent="${esc(a.id)}">${esc(a.name)}</span>${a.beta ? '<span class="chip beta">beta</span>' : ''}</div><div class="sub">${esc(a.available ? a.version || 'Disponible' : 'No instal·lat')}</div></button>`).join('')}</div>`,
+      () => `<p class="wiz-q">Quin agent vols fer servir?</p><div class="picker">${[...agents].sort((x, y) => (y.available ? 1 : 0) - (x.available ? 1 : 0)).map((a) => `<button type="button" class="pick ${a.available ? '' : 'off'}" data-agent-id="${esc(a.id)}" aria-pressed="${a.id === sel.agent}"><div class="row between"><span class="agent-tag" data-agent="${esc(a.id)}">${esc(a.name)}</span>${a.beta ? '<span class="chip beta">beta</span>' : ''}</div><div class="sub">${esc(a.available ? a.version || 'Disponible' : 'No instal·lat')}</div></button>`).join('')}</div>`,
       () => {
         const crumbs = fsd ? fsd.path.split(/[\\/]/).filter(Boolean) : [];
         const quick = [...recents.map((p) => ({ path: p, name: basename(p) })), ...projects.filter((p) => !recents.includes(p.path))].slice(0, 8).map((p) => `<button type="button" class="chip" data-fs="${esc(p.path)}">${esc(p.name)}</button>`).join('');
@@ -934,7 +1009,7 @@ async function modelSheet(s) {
   const row = (v, name, note) => `<button class="card" type="button" data-model="${esc(v)}" aria-pressed="${(s.model || '') === v}"><b>${esc(name)}</b>${note ? `<div class="muted small" style="margin-top:4px">${esc(note)}</div>` : ''}</button>`;
   openSheet(`<h2>Model</h2><p class="muted small">${esc(AGENT_NAMES[s.agent] || s.agent)}. El canvi s’aplica a partir del pròxim missatge.</p>
     <div class="list">${row('', 'Per defecte', 'El que l’agent faci servir sol')}${picks.map((x) => row(...x)).join('')}</div>
-    <form class="pair-form" id="modelForm"><input type="text" id="modelFree" placeholder="Un altre model (nom exacte)" value="${picks.some((x) => x[0] === s.model) ? '' : esc(s.model || '')}" autocapitalize="off" spellcheck="false" aria-label="Nom del model"><button class="btn ink" type="submit">Desa</button></form>`, (sh) => {
+    <div class="or"><span>o un altre model</span></div><form class="field-row" id="modelForm"><input type="text" id="modelFree" placeholder="Nom exacte del model" value="${picks.some((x) => x[0] === s.model) ? '' : esc(s.model || '')}" autocapitalize="off" spellcheck="false" aria-label="Nom del model"><button class="btn ink" type="submit">Desa</button></form>`, (sh) => {
     const save = async (model) => { try { const sum = await api(`/api/sessions/${s.id}`, { method: 'PATCH', body: { model } }); state.sessions.set(s.id, sum); closeSheet(); renderSessionHead(); } catch (e) { toast(e.message); } };
     $$('[data-model]', sh).forEach((b) => (b.onclick = () => save(b.dataset.model)));
     $('#modelForm', sh).onsubmit = (e) => { e.preventDefault(); e.stopPropagation(); save($('#modelFree', sh).value.trim()); };
@@ -1112,8 +1187,10 @@ window.NioBrains = {
     }
     if (id === 'local') {
       if (!local.engine) throw new Error('Primer obre un model a «Xat local»');
-      const r = await local.engine.chat.completions.create({ messages, temperature: 0.2 });
-      return r.choices[0]?.message?.content || '';
+      try {
+        const r = await local.engine.chat.completions.create({ messages, temperature: 0.2 });
+        return r.choices[0]?.message?.content || '';
+      } catch (e) { if (gpuLost(e)) { await recoverLocal(''); throw new Error('La GPU del mòbil s’ha reiniciat. Torna-ho a provar quan el model s’hagi carregat.'); } throw e; }
     }
     throw new Error('Aquest model ja no està disponible');
   }
@@ -1175,6 +1252,7 @@ function bindLocal() {
   for (const m of local.messages) feed.appendChild(m.role === 'user' ? el(`<div class="msg-user">${esc(m.content)}</div>`) : el(`<div class="msg-ai">${md(stripThink(m.content))}</div>`));
   feed.scrollTop = feed.scrollHeight;
   const ta = $('#lmsg');
+  if (local.draft) { ta.value = local.draft; local.draft = ''; autogrow(ta); }
   ta.addEventListener('input', () => autogrow(ta));
   ta.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey && !isTouch) { e.preventDefault(); sendLocal(); } });
   $('#lsend').onclick = () => (local.busy ? stopLocal() : sendLocal());
@@ -1193,6 +1271,15 @@ const LOCAL_SYSTEM = [
   'Si no saps una cosa, digues «no ho sé». No t’inventis dades, noms ni enllaços.',
   'No facis preguntes seguides ni allargassis la conversa. No facis servir emojis.'
 ].join(' ');
+const gpuLost = (e) => /mapAsync|GPUBuffer|GPUDevice|Instance reference|device (was )?lost|Device is lost|context lost/i.test(`${e?.message || e}`);
+// La GPU del mòbil es reinicia si l'app va al fons o falta memòria: es deixa l'engine mort i es torna a carregar (els pesos ja són a la memòria cau).
+async function recoverLocal(text) {
+  const id = local.model || LS.get('nio.localModel', LOCAL_MODELS[0].id);
+  try { await local.engine?.unload?.(); } catch { /* ja és mort */ }
+  local.engine = null; local.model = null; local.draft = text || '';
+  toast('La GPU del mòbil s’ha reiniciat. Torno a carregar el model…', 5000);
+  await loadLocal(id);
+}
 async function loadLocal(id) {
   local.loading = true; local.progress = 0; local.status = 'Preparant…'; render();
   try {
@@ -1225,9 +1312,13 @@ async function sendLocal() {
       acc += c.choices[0]?.delta?.content || ''; out.innerHTML = md(stripThink(acc)); if (nearBottom(feed)) feed.scrollTop = feed.scrollHeight;
       if (local.stopped) break;
     }
-  } catch (e) { if (!local.stopped) acc = acc || `Error: ${e.message}`; out.innerHTML = md(stripThink(acc)); }
+  } catch (e) {
+    if (gpuLost(e) && !acc) { local.messages.pop(); out.remove(); feed.lastElementChild?.remove(); local.busy = false; local.stopped = false; setLocalBusy(false); return recoverLocal(text); }
+    if (!local.stopped) acc = acc || `Error: ${e.message}`; out.innerHTML = md(stripThink(acc));
+  }
   out.classList.remove('cursor');
   if (local.stopped) { try { await local.engine.interruptGenerate(); } catch { /* res */ } }
+  if (gpuLost(acc.replace(/^Error: /, ''))) { local.messages.push({ role: 'assistant', content: 'La GPU del mòbil s’ha reiniciat enmig de la resposta.' }); local.busy = false; local.stopped = false; setLocalBusy(false); return recoverLocal(''); }
   local.messages.push({ role: 'assistant', content: stripThink(acc) || '…' }); local.busy = false; local.stopped = false; setLocalBusy(false);
 }
 
@@ -1286,7 +1377,7 @@ async function toggleMic() {
   rec.start(); $('#micBtn')?.classList.add('rec');
 }
 function voicePanel() {
-  return `<section class="panel" style="margin-top:28px"><header><h2>Veu</h2>${voiceOn() ? '<span class="chip ok"><i class="dot on"></i>ElevenLabs</span>' : ''}</header><div class="body stack"><p class="small">Dicta els missatges amb el micròfon i escolta les respostes de l’agent, amb ElevenLabs.</p><div class="row"><button class="btn ink" data-act="voice" type="button">${voiceOn() ? 'Canvia la configuració' : 'Configura la veu'}</button></div></div></section>`;
+  return `<section class="panel"><header><h2>Veu</h2>${voiceOn() ? '<span class="chip ok"><i class="dot on"></i>ElevenLabs</span>' : ''}</header><div class="body stack"><p class="small">Dicta els missatges amb el micròfon i escolta les respostes de l’agent, amb ElevenLabs.</p><div class="row"><button class="btn ink" data-act="voice" type="button">${voiceOn() ? 'Canvia la configuració' : 'Configura la veu'}</button></div></div></section>`;
 }
 function voiceSheet() {
   const c = voiceCfg();
@@ -1305,7 +1396,7 @@ function voiceSheet() {
 
 /* ---------------------------------------------------------------- accions */
 document.addEventListener('click', async (e) => {
-  const a = e.target.closest('[data-act], [data-speak], [data-mic], [data-copy], [data-decide], [data-machine], [data-forget], [data-reconnect], [data-lm]');
+  const a = e.target.closest('[data-act], [data-speak], [data-mic], [data-copy], [data-decide], [data-machine], [data-forget], [data-rename], [data-reconnect], [data-lm]');
   if (!a) return;
   if (a.dataset.copy) {
     try { await navigator.clipboard.writeText(a.dataset.copy); } catch { return toast(a.dataset.copy); }
@@ -1320,7 +1411,8 @@ document.addEventListener('click', async (e) => {
   if (a.dataset.mic != null) return toggleMic();
   if (a.dataset.decide) return decide(a.closest('[data-approval]'), a.dataset.decide);
   if (a.dataset.machine != null) return switchMachine(Number(a.dataset.machine));
-  if (a.dataset.reconnect != null) { const m = store.machines[Number(a.dataset.reconnect)]; return addComputerSheet('vps', { target: m.via, auto: true }); }
+  if (a.dataset.reconnect != null) { const m = store.machines[Number(a.dataset.reconnect)]; reconTry.delete(m.via); if (sshHelper()) { autoReconnect({ ...m }); return; } return addComputerSheet('vps', { target: m.via, auto: true }); }
+  if (a.dataset.rename != null) return renameSheet(Number(a.dataset.rename));
   if (a.dataset.forget != null) { if (confirm('Aquest dispositiu deixarà de tenir accés a aquest ordinador.')) forgetMachine(Number(a.dataset.forget)); return; }
   if (a.dataset.lm) { if (local.loading) return; LS.set('nio.localModel', a.dataset.lm); return render(); }
   switch (a.dataset.act) {
@@ -1339,7 +1431,7 @@ document.addEventListener('click', async (e) => {
     case 'push-test': try { const r = await api('/api/push/test', { method: 'POST' }); toast(r.subs ? 'Enviat. Arribarà en uns segons.' : 'Primer activa els avisos'); } catch (err) { toast(err.message); } return;
     case 'add-computer': return addComputerSheet();
     case 'open-sessions': return go('#/sessions');
-    case 'help': go('#/ordinadors'); setTimeout(() => { const h = $('#help'); h?.scrollIntoView({ block: 'start' }); $('details', h)?.setAttribute('open', ''); }, 60); return;
+    case 'help': return go('#/ajuda');
     case 'more': return moreSheet();
     case 'machines': return machinesSheet();
     case 'mobile-qr': return mobileQrSheet();
@@ -1366,11 +1458,10 @@ document.addEventListener('submit', (e) => {
 /* ---------------------------------------------------------------- paleta d'ordres */
 let palSel = 0;
 function commands() {
-  const c = Object.entries(VIEWS).map(([k, v]) => ({ label: `Ves a ${v.label}`, hint: 'Navega', run: () => go(HASH[k]) }));
+  const c = Object.entries(VIEWS).filter(([k]) => !(k === 'models' && mq.matches)).map(([k, v]) => ({ label: `Ves a ${v.label}`, hint: 'Navega', run: () => go(HASH[k]) }));
   if (machine()) c.push({ label: 'Nova sessió', hint: 'Crea', run: newSessionSheet });
   c.push({ label: 'Afegeix un ordinador', hint: 'Crea', run: () => addComputerSheet() });
   [...state.sessions.values()].slice(0, 20).forEach((s) => c.push({ label: s.title || 'Sessió nova', hint: AGENT_NAMES[s.agent] || s.agent, run: () => go(`#/s/${s.id}`) }));
-  c.push({ label: 'Com es fa (ajuda)', hint: 'Ajuda', run: () => { go('#/ordinadors'); setTimeout(() => $('#help')?.scrollIntoView({ block: 'start' }), 60); } });
   c.push({ label: 'Configura la veu (ElevenLabs)', hint: 'Ajustos', run: voiceSheet });
   c.push({ label: 'Fes el tutorial', hint: 'Ajuda', run: tourStart });
   return c;
@@ -1429,12 +1520,12 @@ const TSTEPS = [
   { route: 'ordinadors', skipIf: () => !machine(), target: '.card.computer.active .c-actions', m: '.card.computer.active .c-actions', title: '2. Continua al mòbil', text: 'A la targeta de l’ordinador prem «Continua al mòbil»: surt un QR i un codi. Al mòbil, obre www.nio.cat/app, Ordinadors, i escaneja el QR o enganxa el codi.' },
   { route: 'sessions', skipIf: () => !machine(), target: '.top [data-act=new]', m: '.top [data-act=new]', title: '3. Dona feina a un agent', text: 'Una sessió és una conversa amb un agent dins d’una carpeta. Tries l’agent, la carpeta (qualsevol de l’ordinador), els permisos i li expliques què ha de fer.' },
   { route: 'approvals', skipIf: () => !machine(), target: '.side nav a[href="#/aprovacions"]', m: '#tabbar a[href="#/aprovacions"]', title: '4. Tu decideixes', text: 'En mode «Demana permís», abans d’editar un fitxer o executar una ordre, l’agent t’ho pregunta aquí. Si actives els avisos, t’arriba al mòbil.' },
-  { route: 'models', skipIf: () => !machine(), target: '.side nav a[href="#/models"]', m: '#tabbar [data-act=more]', title: 'Models al teu ordinador', text: 'Si tens Ollama, aquí descarregues models i veus quins tens. Res no surt de casa i no gasta res.' },
+  { route: 'models', skipIf: () => !machine() || mq.matches, target: '.side nav a[href="#/models"]', m: '#tabbar [data-act=more]', title: 'Models al teu ordinador', text: 'Si tens Ollama, aquí descarregues models i veus quins tens. Res no surt de casa i no gasta res.' },
   { route: 'mobil', target: '.side nav a[href="#/xat-local"]', m: '.page .model-card', title: 'Un model sense internet', text: 'Si no tens l’ordinador a mà, pots fer servir un model petit que funciona dins del mateix mòbil.' },
   { route: 'pissarra', target: '.side nav a[href="#/pissarra"]', m: '#bdTools', title: 'Pensa en dibuix', text: 'A la pissarra pots fer diagrames a mà alçada o demanar-me’ls escrivint, amb Ollama o amb el model del mòbil.' },
-  { route: 'ordinadors', target: '#help', m: '#help', title: 'Si alguna cosa no va', text: 'A «Com es fa» tens cada pas explicat, què cal al servidor i què mirar si no connecta.' },
-  { target: '[data-act=palette]', m: '#tabbar [data-act=more]', title: () => (mq.matches ? 'Més coses' : 'Un últim truc'), text: () => (mq.matches ? 'A «Més» tens els models, el xat local, la pissarra, l’ajuda i aquest tutorial.' : 'Prem ⌘K (o Ctrl+K) per anar a qualsevol lloc o obrir una sessió sense tocar el ratolí.') },
-  { center: true, mood: 'happy', title: 'Ja està tot a punt.', text: 'Si mai vols repassar-ho, tens el tutorial al menú i l’ajuda a Ordinadors.', next: 'Finalitza' }
+  { route: 'ajuda', target: '#help', m: '#help', title: 'Si alguna cosa no va', text: 'A «Ajuda» tens cada pas explicat, què cal al servidor i què mirar si no connecta.' },
+  { target: '[data-act=palette]', m: '#tabbar [data-act=more]', title: () => (mq.matches ? 'Més coses' : 'Un últim truc'), text: () => (mq.matches ? 'A «Més» tens el xat local, la pissarra, els ajustos i l’ajuda, amb aquest tutorial.' : 'Prem ⌘K (o Ctrl+K) per anar a qualsevol lloc o obrir una sessió sense tocar el ratolí.') },
+  { center: true, mood: 'happy', title: 'Ja està tot a punt.', text: 'Si mai vols repassar-ho, tens el tutorial a Ajuda.', next: 'Finalitza' }
 ];
 const tval = (v) => (typeof v === 'function' ? v() : v);
 function tourStart() { T.on = true; T.seen = true; tourGo(0); }

package/web/app/index.html

@@ -39,7 +39,7 @@
 <body>
 <header class="mbar">
   <button class="icon-btn burger" id="burger" type="button" aria-label="Obre el menú" aria-expanded="false" aria-controls="side"><span></span><span></span><span></span></button>
-  <a href="/" class="word" aria-label="nio">ni<span class="bot" data-mood="idle" aria-hidden="true"><span class="eyes"><i></i><i></i></span></span></a>
+  <a href="/app" class="word" aria-label="nio">ni<span class="bot" data-mood="idle" aria-hidden="true"><span class="eyes"><i></i><i></i></span></span></a>
   <span class="here" id="here"></span>
   <span class="grow"></span>
   <span id="mRight"></span>
@@ -47,12 +47,10 @@
 <div class="scrim" id="scrim"></div>
 <div class="shell">
   <aside class="side" id="side">
-    <div class="brand"><a href="/" class="word" aria-label="nio">ni<span class="bot" data-mood="idle" aria-hidden="true"><span class="eyes"><i></i><i></i></span></span></a><button class="icon-btn collapse" id="collapse" type="button" aria-label="Plega el menú" aria-expanded="true"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><path d="M9.5 4.5v15M15.5 10l-2 2 2 2"/></svg></button></div>
+    <div class="brand"><a href="/app" class="word" aria-label="nio">ni<span class="bot" data-mood="idle" aria-hidden="true"><span class="eyes"><i></i><i></i></span></span></a><button class="icon-btn collapse" id="collapse" type="button" aria-label="Plega el menú" aria-expanded="true"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><path d="M9.5 4.5v15M15.5 10l-2 2 2 2"/></svg></button></div>
     <nav id="nav" aria-label="Seccions"></nav>
     <div class="foot">
       <div class="conn" id="sideConn"></div>
-      <a class="kbd" href="#/ordinadors" data-act="help" title="Com es fa"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16v.1"/></svg><span class="l">Com es fa</span></a>
-      <button class="kbd" data-act="tour" type="button" title="Tutorial"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.6M12 17.2v.1"/></svg><span class="l">Tutorial</span></button>
       <button class="kbd" data-act="palette" type="button" title="Cerca o fes una acció (⌘K)"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="l">Cerca o fes una acció</span><kbd>⌘K</kbd></button>
     </div>
   </aside>
@@ -69,7 +67,7 @@
   <div class="tour-card" id="tourCard" role="dialog" aria-modal="false" aria-labelledby="tourT"></div>
 </div>
 <nav class="tabbar" id="tabbar" aria-label="Navegació"></nav>
-<div class="toasts" id="toasts" aria-live="polite"></div>
+<div class="toasts" id="toasts" popover="manual" aria-live="polite"></div>
 
 <script src="/bot.js"></script>
 <script src="/board.js"></script>

package/web/app/style.css

@@ -82,7 +82,12 @@ kbd { font: 600 11px var(--font); padding: 1px 6px; border: 1px solid var(--bord
   body.side-collapsed .shell { grid-template-columns: 72px minmax(0, 1fr); }
   body.side-collapsed .brand .collapse { transform: translateX(4px); }
   body.side-collapsed .brand .collapse svg { transform: scaleX(-1); }
-  body.side-collapsed .brand .word, body.side-collapsed .side nav .grp { visibility: hidden; }
+  body.side-collapsed .brand .word { visibility: hidden; }
+  body.side-collapsed .side nav a .l, body.side-collapsed .kbd .l, body.side-collapsed .kbd kbd, body.side-collapsed .conn span, body.side-collapsed .conn svg { display: none; }
+  body.side-collapsed .conn { padding-left: 0; justify-content: center; }
+  body.side-collapsed .side nav .grp { font-size: 0; padding: 9px 13px 5px; }
+  body.side-collapsed .side nav .grp::before { content: ''; display: block; height: 1px; background: var(--border); }
+  body.side-collapsed .side nav .grp:first-child { display: none; }
   body.side-collapsed .side nav a .badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
 }
 
@@ -454,7 +459,6 @@ video.scan { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14p
   .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 8px calc(6px + var(--safe-b)); background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
   .tabbar > * { flex: 1; position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 0; background: none; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--fg-muted); text-decoration: none; }
   .tabbar [aria-current="page"] { color: var(--accent); }
-  .tabbar [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 3px 3px; background: var(--accent); }
   .tabbar .badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
   body:not(.no-tabs):not(.kb) .main { padding-bottom: calc(64px + var(--safe-b)); }
   body.no-tabs .tabbar, body.kb .tabbar { display: none; }
@@ -495,3 +499,67 @@ a.kbd { text-decoration: none; color: inherit; }
 .composer .mic:hover { color: var(--fg); border-color: var(--fg); }
 .composer .mic.rec { background: var(--red); border-color: var(--red); color: #fff; animation: pulse 1.1s ease-in-out infinite; }
 .composer .mic.wait { opacity: .5; }
+
+/* ---------- Ordre i text net ---------- */
+.grid2.one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
+.top h1, .top p, .panel.empty h2, .panel.empty p, .stepper p, .stepper b, .help-body p, .card p, .sheet h2, .sheet p, .tour-card h3, .tour-card p, .muted.small { text-wrap: balance; }
+@media (max-width: 820px) {
+  .side nav a[href="#/models"] { display: none; }
+  .top p, .panel.empty p, .stepper p, .help-body p, .sheet p, .tour-card p, .computer .muted { text-wrap: balance; }
+  .panel.empty { text-align: center; }
+  .panel.empty .stepper { text-align: left; }
+}
+
+/* ---------- Afegeix un ordinador ---------- */
+dialog.sheet.wiz.compact { height: fit-content; max-height: min(86dvh, 720px); }
+dialog.sheet.wiz.compact[open] { display: flex; flex-direction: column; }
+.compact .wiz-body { min-height: 330px; padding-top: 12px; gap: 18px; }
+.compact .wiz-head { gap: 14px; }
+.compact .wiz-head .icon-btn { margin-right: -8px; }
+.compact .wiz-head h2 { font-size: 22px; font-weight: 500; letter-spacing: -.045em; }
+.compact .seg button svg { width: 16px; height: 16px; }
+.compact .seg button[aria-pressed="true"] { box-shadow: 0 1px 2px color-mix(in srgb, var(--fg) 12%, transparent); }
+.add-intro { display: grid; gap: 4px; }
+.add-intro h3 { font-size: 18px; font-weight: 500; letter-spacing: -.03em; line-height: 1.25; }
+.add-intro p, .hint { font-size: 14px; color: var(--fg-muted); text-wrap: pretty; }
+.hint { font-size: 13px; }
+.field-row { display: flex; gap: 8px; }
+.field-row input { flex: 1; min-width: 0; height: 46px; }
+.field-row .btn { height: 46px; padding: 0 18px; flex: none; }
+.hosts { display: grid; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--fg-muted); }
+.hosts .row { gap: 6px; }
+.todo { list-style: none; display: grid; gap: 14px; counter-reset: t; }
+.todo li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 14px; }
+.todo .n { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); font-size: 12px; font-weight: 600; margin-top: -1px; }
+.todo li > div { display: grid; gap: 8px; min-width: 0; }
+.todo .cmd { margin-top: 2px; }
+.live { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); font-size: 13px; color: var(--fg-muted); }
+.live .pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
+.checks { list-style: none; display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--fg-muted); }
+.checks li { display: flex; gap: 10px; align-items: baseline; }
+.checks li::before { content: '✓'; color: var(--moss); font-weight: 700; }
+.or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--fg-muted); }
+.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+.scan { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }
+.sheet p { text-wrap: pretty; }
+@media (max-width: 820px) {
+  .compact .wiz-body { min-height: 300px; }
+  .compact .seg button span { white-space: nowrap; }
+}
+dialog.sheet.wiz.compact .sheet-in, .compact .wiz-body { flex: 0 1 auto; }
+.compact .wiz-body { overflow-y: auto; }
+
+/* Alertes: capa superior (popover) i gest de lliscar */
+.toasts[popover] { inset: auto 20px calc(20px + var(--safe-b)) auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; width: auto; height: auto; max-width: calc(100vw - 24px); display: none; }
+.toasts[popover]:popover-open { display: grid; }
+@media (max-width: 820px) { .toasts[popover] { inset: auto 12px calc(12px + var(--safe-b)) 12px; max-width: none; } body.chat-mode .toasts[popover] { bottom: calc(84px + var(--safe-b)); } }
+.toast { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; box-shadow: 0 8px 24px color-mix(in srgb, var(--fg) 22%, transparent); }
+.toast.out { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
+
+/* Bot de l'agent dins la pastilla: enganxat a l'esquerra, centrat en vertical */
+.chip:has(.abot) { padding: 0 11px 0 3px; }
+.chip .abot { line-height: 0; align-items: center; }
+.chip .abot .bot { --s: 20px; --bw: .15; }
+.chip .agent-tag { gap: 7px; }
+.sheet .list + .or { margin-top: 18px; }
+.sheet #modelForm { margin-top: 4px; }

package/web/board.css

@@ -106,7 +106,7 @@
 @keyframes bd-msg { from { opacity: 0; transform: translateY(6px); } }
 .bd-chat .chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
 .bd-chat .chips::-webkit-scrollbar { display: none; }
-.bd-chat .chip-s { flex: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font-size: 12px; font-weight: 500; cursor: pointer; }
+.bd-chat .chip-s { flex: none; 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 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; }
@@ -132,7 +132,7 @@
   .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; }
   .bd-help .cols { grid-template-columns: 1fr; }
-  .bd-chat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; width: auto; height: min(72%, 560px); 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); }
+  .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; }
   .bd-chat header::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--border); }
   .bd-empty { top: 42%; }
@@ -140,7 +140,7 @@
 
 /* El llenç s'adapta a la seva amplada real (tauleta, xat obert, mòbil) */
 @container stage (max-width: 720px) {
-  .bd-chat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; width: auto; height: min(72%, 560px); 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); }
+  .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; }
   .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; }
@@ -168,3 +168,24 @@
   .bd-tools .sep { display: none; }
   .bd-tools .tb { flex: 1 1 0; min-width: 30px; width: auto; height: 38px; }
 }
+
+/* Xat com a drawer inferior (mòbil, tauleta i llenç estret) */
+.bd-scrim { display: none; }
+.bd-chat header { position: relative; touch-action: none; cursor: grab; }
+.bd-chat.dragging { transition: none !important; }
+@media (max-width: 820px) {
+  .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; }
+  .chat-open .bd-scrim { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
+  .bd-chat { max-width: 640px; margin: 0 auto; }
+  .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)); }
+}
+@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; }
+  .chat-open .bd-scrim { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
+  .bd-chat { max-width: 640px; margin: 0 auto; }
+  .bd-chat header { padding-top: 22px; }
+  .bd-chat .cin textarea { font-size: 16px; }
+}

package/web/board.js

@@ -1019,6 +1019,14 @@ function onKey(e) {
 }
 function onKeyUp(e) { if (e.key === ' ') { spaceDown = false; R && R.stage.classList.remove('space'); } }
 
+function chatSwipe(chat) {
+  const head = chat.querySelector('header'); let y0 = null, dy = 0;
+  const drawer = () => getComputedStyle(chat).bottom === '0px' && getComputedStyle(chat).left === '0px' && getComputedStyle(chat).top !== '0px';
+  head.addEventListener('pointerdown', (e) => { if (e.target.closest('button') || !drawer()) return; y0 = e.clientY; dy = 0; head.setPointerCapture(e.pointerId); chat.classList.add('dragging'); });
+  head.addEventListener('pointermove', (e) => { if (y0 === null) return; dy = Math.max(0, e.clientY - y0); chat.style.transform = `translateY(${dy}px)`; });
+  const end = () => { if (y0 === null) return; y0 = null; chat.classList.remove('dragging'); chat.style.transform = ''; if (dy > 70) openChat(false); };
+  head.addEventListener('pointerup', end); head.addEventListener('pointercancel', end);
+}
 function openChat(open, focus = true, persist = true) {
   if (persist) { B.opts.chat = open; save(); }
   if (!R) return;
@@ -1107,6 +1115,7 @@ function template() {
       </div>
     </div>
 
+    <button type="button" class="bd-scrim" data-bd="chat" aria-label="Tanca el xat" tabindex="-1"></button>
     <aside class="bd-chat" id="bdChat" aria-label="Xat amb en Nio">
       <header><span class="who">${window.NioBot ? NioBot.html('idle', 'hbot') : ''}<span><b>Nio</b><small>Et dibuixa el que li demanis</small></span></span><button type="button" class="ib" data-bd="chat" aria-label="Tanca el xat">${svgI(ICON.close)}</button></header>
       <label class="brain"><span>Amb</span><select id="bdBrain" aria-label="Què fa servir el xat"></select></label>
@@ -1171,6 +1180,7 @@ function mount(root) {
   on(document, 'click', e => { if (R && !e.target.closest('.bd-menuwrap')) { const m = R.root.querySelector('#bdMenu'); if (m) m.hidden = true; } });
   on(window, 'resize', () => { applyView(); drawSel(); });
   if (document.fonts) document.fonts.load(`500 24px Caveat`).then(() => { if (R) { B.els.forEach(el => { if (el.type === 'text' && el.text) fitText(el); }); full(); } }).catch(() => {});
+  chatSwipe(R.chat);
   full(); drawChat(); drawBrains(); setTool(tool); openChat(B.opts.chat && !matchMedia('(max-width: 820px)').matches, false, false);
   window.NioBot?.refresh();
 }

package/web/sw.js

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