nio-cat 0.9.6 → 0.9.7

package/web/app/app.js

@@ -1,6 +1,8 @@
 // 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';
+
 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,7 +18,7 @@ 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 = {
@@ -24,6 +26,7 @@ const ICON = {
   jobs: '<rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 9h8M8 13h5M8 17h3"/>',
   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"/>',
+  notes: '<path d="M6 4h12v16H6z"/><path d="M9 9h6M9 13h6M9 17h3"/>',
   memory: '<path d="M6 4h9l3 3v13H6z"/><path d="M9 11h6M9 15h6M14 4v4h4"/>',
   sessions: '<path d="M4 6h16M4 12h16M4 18h10"/>',
   approvals: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
@@ -70,6 +73,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 +297,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;
@@ -309,7 +370,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 +386,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 +395,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;
@@ -447,6 +511,7 @@ function checkPairHash() {
 const VIEWS = {
   sessions: { label: 'Sessions', icon: ICON.sessions, group: 'Feina' },
   approvals: { label: 'Aprovacions', icon: ICON.approvals, group: 'Feina' },
+  notes: { label: 'Notes', icon: ICON.notes, 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' },
@@ -456,15 +521,15 @@ const VIEWS = {
   ajustos: { label: 'Ajustos', icon: ICON.settings, group: 'Compte' },
   ajuda: { label: 'Ajuda', icon: ICON.help, group: 'Compte' }
 };
-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', 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 +539,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,7 +557,7 @@ function renderChrome() {
   const m = machine(), sc = $('#sideConn');
   sc.innerHTML = m ? `<i class="dot ${state.connected ? 'on' : ''}"></i><span>${esc(m.name)}</span>${svg(ICON.chev)}` : `<i class="dot"></i><span>Afegeix un ordinador</span>${svg(ICON.plus)}`;
   sc.setAttribute('role', 'button'); sc.tabIndex = 0; sc.classList.add('switch'); sc.dataset.act = 'machines'; sc.title = 'Ordinadors';
-  const more = ['feines', 'memoria', 'approvals', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].includes(r.name);
+  const more = ['notes', '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"`)
@@ -506,6 +571,8 @@ 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;
+const getNotes = () => (notesCtl ||= createNotes({ api, nodeAudio, toast, esc, machine, voiceOn, voiceSheet, isDemo, openSheet, closeSheet, mobileQrSheet }));
 function render() {
   const r = state.route, view = $('#view'), board = r.name === 'pissarra';
   if (r.name !== 'sessions') manage = null;
@@ -513,11 +580,17 @@ 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 (!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
   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 (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;
@@ -539,6 +612,7 @@ function render() {
 /* ---------- Ordinadors (llista, afegir i detall de l'actiu) */
 const deviceId = () => { let d = LS.get('nio.device', ''); if (!d) { d = Math.random().toString(36).slice(2, 12); LS.set('nio.device', d); } return d; };
 const isPhone = () => isTouch || matchMedia('(max-width: 820px)').matches;
+const 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();
@@ -640,24 +714,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 +819,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) => {
@@ -760,7 +848,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 +891,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;
@@ -823,7 +912,7 @@ 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(); }; });
+  openSheet(`<h2>Més</h2><div class="list">${['notes', 'feines', 'memoria', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].map(item).join('')}</div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
 }
 
 /* ---------- Sessions */
@@ -834,11 +923,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();
@@ -856,6 +945,7 @@ async function manageDelete() {
 }
 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() {
+  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,15 +953,15 @@ 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) => `
+  return `${head}${queueList()}${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>
+      <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'}>`).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>`}`;
 }
 
@@ -903,6 +993,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,6 +1020,7 @@ async function loadActivity() {
 /* ---------- Memòria compartida (fitxers markdown a l'ordinador, per a Claude Code i Codex) */
 let mem = null;
 function viewMemory() {
+  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>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>
     <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>`;
@@ -993,6 +1085,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 +1191,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 +1241,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 +1251,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 +1271,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 +1285,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 +1354,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 +1375,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,12 +1385,14 @@ 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);
@@ -1262,7 +1406,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 +1425,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 +1555,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) {
@@ -1460,7 +1607,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 +1694,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 +1843,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 +2003,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 +2053,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 +2068,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;
     }
     }
@@ -2445,7 +2595,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,6 +2616,7 @@ 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 'manage-on': manage = new Set(); return render();
@@ -2586,7 +2737,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.' },