nio-cat 0.5.1 → 0.8.0

package/web/app/app.js

@@ -12,8 +12,19 @@ const isIOS = /iP(hone|ad|od)/.test(navigator.userAgent) || (navigator.platform
 const standalone = matchMedia('(display-mode: standalone)').matches || navigator.standalone;
 const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const bot = (mood = 'idle', cls = '') => (window.NioBot ? NioBot.html(mood, cls) : '');
+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"/>'
+};
 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"/>',
+  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"/>',
   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"/>',
@@ -46,7 +57,7 @@ const MODES = {
 };
 
 /* ---------------------------------------------------------------- estat */
-const state = { route: { name: 'sessions' }, ollama: null, info: null, connected: false, lastError: null, sessions: new Map(), approvals: new Map(), events: new Map(), loaded: new Set() };
+const state = { route: { name: 'sessions' }, ollama: null, info: null, connected: false, lastError: null, sessions: new Map(), approvals: new Map(), events: new Map(), loaded: new Set(), synced: false };
 const LS = {
   get(k, d) { try { const v = localStorage.getItem(k); return v == null ? d : JSON.parse(v); } catch { return d; } },
   set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch { /* emmagatzematge bloquejat */ } }
@@ -137,9 +148,81 @@ async function api(path, opts = {}) {
   return data;
 }
 
