nio-cat 0.9.0 → 0.9.2

package/web/app/app.js

@@ -479,9 +479,10 @@ 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 = ['mobil', 'pissarra', 'activitat', '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']]
+  const more = ['feines', 'memoria', 'approvals', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].includes(r.name);
+  $('#tabbar').innerHTML = [['sessions', ICON.sessions, 'Sessions', active === 'sessions'], ['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('')
+    .replace('</a><a href="#/ordinadors"', `</a><button type="button" data-act="pantalla-tab">${svg('<path d="M5 3l14 7-6 2.2L10.8 19z"/>')}<span>Pantalla</span></button><a href="#/ordinadors"`)
     + `<button type="button" data-act="more" ${more ? 'aria-current="page"' : ''}>${svg(ICON.more)}<span>Més</span></button>`;
   const s = r.name === 'session' ? state.sessions.get(r.id) : null;
   $('#here').textContent = s ? s.title || 'Sessió nova' : VIEWS[r.name]?.label || '';
@@ -496,8 +497,8 @@ function render() {
   if (r.name !== 'sessions') manage = null;
   renderChrome();
   document.body.classList.toggle('board-mode', board);
-  document.body.classList.toggle('chat-mode', r.name === 'session' || (r.name === 'mobil' && !!local.engine));
-  document.body.classList.toggle('no-tabs', r.name === 'session' || board || (r.name === 'mobil' && !!local.engine));
+  document.body.classList.toggle('chat-mode', r.name === 'session' || (r.name === 'mobil' && inLocalChat()));
+  document.body.classList.toggle('no-tabs', r.name === 'session' || board || (r.name === 'mobil' && inLocalChat()));
   if (!board && lastName === 'pissarra') window.NioBoard?.unmount();
   if (board && lastName === 'pissarra' && $('#boardRoot')) return;
   const changed = lastName !== r.name || r.name === 'session';
@@ -506,9 +507,9 @@ 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() : r.name === 'activitat' ? viewActivity() : r.name === 'feines' ? viewJobs() : r.name === 'memoria' ? viewMemory() : r.name === 'ajuda' ? viewHelp() : viewSettings()}</div>`;
+    view.innerHTML = html && inLocalChat() ? html : `<div class="page">${html ? html : r.name === 'ordinadors' ? viewComputers() : r.name === 'sessions' ? viewSessions() : r.name === 'approvals' ? viewApprovals() : r.name === 'activitat' ? viewActivity() : r.name === 'feines' ? viewJobs() : r.name === 'memoria' ? viewMemory() : r.name === 'ajuda' ? viewHelp() : viewSettings()}</div>`;
     if (r.name === 'mobil') bindLocal();
-    if (r.name === 'mobil' && machine() && !local.engine) loadOllama();
+    if (r.name === 'mobil' && machine() && !inLocalChat()) loadOllama();
     if (r.name === 'activitat' && machine()) { activity = null; loadActivity(); }
     if (r.name === 'memoria' && machine()) loadMemory();
     if (r.name === 'ordinadors' && machine() && state.connected) loadScreen();
@@ -552,12 +553,60 @@ function computerCard(m, i) {
 // Ajuda sempre a mà: com es fa cada cosa, i què mirar si no connecta.
 function helpPanel(open) {
   const q = (t, body) => `<details><summary>${t}</summary><div class="help-body">${body}</div></details>`;
+  const k = (t) => `<span class="mono">${t}</span>`;
+  const blk = (t) => `<pre class="cmdb"><code>${t}</code></pre>`;
+  const rows = (list) => `<div class="cmdlist">${list.map(([c, d]) => `<div><span class="mono">${c}</span><span>${d}</span></div>`).join('')}</div>`;
+  const grp = (t) => `<h3 class="help-grp">${t}</h3>`;
   return `<section class="panel help" id="help"><header><h2>Com es fa</h2></header><div class="body">
-    ${q('Connectar aquest ordinador', `<p>Al terminal, des de la carpeta dels teus projectes, executa <span class="mono">npx nio-cat</span>. S’obre nio.cat ja connectat. Cal Node.js 18 o més nou.</p>`)}
-    ${q('Fer-lo servir des del mòbil', `<p>A l’ordinador, a Ordinadors, prem <b>Continua al mòbil</b>. Surt un QR i un codi <span class="mono">nio-…</span>.</p><p>Al mòbil, obre <b>www.nio.cat/app</b> → Ordinadors → Afegeix ordinador, i escaneja el QR o enganxa el codi.</p><p>Per connectar-t’hi des de qualsevol xarxa cal <span class="mono">cloudflared</span> a l’ordinador (<span class="mono">brew install cloudflared</span>). Sense ell, el mòbil ha d’estar a la mateixa wifi.</p>`)}
-    ${q('Afegir un servidor (VPS) amb Claude Code', `<p>Ordinadors → Afegeix ordinador → <b>Servidor (SSH)</b> → escriu <span class="mono">usuari@servidor</span>. L’ordinador hi entra, hi engega nio i el servidor surt a la llista.</p><p>Després, prem <b>Continua al mòbil</b> amb el servidor actiu per fer-lo servir des del mòbil.</p>`)}
-    ${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>`)}
+    ${grp('Per començar')}
+    ${q('Què és nio', `<p>nio et deixa donar feina als agents d’IA del teu ordinador (Claude Code, Codex, Grok, Antigravity i Ollama) des del mòbil. Els agents <b>treballen a l’ordinador o al servidor</b>, amb els teus comptes. El mòbil és el comandament: hi segueixes la feina en directe i aproves el que facin.</p>`)}
+    ${q('Connectar aquest ordinador', `<p>Al terminal, des de la carpeta dels teus projectes, executa:</p>${blk('npx nio-cat')}<p>S’obre nio.cat ja connectat. Cal Node.js 18 o més nou. Pots indicar més carpetes: ${k('npx nio-cat ~/projectes')}.</p>`)}
+    ${q('Fer-lo servir des del mòbil', `<p>A l’ordinador, a Ordinadors, prem <b>Continua al mòbil</b>. Surt un QR i un codi ${k('nio-…')}.</p><p>Al mòbil, obre <b>www.nio.cat/app</b> → Ordinadors → Afegeix ordinador, i escaneja el QR o enganxa el codi. Guarda el codi com una contrasenya: qui el té, pot manar a l’ordinador.</p><p>Per connectar-t’hi des de qualsevol xarxa cal ${k('cloudflared')} a l’ordinador (${k('brew install cloudflared')}). Sense ell, el mòbil ha d’estar a la mateixa wifi. Si reinicies nio, l’adreça del túnel canvia: torna a escanejar el codi.</p>`)}
+    ${q('Afegir un servidor (VPS) amb Claude Code', `<p>Ordinadors → Afegeix ordinador → <b>Servidor (SSH)</b> → escriu ${k('usuari@servidor')}. L’ordinador hi entra, hi engega nio i el servidor surt a la llista. Després, prem <b>Continua al mòbil</b> amb el servidor actiu.</p><p>Des del terminal també es pot: ${k('npx nio-cat ssh usuari@servidor')}.</p>`)}
+    ${q('Què cal al servidor', `<ul><li>Entrar-hi per SSH sense contrasenya. Si no, executa ${k('ssh-copy-id usuari@servidor')} 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 ${k('claude')} un cop.</li><li>Linux amb ${k('curl')} o ${k('wget')} (nio hi instal·la ${k('cloudflared')} sol).</li></ul>`)}
+
+    ${grp('Treballar amb els agents')}
+    ${q('Crear una sessió', `<p>A <b>Sessions</b>, prem <b>Nova sessió</b>: tria l’agent, la carpeta (hi ha un explorador de carpetes de l’ordinador) i el nivell de permisos. Escriu què vols i l’agent es posa a treballar. La resposta et va arribant en directe.</p><p>També pots <b>clonar un repositori de GitHub</b> des de Nova sessió: nio fa servir el ${k('gh')} de l’ordinador (cal haver fet ${k('gh auth login')}).</p>`)}
+    ${q('Els tres nivells de permisos', `<ul><li><b>Només llegir</b>: l’agent llegeix i proposa, però no toca cap fitxer.</li><li><b>Demana permís</b>: llegeix sol; abans d’editar o executar alguna cosa, t’ho pregunta (Claude Code).</li><li><b>Via lliure</b>: treballa sense preguntar. Fes-ho servir només en carpetes de confiança.</li></ul><p>Es pot canviar enmig d’una sessió amb ${k('/mode')}.</p>`)}
+    ${q('Aprovacions', `<p>Quan un agent vol editar un fitxer o executar una ordre, surt una targeta amb el que farà. <b>Aprova</b> o <b>rebutja</b> amb un toc. A <b>Aprovacions</b> tens totes les pendents de totes les sessions juntes.</p>`)}
+    ${q('Comandes amb «/»', `<p>Al missatge d’una sessió, escriu ${k('/')} i surt la llista amb suggeriments. Les de nio funcionen sempre; les de l’agent (comandes i skills) se li envien tal qual.</p>${rows([
+      ['/mode', 'Canvia els permisos: ' + k('l') + ' llegir, ' + k('p') + ' preguntar, ' + k('t') + ' tot'],
+      ['/model', 'Canvia de model'],
+      ['/stop', 'Atura l’agent ara mateix'],
+      ['/nova', 'Nova sessió amb el mateix agent i carpeta'],
+      ['/carpeta', 'Canvia la carpeta de la sessió'],
+      ['/git', 'Git i GitHub: veure canvis, fer commit i crear un PR'],
+      ['/nom', 'Posa nom a la sessió (' + k('/nom Feina web') + ')'],
+      ['/opcions', 'Opcions de la sessió'],
+      ['/ajuda', 'Llista de comandes']
+    ])}<p>Exemple: ${k('/mode p')} passa la sessió a «Demana permís».</p>`)}
+    ${q('Git i GitHub', `<p>Dins una sessió, ${k('/git')} (o Opcions → Git i GitHub) mostra els canvis, fa <b>commit</b> (en una branca nova si ets a ${k('main')}) i crea un <b>PR</b>. Cap clau no passa per nio: fa servir el ${k('git')} i el ${k('gh')} de l’ordinador.</p>`)}
+    ${q('Avisos al mòbil', `<p>A <b>Ajustos → Avisos</b>, prem <b>Activa els avisos</b>. Rebràs una notificació quan un agent et demana permís o acaba la feina. L’avís arriba buit; el detall el demana el mòbil directament a l’ordinador.</p><p>A l’iPhone, primer afegeix nio a la pantalla d’inici (Comparteix → Afegeix a la pantalla d’inici) i obre’l des d’allà.</p>`)}
+    ${q('Veu', `<p>A <b>Ajustos → Veu</b> pots posar la teva clau d’ElevenLabs per <b>dictar</b> els missatges amb el micròfon i <b>escoltar</b> les respostes. La clau es queda només en aquest navegador.</p>`)}
+
+    ${grp('Eines')}
+    ${q('Pantalla remota', `<p>Mira i controla l’escriptori d’un ordinador des del mòbil. A <b>Ordinadors</b>, baixa fins a la secció <b>Pantalla</b> i prem <b>Obre la pantalla</b>. S’obre a pantalla completa. Cal activar abans <b>Apps de l’escriptori</b> a la mateixa secció.</p><ul><li><b>Mirar</b>: només veus la pantalla, en directe. Amb un dit la mous quan has fet zoom.</li><li><b>Controlar</b>: toc = clic; doble toc = doble clic; mantenir premut = clic dret; dos dits = desplaçar o fer zoom. El botó <b>1 dit</b> canvia entre desplaçar i arrossegar, i el botó <b>2 dits</b> entre desplaçar l’ordinador i fer zoom amb pessics. <b>Teclat</b> obre el teclat del mòbil, i dalt hi tens ${k('⌘')} ${k('⌥')} ${k('⌃')} ${k('⇧')}, ${k('Esc')}, ${k('Tab')} i fletxes.</li><li><b>Zoom amb dos dits</b>: pessiga per apropar i arrossega amb dos dits per moure’t. Al mode Mirar sempre va així, amb doble toc per alternar entre enquadrar i apropar. Al mode Controlar, tria al botó <b>2 dits</b> si els dos dits desplacen l’ordinador o fan zoom. A l’ordinador, pessiga al trackpad o ${k('Ctrl')} + roda. Els botons <b>− 100% +</b> i <b>1:1</b> fan el mateix i funcionen en tots dos modes.</li><li><b>Desa captura</b>: baixa el fotograma actual com a imatge. <b>Captura</b> (a la secció) en fa una de sola, sense obrir la pantalla.</li><li><b>Si surt negra</b>: al Mac, dona el permís de <b>Gravació de pantalla</b> (i <b>Accessibilitat</b> per controlar) al Terminal on corre <span class="mono">nio-cat</span> i reinicia’l. A Linux, per controlar cal <span class="mono">xdotool</span>.</li></ul>`)}
+    ${q('Pissarra', `<p>Un llenç infinit per fer diagrames a mà alçada: fluxos, mapes mentals i organigrames. Hi arribes des de <b>Més → Pissarra</b> (al mòbil) o al menú (a l’ordinador).</p><ul><li><b>Eines</b>: selecciona, mou el llenç, rectangle, el·lipse, rombe, fletxa, línia, llapis, text i goma. El cadenat manté l’eina activa.</li><li><b>Zoom amb dos dits</b>: al mòbil, pessiga sobre el llenç; amb els dos dits alhora també el mous. A l’ordinador, pessiga al trackpad o fes ${k('Ctrl')} + roda del ratolí.</li><li><b>Moure’s</b>: amb un dit, a l’espai buit (eina Selecciona), o amb ${k('Espai')} + arrossegar, o la roda del ratolí.</li><li><b>Text</b>: doble toc o doble clic per editar; doble toc a l’espai buit crea un text nou.</li><li><b>Zoom ràpid</b>: la xifra del percentatge torna al 100%; el botó de les cantonades ho enquadra tot.</li><li><b>Desfés / refés</b>: els botons de dalt a l’esquerra, o ${k('Ctrl Z')} i ${k('Ctrl ⇧ Z')}.</li><li><b>Estil</b>: color, gruix i traç (al mòbil, el botó de la paleta). Menú ⋯: exporta a PNG, SVG o JSON, i quadrícula.</li></ul>`)}
+    ${q('Demanar-li el dibuix a en Nio', `<p>Prem <b>Nio</b> (dalt a la dreta) per obrir el xat de la pissarra. Descriu què vols i ho dibuixa. Exemples:</p>${rows([
+      ['Flux: A -> B -> C', 'Una fletxa per línia; afegeix ' + k(': etiqueta') + ' si vols'],
+      ['Mapa mental de X: a, b, c', 'Tema central amb branques'],
+      ['Organigrama: Direcció > Finances, Operacions', 'Qui depèn de qui'],
+      ['Afegeix un rombe “Quadra?”', 'Afegeix una figura'],
+      ['Connecta Banc amb ERP', 'Uneix dues figures amb una fletxa'],
+      ['Pinta Banc de verd', 'Canvia el color'],
+      ['Reanomena Banc a Caixa', 'Canvia el text'],
+      ['Esborra ERP', 'Treu una figura'],
+      ['Ordena-ho · Centra · Desfés', 'Ordena, enquadra o desfà'],
+      ['Plantilla agent', 'També ' + k('Plantilla d’aprovació') + ' i ' + k('Plantilla conciliació')],
+      ['Exporta PNG', 'També ' + k('SVG') + ' o ' + k('JSON')]
+    ])}<p>Al desplegable <b>Amb</b> tries què t’entén: les <b>ordres ràpides</b> (sense gastar res) o un model.</p>`)}
+    ${q('Xat local', `<p>A <b>Més → Xat local</b> tens un model petit que funciona <b>dins del navegador del mòbil</b>, sense ordinador ni connexió un cop descarregat. Necessita un navegador amb WebGPU. Si la GPU del mòbil es reinicia, el xat es recupera sol.</p>`)}
+    ${q('Models d’Ollama', `<p>A <b>Models</b> veus els models d’Ollama de l’ordinador, en pots descarregar de nous amb el progrés en directe, esborrar-los i obrir-hi sessions. Funcionen al teu ordinador i no gasten res.</p>`)}
+    ${q('Buscador i dreceres', `<p>Prem ${k('Ctrl K')} (o ${k('⌘ K')}) per obrir el buscador d’accions: nova sessió, afegir ordinador, configurar la veu, fer el tutorial… Al mòbil, llisca cap als costats per canviar de pàgina.</p>`)}
+
+    ${grp('Si alguna cosa no va')}
+    ${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 ${k('npx nio-cat --local')}, o fes servir Chrome.</li><li><b>La clau no és vàlida</b>: torna a afegir l’ordinador amb el codi nou. Per invalidar tots els codis antics: ${k('npx nio-cat reset-token')}.</li><li><b>Quins agents té l’ordinador?</b> ${k('npx nio-cat doctor')} els llista.</li></ul>`)}
+    ${q('Seguretat', `<ul><li>L’enllaç de connexió porta una clau aleatòria que el navegador no envia a cap servidor web.</li><li>Cap dada no passa per servidors de nio: el mòbil parla directament amb el teu ordinador.</li><li>Totes les crides demanen la clau, que només tens tu.</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></section>`;
 }
@@ -739,9 +788,28 @@ function renameSheet(i) {
     };
   });
 }
