nio-cat 0.9.6 → 0.9.9

package/web/app/app.js

@@ -1,6 +1,9 @@
 // nio · app. Parla directament amb el programa nio del teu ordinador (fetch + flux d'esdeveniments).
 // Sense frameworks ni compilació. També inclou un ordinador de prova que viu dins del navegador.
 
+import { createNotes } from './notes.js';
+import { createCall } from './call.js';
+
 const $ = (s, e = document) => e.querySelector(s);
 const $$ = (s, e = document) => [...e.querySelectorAll(s)];
 const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
@@ -16,15 +19,17 @@ const CHIP_ICON = {
   mode: '<path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/>',
   folder: '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
   model: '<rect x="6" y="6" width="12" height="12" rx="2.5"/><path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3"/>',
-  cost: '<circle cx="12" cy="12" r="9"/><path d="M14.6 9.3c-.6-.8-1.500-1.300-2.600-1.300-1.400 0-2.500.8-2.500 2 0 2.700 5 1.300 5 4 0 1.200-1.100 2-2.500 2-1.100 0-2-.5-2.600-1.300M12 6.500V8M12 16v1.500"/>'
+  usage: '<path d="M4 16a8 8 0 1 1 16 0"/><path d="M12 16l4-5"/>',
 };
 const svg = (d) => `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true">${d}</svg>`;
 const ICON = {
   activity: '<path d="M3 12h4l3-7 4 14 3-7h4"/>',
-  jobs: '<rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 9h8M8 13h5M8 17h3"/>',
+  jobs: '<rect x="4" y="5" width="16" height="15" rx="3"/><path d="M8 3v4M16 3v4M4 10h16m-12 5 2 2 5-4"/>',
   screen: '<rect x="3" y="4" width="18" height="12" rx="2"/><path d="M9 20h6M12 16v4"/><circle cx="12" cy="10" r="2"/>',
   panic: '<circle cx="12" cy="12" r="9"/><path d="M8.5 8.5l7 7M15.5 8.5l-7 7"/>',
-  memory: '<path d="M6 4h9l3 3v13H6z"/><path d="M9 11h6M9 15h6M14 4v4h4"/>',
+  call: '<path d="M6.6 3.5h2.6l1.4 4-2 1.3a12 12 0 0 0 6.6 6.6l1.3-2 4 1.4v2.6a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z"/>',
+  notes: '<path d="M14 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M9 15l1-4 8-8 3 3-8 8-4 1z"/>',
+  memory: '<path d="M12 5a3 3 0 0 0-5-2 4 4 0 0 0-3 6 4 4 0 0 0 0 7 4 4 0 0 0 8 3V5zm0 0a3 3 0 0 1 5-2 4 4 0 0 1 3 6 4 4 0 0 1 0 7 4 4 0 0 1-8 3M7 8l2 2M17 8l-2 2M6 15l3-1M18 15l-3-1"/>',
   sessions: '<path d="M4 6h16M4 12h16M4 18h10"/>',
   approvals: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
   phone: '<rect x="6" y="3" width="12" height="18" rx="3"/><path d="M10.5 17.5h3"/>',
@@ -70,6 +75,64 @@ const store = {
 };
 const machine = () => store.machines[store.active] || store.machines[0] || null;
 
+/* ---------------------------------------------------------------- cua de tasques
+   Les tasques es desen al mòbil i s'envien soles quan l'ordinador es connecta. */
+const mkey = (m) => m?.id || m?.url;
+const queue = {
+  get all() { return LS.get('nio.queue.v1', []); },
+  set all(v) { LS.set('nio.queue.v1', v); },
+  mine() { const k = mkey(machine()); return this.all.filter((t) => t.mid === k); },
+  add(t) { const m = machine(); this.all = [...this.all, { id: Math.random().toString(36).slice(2, 10), mid: mkey(m), at: Date.now(), ...t }]; },
+  drop(id) { this.all = this.all.filter((t) => t.id !== id); }
+};
+let flushing = false;
+async function flushQueue() {
+  if (flushing || !state.connected) return;
+  const todo = queue.mine(); if (!todo.length) return;
+  flushing = true;
+  let sent = 0;
+  try {
+    for (const t of todo) {
+      if (!state.connected) break;
+      try {
+        const { id, mid, at, ...body } = t;
+        const s = await api('/api/sessions', { method: 'POST', body });
+        state.sessions.set(s.id, s); queue.drop(id); sent++;
+      } catch (e) {
+        if (e.name === 'TypeError') break;      // l'ordinador s'ha apagat un altre cop: es manté a la cua
+        queue.drop(t.id); toast(`No s’ha pogut enviar «${t.title || t.text.slice(0, 30)}»: ${e.message}`, 5000); // error de veritat (p. ex. carpeta inexistent)
+      }
+    }
+  } finally { flushing = false; }
+  if (sent) { toast(sent === 1 ? 'S’ha enviat 1 tasca de la cua' : `S’han enviat ${sent} tasques de la cua`, 4200); render(); }
+}
+function queueSheet() {
+  if (!machine()) return go('#/sessions');
+  const m = machine(), last = LS.get(`nio.last.${mkey(m)}`, {});
+  const agents = Object.entries(AGENT_NAMES).filter(([k]) => !['demo', 'browser', 'ollama'].includes(k));
+  const sel = { agent: last.agent && AGENT_NAMES[last.agent] ? last.agent : 'claude', cwd: last.cwd || '', mode: last.mode || 'preguntar' };
+  openSheet(`<h2>Tasca per a quan l’ordinador estigui engegat</h2>
+    <p class="muted small">Es desa en aquest dispositiu i s’envia sola quan nio es connecti amb ${esc(m.name)}.</p>
+    <label class="f"><span>Agent</span><select id="qAgent">${agents.map(([k, n]) => `<option value="${k}" ${k === sel.agent ? 'selected' : ''}>${esc(n)}</option>`).join('')}</select></label>
+    <label class="f"><span>Carpeta de l’ordinador</span><input type="text" id="qCwd" class="mono" value="${esc(sel.cwd)}" placeholder="/Users/…/projecte" autocapitalize="off" spellcheck="false"></label>
+    <label class="f"><span>Permisos</span><select id="qMode">${Object.entries(MODES).map(([k, x]) => `<option value="${k}" ${k === sel.mode ? 'selected' : ''}>${esc(x.label)}</option>`).join('')}</select></label>
+    <label class="f"><span>Què ha de fer?</span><textarea class="field" id="qText" rows="5" placeholder="Per exemple: arregla els tests que fallen"></textarea></label>
+    <div class="row" style="justify-content:flex-end"><button class="btn ghost" type="button" data-close>Cancel·la</button><button class="btn ink" type="button" id="qSave">Posa-la a la cua</button></div>`, (sh) => {
+    sh.querySelector('[data-close]').onclick = closeSheet;
+    $('#qSave', sh).onclick = () => {
+      const text = $('#qText', sh).value.trim(), cwd = $('#qCwd', sh).value.trim();
+      if (!cwd) return toast('Escriu la carpeta de l’ordinador');
+      if (!text) return toast('Explica a l’agent què ha de fer');
+      queue.add({ agent: $('#qAgent', sh).value, cwd, mode: $('#qMode', sh).value, text, title: text.slice(0, 60) });
+      closeSheet(); toast('A la cua. S’enviarà quan l’ordinador estigui connectat.', 4200); render();
+    };
+  });
+}
+function queueList() {
+  const q = queue.mine(); if (!q.length) return '';
+  return `<h2 class="sec">A la cua (${q.length})</h2><div class="list">${q.map((t) => `<div class="card"><div class="row between"><span class="agent-tag" data-agent="${esc(t.agent)}">${esc(AGENT_NAMES[t.agent] || t.agent)}</span><button class="btn ghost sm" type="button" data-qdrop="${esc(t.id)}">Treu-la</button></div><div class="title">${esc(t.title)}</div><div class="meta"><span class="mono">${esc(basename(t.cwd))}</span><span>·</span><span>${state.connected ? 'enviant…' : 'espera l’ordinador'}</span><span>·</span><span>${ago(t.at)}</span></div></div>`).join('')}</div>`;
+}
+
 /* ---------------------------------------------------------------- utilitats */
 function toast(msg, ms = 2800) {
   const box = $('#toasts'), t = document.createElement('div');
@@ -236,7 +299,7 @@ async function connect() {
     if (!res.ok || !res.body) throw new Error(`Error ${res.status}`);
     state.connected = true; state.lastError = null; retry = 0;
     rememberIdentity(m.url, state.info.identity);
-    renameMachine(state.info.host, state.info.id); syncServiceWorker(); render(); brainsForBoard(); loadVoice().then(() => state.route.name === 'session' && renderComposer?.());
+    renameMachine(state.info.host, state.info.id); syncServiceWorker(); render(); brainsForBoard(); loadVoice().then(() => state.route.name === 'session' && renderComposer?.()); flushQueue();
     const reader = res.body.getReader(), dec = new TextDecoder(); let buf = '';
     // Alguns túnels (Cloudflare des d'alguns servidors) no deixen passar el flux en directe: sense «hello» en 5 s, es passa a consultar cada 2 s.
     gotHello = false; let poll = false;
@@ -302,6 +365,7 @@ function renameMachine(host, id) {
 
 function handle(msg) {
   const r = state.route;
+  callCtl?.onEvent(msg);
   switch (msg.type) {
     case 'device':
       if (!isPhone() && msg.device !== deviceId()) { if ($('#qrBox')) closeSheet(); toast('Mòbil connectat correctament', 2000); }
@@ -309,7 +373,7 @@ function handle(msg) {
     case 'hello':
       gotHello = true; state.synced = true;
       state.sessions = new Map(msg.sessions.map((s) => [s.id, s]));
-      state.approvals = new Map(msg.approvals.map((a) => [a.id, a]));
+      state.approvals = new Map(msg.approvals.map((a) => [a.id, a])); state.usage = msg.usage || state.usage; notesCtl?.reload();
       state.loaded.clear(); state.events.clear();
       if (r.name === 'session') openSession(r.id); else render();
       break;
@@ -325,6 +389,7 @@ function handle(msg) {
       break;
     case 'event': {
       const evs = state.events.get(msg.session);
+      if (msg.event.kind === 'result') api('/api/usage').then((u) => { state.usage = u; if (state.route.name === 'session') renderSessionHead(); }).catch(() => {});
       if (evs) { const was = evs.get(msg.event.seq); evs.set(msg.event.seq, msg.event); if (r.name === 'session' && r.id === msg.session) { putEvent(msg.event); if (msg.event.kind === 'text' && !msg.event.open && (!was || was.open)) autoSpeak(msg.event); } }
       break;
     }
@@ -333,6 +398,8 @@ function handle(msg) {
       if (e) { e.text += msg.text; if (r.name === 'session' && r.id === msg.session) streamText(msg.session, e); }
       break;
     }
+    case 'usage': state.usage = msg.usage; if (r.name === 'session') renderSessionHead(); break;
+    case 'note': case 'note-gone': notesCtl?.onEvent(msg); break;
     case 'ollama': onOllama(msg); break;
     case 'job': onJob(msg); break;
     case 'screen': onScreen(msg); break;
@@ -446,25 +513,27 @@ function checkPairHash() {
 /* ---------------------------------------------------------------- navegació */
 const VIEWS = {
   sessions: { label: 'Sessions', icon: ICON.sessions, group: 'Feina' },
-  approvals: { label: 'Aprovacions', icon: ICON.approvals, group: 'Feina' },
   feines: { label: 'Feines', icon: ICON.jobs, group: 'Feina' },
-  memoria: { label: 'Memòria', icon: ICON.memory, group: 'Ordinadors' },
-  ordinadors: { label: 'Ordinadors', icon: ICON.machine, group: 'Ordinadors' },
-  mobil: { label: 'Xat local', icon: ICON.phone, group: 'Eines' },
-  pissarra: { label: 'Pissarra', icon: ICON.board, group: 'Eines' },
-  activitat: { label: 'Activitat', icon: ICON.activity, group: 'Compte' },
-  ajustos: { label: 'Ajustos', icon: ICON.settings, group: 'Compte' },
-  ajuda: { label: 'Ajuda', icon: ICON.help, group: 'Compte' }
+  approvals: { label: 'Aprovacions', icon: ICON.approvals, group: 'Feina' },
+  trucada: { label: 'Trucada', icon: ICON.call, group: 'Feina' },
+  notes: { label: 'Notes', icon: ICON.notes, group: 'Organització' },
+  memoria: { label: 'Memòria', icon: ICON.memory, group: 'Organització' },
+  pissarra: { label: 'Pissarra', icon: ICON.board, group: 'Organització' },
+  ordinadors: { label: 'Ordinadors', icon: ICON.machine, group: 'Ordinadors i eines' },
+  mobil: { label: 'Xat local', icon: ICON.phone, group: 'Ordinadors i eines' },
+  activitat: { label: 'Activitat', icon: ICON.activity, group: 'Ordinadors i eines' },
+  ajustos: { label: 'Ajustos', icon: ICON.settings, group: 'Preferències' },
+  ajuda: { label: 'Ajuda', icon: ICON.help, group: 'Preferències' }
 };
-const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', feines: '#/feines', activitat: '#/activitat', memoria: '#/memoria', ordinadors: '#/ordinadors', mobil: '#/xat-local', pissarra: '#/pissarra', ajustos: '#/ajustos', ajuda: '#/ajuda' };
-const NEEDS_MACHINE = new Set(['sessions', 'approvals', 'feines', 'activitat', 'memoria', 'session']);
+const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', trucada: '#/trucada', notes: '#/notes', feines: '#/feines', activitat: '#/activitat', memoria: '#/memoria', ordinadors: '#/ordinadors', mobil: '#/xat-local', pissarra: '#/pissarra', ajustos: '#/ajustos', ajuda: '#/ajuda' };
+const NEEDS_MACHINE = new Set(['session']);
 function parseRoute() {
   const h = location.hash.replace(/^#\/?/, '');
   if (h.startsWith('s/')) return { name: 'session', id: h.slice(2) };
   if (h === 'ordinador' || h === 'pantalla') return { name: 'ordinadors' }; // adreces antigues
   if (h === 'models') return { name: 'mobil' };
   if (h === 'mobil') return { name: 'mobil' };
-  const k = Object.keys(HASH).find((k) => HASH[k] === '#/' + h);
+  const k = Object.keys(HASH).find((k) => HASH[k] === '#/' + h.split('?')[0]);
   return { name: k || 'sessions' };
 }
 function go(hash) { if (location.hash === hash) route(); else location.hash = hash; }
@@ -474,8 +543,8 @@ function route() {
   state.route = parseRoute();
   const canon = state.route.name === 'session' ? null : HASH[state.route.name];
   if (canon && location.hash && location.hash !== canon && /^#\/(pantalla|models|ordinador)$/.test(location.hash)) history.replaceState(null, '', canon);
-  // Sense cap ordinador, tot porta al mateix lloc: la pàgina Ordinadors.
-  if (!machine() && NEEDS_MACHINE.has(state.route.name)) { history.replaceState(null, '', '#/ordinadors'); state.route = { name: 'ordinadors' }; }
+  // Sense cap ordinador, cada pàgina es veu igual i explica què hi faltaria; només una sessió concreta no té sentit.
+  if (!machine() && NEEDS_MACHINE.has(state.route.name)) { history.replaceState(null, '', '#/sessions'); state.route = { name: 'sessions' }; }
   if (state.route.name === 'session') openSession(state.route.id); else render();
 }
 
@@ -492,8 +561,8 @@ 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 = ['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']]
+  const more = ['feines', 'trucada', 'memoria', 'approvals', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].includes(r.name);
+  $('#tabbar').innerHTML = [['sessions', ICON.sessions, 'Sessions', active === 'sessions'], ['notes', ICON.notes, 'Notes', active === 'notes'], ['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>`;
@@ -506,6 +575,9 @@ function renderChrome() {
   document.title = n ? `(${n}) nio` : `nio // ${s ? s.title || 'Sessió' : VIEWS[r.name]?.label || 'Panell'}`;
   if ('setAppBadge' in navigator) (n ? navigator.setAppBadge(n) : navigator.clearAppBadge()).catch?.(() => {});
 }
+let notesCtl = null, callCtl = null;
+const getCall = () => (callCtl ||= createCall({ api, esc, toast, bot, machine, isDemo, noMachine, voiceSheet, agentName: (a) => AGENT_NAMES[a] || a, sessions: () => [...state.sessions.values()], approvals: () => [...state.approvals.keys()], refresh: () => {} }));
+const getNotes = () => (notesCtl ||= createNotes({ api, nodeAudio, toast, esc, machine, voiceOn, voiceSheet, isDemo, isPhone, openSheet, closeSheet, mobileQrSheet }));
 function render() {
   const r = state.route, view = $('#view'), board = r.name === 'pissarra';
   if (r.name !== 'sessions') manage = null;
@@ -513,17 +585,27 @@ function render() {
   document.body.classList.toggle('board-mode', board);
   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 (r.name !== 'notes' && lastName === 'notes') notesCtl?.unmount();
+  if (r.name !== 'trucada' && lastName === 'trucada') callCtl?.unmount();
   if (!board && lastName === 'pissarra') window.NioBoard?.unmount();
   if (board && lastName === 'pissarra' && $('#boardRoot')) return;
+  if (r.name === 'notes' && lastName === 'notes' && $('#notesRoot') && machine()) return; // l'editor no es toca quan l'app es repinta
+  if (r.name === 'trucada' && lastName === 'trucada' && $('#callRoot')?.dataset.m === String(store.active)) return; // la pàgina de la trucada no es repinta a cada esdeveniment
   const changed = lastName !== r.name || r.name === 'session';
   lastName = r.name;
   if (r.name === 'session') renderSession();
+  else if (r.name === 'notes') {
+    view.innerHTML = machine() ? '<div class="page" id="notesRoot"></div>' : `<div class="page"><div class="top"><div><h1>Notes</h1><p>Escriu, grava i deixa que un model ho ordeni.</p></div></div>${noMachine('Les notes es desen a l’ordinador. Connecta’n un per escriure’n i gravar-ne.')}</div>`;
+    if (machine()) getNotes().mount($('#notesRoot'));
+  }
+  else if (r.name === 'trucada') { view.innerHTML = `<div class="page" id="callRoot" data-m="${store.active}"></div>`; getCall().mount($('#callRoot')); }
   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 && 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() && !inLocalChat()) loadOllama();
+    if (r.name === 'sessions' && machine() && state.connected) loadTermSessions();
     if (r.name === 'activitat' && machine()) { activity = null; loadActivity(); }
     if (r.name === 'memoria' && machine()) loadMemory();
     if (r.name === 'ordinadors' && machine() && state.connected) loadScreen();
@@ -538,7 +620,8 @@ 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 isPhone = () => navigator.userAgentData?.mobile === true || /Android|iPhone|iPod|Mobile/i.test(navigator.userAgent) || (isTouch && matchMedia('(max-width: 1024px)').matches);
+const INSTALL_CMD = 'curl -fsSL https://www.nio.cat/install.sh | sh';
 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>`;
 // Estat de la resta d'ordinadors (el connectat ja té el seu flux en directe): una consulta lleugera.
 const reach = new Map();
@@ -581,6 +664,7 @@ function helpPanel(open) {
 
     ${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('Continuar una sessió del terminal', `<p>Si tens Claude Code obert al terminal de l’ordinador, surt a dalt de <b>Sessions</b>, a <b>Obertes al terminal</b>, amb el terminal on corre (iTerm, Terminal, VS Code, tmux, SSH…). Toca-la i continua aquí amb tota la conversa. El terminal no es toca: el mòbil en fa una branca pròpia.</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([
@@ -597,6 +681,7 @@ function helpPanel(open) {
     ${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> actives <b>Whisper</b> per <b>dictar</b> els missatges amb el micròfon, gratis i sense que l’àudio surti de l’ordinador. Per <b>escoltar</b> les respostes, hi pots posar una clau d’ElevenLabs o OpenAI, que es queda a l’ordinador.</p>`)}
+    ${q('Trucada amb en Nio', `<p>A <b>Més → Trucada</b> parles amb en Nio com en una trucada, amb veu en temps real d’ElevenLabs. Et diu quins agents tens, com van les sessions i què espera el teu permís, i li pots demanar que encarregui feina, continuï una sessió o aprovi una acció (abans t’ho repeteix i espera un sí). Si una sessió acaba durant la trucada, t’ho diu.</p><ul><li>Cal una clau d’ElevenLabs a <b>Ajustos → Veu</b>. Es queda a l’ordinador: el mòbil només rep un enllaç que caduca.</li><li>La primera trucada crea l’agent «nio» al teu compte d’ElevenLabs. ElevenLabs cobra per minut.</li><li>Pots interrompre’l parlant, silenciar el micròfon i veure tota la conversa amb <b>Text</b>.</li></ul>`)}
 
     ${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>`)}
@@ -640,24 +725,38 @@ async function disablePush() {
   try { const sub = await (await navigator.serviceWorker.ready).pushManager.getSubscription(); await sub?.unsubscribe(); } catch { /* res */ }
   pushOn = false; toast('Avisos desactivats en aquest dispositiu'); render();
 }
+// Sense cap ordinador: el mateix avís a cada pàgina, amb què s'hi podria fer i on connectar-ne un.
+function noMachine(text) {
+  return `<div class="panel empty">${bot('sleep')}<h2>No tens cap ordinador connectat</h2><p>${text}</p><div class="row" style="justify-content:center"><button class="btn ink" data-act="add-computer" type="button">${svg(ICON.plus)}Connecta un ordinador</button><button class="btn" data-act="demo" type="button">Prova una demo</button></div></div>`;
+}
 function viewSettings() {
-  const head = '<div class="top"><div><h1>Ajustos</h1><p>Avisos al mòbil i veu.</p></div></div>';
+  const head = '<div class="top"><div><h1>Ajustos</h1><p>Avisos al mòbil, veu i Telegram. Es configuren per a cada ordinador.</p></div></div>';
+  if (!machine()) return `${head}<div class="stack-lg" style="max-width:640px">${settingsOff()}</div>`;
   const avisos = machine() ? `<section class="panel"><header><h2>Avisos al mòbil</h2></header><div class="body stack"><p class="small">Rep un avís quan un agent et demana permís o acaba la feina.</p>${isIOS && !standalone ? '<p class="muted small">A l’iPhone, primer afegeix nio a la pantalla d’inici (Comparteix → Afegeix a la pantalla d’inici) i obre’l des d’allà.</p>' : ''}${pushOn ? '<p class="small"><span class="chip ok">' + svg(ICON.check) + 'Avisos activats en aquest dispositiu</span></p>' : ''}<div class="row">${pushOn ? '<button class="btn ink grow" data-act="push-test" type="button">Envia’n un de prova</button><button class="btn" data-act="push-off" type="button">Desactiva</button>' : '<button class="btn ink grow" data-act="push" type="button">Activa els avisos</button>'}</div></div></section>` : '';
   if (machine() && pushOn === null) refreshPush();
   if (machine() && tgState === undefined) loadTelegram();
   return `${head}<div class="stack-lg" style="max-width:640px">${avisos}${voicePanel()}<div id="tgPanel">${telegramPanel()}</div></div>`;
 }
+// Ajustos sense ordinador: un sol avís a dalt i les seccions de mostra, desactivades.
+function settingsOff() {
+  const sec = (t, d, b) => `<section class="panel off" aria-disabled="true"><header><h2>${t}</h2></header><div class="body stack"><p class="small">${d}</p><div class="row"><button class="btn" type="button" disabled>${b}</button></div></div></section>`;
+  return `<div class="card off-note"><div class="grow"><b>No tens cap ordinador connectat</b><div class="muted small">Aquests ajustos es desen a l’ordinador. Connecta’n un per activar-los.</div></div><button class="btn ink sm" data-act="add-computer" type="button">Connecta un ordinador</button></div>
+    ${sec('Avisos al mòbil', 'Rep un avís quan un agent et demana permís o acaba la feina.', 'Activa els avisos')}
+    ${sec('Veu', 'Dicta els missatges amb el micròfon, gratis amb Whisper, i escolta les respostes en veu alta.', 'Configura la veu')}
+    ${sec('Telegram', 'Parla amb els agents des del teu bot de Telegram: instruccions, notes de veu, avisos i aprovacions amb botons.', 'Connecta el bot')}`;
+}
 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>`;
+  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>${ms.length ? `<button class="btn ink" id="addComputer" data-act="add-computer" type="button">${svg(ICON.plus)}Afegeix ordinador</button>` : ''}</div>`;
   if (!ms.length) {
-    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><div class="row" style="justify-content:center"><button class="btn ink" data-act="add-computer" type="button">${svg(ICON.plus)}Afegeix ordinador</button><button class="btn" data-act="demo" type="button">Prova una demo</button></div><p class="muted small">La demo fa servir un ordinador simulat, aquí mateix. No cal instal·lar res.</p></div>`;
+    const phone = isPhone();
+    const steps = phone
+      ? [['Enganxa-la a l’ordinador', 'Al Terminal. Instal·la nio i el deixa engegat, també quan reinicies.'], ['Escaneja el QR', 'Surt al navegador de l’ordinador quan acaba. També hi ha un codi.'], ['Dona feina a un agent', 'Tria l’agent i la carpeta, i mira com treballa des d’aquí.']]
+      : [['Obre el Terminal', 'Al Mac, ⌘ Espai i escriu «Terminal». A Linux, Ctrl Alt T.'], ['Enganxa l’ordre', 'Instal·la nio i el deixa engegat, també quan reinicies.'], ['Escaneja el QR', 'Aquesta web es connecta sola i et mostra el QR del mòbil.']];
+    return `${head}<div class="panel empty first-run">${bot('idle')}<h2>Connecta el teu primer ordinador</h2><p>${phone ? 'nio s’instal·la a l’ordinador amb una sola ordre. Copia-la i enganxa-la allà.' : 'Una sola ordre instal·la nio en aquest ordinador i ho deixa tot a punt.'}</p>${cmdBox(INSTALL_CMD)}<ol class="stepper">${steps.map(([t, d], i) => `<li><span class="n">${i + 1}</span><div><b>${t}</b><p>${d}</p></div></li>`).join('')}</ol><div class="row" style="justify-content:center"><button class="btn ink" data-act="add-computer" type="button">${svg(ICON.plus)}${phone ? 'Tinc un codi o un QR' : 'Afegeix ordinador'}</button><button class="btn" data-act="demo" type="button">Prova una demo</button></div><p class="muted small">Mac o Linux. Per provar-lo sense instal·lar res, <span class="mono">npx nio-cat</span>.</p></div>`;
   }
   const detail = m && state.connected ? `<h2 class="sec">${esc(m.name)}</h2>
   <div class="grid2 one">
@@ -731,8 +830,8 @@ function addComputerSheet(tab, opts = {}) {
       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', `${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>${store.machines.length ? '' : '<div class="or"><span>o</span></div><button class="btn block" type="button" data-close data-act="demo">Prova una demo, sense instal·lar res</button>'}`);
+      else if (d) set('found', `${intro('nio ja funciona en aquest ordinador', 'Aquest navegador encara no hi té accés. Escriu això al Terminal i s’obrirà el panell ja connectat:')}${cmdBox('nio pair')}`);
+      else set('none', `${intro('Instal·la nio en aquest ordinador', 'Una sola ordre ho deixa tot a punt i engegat, també quan reinicies.')}${todo(['Obre el Terminal. Al Mac, prem ⌘ Espai i escriu «Terminal».', `Enganxa aquesta ordre i prem Retorn:${cmdBox(INSTALL_CMD)}`, 'Quan acabi, aquesta pàgina es connectarà sola.'])}${live('Esperant nio…')}<p class="hint">Mac o Linux. Si ja el tens i està aturat, escriu <span class="mono">nio</span> al Terminal.</p>${store.machines.length ? '' : '<div class="or"><span>o</span></div><button class="btn block" type="button" data-close data-act="demo">Prova una demo, sense instal·lar res</button>'}`);
       if (saved < 0 || !d) poll = setTimeout(local, 3000);
     };
     const runSsh = async (target) => {
@@ -747,7 +846,7 @@ function addComputerSheet(tab, opts = {}) {
         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 = `${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>`;
+        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>${isPhone() ? '' : '<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 = () => {
@@ -760,7 +859,7 @@ function addComputerSheet(tab, opts = {}) {
         <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', `${intro(phone ? 'Escaneja o escriu el codi' : 'Escriu el codi', 'Surt al terminal, sota el QR, o a «Continua al mòbil».')}
+      set('code', `${intro(phone ? 'Escaneja o escriu el codi' : 'Escriu el codi', 'Surt al navegador de l’ordinador quan instal·les nio, 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>' : ''}`);
     };
@@ -803,7 +902,8 @@ function renameSheet(i) {
   });
 }
 async function pantallaTab() {
-  if (!machine() || !state.connected) return toast('Primer connecta un ordinador.', 4000);
+  if (!machine()) return openSheet(`<h2>Pantalla</h2><div class="stack"><p class="small"><b>No tens cap ordinador connectat.</b> Connecta’t a un ordinador per veure’n la pantalla i controlar-lo des del mòbil.</p><div class="row between sheet-foot"><button class="btn ghost" type="button" data-close>Ara no</button><button class="btn ink" type="button" data-act="add-computer">Connecta un ordinador</button></div></div>`, (sh) => { $('[data-close]', sh).onclick = closeSheet; });
+  if (!state.connected) return toast(`No arribo a ${machine().name}. Comprova que nio hi estigui engegat.`, 4500);
   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;
@@ -822,8 +922,9 @@ async function pantallaTab() {
   });
 }
 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">${['feines', 'memoria', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].map(item).join('')}</div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
+  const item = (k) => `<a class="more-link" href="${HASH[k]}" ${state.route.name === k ? 'aria-current="page"' : ''}><span>${VIEWS[k].label}</span>${k === 'approvals' && state.approvals.size ? `<span class="badge">${state.approvals.size}</span>` : ''}</a>`;
+  const groups = [...new Set(Object.values(VIEWS).map((v) => v.group))].map((group) => [group, Object.keys(VIEWS).filter((k) => VIEWS[k].group === group)]);
+  openSheet(`<h2>Més</h2><nav class="more-sections" aria-label="Totes les seccions">${groups.map(([title, keys]) => `<section><h3>${title}</h3><div>${keys.map(item).join('')}</div></section>`).join('')}</nav>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
 }
 
 /* ---------- Sessions */
@@ -834,11 +935,11 @@ function stateChip(s) {
   return '';
 }
 let manage = null; // Set d'ids seleccionats quan el mode «Gestiona» és actiu
-const DAY = 864e5, money = (n) => (n ? `${n < 0.01 ? '<0,01' : n.toFixed(2).replace('.', ',')} $` : '0 $');
+const DAY = 864e5;
 const manageBar = (list) => {
-  const n = manage.size, cost = list.filter((s) => manage.has(s.id)).reduce((t, s) => t + (s.cost || 0), 0);
+  const n = manage.size;
   return `<div class="manage-bar"><div class="row"><span class="muted small">Selecciona</span><button class="chip" type="button" data-man="all">Totes</button><button class="chip" type="button" data-man="idle">Acabades</button><button class="chip" type="button" data-man="old">Més de 30 dies</button><button class="chip" type="button" data-man="err">Amb error</button><button class="chip" type="button" data-man="none">Cap</button></div>
-    <div class="row between"><span class="muted small">${n ? `${n} seleccionades · ${money(cost)} gastats` : `${list.length} sessions · ${money(list.reduce((t, s) => t + (s.cost || 0), 0))} en total`}</span><span class="row"><button class="btn ghost" type="button" data-act="manage-off">Fet</button><button class="btn danger" type="button" data-act="manage-del" ${n ? '' : 'disabled'}>Esborra${n ? ` (${n})` : ''}</button></span></div></div>`;
+    <div class="row between"><span class="muted small">${n ? `${n} seleccionades` : `${list.length} sessions`}</span><span class="row"><button class="btn ghost" type="button" data-act="manage-off">Fet</button><button class="btn danger" type="button" data-act="manage-del" ${n ? '' : 'disabled'}>Esborra${n ? ` (${n})` : ''}</button></span></div></div>`;
 };
 function manageSelect(kind) {
   const list = [...state.sessions.values()], now = Date.now();
@@ -855,7 +956,48 @@ async function manageDelete() {
   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();
+// Sessions de Claude Code obertes al terminal de l'ordinador: es poden continuar des d'aquí.
+let termSessions = null, termTimer = 0, termAt = 0, termFor = '';
+async function loadTermSessions(force) {
+  if (!machine() || !state.connected || state.route.name !== 'sessions') return;
+  const key = machine().url;
+  if (termFor !== key) { termSessions = null; termFor = key; }
+  // render() es crida sovint: només es torna a demanar si fa una estona.
+  if (!force && Date.now() - termAt < 4000) return;
+  clearTimeout(termTimer); termAt = Date.now();
+  try { const r = (await api('/api/claude-sessions')).sessions || []; if (termFor === key) termSessions = r; } catch { termSessions = termSessions || []; }
+  const box = $('#termSessions'); if (box && state.route.name === 'sessions') box.innerHTML = termSessionsHtml();
+  // Es manté al dia mentre la pàgina és oberta: el terminal canvia sense avisar.
+  if (!document.hidden) termTimer = setTimeout(() => loadTermSessions(true), 8000);
+}
+document.addEventListener('visibilitychange', () => { if (!document.hidden && state.route.name === 'sessions') loadTermSessions(true); });
+const TERM_STATUS = { busy: ['Treballant', 'running'], idle: ['Esperant', ''], waiting: ['Et necessita', 'waiting'], needs_input: ['Et necessita', 'waiting'] };
+function termSessionsHtml() {
+  if (!termSessions?.length) return '';
+  const taken = new Set([...state.sessions.values()].flatMap((s) => [s.nativeId, s.fromTerminal]).filter(Boolean));
+  const fresh = termSessions.filter((s) => !taken.has(s.sessionId));
+  if (!fresh.length) return '';
+  const where = (t) => [t?.app, t?.tmux && 'tmux', t?.screen && 'screen', t?.ssh && 'SSH'].filter(Boolean).join(' · ');
+  return `<section class="term-sessions" aria-label="Al terminal"><h2 class="sec">Obertes al terminal</h2><div class="list">${fresh.map((s) => {
+    const [label, cls] = TERM_STATUS[s.status] || [s.status, ''];
+    return `<button class="card session-card term-card" type="button" data-act="resume" data-sid="${esc(s.sessionId)}" data-cwd="${esc(s.cwd || '')}" data-sname="${esc(s.title || s.name || '')}">
+      <div class="row between"><span class="agent-tag nosq" data-agent="claude">${agentBot('claude', s.status === 'busy' ? 'work' : 'idle')}${esc(where(s.terminal) || 'Terminal')}</span><span class="chip ${cls}">${cls ? '<i class="pulse"></i>' : ''}${esc(label)}</span></div>
+      <div class="title">${esc(s.title || s.name || basename(s.cwd || '') || 'Claude Code')}</div>
+      ${s.ask ? `<div class="last">${esc(plain(s.ask))}</div>` : ''}
+      <div class="meta"><span class="mono">${esc(basename(s.cwd || ''))}</span>${s.updated ? `<span>·</span><span>${ago(s.updated)}</span>` : ''}<span class="term-go">Continua aquí →</span></div>
+    </button>`;
+  }).join('')}</div></section>`;
+}
+function sessionCard(s) {
+  return `<${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(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></div>
+    </${manage ? 'div' : 'a'}>`;
+}
 function viewSessions() {
+  if (!machine()) return `<div class="top"><div><h1>Sessions</h1><p>Cada sessió és una conversa amb un agent, dins d’una carpeta.</p></div></div>${noMachine('Connecta’n un per donar feina als agents i seguir-ne les sessions en directe.')}`;
   const list = [...state.sessions.values()].sort((a, b) => b.updated - a.updated);
   const many = store.machines.length > 1, mach = machine();
   const switcher = many ? `<button class="chip switch-chip" type="button" data-act="machines"><i class="dot ${state.connected ? 'on' : ''}"></i>${esc(mach.name)}${svg(ICON.chev)}</button>` : '';
@@ -863,16 +1005,14 @@ function viewSessions() {
   const head = `<div class="top"><div><h1>Sessions</h1><p>Cada sessió és una conversa amb un agent, dins d’una carpeta.</p>${switcher}</div><span class="row">${list.length && state.connected && !manage ? '<button class="btn" data-act="manage-on" type="button">Gestiona</button>' : ''}${manage ? '' : `<button class="btn ink new-fab" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button>`}</span></div>${hint}${manage && list.length ? manageBar(list) : ''}`;
   if (machine() && !state.synced && !state.lastError && !list.length) return `${head}<div class="list" aria-busy="true">${[0, 1, 2].map(() => '<div class="card skel-card"><i class="skel" style="width:34%"></i><i class="skel tall" style="width:78%"></i><i class="skel" style="width:56%"></i></div>').join('')}</div>`;
   if (!state.connected && !list.length) {
-    return `${head}<div class="panel empty">${bot(state.lastError ? 'sleep' : 'work')}<h2>${esc(state.lastError || 'Connectant amb l’ordinador…')}</h2>${state.lastError ? `<p>${mach.kind === 'vps' ? 'Potser el servidor s’ha reiniciat i l’adreça ha canviat.' : 'Comprova que nio continua engegat a l’ordinador i que el túnel està obert.'}</p><div class="row" style="justify-content:center"><button class="btn" data-act="retry" type="button">${svg(ICON.refresh)}Torna-ho a provar</button>${mach.kind === 'vps' && mach.via ? `<button class="btn ink" data-reconnect="${store.active}" type="button">Torna a connectar</button>` : ''}<a class="btn ghost" href="#/ordinadors">Ordinadors</a></div>` : ''}</div>`;
+    return `${head}${queueList()}<div class="panel empty">${bot(state.lastError ? 'sleep' : 'work')}<h2>${esc(state.lastError || 'Connectant amb l’ordinador…')}</h2>${state.lastError ? `<p>${mach.kind === 'vps' ? 'Potser el servidor s’ha reiniciat i l’adreça ha canviat.' : 'Comprova que nio continua engegat a l’ordinador i que el túnel està obert.'}</p><div class="row" style="justify-content:center"><button class="btn" data-act="retry" type="button">${svg(ICON.refresh)}Torna-ho a provar</button>${mach.kind === 'vps' && mach.via ? `<button class="btn ink" data-reconnect="${store.active}" type="button">Torna a connectar</button>` : ''}<button class="btn ghost" data-act="new" type="button">Posa una tasca a la cua</button><a class="btn ghost" href="#/ordinadors">Ordinadors</a></div>` : ''}</div>`;
   }
   if (manage) for (const id of [...manage]) if (!state.sessions.has(id)) manage.delete(id);
-  return `${head}${list.length ? `<div class="list">${list.map((s) => `
-    <${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(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>`}`;
+  const now = Date.now(), recent = list.filter((s) => now - s.updated < DAY || s.state === 'running' || s.state === 'waiting' || s.pending), old = list.filter((s) => !recent.includes(s));
+  const recentHtml = recent.length ? `<div class="list">${recent.map(sessionCard).join('')}</div>` : '';
+  const oldHtml = old.length ? `<details class="old-sessions"><summary class="muted small">${old.length} sessi${old.length > 1 ? 'ons' : 'o'} anterior${old.length > 1 ? 's' : ''}</summary><div class="list">${old.map(sessionCard).join('')}</div></details>` : '';
+  const termHtml = `<div id="termSessions">${termSessionsHtml()}</div>`;
+  return `${head}${queueList()}${termHtml}${list.length ? `${recentHtml}${oldHtml}` : `<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>`}`;
 }
 
 /* ---------- Aprovacions */
@@ -903,6 +1043,7 @@ async function revokeDevice(id) {
 let activity = null, actFilter = 'tot';
 const ACT_FILTERS = { tot: 'Tot', approval: 'Aprovacions', tool: 'Eines', job: 'Feines', device: 'Dispositius' };
 function viewActivity() {
+  if (!machine()) return `<div class="top"><div><h1>Activitat</h1><p>Tot el que fan els agents: què, per què, quan i qui ho ha aprovat.</p></div></div>${noMachine('El registre es guarda a cada ordinador. Connecta’n un per veure què hi han fet els agents.')}`;
   return `<div class="top"><div><h1>Activitat</h1><p>Tot el que han fet els agents en aquest ordinador: què, per què, quan i qui ho ha aprovat. Es guarda només a l’ordinador.</p></div><button class="btn" data-act="activity-refresh" type="button">${svg(ICON.refresh)}Actualitza</button></div>
     <div class="seg act-filter" role="group">${Object.entries(ACT_FILTERS).map(([k, l]) => `<button type="button" data-filter="${k}" aria-pressed="${k === actFilter}">${l}</button>`).join('')}</div>
     <div id="actList">${activityHtml()}</div>`;
@@ -929,7 +1070,8 @@ async function loadActivity() {
 /* ---------- Memòria compartida (fitxers markdown a l'ordinador, per a Claude Code i Codex) */
 let mem = null;
 function viewMemory() {
-  return `<div class="top"><div><h1>Memòria</h1><p>El que recorden els teus agents en aquest ordinador. Claude Code i Codex la llegeixen i hi escriuen (servidor MCP de nio). Són fitxers markdown a <span class="mono">~/.nio/memory</span>.</p></div><button class="btn ink" data-act="mem-new" type="button">${svg(ICON.plus)}Fitxer nou</button></div>
+  if (!machine()) return `<div class="top"><div><h1>Memòria</h1><p>El que recorden els teus agents: preferències, decisions i context dels projectes.</p></div></div>${noMachine('La memòria són fitxers a l’ordinador. Connecta’n un per veure-la i editar-la.')}`;
+  return `<div class="top"><div><h1>Memòria</h1><p>Preferències, decisions i context que els agents recorden en aquest ordinador. Obre un fitxer per consultar-lo o editar-lo.</p></div><button class="btn ink" data-act="mem-new" type="button">${svg(ICON.plus)}Fitxer nou</button></div>
     <form class="mem-search" id="memSearch" role="search"><input type="search" id="memQ" placeholder="Busca a la memòria…" aria-label="Busca a la memòria" autocomplete="off"><button class="btn ink" type="submit">Busca</button></form>
     <div id="memBody">${memHtml()}</div>`;
 }
@@ -948,14 +1090,18 @@ async function loadMemory() {
 async function memEdit(p) {
   let f = { path: p || 'projectes/', content: '' };
   if (p) { try { f = await api(`/api/memory/f/${encodeURIComponent(p)}`); } catch (e) { return toast(e.message); } }
-  openSheet(`<h2>${p ? esc(p) : 'Fitxer nou'}</h2>
-    ${p ? '' : '<label class="f"><span>Nom (acaba en .md)</span><input type="text" id="memPath" value="projectes/" autocapitalize="off" spellcheck="false"></label>'}
+  openSheet(`<h2>${p ? esc(p) : 'Fitxer nou'}</h2><form class="stack" id="memForm">
+    ${p ? '' : '<label class="f"><span>Nom (acaba en .md)</span><input type="text" id="memPath" value="projectes/" placeholder="projectes/context.md" required pattern=".+\\.md" title="Escriu un nom acabat en .md, per exemple projectes/context.md" autocapitalize="off" spellcheck="false"></label>'}
     <label class="f"><span>Contingut</span><textarea class="field mono" id="memText" rows="14" spellcheck="false">${esc(f.content)}</textarea></label>
-    <div class="row between sheet-foot">${p ? '<button class="btn danger" type="button" id="memDel">Esborra</button>' : '<span></span>'}<button class="btn ink" type="button" id="memSave">Desa</button></div>`, (sh) => {
-    $('#memSave', sh).onclick = async () => {
+    <p id="memError" class="form-error" role="alert" hidden></p>
+    <div class="row between sheet-foot">${p ? '<button class="btn danger" type="button" id="memDel">Esborra</button>' : '<span></span>'}<button class="btn ink" type="submit" id="memSave">Desa</button></div></form>`, (sh) => {
+    $('#memForm', sh).onsubmit = async (event) => {
+      event.preventDefault();
       const path = p || $('#memPath', sh).value.trim();
+      const button = $('#memSave', sh), error = $('#memError', sh); button.disabled = true; button.textContent = 'Desant…'; error.hidden = true;
       try { await api(`/api/memory/f/${encodeURIComponent(path)}`, { method: 'PUT', body: { content: $('#memText', sh).value } }); toast('Desat'); closeSheet(); mem = null; loadMemory(); }
-      catch (e) { toast(e.message, 4200); }
+      catch (e) { error.textContent = `${e.message} Pots tornar a prémer «Desa».`; error.hidden = false; }
+      finally { button.disabled = false; button.textContent = 'Desa'; }
     };
     if (p) $('#memDel', sh).onclick = async () => {
       if (!confirm(`S’esborrarà «${p}» de la memòria. Els agents ja no ho recordaran.`)) return;
@@ -993,6 +1139,7 @@ function jobCard(j) {
   </div>`;
 }
 function viewJobs() {
+  if (!machine()) return `<div class="top"><div><h1>Feines</h1><p>Encarrega feines que es fan soles: ara, més tard o cada dia.</p></div></div>${noMachine('Les feines s’executen a l’ordinador. Connecta’n un per programar-ne.')}`;
   const head = `<div class="top"><div><h1>Feines</h1><p>Encarrega feines que es fan soles: ara, més tard o cada dia, i encadena-les («quan Claude Code acabi, que Codex ho revisi»). Les fan Claude Code o Codex a l’ordinador.</p></div><button class="btn ink" data-act="job-new" type="button">${svg(ICON.plus)}Nova feina</button></div>`;
   if (!jobsData) return `${head}<div id="jobsBody"><div class="panel empty">${bot('work')}<h2>Carregant…</h2></div></div>`;
   return `${head}<div id="jobsBody">${jobsHtml()}</div>`;
@@ -1098,6 +1245,7 @@ function approvalCard(a, showSession = true) {
   </div>`;
 }
 function viewApprovals() {
+  if (!machine()) return `<div class="top"><div><h1>Aprovacions</h1><p>Quan un agent vol editar un fitxer o executar una ordre, t’ho demana aquí.</p></div></div>${noMachine('Quan un agent d’un ordinador teu necessiti permís, la petició t’arribarà aquí.')}`;
   const list = [...state.approvals.values()].sort((a, b) => a.created - b.created);
   return `<div class="top"><div><h1>Aprovacions</h1><p>Quan un agent vol editar un fitxer o executar una ordre, t’ho demana aquí.</p></div></div>
     ${machine() && !state.synced && !state.lastError && !list.length ? '<div class="list" aria-busy="true"><div class="card skel-card"><i class="skel" style="width:40%"></i><i class="skel tall" style="width:80%"></i><i class="skel" style="width:60%"></i></div></div>' : list.length ? `<div class="list">${list.map((a) => approvalCard(a)).join('')}</div>` : `<div class="panel empty">${bot('happy')}<h2>No hi ha res pendent</h2><p>Les sessions en mode «Demana permís» et faran les peticions aquí, i també t’avisaran al mòbil.</p></div>`}`;
@@ -1147,7 +1295,8 @@ function renderSession() {
     <div class="feed" id="feed" aria-live="polite"></div>
     <div class="composer" id="composer"></div>
   </section>`;
-  feedEls = new Map(); toolEls = new Map(); typers.clear();
+  feedEls = new Map(); toolEls = new Map(); typers.clear(); pin.node = null; pinNext = false; pendingUser = null;
+  composerRO?.disconnect(); watchComposer($('#composer'));
   renderSessionHead();
   const feed = $('#feed'), evs = state.events.get(id);
   if (!evs) feed.innerHTML = machine() ? '<div class="skel-feed" aria-busy="true"><i class="skel r" style="width:46%"></i><i class="skel" style="width:88%;height:64px"></i><i class="skel" style="width:70%;height:40px"></i></div>' : `<div class="ev-info">${ 'Connecta un ordinador per veure aquesta sessió.'}</div>`;
@@ -1156,6 +1305,13 @@ function renderSession() {
   requestAnimationFrame(() => toBottom(feed));
 }
 function sessionMood(s) { return !s ? 'idle' : s.state === 'running' ? 'work' : s.state === 'waiting' || s.pending ? 'peek' : s.state === 'error' ? 'sleep' : 'idle'; }
+// Ús de la subscripció de l'agent (5 h i setmana), com a esfis. Només si l'agent l'ha informat.
+const hhmm = (t) => new Date(t * 1000).toLocaleString('ca', { weekday: t * 1000 - Date.now() > 864e5 ? 'short' : undefined, hour: '2-digit', minute: '2-digit' });
+function usageChip(agent) {
+  const u = state.usage?.[agent]; if (!u?.windows?.length) return '';
+  const tip = u.windows.map((w) => `${w.label}: ${Math.round(w.used * 100)} %${w.resetsAt ? ` · es reinicia ${hhmm(w.resetsAt)}` : ''}`).join('\n');
+  return `<span class="chip mono usage" title="${esc(`Ús de la subscripció\n${tip}`)}">${svg(CHIP_ICON.usage)}${u.windows.map((w) => `<span class="uw" data-hi="${w.used >= 0.8 ? 1 : 0}">${esc(w.label)} ${Math.round(w.used * 100)}%</span>`).join('')}</span>`;
+}
 function renderSessionHead() {
   renderChrome();
   const s = state.sessions.get(state.route.id), bar = $('#modeBar');
@@ -1169,7 +1325,7 @@ function renderSessionHead() {
     ${ag?.noModes ? '' : `<button class="chip" data-act="mode" type="button">${svg(CHIP_ICON.mode)}<span>${esc(MODES[s.mode]?.label || s.mode)}</span></button>`}
     <button class="chip mono" data-act="folder" type="button" title="${esc(s.cwd)} · canvia de carpeta">${svg(CHIP_ICON.folder)}<span>${esc(basename(s.cwd))}</span></button>
     <button class="chip mono" data-act="model" type="button" title="Canvia de model">${svg(CHIP_ICON.model)}<span>${esc(s.model || 'Model per defecte')}</span></button>
-    ${s.cost ? `<span class="chip mono">${svg(CHIP_ICON.cost)}<span>${s.cost.toFixed(2)} $</span></span>` : ''}
+    ${usageChip(s.agent)}
     ${stateChip(s)}`;
 }
 // Alçada del camp de text segons el contingut, sense barra de desplaçament fins al límit.
@@ -1183,6 +1339,45 @@ function autogrow(ta, max = 180) {
 const scroller = (f) => (f && /(auto|scroll)/.test(getComputedStyle(f).overflowY) ? f : document.scrollingElement);
 const nearBottom = (f) => { const s = scroller(f), h = s === document.scrollingElement ? innerHeight : s.clientHeight; return s.scrollHeight - s.scrollTop - h < 140; };
 const toBottom = (f) => { const s = scroller(f); s.scrollTop = s.scrollHeight; };
+/* En enviar un missatge, puja suaument fins a quedar just sota els xips, i a sota queda l'espai per a la resposta
+   (com més llarga, menys espai de més). Quan la resposta ja no hi cap, la conversa segueix el final com sempre. */
+const pin = { node: null, until: 0 };
+const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
+function feedLines(feed) {
+  const chat = feed.closest('.chat'), bar = $('.mode-bar', chat), comp = $('.composer', chat);
+  return { top: (bar ? bar.getBoundingClientRect().bottom : feed.getBoundingClientRect().top) + 12, bottom: comp ? comp.getBoundingClientRect().top : innerHeight };
+}
+// Posició a la pantalla sense comptar les animacions d'entrada (transform), que mourien el càlcul uns quants píxels.
+function layTop(n) {
+  const op = n.offsetParent || document.body;
+  return op.getBoundingClientRect().top + (op.clientTop || 0) + n.offsetTop - (op === document.body ? 0 : op.scrollTop);
+}
+function sizeSpace(feed) {
+  if (!feed) return;
+  if (!pin.node || !feed.contains(pin.node)) { pin.node = null; feed.style.paddingBottom = ''; delete feed.dataset.pad; return; }
+  // El marge de baix original es llegeix un sol cop: treure'l per mesurar faria saltar el scroll a dalt.
+  if (!feed.dataset.pad) feed.dataset.pad = parseFloat(getComputedStyle(feed).paddingBottom) || 24;
+  const base = +feed.dataset.pad, last = feed.lastElementChild;
+  const { top, bottom } = feedLines(feed), span = layTop(last) + last.offsetHeight - layTop(pin.node);
+  feed.style.paddingBottom = `${base + Math.max(0, bottom - top - span - base)}px`;
+}
+function pinMessage(feed, node) {
+  pin.node = node; sizeSpace(feed);
+  const delta = layTop(node) - feedLines(feed).top;
+  pin.until = performance.now() + 650;
+  scroller(feed).scrollBy({ top: delta, behavior: reducedMotion.matches ? 'auto' : 'smooth' });
+}
+// Després de cada canvi a la conversa: recalcula l'espai i, si eres al final, el segueix (mai a mig de la pujada).
+function follow(feed, wasNear) {
+  sizeSpace(feed); if (wasNear && performance.now() > pin.until) toBottom(feed);
+  // I un cop més quan el navegador ha acabat de col·locar-ho tot.
+  if (pin.node) requestAnimationFrame(() => { const near = nearBottom(feed); sizeSpace(feed); if (near && performance.now() > pin.until) toBottom(feed); });
+}
+let pinNext = false, pendingUser = null;
+// Si el camp de text canvia d'alçada (dues línies, el teclat…), l'espai es torna a calcular perquè el missatge no es mogui.
+const composerRO = typeof ResizeObserver !== 'undefined' ? new ResizeObserver((es) => { for (const x of es) { const feed = $('.feed', x.target.closest('.chat')); if (feed && pin.node) { const near = nearBottom(feed); sizeSpace(feed); if (near) toBottom(feed); } } }) : null;
+const watchComposer = (c) => { if (c) composerRO?.observe(c); };
+visualViewport?.addEventListener('resize', () => sizeSpace($('#feed') || $('#lfeed')));
 // El text de l'agent surt paraula per paraula, tal com arriba, sense refer tota la bombolla a cada tros.
 const typers = new Map();
 function wordsAfter(text, i, n) {
@@ -1213,13 +1408,13 @@ const typeTick = (t) => function tick(now) {
       const stick = nearBottom(feed);
       t.shown = wordsAfter(e.text, t.shown, 1 + Math.floor(backlog / 80));
       t.node.innerHTML = md(e.text.slice(0, t.shown));
-      if (stick) feed.scrollTop = feed.scrollHeight;
+      follow(feed, stick);
     }
   }
   if (!e.open && t.shown >= e.text.length) {
     typers.delete(t.seq);
     const node = eventNode(e); t.node.replaceWith(node); feedEls.set(e.seq, node);
-    renderTyping(); if (nearBottom(feed)) feed.scrollTop = feed.scrollHeight;
+    const near = nearBottom(feed); renderTyping(); follow(feed, near);
     return;
   }
   t.raf = requestAnimationFrame(tick);
@@ -1234,6 +1429,7 @@ function putEvent(e, scroll = true) {
       const st = $('.st', t); st.className = `st ${e.error ? 'err' : 'ok'}`; st.textContent = e.error ? '✕' : '✓';
       let pre = $('pre.out', t); if (!pre && e.output) { pre = el('<pre class="out"></pre>'); t.appendChild(pre); }
       if (pre) pre.textContent = e.output;
+      sizeSpace(feed);
       return;
     }
   }
@@ -1243,18 +1439,20 @@ function putEvent(e, scroll = true) {
     if (last && last.classList.contains('ev-logs')) { const pre = $('pre', last); pre.textContent += `\n${e.text}`; $('summary', last).textContent = `Registre del procés (${pre.textContent.split('\n').length} línies)`; return; }
   }
   const node = eventNode(e); if (!node) return;
+  if (e.kind === 'user' && pendingUser && pendingUser.text === e.text && !feedEls.get(e.seq)) { pendingUser.node.replaceWith(node); feedEls.set(e.seq, node); pendingUser = null; renderTyping(); return; }
   const old = feedEls.get(e.seq);
   if (old) old.replaceWith(node); else { const typing = $('.typing', feed); typing ? feed.insertBefore(node, typing) : feed.appendChild(node); }
   feedEls.set(e.seq, node);
   if (e.kind === 'tool') toolEls.set(e.id, node);
   renderTyping();
-  if (scroll && stick) toBottom(feed);
+  if (scroll && e.kind === 'user' && pinNext && !old) { pinNext = false; return pinMessage(feed, node); }
+  if (scroll) follow(feed, stick);
 }
 function eventNode(e) {
   const s = state.sessions.get(state.route.id);
   switch (e.kind) {
     case 'user': return el(`<div class="msg-user">${esc(e.text)}</div>`);
-    case 'text': return el(`<div class="msg-ai ${e.open && s?.state === 'running' ? 'cursor' : ''}" data-seq="${e.seq}">${md(e.text)}${!e.open && voiceOn() ? `<button class="speak" type="button" data-speak aria-label="Escolta la resposta">${svg(ICON.speaker)}<span>Escolta</span></button>` : ''}</div>`);
+    case 'text': return el(`<div class="msg-ai ${e.open && s?.state === 'running' ? 'cursor' : ''}" data-seq="${e.seq}">${md(e.text)}${!e.open && ttsOn() ? `<button class="speak" type="button" data-speak aria-label="Escolta la resposta">${svg(ICON.speaker)}<span>Escolta</span></button>` : ''}</div>`);
     case 'tool': return el(`<details class="tool"><summary><span class="name">${esc(e.name)}</span><span class="arg">${esc(toolArg(e.input))}</span><span class="st">…</span></summary><pre>${esc(prettyInput(e.input))}</pre></details>`);
     case 'tool_result': return el(`<details class="tool"><summary><span class="name">${esc(e.name || 'Eina')}</span><span class="arg"></span><span class="st ${e.error ? 'err' : 'ok'}">${e.error ? '✕' : '✓'}</span></summary><pre class="out">${esc(e.output)}</pre></details>`);
     case 'approval': { const a = state.approvals.get(e.approval) || {}; return el(approvalCard({ ...a, approval: e.approval, tool: e.tool, input: e.input, state: e.state && e.state !== 'pending' ? e.state : a.state || e.state }, false)); }
@@ -1262,7 +1460,6 @@ function eventNode(e) {
     case 'info': return el(`<div class="ev-info">${esc(e.text)}</div>`);
     case 'result': {
       const bits = [];
-      if (typeof e.cost === 'number' && e.cost > 0) bits.push(`${e.cost.toFixed(3)} $`);
       if (e.ms) bits.push(`${(e.ms / 1000).toFixed(1).replace('.', ',')} s`);
       if (e.tokens?.output_tokens || e.tokens?.output) bits.push(`${e.tokens.output_tokens || e.tokens.output} tokens`);
       if (e.error) bits.push(String(e.error));
@@ -1282,6 +1479,7 @@ function renderTyping() {
   else if (t) t.remove();
   if (!busy) $$('.msg-ai.cursor', feed).forEach((n) => n.classList.remove('cursor'));
   $$('.mode-bar .abot .bot, #headBot .bot').forEach((b) => { b.dataset.mood = sessionMood(s); });
+  if (pin.node) sizeSpace(feed);
 }
 /* ---------- Comandes amb «/» (les de nio i les de l'agent) */
 const NIO_CMDS = [
@@ -1411,8 +1609,11 @@ function renderComposer() {
     const c = text.match(/^\/([\w:.-]+)(?:\s+([\s\S]*))?$/), nio = c && NIO_CMDS.find((x) => x.name === c[1].toLowerCase());
     ta.value = ''; grow(); drawSlash();
     if (nio) return runCmd(s, nio.name, (c[2] || '').trim());
+    // El missatge surt a la pantalla a l'instant; quan arriba l'esdeveniment real, el substitueix.
+    const feed = $('#feed'); pinNext = true;
+    if (feed) { const tmp = el(`<div class="msg-user">${esc(text)}</div>`), typing = $('.typing', feed); typing ? feed.insertBefore(tmp, typing) : feed.appendChild(tmp); pendingUser = { node: tmp, text }; pinNext = false; pinMessage(feed, tmp); }
     try { await api(`/api/sessions/${s.id}/message`, { method: 'POST', body: { text } }); }
-    catch (e) { ta.value = text; grow(); toast(e.message, 4200); }
+    catch (e) { pinNext = false; pendingUser?.node.remove(); pendingUser = null; ta.value = text; grow(); toast(e.message, 4200); }
   };
   ta.addEventListener('keydown', (e) => {
     if (items.length && !pop.hidden) {
@@ -1429,10 +1630,11 @@ function renderComposer() {
 
 /* ---------- Fulls */
 function openSheet(html, onMount, cls) {
-  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}`;
+  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><button class="icon-btn sheet-close" type="button" data-sheet-close aria-label="Tanca">${svg(ICON.close)}</button>${html}`;
   if (!d.open) d.showModal(); raiseToasts();
   if (isTouch) { if (document.activeElement?.matches?.('input, textarea, select')) document.activeElement.blur(); } else setTimeout(() => focusIn(d), 30); if (T.on) $('#tour').hidden = true;
   onMount?.($('#sheetIn'));
+  const title = si.querySelector('h2'); if (title) { title.id = 'sheetTitle'; d.setAttribute('aria-labelledby', title.id); } else { d.removeAttribute('aria-labelledby'); d.setAttribute('aria-label', 'Opcions'); }
 }
 const closeSheet = () => { const d = $('#sheet'); if (d.open) d.close(); setTimeout(focusMain, 0); };
 // A l'ordinador el cursor és sempre on s'escriu; al mòbil no, perquè no s'obri el teclat.
@@ -1443,9 +1645,50 @@ function focusMain() {
   if (r === 'session') $('#msg')?.focus({ preventScroll: true });
   else if (r === 'mobil' && inLocalChat()) $('#lmsg')?.focus({ preventScroll: true });
 }
-$('#sheet').addEventListener('click', (e) => { if (e.target.id === 'sheet') closeSheet(); });
+$('#sheet').addEventListener('click', (e) => { if (e.target.id === 'sheet' || e.target.closest('[data-sheet-close]')) closeSheet(); });
 $('#sheet').addEventListener('close', () => setTimeout(focusMain, 0));
 
+// Al mòbil, els fulls es tanquen lliscant cap avall, com els de l'iPhone: el full segueix el dit
+// i, si baixa prou o es llença, marxa; si no, torna a pujar. Si el contingut té scroll, primer s'ha d'arribar a dalt.
+(() => {
+  const d = $('#sheet');
+  let g = null;
+  const scrollerOf = (t) => { for (let el = t; el && el !== d.parentElement; el = el.parentElement) { if (el.scrollHeight > el.clientHeight + 1 && /auto|scroll/.test(getComputedStyle(el).overflowY)) return el; if (el === d) break; } return null; };
+  const reset = () => { d.style.transition = ''; d.style.transform = ''; };
+  d.addEventListener('touchstart', (e) => {
+    g = null;
+    if (!mq.matches || e.touches.length !== 1 || e.target.closest('input, textarea, select, [contenteditable], input[type=range], [data-noswipe]')) return;
+    const t = e.touches[0], sc = scrollerOf(e.target);
+    const head = !!e.target.closest('.grab, .wiz-head, h2');
+    if (sc && sc.scrollTop > 0 && !head) return;
+    g = { y0: t.clientY, x0: t.clientX, dy: 0, lock: null, sc: head ? null : sc, pts: [[e.timeStamp, t.clientY]] };
+  }, { passive: true });
+  d.addEventListener('touchmove', (e) => {
+    if (!g) return;
+    const t = e.touches[0], dy = t.clientY - g.y0, dx = t.clientX - g.x0;
+    if (!g.lock) {
+      if (Math.abs(dy) < 6 && Math.abs(dx) < 6) return;
+      if (dy > 0 && dy > Math.abs(dx) && !(g.sc && g.sc.scrollTop > 0)) { g.lock = 'y'; d.style.transition = 'none'; }
+      else { g = null; return; }
+    }
+    if (e.cancelable) e.preventDefault();
+    g.dy = Math.max(0, dy); g.pts.push([e.timeStamp, t.clientY]); if (g.pts.length > 5) g.pts.shift();
+    d.style.transform = `translateY(${g.dy}px)`;
+  }, { passive: false });
+  const end = (e) => {
+    const x = g; g = null; if (!x || x.lock !== 'y') return;
+    const [t0, y0] = x.pts[0], [t1, y1] = x.pts[x.pts.length - 1], v = (y1 - y0) / Math.max(1, t1 - t0);
+    if (e.type === 'touchend' && (x.dy > Math.min(160, d.offsetHeight * 0.28) || (v > 0.5 && x.dy > 20))) {
+      if (reduce) { reset(); closeSheet(); return; }
+      d.style.transition = 'transform .2s cubic-bezier(.4,0,1,1)'; d.style.transform = `translateY(${d.offsetHeight + 20}px)`;
+      setTimeout(() => { closeSheet(); requestAnimationFrame(reset); }, 200);
+    } else { d.style.transition = 'transform .3s cubic-bezier(.22,1,.36,1)'; d.style.transform = ''; setTimeout(reset, 300); }
+  };
+  d.addEventListener('touchend', end, { passive: true });
+  d.addEventListener('touchcancel', end, { passive: true });
+  d.addEventListener('close', reset);
+})();
+
 // Claude Code no deixa «Via lliure» quan nio corre com a root (típic en un VPS).
 const modeBlocked = (agentId, mode) => agentId === 'claude' && mode === 'tot' && state.info?.user === 'root';
 function modeHelp(agentId, mode) {
@@ -1460,7 +1703,7 @@ function modeHelp(agentId, mode) {
 // Assistent de 4 passos: agent, carpeta exacta, opcions i tasca. Capçalera i peu fixos; només el cos fa scroll.
 async function newSessionSheet(preset = {}) {
   if (!machine()) return go('#/sessions');
-  if (!state.connected) return toast('Encara no hi ha connexió amb l’ordinador');
+  if (!state.connected) return queueSheet();
   const agents = [...(state.info?.agents || [])].sort((x, y) => Number(!!y.available) - Number(!!x.available));
   let projects = [];
   try { projects = await api('/api/projects'); } catch (e) { return toast(e.message); }
@@ -1547,7 +1790,10 @@ async function newSessionSheet(preset = {}) {
       if (!sel.text.trim()) { $('#firstMsg', sh)?.focus(); return toast('Explica a l’agent què ha de fer'); }
       const btn = $('[data-start]', sh); btn.disabled = true;
       try { const { text, ...rest } = sel; const s = await api('/api/sessions', { method: 'POST', body: { ...rest, text: text.trim() } }); state.sessions.set(s.id, s); LS.set(lastKey, { agent: sel.agent, cwd: sel.cwd, mode: sel.mode, recent: [sel.cwd, ...recents.filter((p) => p !== sel.cwd)].slice(0, 6) }); closeSheet(); go(`#/s/${s.id}`); }
-      catch (e) { toast(e.message, 4200); btn.disabled = false; }
+      catch (e) {
+        if (e.name === 'TypeError') { const { text, ...rest } = sel; queue.add({ ...rest, text: text.trim(), title: text.trim().slice(0, 60) }); closeSheet(); toast('L’ordinador no respon. La tasca és a la cua.', 4200); return render(); }
+        toast(e.message, 4200); btn.disabled = false;
+      }
     };
     sh.onclick = (e) => {
       const t = e.target;
@@ -1693,7 +1939,7 @@ async function loadOllama(force) {
   paintModels();
 }
 function ollamaSection() {
-  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>`;
+  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>No tens cap ordinador connectat</b><div class="muted small" style="margin-top:4px">Els models d’Ollama funcionen a l’ordinador i són més grans i capaços. Connecta’n un per veure’ls i descarregar-ne.</div><button class="btn block" style="margin-top:10px" type="button" data-act="add-computer">Connecta un ordinador</button></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; }
@@ -1853,7 +2099,7 @@ 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>`));
-  toBottom(feed);
+  pin.node = null; toBottom(feed); composerRO?.disconnect(); watchComposer($('.composer', feed.closest('.chat')));
   const ta = $('#lmsg');
   if (local.draft) { ta.value = local.draft; local.draft = ''; autogrow(ta); }
   ta.addEventListener('input', () => autogrow(ta));
@@ -1903,14 +2149,14 @@ async function sendLocal() {
   ta.value = ''; autogrow(ta);
   const feed = $('#lfeed'); if (!local.messages.length) feed.innerHTML = '';
   local.messages.push({ role: 'user', content: text });
-  feed.appendChild(el(`<div class="msg-user">${esc(text)}</div>`));
-  const out = el('<div class="msg-ai cursor"></div>'); feed.appendChild(out); toBottom(feed);
+  const mine = el(`<div class="msg-user">${esc(text)}</div>`); feed.appendChild(mine);
+  const out = el('<div class="msg-ai cursor"></div>'); feed.appendChild(out); pinMessage(feed, mine);
   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);
+      const near = nearBottom(feed); out.innerHTML = md(stripThink(acc)); follow(feed, near);
     } else {
     const chunks = await local.engine.chat.completions.create({
       messages: [{ role: 'system', content: LOCAL_SYSTEM }, ...local.messages.slice(-8)], stream: true,
@@ -1918,7 +2164,7 @@ async function sendLocal() {
       extra_body: { enable_thinking: false }
     });
     for await (const c of chunks) {
-      acc += c.choices[0]?.delta?.content || ''; out.innerHTML = md(stripThink(acc)); if (nearBottom(feed)) toBottom(feed);
+      acc += c.choices[0]?.delta?.content || ''; const near = nearBottom(feed); out.innerHTML = md(stripThink(acc)); follow(feed, near);
       if (local.stopped) break;
     }
     }
@@ -2318,6 +2564,8 @@ document.addEventListener('click', async (e) => {
 // Les claus (ElevenLabs o OpenAI) viuen a l'ordinador. L'àudio fa: mòbil → ordinador → proveïdor.
 let nodeVoice = null; // estat de la veu de l'ordinador actiu (sense claus)
 const voiceOn = () => !!nodeVoice?.stt;
+// Escoltar necessita una clau d'ElevenLabs o OpenAI: amb Whisper sol no hi ha veu per parlar.
+const ttsOn = () => !!nodeVoice?.tts;
 async function loadVoice() { try { nodeVoice = await api('/api/voice'); } catch { nodeVoice = null; } }
 async function nodeAudio(path, opts) {
   const m = machine(); if (!m) throw new Error('No hi ha cap ordinador connectat');
@@ -2384,13 +2632,15 @@ async function voiceSheet() {
   openSheet(`<h2>Veu</h2><p class="muted small">Per dictar n’hi ha prou amb Whisper, gratis i a l’ordinador «${esc(machine().name)}». Les claus són opcionals: serveixen per escoltar les respostes en veu alta. Es desen a l’ordinador i no tornen mai al mòbil.</p>
     <div id="whisperBox" style="margin-top:14px">${whisperCard(v.whisper)}</div>
     <form class="stack" id="voiceForm" style="margin-top:14px">
+      <details class="voice-extras"><summary>Extres opcionals · ElevenLabs i OpenAI</summary><div class="stack"><p class="muted small">Afegeix una clau per fer servir aquests serveis. Whisper funciona sense cap clau.</p>
       <label class="f"><span>Clau d’ElevenLabs ${v.providers.elevenlabs.key ? `<span class="muted">(desada: ${esc(v.providers.elevenlabs.key)})</span>` : ''}</span><input type="password" id="vEl" placeholder="${v.providers.elevenlabs.key ? 'Deixa-ho buit per mantenir-la' : 'sk_…'}" value="${!v.providers.elevenlabs.key && old.key ? esc(old.key) : ''}" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
       <label class="f"><span>Clau d’OpenAI ${v.providers.openai.key ? `<span class="muted">(desada: ${esc(v.providers.openai.key)})</span>` : ''}</span><input type="password" id="vOa" placeholder="${v.providers.openai.key ? 'Deixa-ho buit per mantenir-la' : 'sk-…'}" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
       <div class="grid-2"><label class="f"><span>Per entendre’t</span><select id="vStt"><option value="">Automàtic</option>${v.whisper ? `<option value="whisper" ${v.stt === 'whisper' ? 'selected' : ''}>Whisper (gratis)</option>` : ''}<option value="elevenlabs" ${v.stt === 'elevenlabs' ? 'selected' : ''}>ElevenLabs Scribe</option><option value="openai" ${v.stt === 'openai' ? 'selected' : ''}>OpenAI</option></select></label>
       <label class="f"><span>Per parlar</span><select id="vTts"><option value="">Automàtic</option><option value="elevenlabs" ${v.tts === 'elevenlabs' ? 'selected' : ''}>ElevenLabs</option><option value="openai" ${v.tts === 'openai' ? 'selected' : ''}>OpenAI</option></select></label></div>
       <label class="row check"><input type="checkbox" id="vSpeak" ${v.speak ? 'checked' : ''}> <span>Llegeix en veu alta les respostes de la sessió oberta</span></label>
       ${old.key ? '<p class="muted small">Tenies una clau d’ElevenLabs desada en aquest navegador: la passo a l’ordinador i l’esborro d’aquí.</p>' : ''}
-      <div class="row between sheet-foot"><button class="btn ghost" type="button" id="vOff">Treu les claus</button><button class="btn ink" type="submit">Desa</button></div>
+      <button class="btn ghost" type="button" id="vOff">Treu les claus</button></div></details>
+      <div class="row sheet-foot"><button class="btn ink" type="submit">Desa</button></div>
     </form>`, (sh) => {
     const put = async (body, msg) => { try { nodeVoice = await api('/api/voice', { method: 'PUT', body }); try { localStorage.removeItem('nio.voice'); } catch { /* res */ } closeSheet(); toast(msg); if (state.route.name === 'session') renderSession(); else render(); } catch (e) { toast(e.message, 4500); } };
     $('#voiceForm', sh).onsubmit = (e) => { e.preventDefault(); const keys = {}; const el = $('#vEl', sh).value.trim(), oa = $('#vOa', sh).value.trim(); if (el) keys.elevenlabs = el; if (oa) keys.openai = oa; put({ keys, stt: $('#vStt', sh).value || null, tts: $('#vTts', sh).value || null, speak: $('#vSpeak', sh).checked }, 'Veu desada a l’ordinador'); };
@@ -2445,7 +2695,7 @@ async function hydrateShots(root = document) {
   }
 }
 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-rename], [data-reconnect], [data-lm], [data-man], [data-pick]');
+  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], [data-man], [data-pick], [data-qdrop]');
   if (!a) return;
   if (a.dataset.copy) {
     try { await navigator.clipboard.writeText(a.dataset.copy); } catch { return toast(a.dataset.copy); }
@@ -2466,8 +2716,20 @@ document.addEventListener('click', async (e) => {
   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(); }
+  if (a.dataset.qdrop) { queue.drop(a.dataset.qdrop); return render(); }
   switch (a.dataset.act) {
     case 'new': return newSessionSheet();
+    case 'resume': {
+      const btn = a; btn.disabled = true;
+      const sid = btn.dataset.sid, cwd = btn.dataset.cwd, sname = btn.dataset.sname;
+      try {
+        const title = sname || basename(cwd) || 'Terminal';
+        const ns = await api('/api/sessions', { method: 'POST', body: { agent: 'claude', cwd: cwd || '', mode: 'preguntar', resumeId: sid, title } });
+        state.sessions.set(ns.id, ns); termSessions = termSessions?.filter((x) => x.sessionId !== sid) || null;
+        go(`#/s/${ns.id}`);
+      } catch (err) { toast(err.message, 4200); btn.disabled = false; }
+      return;
+    }
     case 'manage-on': manage = new Set(); return render();
     case 'manage-off': manage = null; return render();
     case 'manage-del': return manageDelete();
@@ -2586,7 +2848,7 @@ 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, 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', target: '#addComputer, .first-run [data-act=add-computer]', m: '#addComputer, .first-run [data-act=add-computer]', title: 'Afegeix un ordinador', text: 'Hi ha tres maneres: aquest ordinador (amb l’ordre d’instal·lació), 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.' },