-let streamCtrl = null, retry = 0;
+let streamCtrl = null, retry = 0, gotHello = false;
+async function pollLoop(ctrl) {
+  let first = true;
+  while (!ctrl.signal.aborted) {
+    try {
+      const [list, aps] = await Promise.all([api('/api/sessions'), api('/api/approvals')]);
+      if (ctrl.signal.aborted) return;
+      state.connected = true; state.lastError = null;
+      if (first) { first = false; state.synced = true; const r = state.route; state.sessions = new Map(list.map((x) => [x.id, x])); state.approvals = new Map(aps.map((a) => [a.id, a])); if (r.name === 'session') openSession(r.id); else render(); }
+      else {
+        const r = state.route, seen = new Set();
+        for (const x of list) {
+          seen.add(x.id); const old = state.sessions.get(x.id);
+          if (!old || old.updated !== x.updated || old.state !== x.state || old.pending !== x.pending || old.title !== x.title) handle({ type: 'session', session: x });
+        }
+        for (const id of [...state.sessions.keys()]) if (!seen.has(id)) handle({ type: 'removed', session: id });
+        for (const a of aps) if (!state.approvals.has(a.id)) handle({ type: 'approval', approval: a });
+        for (const id of [...state.approvals.keys()]) if (!aps.some((a) => a.id === id)) { state.approvals.delete(id); renderChrome(); if (r.name === 'approvals') render(); }
+        const evs = r.name === 'session' && state.events.get(r.id);
+        if (evs && state.sessions.has(r.id)) {
+          const since = Math.max(0, ...evs.keys());
+          const d = await api(`/api/sessions/${r.id}?since=${since}`);
+          for (const e of d.events) if (!evs.has(e.seq)) handle({ type: 'event', session: r.id, event: e });
+        }
+      }
+    } catch (e) {
+      if (ctrl.signal.aborted) return;
+      state.connected = false; state.lastError = 'No arribo a l’ordinador'; render();
+      return setTimeout(() => machine() && !ctrl.signal.aborted && connect(), 3000);
+    }
+    await new Promise((r) => setTimeout(r, 2000));
+  }
+}
+/* ---------- Adreça recordada a nio.cat
+   Cada ordinador publica la seva adreça actual a nio.cat, signada amb una clau Ed25519 pròpia.
+   Si el túnel canvia d'adreça i no hi arribem, la busquem allà i només la fem servir si la
+   signatura és de la clau que vam guardar en aparellar-nos (nio.cat no pot enganyar-nos). */
+const DIRECTORY = 'https://www.nio.cat';
+function rememberIdentity(url, ident) {
+  if (!ident?.pub || !ident?.loc) return;
+  const ms = store.machines, m = ms.find((x) => x.url === url);
+  if (!m || m.pub === ident.pub) return;
+  if (m.pub) return; // una altra clau a la mateixa adreça: no la canviem mai sola
+  m.pub = ident.pub; m.loc = ident.loc; store.machines = ms;
+}
+const b64uBytes = (s) => Uint8Array.from(atob(s.replace(/-/g, '+').replace(/_/g, '/') + '='.repeat((4 - (s.length % 4)) % 4)), (c) => c.charCodeAt(0));
+async function signedBy(rec, m) {
+  if (rec.pub !== m.pub) return false;
+  try {
+    const key = await crypto.subtle.importKey('raw', b64uBytes(m.pub), { name: 'Ed25519' }, false, ['verify']);
+    return await crypto.subtle.verify({ name: 'Ed25519' }, key, b64uBytes(rec.sig), new TextEncoder().encode(`nio-node-v1\n${m.loc}\n${rec.url}\n${rec.t}`));
+  } catch {
+    // Navegador sense Ed25519 (iOS < 17, Chrome < 113): ens refiem de la comprovació que fa nio.cat.
+    return true;
+  }
+}
+const relocating = new Map();
+async function relocate(i) {
+  const ms = store.machines, m = ms[i];
+  if (!m?.loc || Date.now() - (relocating.get(m.loc) || 0) < 15000) return false;
+  relocating.set(m.loc, Date.now());
+  try {
+    const res = await fetch(`${DIRECTORY}/api/node?id=${encodeURIComponent(m.loc)}`, { cache: 'no-store', signal: AbortSignal.timeout(6000) });
+    if (!res.ok) return false;
+    const rec = await res.json();
+    if (!rec.url || rec.url === m.url || (m.locT && rec.t <= m.locT) || !/^https:\/\//.test(rec.url) || !(await signedBy(rec, m))) return false;
+    const fresh = store.machines, x = fresh.find((y) => y.loc === m.loc); if (!x) return false;
+    x.url = rec.url; x.locT = rec.t; store.machines = fresh;
+    if (i === store.active) toast('L’ordinador ha canviat d’adreça. Ja hi torno a ser.');
+    return true;
+  } catch { return false; }
+}
+
 async function connect() {
-  streamCtrl?.abort();
+  streamCtrl?.abort(); state.synced = false;
   const m = machine();
   if (!m) { state.connected = false; return render(); }
   const ctrl = new AbortController(); streamCtrl = ctrl;
@@ -149,10 +232,14 @@ async function connect() {
     if (res.status === 401) throw Object.assign(new Error('La clau no és vàlida. Torna a connectar amb el codi QR.'), { fatal: true });
     if (!res.ok || !res.body) throw new Error(`Error ${res.status}`);
     state.connected = true; state.lastError = null; retry = 0;
-    renameMachine(state.info.host, state.info.id); syncServiceWorker(); render(); brainsForBoard();
+    rememberIdentity(m.url, state.info.identity);
+    renameMachine(state.info.host, state.info.id); syncServiceWorker(); render(); brainsForBoard(); loadVoice().then(() => state.route.name === 'session' && renderComposer?.());
     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;
+    const hw = setTimeout(() => { if (!gotHello) { poll = true; reader.cancel().catch(() => {}); } }, 5000);
     for (;;) {
-      const { value, done } = await reader.read(); if (done) break;
+      const { value, done } = await reader.read().catch(() => ({ done: true })); if (done) break;
       buf += dec.decode(value, { stream: true }); let i;
       while ((i = buf.indexOf('\n\n')) >= 0) {
         const block = buf.slice(0, i); buf = buf.slice(i + 2);
@@ -160,6 +247,8 @@ async function connect() {
         if (data) handle(JSON.parse(data));
       }
     }
+    clearTimeout(hw);
+    if (poll) return pollLoop(ctrl);
     throw new Error('S’ha tallat la connexió');
   } catch (e) {
     if (ctrl.signal.aborted) return;
@@ -167,6 +256,8 @@ async function connect() {
     state.lastError = e.message === 'Failed to fetch' || e.name === 'TypeError' ? (location.protocol === 'https:' && /^http:\/\/(127\.0\.0\.1|localhost)/.test(m.url) ? 'El navegador no deixa que aquesta web parli amb aquest ordinador. Prova Chrome, o engega nio amb --local.' : 'No arribo a l’ordinador') : e.message;
     render();
     if (e.fatal) return;
+    // Potser el túnel ha canviat d'adreça: la busquem a nio.cat (signada per l'ordinador).
+    if (state.lastError === 'No arribo a l’ordinador' && (await relocate(store.active))) { if (!ctrl.signal.aborted) connect(); return; }
     if (m.kind === 'vps' && m.via && retry >= 2) autoReconnect(m);
     setTimeout(() => machine() && !ctrl.signal.aborted && connect(), Math.min(15000, 1000 * 2 ** retry++));
   }
@@ -213,6 +304,7 @@ function handle(msg) {
       if (!isPhone() && msg.device !== deviceId()) { if ($('#qrBox')) closeSheet(); toast('Mòbil connectat correctament', 2000); }
       break;
     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.loaded.clear(); state.events.clear();
@@ -230,10 +322,12 @@ function handle(msg) {
       break;
     case 'event': {
       const evs = state.events.get(msg.session);
-      if (evs) { evs.set(msg.event.seq, msg.event); if (r.name === 'session' && r.id === msg.session) putEvent(msg.event); }
+      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;
     }
     case 'ollama': onOllama(msg); break;
+    case 'job': onJob(msg); break;
+    case 'screen': onScreen(msg); break;
     case 'approval':
       if (msg.approval.state === 'pending') { state.approvals.set(msg.approval.id, msg.approval); if (!document.hidden && navigator.vibrate) navigator.vibrate(30); }
       else if (state.approvals.has(msg.approval.id)) { markDecided(msg.approval.id, msg.approval.state); break; }
@@ -281,9 +375,33 @@ function addMachine({ url, token, name, kind, via }) {
   state.sessions.clear(); state.approvals.clear(); state.events.clear(); state.loaded.clear(); state.info = null; state.ollama = null;
   connect();
 }
+// El codi o l'enllaç porta un secret d'un sol ús: el canviem per una clau pròpia d'aquest dispositiu,
+// que es pot revocar des d'Ordinadors. Si és la clau principal (el panell que obre nio) o un nio antic
+// que encara no fa aparellament, el valor ja és una clau i el fem servir tal qual.
+function deviceName() {
+  const ua = navigator.userAgent;
+  const dev = /iPhone/.test(ua) ? 'iPhone' : /iPad/.test(ua) || (isIOS && !/iPhone/.test(ua)) ? 'iPad' : /Android/.test(ua) ? (ua.match(/Android[^;]*;\s*([^;)]+?)(?:\sBuild|\))/)?.[1] || 'Android') : /Mac/.test(ua) ? 'Mac' : /Windows/.test(ua) ? 'Windows' : /Linux/.test(ua) ? 'Linux' : 'Dispositiu';
+  const br = /Edg\//.test(ua) ? 'Edge' : /Firefox\//.test(ua) ? 'Firefox' : /Chrome\//.test(ua) ? 'Chrome' : /Safari\//.test(ua) ? 'Safari' : '';
+  return `${dev}${br ? ` · ${br}` : ''}${standalone ? ' (app)' : ''}`.slice(0, 60);
+}
+async function claimPair(pair) {
+  let res = null;
+  try { res = await fetch(`${pair.url}/api/pair`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ code: pair.token, name: deviceName() }), cache: 'no-store' }); }
+  catch { return pair; } // sense connexió ara: ho resoldrà la connexió
+  if (res.ok) { const d = await res.json(); return { ...pair, token: d.token, name: pair.name || d.host, identity: d.identity }; }
+  const why = (await res.json().catch(() => ({}))).error;
+  const ok = await fetch(`${pair.url}/api/info`, { headers: { Authorization: `Bearer ${pair.token}` }, cache: 'no-store' }).then((r) => r.ok).catch(() => false);
+  if (ok) return pair;
+  throw new Error(why || 'Aquest codi no és vàlid o ha caducat. Demana’n un de nou amb «nio pair».');
+}
+async function pairAndAdd(pair, { msg = 'Ordinador connectat', after } = {}) {
+  try { const p = await claimPair(pair); addMachine(p); rememberIdentity(p.url, p.identity); toast(msg); after?.(); }
+  catch (e) { toast(e.message, 6000); }
+  render();
+}
 // Passa a un altre ordinador de la llista i es queda a la mateixa secció.
 function switchMachine(i) {
-  closeSheet(); store.active = i; streamCtrl?.abort();
+  closeSheet(); store.active = i; streamCtrl?.abort(); tgState = undefined; nodeVoice = null;
   state.ollama = null; state.sessions.clear(); state.approvals.clear(); state.events.clear(); state.loaded.clear(); state.connected = false; state.info = null; state.lastError = null;
   connect();
   if (state.route.name === 'session') go('#/sessions'); else render();
@@ -300,9 +418,9 @@ function checkPairHash() {
   history.replaceState(null, '', location.pathname + '#/sessions');
   state.route = { name: 'sessions' };
   const wantQr = new URLSearchParams(location.hash.replace(/^#/, '')).get('qr') === '1' || /[#&]qr=1\b/.test(hashAtStart);
-  addMachine(pair); render(); toast('Ordinador connectat');
+  render();
   // Quan nio obre el panell, el QR per al mòbil surt tot seguit, sense cap pestanya nova.
-  if (wantQr && !isPhone()) setTimeout(mobileQrSheet, 500);
+  pairAndAdd(pair, { after: () => { if (wantQr && !isPhone()) setTimeout(mobileQrSheet, 500); } });
   return true;
 }
 
@@ -310,6 +428,10 @@ function checkPairHash() {
 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' },
+  activitat: { label: 'Activitat', icon: ICON.activity, group: 'Feina' },
+  memoria: { label: 'Memòria', icon: ICON.memory, group: 'Ordinadors' },
+  pantalla: { label: 'Pantalla', icon: ICON.screen, group: 'Ordinadors' },
   ordinadors: { label: 'Ordinadors', icon: ICON.machine, group: 'Ordinadors' },
   models: { label: 'Models', icon: ICON.models, group: 'Ordinadors' },
   mobil: { label: 'Xat local', icon: ICON.phone, group: 'Eines' },
@@ -317,8 +439,8 @@ const VIEWS = {
   ajustos: { label: 'Ajustos', icon: ICON.settings, group: 'Compte' },
   ajuda: { label: 'Ajuda', icon: ICON.help, group: 'Compte' }
 };
-const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', ordinadors: '#/ordinadors', models: '#/models', mobil: '#/xat-local', pissarra: '#/pissarra', ajustos: '#/ajustos', ajuda: '#/ajuda' };
-const NEEDS_MACHINE = new Set(['sessions', 'approvals', 'models', 'session']);
+const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', feines: '#/feines', activitat: '#/activitat', memoria: '#/memoria', pantalla: '#/pantalla', ordinadors: '#/ordinadors', models: '#/models', mobil: '#/xat-local', pissarra: '#/pissarra', ajustos: '#/ajustos', ajuda: '#/ajuda' };
+const NEEDS_MACHINE = new Set(['sessions', 'approvals', 'feines', 'activitat', 'memoria', 'pantalla', 'models', 'session']);
 function parseRoute() {
   const h = location.hash.replace(/^#\/?/, '');
   if (h.startsWith('s/')) return { name: 'session', id: h.slice(2) };
@@ -339,6 +461,7 @@ function route() {
 
 /* ---------------------------------------------------------------- pintat general */
 function renderChrome() {
+  renderPanic();
   const r = state.route, n = state.approvals.size, active = r.name === 'session' ? 'sessions' : r.name;
   let prev = '';
   $('#nav').innerHTML = Object.entries(VIEWS).map(([k, v], i) => {
@@ -363,6 +486,7 @@ function renderChrome() {
 }
 function render() {
   const r = state.route, view = $('#view'), board = r.name === 'pissarra';
+  if (r.name !== 'sessions') manage = null;
   renderChrome();
   document.body.classList.toggle('board-mode', board);
   document.body.classList.toggle('chat-mode', r.name === 'session' || (r.name === 'mobil' && !!local.engine));
@@ -375,22 +499,44 @@ function render() {
   else if (board) { view.innerHTML = '<div class="page"><div class="board-root" id="boardRoot"></div></div>'; window.NioBoard?.mount($('#boardRoot')); brainsForBoard(); }
   else {
     const html = r.name === 'mobil' ? viewLocal() : null;
-    view.innerHTML = html && local.engine ? html : `<div class="page">${html ? html : r.name === 'ordinadors' ? viewComputers() : r.name === 'sessions' ? viewSessions() : r.name === 'approvals' ? viewApprovals() : r.name === 'ajustos' ? viewSettings() : r.name === 'ajuda' ? viewHelp() : viewModels()}</div>`;
+    view.innerHTML = html && local.engine ? html : `<div class="page">${html ? html : r.name === 'ordinadors' ? viewComputers() : r.name === 'sessions' ? viewSessions() : r.name === 'approvals' ? viewApprovals() : r.name === 'activitat' ? viewActivity() : r.name === 'feines' ? viewJobs() : r.name === 'memoria' ? viewMemory() : r.name === 'pantalla' ? viewScreen() : r.name === 'ajustos' ? viewSettings() : r.name === 'ajuda' ? viewHelp() : viewModels()}</div>`;
     if (r.name === 'mobil') bindLocal();
     if (r.name === 'models' && machine()) loadOllama();
+    if (r.name === 'activitat' && machine()) { activity = null; loadActivity(); }
+    if (r.name === 'memoria' && machine()) loadMemory();
+    if (r.name === 'pantalla' && machine()) loadScreen();
+    if (r.name === 'feines' && machine()) loadJobs();
+    hydrateShots();
   }
   if (changed && !board) { view.classList.remove('view-enter'); void view.offsetWidth; view.classList.add('view-enter'); }
   window.NioBot?.refresh();
   tourUpdate();
+  if (!board) setTimeout(focusMain, 60);
 }
 
 /* ---------- Ordinadors (llista, afegir i detall de l'actiu) */
 const deviceId = () => { let d = LS.get('nio.device', ''); if (!d) { d = Math.random().toString(36).slice(2, 12); LS.set('nio.device', d); } return d; };
 const isPhone = () => isTouch || matchMedia('(max-width: 820px)').matches;
 const cmdBox = (c) => `<div class="cmd big"><code>${esc(c)}</code><button class="btn sm" data-copy="${esc(c)}" type="button">${svg(ICON.copy)}Copia</button></div>`;
+// Estat de la resta d'ordinadors (el connectat ja té el seu flux en directe): una consulta lleugera.
+const reach = new Map();
+let reachAt = 0;
+async function probeAll(force) {
+  if (!force && Date.now() - reachAt < 20000) return;
+  reachAt = Date.now();
+  await Promise.all(store.machines.map(async (m, i) => {
+    if (i === store.active) return;
+    let ok = await fetch(`${m.url}/api/info`, { headers: { Authorization: `Bearer ${m.token}` }, cache: 'no-store', signal: AbortSignal.timeout(5000) }).then((r) => r.ok).catch(() => false);
+    if (!ok && (await relocate(i))) { reach.set(store.machines[i].url, true); return render(); }
+    if (reach.get(m.url) !== ok) { reach.set(m.url, ok); if (state.route.name === 'ordinadors') { const y = scrollY; render(); scrollTo(0, y); } }
+  }));
+}
+setInterval(() => { if (!document.hidden && state.route.name === 'ordinadors') probeAll(); }, 30000);
 function computerCard(m, i) {
   const on = i === store.active;
-  const st = on ? (state.connected ? '<span class="chip ok"><i class="dot on"></i>Connectat</span>' : `<span class="chip">${esc(state.lastError ? 'Sense connexió' : 'Connectant…')}</span>`) : '';
+  const pr = reach.get(m.url);
+  const st = on ? (state.connected ? '<span class="chip ok"><i class="dot on"></i>Connectat</span>' : `<span class="chip">${esc(state.lastError ? 'Sense connexió' : 'Connectant…')}</span>`)
+    : pr == null ? '' : pr ? '<span class="chip ok"><i class="dot on"></i>En línia</span>' : '<span class="chip"><i class="dot"></i>Fora de línia</span>';
   return `<div class="card computer ${on ? 'active' : ''}">
     <div class="row" style="flex-wrap:nowrap;gap:12px;align-items:flex-start"><span class="c-ico">${svg(machineIcon(m))}</span><div class="grow"><div class="row between"><b>${esc(m.name)}</b>${st}</div><div class="muted small">${esc(machineSub(m))}</div></div></div>
     <div class="row c-actions">${on ? `<button class="btn ink sm" data-act="open-sessions" type="button">Sessions</button>${isPhone() ? '' : `<button class="btn sm" data-act="mobile-qr" type="button">Continua al mòbil</button>`}` : `<button class="btn ink sm" data-machine="${i}" type="button">Obre</button>`}${m.kind === 'vps' && m.via && (!on || !state.connected) ? `<button class="btn sm" data-reconnect="${i}" type="button">Torna a connectar</button>` : ''}<button class="btn ghost sm" data-rename="${i}" type="button">Canvia el nom</button><button class="btn ghost sm" data-forget="${i}" type="button">Oblida</button></div>
@@ -408,10 +554,28 @@ function helpPanel(open) {
     ${q('D’on es gasta', `<p>nio no fa cap crida pel seu compte. Cada agent treballa a l’ordinador o al servidor amb el teu compte (Claude, Codex, Grok…). Ollama funciona al teu ordinador i no gasta res.</p>`)}
   </div></section>`;
 }
+let pushOn = null; // null: encara no ho sé
+async function refreshPush() {
+  let on = false;
+  try {
+    if ('serviceWorker' in navigator && 'PushManager' in window && Notification.permission === 'granted') {
+      const sub = await (await navigator.serviceWorker.ready).pushManager.getSubscription();
+      on = !!sub;
+      if (sub && state.connected) api('/api/push', { method: 'POST', body: sub.toJSON() }).catch(() => {});
+    }
+  } catch { /* sense avisos */ }
+  if (on !== pushOn) { pushOn = on; if (state.route.name === 'settings' || state.route.name === 'ajustos') render(); }
+}
+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();
+}
 function viewSettings() {
   const head = '<div class="top"><div><h1>Ajustos</h1><p>Avisos al mòbil i veu.</p></div></div>';
-  const avisos = machine() ? `<section class="panel"><header><h2>Avisos al mòbil</h2></header><div class="body stack"><p class="small">Rep un avís quan un agent et demana permís o acaba la feina.</p>${isIOS && !standalone ? '<p class="muted small">A l’iPhone, primer afegeix nio a la pantalla d’inici (Comparteix → Afegeix a la pantalla d’inici) i obre’l des d’allà.</p>' : ''}<div class="row"><button class="btn ink grow" data-act="push" type="button">Activa els avisos</button><button class="btn" data-act="push-test" type="button">Envia’n un de prova</button></div></div></section>` : '';
-  return `${head}<div class="stack-lg" style="max-width:640px">${avisos}${voicePanel()}</div>`;
+  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>`;
 }
 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>`;
@@ -430,8 +594,11 @@ function viewComputers() {
     <div class="stack">
       <section class="panel"><header><h2>Agents</h2><button class="btn sm ghost" data-act="refresh-agents" type="button">${svg(ICON.refresh)}Torna a detectar</button></header><div class="body">${info ? info.agents.map((a) => `<div class="agent-row"><i class="dot ${a.available ? 'on' : ''}"></i><div class="grow"><div class="row"><span class="agent-tag" data-agent="${esc(a.id)}">${esc(a.name)}</span>${a.beta ? '<span class="chip beta">beta</span>' : ''}</div><div class="muted small mono">${esc(a.available ? a.version || 'Disponible' : a.login)}</div></div></div>`).join('') : '<p class="muted">Carregant…</p>'}</div></section>
       ${info ? `<section class="panel"><header><h2>Sistema</h2></header><div class="body"><dl class="kv"><dt>Sistema</dt><dd>${esc(info.platform)} · ${esc(info.user)}</dd><dt>Versió de nio</dt><dd>${esc(info.version)}</dd></dl></div></section>` : ''}
+      ${info?.device ? `<section class="panel"><header><h2>Dispositius amb accés</h2></header><div class="body stack" id="devList">${devicesHtml(devCache.get(m.url))}</div></section>` : ''}
     </div>
   </div>` : '';
+  if (detail && info?.device) loadDevices();
+  if (ms.length > 1) probeAll();
   return `${head}<div class="computers">${ms.map(computerCard).join('')}</div>${detail}`;
 }
 
@@ -534,7 +701,7 @@ function addComputerSheet(tab, opts = {}) {
       if (e.target.closest('[data-close]')) { stop(); return closeSheet(); }
       if (e.target.closest('[data-scan]')) {
         const v = $('#scanVideo', sh); v.hidden = false;
-        try { scan = await startScan(v, (text) => { const pair = pairFrom(text); if (pair) { stop(); closeSheet(); addMachine(pair); toast('Connectant…'); go('#/sessions'); } }); }
+        try { scan = await startScan(v, (text) => { const pair = pairFrom(text); if (pair) { stop(); closeSheet(); toast('Connectant…'); pairAndAdd(pair); go('#/sessions'); } }); }
         catch { v.hidden = true; toast('No puc obrir la càmera. Escriu el codi.'); }
       }
     };
@@ -556,7 +723,7 @@ function renameSheet(i) {
   const m = store.machines[i]; if (!m) return;
   openSheet(`<h2>Canvia el nom</h2><p class="muted small">Només el veus tu, en aquest dispositiu. L’ordinador es continua dient «${esc(m.name)}» a la resta.</p>
     <form class="field-row" id="renameForm"><input type="text" id="renameIn" value="${esc(m.name)}" maxlength="40" autocomplete="off" spellcheck="false" required aria-label="Nom de l’ordinador"><button class="btn ink" type="submit">Desa</button></form>`, (sh) => {
-    const inp = $('#renameIn', sh); setTimeout(() => { inp.focus(); inp.select(); }, 60);
+    const inp = $('#renameIn', sh); if (!isTouch) setTimeout(() => { inp.focus(); inp.select(); }, 60);
     $('#renameForm', sh).onsubmit = (e) => {
       e.preventDefault(); e.stopPropagation();
       const v = inp.value.trim(); if (!v) return;
@@ -577,25 +744,236 @@ function stateChip(s) {
   if (s.state === 'error') return '<span class="chip error">Error</span>';
   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 manageBar = (list) => {
+  const n = manage.size, cost = list.filter((s) => manage.has(s.id)).reduce((t, s) => t + (s.cost || 0), 0);
+  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>`;
+};
+function manageSelect(kind) {
+  const list = [...state.sessions.values()], now = Date.now();
+  const f = { all: () => true, none: () => false, idle: (x) => x.state === 'idle' && !x.pending, old: (x) => now - x.updated > 30 * DAY && x.state !== 'running', err: (x) => x.state === 'error' }[kind];
+  manage = new Set(list.filter(f).map((x) => x.id)); render();
+}
+async function manageDelete() {
+  const ids = [...manage]; if (!ids.length) return;
+  const run = ids.filter((id) => ['running', 'waiting'].includes(state.sessions.get(id)?.state)).length;
+  if (!confirm(`S’esborraran ${ids.length} converses${run ? ` (${run} encara treballen i s’aturaran)` : ''}. Els fitxers dels projectes no es toquen.`)) return;
+  let fail = 0;
+  await Promise.all(ids.map((id) => api(`/api/sessions/${id}`, { method: 'DELETE' }).then(() => handle({ type: 'removed', session: id })).catch(() => { fail++; })));
+  manage = fail ? new Set(ids.filter((id) => state.sessions.has(id))) : null;
+  toast(fail ? `No he pogut esborrar ${fail} sessions` : `${ids.length} sessions esborrades`); render();
+}
 function viewSessions() {
   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>` : '';
   const hint = mobileHint();
-  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><button class="btn ink new-fab" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button></div>${hint}`;
+  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>`;
   }
+  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) => `
-    <a class="card session-card" href="#/s/${esc(s.id)}">
+    <${manage ? 'div role="checkbox" tabindex="0" aria-checked="' + manage.has(s.id) + '" data-pick="' + esc(s.id) + '"' : 'a href="#/s/' + esc(s.id) + '"'} class="card session-card ${manage ? 'pick-mode' : ''} ${manage?.has(s.id) ? 'picked' : ''}">
       <div class="row between"><span class="agent-tag nosq" data-agent="${esc(s.agent)}">${agentBot(s.agent, sessionMood(s))}${esc(AGENT_NAMES[s.agent] || s.agent)}</span>${stateChip(s)}</div>
       <div class="title">${esc(s.title || 'Sessió nova')}</div>
       ${s.state === 'error' && s.error ? `<div class="last err">${esc(s.error)}</div>` : s.last ? `<div class="last">${esc(s.last)}</div>` : ''}
-      <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>
-    </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>`}`;
+      <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>`}`;
 }
 
 /* ---------- Aprovacions */
+/* ---------- Dispositius amb accés */
+const devCache = new Map(); // adreça de l'ordinador -> llista
+let devLoadAt = 0;
+function devicesHtml(devs) {
+  if (!devs) return '<p class="muted small">Carregant…</p>';
+  return devs.map((d) => `<div class="agent-row"><span class="grow"><div class="row"><b>${esc(d.name)}</b>${d.current ? '<span class="chip">aquest</span>' : ''}</div><div class="muted small">${d.primary ? 'La fa servir el panell que obre nio i «nio ssh». Es canvia amb nio reset-token.' : `${d.lastSeen ? `Vist ${ago(d.lastSeen)}` : 'Encara no s’ha connectat'} · aparellat ${new Date(d.created).toLocaleDateString('ca')}`}</div></span>${d.primary ? '' : `<button class="btn sm danger" data-act="revoke" data-dev="${esc(d.id)}" type="button">${d.current ? 'Desconnecta' : 'Revoca'}</button>`}</div>`).join('') + '<p class="muted small">Revocar un dispositiu li treu l’accés a l’instant. Cada mòbil que s’aparella amb un codi en té un de propi.</p>';
+}
+async function loadDevices(force) {
+  const m = machine(); if (!m || (!force && Date.now() - devLoadAt < 10000)) return;
+  devLoadAt = Date.now();
+  try { devCache.set(m.url, await api('/api/devices')); } catch { devCache.set(m.url, []); }
+  const box = $('#devList'); if (box) box.innerHTML = devicesHtml(devCache.get(m.url));
+}
+async function revokeDevice(id) {
+  const m = machine(), d = devCache.get(m?.url)?.find((x) => x.id === id);
+  if (!m || !confirm(d?.current ? 'Aquest dispositiu deixarà de tenir accés a aquest ordinador.' : `«${d?.name || 'Aquest dispositiu'}» deixarà de tenir accés a aquest ordinador a l’instant.`)) return;
+  try {
+    await api(`/api/devices/${id}`, { method: 'DELETE' }); toast('Accés revocat');
+    if (d?.current) return forgetMachine(store.active);
+    loadDevices(true);
+  } catch (e) { toast(e.message); }
+}
+
+/* ---------- Activitat: registre d'accions de l'ordinador (què, per què, quan i qui) */
+let activity = null, actFilter = 'tot';
+const ACT_FILTERS = { tot: 'Tot', approval: 'Aprovacions', tool: 'Eines', job: 'Feines', device: 'Dispositius' };
+function viewActivity() {
+  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>`;
+}
+function activityHtml() {
+  if (!activity) return `<div class="panel empty">${bot('work')}<h2>Carregant…</h2></div>`;
+  const list = activity.filter((e) => actFilter === 'tot' || e.type === actFilter);
+  if (!list.length) return `<div class="panel empty">${bot('idle')}<h2>Encara no hi ha res</h2><p>Quan els agents treballin, aquí en veuràs cada pas.</p></div>`;
+  const VERD = { allowed: '<span class="verdict allowed">✓ Aprovat</span>', denied: '<span class="verdict denied">✕ Rebutjat</span>' };
+  let day = '';
+  return `<div class="act">${list.map((e) => {
+    const d = new Date(e.t).toLocaleDateString('ca', { weekday: 'long', day: 'numeric', month: 'long' });
+    const head = d !== day ? `<div class="act-day">${esc((day = d))}</div>` : '';
+    const when = new Date(e.t).toLocaleTimeString('ca', { hour: '2-digit', minute: '2-digit' });
+    const who = e.type === 'approval' ? `${VERD[e.decision] || ''} <span class="muted small">per ${esc(e.by || '—')}</span>` : e.type === 'tool' ? `<span class="muted small">${esc(MODES[e.mode]?.label || e.mode || '')}</span>` : e.by ? `<span class="muted small">${esc(e.by)}</span>` : '';
+    return `${head}<div class="act-row act-${esc(e.type)}"><span class="act-t mono">${when}</span><div class="grow"><div class="row">${e.agent ? `<span class="agent-tag" data-agent="${esc(e.agent)}">${esc(AGENT_NAMES[e.agent] || e.agent)}</span>` : ''}${e.tool ? `<b>${esc(e.tool)}</b>` : ''}${who}</div><div class="mono small act-what">${esc(e.what || '')}</div>${e.why ? `<div class="muted small">Motiu: ${esc(e.why)}</div>` : ''}${e.session ? `<a class="muted small" href="#/s/${esc(e.session)}">${esc(e.title || 'Obre la sessió')}</a>` : ''}</div></div>`;
+  }).join('')}</div>`;
+}
+async function loadActivity() {
+  try { activity = await api('/api/audit?limit=300'); } catch (e) { activity = []; toast(e.message); }
+  const box = $('#actList'); if (box) box.innerHTML = activityHtml();
+}
+
+/* ---------- 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>
+    <form class="row mem-search" id="memSearch" style="flex-wrap:nowrap"><input type="search" id="memQ" placeholder="Busca a la memòria…" aria-label="Busca a la memòria"><button class="btn" type="submit">Busca</button></form>
+    <div id="memBody">${memHtml()}</div>`;
+}
+function memHtml() {
+  if (!mem) return `<div class="panel empty">${bot('work')}<h2>Carregant…</h2></div>`;
+  if (mem.error) return `<div class="panel empty">${bot('sleep')}<h2>${esc(mem.error)}</h2><p>Cal nio 0.6 o més nou en aquest ordinador.</p></div>`;
+  if (mem.hits) return `<div class="list">${mem.hits.length ? mem.hits.map((h) => `<button class="card" type="button" data-mem="${esc(h.path)}"><b class="mono small">${esc(h.path)}:${h.line}</b><div class="muted small">${esc(h.text)}</div></button>`).join('') : '<p class="muted">Cap resultat.</p>'}<button class="btn ghost" data-act="mem-all" type="button">Mostra tots els fitxers</button></div>`;
+  const groups = {};
+  for (const f of mem.files) (groups[f.path.includes('/') ? f.path.split('/')[0] : ''] ||= []).push(f);
+  return Object.entries(groups).map(([g, fs]) => `${g ? `<div class="section-title">${esc(g)}</div>` : ''}<div class="list">${fs.map((f) => `<button class="card row" type="button" data-mem="${esc(f.path)}" style="flex-wrap:nowrap"><span class="grow"><b>${esc(f.path.split('/').pop().replace(/\.md$/, ''))}</b><div class="muted small">${ago(f.updated)} · ${bytes(f.size)}</div></span></button>`).join('')}</div>`).join('') || '<p class="muted">La memòria és buida.</p>';
+}
+async function loadMemory() {
+  try { mem = await api('/api/memory'); } catch (e) { mem = { error: e.message }; }
+  const box = $('#memBody'); if (box) box.innerHTML = memHtml();
+}
+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>'}
+    <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 () => {
+      const path = p || $('#memPath', sh).value.trim();
+      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); }
+    };
+    if (p) $('#memDel', sh).onclick = async () => {
+      if (!confirm(`S’esborrarà «${p}» de la memòria. Els agents ja no ho recordaran.`)) return;
+      try { await api(`/api/memory/f/${encodeURIComponent(p)}`, { method: 'DELETE' }); toast('Esborrat'); closeSheet(); loadMemory(); } catch (e) { toast(e.message); }
+    };
+  });
+}
+document.addEventListener('click', (e) => { const b = e.target.closest('[data-mem]'); if (b) memEdit(b.dataset.mem); });
+document.addEventListener('submit', async (e) => {
+  if (e.target.id !== 'memSearch') return;
+  e.preventDefault(); const q = $('#memQ').value.trim(); if (!q) return loadMemory();
+  try { mem = { ...(mem || {}), hits: await api(`/api/memory/search?q=${encodeURIComponent(q)}`) }; } catch (err) { toast(err.message); }
+  $('#memBody').innerHTML = memHtml();
+});
+
+/* ---------- Feines: cua, cadenes i programació (l'orquestrador viu a l'ordinador) */
+let jobsData = null;
+const JOB_CHIP = { pendent: '', 'en curs': 'running', feta: 'ok', fallada: 'error', 'cancel·lada': '', programada: 'waiting' };
+const CRON_PRESETS = [['', 'Només una vegada'], ['0 9 * * *', 'Cada dia a les 9'], ['0 9 * * 1-5', 'Dies feiners a les 9'], ['0 * * * *', 'Cada hora'], ['0 8 * * 1', 'Cada dilluns a les 8'], ['custom', 'Personalitzada (cron)…']];
+function jobWhen(j) {
+  if (j.state === 'programada') return `${CRON_PRESETS.find(([c]) => c === j.cron)?.[1] || `cron ${j.cron}`} · propera ${j.runAt ? new Date(j.runAt).toLocaleString('ca', { weekday: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '—'}`;
+  if (j.state === 'pendent' && j.runAt && j.runAt > Date.now()) return `Començarà ${new Date(j.runAt).toLocaleString('ca', { weekday: 'short', day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}`;
+  if (j.state === 'pendent' && j.after) return `Quan acabi «${jobsData?.jobs.find((x) => x.id === j.after)?.title || 'la feina anterior'}»`;
+  if (j.finished) return ago(j.finished);
+  return j.started ? `Des de ${ago(j.started)}` : 'A la cua';
+}
+function jobCard(j) {
+  const live = j.state === 'en curs' || j.state === 'pendent' || j.state === 'programada';
+  return `<div class="card job" data-job="${esc(j.id)}">
+    <div class="row between"><span class="row"><span class="agent-tag" data-agent="${esc(j.agent)}">${esc(AGENT_NAMES[j.agent] || j.agent)}</span>${j.after ? '<span class="chip">encadenada</span>' : ''}${j.rule ? `<span class="chip" title="Regla d’encaminament">regla</span>` : ''}</span><span class="chip ${JOB_CHIP[j.state] || ''}">${j.state === 'en curs' ? '<i class="pulse"></i>' : ''}${esc(j.state)}</span></div>
+    <div class="title">${esc(j.title)}</div>
+    <div class="meta"><span class="mono">${esc(basename(j.cwd))}</span><span>·</span><span>${esc(MODES[j.mode]?.label || '')}</span><span>·</span><span>${esc(jobWhen(j))}</span></div>
+    ${j.error && j.state !== 'feta' ? `<div class="muted small" style="margin-top:6px">${esc(j.error)}</div>` : ''}
+    <div class="row" style="margin-top:10px">${j.session ? `<a class="btn sm" href="#/s/${esc(j.session)}">Obre la sessió</a>` : ''}${j.state === 'pendent' || j.state === 'programada' ? `<button class="btn sm" data-job-act="run" type="button">${j.state === 'programada' ? 'Executa ara' : 'Comença ja'}</button>` : ''}${live ? `<button class="btn sm ghost" data-job-act="cancel" type="button">${j.state === 'programada' ? 'Atura la programació' : 'Cancel·la'}</button>` : `<button class="btn sm ghost" data-job-act="del" type="button">Treu de la llista</button>`}</div>
+  </div>`;
+}
+function viewJobs() {
+  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>`;
+}
+function jobsHtml() {
+  if (jobsData.error) return `<div class="panel empty">${bot('sleep')}<h2>${esc(jobsData.error)}</h2><p>Cal nio 0.6 o més nou en aquest ordinador.</p></div>`;
+  const js = jobsData.jobs, sched = js.filter((j) => j.state === 'programada'), act = js.filter((j) => j.state === 'en curs' || j.state === 'pendent'), done = js.filter((j) => !['programada', 'en curs', 'pendent'].includes(j.state)).slice(0, 30);
+  const sec = (t, l) => (l.length ? `<div class="section-title">${t}</div><div class="list">${l.map(jobCard).join('')}</div>` : '');
+  return (sec('En marxa i a la cua', act) + sec('Programades', sched) + sec('Acabades', done)) || `<div class="panel empty">${bot('idle')}<h2>Encara no hi ha cap feina</h2><p>Per exemple: «Cada dia feiner a les 9, revisa les issues noves i fes-me’n un resum».</p><button class="btn ink" data-act="job-new" type="button">${svg(ICON.plus)}Nova feina</button></div>`;
+}
+async function loadJobs() {
+  try { jobsData = await api('/api/jobs'); } catch (e) { jobsData = { error: e.message, jobs: [] }; }
+  const box = $('#jobsBody'); if (box) box.innerHTML = jobsHtml();
+}
+function onJob(msg) {
+  if (!jobsData || jobsData.error) return;
+  if (msg.removed) jobsData.jobs = jobsData.jobs.filter((j) => j.id !== msg.removed);
+  else { const i = jobsData.jobs.findIndex((j) => j.id === msg.job.id); if (i >= 0) jobsData.jobs[i] = msg.job; else jobsData.jobs.unshift(msg.job); }
+  const box = $('#jobsBody'); if (box) box.innerHTML = jobsHtml();
+}
+async function newJobSheet() {
+  let projects = [];
+  try { projects = await api('/api/projects'); } catch (e) { return toast(e.message); }
+  const agents = (state.info?.agents || []).filter((a) => a.available && ['claude', 'codex'].includes(a.id));
+  const prev = (jobsData?.jobs || []).filter((j) => ['pendent', 'en curs', 'feta'].includes(j.state)).slice(0, 15);
+  const sel = { agent: 'auto', mode: 'preguntar', when: 'ara' };
+  openSheet(`<h2>Nova feina</h2>
+    <label class="f"><span>Què ha de fer?</span><textarea class="field" id="jobPrompt" rows="3" placeholder="Per exemple: revisa les issues noves i fes-me’n un resum"></textarea></label>
+    <div class="grid-2"><label class="f"><span>Agent</span><select id="jobAgent"><option value="auto">Automàtic (regles)</option>${agents.map((a) => `<option value="${a.id}">${esc(a.name)}</option>`).join('')}</select></label>
+    <label class="f"><span>Carpeta</span><select id="jobCwd">${projects.map((p) => `<option value="${esc(p.path)}">${esc(p.name)}</option>`).join('')}</select></label></div>
+    <div class="stack"><div class="section-title" style="margin:0">Permisos</div><div class="seg" id="jobMode" role="group">${Object.entries(MODES).map(([k, m]) => `<button type="button" data-jmode="${k}" aria-pressed="${k === sel.mode}">${m.label}</button>`).join('')}</div></div>
+    <div class="grid-2"><label class="f"><span>Quan</span><select id="jobWhen"><option value="ara">Ara</option><option value="mes">Més tard…</option>${prev.length ? '<option value="after">Quan acabi una altra feina…</option>' : ''}<option value="cron">Periòdicament…</option></select></label>
+    <div id="jobWhenX"></div></div>
+    ${agents.some((a) => a.id === 'codex') ? '<label class="row check"><input type="checkbox" id="jobReview"> <span>Quan acabi, que Codex revisi els canvis</span></label>' : ''}
+    <div class="row between sheet-foot"><button class="btn ghost" type="button" data-close>Cancel·la</button><button class="btn ink" id="jobGo" type="button">Posa-la a la cua</button></div>`, (sh) => {
+    const x = $('#jobWhenX', sh);
+    $('#jobWhen', sh).onchange = (e) => {
+      sel.when = e.target.value;
+      x.innerHTML = sel.when === 'mes' ? '<label class="f"><span>Dia i hora</span><input type="datetime-local" id="jobAt"></label>'
+        : sel.when === 'after' ? `<label class="f"><span>Després de</span><select id="jobAfter">${prev.map((j) => `<option value="${esc(j.id)}">${esc(j.title)} (${esc(j.state)})</option>`).join('')}</select></label>`
+        : sel.when === 'cron' ? `<label class="f"><span>Cada quan</span><select id="jobCron">${CRON_PRESETS.slice(1).map(([c, l]) => `<option value="${c}">${l}</option>`).join('')}</select></label><input type="text" id="jobCronX" placeholder="min hora dia mes dia-setmana" hidden autocapitalize="off" spellcheck="false" class="mono">` : '';
+      const c = $('#jobCron', sh); if (c) c.onchange = () => ($('#jobCronX', sh).hidden = c.value !== 'custom');
+    };
+    sh.addEventListener('click', (e) => { const m = e.target.closest('[data-jmode]'); if (m) { sel.mode = m.dataset.jmode; $$('[data-jmode]', sh).forEach((b) => b.setAttribute('aria-pressed', b.dataset.jmode === sel.mode)); } if (e.target.closest('[data-close]')) closeSheet(); });
+    $('#jobGo', sh).onclick = async () => {
+      const prompt = $('#jobPrompt', sh).value.trim(); if (!prompt) return toast('Explica què ha de fer la feina');
+      const body = { prompt, agent: $('#jobAgent', sh).value, cwd: $('#jobCwd', sh).value, mode: sel.mode };
+      if (sel.when === 'mes') { const v = $('#jobAt', sh)?.value; if (!v) return toast('Tria el dia i l’hora'); body.at = new Date(v).getTime(); }
+      if (sel.when === 'after') body.after = $('#jobAfter', sh).value;
+      if (sel.when === 'cron') body.cron = $('#jobCron', sh).value === 'custom' ? $('#jobCronX', sh).value.trim() : $('#jobCron', sh).value;
+      $('#jobGo', sh).disabled = true;
+      try {
+        const j = await api('/api/jobs', { method: 'POST', body });
+        if ($('#jobReview', sh)?.checked) await api('/api/jobs', { method: 'POST', body: { agent: 'codex', cwd: j.cwd, mode: 'llegir', after: j.id, title: `Revisió: ${j.title}`, prompt: 'Revisa els canvis que s’acaben de fer en aquesta carpeta (git diff i fitxers nous). Explica què està bé, què es pot millorar i si hi ha cap error. Context de la feina anterior:\n\n{{anterior}}' } });
+        closeSheet(); toast(body.cron ? 'Feina programada' : 'Feina a la cua'); loadJobs();
+      } catch (e) { toast(e.message, 4200); $('#jobGo', sh).disabled = false; }
+    };
+    if (!isTouch) setTimeout(() => $('#jobPrompt', sh)?.focus(), 80);
+  });
+}
+document.addEventListener('click', async (e) => {
+  const b = e.target.closest('[data-job-act]'); if (!b) return;
+  const id = b.closest('[data-job]').dataset.job, act = b.dataset.jobAct;
+  try {
+    if (act === 'run') await api(`/api/jobs/${id}/run`, { method: 'POST' });
+    if (act === 'cancel') await api(`/api/jobs/${id}/cancel`, { method: 'POST' });
+    if (act === 'del') await api(`/api/jobs/${id}`, { method: 'DELETE' });
+    loadJobs();
+  } catch (err) { toast(err.message); }
+});
+
 function approvalCard(a, showSession = true) {
   const decided = a.state && a.state !== 'pending';
   if (decided && !showSession) {
@@ -607,13 +985,15 @@ function approvalCard(a, showSession = true) {
     ${showSession ? `<div class="row between"><span class="agent-tag" data-agent="${esc(a.agent)}">${esc(AGENT_NAMES[a.agent] || a.agent)}</span><a class="btn sm" href="#/s/${esc(a.session)}">Obre la sessió</a></div>${a.title ? `<div class="muted small">${esc(a.title)}</div>` : ''}` : ''}
     <div class="q">Vol fer servir <span class="mono">${esc(a.tool)}</span></div>
     <pre>${esc(prettyInput(a.input))}</pre>
+    ${a.reason ? `<div class="why"><span class="muted small">Motiu</span><p>${esc(a.reason)}</p></div>` : ''}
+    ${a.shot ? `<img class="shot" alt="Captura de la pantalla quan ho ha demanat" data-shot="${esc(a.shot)}">` : ''}
     ${decided ? `<div class="verdict ${esc(a.state)}">${a.state === 'allowed' ? '✓ Ho has aprovat' : '✕ Ho has rebutjat'}</div>` : '<div class="actions"><button class="btn danger" data-decide="deny" type="button">Rebutja</button><button class="btn ok" data-decide="allow" type="button">Aprova</button></div>'}
   </div>`;
 }
 function viewApprovals() {
   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>
-    ${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>`}`;
+    ${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>`}`;
 }
 // Marca una aprovació com a resolta a tot arreu: a la llista, a la conversa i a l'esdeveniment desat.
 function markDecided(id, st) {
@@ -663,10 +1043,10 @@ function renderSession() {
   feedEls = new Map(); toolEls = new Map();
   renderSessionHead();
   const feed = $('#feed'), evs = state.events.get(id);
-  if (!evs) feed.innerHTML = `<div class="ev-info">${machine() ? 'Carregant la conversa…' : 'Connecta un ordinador per veure aquesta sessió.'}</div>`;
+  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>`;
   else for (const e of [...evs.values()].sort((a, b) => a.seq - b.seq)) putEvent(e, false);
   renderTyping(); renderComposer();
-  requestAnimationFrame(() => (feed.scrollTop = feed.scrollHeight));
+  requestAnimationFrame(() => toBottom(feed));
 }
 function sessionMood(s) { return !s ? 'idle' : s.state === 'running' ? 'work' : s.state === 'waiting' || s.pending ? 'peek' : s.state === 'error' ? 'sleep' : 'idle'; }
 function renderSessionHead() {
@@ -679,10 +1059,10 @@ function renderSessionHead() {
   if (!s) { bar.innerHTML = ''; return; }
   const ag = state.info?.agents?.find((a) => a.id === s.agent);
   bar.innerHTML = `<span class="chip"><span class="agent-tag nosq" data-agent="${esc(s.agent)}">${agentBot(s.agent, sessionMood(s))}${esc(AGENT_NAMES[s.agent] || s.agent)}</span></span>
-    ${ag?.noModes ? '' : `<button class="chip" data-act="mode" type="button">${esc(MODES[s.mode]?.label || s.mode)}</button>`}
-    <button class="chip mono" data-act="folder" type="button" title="${esc(s.cwd)} · canvia de carpeta">${esc(basename(s.cwd))}</button>
-    <button class="chip mono" data-act="model" type="button" title="Canvia de model">${esc(s.model || 'Model per defecte')}</button>
-    ${s.cost ? `<span class="chip mono">${s.cost.toFixed(2)} $</span>` : ''}
+    ${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>` : ''}
     ${stateChip(s)}`;
 }
 // Alçada del camp de text segons el contingut, sense barra de desplaçament fins al límit.
@@ -692,7 +1072,10 @@ function autogrow(ta, max = 180) {
   ta.style.height = `${Math.min(h, max)}px`;
   ta.style.overflowY = h > max ? 'auto' : 'hidden';
 }
-const nearBottom = (f) => f.scrollHeight - f.scrollTop - f.clientHeight < 140;
+// Al mòbil fa scroll el document sencer; a l'escriptori, la conversa té el seu propi espai.
+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; };
 function putEvent(e, scroll = true) {
   const feed = $('#feed'); if (!feed) return;
   const stick = nearBottom(feed);
@@ -716,7 +1099,7 @@ function putEvent(e, scroll = true) {
   feedEls.set(e.seq, node);
   if (e.kind === 'tool') toolEls.set(e.id, node);
   renderTyping();
-  if (scroll && stick) feed.scrollTop = feed.scrollHeight;
+  if (scroll && stick) toBottom(feed);
 }
 function eventNode(e) {
   const s = state.sessions.get(state.route.id);
@@ -789,11 +1172,24 @@ async function runCmd(s, name, arg) {
     case 'ajuda': return helpCmdsSheet(s);
   }
 }
+const folderKey = (k) => `nio.${k}.${machine()?.id || machine()?.url}`;
+const getFavs = () => LS.get(folderKey('favs'), []);
+function toggleFav(p) { const f = getFavs(), n = f.includes(p) ? f.filter((x) => x !== p) : [p, ...f]; LS.set(folderKey('favs'), n); return n.includes(p); }
+function rememberFolder(p) { const l = LS.get(folderKey('last'), {}); LS.set(folderKey('last'), { ...l, cwd: p, recent: [p, ...(l.recent || []).filter((x) => x !== p)].slice(0, 6) }); }
+// Última utilitzada, preferides i recents, sense repeticions.
+function quickFolders(extra = []) {
+  const l = LS.get(folderKey('last'), {}), favs = getFavs(), seen = new Set(), out = [];
+  const add = (path, tag) => { if (path && !seen.has(path)) { seen.add(path); out.push({ path, name: basename(path), tag }); } };
+  add(l.cwd, 'last'); favs.forEach((p) => add(p, 'fav')); (l.recent || []).forEach((p) => add(p)); extra.forEach((p) => add(p.path));
+  return out;
+}
+const folderChip = (f) => `<button type="button" class="chip ${f.tag === 'fav' ? 'fav' : ''}" data-fs="${esc(f.path)}" title="${esc(f.path)}">${f.tag === 'fav' ? '★ ' : f.tag === 'last' ? '↺ ' : ''}${esc(f.name)}</button>`;
+const favBtn = (p) => `<button class="chip" type="button" data-fav aria-pressed="${getFavs().includes(p)}">${getFavs().includes(p) ? '★ Preferida' : '☆ Desa com a preferida'}</button>`;
 function folderSheet(s) {
   let d = null;
   const draw = () => {
     const crumbs = d ? d.path.split(/[\\/]/).filter(Boolean) : [];
-    $('#fsBody').innerHTML = !d ? '<p class="muted small">Carregant…</p>' : `<div class="fs-bar"><button class="icon-btn" type="button" data-fs="${esc(d.parent || '')}" ${d.parent ? '' : 'disabled'} aria-label="Carpeta de dalt">${svg(ICON.back)}</button><button class="chip" type="button" data-fs="${esc(d.home)}">Inici</button><span class="fs-path mono small" title="${esc(d.path)}">${esc(crumbs.slice(-2).join(' / ') || '/')}</span></div>
+    $('#fsBody').innerHTML = !d ? '<p class="muted small">Carregant…</p>' : `<div class="row">${favBtn(d.path)}${quickFolders().slice(0, 8).map(folderChip).join('')}</div><div class="fs-bar"><button class="icon-btn" type="button" data-fs="${esc(d.parent || '')}" ${d.parent ? '' : 'disabled'} aria-label="Carpeta de dalt">${svg(ICON.back)}</button><button class="chip" type="button" data-fs="${esc(d.home)}">Inici</button><span class="fs-path mono small" title="${esc(d.path)}">${esc(crumbs.slice(-2).join(' / ') || '/')}</span></div>
       <div class="proj-list fs-list">${d.dirs.map((x) => `<button type="button" class="proj" data-fs="${esc(x.path)}"><span class="ic">›</span><span class="grow"><div ${x.hidden ? 'class="muted"' : ''}>${esc(x.name)}</div></span></button>`).join('') || '<p class="muted small">No hi ha subcarpetes. Pots triar aquesta.</p>'}</div>`;
     const ok = $('#fsOk'); if (ok) { ok.disabled = !d || d.path === s.cwd; ok.textContent = d && d.path === s.cwd ? 'Ja hi és' : 'Treballa aquí'; }
   };
@@ -802,8 +1198,9 @@ function folderSheet(s) {
     sh.onclick = async (e) => {
       if (e.target.closest('[data-close]')) return closeSheet();
       const f = e.target.closest('[data-fs]'); if (f && !f.disabled) return go(f.dataset.fs);
+      if (e.target.closest('[data-fav]') && d) { toggleFav(d.path); return draw(); }
       if (e.target.closest('#fsOk') && d) {
-        try { const sum = await api(`/api/sessions/${s.id}`, { method: 'PATCH', body: { cwd: d.path } }); state.sessions.set(s.id, sum); closeSheet(); renderSessionHead(); cmdCache.delete(s.id); toast(`Carpeta: ${basename(sum.cwd)}`); } catch (er) { toast(er.message, 4200); }
+        try { const sum = await api(`/api/sessions/${s.id}`, { method: 'PATCH', body: { cwd: d.path } }); state.sessions.set(s.id, sum); rememberFolder(sum.cwd); closeSheet(); renderSessionHead(); cmdCache.delete(s.id); toast(`Carpeta: ${basename(sum.cwd)}`); } catch (er) { toast(er.message, 4200); }
       }
     };
     draw(); go(s.cwd);
@@ -828,10 +1225,11 @@ function renderComposer() {
   const box = $('#composer'); if (!box) return;
   const s = state.sessions.get(state.route.id), busy = !!s && (s.state === 'running' || s.state === 'waiting');
   const prev = $('textarea', box)?.value || '';
-  if (box.dataset.busy === String(busy) && $('textarea', box)) return;
-  box.dataset.busy = String(busy);
+  const waiting = s?.state === 'waiting';
+  if (box.dataset.busy === String(busy) + waiting && $('textarea', box)) return;
+  box.dataset.busy = String(busy) + waiting;
   if (s) loadCmds(s.id).then(() => { if (state.route.id === s.id) drawSlash(); });
-  box.innerHTML = `<div class="slash" id="slash" role="listbox" hidden></div><div class="inner"><textarea rows="1" id="msg" placeholder="${busy ? 'L’agent està treballant…' : 'Escriu a l’agent…'}" enterkeyhint="send" aria-label="Missatge" aria-controls="slash"></textarea><button class="mic" id="micBtn" type="button" data-mic aria-label="Dicta amb el micròfon">${svg(ICON.mic)}</button><button class="send ${busy ? 'stop' : ''}" id="sendBtn" type="button" aria-label="${busy ? 'Atura l’agent' : 'Envia'}">${svg(busy ? ICON.stop : ICON.send)}</button></div>`;
+  box.innerHTML = `<div class="slash" id="slash" role="listbox" hidden></div><div class="inner"><textarea rows="1" id="msg" placeholder="${waiting ? 'Esperant que aprovis o rebutgis…' : busy ? 'L’agent està treballant…' : 'Escriu a l’agent…'}" enterkeyhint="send" aria-label="Missatge" aria-controls="slash"></textarea><button class="mic" id="micBtn" type="button" data-mic aria-label="Dicta amb el micròfon">${svg(ICON.mic)}</button><button class="send ${busy ? 'stop' : ''}" id="sendBtn" type="button" aria-label="${busy ? 'Atura l’agent' : 'Envia'}">${svg(busy ? ICON.stop : ICON.send)}</button></div>`;
   const ta = $('#msg'); ta.value = prev;
   const grow = () => autogrow(ta);
   let items = [], sel = 0;
@@ -877,11 +1275,22 @@ 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}`;
-  if (!d.open) d.showModal(); raiseToasts(); if (T.on) $('#tour').hidden = true;
+  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 closeSheet = () => { const d = $('#sheet'); if (d.open) d.close(); };
+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.
+function focusIn(root) { if (isTouch || !root) return; const t = root.querySelector('textarea:not([disabled]), input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([disabled])'); if (t && document.activeElement !== t) { t.focus({ preventScroll: true }); if (t.select && t.tagName === 'INPUT' && t.value && /^(text|search)$/.test(t.type)) { /* sense seleccionar: el cursor al final */ const n = t.value.length; try { t.setSelectionRange(n, n); } catch { /* res */ } } } }
+function focusMain() {
+  if (isTouch || $('#sheet')?.open || $('#palette')?.open) return;
+  const r = state.route.name;
+  if (r === 'session') $('#msg')?.focus({ preventScroll: true });
+  else if (r === 'mobil' && local.engine) $('#lmsg')?.focus({ preventScroll: true });
+  else if (r === 'models') $('#pullIn')?.focus({ preventScroll: true });
+}
 $('#sheet').addEventListener('click', (e) => { if (e.target.id === 'sheet') closeSheet(); });
+$('#sheet').addEventListener('close', () => setTimeout(focusMain, 0));
 
 // 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';
@@ -959,10 +1368,10 @@ async function newSessionSheet(preset = {}) {
       () => `<p class="wiz-q">Quin agent vols fer servir?</p><div class="picker">${[...agents].sort((x, y) => (y.available ? 1 : 0) - (x.available ? 1 : 0)).map((a) => `<button type="button" class="pick ${a.available ? '' : 'off'}" data-agent-id="${esc(a.id)}" aria-pressed="${a.id === sel.agent}"><div class="row between"><span class="agent-tag" data-agent="${esc(a.id)}">${esc(a.name)}</span>${a.beta ? '<span class="chip beta">beta</span>' : ''}</div><div class="sub">${esc(a.available ? a.version || 'Disponible' : 'No instal·lat')}</div></button>`).join('')}</div>`,
       () => {
         const crumbs = fsd ? fsd.path.split(/[\\/]/).filter(Boolean) : [];
-        const quick = [...recents.map((p) => ({ path: p, name: basename(p) })), ...projects.filter((p) => !recents.includes(p.path))].slice(0, 8).map((p) => `<button type="button" class="chip" data-fs="${esc(p.path)}">${esc(p.name)}</button>`).join('');
+        const qf = quickFolders(projects), favN = getFavs().length, quick = qf.filter((f) => f.tag).concat(qf.filter((f) => !f.tag).slice(0, 6)).slice(0, favN + 8).map(folderChip).join('');
         return `<p class="wiz-q">A quina carpeta ha de treballar?</p>
           <form class="pair-form" id="fsForm"><input type="text" id="fsIn" value="${esc(fsd?.path || sel.cwd)}" placeholder="/ruta/exacta/de/la/carpeta" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Ruta de la carpeta"><button class="btn" type="submit">Obre</button></form>
-          <div class="fs-pick"><span class="muted small">Carpeta triada</span><b class="mono small">${esc(fsd?.path || sel.cwd || '—')}</b>${fsd?.git ? '<span class="chip">git</span>' : ''}</div>
+          <div class="fs-pick"><span class="muted small">Carpeta triada</span><b class="mono small">${esc(fsd?.path || sel.cwd || '—')}</b>${fsd?.git ? '<span class="chip">git</span>' : ''}${favBtn(fsd?.path || sel.cwd)}</div>
           <div class="row"><button class="chip" type="button" data-gh>${gh ? 'Torna a les carpetes' : 'Clona de GitHub'}</button>${quick}</div>
           ${gh ? (gh.msg ? `<p class="muted small">${gh.msg}</p>` : '') + (gh.repos ? `<input type="search" id="ghQ" value="${esc(gh.q)}" placeholder="Cerca entre els teus repositoris${gh.user ? ' (' + esc(gh.user) + ')' : ''}" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Cerca un repositori"><div class="proj-list fs-list" id="ghList">${ghList()}</div>` : '')
           : !fsd ? '<p class="muted small">Carregant…</p>' : `<div class="fs-bar"><button class="icon-btn" type="button" data-fs="${esc(fsd.parent || '')}" ${fsd.parent ? '' : 'disabled'} aria-label="Carpeta de dalt">${svg(ICON.back)}</button><button class="chip" type="button" data-fs="${esc(fsd.home)}">Inici</button><span class="fs-path mono small" title="${esc(fsd.path)}">${esc(crumbs.slice(-2).join(' / ') || '/')}</span></div>
@@ -1001,6 +1410,7 @@ async function newSessionSheet(preset = {}) {
       const ag = t.closest('[data-agent-id]');
       if (ag) { const a = agents.find((x) => x.id === ag.dataset.agentId); if (!a.available) return toast(`Primer instal·la’l a l’ordinador: ${a.login}`, 4200); if (a.id !== sel.agent) { sel.agent = a.id; sel.model = ''; models = null; } step = 1; return draw(); }
       const fp = t.closest('[data-fs]'); if (fp && !fp.disabled) return fsGo(fp.dataset.fs);
+      if (t.closest('[data-fav]')) { toggleFav(fsd?.path || sel.cwd); return body(); }
       if (t.closest('[data-gh]')) { if (gh) { gh = null; return body(); } return ghStart(); }
       const rp = t.closest('[data-repo]'); if (rp) return ghClone(rp.dataset.repo, rp);
       const mo = t.closest('[data-mode]'); if (mo) { sel.mode = mo.dataset.mode; return body(); }
@@ -1197,6 +1607,7 @@ function onOllama(msg) {
 
 /* ---------- Models per a la pissarra */
 window.NioBrains = {
+  refresh: () => brainsForBoard(true),
   list() {
     const out = [{ id: 'rules', label: 'Ordres ràpides' }];
     if (machine() && state.connected) (state.ollama?.models || []).forEach((m) => out.push({ id: 'ollama:' + m.name, label: `Ollama · ${m.name}` }));
@@ -1218,9 +1629,12 @@ window.NioBrains = {
     throw new Error('Aquest model ja no està disponible');
   }
 };
-async function brainsForBoard() {
+let brainsAt = 0;
+async function brainsForBoard(force) {
   if (state.route.name !== 'pissarra') return;
-  if (machine() && state.connected && !state.ollama) { try { state.ollama = await api('/api/ollama'); } catch { /* sense Ollama */ } }
+  window.NioBoard?.refreshBrains();
+  if (!machine() || !state.connected || (!force && state.ollama && Date.now() - brainsAt < 30000)) return;
+  try { const o = await api('/api/ollama'); state.ollama = o; brainsAt = Date.now(); } catch { /* sense Ollama */ }
   window.NioBoard?.refreshBrains();
 }
 
@@ -1233,7 +1647,7 @@ async function enablePush() {
     const reg = await navigator.serviceWorker.ready;
     const sub = (await reg.pushManager.getSubscription()) || (await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: b64uToU8(state.info.vapidKey) }));
     await api('/api/push', { method: 'POST', body: sub.toJSON() });
-    syncServiceWorker(); toast('Avisos activats');
+    syncServiceWorker(); pushOn = true; toast('Avisos activats'); if (state.route.name === 'settings' || state.route.name === 'ajustos') render();
   } catch (e) { toast(e.message, 4200); }
 }
 async function syncServiceWorker() {
@@ -1273,7 +1687,7 @@ function viewLocal() {
 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>`));
-  feed.scrollTop = feed.scrollHeight;
+  toBottom(feed);
   const ta = $('#lmsg');
   if (local.draft) { ta.value = local.draft; local.draft = ''; autogrow(ta); }
   ta.addEventListener('input', () => autogrow(ta));
@@ -1323,7 +1737,7 @@ async function sendLocal() {
   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); feed.scrollTop = feed.scrollHeight;
+  const out = el('<div class="msg-ai cursor"></div>'); feed.appendChild(out); toBottom(feed);
   local.busy = true; local.stopped = false; setLocalBusy(true); let acc = '';
   try {
     const chunks = await local.engine.chat.completions.create({
@@ -1332,7 +1746,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)) feed.scrollTop = feed.scrollHeight;
+      acc += c.choices[0]?.delta?.content || ''; out.innerHTML = md(stripThink(acc)); if (nearBottom(feed)) toBottom(feed);
       if (local.stopped) break;
     }
   } catch (e) {
@@ -1345,37 +1759,138 @@ async function sendLocal() {
   local.messages.push({ role: 'assistant', content: stripThink(acc) || '…' }); local.busy = false; local.stopped = false; setLocalBusy(false);
 }
 
-/* ---------------------------------------------------------------- veu (ElevenLabs) */
-// La clau viu només en aquest navegador; les crides van directes a ElevenLabs, sense passar per nio.
-const VOICE_DEFAULT = { key: '', voice: 'JBFqnCBsd6RMkjVDRZzb', model: 'eleven_v3' };
-const voiceCfg = () => ({ ...VOICE_DEFAULT, ...LS.get('nio.voice', {}) });
-const voiceOn = () => !!voiceCfg().key;
-async function elevenlabs(path, init = {}) {
-  const res = await fetch(`https://api.elevenlabs.io${path}`, { ...init, headers: { 'xi-api-key': voiceCfg().key, ...(init.headers || {}) } });
-  if (res.ok) return res;
-  let why = ''; try { const j = await res.json(); why = j.detail?.message || (typeof j.detail === 'string' ? j.detail : ''); } catch { /* sense cos */ }
-  throw new Error(res.status === 401 ? 'La clau d’ElevenLabs no és vàlida.' : res.status === 429 ? 'ElevenLabs diu que has superat el límit. Prova-ho d’aquí una estona.' : `ElevenLabs: ${why || `error ${res.status}`}`);
+/* ---------------------------------------------------------------- Pantalla: navegador i escriptori (agent-browser, agent-desktop) */
+let screen = null; // { caps, last, actions }
+const controlOn = () => !!(state.info?.control?.navegador?.enabled || state.info?.control?.escriptori?.enabled || screen?.caps?.navegador?.enabled || screen?.caps?.escriptori?.enabled);
+// Aturada d'emergència: sempre a la vista mentre el control estigui actiu.
+function renderPanic() {
+  syncScreenBtn();
+  let b = $('#panicBtn');
+  if (!controlOn() || !machine()) { b?.remove(); return; }
+  if (!b) { b = el(`<button class="panic" id="panicBtn" type="button" data-act="panic" aria-label="Aturada d’emergència">${svg(ICON.panic)}<span>Atura-ho tot</span></button>`); document.body.appendChild(b); }
+}
+async function panicNow() {
+  if (!confirm('S’aturaran tots els agents d’aquest ordinador, es rebutjaran les peticions pendents i es tancarà el navegador.')) return;
+  try { const r = await api('/api/panic', { method: 'POST' }); toast(`Aturat tot (${r.stopped} agents)`); } catch (e) { toast(e.message, 4500); }
+}
+function viewScreen() {
+  const head = `<div class="top"><div><h1>Pantalla</h1><p>Els agents poden fer servir el navegador (agent-browser) i les apps de l’escriptori (agent-desktop). Mirar passa sol; clicar, escriure o enviar sempre et demana permís, amb una captura.</p></div><button class="btn ink" data-act="screen-now" type="button" ${controlOn() ? '' : 'disabled'}>${svg(ICON.screen)}Veure pantalla ara</button></div>`;
+  return `${head}<div id="screenBody">${screenHtml()}</div>`;
+}
+function screenHtml() {
+  if (!screen) return `<div class="panel empty">${bot('work')}<h2>Carregant…</h2></div>`;
+  if (screen.error) return `<div class="panel empty">${bot('sleep')}<h2>${esc(screen.error)}</h2><p>Cal nio 0.7 o més nou en aquest ordinador.</p></div>`;
+  const c = screen.caps, row = (k, name, hint) => {
+    const x = c[k];
+    const st = !x.installed ? `No instal·lat · <span class="mono">${hint}</span>` : x.ready === false ? esc(x.why || 'No està a punt') : x.enabled ? 'Activat' : 'Desactivat';
+    return `<div class="agent-row"><i class="dot ${x.enabled ? 'on' : ''}"></i><span class="grow"><b>${name}</b><div class="muted small">${st}</div></span>${x.installed ? `<button class="btn sm ${x.enabled ? '' : 'ink'}" data-ctl="${k}" data-on="${!x.enabled}" type="button">${x.enabled ? 'Desactiva' : 'Activa'}</button>` : ''}</div>`;
+  };
+  return `<div class="grid2">
+    <div class="stack">
+      <section class="panel"><header><h2>Última captura</h2>${screen.last ? `<span class="muted small">${ago(screen.last.t)} · ${esc(screen.last.from)}</span>` : ''}</header><div class="body">${screen.last ? `<img class="screen-img" alt="Captura de la pantalla de l’ordinador" data-shot="${esc(screen.last.id)}">` : '<p class="muted small">Encara no n’hi ha cap. Prem «Veure pantalla ara».</p>'}</div></section>
+      <section class="panel"><header><h2>Accions fetes</h2></header><div class="body">${screen.actions.length ? screen.actions.map((a) => `<div class="act-row"><span class="act-t mono">${new Date(a.t).toLocaleTimeString('ca', { hour: '2-digit', minute: '2-digit' })}</span><div class="grow"><div class="mono small act-what">${esc(a.what)}</div><div class="muted small">${esc(a.title || '')}</div></div></div>`).join('') : '<p class="muted small">Cap encara.</p>'}</div></section>
+    </div>
+    <div class="stack">
+      <section class="panel"><header><h2>En aquest ordinador</h2></header><div class="body">${row('navegador', 'Navegador web', 'npm i -g agent-browser && agent-browser install')}${row('escriptori', 'Apps de l’escriptori', 'npm i -g agent-desktop')}<p class="muted small" style="margin-top:10px">En activar-ho, nio dona a Claude Code i a Codex les guies oficials. Desactivat per defecte. Claude Code demana permís per a cada acció; Codex no pot preguntar, així que només segueix les normes de la guia.</p></div></section>
+      <section class="panel"><header><h2>Aturada d’emergència</h2></header><div class="body stack"><p class="small">Atura tots els agents, rebutja el que estigui pendent i tanca el navegador.</p><button class="btn danger" data-act="panic" type="button">${svg(ICON.panic)}Atura-ho tot</button></div></section>
+      <section class="panel"><header><h2>Vols fer-ho tu?</h2></header><div class="body"><p class="muted small">nio no és un escriptori remot. Si necessites controlar la pantalla tu mateix, fes servir <a href="https://rustdesk.com" target="_blank" rel="noopener">RustDesk</a> o <a href="https://remotedesktop.google.com" target="_blank" rel="noopener">Chrome Remote Desktop</a>.</p></div></section>
+    </div>
+  </div>`;
+}
+async function loadScreen() {
+  try {
+    const [caps, cur, log] = await Promise.all([api('/api/control'), api('/api/screen'), api('/api/audit?type=tool&limit=300')]);
+    screen = { caps, last: cur.last, actions: log.filter((e) => /^(npx\s+)?agent-(browser|desktop)\b/.test(e.what || '')).slice(0, 30) };
+  } catch (e) { screen = { error: e.message }; }
+  const box = $('#screenBody'); if (box) { box.innerHTML = screenHtml(); hydrateShots(box); }
+  renderPanic();
+}
+function syncScreenBtn() { const b = $('[data-act=screen-now]'); if (b) b.disabled = !controlOn(); }
+function onScreen(msg) { if (screen && !screen.error) { screen.last = msg.shot; if (state.route.name === 'pantalla') { const box = $('#screenBody'); box.innerHTML = screenHtml(); hydrateShots(box); } } }
+document.addEventListener('click', async (e) => {
+  const b = e.target.closest('[data-ctl]'); if (!b) return;
+  b.disabled = true;
+  try { const r = await api('/api/control', { method: 'PUT', body: { [b.dataset.ctl]: b.dataset.on === 'true' } }); screen.caps = r; if (state.info) state.info.control = r; toast(b.dataset.on === 'true' ? 'Activat. Les guies ja són a Claude Code i Codex.' : 'Desactivat'); (r.notes || []).forEach((n) => toast(n, 5000)); }
+  catch (err) { toast(err.message, 6000); }
+  const box = $('#screenBody'); if (box) { box.innerHTML = screenHtml(); hydrateShots(box); } renderPanic();
+});
+
+/* ---------------------------------------------------------------- Telegram (bot propi, configurat a l'ordinador) */
+let tgState;
+async function loadTelegram() {
+  try { tgState = await api('/api/telegram'); } catch { tgState = null; }
+  const box = $('#tgPanel'); if (box) box.innerHTML = telegramPanel();
+}
+function telegramPanel() {
+  if (!machine()) return '';
+  const t = tgState;
+  if (t === undefined) return '<section class="panel"><header><h2>Telegram</h2></header><div class="body"><p class="muted small">Carregant…</p></div></section>';
+  if (t === null) return '<section class="panel"><header><h2>Telegram</h2></header><div class="body"><p class="muted small">Aquest ordinador encara no té Telegram (cal nio 0.7 o més nou).</p></div></section>';
+  if (!t.configured) return `<section class="panel"><header><h2>Telegram</h2></header><div class="body stack">
+    <p class="small">Parla amb els agents d’aquest ordinador des de Telegram: instruccions, notes de veu, avisos i aprovacions amb botons. El bot és teu i el testimoni es queda a l’ordinador.</p>
+    <ol class="muted small" style="padding-left:1.2em"><li>A Telegram, obre <b>@BotFather</b> i envia <span class="mono">/newbot</span>.</li><li>Copia el testimoni que et dona i enganxa’l aquí.</li><li>Escriu qualsevol cosa al teu bot i torna aquí per autoritzar el teu xat.</li></ol>
+    <form class="row" id="tgForm" style="flex-wrap:nowrap"><input type="password" id="tgToken" placeholder="123456:ABC…" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Testimoni del bot"><button class="btn ink" type="submit">Connecta</button></form></div></section>`;
+  return `<section class="panel"><header><h2>Telegram</h2><span class="chip ok"><i class="dot on"></i>${esc(t.bot ? '@' + t.bot.username : 'Connectat')}</span></header><div class="body stack">
+    ${t.pending.length ? `<div class="stack"><b class="small">Volen parlar amb el bot</b>${t.pending.map((p) => `<div class="agent-row"><span class="grow"><b>${esc(p.name)}</b><div class="muted small">${p.username ? '@' + esc(p.username) + ' · ' : ''}${ago(p.t)} · xat ${esc(p.id)}</div></span><button class="btn sm ink" data-tg-allow="${esc(p.id)}" data-name="${esc(p.name)}" type="button">Autoritza</button></div>`).join('')}<p class="muted small">Autoritza només els xats que reconeguis. La resta s’ignoren.</p></div>` : ''}
+    <div class="stack"><b class="small">Xats autoritzats</b>${t.allowed.length ? t.allowed.map((a) => `<div class="agent-row"><span class="grow"><b>${esc(a.name)}</b><div class="muted small">xat ${esc(a.id)}</div></span><button class="btn sm danger" data-tg-drop="${esc(a.id)}" type="button">Treu</button></div>`).join('') : `<p class="muted small">Encara cap. Escriu al bot ${t.bot ? '<b>@' + esc(t.bot.username) + '</b>' : ''} i el teu xat apareixerà aquí.</p>`}</div>
+    <div class="grid-2"><label class="f"><span>Agent</span><select id="tgAgent">${['claude', 'codex'].map((a) => `<option value="${a}" ${t.agent === a ? 'selected' : ''}>${AGENT_NAMES[a]}</option>`).join('')}</select></label>
+    <label class="f"><span>Permisos</span><select id="tgMode">${Object.entries(MODES).map(([k, m]) => `<option value="${k}" ${t.mode === k ? 'selected' : ''}>${m.label}</option>`).join('')}</select></label></div>
+    <label class="row check"><input type="checkbox" id="tgNotify" ${t.notify ? 'checked' : ''}> <span>Envia-hi els avisos (aprovacions, feines acabades i errors)</span></label>
+    ${t.voice ? '' : '<p class="muted small">Per entendre notes de veu, configura la veu (a dalt).</p>'}
+    <div class="row"><button class="btn sm danger" data-tg-off type="button">Desconnecta el bot</button></div></div></section>`;
+}
+document.addEventListener('submit', async (e) => {
+  if (e.target.id !== 'tgForm') return; e.preventDefault();
+  try { tgState = await api('/api/telegram', { method: 'PUT', body: { token: $('#tgToken').value.trim() } }); toast('Bot connectat'); } catch (err) { toast(err.message, 5000); }
+  $('#tgPanel').innerHTML = telegramPanel();
+});
+document.addEventListener('change', async (e) => {
+  const k = { tgAgent: 'agent', tgMode: 'mode', tgNotify: 'notify' }[e.target.id]; if (!k) return;
+  try { tgState = await api('/api/telegram', { method: 'PUT', body: { [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value } }); toast('Desat'); } catch (err) { toast(err.message); }
+});
+document.addEventListener('click', async (e) => {
+  const b = e.target.closest('[data-tg-allow], [data-tg-drop], [data-tg-off]'); if (!b) return;
+  try {
+    if (b.dataset.tgAllow) tgState = await api('/api/telegram/allow', { method: 'POST', body: { id: Number(b.dataset.tgAllow), name: b.dataset.name } });
+    if (b.dataset.tgDrop) tgState = await api(`/api/telegram/allow/${b.dataset.tgDrop}`, { method: 'DELETE' });
+    if (b.hasAttribute('data-tg-off')) { if (!confirm('El bot deixarà de funcionar amb aquest ordinador.')) return; tgState = await api('/api/telegram', { method: 'PUT', body: { token: null } }); }
+  } catch (err) { return toast(err.message); }
+  $('#tgPanel').innerHTML = telegramPanel();
+});
+
+/* ---------------------------------------------------------------- veu (a l'ordinador) */
+// 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;
+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');
+  const res = await fetch(m.url + path, { method: 'POST', ...opts, headers: { Authorization: `Bearer ${m.token}`, ...(opts.headers || {}) } });
+  if (!res.ok) { const j = await res.json().catch(() => ({})); throw new Error(j.error || `Error ${res.status}`); }
+  return res;
 }
 const speech = { audio: null, btn: null, cache: new Map() };
-const speechText = (t) => String(t).replace(/```[\s\S]*?```/g, ' (bloc de codi) ').replace(/`([^`]+)`/g, '$1').replace(/\*\*([^*]+)\*\*/g, '$1').replace(/\[([^\]]+)\]\([^)]+\)/g, '$1').replace(/^#{1,4}\s+/gm, '').replace(/^\s*[-*•]\s+/gm, '').trim().slice(0, 4500);
+const speechText = (t) => String(t).replace(/```[\s\S]*?```/g, ' (bloc de codi) ').replace(/`([^`]+)`/g, '$1').replace(/\*\*([^*]+)\*\*/g, '$1').replace(/\[([^\]]+)\]\([^)]+\)/g, '$1').replace(/^#{1,4}\s+/gm, '').replace(/^\s*[-*•]\s+/gm, '').trim().slice(0, 2500);
 function stopSpeech() { speech.audio?.pause(); speech.audio = null; speech.btn?.classList.remove('on', 'wait'); speech.btn = null; }
-async function speak(btn) {
-  if (speech.btn === btn) return stopSpeech();
-  stopSpeech();
-  const ev = state.events.get(state.route.id)?.get(Number(btn.closest('[data-seq]')?.dataset.seq)), text = speechText(ev?.text || '');
-  if (!text) return;
-  speech.btn = btn; btn.classList.add('wait');
+async function playText(text, btn) {
+  text = speechText(text); if (!text) return;
+  if (btn) { speech.btn = btn; btn.classList.add('wait'); }
   try {
-    const c = voiceCfg(), k = `${c.voice}|${c.model}|${text}`; let url = speech.cache.get(k);
-    if (!url) {
-      const res = await elevenlabs(`/v1/text-to-speech/${encodeURIComponent(c.voice)}?output_format=mp3_44100_64`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ text, model_id: c.model }) });
-      url = URL.createObjectURL(await res.blob()); speech.cache.set(k, url);
-    }
-    if (speech.btn !== btn) return;
+    let url = speech.cache.get(text);
+    if (!url) { url = URL.createObjectURL(await (await nodeAudio('/api/voice/tts', { headers: { 'content-type': 'application/json' }, body: JSON.stringify({ text }) })).blob()); speech.cache.set(text, url); }
+    if (btn && speech.btn !== btn) return;
     const a = new Audio(url); speech.audio = a; a.onended = stopSpeech; await a.play();
-    btn.classList.remove('wait'); btn.classList.add('on');
+    btn?.classList.remove('wait'); btn?.classList.add('on');
   } catch (e) { stopSpeech(); toast(e.message, 4500); }
 }
+async function speak(btn) {
+  if (speech.btn === btn) return stopSpeech();
+  stopSpeech();
+  const ev = state.events.get(state.route.id)?.get(Number(btn.closest('[data-seq]')?.dataset.seq));
+  return playText(ev?.text || '', btn);
+}
+// Lectura automàtica (si l'has activada): quan l'agent acaba una resposta a la sessió oberta.
+function autoSpeak(ev) { if (nodeVoice?.speak && nodeVoice?.tts && !document.hidden && ev?.text) { stopSpeech(); playText(ev.text); } }
 const mic = { rec: null, chunks: [], stream: null };
 async function toggleMic() {
   if (!voiceOn()) return voiceSheet();
@@ -1390,8 +1905,7 @@ async function toggleMic() {
     $('#micBtn')?.classList.remove('rec'); $('#micBtn')?.classList.add('wait');
     try {
       if (blob.size < 1500) throw new Error('No he sentit res. Prova-ho una altra vegada.');
-      const fd = new FormData(); fd.append('model_id', 'scribe_v1'); fd.append('file', blob, 'veu.webm');
-      const r = await (await elevenlabs('/v1/speech-to-text', { method: 'POST', body: fd })).json(), ta = $('#msg');
+      const r = await (await nodeAudio('/api/voice/stt', { headers: { 'content-type': blob.type || 'audio/webm' }, body: blob })).json(), ta = $('#msg');
       if (!r.text?.trim()) toast('No he entès res.');
       else if (ta) { ta.value = `${ta.value ? `${ta.value} ` : ''}${r.text.trim()}`; ta.dispatchEvent(new Event('input')); ta.focus(); }
     } catch (e) { toast(e.message, 4500); }
@@ -1400,26 +1914,49 @@ async function toggleMic() {
   rec.start(); $('#micBtn')?.classList.add('rec');
 }
 function voicePanel() {
-  return `<section class="panel"><header><h2>Veu</h2>${voiceOn() ? '<span class="chip ok"><i class="dot on"></i>ElevenLabs</span>' : ''}</header><div class="body stack"><p class="small">Dicta els missatges amb el micròfon i escolta les respostes de l’agent, amb ElevenLabs.</p><div class="row"><button class="btn ink" data-act="voice" type="button">${voiceOn() ? 'Canvia la configuració' : 'Configura la veu'}</button></div></div></section>`;
-}
-function voiceSheet() {
-  const c = voiceCfg();
-  openSheet(`<h2>Veu amb ElevenLabs</h2><p class="muted small">Dicta amb el micròfon i escolta les respostes. La clau es queda només en aquest navegador: les crides van directes a ElevenLabs, nio no les veu.</p>
+  if (!machine()) return '';
+  const v = nodeVoice, P = v?.providers || {};
+  const on = Object.entries(P).filter(([, p]) => p.key).map(([, p]) => p.name);
+  return `<section class="panel"><header><h2>Veu</h2>${on.length ? `<span class="chip ok"><i class="dot on"></i>${esc(on.join(' · '))}</span>` : ''}</header><div class="body stack"><p class="small">Dicta els missatges amb el micròfon i escolta les respostes. Les claus es queden a l’ordinador (${esc(machine().name)}); l’àudio va del mòbil a l’ordinador i d’allà al proveïdor.</p>${v ? '' : '<p class="muted small">Aquest ordinador encara no té la veu (cal nio 0.7 o més nou).</p>'}<div class="row"><button class="btn ink" data-act="voice" type="button" ${v ? '' : 'disabled'}>${on.length ? 'Canvia la configuració' : 'Configura la veu'}</button></div></div></section>`;
+}
+async function voiceSheet() {
+  await loadVoice();
+  if (!nodeVoice) return toast('Aquest ordinador encara no té la veu. Actualitza nio (npx nio-cat@latest).', 5000);
+  const v = nodeVoice, old = LS.get('nio.voice', {});
+  openSheet(`<h2>Veu</h2><p class="muted small">Les claus es desen a l’ordinador «${esc(machine().name)}» i no tornen mai al mòbil. Amb una sola clau n’hi ha prou.</p>
     <form class="stack" id="voiceForm" style="margin-top:14px">
-      <label class="f"><span>Clau d’API</span><input type="password" id="vKey" value="${esc(c.key)}" placeholder="sk_…" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
-      <label class="f"><span>Identificador de la veu</span><input type="text" id="vVoice" value="${esc(c.voice)}" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
-      <label class="f"><span>Model</span><select id="vModel"><option value="eleven_v3" ${c.model === 'eleven_v3' ? 'selected' : ''}>v3 (inclou català)</option><option value="eleven_multilingual_v2" ${c.model === 'eleven_multilingual_v2' ? 'selected' : ''}>Multilingual v2</option></select></label>
-      <div class="row between sheet-foot"><button class="btn ghost" type="button" id="vOff" ${c.key ? '' : 'disabled'}>Treu la clau</button><button class="btn ink" type="submit">Desa</button></div>
+      <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><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>
     </form>`, (sh) => {
-    const save = (v) => { LS.set('nio.voice', v); closeSheet(); if (state.route.name === 'session') renderSession(); else render(); };
-    $('#voiceForm', sh).onsubmit = (e) => { e.preventDefault(); const key = $('#vKey', sh).value.trim(); if (!key) return toast('Enganxa la clau d’API.'); save({ key, voice: $('#vVoice', sh).value.trim() || VOICE_DEFAULT.voice, model: $('#vModel', sh).value }); toast('Veu activada'); };
-    $('#vOff', sh).onclick = () => { save({ ...c, key: '' }); toast('Clau eliminada'); };
+    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'); };
+    $('#vOff', sh).onclick = () => { if (confirm('Es treuran les claus de veu d’aquest ordinador.')) put({ keys: { elevenlabs: null, openai: null } }, 'Claus eliminades'); };
   });
 }
 
 /* ---------------------------------------------------------------- accions */
+document.addEventListener('click', (e) => {
+  const f = e.target.closest('[data-filter]'); if (!f) return;
+  actFilter = f.dataset.filter; $$('.act-filter button').forEach((b) => b.setAttribute('aria-pressed', b.dataset.filter === actFilter));
+  const box = $('#actList'); if (box) box.innerHTML = activityHtml();
+});
+// Les captures de les aprovacions es demanen amb la clau: no poden anar en un <img src> directe.
+async function hydrateShots(root = document) {
+  const m = machine(); if (!m) return;
+  for (const img of $$('img[data-shot]:not([src])', root)) {
+    try {
+      const res = await fetch(`${m.url}/api/screen/shot/${encodeURIComponent(img.dataset.shot)}`, { headers: { Authorization: `Bearer ${m.token}` } });
+      if (!res.ok) throw 0; img.src = URL.createObjectURL(await res.blob());
+    } catch { img.remove(); }
+  }
+}
 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]');
+  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]');
   if (!a) return;
   if (a.dataset.copy) {
     try { await navigator.clipboard.writeText(a.dataset.copy); } catch { return toast(a.dataset.copy); }
@@ -1432,6 +1969,8 @@ document.addEventListener('click', async (e) => {
   }
   if (a.dataset.speak != null) return speak(a);
   if (a.dataset.mic != null) return toggleMic();
+  if (a.dataset.man) return manageSelect(a.dataset.man);
+  if (a.dataset.pick) { manage.has(a.dataset.pick) ? manage.delete(a.dataset.pick) : manage.add(a.dataset.pick); return render(); }
   if (a.dataset.decide) return decide(a.closest('[data-approval]'), a.dataset.decide);
   if (a.dataset.machine != null) return switchMachine(Number(a.dataset.machine));
   if (a.dataset.reconnect != null) { const m = store.machines[Number(a.dataset.reconnect)]; reconTry.delete(m.via); if (sshHelper()) { autoReconnect({ ...m }); return; } return addComputerSheet('vps', { target: m.via, auto: true }); }
@@ -1440,6 +1979,9 @@ document.addEventListener('click', async (e) => {
   if (a.dataset.lm) { if (local.loading) return; LS.set('nio.localModel', a.dataset.lm); return render(); }
   switch (a.dataset.act) {
     case 'new': return newSessionSheet();
+    case 'manage-on': manage = new Set(); return render();
+    case 'manage-off': manage = null; return render();
+    case 'manage-del': return manageDelete();
     case 'ollama-refresh': state.ollama = null; return loadOllama(true);
     case 'ollama-pull': return pullModel(a.dataset.name || $('#pullIn')?.value);
     case 'ollama-cancel': try { await api(`/api/ollama/pull/${encodeURIComponent(a.dataset.name)}`, { method: 'DELETE' }); } catch (err) { toast(err.message); } return;
@@ -1451,6 +1993,14 @@ document.addEventListener('click', async (e) => {
     case 'session-more': return sessionOptions(state.route.id);
     case 'refresh-agents': try { state.info = await api('/api/info?refresh=1'); render(); toast('Agents actualitzats'); } catch (err) { toast(err.message); } return;
     case 'push': return enablePush();
+    case 'push-off': return disablePush();
+    case 'revoke': return revokeDevice(a.dataset.dev);
+    case 'job-new': return newJobSheet();
+    case 'panic': return panicNow();
+    case 'screen-now': try { const s = await api('/api/screen', { method: 'POST' }); onScreen({ shot: s }); } catch (err) { toast(err.message, 4500); } return;
+    case 'mem-new': return memEdit(null);
+    case 'mem-all': if (mem) delete mem.hits; return loadMemory();
+    case 'activity-refresh': activity = null; return loadActivity();
     case 'push-test': try { const r = await api('/api/push/test', { method: 'POST' }); toast(r.subs ? 'Enviat. Arribarà en uns segons.' : 'Primer activa els avisos'); } catch (err) { toast(err.message); } return;
     case 'add-computer': return addComputerSheet();
     case 'open-sessions': return go('#/sessions');
@@ -1476,7 +2026,7 @@ document.addEventListener('submit', (e) => {
   e.preventDefault();
   const pair = pairFrom($('#pairInput', e.target).value);
   if (!pair) return toast('Aquest codi no és de connexió. Copia’l sencer del terminal.');
-  closeSheet(); addMachine(pair); toast('Connectant…'); go('#/sessions');
+  closeSheet(); toast('Connectant…'); pairAndAdd(pair); go('#/sessions');
 });
 
 /* ---------------------------------------------------------------- paleta d'ordres */
@@ -1636,7 +2186,8 @@ $('#palette').addEventListener('close', () => setTimeout(() => tourDraw(false),
 // Al mòbil, l'alçada visible real (amb el teclat obert o tancat), perquè el camp de text quedi sempre just a sota.
 if (window.visualViewport) {
   const vv = visualViewport, root = document.documentElement;
-  const fit = () => { root.style.setProperty('--vvh', `${vv.height}px`); root.style.setProperty('--vvt', `${vv.offsetTop}px`); document.body.classList.toggle('kb', innerHeight - vv.height > 120); };
+  // A l'iPhone el teclat no encongeix la pàgina: el camp d'escriure puja el que ocupi el teclat (--kb).
+  const fit = () => { root.style.setProperty('--vvh', `${vv.height}px`); root.style.setProperty('--vvt', `${vv.offsetTop}px`); root.style.setProperty('--kb', `${Math.round(Math.max(0, innerHeight - vv.height - vv.offsetTop))}px`); document.body.classList.toggle('kb', innerHeight - vv.height > 120); };
   vv.addEventListener('resize', fit); vv.addEventListener('scroll', fit); fit();
 }
 if ('serviceWorker' in navigator) {
@@ -1660,3 +2211,59 @@ if (!checkPairHash()) state.route = parseRoute();
 if (machine()) connect();
 if (state.route.name === 'session') openSession(state.route.id); else render();
 if (T.on) tourGo(T.i); else if (!T.seen && !machine()) setTimeout(tourStart, 700);
+
+/* ---------------------------------------------------------------- lliscar entre pàgines (mòbil) */
+(() => {
+  const PAGES = ['sessions', 'approvals', 'ordinadors'];
+  const view = $('#view');
+  let g = null, timer = 0;
+  const scrollsX = (el) => { for (; el && el !== view; el = el.parentElement) { if (el.scrollWidth > el.clientWidth + 2 && /auto|scroll/.test(getComputedStyle(el).overflowX)) return true; } return false; };
+  const blocked = (t) => !mq.matches || document.body.classList.contains('nav-open') || $('#sheet')?.open || state.route.name === 'session' || t.closest?.('input, textarea, select, [contenteditable], [data-noswipe]') || scrollsX(t);
+  const target = (dir) => PAGES[PAGES.indexOf(state.route.name) + dir];
+  const put = (x, o) => { view.style.setProperty('--sx', x + 'px'); view.style.setProperty('--so', String(o)); };
+  const clear = () => { view.classList.remove('swiping', 'swipe-anim'); view.style.removeProperty('--sx'); view.style.removeProperty('--so'); };
+  addEventListener('touchstart', (e) => {
+    g = null;
+    if (e.touches.length !== 1 || !view.contains(e.target) || !PAGES.includes(state.route.name) || blocked(e.target)) return;
+    const t = e.touches[0];
+    if (t.clientX < 24 || t.clientX > innerWidth - 24) return;
+    clearTimeout(timer); clear();
+    g = { x: t.clientX, y: t.clientY, t: e.timeStamp, dx: 0, lock: null };
+  }, { passive: true });
+  addEventListener('touchmove', (e) => {
+    if (!g) return;
+    const t = e.touches[0], dx = t.clientX - g.x, dy = t.clientY - g.y;
+    if (!g.lock) {
+      if (Math.abs(dx) < 8 && Math.abs(dy) < 8) return;
+      g.lock = Math.abs(dx) > Math.abs(dy) * 1.3 ? 'x' : 'y';
+      if (g.lock === 'x') view.classList.add('swiping');
+    }
+    if (g.lock !== 'x') { g = null; return; }
+    if (e.cancelable) e.preventDefault();
+    g.dx = dx;
+    const ok = target(dx < 0 ? 1 : -1);
+    put(dx * (ok ? 0.8 : 0.2), 1 - Math.min(Math.abs(dx) / innerWidth, 0.6) * (ok ? 0.7 : 0.2));
+  }, { passive: false });
+  const end = (e) => {
+    if (!g || g.lock !== 'x') { g = null; return; }
+    const { dx } = g, v = Math.abs(dx) / Math.max(e.timeStamp - g.t, 1), dir = dx < 0 ? 1 : -1, to = target(dir);
+    g = null;
+    const far = Math.abs(dx) > 56 || (Math.abs(dx) > 20 && v > 0.35);
+    if (!to || !far) {
+      view.classList.add('swipe-anim'); put(0, 1);
+      timer = setTimeout(clear, 200);
+      return;
+    }
+    navigator.vibrate?.(6);
+    view.classList.remove('swipe-anim');
+    addEventListener('hashchange', () => {
+      if (reduce) { clear(); return; }
+      put(dir * innerWidth * 0.35, 0.2); view.offsetWidth;
+      view.classList.add('swipe-anim'); put(0, 1);
+      timer = setTimeout(clear, 200);
+    }, { once: true });
+    go(HASH[to]);
+  };
+  addEventListener('touchend', end, { passive: true });
+  addEventListener('touchcancel', () => { if (g?.lock === 'x') { view.classList.add('swipe-anim'); put(0, 1); timer = setTimeout(clear, 200); } g = null; }, { passive: true });
+})();