+async function pantallaTab() {
+  if (!machine() || !state.connected) return toast('Primer connecta un ordinador.', 4000);
+  let caps = state.info?.control;
+  try { caps = await api('/api/control'); if (state.info) state.info.control = caps; } catch (e) { return toast(e.message, 4500); }
+  const d = caps?.escriptori;
+  if (d?.enabled) return remoteOpen();
+  const body = !d?.installed
+    ? `<p class="small">Per veure i controlar l’escriptori cal instal·lar <span class="mono">agent-desktop</span> a ${esc(machine().name)}:</p><p class="mono small">npm i -g agent-desktop</p>`
+    : d.ready === false ? `<p class="small">${esc(d.why || 'L’escriptori encara no està a punt.')}</p>`
+    : `<p class="small">Activa «Apps de l’escriptori» a ${esc(machine().name)} per veure la pantalla i controlar-la des del mòbil. Cada acció dels agents continuarà demanant la teva aprovació.</p>`;
+  openSheet(`<h2>Pantalla</h2><div class="stack">${body}<div class="row between sheet-foot"><button class="btn ghost" type="button" data-close>Ara no</button>${d?.installed && d.ready !== false ? '<button class="btn ink" id="pantOn" type="button">Activa i obre</button>' : ''}</div></div>`, (sh) => {
+    const go = sh.querySelector('#pantOn'); if (!go) return;
+    go.onclick = async () => {
+      go.disabled = true;
+      try { const r = await api('/api/control', { method: 'PUT', body: { escriptori: true } }); if (state.info) state.info.control = r; closeSheet(); remoteOpen(); }
+      catch (err) { toast(err.message, 6000); go.disabled = false; }
+    };
+  });
+}
 function moreSheet() {
   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', 'activitat', 'ajustos', 'ajuda'].map(item).join('')}</div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
+  openSheet(`<h2>Més</h2><div class="list">${['feines', 'memoria', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].map(item).join('')}</div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
 }
 
 /* ---------- Sessions */
@@ -772,6 +840,7 @@ async function manageDelete() {
   manage = fail ? new Set(ids.filter((id) => state.sessions.has(id))) : null;
   toast(fail ? `No he pogut esborrar ${fail} sessions` : `${ids.length} sessions esborrades`); render();
 }
+const plain = (t) => `${t}`.replace(/```[\s\S]*?```/g, ' ').replace(/`([^`]*)`/g, '$1').replace(/!?\[([^\]]*)\]\([^)]*\)/g, '$1').replace(/^\s{0,3}(#{1,6}|[-*+]|\d+\.|>)\s+/gm, '').replace(/(\*\*|__|\*|_)(?=\S)([^*_]*?\S)\1/g, '$2').replace(/\*\*/g, '').replace(/\s#{1,6}\s/g, ' ').replace(/\s#{1,6}\s/g, ' ').replace(/\s+/g, ' ').trim();
 function viewSessions() {
   const list = [...state.sessions.values()].sort((a, b) => b.updated - a.updated);
   const many = store.machines.length > 1, mach = machine();
@@ -787,7 +856,7 @@ function viewSessions() {
     <${manage ? 'div role="checkbox" tabindex="0" aria-checked="' + manage.has(s.id) + '" data-pick="' + esc(s.id) + '"' : 'a href="#/s/' + esc(s.id) + '"'} class="card session-card ${manage ? 'pick-mode' : ''} ${manage?.has(s.id) ? 'picked' : ''}">
       <div class="row between"><span class="agent-tag nosq" data-agent="${esc(s.agent)}">${agentBot(s.agent, sessionMood(s))}${esc(AGENT_NAMES[s.agent] || s.agent)}</span>${stateChip(s)}</div>
       <div class="title">${esc(s.title || 'Sessió nova')}</div>
-      ${s.state === 'error' && s.error ? `<div class="last err">${esc(s.error)}</div>` : s.last ? `<div class="last">${esc(s.last)}</div>` : ''}
+      ${s.state === 'error' && s.error ? `<div class="last err">${esc(s.error)}</div>` : s.last ? `<div class="last">${esc(plain(s.last))}</div>` : ''}
       <div class="meta"><span class="mono">${esc(basename(s.cwd))}</span><span>·</span><span>${esc(MODES[s.mode]?.label || '')}</span><span>·</span><span>${ago(s.updated)}</span>${s.cost ? `<span>·</span><span>${money(s.cost)}</span>` : ''}</div>
     </${manage ? 'div' : 'a'}>`).join('')}</div>` : `<div class="panel empty">${bot('idle')}<h2>Encara no hi ha cap sessió</h2><p>Tria un agent i una carpeta, i explica-li què ha de fer.</p><button class="btn ink" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button></div>`}`;
 }
@@ -935,28 +1004,45 @@ async function newJobSheet() {
   try { projects = await api('/api/projects'); } catch (e) { return toast(e.message); }
   const agents = (state.info?.agents || []).filter((a) => a.available && ['claude', 'codex'].includes(a.id));
   const prev = (jobsData?.jobs || []).filter((j) => ['pendent', 'en curs', 'feta'].includes(j.state)).slice(0, 15);
-  const sel = { agent: 'auto', mode: 'preguntar', when: 'ara' };
+  const sel = { agent: 'auto', mode: 'preguntar', when: 'ara', mins: 0 };
   openSheet(`<h2>Nova feina</h2>
     <label class="f"><span>Què ha de fer?</span><textarea class="field" id="jobPrompt" rows="3" placeholder="Per exemple: revisa les issues noves i fes-me’n un resum"></textarea></label>
     <div class="grid-2"><label class="f"><span>Agent</span><select id="jobAgent"><option value="auto">Automàtic (regles)</option>${agents.map((a) => `<option value="${a.id}">${esc(a.name)}</option>`).join('')}</select></label>
     <label class="f"><span>Carpeta</span><select id="jobCwd">${projects.map((p) => `<option value="${esc(p.path)}">${esc(p.name)}</option>`).join('')}</select></label></div>
     <div class="stack"><div class="section-title" style="margin:0">Permisos</div><div class="seg" id="jobMode" role="group">${Object.entries(MODES).map(([k, m]) => `<button type="button" data-jmode="${k}" aria-pressed="${k === sel.mode}">${m.label}</button>`).join('')}</div></div>
-    <div class="grid-2"><label class="f"><span>Quan</span><select id="jobWhen"><option value="ara">Ara</option><option value="mes">Més tard…</option>${prev.length ? '<option value="after">Quan acabi una altra feina…</option>' : ''}<option value="cron">Periòdicament…</option></select></label>
-    <div id="jobWhenX"></div></div>
+    <div class="stack"><div class="section-title" style="margin:0">Quan es comença</div>
+      <div class="seg" id="jobWhen" role="group" aria-label="Quan es comença"><button type="button" data-w="ara" aria-pressed="true">Ara</button><button type="button" data-w="timer" aria-pressed="false">D’aquí a…</button><button type="button" data-w="mes" aria-pressed="false">A una hora</button>${prev.length ? '<button type="button" data-w="after" aria-pressed="false">Després d’una altra</button>' : ''}<button type="button" data-w="cron" aria-pressed="false">Repetida</button></div>
+      <div id="jobWhenX" class="stack"></div></div>
     ${agents.some((a) => a.id === 'codex') ? '<label class="row check"><input type="checkbox" id="jobReview"> <span>Quan acabi, que Codex revisi els canvis</span></label>' : ''}
     <div class="row between sheet-foot"><button class="btn ghost" type="button" data-close>Cancel·la</button><button class="btn ink" id="jobGo" type="button">Posa-la a la cua</button></div>`, (sh) => {
     const x = $('#jobWhenX', sh);
-    $('#jobWhen', sh).onchange = (e) => {
-      sel.when = e.target.value;
-      x.innerHTML = sel.when === 'mes' ? '<label class="f"><span>Dia i hora</span><input type="datetime-local" id="jobAt"></label>'
-        : sel.when === 'after' ? `<label class="f"><span>Després de</span><select id="jobAfter">${prev.map((j) => `<option value="${esc(j.id)}">${esc(j.title)} (${esc(j.state)})</option>`).join('')}</select></label>`
-        : sel.when === 'cron' ? `<label class="f"><span>Cada quan</span><select id="jobCron">${CRON_PRESETS.slice(1).map(([c, l]) => `<option value="${c}">${l}</option>`).join('')}</select></label><input type="text" id="jobCronX" placeholder="min hora dia mes dia-setmana" hidden autocapitalize="off" spellcheck="false" class="mono">` : '';
+    const TIMES = [[5, '5 min'], [15, '15 min'], [30, '30 min'], [60, '1 h'], [180, '3 h'], [480, '8 h']];
+    const hm = (t) => new Date(t).toLocaleString('ca', { weekday: 'short', hour: '2-digit', minute: '2-digit' });
+    const upd = () => {
+      const go = $('#jobGo', sh);
+      if (sel.when === 'timer') { const out = $('#jobTimerOut', sh); out.innerHTML = sel.mins ? `Començarà a les <b>${hm(Date.now() + sel.mins * 60000)}</b>` : 'Tria quant ha d’esperar'; go.textContent = sel.mins ? `Envia-la d’aquí a ${fmtMins(sel.mins)}` : 'Posa-la a la cua'; }
+      else go.textContent = { ara: 'Posa-la a la cua', mes: 'Programa-la', after: 'Encadena-la', cron: 'Programa-la' }[sel.when];
+    };
+    const fmtMins = (m) => (m % 60 === 0 && m >= 60 ? `${m / 60} h` : m > 60 ? `${Math.floor(m / 60)} h ${m % 60} min` : `${m} min`);
+    const setWhen = (w) => {
+      sel.when = w; $$('#jobWhen [data-w]', sh).forEach((b) => b.setAttribute('aria-pressed', b.dataset.w === w));
+      x.innerHTML = w === 'timer' ? `<div class="row" style="flex-wrap:wrap;gap:8px" id="jobTimes">${TIMES.map(([m, l]) => `<button type="button" class="chip" data-m="${m}" aria-pressed="${m === sel.mins}">${l}</button>`).join('')}</div>
+          <div class="row" style="flex-wrap:nowrap"><input class="field" type="number" id="jobMinsN" min="1" max="9999" inputmode="numeric" placeholder="Altre" style="max-width:110px" aria-label="Quantitat"><select id="jobMinsU" aria-label="Unitat"><option value="1">minuts</option><option value="60">hores</option><option value="1440">dies</option></select></div>
+          <p class="muted small" id="jobTimerOut"></p>`
+        : w === 'mes' ? '<label class="f"><span>Dia i hora</span><input type="datetime-local" id="jobAt"></label>'
+        : w === 'after' ? `<label class="f"><span>Quan acabi</span><select id="jobAfter">${prev.map((j) => `<option value="${esc(j.id)}">${esc(j.title)} (${esc(j.state)})</option>`).join('')}</select></label>`
+        : w === 'cron' ? `<label class="f"><span>Cada quan</span><select id="jobCron">${CRON_PRESETS.slice(1).map(([c, l]) => `<option value="${c}">${l}</option>`).join('')}</select></label><input type="text" id="jobCronX" placeholder="min hora dia mes dia-setmana" hidden autocapitalize="off" spellcheck="false" class="mono">` : '';
       const c = $('#jobCron', sh); if (c) c.onchange = () => ($('#jobCronX', sh).hidden = c.value !== 'custom');
+      upd();
     };
+    $('#jobWhen', sh).addEventListener('click', (e) => { const b = e.target.closest('[data-w]'); if (b) setWhen(b.dataset.w); });
+    x.addEventListener('click', (e) => { const b = e.target.closest('[data-m]'); if (!b) return; sel.mins = Number(b.dataset.m); $$('[data-m]', x).forEach((c) => c.setAttribute('aria-pressed', c === b)); $('#jobMinsN', sh).value = ''; upd(); });
+    x.addEventListener('input', (e) => { if (!e.target.matches('#jobMinsN, #jobMinsU')) return; const n = Number($('#jobMinsN', sh).value); sel.mins = n > 0 ? Math.round(n * Number($('#jobMinsU', sh).value)) : 0; $$('[data-m]', x).forEach((c) => c.setAttribute('aria-pressed', false)); upd(); });
     sh.addEventListener('click', (e) => { const m = e.target.closest('[data-jmode]'); if (m) { sel.mode = m.dataset.jmode; $$('[data-jmode]', sh).forEach((b) => b.setAttribute('aria-pressed', b.dataset.jmode === sel.mode)); } if (e.target.closest('[data-close]')) closeSheet(); });
     $('#jobGo', sh).onclick = async () => {
       const prompt = $('#jobPrompt', sh).value.trim(); if (!prompt) return toast('Explica què ha de fer la feina');
       const body = { prompt, agent: $('#jobAgent', sh).value, cwd: $('#jobCwd', sh).value, mode: sel.mode };
+      if (sel.when === 'timer') { if (!sel.mins) return toast('Tria quant ha d’esperar'); body.at = Date.now() + sel.mins * 60000; }
       if (sel.when === 'mes') { const v = $('#jobAt', sh)?.value; if (!v) return toast('Tria el dia i l’hora'); body.at = new Date(v).getTime(); }
       if (sel.when === 'after') body.after = $('#jobAfter', sh).value;
       if (sel.when === 'cron') body.cron = $('#jobCron', sh).value === 'custom' ? $('#jobCronX', sh).value.trim() : $('#jobCron', sh).value;
@@ -964,7 +1050,7 @@ async function newJobSheet() {
       try {
         const j = await api('/api/jobs', { method: 'POST', body });
         if ($('#jobReview', sh)?.checked) await api('/api/jobs', { method: 'POST', body: { agent: 'codex', cwd: j.cwd, mode: 'llegir', after: j.id, title: `Revisió: ${j.title}`, prompt: 'Revisa els canvis que s’acaben de fer en aquesta carpeta (git diff i fitxers nous). Explica què està bé, què es pot millorar i si hi ha cap error. Context de la feina anterior:\n\n{{anterior}}' } });
-        closeSheet(); toast(body.cron ? 'Feina programada' : 'Feina a la cua'); loadJobs();
+        closeSheet(); toast(body.cron || body.at ? 'Feina programada' : 'Feina a la cua'); loadJobs();
       } catch (e) { toast(e.message, 4200); $('#jobGo', sh).disabled = false; }
     };
     if (!isTouch) setTimeout(() => $('#jobPrompt', sh)?.focus(), 80);
@@ -1234,11 +1320,17 @@ function quickFolders(extra = []) {
 }
 const folderChip = (f) => `<button type="button" class="chip ${f.tag === 'fav' ? 'fav' : ''}" data-fs="${esc(f.path)}" title="${esc(f.path)}">${f.tag === 'fav' ? '★ ' : f.tag === 'last' ? '↺ ' : ''}${esc(f.name)}</button>`;
 const favBtn = (p) => `<button class="chip" type="button" data-fav aria-pressed="${getFavs().includes(p)}">${getFavs().includes(p) ? '★ Preferida' : '☆ Desa com a preferida'}</button>`;
+function crumbBar(d) {
+  const sep = d.path.includes('\\') && !d.path.startsWith('/') ? '\\' : '/', parts = d.path.split(/[\\/]/).filter(Boolean);
+  const pathAt = (i) => (sep === '/' ? '/' : '') + parts.slice(0, i + 1).join(sep) + (sep === '\\' && i === 0 ? '\\' : '');
+  const from = Math.max(0, parts.length - 3);
+  const segs = parts.slice(from).map((n, k) => { const i = from + k, cur = i === parts.length - 1; return `<button type="button" class="crumb${cur ? ' cur' : ''}" data-fs="${esc(pathAt(i))}"${cur ? ' aria-current="page"' : ''}>${esc(n)}</button>`; });
+  return `<div class="fs-bar"><button class="icon-btn" type="button" data-fs="${esc(d.parent || '')}" ${d.parent ? '' : 'disabled'} aria-label="Carpeta de dalt">${svg(ICON.back)}</button><nav class="crumbs mono small" aria-label="Camí" title="${esc(d.path)}"><button type="button" class="crumb" data-fs="${esc(d.home)}" aria-label="Carpeta d’inici">~</button>${from > 0 ? '<span class="sl">/</span><span class="sl">…</span>' : ''}${segs.map((x) => `<span class="sl">/</span>${x}`).join('')}</nav></div>`;
+}
 function folderSheet(s) {
   let d = null;
   const draw = () => {
-    const crumbs = d ? d.path.split(/[\\/]/).filter(Boolean) : [];
-    $('#fsBody').innerHTML = !d ? '<p class="muted small">Carregant…</p>' : `<div class="row">${favBtn(d.path)}${quickFolders().slice(0, 8).map(folderChip).join('')}</div><div class="fs-bar"><button class="icon-btn" type="button" data-fs="${esc(d.parent || '')}" ${d.parent ? '' : 'disabled'} aria-label="Carpeta de dalt">${svg(ICON.back)}</button><button class="chip" type="button" data-fs="${esc(d.home)}">Inici</button><span class="fs-path mono small" title="${esc(d.path)}">${esc(crumbs.slice(-2).join(' / ') || '/')}</span></div>
+    $('#fsBody').innerHTML = !d ? '<p class="muted small">Carregant…</p>' : `<div class="row">${favBtn(d.path)}${quickFolders().filter((f) => f.tag === 'fav').map(folderChip).join('')}</div>${crumbBar(d)}
       <div class="proj-list fs-list">${d.dirs.map((x) => `<button type="button" class="proj" data-fs="${esc(x.path)}"><span class="ic">›</span><span class="grow"><div ${x.hidden ? 'class="muted"' : ''}>${esc(x.name)}</div></span></button>`).join('') || '<p class="muted small">No hi ha subcarpetes. Pots triar aquesta.</p>'}</div>`;
     const ok = $('#fsOk'); if (ok) { ok.disabled = !d || d.path === s.cwd; ok.textContent = d && d.path === s.cwd ? 'Ja hi és' : 'Treballa aquí'; }
   };
@@ -1335,7 +1427,7 @@ function focusMain() {
   if (isTouch || $('#sheet')?.open || $('#palette')?.open) return;
   const r = state.route.name;
   if (r === 'session') $('#msg')?.focus({ preventScroll: true });
-  else if (r === 'mobil' && local.engine) $('#lmsg')?.focus({ preventScroll: true });
+  else if (r === 'mobil' && inLocalChat()) $('#lmsg')?.focus({ preventScroll: true });
 }
 $('#sheet').addEventListener('click', (e) => { if (e.target.id === 'sheet') closeSheet(); });
 $('#sheet').addEventListener('close', () => setTimeout(focusMain, 0));
@@ -1415,14 +1507,13 @@ async function newSessionSheet(preset = {}) {
     const VIEWS_ = [
       () => `<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 qf = quickFolders(projects), favN = getFavs().length, quick = qf.filter((f) => f.tag).concat(qf.filter((f) => !f.tag).slice(0, 6)).slice(0, favN + 8).map(folderChip).join('');
+        const quick = quickFolders().filter((f) => f.tag === 'fav').map(folderChip).join('');
         return `<p class="wiz-q">A quina carpeta ha de treballar?</p>
           <form class="pair-form" id="fsForm"><input type="text" id="fsIn" value="${esc(fsd?.path || sel.cwd)}" placeholder="/ruta/exacta/de/la/carpeta" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Ruta de la carpeta"><button class="btn" type="submit">Obre</button></form>
           <div class="fs-pick"><span class="muted small">Carpeta triada</span><b class="mono small">${esc(fsd?.path || sel.cwd || '—')}</b>${fsd?.git ? '<span class="chip">git</span>' : ''}${favBtn(fsd?.path || sel.cwd)}</div>
           <div class="row"><button class="chip" type="button" data-gh>${gh ? 'Torna a les carpetes' : 'Clona de GitHub'}</button>${quick}</div>
           ${gh ? (gh.msg ? `<p class="muted small">${gh.msg}</p>` : '') + (gh.repos ? `<input type="search" id="ghQ" value="${esc(gh.q)}" placeholder="Cerca entre els teus repositoris${gh.user ? ' (' + esc(gh.user) + ')' : ''}" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Cerca un repositori"><div class="proj-list fs-list" id="ghList">${ghList()}</div>` : '')
-          : !fsd ? '<p class="muted small">Carregant…</p>' : `<div class="fs-bar"><button class="icon-btn" type="button" data-fs="${esc(fsd.parent || '')}" ${fsd.parent ? '' : 'disabled'} aria-label="Carpeta de dalt">${svg(ICON.back)}</button><button class="chip" type="button" data-fs="${esc(fsd.home)}">Inici</button><span class="fs-path mono small" title="${esc(fsd.path)}">${esc(crumbs.slice(-2).join(' / ') || '/')}</span></div>
+          : !fsd ? '<p class="muted small">Carregant…</p>' : `${crumbBar(fsd)}
           <div class="proj-list fs-list">${fsd.dirs.map((d) => `<button type="button" class="proj" data-fs="${esc(d.path)}"><span class="ic">›</span><span class="grow"><div ${d.hidden ? 'class="muted"' : ''}>${esc(d.name)}</div></span></button>`).join('') || '<p class="muted small">No hi ha subcarpetes. Pots triar aquesta.</p>'}</div>`}`;
       },
       () => {
@@ -1588,34 +1679,27 @@ async function loadOllama(force) {
   paintModels();
 }
 function ollamaSection() {
-  if (!machine()) return `<div class="sec-head"><div><h2 class="sec">Ollama a l’ordinador</h2><p class="muted small">Els models d’Ollama són més grans i capaços, però només funcionen en un ordinador. Connecta’n un per veure’ls i descarregar-ne.</p></div><a class="btn" href="#/ordinadors">Ordinadors</a></div>`;
-  return `<div class="sec-head"><div><h2 class="sec">Ollama a l’ordinador</h2><p class="muted small">Models que funcionen a ${esc(machine().name)}, sense internet i sense comptes. Els fas servir des de Sessions.</p></div><button class="btn" data-act="ollama-refresh" type="button">${svg(ICON.refresh)}Actualitza</button></div><div id="modelsBody">${state.ollama ? '' : `<div class="panel empty">${bot('work')}<h2>Consultant Ollama…</h2></div>`}</div>`;
+  if (!machine()) return `<h2 class="sec" style="margin-top:36px">Ollama a l’ordinador</h2><div class="stack-lg" style="max-width:640px"><div class="card"><b>Només en un ordinador</b><div class="muted small" style="margin-top:4px">Els models d’Ollama són més grans i capaços. Connecta’n un per veure’ls i descarregar-ne.</div><a class="btn block" style="margin-top:10px" href="#/ordinadors">Ordinadors</a></div></div>`;
+  return `<div class="row between" style="max-width:640px;margin-top:36px"><h2 class="sec" style="margin:0">Ollama a ${esc(machine().name)}</h2><button class="icon-btn" data-act="ollama-refresh" type="button" aria-label="Actualitza">${svg(ICON.refresh)}</button></div><div id="modelsBody" style="max-width:640px;margin-top:12px">${state.ollama ? '' : `<div class="card"><b>Consultant Ollama…</b></div>`}</div>`;
 }
 function pctOf(j) { return j.total ? Math.min(100, Math.round((j.completed / j.total) * 100)) : 0; }
+const OLLAMA_START = 'Engega Ollama en aquest ordinador: comprova que està instal·lat (si no, digue-m’ho abans d’instal·lar res) i executa «ollama serve» en segon pla. Quan respongui a http://localhost:11434, confirma-m’ho.';
 function paintModels() {
   const box = $('#modelsBody'); if (!box || !state.ollama) return;
   const o = state.ollama, have = new Set(o.models.map((m) => m.name));
   if (!o.available) {
-    box.innerHTML = `<div class="panel empty">${bot('sleep')}<h2>Ollama no està engegat en aquest ordinador</h2><p>Instal·la’l des d’<a href="https://ollama.com" target="_blank" rel="noopener">ollama.com</a> i engega’l amb <span class="mono">ollama serve</span>. Després, torna-ho a comprovar.</p><button class="btn" data-act="ollama-refresh" type="button">${svg(ICON.refresh)}Torna-ho a comprovar</button></div>`;
+    box.innerHTML = `<div class="card"><div class="row between"><b>Ollama no està engegat</b><i class="dot"></i></div><div class="muted small" style="margin-top:4px">Un agent pot engegar-lo per tu amb <span class="mono">ollama serve</span>. Si no el tens, l’instal·les des d’<a href="https://ollama.com" target="_blank" rel="noopener">ollama.com</a>.</div><div class="row" style="margin-top:10px"><button class="btn ink" data-act="ollama-start" type="button">Engega’l amb un agent</button><button class="btn" data-act="ollama-refresh" type="button">Torna-ho a comprovar</button></div></div>`;
     return;
   }
   const pulling = o.pulling || [];
-  box.innerHTML = `<div class="grid2">
-    <div class="stack">
-      <section class="panel"><header><h2>Instal·lats</h2><span class="muted small">${o.models.length}</span></header><div class="body">${o.models.length ? o.models.map((m) => `
-        <div class="agent-row"><span class="grow"><div class="row"><b class="mono" style="font-size:14px">${esc(m.name)}</b>${(o.running || []).includes(m.name) ? '<span class="chip waiting">A memòria</span>' : ''}</div><div class="muted small">${[m.params, m.quant, bytes(m.size)].filter(Boolean).map(esc).join(' · ')}</div></span>
-          <button class="btn sm" data-act="ollama-chat" data-name="${esc(m.name)}" type="button">Sessió</button><button class="icon-btn" data-act="ollama-del" data-name="${esc(m.name)}" type="button" aria-label="Esborra ${esc(m.name)}">${svg(ICON.trash)}</button></div>`).join('') : '<p class="muted small">Encara no n’hi ha cap. Tria’n un de la llista o escriu-ne el nom.</p>'}</div></section>
-      ${pulling.length ? `<section class="panel"><header><h2>Descarregant</h2></header><div class="body stack">${pulling.map((j) => `
-        <div class="stack" data-pull="${esc(j.name)}"><div class="row between"><b class="mono" style="font-size:14px">${esc(j.name)}</b><button class="btn sm ghost" data-act="ollama-cancel" data-name="${esc(j.name)}" type="button">Cancel·la</button></div><div class="progress"><i style="width:${pctOf(j)}%"></i></div><div class="muted small mono" data-st>${esc(j.status)}${j.total ? ` · ${bytes(j.completed)} de ${bytes(j.total)}` : ''}</div></div>`).join('')}</div></section>` : ''}
-    </div>
-    <div class="stack">
-      <section class="panel"><header><h2>Descarrega un model</h2></header><div class="body stack">
-        <form class="row" id="pullForm" style="flex-wrap:nowrap"><input type="text" id="pullIn" placeholder="Nom del model, p. ex. qwen3:4b" autocapitalize="off" spellcheck="false" aria-label="Nom del model"><button class="btn ink" type="submit">${svg(ICON.download)}Descarrega</button></form>
-        <p class="muted small">Tens tots els noms a <a href="https://ollama.com/library" target="_blank" rel="noopener">ollama.com/library</a>. Les mides són aproximades.</p>
-        <div class="list">${OLLAMA_PICKS.map((p) => { const busy = pulling.some((j) => j.name === p.name), got = have.has(p.name); return `
-          <button class="card" type="button" ${got || busy ? 'disabled' : `data-act="ollama-pull" data-name="${p.name}"`} style="${got ? 'opacity:.6' : ''}"><div class="row between"><b class="mono" style="font-size:14px">${p.name}</b><span class="muted small">${got ? 'Instal·lat' : busy ? 'Descarregant…' : p.size}</span></div><div class="muted small" style="margin-top:4px">${p.note}</div></button>`; }).join('')}</div>
-      </div></section>
-    </div>
+  box.innerHTML = `<div class="stack-lg">
+    <div class="list">${o.models.length ? o.models.map((m) => `<div class="card model-card"><div class="row between"><b class="mono" style="font-size:14px">${esc(m.name)}</b><span class="row" style="gap:6px">${(o.running || []).includes(m.name) ? '<span class="chip waiting">A memòria</span>' : ''}<button class="btn sm" data-act="ollama-chat" data-name="${esc(m.name)}" type="button">Xat</button><button class="icon-btn" data-act="ollama-del" data-name="${esc(m.name)}" type="button" aria-label="Esborra ${esc(m.name)}">${svg(ICON.trash)}</button></span></div><div class="muted small" style="margin-top:4px">${[m.params, m.quant, bytes(m.size)].filter(Boolean).map(esc).join(' · ')}</div></div>`).join('') : '<p class="muted small">Encara no n’hi ha cap model. Tria’n un de sota.</p>'}</div>
+    ${pulling.map((j) => `<div class="card stack" data-pull="${esc(j.name)}"><div class="row between"><b class="mono" style="font-size:14px">${esc(j.name)}</b><button class="btn sm ghost" data-act="ollama-cancel" data-name="${esc(j.name)}" type="button">Cancel·la</button></div><div class="progress"><i style="width:${pctOf(j)}%"></i></div><div class="muted small mono" data-st>${esc(j.status)}${j.total ? ` · ${bytes(j.completed)} de ${bytes(j.total)}` : ''}</div></div>`).join('')}
+    <details class="card"><summary><b>Descarrega un model</b></summary><div class="stack" style="margin-top:10px">
+      <form class="row" id="pullForm" style="flex-wrap:nowrap"><input type="text" id="pullIn" placeholder="Nom, p. ex. qwen3:4b" autocapitalize="off" spellcheck="false" aria-label="Nom del model"><button class="btn ink" type="submit">${svg(ICON.download)}Descarrega</button></form>
+      <div class="list">${OLLAMA_PICKS.map((p) => { const busy = pulling.some((j) => j.name === p.name), got = have.has(p.name); return `<button class="card" type="button" ${got || busy ? 'disabled' : `data-act="ollama-pull" data-name="${p.name}"`} style="${got ? 'opacity:.6' : ''}"><div class="row between"><b class="mono" style="font-size:14px">${p.name}</b><span class="muted small">${got ? 'Instal·lat' : busy ? 'Descarregant…' : p.size}</span></div><div class="muted small" style="margin-top:4px">${p.note}</div></button>`; }).join('')}</div>
+      <p class="muted small">Tots els noms a <a href="https://ollama.com/library" target="_blank" rel="noopener">ollama.com/library</a>.</p>
+    </div></details>
   </div>`;
 }
 const pullDone = new Set(); // descàrregues que han acabat abans que respongués la petició
@@ -1660,6 +1744,7 @@ window.NioBrains = {
   list() {
     const out = [{ id: 'rules', label: 'Ordres ràpides' }];
     if (machine() && state.connected) (state.ollama?.models || []).forEach((m) => out.push({ id: 'ollama:' + m.name, label: `Ollama · ${m.name}` }));
+    if (machine() && state.connected) (state.info?.agents || []).filter((x) => x.available && !['ollama', 'demo'].includes(x.id)).forEach((x) => out.push({ id: 'agent:' + x.id, label: `${AGENT_NAMES[x.id] || x.id} (agent)` }));
     if (local.engine) out.push({ id: 'local', label: `Xat local · ${LOCAL_MODELS.find((x) => x.id === local.model)?.name || local.model}` });
     return out;
   },
@@ -1668,6 +1753,22 @@ window.NioBrains = {
       if (!machine()) throw new Error('No hi ha cap ordinador connectat');
       return (await api('/api/ollama/chat', { method: 'POST', body: { model: id.slice(7), messages, format: 'json' } })).content;
     }
+    if (id.startsWith('agent:')) {
+      if (!machine()) throw new Error('No hi ha cap ordinador connectat');
+      const cwd = (await api('/api/projects').catch(() => []))[0]?.path;
+      const prompt = messages.map((m) => (m.role === 'system' ? m.content : m.content)).join('\n\n') + '\n\nRespon només amb el JSON demanat, sense usar cap eina.';
+      const s = await api('/api/sessions', { method: 'POST', body: { agent: id.slice(6), cwd, mode: 'llegir', title: 'Pissarra', text: prompt } });
+      try {
+        for (let i = 0; i < 120; i++) {
+          await new Promise((r) => setTimeout(r, 1500));
+          const d = await api(`/api/sessions/${s.id}`);
+          if (d.session.state === 'error') throw new Error(d.session.error || 'L’agent ha fallat');
+          if (d.session.state === 'waiting') { api(`/api/sessions/${s.id}/stop`, { method: 'POST' }).catch(() => {}); throw new Error('L’agent demana permís per a una eina'); }
+          if (d.session.state === 'idle') { const t = d.events.filter((e) => e.kind === 'text').map((e) => e.text).join('\n'); if (t) return t; }
+        }
+        throw new Error('L’agent ha tardat massa');
+      } finally { api(`/api/sessions/${s.id}`, { method: 'DELETE' }).then(() => handle({ type: 'removed', session: s.id })).catch(() => {}); }
+    }
     if (id === 'local') {
       if (!local.engine) throw new Error('Primer obre un model a «Xat local»');
       try {
@@ -1712,11 +1813,11 @@ const LOCAL_MODELS = [
   { id: 'Qwen3-1.7B-q4f16_1-MLC', name: 'Qwen 3 · 1,7B', size: '≈ 1,3 GB', note: 'Va bé amb codi i raonaments curts.' },
   { id: 'Phi-3.5-mini-instruct-q4f16_1-MLC', name: 'Phi 3.5 mini · 3,8B', size: '≈ 2,2 GB', note: 'El més potent. Millor en tauleta o ordinador.' }
 ];
-const local = { engine: null, model: null, loading: false, progress: 0, status: '', messages: [], busy: false };
+const local = { ollama: null, engine: null, model: null, loading: false, progress: 0, status: '', messages: [], busy: false };
 const stripThink = (t) => t.replace(/<think>[\s\S]*?(<\/think>|$)/g, '').trimStart();
 function viewLocal() {
   const hasGpu = 'gpu' in navigator, chosen = local.model || LS.get('nio.localModel', LOCAL_MODELS[0].id);
-  if (!local.engine) {
+  if (!inLocalChat()) {
     return `<div class="top"><div><h1>Xat local</h1><p>Un model dins d’aquest dispositiu, per quan no tens l’ordinador a mà. Un cop descarregat, funciona sense connexió i res no surt del dispositiu.</p></div></div>
     <h2 class="sec" style="margin-top:0">En aquest dispositiu</h2>
     <div class="stack-lg" style="max-width:640px">
@@ -1726,14 +1827,15 @@ function viewLocal() {
     </div>
     ${ollamaSection()}`;
   }
-  const info = LOCAL_MODELS.find((m) => m.id === local.model);
+  const info = local.ollama ? { name: local.ollama } : LOCAL_MODELS.find((m) => m.id === local.model);
   return `<section class="chat">
-    <div class="chat-head"><span>${bot('idle')}</span><div class="grow"><h1>${esc(info?.name || local.model)}</h1><div class="sub">Model dins d’aquest dispositiu</div></div></div>
-    <div class="mode-bar"><span class="chip"><span class="agent-tag" data-agent="browser">${esc(info?.name || local.model)}</span></span><span class="chip">Al dispositiu</span><button class="chip" type="button" data-act="lm-change">Canvia de model</button><button class="chip" type="button" data-act="lm-clear">Comença de nou</button></div>
+    <div class="chat-head"><span>${bot('idle')}</span><div class="grow"><h1>${esc(info?.name || local.model)}</h1><div class="sub">${local.ollama ? `Ollama a ${esc(machine()?.name || 'l’ordinador')}` : 'Model dins d’aquest dispositiu'}</div></div></div>
+    <div class="mode-bar"><span class="chip"><span class="agent-tag" data-agent="browser">${esc(info?.name || local.model)}</span></span><span class="chip">${local.ollama ? 'A l’ordinador' : 'Al dispositiu'}</span><button class="chip" type="button" data-act="lm-change">Canvia de model</button><button class="chip" type="button" data-act="lm-clear">Comença de nou</button></div>
     <div class="feed" id="lfeed">${local.messages.length ? '' : `<div class="empty">${bot('idle')}<h2>Pregunta el que vulguis</h2><p>Va bé per resumir, reescriure textos curts o buscar idees.</p></div>`}</div>
     <div class="composer"><div class="inner"><textarea rows="1" id="lmsg" placeholder="Escriu al model…" enterkeyhint="send" aria-label="Missatge per al model"></textarea><button class="send" id="lsend" type="button" aria-label="Envia">${svg(ICON.send)}</button></div></div>
   </section>`;
 }
+const inLocalChat = () => !!(local.engine || local.ollama);
 function bindLocal() {
   const feed = $('#lfeed'); if (!feed) return;
   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>`));
@@ -1768,6 +1870,7 @@ async function recoverLocal(text) {
   await loadLocal(id);
 }
 async function loadLocal(id) {
+  local.ollama = null;
   local.loading = true; local.progress = 0; local.status = 'Preparant…'; render();
   try {
     const webllm = await import('https://esm.run/@mlc-ai/web-llm@0.2.86');
@@ -1790,6 +1893,11 @@ async function sendLocal() {
   const out = el('<div class="msg-ai cursor"></div>'); feed.appendChild(out); toBottom(feed);
   local.busy = true; local.stopped = false; setLocalBusy(true); let acc = '';
   try {
+    if (local.ollama) {
+      const r = await api('/api/ollama/chat', { method: 'POST', body: { model: local.ollama, messages: [{ role: 'system', content: LOCAL_SYSTEM }, ...local.messages.slice(-12)] } });
+      if (!local.stopped) acc = r.content || '';
+      out.innerHTML = md(stripThink(acc)); toBottom(feed);
+    } else {
     const chunks = await local.engine.chat.completions.create({
       messages: [{ role: 'system', content: LOCAL_SYSTEM }, ...local.messages.slice(-8)], stream: true,
       temperature: 0.7, top_p: 0.8, frequency_penalty: 0.6, presence_penalty: 0.4, repetition_penalty: 1.15, max_tokens: 700,
@@ -1799,12 +1907,13 @@ async function sendLocal() {
       acc += c.choices[0]?.delta?.content || ''; out.innerHTML = md(stripThink(acc)); if (nearBottom(feed)) toBottom(feed);
       if (local.stopped) break;
     }
+    }
   } 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 (local.stopped && local.engine) { 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);
 }
@@ -1815,9 +1924,7 @@ const controlOn = () => !!(state.info?.control?.navegador?.enabled || state.info
 // Aturada d'emergència: sempre a la vista mentre el control estigui actiu.
 function renderPanic() {
   syncScreenBtn();
-  let b = $('#panicBtn');
-  if (!controlOn() || !machine()) { b?.remove(); return; }
-  if (!b) { b = el(`<button class="panic" id="panicBtn" type="button" data-act="panic" aria-label="Aturada d’emergència">${svg(ICON.panic)}<span>Atura-ho tot</span></button>`); document.body.appendChild(b); }
+  $('#panicBtn')?.remove();
 }
 async function panicNow() {
   if (!confirm('S’aturaran tots els agents d’aquest ordinador, es rebutjaran les peticions pendents i es tancarà el navegador.')) return;
@@ -1862,7 +1969,7 @@ async function loadScreen() {
 function syncScreenBtn() { const b = $('[data-act=screen-now]'); if (b) b.disabled = !controlOn(); }
 function onScreen(msg) { if (screen && !screen.error) { screen.last = msg.shot; { const box = $('#screenBody'); if (box) box.innerHTML = screenHtml(); hydrateShots(box); } } }
 /* ---------------------------------------------------------------- pantalla remota (veure i controlar l'ordinador) */
-const RD = { on: false, ctl: false, mods: new Set(), drag: false, q: 55, blank: 0, err: 0, objUrl: null, chain: Promise.resolve(), sw: 0, tap: null, scroll: null, errAt: 0 };
+const RD = { on: false, ctl: false, mods: new Set(), drag: false, q: 55, blank: 0, err: 0, hash: '', still: 0, scale: 1, objUrl: null, chain: Promise.resolve(), sw: 0, tap: null, scroll: null, errAt: 0 };
 const RD_KEYS = [['Escape', 'Esc'], ['Tab', 'Tab'], ['ArrowUp', '↑'], ['ArrowDown', '↓'], ['ArrowLeft', '←'], ['ArrowRight', '→'], ['Enter', '⏎'], ['Backspace', '⌫']];
 const RD_MODS = [['meta', '⌘'], ['alt', '⌥'], ['ctrl', '⌃'], ['shift', '⇧']];
 const RD_SPECIAL = /^(Escape|Tab|Arrow(Up|Down|Left|Right)|Home|End|PageUp|PageDown|Delete|F([1-9]|1[0-2]))$/;
@@ -1870,12 +1977,13 @@ const RD_SPECIAL = /^(Escape|Tab|Arrow(Up|Down|Left|Right)|Home|End|PageUp|PageD
 async function remoteOpen() {
   const m = machine(); if (!m || RD.on) return;
   if (!(state.info?.control?.escriptori?.enabled || screen?.caps?.escriptori?.enabled)) return toast('Activa primer «Apps de l’escriptori» en aquest ordinador.', 5000);
-  Object.assign(RD, { on: true, ctl: false, mods: new Set(), drag: false, blank: 0, err: 0, tap: null, scroll: null });
+  const slow = navigator.connection && (navigator.connection.saveData || /^(slow-2g|2g|3g)$/.test(navigator.connection.effectiveType || '') || navigator.connection.type === 'cellular');
+  Object.assign(RD, { hash: '', still: 0, scale: slow ? .6 : 1, q: slow ? 45 : 55, two: 'scroll', z: 1, px: 0, py: 0, on: true, ctl: false, mods: new Set(), drag: false, blank: 0, err: 0, tap: null, scroll: null });
   const root = document.createElement('div');
   root.className = 'rd'; root.id = 'rd'; root.setAttribute('role', 'dialog'); root.setAttribute('aria-label', 'Pantalla remota');
   root.innerHTML = `<div class="rd-bar"><button class="rd-btn" data-rd="close" type="button">Tanca</button><b class="rd-title">${esc(m.name || 'Ordinador')}</b><span class="rd-stat" id="rdStat"></span><span class="grow"></span><button class="rd-btn" data-rd="full" type="button" id="rdFull" hidden>Pantalla completa</button><div class="rd-seg" role="group" aria-label="Mode"><button data-rd="view" type="button" aria-pressed="true">Mirar</button><button data-rd="ctl" type="button" aria-pressed="false">Controlar</button></div></div>
-    <div class="rd-stage" id="rdStage"><img id="rdImg" alt="Pantalla de l’ordinador" draggable="false"><div class="rd-msg" id="rdMsg">Connectant…</div></div>
-    <div class="rd-keys" id="rdKeys" hidden><button class="rd-btn" data-rd="kbd" type="button">Teclat</button>${RD_MODS.map(([k, l]) => `<button class="rd-btn" data-mod="${k}" type="button" aria-pressed="false">${l}</button>`).join('')}${RD_KEYS.map(([k, l]) => `<button class="rd-btn" data-key="${k}" type="button">${l}</button>`).join('')}<button class="rd-btn" data-rd="drag" type="button" id="rdDrag">1 dit: desplaça</button></div>
+    <div class="rd-stage" id="rdStage"><img id="rdImg" alt="Pantalla de l’ordinador" draggable="false"><div class="rd-msg" id="rdMsg">Connectant…</div><div class="rd-tools" role="group" aria-label="Zoom i captura"><button class="rd-btn" data-rd="zout" type="button" aria-label="Allunya">−</button><button class="rd-btn rd-pct" data-rd="zfit" type="button" id="rdPct" aria-label="Enquadra">100%</button><button class="rd-btn" data-rd="zin" type="button" aria-label="Apropa">+</button><button class="rd-btn" data-rd="z11" type="button" aria-label="Mida real">1:1</button><span class="rd-sep"></span><button class="rd-btn" data-rd="save" type="button">Desa captura</button></div></div>
+    <div class="rd-keys" id="rdKeys" hidden><button class="rd-btn" data-rd="kbd" type="button">Teclat</button>${RD_MODS.map(([k, l]) => `<button class="rd-btn" data-mod="${k}" type="button" aria-pressed="false">${l}</button>`).join('')}${RD_KEYS.map(([k, l]) => `<button class="rd-btn" data-key="${k}" type="button">${l}</button>`).join('')}<button class="rd-btn" data-rd="drag" type="button" id="rdDrag">1 dit: desplaça</button><button class="rd-btn" data-rd="two" type="button" id="rdTwo">2 dits: desplaça</button></div>
     <textarea class="rd-type" id="rdType" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" aria-label="Teclat de l’ordinador"></textarea>`;
   document.body.appendChild(root);
   document.documentElement.classList.add('rd-open');
@@ -1912,11 +2020,21 @@ async function rdLoop() {
     const started = performance.now();
     try {
       const stage = $('#rdStage'); if (!stage) break;
-      const w = Math.min(1800, Math.max(640, Math.round(stage.clientWidth * Math.min(devicePixelRatio || 1, 2))));
-      const res = await fetch(`${m.url}/api/desktop/frame?w=${w}&q=${RD.q}&_=${Date.now()}`, { headers: { Authorization: `Bearer ${m.token}` }, cache: 'no-store' });
+      const w = Math.min(2400, Math.max(480, Math.round(stage.clientWidth * Math.min(devicePixelRatio || 1, 2) * Math.min(RD.z, 2) * RD.scale)));
+      const res = await fetch(`${m.url}/api/desktop/frame?w=${w}&q=${RD.q}&h=${RD.hash}&_=${Date.now()}`, { headers: { Authorization: `Bearer ${m.token}` }, cache: 'no-store' });
       if (!res.ok) { const d = await res.json().catch(() => ({})); throw new Error(d.error || `Error ${res.status}`); }
+      const t1 = performance.now();
+      if (res.status === 204) { RD.still++; RD.err = 0; n++; await sleep(RD.still > 3 ? 320 : 120); continue; }
       const blob = await res.blob();
       if (!RD.on) break;
+      RD.still = 0; RD.hash = res.headers.get('x-hash') || '';
+      const dl = performance.now() - t1;
+      // Si baixar el fotograma triga massa (dades, una altra xarxa), l'abaixa de mida i qualitat; si va sobrat, el torna a pujar.
+      if (blob.size > 12000) {
+        if (dl > 450) { if (RD.scale > .4) RD.scale = Math.max(.4, RD.scale * .8); else RD.q = Math.max(32, RD.q - 6); }
+        else if (dl < 140 && started - (RD.adj || 0) > 1200) { if (RD.q < 55) RD.q = Math.min(55, RD.q + 4); else RD.scale = Math.min(1, RD.scale * 1.12); RD.adj = started; }
+        if (dl > 450) RD.adj = started;
+      }
       const img = $('#rdImg'), old = RD.objUrl, url = URL.createObjectURL(blob);
       RD.objUrl = url; img.onload = () => { if (old) URL.revokeObjectURL(old); }; img.src = url;
       RD.sw = Number(res.headers.get('x-screen-w')) || RD.sw;
@@ -1929,7 +2047,7 @@ async function rdLoop() {
       RD.err++; rdMsg(RD.err > 1 ? `${e.message || 'Sense connexió'}${/^Error|Activa|captura/.test(e.message) ? '' : ' · reconnectant…'}` : '');
       await sleep(Math.min(3000, 500 * RD.err));
     }
-    await sleep(Math.max(30, 110 - (performance.now() - started)));
+    await sleep(Math.max(0, 70 - (performance.now() - started)));
   }
 }
 function rdSend(ev) {
@@ -1958,9 +2076,78 @@ function rdScroll(dx, dy, pos) {
     if (ev.dx || ev.dy) rdSend(ev);
   }, 70);
 }
+
+function rdView() {
+  const img = $('#rdImg'), st = $('#rdStage'); if (!img || !st) return;
+  const z = RD.z, mx = Math.max(0, (img.offsetWidth * z - st.clientWidth) / 2), my = Math.max(0, (img.offsetHeight * z - st.clientHeight) / 2);
+  RD.px = Math.max(-mx, Math.min(mx, RD.px)); RD.py = Math.max(-my, Math.min(my, RD.py));
+  if (z === 1) RD.px = RD.py = 0;
+  img.style.transform = z === 1 ? '' : `translate(${RD.px}px,${RD.py}px) scale(${z})`;
+  const pct = $('#rdPct'); if (pct) pct.textContent = Math.round(z * 100) + '%';
+}
+function rdZoom(z, cx, cy) {
+  const st = $('#rdStage'); if (!st) return;
+  z = Math.max(1, Math.min(6, z));
+  const r = st.getBoundingClientRect(), ox = (cx ?? r.left + r.width / 2) - (r.left + r.width / 2), oy = (cy ?? r.top + r.height / 2) - (r.top + r.height / 2), k = z / RD.z;
+  RD.px = ox - (ox - RD.px) * k; RD.py = oy - (oy - RD.py) * k; RD.z = z; rdView();
+}
+async function screenNow() {
+  const m = machine(); if (!m) return;
+  toast('Fent la captura…');
+  try {
+    const res = await fetch(`${m.url}/api/desktop/frame?w=1600&q=80&_=${Date.now()}`, { headers: { Authorization: `Bearer ${m.token}` }, cache: 'no-store' });
+    if (!res.ok) throw new Error(`Error ${res.status}`);
+    const url = URL.createObjectURL(await res.blob());
+    const d = new Date(), p = (n) => String(n).padStart(2, '0');
+    const name = `nio-pantalla-${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}.jpg`;
+    openSheet(`<h2>Captura de la pantalla</h2><img class="screen-img" alt="Captura de la pantalla de l’ordinador" src="${url}" style="width:100%;border-radius:10px;margin:8px 0"><div class="row"><a class="btn ink" href="${url}" download="${name}">Desa la imatge</a><button class="btn" type="button" data-close>Tanca</button></div>`);
+  } catch {
+    try { const s = await api('/api/screen', { method: 'POST' }); onScreen({ shot: s }); toast('Captura feta'); } catch (err) { toast(`No s’ha pogut fer la captura: ${err.message}`, 5000); }
+  }
+}
+function rdSave() {
+  const img = $('#rdImg'); if (!img?.src) return toast('Encara no hi ha cap imatge');
+  const d = new Date(), p = (n) => String(n).padStart(2, '0');
+  const a = document.createElement('a'); a.href = img.src; a.download = `nio-pantalla-${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}.jpg`;
+  document.body.appendChild(a); a.click(); a.remove(); toast('Captura desada');
+}
+function rdGestures(stage) {
+  const pts = new Map(); let g = null, pan = null, tapT = 0;
+  const dist = () => { const [a, b] = [...pts.values()]; return Math.hypot(a.x - b.x, a.y - b.y) || 1; };
+  const mid = () => { const [a, b] = [...pts.values()]; return [(a.x + b.x) / 2, (a.y + b.y) / 2]; };
+  stage.addEventListener('pointerdown', (e) => {
+    if (e.target.closest('.rd-tools') || (RD.ctl && (RD.two !== 'zoom' || e.pointerType === 'mouse'))) return;
+    try { stage.setPointerCapture(e.pointerId); } catch {}
+    pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pts.size === 2) { const [mx, my] = mid(); g = { d: dist(), z: RD.z, mx, my, px: RD.px, py: RD.py }; pan = null; }
+    else if (pts.size === 1 && !RD.ctl) pan = { x: e.clientX, y: e.clientY, px: RD.px, py: RD.py };
+  });
+  stage.addEventListener('pointermove', (e) => {
+    const p = pts.get(e.pointerId); if (!p) return; p.x = e.clientX; p.y = e.clientY;
+    if (pts.size >= 2 && g) {
+      const [mx, my] = mid(), st = stage.getBoundingClientRect(), z = Math.max(1, Math.min(6, g.z * dist() / g.d)), k = z / g.z;
+      const ox = g.mx - (st.left + st.width / 2), oy = g.my - (st.top + st.height / 2);
+      RD.z = z; RD.px = g.px * k + ox * (1 - k) + (mx - g.mx); RD.py = g.py * k + oy * (1 - k) + (my - g.my); rdView();
+    } else if (pan && RD.z > 1 && !RD.ctl) { RD.px = pan.px + e.clientX - pan.x; RD.py = pan.py + e.clientY - pan.y; rdView(); }
+  });
+  const up = (e) => {
+    if (!pts.has(e.pointerId)) return;
+    const moved = pan && Math.hypot(e.clientX - pan.x, e.clientY - pan.y) > 8;
+    pts.delete(e.pointerId); g = null;
+    if (pts.size === 1 && !RD.ctl) { const [q] = pts.values(); pan = { x: q.x, y: q.y, px: RD.px, py: RD.py }; }
+    else { pan = null; if (!pts.size && e.type === 'pointerup' && !moved && !RD.ctl) { const now = performance.now(); if (now - tapT < 320) { RD.z > 1 ? (RD.z = 1, rdView()) : rdZoom(2.5, e.clientX, e.clientY); tapT = 0; } else tapT = now; } }
+  };
+  stage.addEventListener('pointerup', up); stage.addEventListener('pointercancel', up);
+  stage.addEventListener('wheel', (e) => { if (!(e.ctrlKey || e.metaKey) && RD.ctl) return; e.preventDefault(); if (e.ctrlKey || e.metaKey) rdZoom(RD.z * Math.exp(-Math.max(-40, Math.min(40, e.deltaY)) * 0.01), e.clientX, e.clientY); else if (RD.z > 1) { RD.px -= e.deltaX; RD.py -= e.deltaY; rdView(); } }, { passive: false });
+  let gz = 1;
+  stage.addEventListener('gesturestart', (e) => { e.preventDefault(); gz = RD.z; });
+  stage.addEventListener('gesturechange', (e) => { e.preventDefault(); rdZoom(gz * e.scale, e.clientX, e.clientY); });
+  window.addEventListener('resize', rdView);
+}
 function rdBind(root) {
   const stage = $('#rdStage', root), typer = $('#rdType', root);
   const ptrs = new Map();
+  rdGestures(stage);
   const click = (pos, e) => {
     const now = performance.now(), prev = RD.tap, near = prev && Math.hypot(e.clientX - prev.x, e.clientY - prev.y) < 28;
     const count = prev && near && now - prev.t < 340 ? (prev.count >= 2 ? 3 : 2) : 1;
@@ -1968,12 +2155,13 @@ function rdBind(root) {
     rdSend({ type: 'click', x: pos[0], y: pos[1], count });
   };
   stage.addEventListener('pointerdown', (e) => {
-    if (!RD.ctl || (e.pointerType === 'mouse' && e.button !== 0)) return;
+    if (!RD.ctl || e.target.closest('.rd-tools') || (e.pointerType === 'mouse' && e.button !== 0)) return;
     try { stage.setPointerCapture(e.pointerId); } catch {}
     const p = { x0: e.clientX, y0: e.clientY, x: e.clientX, y: e.clientY, touch: e.pointerType !== 'mouse', moved: false, long: false, path: [], pt: 0, lp: null };
     const pos = rdPos(e); if (pos) p.path.push(pos);
     if (p.touch) p.lp = setTimeout(() => { if (!p.moved && ptrs.size === 1 && ptrs.has(e.pointerId)) { p.long = true; navigator.vibrate?.(15); const q = rdPos(e); if (q) rdSend({ type: 'rclick', x: q[0], y: q[1] }); } }, 550);
     ptrs.set(e.pointerId, p);
+    if (RD.two === 'zoom' && p.touch && ptrs.size > 1) for (const q of ptrs.values()) { q.moved = q.zoomed = true; clearTimeout(q.lp); }
     if (!typer.matches(':focus') && !p.touch) typer.focus({ preventScroll: true });
     e.preventDefault();
   });
@@ -1981,7 +2169,7 @@ function rdBind(root) {
     const p = ptrs.get(e.pointerId); if (!p) return;
     const dx = e.clientX - p.x, dy = e.clientY - p.y; p.x = e.clientX; p.y = e.clientY;
     if (!p.moved && Math.hypot(p.x - p.x0, p.y - p.y0) > 8) { p.moved = true; clearTimeout(p.lp); }
-    if (!p.moved || p.long) return;
+    if (!p.moved || p.long || p.zoomed) return;
     if (p.touch && (ptrs.size > 1 || !RD.drag)) { if (ptrs.size > 1 && e.isPrimary === false) return; rdScroll(dx, dy, rdPos(e)); return; }
     const now = performance.now(), pos = rdPos(e);
     if (pos && now - p.pt > 22) { p.path.push(pos); p.pt = now; }
@@ -1989,7 +2177,7 @@ function rdBind(root) {
   const end = (e) => {
     const p = ptrs.get(e.pointerId); if (!p) return;
     ptrs.delete(e.pointerId); clearTimeout(p.lp);
-    if (p.long) return;
+    if (p.long || p.zoomed) return;
     const pos = rdPos(e);
     if (!p.moved) { if (pos && e.type === 'pointerup') click(pos, e); return; }
     if (p.touch && (ptrs.size > 0 || !RD.drag)) return;
@@ -2043,6 +2231,12 @@ function rdBind(root) {
         rdHint(); break;
       }
       case 'kbd': typer.focus(); break;
+      case 'zin': rdZoom(RD.z * 1.5); break;
+      case 'zout': rdZoom(RD.z / 1.5); break;
+      case 'zfit': RD.z = 1; rdView(); break;
+      case 'z11': { const im = $('#rdImg'); rdZoom(RD.sw && im.offsetWidth ? RD.sw / im.offsetWidth : 2); break; }
+      case 'save': rdSave(); break;
+      case 'two': RD.two = RD.two === 'zoom' ? 'scroll' : 'zoom'; b.textContent = RD.two === 'zoom' ? '2 dits: zoom' : '2 dits: desplaça'; break;
       case 'drag': RD.drag = !RD.drag; b.textContent = RD.drag ? '1 dit: arrossega' : '1 dit: desplaça'; break;
     }
   });
@@ -2228,7 +2422,8 @@ document.addEventListener('click', async (e) => {
     case 'ollama-pull': return pullModel(a.dataset.name || $('#pullIn')?.value);
     case 'ollama-cancel': try { await api(`/api/ollama/pull/${encodeURIComponent(a.dataset.name)}`, { method: 'DELETE' }); } catch (err) { toast(err.message); } return;
     case 'ollama-del': return deleteModel(a.dataset.name);
-    case 'ollama-chat': try { state.info = await api('/api/info?refresh=1'); } catch { /* res */ } return newSessionSheet({ agent: 'ollama', model: a.dataset.name });
+    case 'ollama-start': return newSessionSheet({ text: OLLAMA_START });
+    case 'ollama-chat': local.ollama = a.dataset.name; local.engine = null; local.model = null; local.messages = []; return render();
     case 'retry': return connect();
     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; }
@@ -2240,7 +2435,7 @@ document.addEventListener('click', async (e) => {
     case 'job-new': return newJobSheet();
     case 'panic': return panicNow();
     case 'remote-open': remoteOpen(); return;
-    case 'screen-now': try { const s = await api('/api/screen', { method: 'POST' }); onScreen({ shot: s }); } catch (err) { toast(err.message, 4500); } return;
+    case 'screen-now': return screenNow();
     case 'mem-new': return memEdit(null);
     case 'mem-all': if (mem) delete mem.hits; return loadMemory();
     case 'activity-refresh': activity = null; return loadActivity();
@@ -2249,13 +2444,14 @@ document.addEventListener('click', async (e) => {
     case 'open-sessions': return go('#/sessions');
     case 'help': return go('#/ajuda');
     case 'more': return moreSheet();
+    case 'pantalla-tab': return pantallaTab();
     case 'folder': { const s = state.sessions.get(state.route.id); return s && folderSheet(s); }
     case 'machines': return machinesSheet();
     case 'mobile-qr': return mobileQrSheet();
     case 'mobile-hint-off': { const m = machine(); LS.set(`nio.mobHint.${m?.id || m?.url}`, true); return render(); }
     case 'git': return gitSheet(state.route.id);
     case 'lm-load': return loadLocal(local.model || LS.get('nio.localModel', LOCAL_MODELS[0].id));
-    case 'lm-change': await local.engine?.unload?.(); local.engine = null; local.model = null; return render();
+    case 'lm-change': await local.engine?.unload?.(); local.engine = null; local.model = null; local.ollama = null; local.messages = []; return render();
     case 'lm-clear': local.messages = []; return render();
     case 'palette': return palette();
     case 'tour': return tourStart();
@@ -2328,48 +2524,112 @@ $('#side').addEventListener('click', (e) => { if (e.target.closest('a, button'))
 addEventListener('keydown', (e) => { if (e.key === 'Escape' && document.body.classList.contains('nav-open')) setNav(false); });
 mq.addEventListener('change', () => setNav(false));
 /* ---------------------------------------------------------------- tutorial */
-const TOUR_KEY = 'nio.tour.v2';
-const T = Object.assign({ on: false, i: 0, seen: false }, LS.get(TOUR_KEY, {}));
+const TOUR_KEY = 'nio.tour.v3';
+const T = Object.assign({ on: false, i: 0, seen: false, busy: false, pos: null, drawn: '' }, LS.get(TOUR_KEY, {}));
+T.busy = false; T.drawn = '';
 const saveTour = () => LS.set(TOUR_KEY, { on: T.on, i: T.i, seen: T.seen });
+const PAGE = '.page .top, .top';
 const TSTEPS = [
-  { center: true, mood: 'happy', title: 'Hola, sóc en Nio.', text: 'Faig de pont entre el teu mòbil i els agents d’IA (Claude Code, Codex…) del teu ordinador o d’un servidor. En un minut t’ensenyo com es fa.', next: 'Comencem' },
-  { route: 'ordinadors', target: '#addComputer', m: '#addComputer', title: '1. Afegeix un ordinador', text: 'Hi ha tres maneres: aquest ordinador (<span class="mono">npx nio-cat</span>), un servidor per SSH (<span class="mono">usuari@servidor</span>) o un codi. nio fa la resta.' },
-  { 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: 'mobil', target: '.side nav a[href="#/xat-local"]', m: '.page .model-card', title: 'Models sense internet', text: 'Si no tens l’ordinador a mà, pots fer servir un model petit que funciona dins del mateix mòbil. Si tens Ollama a l’ordinador, aquí hi descarregues models més grans.' },
-  { 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: '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' }
+  { center: true, mood: 'happy', title: 'Hola, sóc en Nio.', text: 'Faig de pont entre el teu mòbil i els agents d’IA (Claude Code, Codex, Grok, Antigravity…) del teu ordinador o d’un servidor. Et faig un recorregut per tot nio, amb un clic a cada apartat. Dura uns dos minuts.', next: 'Comencem' },
+  { route: 'ordinadors', target: '#addComputer', m: '#addComputer', title: 'Afegeix un ordinador', text: 'Hi ha tres maneres: aquest ordinador (<span class="mono">npx nio-cat</span>), un servidor per SSH (<span class="mono">usuari@servidor</span>) o un codi. nio fa la resta.' },
+  { route: 'ordinadors', skipIf: () => !machine(), target: '.card.computer.active .c-actions', m: '.card.computer.active .c-actions', title: '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: 'ordinadors', skipIf: () => !machine(), target: '#screenSec', m: '#screenSec', title: 'Mira i controla la pantalla', text: 'Aquí actives «Apps de l’escriptori» i el navegador dels agents. Amb l’escriptori actiu pots veure la pantalla de l’ordinador i fer-hi captures des del mòbil.' },
+  { route: 'ordinadors', mobileOnly: true, tapOnly: '#tabbar [data-act=pantalla-tab]', target: '#tabbar [data-act=pantalla-tab]', m: '#tabbar [data-act=pantalla-tab]', title: 'Pantalla, a un toc', text: 'La pestanya «Pantalla» obre l’escriptori de l’ordinador al mòbil, com un escriptori remot, amb zoom. Si encara no està activat, t’ajuda a activar-lo.' },
+  { route: 'sessions', skipIf: () => !machine(), target: '.top [data-act=new]', m: '.top [data-act=new]', title: 'Dona feina a un agent', text: 'Una sessió és una conversa amb un agent dins d’una carpeta. Tries l’agent, la carpeta (les preferides o la que vulguis), els permisos i li expliques què ha de fer.' },
+  { route: 'sessions', skipIf: () => !machine(), target: '.session-card, .panel.empty', m: '.session-card, .panel.empty', title: 'Les teves sessions', text: 'Cada targeta té el robot del color de l’agent i diu què està fent: treballant, esperant-te o acabat. Toca’n una per continuar la conversa.' },
+  { route: 'approvals', skipIf: () => !machine(), target: PAGE, m: PAGE, title: 'Tu decideixes', text: 'En mode «Demana permís», abans d’editar un fitxer o executar una ordre, l’agent t’ho pregunta aquí. Al mòbil hi arribes amb la campana de dalt, i si actives els avisos t’arriba la notificació.' },
+  { route: 'feines', skipIf: () => !machine(), target: PAGE, m: PAGE, title: 'Feines programades', text: 'Programa que un agent faci una cosa per tu: d’aquí a una estona, cada dia o quan toqui. Tries l’agent, la carpeta i el moment, com un temporitzador.' },
+  { route: 'memoria', skipIf: () => !machine(), target: PAGE, m: PAGE, title: 'Memòria compartida', text: 'Notes en text pla que tots els agents poden llegir i escriure: preferències, decisions, context dels projectes. Així no repeteixes res a cada agent.' },
+  { route: 'mobil', target: PAGE, m: PAGE, title: 'Xat local', text: 'Un xat senzill amb un model que funciona dins del mòbil (sense internet) o amb els models d’Ollama de l’ordinador. No toca cap carpeta: només preguntes i respostes.' },
+  { route: 'pissarra', target: '#bdTools', m: '#bdTools', title: 'Pensa en dibuix', text: 'A la pissarra pots fer diagrames a mà alçada o demanar-me’ls escrivint, amb Ollama, amb un agent o amb el model del mòbil.' },
+  { route: 'activitat', skipIf: () => !machine(), target: PAGE, m: PAGE, title: 'Activitat', text: 'El registre de tot el que han fet els agents i de tot el que has aprovat o rebutjat, perquè sempre sàpigues què ha passat.' },
+  { route: 'ajustos', target: PAGE, m: PAGE, title: 'Ajustos', text: 'Aspecte, avisos, Telegram i les opcions de l’ordinador. Tot el que canvia el comportament de nio és aquí.' },
+  { 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. També hi pots repetir aquest tutorial.' },
+  { route: 'sessions', desktopOnly: true, target: '[data-act=palette]', m: '[data-act=palette]', title: 'Un últim truc', text: 'Prem ⌘K (o Ctrl+K) per anar a qualsevol lloc o obrir una sessió sense tocar el ratolí.' },
+  { center: true, route: 'sessions', 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); }
-function tourEnd(silent) { T.on = false; T.seen = true; saveTour(); $('#tour').hidden = true; if (!silent) toast('Tutorial tancat. El tens al menú quan vulguis.'); }
-function tourGo(i) {
-  while (i < TSTEPS.length && TSTEPS[i].skipIf?.()) i++;
+const tskip = (st) => st.skipIf?.() || (st.mobileOnly && !mq.matches) || (st.desktopOnly && mq.matches);
+const tpause = (ms) => new Promise((ok) => setTimeout(ok, reduce ? 0 : ms));
+const twait = (find, ms = 3000) => new Promise((done) => { const t0 = performance.now(); const tick = () => { const e = find(); if (e || performance.now() - t0 > ms) done(e || null); else setTimeout(tick, 70); }; tick(); });
+const tvisible = (sel) => { const e = sel && document.querySelector(sel); return e && e.getClientRects().length && !e.closest('[inert]') ? e : null; };
+let tourRun = 0;
+function tourStart() { T.on = true; T.seen = true; $('#tour').hidden = false; tourGo(0); }
+function tourEnd(silent) { tourRun++; T.on = false; T.seen = true; T.busy = false; saveTour(); $('#tourTap').classList.remove('on', 'press'); $('#tour').hidden = true; if (!silent) toast('Tutorial tancat. El tens a Ajuda quan vulguis.'); }
+// El control que tocaria una persona per arribar a l'apartat: menú lateral, pestanya, campana o «Més».
+function tourVia(route) {
+  const h = HASH[route];
+  if (!mq.matches) return tvisible(`.side nav a[href="${h}"]`);
+  return tvisible(`#tabbar a[href="${h}"]`) || (route === 'approvals' ? tvisible(`.mbar a[href="${h}"]`) : null) || tvisible('#tabbar [data-act=more]');
+}
+// Un cercle es mou fins al control i el prem, com un clic de veritat.
+async function tourTap(e, run) {
+  const dot = $('#tourTap'), r = e.getBoundingClientRect();
+  const x = r.left + Math.min(r.width / 2, 60), y = r.top + r.height / 2;
+  if (!T.pos) { dot.classList.add('nomove'); dot.style.translate = `${innerWidth / 2}px ${innerHeight - 140}px`; void dot.offsetWidth; dot.classList.remove('nomove'); }
+  dot.classList.add('on');
+  dot.style.translate = `${x}px ${y}px`; T.pos = [x, y];
+  await tpause(620); if (run !== tourRun) return false;
+  dot.classList.add('press'); e.classList.add('tour-pressed');
+  await tpause(190); if (run !== tourRun) return false;
+  dot.classList.remove('press'); e.classList.remove('tour-pressed');
+  return true;
+}
+async function tourGo(i) {
+  const run = ++tourRun;
+  while (i < TSTEPS.length && tskip(TSTEPS[i])) i++;
   if (i >= TSTEPS.length) return tourEnd(true);
   T.i = Math.max(0, i); saveTour();
-  const st = TSTEPS[T.i];
-  if (st.route && state.route.name !== st.route) { setTimeout(() => tourDraw(true), 80); go(HASH[st.route]); }
-  else tourDraw(true);
+  const st = TSTEPS[T.i], card = $('#tourCard'), spot = $('#tourSpot'), dot = $('#tourTap');
+  $('#tour').hidden = false;
+  T.busy = true; card.classList.add('swap');
+  if (st.tapOnly) {
+    // Només es mostra el toc (la pestanya obriria la pantalla remota).
+    const c = tvisible(st.tapOnly);
+    if (c) { spot.classList.add('fade'); if (!await tourTap(c, run)) return; dot.classList.remove('on'); spot.classList.remove('fade'); }
+  } else if (st.route && state.route.name !== st.route) {
+    const via = tourVia(st.route);
+    spot.classList.add('fade');
+    if (via && !await tourTap(via, run)) return;
+    // Si és dins de «Més», s'obre el menú un instant com faria el dit.
+    if (via?.dataset?.act === 'more') await tpause(380);
+    if (run !== tourRun) return;
+    go(HASH[st.route]);
+    window.scrollTo({ top: 0, behavior: 'instant' });
+    await twait(() => state.route.name === st.route, 1500);
+    dot.classList.remove('on');
+    if (run !== tourRun) return;
+  }
+  const find = () => (st.center ? null : tvisible(tval(mq.matches && 'm' in st ? st.m : st.target)));
+  if (!st.center) await twait(find, 3200);
+  if (run !== tourRun) return;
+  T.busy = false; T.drawn = '';
+  tourDraw(true);
+  spot.classList.remove('fade');
+  card.classList.remove('swap');
+  if (run === tourRun) card.querySelector('[data-tour=next]')?.focus({ preventScroll: true });
 }
 function tourDraw(scroll) {
-  if (!T.on) return;
+  if (!T.on || T.busy) return;
   const st = TSTEPS[T.i], card = $('#tourCard'), busy = $('#sheet').open || $('#palette').open;
   $('#tour').hidden = busy; if (busy) return;
-  const n = TSTEPS.length - 2;
-  card.className = 'tour-card' + (st.center ? ' center' : '');
-  card.innerHTML = `<div class="tour-head">${bot(st.mood || 'idle')}${st.center ? '' : `<span class="tour-step">Pas ${T.i} de ${n}</span>`}<button class="tour-x" data-tour="close" type="button" aria-label="Tanca el tutorial">×</button></div>
+  const key = `${T.i}|${mq.matches}`;
+  if (T.drawn !== key) {
+    T.drawn = key;
+    const n = TSTEPS.length - 2, total = TSTEPS.slice(1, -1).filter((x) => !tskip(x)), pos = total.indexOf(st) + 1;
+    card.className = 'tour-card' + (st.center ? ' center' : '');
+    card.innerHTML = `<div class="tour-head">${bot(st.mood || 'idle')}${st.center ? '' : `<span class="tour-step">Pas ${pos} de ${total.length}</span>`}<button class="tour-x" data-tour="close" type="button" aria-label="Tanca el tutorial">×</button></div>
     <h3 id="tourT">${tval(st.title)}</h3><p>${tval(st.text)}</p>
+    ${st.center ? '' : `<div class="tour-dots" aria-hidden="true">${total.map((_, k) => `<i class="${k + 1 === pos ? 'on' : k + 1 < pos ? 'done' : ''}"></i>`).join('')}</div>`}
     <div class="tour-foot">${st.center ? '' : `<div>${T.i > 1 ? '<button class="btn sm ghost" data-tour="back" type="button">Enrere</button>' : ''}</div>`}
       <div class="row">${T.i === 0 ? '<button class="btn sm ghost" data-tour="close" type="button">Ara no</button>' : ''}<button class="btn sm ink" data-tour="next" type="button">${tval(st.next) || 'Següent'}</button></div></div>`;
-  window.NioBot?.refresh(); tourPlace(scroll);
+    window.NioBot?.refresh();
+  }
+  tourPlace(scroll);
 }
 function tourTarget() {
-  const st = TSTEPS[T.i], sel = st.center ? null : tval(mq.matches && 'm' in st ? st.m : st.target), e = sel && document.querySelector(sel);
-  if (!e || !e.getClientRects().length || e.closest('[inert]')) return null;
-  return e;
+  const st = TSTEPS[T.i], sel = st.center ? null : tval(mq.matches && 'm' in st ? st.m : st.target);
+  return tvisible(sel);
 }
 function tourPlace(scroll) {
   if (!T.on || $('#tour').hidden) return;
@@ -2408,18 +2668,18 @@ function tourPlace(scroll) {
   if (r.width < 260 && r.right + gap + cw < innerWidth - 12 && (top < 12 || r.bottom + ch > innerHeight)) { left = r.right + gap; top = r.top + r.height / 2 - ch / 2; }
   Object.assign(card.style, { left: Math.min(Math.max(12, left), innerWidth - cw - 12) + 'px', top: Math.min(Math.max(12, top), innerHeight - ch - 12) + 'px', bottom: '' });
 }
-function tourUpdate() { if (T.on) setTimeout(() => tourDraw(false), 30); }
+function tourUpdate() { if (T.on && !T.busy) setTimeout(() => tourDraw(false), 30); }
 $('#tour').addEventListener('click', (e) => {
   const b = e.target.closest('[data-tour]'); if (!b) return;
   if (b.dataset.tour === 'close') tourEnd(false);
   else if (b.dataset.tour === 'next') tourGo(T.i + 1);
-  else if (b.dataset.tour === 'back') { let i = T.i - 1; while (i > 0 && TSTEPS[i].skipIf?.()) i--; tourGo(i); }
+  else if (b.dataset.tour === 'back') { let i = T.i - 1; while (i > 0 && tskip(TSTEPS[i])) i--; tourGo(i); }
 });
-addEventListener('resize', () => tourPlace(false));
-addEventListener('scroll', () => tourPlace(false), { passive: true });
+addEventListener('resize', () => { if (T.on && !T.busy) tourPlace(false); });
+addEventListener('scroll', () => { if (T.on && !T.busy) tourPlace(false); }, { passive: true });
 addEventListener('keydown', (e) => {
   if (!T.on || $('#sheet').open || $('#palette').open || e.target.closest?.('input, textarea')) return;
-  if (e.key === 'Escape') tourEnd(false); else if (e.key === 'ArrowRight') tourGo(T.i + 1); else if (e.key === 'ArrowLeft' && T.i > 1) tourGo(T.i - 1);
+  if (e.key === 'Escape') tourEnd(false); else if (e.key === 'ArrowRight') tourGo(T.i + 1); else if (e.key === 'ArrowLeft' && T.i > 1) { let i = T.i - 1; while (i > 0 && tskip(TSTEPS[i])) i--; tourGo(i); }
 });
 $('#sheet').addEventListener('close', () => setTimeout(() => tourDraw(false), 30));
 $('#palette').addEventListener('close', () => setTimeout(() => tourDraw(false), 30));