nio-cat 0.1.0 → 0.2.0

package/web/app/app.js

@@ -0,0 +1,1318 @@
+// nio · app. Parla directament amb el programa nio del teu ordinador (fetch + flux d'esdeveniments).
+// Sense frameworks ni compilació. També inclou un ordinador de prova que viu dins del navegador.
+
+const $ = (s, e = document) => e.querySelector(s);
+const $$ = (s, e = document) => [...e.querySelectorAll(s)];
+const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+const el = (html) => { const t = document.createElement('template'); t.innerHTML = html.trim(); return t.content.firstElementChild; };
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const rid = (n = 8) => Array.from(crypto.getRandomValues(new Uint8Array(n)), (b) => b.toString(36).padStart(2, '0')).join('').slice(0, n + 3);
+const isTouch = matchMedia('(pointer: coarse)').matches;
+const isIOS = /iP(hone|ad|od)/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+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 svg = (d) => `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true">${d}</svg>`;
+const ICON = {
+  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"/>',
+  machine: '<rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/>',
+  board: '<path d="M4 20l1.2-4.4L16 4.8a2 2 0 0 1 2.9 0l.3.3a2 2 0 0 1 0 2.9L8.4 18.8z"/>',
+  models: '<path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M4 7.5l8 4.5 8-4.5M12 12v9"/>',
+  trash: '<path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/>',
+  download: '<path d="M12 4v11M7 10l5 5 5-5M5 20h14"/>',
+  chev: '<path d="m6 9 6 6 6-6"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>', send: '<path d="M12 19V5M5 12l7-7 7 7"/>',
+  stop: '<rect x="7" y="7" width="10" height="10" rx="1.5" fill="currentColor" stroke="none"/>',
+  more: '<circle cx="5" cy="12" r="1.3" fill="currentColor"/><circle cx="12" cy="12" r="1.3" fill="currentColor"/><circle cx="19" cy="12" r="1.3" fill="currentColor"/>',
+  refresh: '<path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7"/>', back: '<path d="M15 5l-7 7 7 7"/>',
+  bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+  copy: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3"/>'
+};
+const AGENT_NAMES = { claude: 'Claude Code', codex: 'Codex', grok: 'Grok', antigravity: 'Antigravity', ollama: 'Ollama', demo: 'Demo', browser: 'Xat local' };
+const MODES = {
+  llegir: { label: 'Només llegir', short: 'Llegir' },
+  preguntar: { label: 'Demana permís', short: 'Permís' },
+  tot: { label: 'Via lliure', short: 'Lliure' }
+};
+const DEMO_URL = 'demo:navegador';
+
+/* ---------------------------------------------------------------- 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 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 */ } }
+};
+const store = {
+  get machines() { return LS.get('nio.machines', []); },
+  set machines(v) { LS.set('nio.machines', v); },
+  get active() { return Number(LS.get('nio.active', 0)) || 0; },
+  set active(i) { LS.set('nio.active', i); }
+};
+const machine = () => store.machines[store.active] || store.machines[0] || null;
+const isDemo = () => machine()?.url === DEMO_URL;
+
+/* ---------------------------------------------------------------- utilitats */
+function toast(msg, ms = 2800) {
+  const box = $('#toasts'), t = document.createElement('div');
+  t.className = 'toast'; t.textContent = msg;
+  while (box.children.length >= 2) box.firstElementChild.remove();
+  box.appendChild(t); setTimeout(() => t.remove(), ms);
+}
+function ago(ts) {
+  const s = Math.round((Date.now() - ts) / 1000);
+  if (s < 45) return 'ara mateix';
+  if (s < 3600) return `fa ${Math.round(s / 60)} min`;
+  if (s < 86400) return `fa ${Math.round(s / 3600)} h`;
+  return new Date(ts).toLocaleDateString('ca', { day: 'numeric', month: 'short' });
+}
+const bytes = (n) => { if (!n) return ''; const u = ['B', 'kB', 'MB', 'GB', 'TB']; let i = 0; while (n >= 1000 && i < u.length - 1) { n /= 1000; i++; } return `${n.toLocaleString('ca', { maximumFractionDigits: n < 10 ? 1 : 0 })} ${u[i]}`; };
+const basename = (p) => String(p || '').split(/[\\/]/).filter(Boolean).pop() || p;
+function md(src) {
+  // Markdown mínim i segur: codi, negreta, enllaços, títols i llistes.
+  const out = [];
+  String(src || '').split(/```/).forEach((part, i) => {
+    if (i % 2 === 1) { out.push(`<pre><code>${esc(part.replace(/^[\w+-]*\n/, '').replace(/\n$/, ''))}</code></pre>`); return; }
+    const inline = (t) => esc(t).replace(/`([^`]+)`/g, '<code>$1</code>').replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>').replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    let list = null, para = [];
+    const fp = () => { if (para.length) out.push(`<p>${para.map(inline).join('<br>')}</p>`); para = []; };
+    const fl = () => { if (list) out.push(`<${list.tag}>${list.items.map((x) => `<li>${inline(x)}</li>`).join('')}</${list.tag}>`); list = null; };
+    for (const line of part.split('\n')) {
+      const ul = line.match(/^\s*[-*•]\s+(.*)/), ol = line.match(/^\s*\d+[.)]\s+(.*)/), hd = line.match(/^#{1,4}\s+(.*)/);
+      if (ul || ol) { fp(); const tag = ul ? 'ul' : 'ol'; if (!list || list.tag !== tag) { fl(); list = { tag, items: [] }; } list.items.push((ul || ol)[1]); }
+      else if (hd) { fp(); fl(); out.push(`<h3>${inline(hd[1])}</h3>`); }
+      else if (!line.trim()) { fp(); fl(); }
+      else { fl(); para.push(line); }
+    }
+    fp(); fl();
+  });
+  return out.join('');
+}
+function toolArg(input) {
+  if (!input || typeof input !== 'object') return '';
+  const v = input.command || input.file_path || input.path || input.pattern || input.url || input.query || input.description || (input.fitxers && input.fitxers.join(', ')) || Object.values(input).find((x) => typeof x === 'string');
+  return String(v ?? '').split('\n')[0];
+}
+function prettyInput(input) {
+  if (!input) return '';
+  if (input.command) return input.command;
+  if (input.content && input.file_path) return `${input.file_path}\n\n${input.content}`;
+  if (input.new_string != null && input.file_path) return `${input.file_path}\n\n− ${String(input.old_string || '').split('\n').join('\n− ')}\n+ ${String(input.new_string).split('\n').join('\n+ ')}`;
+  return JSON.stringify(input, null, 2);
+}
+
+/* ---------------------------------------------------------------- ordinador de prova (dins del navegador) */
+const demo = (() => {
+  const listeners = new Set();
+  const sessions = new Map(), approvals = new Map(), notices = [];
+  const runs = new Map();
+  const omodels = [{ name: 'qwen3:4b', size: 2.5e9, params: '4.0B', quant: 'Q4_K_M' }], opulls = new Map();
+  const emit = (msg) => listeners.forEach((f) => f(JSON.parse(JSON.stringify(msg))));
+  const err = (status, message) => Object.assign(new Error(message), { status });
+  const summary = (s) => {
+    const last = [...s.events].reverse().find((e) => e.kind === 'text' || e.kind === 'user');
+    return { id: s.id, agent: s.agent, title: s.title, cwd: s.cwd, mode: s.mode, model: s.model, state: s.state, created: s.created, updated: s.updated, cost: 0, last: last ? last.text.slice(0, 160) : '', pending: [...approvals.values()].filter((a) => a.session === s.id && a.state === 'pending').length };
+  };
+  const touch = (s) => { s.updated = Date.now(); emit({ type: 'session', session: summary(s) }); };
+  const push = (s, kind, data = {}) => {
+    const lastEv = s.events[s.events.length - 1];
+    if (lastEv && lastEv.open) delete lastEv.open;
+    const ev = { seq: ++s.seq, t: Date.now(), kind, ...data }; s.events.push(ev);
+    emit({ type: 'event', session: s.id, event: ev }); touch(s); return ev;
+  };
+  const chunk = (s, text) => {
+    const last = s.events[s.events.length - 1];
+    if (last && last.kind === 'text' && last.open) { last.text += text; emit({ type: 'event', session: s.id, event: last }); return; }
+    const ev = push(s, 'text', { text }); ev.open = true;
+  };
+  const pub = (a) => { const { resolve, ...r } = a; return r; };
+  function ask(s, tool, input) {
+    const a = { id: rid(), session: s.id, agent: s.agent, title: s.title, tool, input, state: 'pending', created: Date.now() };
+    const p = new Promise((res) => (a.resolve = res));
+    approvals.set(a.id, a); s.state = 'waiting';
+    push(s, 'approval', { approval: a.id, tool, input, state: 'pending' });
+    emit({ type: 'approval', approval: pub(a) });
+    notices.unshift({ id: rid(4), t: Date.now(), title: 'Demo et demana permís', body: `${tool}: ${input.command || ''}`, session: s.id });
+    return p;
+  }
+  function decide(id, decision) {
+    const a = approvals.get(id); if (!a || a.state !== 'pending') return null;
+    a.state = decision === 'allow' ? 'allowed' : 'denied';
+    const s = sessions.get(a.session);
+    if (s) { const ev = s.events.find((e) => e.kind === 'approval' && e.approval === id); if (ev) { ev.state = a.state; emit({ type: 'event', session: s.id, event: ev }); } s.state = runs.has(s.id) ? 'running' : 'idle'; touch(s); }
+    emit({ type: 'approval', approval: pub(a) }); a.resolve(a.state === 'allowed' ? 'allow' : 'deny');
+    return pub(a);
+  }
+  async function run(s, prompt) {
+    let stopped = false; runs.set(s.id, { stop: () => (stopped = true) });
+    if (s.agent === 'ollama') {
+      try {
+        for (const w of `(Resposta simulada de ${s.model || 'qwen3:4b'}.) Amb Ollama de debò, aquí veuries la resposta del model que funciona al teu ordinador, paraula per paraula.`.split(' ')) { if (stopped) throw 0; chunk(s, w + ' '); await sleep(45); }
+        push(s, 'result', { ms: 1800 });
+      } catch { push(s, 'info', { text: 'Has aturat l’agent' }); }
+      runs.delete(s.id); s.state = 'idle'; push(s, 'status', { state: 'idle', code: 0 }); return;
+    }
+    try {
+      for (const w of `Entesos. Faig una ullada al projecte per a «${prompt.slice(0, 80)}».`.split(' ')) { if (stopped) throw 0; chunk(s, w + ' '); await sleep(55); }
+      push(s, 'tool', { id: 't1', name: 'Read', input: { file_path: 'README.md' } }); await sleep(450);
+      push(s, 'tool_result', { id: 't1', name: 'Read', output: '# Projecte de prova\nAixò és un README d’exemple.' });
+      if (stopped) throw 0;
+      const input = { command: 'npm test' };
+      if (s.mode === 'llegir') push(s, 'text', { text: 'Treballo en mode només lectura, així que no executo res. El següent pas seria `npm test`.' });
+      else {
+        const ok = s.mode === 'tot' ? true : (await ask(s, 'Bash', input)) === 'allow';
+        if (stopped) throw 0;
+        push(s, 'tool', { id: 't2', name: 'Bash', input }); await sleep(380);
+        if (ok) { push(s, 'tool_result', { id: 't2', name: 'Bash', output: '✓ 12 tests passen' }); push(s, 'text', { text: 'Fet. Tots els tests passen.' }); }
+        else { push(s, 'tool_result', { id: 't2', name: 'Bash', output: 'Rebutjat des de nio', error: true }); push(s, 'text', { text: 'D’acord, no l’executo. Què vols que faci?' }); }
+      }
+      push(s, 'result', { cost: 0, ms: 2400 });
+      runs.delete(s.id); s.state = 'idle'; push(s, 'status', { state: 'idle', code: 0 });
+    } catch {
+      runs.delete(s.id); s.state = 'idle'; push(s, 'info', { text: 'Has aturat l’agent' }); push(s, 'status', { state: 'idle', code: 130 });
+    }
+  }
+  const info = () => ({ name: 'nio', version: 'prova', host: 'Ordinador de prova', platform: 'navegador', user: 'tu', publicUrl: DEMO_URL, roots: ['~/projectes'], vapidKey: null,
+    agents: [
+      { id: 'demo', name: 'Demo', available: true, version: 'simulat', approvals: true, login: 'No cal instal·lar res' },
+      { id: 'claude', name: 'Claude Code', available: false, approvals: true, login: 'Instal·la nio al teu ordinador' },
+      { id: 'codex', name: 'Codex', available: false, login: 'Instal·la nio al teu ordinador' },
+      { id: 'grok', name: 'Grok', available: false, beta: true, login: 'Instal·la nio al teu ordinador' },
+      { id: 'antigravity', name: 'Antigravity', available: false, beta: true, login: 'Instal·la nio al teu ordinador' }
+    ] });
+  async function request(method, path, body) {
+    await sleep(60);
+    const url = new URL(path, 'http://x'), p = url.pathname; let m;
+    if (p === '/api/info') return info();
+    if (p === '/api/projects') return [{ path: '~/projectes', name: 'projectes', root: true }, { path: '~/projectes/botiga', name: 'botiga', git: true }, { path: '~/projectes/web', name: 'web', git: true }];
+    if (p === '/api/ollama/models') return omodels;
+    if (p === '/api/ollama/chat') {
+      // Sense model de veritat: proposa un mapa amb les paraules clau de la petició.
+      const ask = String(body.messages?.at(-1)?.content || '').split('Petició de l’usuari:').pop().trim();
+      const words = [...new Set(ask.replace(/[^\p{L}\p{N}\s-]/gu, ' ').split(/\s+/).filter((w) => w.length > 3))].slice(0, 7);
+      await sleep(700);
+      return { content: JSON.stringify({ reply: 'Model simulat: amb Ollama de debò entendria la petició sencera. T’he fet un esquema amb les paraules clau.', actions: words.length > 1 ? [{ op: 'mindmap', center: words[0], items: words.slice(1) }] : [] }) };
+    }
+    if (p === '/api/github') return { available: false, authed: false };
+    if (/^\/api\/sessions\/[\w-]+\/git$/.test(p)) return { repo: false };
+    if (p === '/api/pair') return { link: null };
+    if (p === '/api/ollama') return { available: false, host: 'simulat', models: [], running: [], pulling: [] };
+    if (p === '/api/ollama/pull' && method === 'POST') {
+      const name = String(body.name || '').trim(); if (!/^[\w][\w.\-/]{0,100}(:[\w.\-]{1,60})?$/.test(name)) throw err(400, 'Aquest nom de model no és vàlid');
+      if (opulls.has(name) || omodels.some((m) => m.name === name)) return { ok: true, already: true };
+      const total = 1.2e9 + Math.random() * 3e9, job = { name, status: 'pulling manifest', completed: 0, total };
+      job.t = setInterval(() => {
+        job.completed = Math.min(total, job.completed + total / 18); job.status = job.completed < total ? 'pulling' : 'success';
+        emit({ type: 'ollama', name, status: job.status, completed: job.completed, total });
+        if (job.completed >= total) { clearInterval(job.t); opulls.delete(name); omodels.push({ name, size: total, params: '', quant: 'Q4_K_M' }); emit({ type: 'ollama', name, done: true }); }
+      }, 260);
+      opulls.set(name, job); return { ok: true };
+    }
+    if ((m = p.match(/^\/api\/ollama\/pull\/(.+)$/)) && method === 'DELETE') { const j = opulls.get(decodeURIComponent(m[1])); if (j) { clearInterval(j.t); opulls.delete(j.name); emit({ type: 'ollama', name: j.name, done: true, error: 'Descàrrega cancel·lada' }); } return { ok: !!j }; }
+    if ((m = p.match(/^\/api\/ollama\/models\/(.+)$/)) && method === 'DELETE') { const n = decodeURIComponent(m[1]); const i = omodels.findIndex((x) => x.name === n); if (i >= 0) omodels.splice(i, 1); return { ok: true }; }
+    if (p === '/api/sessions' && method === 'GET') return [...sessions.values()].sort((a, b) => b.updated - a.updated).map(summary);
+    if (p === '/api/sessions' && method === 'POST') {
+      if (body.agent !== 'demo' && body.agent !== 'ollama') throw err(400, 'A l’ordinador de prova només hi ha els agents Demo i Ollama');
+      const s = { id: rid(), agent: body.agent, cwd: body.cwd || '~/projectes', title: (body.text || '').replace(/\s+/g, ' ').slice(0, 60), mode: body.mode || 'preguntar', model: body.model || '', state: 'idle', created: Date.now(), updated: Date.now(), seq: 0, events: [] };
+      sessions.set(s.id, s); touch(s);
+      if (body.text) send(s.id, body.text);
+      return summary(s);
+    }
+    if ((m = p.match(/^\/api\/sessions\/([\w-]+)$/))) {
+      const s = sessions.get(m[1]); if (!s) throw err(404, 'Aquesta sessió no existeix');
+      if (method === 'GET') return { session: summary(s), events: s.events.filter((e) => e.seq > Number(url.searchParams.get('since') || 0)) };
+      if (method === 'PATCH') { if (body.mode) s.mode = body.mode; if (typeof body.title === 'string') s.title = body.title.slice(0, 120); touch(s); return summary(s); }
+      if (method === 'DELETE') { runs.get(s.id)?.stop(); sessions.delete(s.id); emit({ type: 'removed', session: s.id }); return { ok: true }; }
+    }
+    if ((m = p.match(/^\/api\/sessions\/([\w-]+)\/message$/))) return send(m[1], body.text);
+    if ((m = p.match(/^\/api\/sessions\/([\w-]+)\/stop$/))) { const r = runs.get(m[1]); r?.stop(); return { stopped: !!r }; }
+    if (p === '/api/approvals') return [...approvals.values()].filter((a) => a.state === 'pending').map(pub);
+    if ((m = p.match(/^\/api\/approvals\/([\w-]+)$/))) { const a = decide(m[1], body.decision); if (!a) throw err(404, 'Aquesta petició ja s’ha resolt'); return a; }
+    if (p === '/api/notices') return notices.slice(0, 5);
+    if (p.startsWith('/api/push')) throw err(400, 'Els avisos només funcionen amb un ordinador de veritat');
+    throw err(404, 'Aquesta ruta no existeix');
+  }
+  function send(sid, text) {
+    const s = sessions.get(sid); if (!s) throw err(404, 'Aquesta sessió no existeix');
+    if (runs.has(sid)) throw err(409, 'L’agent encara està treballant. Espera que acabi o atura’l.');
+    text = String(text || '').trim(); if (!text) throw err(400, 'El missatge és buit');
+    if (!s.title) s.title = text.slice(0, 60);
+    push(s, 'user', { text }); s.state = 'running'; push(s, 'status', { state: 'running' });
+    run(s, text); return summary(s);
+  }
+  function subscribe(fn) {
+    listeners.add(fn);
+    fn({ type: 'hello', sessions: [...sessions.values()].map(summary), approvals: [...approvals.values()].filter((a) => a.state === 'pending').map(pub) });
+    return () => listeners.delete(fn);
+  }
+  return { request, subscribe };
+})();
+
+/* ---------------------------------------------------------------- API */
+async function api(path, opts = {}) {
+  const m = machine();
+  if (!m) throw new Error('No hi ha cap ordinador connectat');
+  const body = opts.body && typeof opts.body !== 'string' ? opts.body : opts.body ? JSON.parse(opts.body) : undefined;
+  if (m.url === DEMO_URL) return demo.request(opts.method || 'GET', path, body || {});
+  const res = await fetch(m.url + path, { ...opts, headers: { Authorization: `Bearer ${m.token}`, 'content-type': 'application/json', ...(opts.headers || {}) }, body: body ? JSON.stringify(body) : undefined });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || `Error ${res.status}`);
+  return data;
+}
+
+let streamCtrl = null, unsubDemo = null, retry = 0;
+async function connect() {
+  streamCtrl?.abort(); unsubDemo?.(); unsubDemo = null;
+  const m = machine();
+  if (!m) { state.connected = false; return render(); }
+  if (m.url === DEMO_URL) {
+    state.info = await api('/api/info'); state.connected = true; state.lastError = null;
+    unsubDemo = demo.subscribe(handle); render(); brainsForBoard(); return;
+  }
+  const ctrl = new AbortController(); streamCtrl = ctrl;
+  try {
+    state.info = await api('/api/info');
+    const res = await fetch(`${m.url}/api/stream`, { headers: { Authorization: `Bearer ${m.token}` }, signal: ctrl.signal, cache: 'no-store' });
+    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); syncServiceWorker(); render(); brainsForBoard();
+    const reader = res.body.getReader(), dec = new TextDecoder(); let buf = '';
+    for (;;) {
+      const { value, done } = await reader.read(); 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);
+        const data = block.split('\n').filter((l) => l.startsWith('data: ')).map((l) => l.slice(6)).join('\n');
+        if (data) handle(JSON.parse(data));
+      }
+    }
+    throw new Error('S’ha tallat la connexió');
+  } catch (e) {
+    if (ctrl.signal.aborted) return;
+    state.connected = false;
+    state.lastError = e.message === 'Failed to fetch' || e.name === 'TypeError' ? 'No arribo a l’ordinador' : e.message;
+    render();
+    if (e.fatal) return;
+    setTimeout(() => machine() && !ctrl.signal.aborted && connect(), Math.min(15000, 1000 * 2 ** retry++));
+  }
+}
+function renameMachine(host) { const ms = store.machines, m = ms[store.active]; if (m && host && m.name !== host) { m.name = host; store.machines = ms; } }
+
+function handle(msg) {
+  const r = state.route;
+  switch (msg.type) {
+    case 'hello':
+      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();
+      if (r.name === 'session') openSession(r.id); else render();
+      break;
+    case 'session':
+      state.sessions.set(msg.session.id, msg.session);
+      if (r.name === 'session' && r.id === msg.session.id) { renderSessionHead(); renderComposer(); renderTyping(); }
+      else if (r.name === 'sessions') renderSoon();
+      renderChrome();
+      break;
+    case 'removed':
+      state.sessions.delete(msg.session);
+      if (r.name === 'session' && r.id === msg.session) go('#/sessions'); else renderSoon();
+      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); }
+      break;
+    }
+    case 'ollama': onOllama(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; }
+      renderChrome();
+      if (r.name === 'approvals') render();
+      break;
+  }
+}
+let soonT = 0;
+const renderSoon = () => { clearTimeout(soonT); soonT = setTimeout(() => state.route.name === 'sessions' && render(), 120); };
+
+/* ---------------------------------------------------------------- connexió amb un ordinador */
+function parsePair(text) {
+  const s = String(text || '').trim(); let hash = '';
+  try { hash = new URL(s).hash; } catch { hash = s.startsWith('#') ? s : s.includes('u=') ? `#${s.split('#').pop()}` : ''; }
+  const p = new URLSearchParams(hash.replace(/^#/, '')), url = p.get('u'), token = p.get('t');
+  if (!url || !token) return null;
+  return { url: url.replace(/\/$/, ''), token };
+}
+function addMachine({ url, token, name }) {
+  const ms = store.machines; let i = ms.findIndex((m) => m.url === url);
+  if (i >= 0) ms[i].token = token; else { ms.push({ url, token, name: name || (url === DEMO_URL ? 'Ordinador de prova' : new URL(url).hostname) }); i = ms.length - 1; }
+  store.machines = ms; store.active = i;
+  state.sessions.clear(); state.approvals.clear(); state.events.clear(); state.loaded.clear(); state.info = null; state.ollama = null;
+  connect();
+}
+function tryDemo() { addMachine({ url: DEMO_URL, token: 'demo', name: 'Ordinador de prova' }); toast('Connectat a l’ordinador de prova'); go('#/sessions'); }
+function checkPairHash() {
+  const pair = parsePair(location.hash); if (!pair) return false;
+  history.replaceState(null, '', location.pathname + '#/sessions');
+  state.route = { name: 'sessions' };
+  addMachine(pair); render(); toast('Ordinador connectat'); return true;
+}
+
+/* ---------------------------------------------------------------- navegació */
+const VIEWS = {
+  sessions: { label: 'Sessions', icon: ICON.sessions, group: 'Feina' },
+  approvals: { label: 'Aprovacions', icon: ICON.approvals, group: 'Feina' },
+  models: { label: 'Models', icon: ICON.models, group: 'Ordinador' },
+  maquina: { label: 'Ordinador', icon: ICON.machine, group: 'Ordinador' },
+  mobil: { label: 'Xat local', icon: ICON.phone, group: 'Eines' },
+  pissarra: { label: 'Pissarra', icon: ICON.board, group: 'Eines' }
+};
+const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', mobil: '#/mobil', models: '#/models', maquina: '#/ordinador', pissarra: '#/pissarra' };
+function parseRoute() {
+  const h = location.hash.replace(/^#\/?/, '');
+  if (h.startsWith('s/')) return { name: 'session', id: h.slice(2) };
+  const k = Object.keys(HASH).find((k) => HASH[k] === '#/' + h);
+  return { name: k || 'sessions' };
+}
+function go(hash) { if (location.hash === hash) route(); else location.hash = hash; }
+let lastName = null;
+function route() {
+  if (checkPairHash()) return;
+  state.route = parseRoute();
+  if (state.route.name === 'session') openSession(state.route.id); else render();
+}
+
+/* ---------------------------------------------------------------- pintat general */
+function renderChrome() {
+  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) => {
+    const head = v.group !== prev ? `<span class="grp" style="--i:${i}">${v.group}</span>` : '';
+    prev = v.group;
+    return `${head}<a href="${HASH[k]}" style="--i:${i}" title="${v.label}" ${k === active ? 'aria-current="page"' : ''}>${svg(v.icon)}<span class="l">${v.label}</span>${k === 'approvals' && n ? `<span class="badge">${n}</span>` : ''}</a>`;
+  }).join('');
+  const m = machine();
+  const many = store.machines.length > 1, sc = $('#sideConn');
+  sc.innerHTML = m ? `<i class="dot ${state.connected ? 'on' : ''}"></i><span>${esc(state.connected ? m.name : state.lastError ? 'Sense connexió' : 'Connectant…')}</span>${many ? svg(ICON.chev) : ''}` : '<i class="dot"></i><span>Cap ordinador connectat</span>';
+  sc.classList.toggle('switch', many); many ? (sc.setAttribute('role', 'button'), sc.tabIndex = 0, sc.dataset.act = 'machines', sc.title = 'Canvia d’ordinador') : (sc.removeAttribute('role'), sc.removeAttribute('tabindex'), delete sc.dataset.act, sc.removeAttribute('title'));
+  const s = r.name === 'session' ? state.sessions.get(r.id) : null;
+  $('#here').textContent = s ? s.title || 'Sessió nova' : VIEWS[r.name]?.label || '';
+  $('#mRight').innerHTML = r.name === 'session'
+    ? `<button class="icon-btn" data-act="session-more" aria-label="Opcions de la sessió">${svg(ICON.more)}</button>`
+    : `<a class="icon-btn" href="#/aprovacions" aria-label="${n ? `Aprovacions, ${n} pendents` : 'Aprovacions'}">${svg(ICON.bell)}${n ? `<span class="badge">${n}</span>` : ''}</a>`;
+  document.title = n ? `(${n}) nio` : `nio // ${s ? s.title || 'Sessió' : VIEWS[r.name]?.label || 'Panell'}`;
+  if ('setAppBadge' in navigator) (n ? navigator.setAppBadge(n) : navigator.clearAppBadge()).catch?.(() => {});
+}
+function render() {
+  const r = state.route, view = $('#view'), board = r.name === 'pissarra';
+  renderChrome();
+  document.body.classList.toggle('board-mode', board);
+  document.body.classList.toggle('chat-mode', r.name === 'session' || (r.name === 'mobil' && !!local.engine));
+  if (!board && lastName === 'pissarra') window.NioBoard?.unmount();
+  if (board && lastName === 'pissarra' && $('#boardRoot')) return;
+  const changed = lastName !== r.name || r.name === 'session';
+  lastName = r.name;
+  if (r.name === 'session') renderSession();
+  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 : !machine() && r.name !== 'maquina' ? viewConnect() : r.name === 'sessions' ? viewSessions() : r.name === 'approvals' ? viewApprovals() : r.name === 'models' ? viewModels() : viewMachine()}</div>`;
+    if (r.name === 'mobil') bindLocal();
+    if (r.name === 'models' && machine()) loadOllama();
+  }
+  if (changed && !board) { view.classList.remove('view-enter'); void view.offsetWidth; view.classList.add('view-enter'); }
+  window.NioBot?.refresh();
+  tourUpdate();
+}
+
+/* ---------- Connecta */
+function viewConnect(compact = false) {
+  const CMD = 'npx nio-cat';
+  const main = `<div class="panel conn-main">
+      <ol class="stepper">
+        <li><span class="n">1</span><div><b>Engega nio</b><p>Al terminal, des de la carpeta dels teus projectes.</p></div></li>
+        <li><span class="n">2</span><div><b>Escaneja el QR</b><p>Amb la càmera del mòbil. S’obrirà nio connectat.</p></div></li>
+        <li><span class="n">3</span><div><b>Dona-li feina</b><p>Tria un agent i una carpeta, i explica què vols.</p></div></li>
+      </ol>
+      <div class="cmd big"><code>${CMD}</code><button class="btn sm" data-copy="${CMD}" type="button">${svg(ICON.copy)}Copia</button></div>
+      <div class="reqs"><span class="chip">Node.js 18 o més nou</span><span class="chip ghost">cloudflared · opcional</span></div>
+      <p class="muted small">Sense <span class="mono">cloudflared</span> et connectes per la wifi de casa. Amb ell, des de qualsevol lloc (a macOS: <span class="mono">brew install cloudflared</span>).</p>
+      <details class="paste" ${compact ? 'open' : ''}><summary>Ja tens l’enllaç del terminal?</summary>
+        <form class="pair-form" id="pairForm"><input type="url" id="pairInput" placeholder="https://www.nio.cat/app#u=…&t=…" autocomplete="off" autocapitalize="off" spellcheck="false" required aria-label="Enllaç de connexió"><button class="btn ink" type="submit">Connecta</button></form>
+        <p class="muted small">El trobaràs sota el codi QR. Va bé si fas servir nio des de la pantalla d’inici.</p>
+      </details>
+    </div>`;
+  if (compact) return main;
+  return `<section class="connect">
+    <div class="connect-head"><h1>Connecta el teu ordinador</h1><p class="lead">Els agents treballen al teu ordinador, amb els teus comptes i els teus fitxers. Des d’aquí els dones feina, els veus treballar i aproves el que facin.</p></div>
+    <div class="connect-grid">
+      ${main}
+      <aside class="panel try">${bot('happy')}<h2>Prova-ho sense instal·lar res</h2><p class="muted small">Un ordinador simulat dins del navegador, amb un agent de demostració que llegeix, et demana permís i executa.</p><button class="btn ink block" data-act="demo" type="button">Obre l’ordinador simulat</button><a class="btn ghost block" href="#/mobil">O fes servir el xat local</a></aside>
+    </div>
+  </section>`;
+}
+
+/* ---------- Sessions */
+function stateChip(s) {
+  if (s.pending || s.state === 'waiting') return '<span class="chip waiting"><i class="pulse"></i>Espera el teu permís</span>';
+  if (s.state === 'running') return '<span class="chip running"><i class="pulse"></i>Treballant</span>';
+  if (s.state === 'error') return '<span class="chip error">Error</span>';
+  return '';
+}
+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" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button></div>${hint}`;
+  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>Comprova que nio continua engegat a l’ordinador i que el túnel està obert.</p><button class="btn" data-act="retry" type="button">${svg(ICON.refresh)}Torna-ho a provar</button>` : ''}</div>`;
+  }
+  return `${head}${list.length ? `<div class="list">${list.map((s) => `
+    <a class="card session-card" href="#/s/${esc(s.id)}">
+      <div class="row between"><span class="agent-tag" data-agent="${esc(s.agent)}">${esc(AGENT_NAMES[s.agent] || s.agent)}</span>${stateChip(s)}</div>
+      <div class="title">${esc(s.title || 'Sessió nova')}</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>`}`;
+}
+
+/* ---------- Aprovacions */
+function approvalCard(a, showSession = true) {
+  const decided = a.state && a.state !== 'pending';
+  if (decided && !showSession) {
+    // Ja resolta: una sola línia, perquè la conversa es llegeixi bé.
+    const ok = a.state === 'allowed';
+    return `<div class="approval done ${esc(a.state)}" data-approval="${esc(a.approval || a.id)}"><span class="verdict ${esc(a.state)}">${ok ? '✓ Aprovat' : '✕ Rebutjat'}</span><span class="what"><b>${esc(a.tool)}</b> <span class="mono">${esc(toolArg(a.input))}</span></span></div>`;
+  }
+  return `<div class="approval ${decided ? 'done' : ''}" data-approval="${esc(a.approval || a.id)}">
+    ${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>
+    ${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>`}`;
+}
+// Marca una aprovació com a resolta a tot arreu: a la llista, a la conversa i a l'esdeveniment desat.
+function markDecided(id, st) {
+  state.approvals.delete(id);
+  for (const evs of state.events.values()) for (const ev of evs.values()) if (ev.kind === 'approval' && ev.approval === id) ev.state = st;
+  $$(`#feed [data-approval="${CSS.escape(id)}"]`).forEach((card) => {
+    const ev = [...(state.events.get(state.route.id)?.values() || [])].find((x) => x.kind === 'approval' && x.approval === id);
+    if (ev) card.replaceWith(el(approvalCard({ approval: id, tool: ev.tool, input: ev.input, state: st }, false)));
+  });
+  $$(`.page [data-approval="${CSS.escape(id)}"]`).forEach((card) => {
+    card.classList.add('done', 'leaving');
+    const acts = $('.actions', card); if (acts) acts.outerHTML = `<div class="verdict ${st}">${st === 'allowed' ? '✓ Ho has aprovat' : '✕ Ho has rebutjat'}</div>`;
+    setTimeout(() => { if (state.route.name === 'approvals') render(); }, 1100);
+  });
+  renderChrome();
+}
+async function decide(card, decision) {
+  const id = card.dataset.approval;
+  $$('button', card).forEach((b) => (b.disabled = true));
+  try { await api(`/api/approvals/${id}`, { method: 'POST', body: { decision } }); markDecided(id, decision === 'allow' ? 'allowed' : 'denied'); if (navigator.vibrate) navigator.vibrate(15); }
+  catch (e) { toast(e.message); $$('button', card).forEach((b) => (b.disabled = false)); }
+}
+
+/* ---------- Sessió */
+async function openSession(id) {
+  state.route = { name: 'session', id };
+  render();
+  if (!state.loaded.has(id) && machine()) {
+    try {
+      const data = await api(`/api/sessions/${id}`);
+      state.sessions.set(id, data.session);
+      state.events.set(id, new Map(data.events.map((e) => [e.seq, e])));
+      state.loaded.add(id);
+      if (state.route.name === 'session' && state.route.id === id) render();
+    } catch (e) { toast(e.message); }
+  }
+}
+let feedEls = new Map(), toolEls = new Map();
+function renderSession() {
+  const id = state.route.id, view = $('#view');
+  view.innerHTML = `<section class="chat">
+    <div class="chat-head"><a class="icon-btn" href="#/sessions" aria-label="Torna a les sessions">${svg(ICON.back)}</a><span id="headBot"></span><div class="grow"><h1 id="sessTitle"></h1><div class="sub" id="sessSub"></div></div><button class="icon-btn" data-act="session-more" aria-label="Opcions de la sessió">${svg(ICON.more)}</button></div>
+    <div class="mode-bar" id="modeBar"></div>
+    <div class="feed" id="feed" aria-live="polite"></div>
+    <div class="composer" id="composer"></div>
+  </section>`;
+  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>`;
+  else for (const e of [...evs.values()].sort((a, b) => a.seq - b.seq)) putEvent(e, false);
+  renderTyping(); renderComposer();
+  requestAnimationFrame(() => (feed.scrollTop = feed.scrollHeight));
+}
+function sessionMood(s) { return !s ? 'idle' : s.state === 'running' ? 'work' : s.state === 'waiting' || s.pending ? 'peek' : s.state === 'error' ? 'sleep' : 'idle'; }
+function renderSessionHead() {
+  renderChrome();
+  const s = state.sessions.get(state.route.id), bar = $('#modeBar');
+  if (!bar) return;
+  $('#sessTitle').textContent = s?.title || 'Sessió nova';
+  $('#sessSub').textContent = s ? `${AGENT_NAMES[s.agent] || s.agent} · ${basename(s.cwd)}` : '';
+  const hb = $('#headBot'); if (hb) { hb.innerHTML = bot(sessionMood(s)); window.NioBot?.refresh(); }
+  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" data-agent="${esc(s.agent)}">${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>`}
+    <span class="chip mono">${esc(basename(s.cwd))}</span>
+    ${s.model ? `<span class="chip mono">${esc(s.model)}</span>` : ''}
+    ${s.cost ? `<span class="chip mono">${s.cost.toFixed(2)} $</span>` : ''}
+    ${stateChip(s)}`;
+}
+const nearBottom = (f) => f.scrollHeight - f.scrollTop - f.clientHeight < 140;
+function putEvent(e, scroll = true) {
+  const feed = $('#feed'); if (!feed) return;
+  const stick = nearBottom(feed);
+  if (e.kind === 'tool_result') {
+    const t = toolEls.get(e.id);
+    if (t) {
+      const st = $('.st', t); st.className = `st ${e.error ? 'err' : 'ok'}`; st.textContent = e.error ? '✕' : '✓';
+      let pre = $('pre.out', t); if (!pre && e.output) { pre = el('<pre class="out"></pre>'); t.appendChild(pre); }
+      if (pre) pre.textContent = e.output;
+      return;
+    }
+  }
+  if (e.kind === 'status') { renderTyping(); return; }
+  if (e.kind === 'log') {
+    const last = $('.typing', feed) ? $('.typing', feed).previousElementSibling : feed.lastElementChild;
+    if (last && last.classList.contains('ev-logs')) { const pre = $('pre', last); pre.textContent += `\n${e.text}`; $('summary', last).textContent = `Registre del procés (${pre.textContent.split('\n').length} línies)`; return; }
+  }
+  const node = eventNode(e); if (!node) return;
+  const old = feedEls.get(e.seq);
+  if (old) old.replaceWith(node); else { const typing = $('.typing', feed); typing ? feed.insertBefore(node, typing) : feed.appendChild(node); }
+  feedEls.set(e.seq, node);
+  if (e.kind === 'tool') toolEls.set(e.id, node);
+  renderTyping();
+  if (scroll && stick) feed.scrollTop = feed.scrollHeight;
+}
+function eventNode(e) {
+  const s = state.sessions.get(state.route.id);
+  switch (e.kind) {
+    case 'user': return el(`<div class="msg-user">${esc(e.text)}</div>`);
+    case 'text': return el(`<div class="msg-ai ${e.open && s?.state === 'running' ? 'cursor' : ''}">${md(e.text)}</div>`);
+    case 'tool': return el(`<details class="tool"><summary><span class="name">${esc(e.name)}</span><span class="arg">${esc(toolArg(e.input))}</span><span class="st">…</span></summary><pre>${esc(prettyInput(e.input))}</pre></details>`);
+    case 'tool_result': return el(`<details class="tool"><summary><span class="name">${esc(e.name || 'Eina')}</span><span class="arg"></span><span class="st ${e.error ? 'err' : 'ok'}">${e.error ? '✕' : '✓'}</span></summary><pre class="out">${esc(e.output)}</pre></details>`);
+    case 'approval': { const a = state.approvals.get(e.approval) || {}; return el(approvalCard({ ...a, approval: e.approval, tool: e.tool, input: e.input, state: e.state && e.state !== 'pending' ? e.state : a.state || e.state }, false)); }
+    case 'error': return el(`<div class="ev-error">${esc(e.text)}</div>`);
+    case 'info': return el(`<div class="ev-info">${esc(e.text)}</div>`);
+    case 'result': {
+      const bits = [];
+      if (typeof e.cost === 'number' && e.cost > 0) bits.push(`${e.cost.toFixed(3)} $`);
+      if (e.ms) bits.push(`${(e.ms / 1000).toFixed(1).replace('.', ',')} s`);
+      if (e.tokens?.output_tokens || e.tokens?.output) bits.push(`${e.tokens.output_tokens || e.tokens.output} tokens`);
+      if (e.error) bits.push(String(e.error));
+      return bits.length ? el(`<div class="ev-result">${bits.map((b) => `<span>${esc(b)}</span>`).join('<span>·</span>')}</div>`) : null;
+    }
+    case 'log': return el(`<details class="ev-logs"><summary>Registre del procés (1 línia)</summary><pre>${esc(e.text)}</pre></details>`);
+    default: return null;
+  }
+}
+function renderTyping() {
+  const feed = $('#feed'); if (!feed) return;
+  const s = state.sessions.get(state.route.id), busy = s && s.state === 'running', evs = state.events.get(state.route.id);
+  const last = evs ? [...evs.values()].sort((a, b) => b.seq - a.seq).find((x) => x.kind !== 'status' && x.kind !== 'log') : null;
+  const streaming = last && last.kind === 'text' && last.open;
+  let t = $('.typing', feed);
+  if (busy && !streaming) { if (!t) { feed.appendChild(el(`<div class="typing">${bot('work')}<span>${esc(AGENT_NAMES[s.agent] || 'L’agent')} està treballant…</span></div>`)); window.NioBot?.refresh(); } }
+  else if (t) t.remove();
+  if (!busy) $$('.msg-ai.cursor', feed).forEach((n) => n.classList.remove('cursor'));
+  const hb = $('#headBot .bot'); if (hb) hb.dataset.mood = sessionMood(s);
+}
+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);
+  box.innerHTML = `<div class="inner"><textarea rows="1" id="msg" placeholder="${busy ? 'L’agent està treballant…' : 'Escriu a l’agent…'}" enterkeyhint="send" aria-label="Missatge"></textarea><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 = () => { ta.style.height = 'auto'; ta.style.height = `${Math.min(ta.scrollHeight, 180)}px`; };
+  grow(); ta.addEventListener('input', grow);
+  const send = async () => {
+    const text = ta.value.trim(); if (!text || !s) return;
+    ta.value = ''; grow();
+    try { await api(`/api/sessions/${s.id}/message`, { method: 'POST', body: { text } }); }
+    catch (e) { ta.value = text; grow(); toast(e.message, 4200); }
+  };
+  ta.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey && !isTouch && !e.isComposing) { e.preventDefault(); send(); } });
+  $('#sendBtn').onclick = async () => { if (busy) { try { await api(`/api/sessions/${s.id}/stop`, { method: 'POST' }); } catch (e) { toast(e.message); } } else send(); };
+}
+
+/* ---------- Fulls */
+function openSheet(html, onMount) {
+  const d = $('#sheet'); $('#sheetIn').innerHTML = `<div class="grab"></div>${html}`;
+  if (!d.open) d.showModal(); if (T.on) $('#tour').hidden = true;
+  onMount?.($('#sheetIn'));
+}
+const closeSheet = () => { const d = $('#sheet'); if (d.open) d.close(); };
+$('#sheet').addEventListener('click', (e) => { if (e.target.id === 'sheet') closeSheet(); });
+
+function modeHelp(agentId, mode) {
+  const a = state.info?.agents?.find((x) => x.id === agentId);
+  if (mode === 'llegir') return 'Llegeix el projecte i et proposa canvis, però no toca cap fitxer.';
+  if (mode === 'tot') return 'Treballa sense preguntar. Fes-lo servir només en carpetes on confiïs plenament.';
+  if (a?.approvals) return 'Llegeix sol. Abans d’editar un fitxer o d’executar una ordre, et demana permís aquí.';
+  if (agentId === 'codex') return 'Pot editar dins la carpeta, sense accés a internet. Codex no pot fer preguntes en aquest mode.';
+  return 'Aquest agent encara no pot demanar permís: les accions que el necessitarien es rebutgen.';
+}
+async function newSessionSheet(preset = {}) {
+  if (!machine()) return go('#/sessions');
+  if (!state.connected) return toast('Encara no hi ha connexió amb l’ordinador');
+  const agents = [...(state.info?.agents || [])].sort((x, y) => Number(!!y.available) - Number(!!x.available));
+  let projects = [];
+  try { projects = await api('/api/projects'); } catch (e) { return toast(e.message); }
+  const first = (isDemo() && agents.find((a) => a.id === 'demo')) || agents.find((a) => a.available && a.id !== 'demo') || agents.find((a) => a.available);
+  const sel = { agent: first?.id || 'demo', cwd: projects.find((p) => !p.root)?.path || projects[0]?.path, mode: 'preguntar', model: '', ...preset };
+  openSheet(`<h2>Nova sessió</h2>
+    <div class="stack"><div class="section-title" style="margin:0">Agent</div><div class="picker" id="agentPick"></div></div>
+    <div class="stack"><div class="row between"><div class="section-title" style="margin:0">Carpeta</div><button class="chip" type="button" id="ghOpen">Clona de GitHub</button></div><div class="proj-list" id="projPick"></div><div class="stack" id="ghWrap" hidden></div></div>
+    <div class="stack" id="modeWrap"><div class="section-title" style="margin:0">Permisos</div><div class="seg" id="modePick" role="group">${Object.entries(MODES).map(([k, m]) => `<button type="button" data-mode="${k}">${m.label}</button>`).join('')}</div><p class="muted small" id="modeHelp"></p></div>
+    <div id="modelWrap"></div>
+    <label class="f"><span>Què ha de fer?</span><textarea class="field" id="firstMsg" rows="3" placeholder="Per exemple: troba per què fallen els tests i arregla-ho"></textarea></label>
+    <div class="row between sheet-foot"><button class="btn ghost" type="button" data-close>Cancel·la</button><button class="btn ink" id="startBtn" type="button">Comença</button></div>`, (sh) => {
+    const paint = () => {
+      $('#agentPick', sh).innerHTML = agents.map((a) => `<button type="button" class="pick ${a.available ? '' : 'off'}" data-agent-id="${esc(a.id)}" aria-pressed="${a.id === sel.agent}"><div class="row between"><span class="agent-tag" data-agent="${esc(a.id)}">${esc(a.name)}</span>${a.beta ? '<span class="chip beta">beta</span>' : ''}</div><div class="sub">${esc(a.available ? a.version || 'Disponible' : 'No instal·lat')}</div></button>`).join('');
+      $('#projPick', sh).innerHTML = projects.map((p) => `<button type="button" class="proj" data-path="${esc(p.path)}" aria-pressed="${p.path === sel.cwd}"><span class="ic">${p.git ? 'git' : '·'}</span><span class="grow"><div>${esc(p.name)}</div><div class="p">${esc(p.path)}</div></span></button>`).join('') || '<p class="muted small">No hi ha carpetes compartides.</p>';
+      const ag = agents.find((a) => a.id === sel.agent);
+      $('#modeWrap', sh).hidden = !!ag?.noModes;
+      $$('#modePick button', sh).forEach((b) => b.setAttribute('aria-pressed', b.dataset.mode === sel.mode));
+      $('#modeHelp', sh).textContent = modeHelp(sel.agent, sel.mode);
+    };
+    const paintModel = async () => {
+      const w = $('#modelWrap', sh);
+      if (sel.agent === 'ollama') {
+        const models = await api('/api/ollama/models').catch(() => []);
+        if (!sel.model) sel.model = models[0]?.name || '';
+        w.innerHTML = `<label class="f"><span>Model</span><select id="modelSel">${models.map((m) => `<option ${m.name === sel.model ? 'selected' : ''}>${esc(m.name)}</option>`).join('') || '<option value="">Cap model (ollama pull qwen3:4b)</option>'}</select></label>`;
+        $('#modelSel', sh).onchange = (e) => (sel.model = e.target.value);
+      } else if (sel.agent === 'demo') w.innerHTML = '';
+      else {
+        w.innerHTML = '<label class="f"><span>Model <span class="muted">(opcional)</span></span><input type="text" id="modelIn" placeholder="El que l’agent faci servir per defecte" autocapitalize="off" spellcheck="false"></label>';
+        $('#modelIn', sh).value = sel.model; $('#modelIn', sh).oninput = (e) => (sel.model = e.target.value.trim());
+      }
+    };
+    let ghRepos = null;
+    const ghPaint = (q = '') => {
+      const w = $('#ghList', sh); if (!w) return;
+      const qq = q.trim().toLowerCase(), list = (ghRepos || []).filter((r) => !qq || r.repo.toLowerCase().includes(qq) || r.description.toLowerCase().includes(qq)).slice(0, 40);
+      w.innerHTML = list.map((r) => `<button type="button" class="proj" data-repo="${esc(r.repo)}"><span class="ic">git</span><span class="grow"><div>${esc(r.repo)}${r.private ? ' <span class="chip beta">privat</span>' : ''}</div>${r.description ? `<div class="p">${esc(r.description)}</div>` : ''}</span></button>`).join('') || '<p class="muted small">No hi ha cap repositori amb aquest nom.</p>';
+    };
+    const ghOpen = async () => {
+      const w = $('#ghWrap', sh); if (!w.hidden) { w.hidden = true; return; }
+      w.hidden = false; w.innerHTML = '<p class="muted small">Connectant amb GitHub…</p>';
+      let st; try { st = await api('/api/github'); } catch (e) { w.innerHTML = `<p class="muted small">${esc(e.message)}</p>`; return; }
+      if (!st.available) { w.innerHTML = '<p class="muted small">No trobo l’eina <span class="mono">gh</span> en aquest ordinador. Instal·la-la des de <a href="https://cli.github.com" target="_blank" rel="noopener">cli.github.com</a> i inicia sessió amb <span class="mono">gh auth login</span>.</p>'; return; }
+      if (!st.authed) { w.innerHTML = '<p class="muted small">Falta iniciar sessió a GitHub. Al terminal de l’ordinador, executa <span class="mono">gh auth login</span>.</p>'; return; }
+      w.innerHTML = `<input type="search" id="ghQ" placeholder="Cerca entre els teus repositoris${st.user ? ' (' + esc(st.user) + ')' : ''}" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Cerca un repositori"><div class="proj-list" id="ghList"><p class="muted small">Carregant repositoris…</p></div>`;
+      $('#ghQ', sh).oninput = (e) => ghPaint(e.target.value);
+      try { ghRepos = await api('/api/github/repos'); ghPaint(); } catch (e) { $('#ghList', sh).innerHTML = `<p class="muted small">${esc(e.message)}</p>`; }
+    };
+    $('#ghOpen', sh).onclick = ghOpen;
+    const ghClone = async (repo, btn) => {
+      btn.disabled = true; btn.querySelector('.p, div')?.insertAdjacentHTML('beforeend', ' <span class="muted">· clonant…</span>');
+      try {
+        const r = await api('/api/github/clone', { method: 'POST', body: { repo } });
+        if (!projects.some((p) => p.path === r.path)) projects.unshift({ path: r.path, name: r.path.split(/[\\/]/).pop(), root: false, git: true });
+        sel.cwd = r.path; $('#ghWrap', sh).hidden = true; paint(); toast(r.existed ? 'Ja el tenies. L’he seleccionat.' : 'Repositori clonat');
+      } catch (e) { btn.disabled = false; toast(e.message, 6000); }
+    };
+    sh.onclick = (e) => {
+      const rp = e.target.closest('[data-repo]'); if (rp) return ghClone(rp.dataset.repo, rp);
+      if (e.target.closest('[data-close]')) return closeSheet();
+      const ag = e.target.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); sel.agent = a.id; sel.model = ''; paint(); paintModel(); }
+      const pj = e.target.closest('[data-path]'); if (pj) { sel.cwd = pj.dataset.path; paint(); }
+      const mo = e.target.closest('[data-mode]'); if (mo) { sel.mode = mo.dataset.mode; paint(); }
+    };
+    paint(); paintModel();
+    $('#startBtn', sh).onclick = async () => {
+      const text = $('#firstMsg', sh).value.trim();
+      if (!text) { $('#firstMsg', sh).focus(); return toast('Explica a l’agent què ha de fer'); }
+      $('#startBtn', sh).disabled = true;
+      try { const s = await api('/api/sessions', { method: 'POST', body: { ...sel, text } }); state.sessions.set(s.id, s); closeSheet(); go(`#/s/${s.id}`); }
+      catch (e) { toast(e.message, 4200); $('#startBtn', sh).disabled = false; }
+    };
+    if (!isTouch) setTimeout(() => $('#firstMsg', sh)?.focus(), 80);
+  });
+}
+function modeSheet(s) {
+  openSheet(`<h2>Permisos</h2><div class="list">${Object.entries(MODES).map(([k, m]) => `<button class="card" type="button" data-m="${k}" style="${k === s.mode ? 'border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)' : ''}"><b>${m.label}</b><div class="muted small" style="margin-top:4px">${esc(modeHelp(s.agent, k))}</div></button>`).join('')}</div><p class="muted small">El canvi s’aplica a partir del pròxim missatge.</p>`, (sh) => {
+    $$('[data-m]', sh).forEach((b) => (b.onclick = async () => {
+      try { const sum = await api(`/api/sessions/${s.id}`, { method: 'PATCH', body: { mode: b.dataset.m } }); state.sessions.set(s.id, sum); closeSheet(); renderSessionHead(); }
+      catch (e) { toast(e.message); }
+    }));
+  });
+}
+/* ---------- Ordinadors i mòbil */
+const isRealMachine = () => { const m = machine(); return !!m && m.url !== DEMO_URL; };
+const isLocalMachine = () => { const m = machine(); try { return !!m && ['127.0.0.1', 'localhost', '[::1]'].includes(new URL(m.url).hostname); } catch { return false; } };
+function mobileHint() {
+  if (!isLocalMachine() || !state.connected || LS.get('nio.mobHint.off', false)) return '';
+  return `<div class="panel hint"><div class="row between" style="flex-wrap:wrap;gap:12px"><div><b>Vols fer-lo servir al mòbil?</b><p class="muted small" style="margin-top:2px">Escaneja un codi i continues des del telèfon, amb les mateixes sessions.</p></div><div class="row"><button class="btn ghost" type="button" data-act="mobile-hint-off">Ara no</button><button class="btn ink" type="button" data-act="mobile-qr">Mostra el QR</button></div></div></div>`;
+}
+function machinesSheet() {
+  const ms = store.machines;
+  openSheet(`<h2>Ordinadors</h2><div class="stack">${ms.map((x, i) => `<button class="card row" type="button" data-machine="${i}" style="flex-wrap:nowrap"><i class="dot ${i === store.active && state.connected ? 'on' : ''}"></i><span class="grow"><b>${esc(x.name)}</b><div class="muted small mono" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(x.url === DEMO_URL ? 'Dins del navegador' : x.url)}</div></span>${i === store.active ? '<span class="chip">Actiu</span>' : ''}</button>`).join('')}
+    <div class="row between sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button><button class="btn ink" type="button" data-act="add-machine">${svg(ICON.plus)}Connecta’n un altre</button></div></div>`, (sh) => { $('[data-close]', sh).onclick = closeSheet; });
+}
+function addMachineSheet() {
+  const cmd = (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>`;
+  openSheet(`<h2>Connecta un altre ordinador</h2>
+    <div class="stack-lg">
+      <div class="stack"><b>Un ordinador</b><p class="muted small">Al terminal de l’altre ordinador, des de la carpeta dels projectes:</p>${cmd('npx nio-cat')}<p class="muted small">Escaneja el QR que surt, o enganxa aquí sota l’enllaç.</p></div>
+      <div class="stack"><b>Un servidor (VPS)</b><p class="muted small">Al servidor, amb l’adreça pública amb HTTPS (Tailscale, Cloudflare o Caddy):</p>${cmd('npx nio-cat --url https://la-teva-adreça --no-open')}<p class="muted small">Deixa’l sota <span class="mono">tmux</span>, <span class="mono">pm2</span> o <span class="mono">systemd</span> perquè no s’aturi. Copia l’enllaç que mostra i enganxa’l aquí.</p></div>
+      <form class="pair-form" id="pairForm"><input type="url" id="pairInput" placeholder="https://…/app#u=…&t=…" autocomplete="off" autocapitalize="off" spellcheck="false" required aria-label="Enllaç de connexió"><button class="btn ink" type="submit">Connecta</button></form>
+    </div>`);
+}
+let qrTimer = 0;
+function mobileQrSheet() {
+  clearTimeout(qrTimer);
+  const paint = async (n = 0) => {
+    const box = $('#qrBox'); if (!box) return;
+    let r; try { r = await api('/api/pair'); } catch (e) { box.innerHTML = `<p class="muted small">${esc(e.message)}</p>`; return; }
+    if (!$('#qrBox')) return;
+    if (!r.link) {
+      box.innerHTML = `<p class="muted small">Encara no hi ha cap adreça per al mòbil.${n < 8 ? ' Estic esperant el túnel…' : ''}</p><p class="muted small">Engega nio amb <span class="mono">--lan</span> (mateixa wifi) o instal·la <span class="mono">cloudflared</span> per connectar-t’hi des de qualsevol lloc.</p>`;
+      if (n < 8) qrTimer = setTimeout(() => paint(n + 1), 2000);
+      return;
+    }
+    box.innerHTML = `<div class="qr-box">${r.svg}</div><p class="muted small">Escaneja-ho amb la càmera del mòbil.${r.lan ? ' El mòbil ha d’estar a la mateixa wifi.' : ''}</p><button class="btn" type="button" data-copy="${esc(r.link)}">${svg(ICON.copy)}Copia l’enllaç</button>`;
+  };
+  openSheet(`<h2>Continua al mòbil</h2><div class="stack" id="qrBox"><p class="muted small">Preparant el codi…</p></div><div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button></div>`, (sh) => { $('[data-close]', sh).onclick = closeSheet; });
+  paint();
+}
+
+/* ---------- Git i GitHub d'una sessió */
+async function gitSheet(id) {
+  const s = state.sessions.get(id); if (!s) return;
+  openSheet(`<h2>Git i GitHub</h2><p class="muted small" id="gitBody">Mirant els canvis…</p>`);
+  const load = async () => {
+    let g; try { g = await api(`/api/sessions/${id}/git`); } catch (e) { $('#sheetIn').querySelector('#gitBody, #gitWrap').outerHTML = `<p class="muted small" id="gitBody">${esc(e.message)}</p>`; return; }
+    const sh = $('#sheetIn');
+    if (!g.repo) { sh.innerHTML = `<div class="grab"></div><h2>Git i GitHub</h2><p class="muted small">Aquesta carpeta no és un repositori git.</p><div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button></div>`; $('[data-close]', sh).onclick = closeSheet; return; }
+    const stamp = new Date().toISOString().slice(0, 16).replace(/[-:T]/g, '').replace(/^(\d{8})/, '$1-');
+    const files = g.files.slice(0, 12).map((f) => `<div class="row" style="gap:10px"><span class="chip" style="min-width:26px;justify-content:center">${esc(f.status)}</span><span class="mono small" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(f.path)}</span></div>`).join('');
+    const canPr = !g.defaultBranch && g.remote && g.gh?.authed;
+    sh.innerHTML = `<div class="grab"></div><h2>Git i GitHub</h2><div class="stack-lg" id="gitWrap">
+      <dl class="kv"><dt>Branca</dt><dd class="mono">${esc(g.branch)}</dd>${g.remote ? `<dt>Remot</dt><dd class="mono">${esc(g.remote)}${g.ahead ? ` · ${g.ahead} commit${g.ahead > 1 ? 's' : ''} per pujar` : ''}</dd>` : ''}${g.stat ? `<dt>Canvis</dt><dd>${esc(g.stat)}</dd>` : ''}</dl>
+      ${g.files.length ? `<div class="stack"><b>${g.files.length} fitxer${g.files.length > 1 ? 's' : ''} amb canvis</b>${files}${g.files.length > 12 ? `<p class="muted small">I ${g.files.length - 12} més.</p>` : ''}</div>
+      <div class="stack"><label class="f"><span>Missatge del commit</span><input type="text" id="gitMsg" maxlength="200" placeholder="Què has canviat?"></label>
+        ${g.defaultBranch ? `<label class="f"><span>Branca nova (recomanat, ets a ${esc(g.branch)})</span><input type="text" id="gitBranch" value="nio/${stamp}" maxlength="80" autocapitalize="off" spellcheck="false"></label>` : ''}
+        <div class="row"><button class="btn ink" id="gitCommit" type="button">Fes commit</button></div></div>` : '<p class="muted small">No hi ha canvis per desar.</p>'}
+      ${canPr ? `<div class="stack"><b>Pull request</b><label class="f"><span>Títol</span><input type="text" id="prTitle" maxlength="200" placeholder="Si ho deixes buit, es fa servir el dels commits"></label><label class="f"><span>Descripció</span><textarea class="field" id="prBody" rows="3"></textarea></label><div class="row"><button class="btn ink" id="gitPr" type="button">Puja i crea el PR</button></div></div>`
+        : g.defaultBranch ? '<p class="muted small">Per crear un PR, fes primer el commit en una branca nova.</p>' : !g.remote ? '<p class="muted small">Aquest repositori no té cap remot, així que no es pot crear un PR.</p>' : '<p class="muted small">Per crear PR, inicia sessió a l’ordinador amb <span class="mono">gh auth login</span>.</p>'}
+      <div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button></div></div>`;
+    $('[data-close]', sh).onclick = closeSheet;
+    const busy = (b, on, label) => { b.disabled = on; b.textContent = on ? label : b.dataset.l; };
+    const cb = $('#gitCommit', sh);
+    if (cb) { cb.dataset.l = cb.textContent; cb.onclick = async () => { const message = $('#gitMsg', sh).value.trim(); if (!message) return toast('Escriu un missatge per al commit'); busy(cb, true, 'Desant…'); try { const r = await api(`/api/sessions/${id}/git/commit`, { method: 'POST', body: { message, branch: $('#gitBranch', sh)?.value.trim() || undefined } }); toast(r.summary || 'Commit fet'); load(); } catch (e) { toast(e.message, 5000); busy(cb, false); } }; }
+    const pb = $('#gitPr', sh);
+    if (pb) { pb.dataset.l = pb.textContent; pb.onclick = async () => { busy(pb, true, 'Pujant…'); try { const r = await api(`/api/sessions/${id}/git/pr`, { method: 'POST', body: { title: $('#prTitle', sh).value.trim(), body: $('#prBody', sh).value } }); toast('PR creat'); if (r.url) pb.outerHTML = `<a class="btn ink" href="${esc(r.url)}" target="_blank" rel="noopener">Obre el PR</a>`; } catch (e) { toast(e.message, 6000); busy(pb, false); } }; }
+  };
+  load();
+}
+
+function sessionOptions(id) {
+  const s = state.sessions.get(id); if (!s) return;
+  openSheet(`<h2>${esc(s.title || 'Sessió')}</h2>
+    <dl class="kv"><dt>Agent</dt><dd>${esc(AGENT_NAMES[s.agent] || s.agent)}</dd><dt>Carpeta</dt><dd class="mono">${esc(s.cwd)}</dd><dt>Permisos</dt><dd>${esc(MODES[s.mode]?.label || '')}</dd><dt>Creada</dt><dd>${new Date(s.created).toLocaleString('ca')}</dd></dl>
+    <label class="f"><span>Nom de la sessió</span><input type="text" id="renameIn" value="${esc(s.title)}" maxlength="120"></label>
+    ${isRealMachine() ? '<button class="btn" data-act="git" type="button">Git i GitHub…</button>' : ''}
+    <div class="row between"><button class="btn danger" id="delBtn" type="button">Esborra la sessió</button><button class="btn ink" id="renameBtn" type="button">Desa</button></div>`, (sh) => {
+    $('#renameBtn', sh).onclick = async () => { const t = $('#renameIn', sh).value.trim(); const sum = await api(`/api/sessions/${id}`, { method: 'PATCH', body: { title: t } }).catch((e) => toast(e.message)); if (sum) state.sessions.set(id, sum); closeSheet(); renderSessionHead(); };
+    $('#delBtn', sh).onclick = async () => { if (!confirm('S’esborrarà la conversa d’aquesta sessió. Els fitxers del projecte no es toquen.')) return; await api(`/api/sessions/${id}`, { method: 'DELETE' }).catch((e) => toast(e.message)); closeSheet(); go('#/sessions'); };
+  });
+}
+
+/* ---------- Ordinador */
+function viewMachine() {
+  const m = machine(), info = state.info, ms = store.machines;
+  if (!m) return viewConnect();
+  return `<div class="top"><div><h1>${esc(m.name)}</h1><p class="conn"><i class="dot ${state.connected ? 'on' : ''}"></i><span>${state.connected ? 'Connectat' : esc(state.lastError || 'Connectant…')}</span></p></div><button class="btn" data-act="refresh-agents" type="button">${svg(ICON.refresh)}Torna a detectar els agents</button></div>
+  <div class="grid2">
+    <div class="stack">
+      <section class="panel"><header><h2>Agents</h2></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">Sense connexió.</p>'}</div></section>
+      ${info?.roots?.length ? `<section class="panel"><header><h2>Carpetes compartides</h2></header><div class="body mono small">${info.roots.map(esc).join('<br>')}</div></section>` : ''}
+    </div>
+    <div class="stack">
+      <section class="panel"><header><h2>Avisos al mòbil</h2></header><div class="body stack"><p class="small">Rep un avís quan un agent et demana permís o acaba la feina.</p>${isIOS && !standalone ? '<p class="muted small">A l’iPhone, primer afegeix nio a la pantalla d’inici (Comparteix → Afegeix a la pantalla d’inici) i obre’l des d’allà.</p>' : ''}<div class="row"><button class="btn ink grow" data-act="push" type="button">Activa els avisos</button><button class="btn" data-act="push-test" type="button">Envia’n un de prova</button></div></div></section>
+      ${m.url !== DEMO_URL ? '<section class="panel"><header><h2>Continua al mòbil</h2></header><div class="body stack"><p class="small">Escaneja un codi i obre aquest ordinador des del telèfon.</p><div class="row"><button class="btn ink grow" data-act="mobile-qr" type="button">Mostra el QR</button></div></div></section>' : ''}
+      <section class="panel"><header><h2>Detalls</h2></header><div class="body"><dl class="kv"><dt>Adreça</dt><dd class="mono">${esc(m.url === DEMO_URL ? 'Dins del navegador' : m.url)}</dd>${info ? `<dt>Sistema</dt><dd>${esc(info.platform)} · ${esc(info.user)}</dd><dt>Versió</dt><dd>${esc(info.version)}</dd>` : ''}</dl></div></section>
+      <section class="panel"><header><h2>Ordinadors</h2></header><div class="body stack">${ms.map((x, i) => `<button class="card row" type="button" data-machine="${i}" style="flex-wrap:nowrap"><i class="dot ${i === store.active && state.connected ? 'on' : ''}"></i><span class="grow"><b>${esc(x.name)}</b><div class="muted small mono" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(x.url === DEMO_URL ? 'Dins del navegador' : x.url)}</div></span>${i === store.active ? '<span class="chip">actiu</span>' : ''}</button>`).join('')}
+        <div class="row"><button class="btn" data-act="add-machine" type="button">${svg(ICON.plus)}Connecta’n un altre</button><button class="btn danger" data-act="forget" type="button">Oblida aquest</button></div></div></section>
+    </div>
+  </div>`;
+}
+
+/* ---------- Models d'Ollama */
+const OLLAMA_PICKS = [
+  { name: 'qwen3:4b', size: '2,5 GB', note: 'Ràpid i bo per a gairebé tot.' },
+  { name: 'qwen3:8b', size: '5,2 GB', note: 'Més capaç i encara àgil.' },
+  { name: 'qwen2.5-coder:7b', size: '4,7 GB', note: 'Pensat per escriure i revisar codi.' },
+  { name: 'llama3.2:3b', size: '2,0 GB', note: 'Lleuger, per a ordinadors modestos.' },
+  { name: 'gemma3:4b', size: '3,3 GB', note: 'Va bé amb textos i resums.' },
+  { name: 'deepseek-r1:8b', size: '5,2 GB', note: 'Raona pas a pas abans de respondre.' },
+  { name: 'mistral:7b', size: '4,1 GB', note: 'Clàssic i equilibrat.' }
+];
+async function loadOllama(force) {
+  if (state.ollama && !force) return paintModels();
+  try { state.ollama = await api('/api/ollama'); }
+  catch (e) { state.ollama = { available: false, models: [], running: [], pulling: [], error: e.message }; }
+  paintModels();
+}
+function viewModels() {
+  return `<div class="top"><div><h1>Models</h1><p>Models d’Ollama que funcionen al teu ordinador, sense internet i sense comptes.</p></div><button class="btn" data-act="ollama-refresh" type="button">${svg(ICON.refresh)}Actualitza</button></div><div id="modelsBody">${state.ollama ? '' : `<div class="panel empty">${bot('work')}<h2>Consultant Ollama…</h2></div>`}</div>`;
+}
+function pctOf(j) { return j.total ? Math.min(100, Math.round((j.completed / j.total) * 100)) : 0; }
+function paintModels() {
+  const box = $('#modelsBody'); if (!box || !state.ollama) return;
+  const o = state.ollama, have = new Set(o.models.map((m) => m.name));
+  if (!o.available) {
+    box.innerHTML = `<div class="panel empty">${bot('sleep')}<h2>Ollama no està engegat en aquest ordinador</h2><p>Instal·la’l des d’<a href="https://ollama.com" target="_blank" rel="noopener">ollama.com</a> i engega’l amb <span class="mono">ollama serve</span>. Després, torna-ho a comprovar.</p><button class="btn" data-act="ollama-refresh" type="button">${svg(ICON.refresh)}Torna-ho a comprovar</button></div>`;
+    return;
+  }
+  const pulling = o.pulling || [];
+  box.innerHTML = `<div class="grid2">
+    <div class="stack">
+      <section class="panel"><header><h2>Instal·lats</h2><span class="muted small">${o.models.length}</span></header><div class="body">${o.models.length ? o.models.map((m) => `
+        <div class="agent-row"><span class="grow"><div class="row"><b class="mono" style="font-size:14px">${esc(m.name)}</b>${(o.running || []).includes(m.name) ? '<span class="chip waiting">A memòria</span>' : ''}</div><div class="muted small">${[m.params, m.quant, bytes(m.size)].filter(Boolean).map(esc).join(' · ')}</div></span>
+          <button class="btn sm" data-act="ollama-chat" data-name="${esc(m.name)}" type="button">Sessió</button><button class="icon-btn" data-act="ollama-del" data-name="${esc(m.name)}" type="button" aria-label="Esborra ${esc(m.name)}">${svg(ICON.trash)}</button></div>`).join('') : '<p class="muted small">Encara no n’hi ha cap. Tria’n un de la llista o escriu-ne el nom.</p>'}</div></section>
+      ${pulling.length ? `<section class="panel"><header><h2>Descarregant</h2></header><div class="body stack">${pulling.map((j) => `
+        <div class="stack" data-pull="${esc(j.name)}"><div class="row between"><b class="mono" style="font-size:14px">${esc(j.name)}</b><button class="btn sm ghost" data-act="ollama-cancel" data-name="${esc(j.name)}" type="button">Cancel·la</button></div><div class="progress"><i style="width:${pctOf(j)}%"></i></div><div class="muted small mono" data-st>${esc(j.status)}${j.total ? ` · ${bytes(j.completed)} de ${bytes(j.total)}` : ''}</div></div>`).join('')}</div></section>` : ''}
+    </div>
+    <div class="stack">
+      <section class="panel"><header><h2>Descarrega un model</h2></header><div class="body stack">
+        <form class="row" id="pullForm" style="flex-wrap:nowrap"><input type="text" id="pullIn" placeholder="Nom del model, p. ex. qwen3:4b" autocapitalize="off" spellcheck="false" aria-label="Nom del model"><button class="btn ink" type="submit">${svg(ICON.download)}Descarrega</button></form>
+        <p class="muted small">Tens tots els noms a <a href="https://ollama.com/library" target="_blank" rel="noopener">ollama.com/library</a>. Les mides són aproximades.</p>
+        <div class="list">${OLLAMA_PICKS.map((p) => { const busy = pulling.some((j) => j.name === p.name), got = have.has(p.name); return `
+          <button class="card" type="button" ${got || busy ? 'disabled' : `data-act="ollama-pull" data-name="${p.name}"`} style="${got ? 'opacity:.6' : ''}"><div class="row between"><b class="mono" style="font-size:14px">${p.name}</b><span class="muted small">${got ? 'Instal·lat' : busy ? 'Descarregant…' : p.size}</span></div><div class="muted small" style="margin-top:4px">${p.note}</div></button>`; }).join('')}</div>
+      </div></section>
+    </div>
+  </div>`;
+}
+const pullDone = new Set(); // descàrregues que han acabat abans que respongués la petició
+async function pullModel(name) {
+  name = String(name || '').trim(); pullDone.delete(name);
+  if (!name) { $('#pullIn')?.focus(); return toast('Escriu el nom del model'); }
+  try {
+    await api('/api/ollama/pull', { method: 'POST', body: { name } });
+    if (pullDone.has(name)) { pullDone.delete(name); return; }
+    state.ollama = state.ollama || { available: true, models: [], running: [], pulling: [] };
+    if (!state.ollama.pulling.some((j) => j.name === name)) state.ollama.pulling.push({ name, status: 'Començant…', completed: 0, total: 0 });
+    paintModels(); toast(`Descarregant ${name}`);
+  } catch (e) { toast(e.message, 4200); }
+}
+async function deleteModel(name) {
+  if (!confirm(`S’esborrarà ${name} de l’ordinador. El podràs tornar a descarregar.`)) return;
+  try { await api(`/api/ollama/models/${encodeURIComponent(name)}`, { method: 'DELETE' }); toast('Model esborrat'); loadOllama(true); }
+  catch (e) { toast(e.message, 4200); }
+}
+function onOllama(msg) {
+  if (!state.ollama) state.ollama = { available: true, models: [], running: [], pulling: [] };
+  const list = state.ollama.pulling || (state.ollama.pulling = []);
+  let j = list.find((x) => x.name === msg.name);
+  if (msg.done) {
+    pullDone.add(msg.name); setTimeout(() => pullDone.delete(msg.name), 5000);
+    state.ollama.pulling = list.filter((x) => x.name !== msg.name);
+    toast(msg.error ? `${msg.name}: ${msg.error}` : `${msg.name} ja està llest`, 4200);
+    if (!msg.error) api('/api/info?refresh=1').then((i) => (state.info = i)).catch(() => {});
+    if (state.route.name === 'models') loadOllama(true);
+    return;
+  }
+  if (!j) { j = { name: msg.name }; list.push(j); }
+  Object.assign(j, { status: msg.status, completed: msg.completed, total: msg.total });
+  const row = $(`[data-pull="${CSS.escape(msg.name)}"]`);
+  if (row) { $('.progress > i', row).style.width = pctOf(j) + '%'; $('[data-st]', row).textContent = `${j.status}${j.total ? ` · ${bytes(j.completed)} de ${bytes(j.total)}` : ''}`; }
+  else if (state.route.name === 'models') paintModels();
+}
+
+/* ---------- Models per a la pissarra */
+window.NioBrains = {
+  list() {
+    const out = [{ id: 'rules', label: 'Ordres ràpides' }];
+    if (machine() && state.connected) (state.ollama?.models || []).forEach((m) => out.push({ id: 'ollama:' + m.name, label: `Ollama · ${m.name}${isDemo() ? ' (simulat)' : ''}` }));
+    if (local.engine) out.push({ id: 'local', label: `Xat local · ${LOCAL_MODELS.find((x) => x.id === local.model)?.name || local.model}` });
+    return out;
+  },
+  async ask(id, messages) {
+    if (id.startsWith('ollama:')) {
+      if (!machine()) throw new Error('No hi ha cap ordinador connectat');
+      return (await api('/api/ollama/chat', { method: 'POST', body: { model: id.slice(7), messages, format: 'json' } })).content;
+    }
+    if (id === 'local') {
+      if (!local.engine) throw new Error('Primer obre un model a «Xat local»');
+      const r = await local.engine.chat.completions.create({ messages, temperature: 0.2 });
+      return r.choices[0]?.message?.content || '';
+    }
+    throw new Error('Aquest model ja no està disponible');
+  }
+};
+async function brainsForBoard() {
+  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();
+}
+
+/* ---------- Avisos */
+function b64uToU8(s) { const b = atob((s + '='.repeat((4 - (s.length % 4)) % 4)).replace(/-/g, '+').replace(/_/g, '/')); return Uint8Array.from(b, (c) => c.charCodeAt(0)); }
+async function enablePush() {
+  try {
+    if (isDemo()) throw new Error('Els avisos només funcionen amb un ordinador de veritat');
+    if (!('serviceWorker' in navigator) || !('PushManager' in window)) throw new Error(isIOS ? 'Afegeix nio a la pantalla d’inici i obre’l des d’allà' : 'Aquest navegador no admet avisos');
+    if ((await Notification.requestPermission()) !== 'granted') throw new Error('Cal que permetis les notificacions');
+    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');
+  } catch (e) { toast(e.message, 4200); }
+}
+async function syncServiceWorker() {
+  const m = machine(); if (!m || m.url === DEMO_URL || !('serviceWorker' in navigator)) return;
+  try { (await navigator.serviceWorker.ready).active?.postMessage({ type: 'nio-cfg', url: m.url, token: m.token }); } catch { /* sense service worker */ }
+}
+
+/* ---------------------------------------------------------------- xat local (WebLLM) */
+const LOCAL_MODELS = [
+  { id: 'Qwen3.5-0.8B-q4f16_1-MLC', name: 'Qwen 3.5 · 0,8B', size: '≈ 0,6 GB', note: 'El més lleuger. Respostes curtes i ràpides.' },
+  { id: 'Llama-3.2-1B-Instruct-q4f16_1-MLC', name: 'Llama 3.2 · 1B', size: '≈ 0,9 GB', note: 'Petit i equilibrat.' },
+  { id: 'Qwen3.5-2B-q4f16_1-MLC', name: 'Qwen 3.5 · 2B', size: '≈ 1,5 GB', note: 'Més capaç. Millor en mòbils recents.' },
+  { id: 'Qwen3-1.7B-q4f16_1-MLC', name: 'Qwen 3 · 1,7B', size: '≈ 1,3 GB', note: 'Va bé amb codi i raonaments curts.' },
+  { id: 'Phi-3.5-mini-instruct-q4f16_1-MLC', name: 'Phi 3.5 mini · 3,8B', size: '≈ 2,2 GB', note: 'El més potent. Millor en tauleta o ordinador.' }
+];
+const local = { engine: null, model: null, loading: false, progress: 0, status: '', messages: [], busy: false };
+const stripThink = (t) => t.replace(/<think>[\s\S]*?(<\/think>|$)/g, '').trimStart();
+function viewLocal() {
+  const hasGpu = 'gpu' in navigator, chosen = local.model || LS.get('nio.localModel', LOCAL_MODELS[0].id);
+  if (!local.engine) {
+    return `<div class="top"><div><h1>Xat local</h1><p>Un model dins d’aquest dispositiu, per quan no tens l’ordinador a mà. Un cop descarregat, funciona sense connexió i res no surt del dispositiu.</p></div></div>
+    <div class="stack-lg" style="max-width:640px">
+      ${hasGpu ? '' : '<div class="panel"><header><h2>Aquest navegador no té WebGPU</h2></header><div class="body"><p class="muted small">Prova amb Chrome a Android, Safari recent a iPhone o Chrome i Edge a l’ordinador. També pots fer servir Ollama des d’un ordinador connectat.</p></div></div>'}
+      <div class="list">${LOCAL_MODELS.map((m) => `<button class="card model-card" type="button" data-lm="${m.id}" aria-pressed="${m.id === chosen}"><div class="row between"><b>${m.name}</b><span class="muted small mono">${m.size}</span></div><div class="muted small" style="margin-top:4px">${m.note}</div></button>`).join('')}</div>
+      <a class="card" href="#/models"><b>Tens Ollama a l’ordinador?</b><div class="muted small" style="margin-top:4px">Els models d’Ollama són més grans i capaços. Funcionen a l’ordinador i els fas servir des d’aquí.</div></a>
+      ${local.loading ? `<div class="stack"><div class="progress"><i style="width:${Math.round(local.progress * 100)}%"></i></div><p class="muted small mono" id="lmStatus">${esc(local.status)}</p></div>` : `<div class="stack"><button class="btn ink block" data-act="lm-load" type="button" ${hasGpu ? '' : 'disabled'}>Descarrega i obre el model</button><p class="muted small">La primera vegada es descarrega i queda desat al navegador.</p></div>`}
+    </div>`;
+  }
+  const info = LOCAL_MODELS.find((m) => m.id === local.model);
+  return `<section class="chat">
+    <div class="chat-head"><span>${bot('idle')}</span><div class="grow"><h1>${esc(info?.name || local.model)}</h1><div class="sub">Model dins d’aquest dispositiu</div></div></div>
+    <div class="mode-bar"><span class="chip"><span class="agent-tag" data-agent="browser">${esc(info?.name || local.model)}</span></span><span class="chip">Al dispositiu</span><button class="chip" type="button" data-act="lm-change">Canvia de model</button><button class="chip" type="button" data-act="lm-clear">Comença de nou</button></div>
+    <div class="feed" id="lfeed">${local.messages.length ? '' : `<div class="empty">${bot('idle')}<h2>Pregunta el que vulguis</h2><p>Va bé per resumir, reescriure textos curts o buscar idees.</p></div>`}</div>
+    <div class="composer"><div class="inner"><textarea rows="1" id="lmsg" placeholder="Escriu al model…" enterkeyhint="send" aria-label="Missatge per al model"></textarea><button class="send" id="lsend" type="button" aria-label="Envia">${svg(ICON.send)}</button></div></div>
+  </section>`;
+}
+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;
+  const ta = $('#lmsg');
+  ta.addEventListener('input', () => { ta.style.height = 'auto'; ta.style.height = `${Math.min(ta.scrollHeight, 180)}px`; });
+  ta.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey && !isTouch) { e.preventDefault(); sendLocal(); } });
+  $('#lsend').onclick = () => (local.busy ? stopLocal() : sendLocal());
+  setLocalBusy(local.busy);
+}
+function setLocalBusy(busy) {
+  const b = $('#lsend'); if (!b) return;
+  b.classList.toggle('stop', busy); b.innerHTML = svg(busy ? ICON.stop : ICON.send);
+  b.setAttribute('aria-label', busy ? 'Para' : 'Envia'); b.title = busy ? 'Para la resposta' : 'Envia';
+}
+function stopLocal() { local.stopped = true; try { local.engine?.interruptGenerate(); } catch { /* res */ } }
+const LOCAL_SYSTEM = [
+  'Ets en Nio, un assistent que viu dins del mòbil. Parles català, i canvies a la llengua de l’usuari només si ell escriu en una altra.',
+  'Respon directe, en una a quatre frases curtes. Una idea per frase.',
+  'No repeteixis mai una frase ni una idea que ja hagis dit. Quan hagis contestat, para.',
+  'Si no saps una cosa, digues «no ho sé». No t’inventis dades, noms ni enllaços.',
+  'No facis preguntes seguides ni allargassis la conversa. No facis servir emojis.'
+].join(' ');
+async function loadLocal(id) {
+  local.loading = true; local.progress = 0; local.status = 'Preparant…'; render();
+  try {
+    const webllm = await import('https://esm.run/@mlc-ai/web-llm@0.2.86');
+    local.engine = await webllm.CreateMLCEngine(id, { initProgressCallback: (p) => {
+      local.progress = p.progress || 0; local.status = p.text || '';
+      const bar = $('.progress > i'), txt = $('#lmStatus');
+      if (bar) bar.style.width = `${Math.round(local.progress * 100)}%`; if (txt) txt.textContent = local.status;
+    } });
+    local.model = id; window.NioBoard?.refreshBrains();
+  } catch (e) { local.engine = null; toast(`No s’ha pogut obrir el model: ${e.message}`, 5000); }
+  finally { local.loading = false; if (state.route.name === 'mobil') render(); }
+}
+async function sendLocal() {
+  const ta = $('#lmsg'), text = ta.value.trim();
+  if (!text || local.busy) return;
+  ta.value = ''; ta.style.height = 'auto';
+  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;
+  local.busy = true; local.stopped = false; setLocalBusy(true); let acc = '';
+  try {
+    const chunks = await local.engine.chat.completions.create({
+      messages: [{ role: 'system', content: LOCAL_SYSTEM }, ...local.messages.slice(-8)], stream: true,
+      temperature: 0.7, top_p: 0.8, frequency_penalty: 0.6, presence_penalty: 0.4, repetition_penalty: 1.15, max_tokens: 700,
+      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;
+      if (local.stopped) break;
+    }
+  } catch (e) { if (!local.stopped) acc = acc || `Error: ${e.message}`; out.innerHTML = md(stripThink(acc)); }
+  out.classList.remove('cursor');
+  if (local.stopped) { try { await local.engine.interruptGenerate(); } catch { /* res */ } }
+  local.messages.push({ role: 'assistant', content: stripThink(acc) || '…' }); local.busy = false; local.stopped = false; setLocalBusy(false);
+}
+
+/* ---------------------------------------------------------------- accions */
+document.addEventListener('click', async (e) => {
+  const a = e.target.closest('[data-act], [data-copy], [data-decide], [data-machine], [data-lm]');
+  if (!a) return;
+  if (a.dataset.copy) { try { await navigator.clipboard.writeText(a.dataset.copy); toast('Copiat'); } catch { toast(a.dataset.copy); } return; }
+  if (a.dataset.decide) return decide(a.closest('[data-approval]'), a.dataset.decide);
+  if (a.dataset.machine != null) { closeSheet(); store.active = Number(a.dataset.machine); state.ollama = null; state.sessions.clear(); state.approvals.clear(); state.events.clear(); state.loaded.clear(); state.connected = false; state.info = null; connect(); return render(); }
+  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 '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;
+    case 'ollama-del': return deleteModel(a.dataset.name);
+    case 'ollama-chat': try { state.info = await api('/api/info?refresh=1'); } catch { /* res */ } return newSessionSheet({ agent: 'ollama', model: a.dataset.name });
+    case 'demo': return tryDemo();
+    case 'retry': return connect();
+    case 'mode': { const s = state.sessions.get(state.route.id); if (s) modeSheet(s); return; }
+    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-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-machine': return addMachineSheet();
+    case 'machines': return machinesSheet();
+    case 'mobile-qr': return mobileQrSheet();
+    case 'mobile-hint-off': LS.set('nio.mobHint.off', true); return render();
+    case 'git': return gitSheet(state.route.id);
+    case 'forget': {
+      if (!confirm('Aquest dispositiu deixarà de tenir accés a aquest ordinador.')) return;
+      const list = store.machines; list.splice(store.active, 1); store.machines = list; store.active = 0;
+      streamCtrl?.abort(); unsubDemo?.(); state.connected = false; state.info = null; state.sessions.clear(); state.approvals.clear();
+      connect(); return render();
+    }
+    case 'lm-load': return loadLocal(local.model || LS.get('nio.localModel', LOCAL_MODELS[0].id));
+    case 'lm-change': await local.engine?.unload?.(); local.engine = null; local.model = null; return render();
+    case 'lm-clear': local.messages = []; return render();
+    case 'palette': return palette();
+    case 'tour': return tourStart();
+  }
+});
+document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t.classList?.contains('switch') && t.dataset.act) { e.preventDefault(); t.click(); } });
+document.addEventListener('submit', (e) => {
+  if (e.target.id === 'pullForm') { e.preventDefault(); return pullModel($('#pullIn').value); }
+  if (e.target.id !== 'pairForm') return;
+  e.preventDefault();
+  const pair = parsePair($('#pairInput', e.target).value);
+  if (!pair) return toast('Aquest enllaç no és de connexió');
+  closeSheet(); addMachine(pair); toast('Connectant…'); go('#/sessions');
+});
+
+/* ---------------------------------------------------------------- paleta d'ordres */
+let palSel = 0;
+function commands() {
+  const c = Object.entries(VIEWS).map(([k, v]) => ({ label: `Ves a ${v.label}`, hint: 'Navega', run: () => go(HASH[k]) }));
+  if (machine()) c.push({ label: 'Nova sessió', hint: 'Crea', run: newSessionSheet });
+  [...state.sessions.values()].slice(0, 20).forEach((s) => c.push({ label: s.title || 'Sessió nova', hint: AGENT_NAMES[s.agent] || s.agent, run: () => go(`#/s/${s.id}`) }));
+  if (!isDemo()) c.push({ label: 'Prova l’ordinador simulat', hint: 'Prova', run: tryDemo });
+  c.push({ label: 'Fes el tutorial', hint: 'Ajuda', run: tourStart });
+  return c;
+}
+function palette() { const d = $('#palette'); $('#palQ').value = ''; palSel = 0; drawPal(); d.showModal(); if (T.on) $('#tour').hidden = true; $('#palQ').focus(); }
+function drawPal() {
+  const q = $('#palQ').value.trim().toLowerCase(), list = commands().filter((c) => !q || c.label.toLowerCase().includes(q));
+  palSel = Math.min(palSel, Math.max(0, list.length - 1));
+  $('#palList').innerHTML = list.length ? list.map((c, i) => `<li role="option" data-i="${i}" aria-selected="${i === palSel}">${esc(c.label)}<span>${esc(c.hint)}</span></li>`).join('') : '<li aria-disabled="true">Cap resultat</li>';
+  $('#palList')._list = list;
+}
+function palRun(i) { const c = $('#palList')._list?.[i]; if (!c) return; $('#palette').close(); c.run(); }
+$('#palQ').addEventListener('input', () => { palSel = 0; drawPal(); });
+$('#palQ').addEventListener('keydown', (e) => {
+  const n = $('#palList')._list?.length || 0;
+  if (e.key === 'ArrowDown') { e.preventDefault(); palSel = (palSel + 1) % Math.max(n, 1); drawPal(); }
+  else if (e.key === 'ArrowUp') { e.preventDefault(); palSel = (palSel - 1 + n) % Math.max(n, 1); drawPal(); }
+  else if (e.key === 'Enter') { e.preventDefault(); palRun(palSel); }
+});
+$('#palList').addEventListener('click', (e) => { const li = e.target.closest('li[data-i]'); if (li) palRun(+li.dataset.i); });
+$('#palette').addEventListener('click', (e) => { if (e.target.id === 'palette') e.target.close(); });
+addEventListener('keydown', (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); $('#palette').open ? $('#palette').close() : palette(); } });
+
+/* ---------------------------------------------------------------- menú mòbil */
+const mq = matchMedia('(max-width: 820px)');
+let tourT = 0;
+function setCollapsed(on, instant) {
+  const body = document.body;
+  body.classList.toggle('side-collapsed', on); LS.set('nio.side', on ? 'plegat' : 'obert');
+  const b = $('#collapse'); b.setAttribute('aria-label', on ? 'Desplega el menú' : 'Plega el menú'); b.setAttribute('aria-expanded', String(!on)); b.title = `${on ? 'Desplega' : 'Plega'} el menú (Ctrl+B)`;
+  window.NioBot?.refresh();
+  clearTimeout(tourT);
+  if (!instant) tourT = setTimeout(() => tourPlace(false), reduce ? 0 : 360);
+}
+$('#collapse').addEventListener('click', () => setCollapsed(!document.body.classList.contains('side-collapsed')));
+addEventListener('keydown', (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'b' && !mq.matches && !e.target.closest?.('input, textarea')) { e.preventDefault(); setCollapsed(!document.body.classList.contains('side-collapsed')); } });
+setCollapsed(LS.get('nio.side', 'obert') === 'plegat', true);
+function setNav(open) {
+  open = mq.matches && open;
+  document.body.classList.toggle('nav-open', open);
+  $('#burger').setAttribute('aria-expanded', open); $('#burger').setAttribute('aria-label', open ? 'Tanca el menú' : 'Obre el menú');
+  $('#side').inert = mq.matches && !open; $('#main').inert = open;
+}
+$('#burger').addEventListener('click', () => setNav(!document.body.classList.contains('nav-open')));
+$('#scrim').addEventListener('click', () => setNav(false));
+$('#side').addEventListener('click', (e) => { if (e.target.closest('a, button')) setNav(false); });
+addEventListener('keydown', (e) => { if (e.key === 'Escape' && document.body.classList.contains('nav-open')) setNav(false); });
+mq.addEventListener('change', () => setNav(false));
+(() => {
+  const side = $('#side'); let x0 = null, y0 = 0, dx = 0, mode = null;
+  addEventListener('touchstart', (e) => {
+    if (!mq.matches || $('#sheet').open || state.route.name === 'pissarra') return;
+    const t = e.touches[0], open = document.body.classList.contains('nav-open');
+    if (open || t.clientX < 22) { x0 = t.clientX; y0 = t.clientY; dx = 0; mode = open ? 'close' : 'open'; }
+  }, { passive: true });
+  addEventListener('touchmove', (e) => {
+    if (x0 == null) return;
+    const t = e.touches[0]; dx = t.clientX - x0;
+    if (Math.abs(t.clientY - y0) > Math.abs(dx) && Math.abs(dx) < 12) { x0 = null; return; }
+    const w = side.offsetWidth, pos = mode === 'open' ? Math.min(0, -w + Math.max(0, dx)) : Math.min(0, dx);
+    side.classList.add('dragging'); side.style.transform = `translateX(${pos}px)`;
+  }, { passive: true });
+  addEventListener('touchend', () => {
+    if (x0 == null) return;
+    side.classList.remove('dragging'); side.style.transform = '';
+    if (mode === 'open' && dx > 60) setNav(true); else if (mode === 'close' && dx < -60) setNav(false);
+    x0 = null;
+  });
+})();
+
+/* ---------------------------------------------------------------- tutorial */
+const TOUR_KEY = 'nio.tour.v2';
+const T = Object.assign({ on: false, i: 0, seen: false }, LS.get(TOUR_KEY, {}));
+const saveTour = () => LS.set(TOUR_KEY, { on: T.on, i: T.i, seen: T.seen });
+const TSTEPS = [
+  { center: true, mood: 'happy', title: 'Hola, sóc en Nio.', text: 'Faig de pont entre el teu mòbil i els agents d’IA del teu ordinador. En un minut t’ensenyo on és cada cosa.', next: 'Comencem' },
+  { route: 'sessions', target: () => (machine() ? '.top [data-act=new]' : '.conn-main'), m: () => (machine() ? '.top [data-act=new]' : '.conn-main .cmd'), title: () => (machine() ? 'Dona feina a un agent' : 'Primer, connecta l’ordinador'), text: () => (machine() ? 'Cada sessió és una conversa amb un agent dins d’una carpeta. Tria l’agent, els permisos i explica-li què ha de fer.' : 'Executa aquesta ordre al terminal de l’ordinador i escaneja el codi QR que apareix. Si encara no el tens a mà, pots provar-ho amb un ordinador simulat.') },
+  { route: 'sessions', target: () => (machine() ? null : '.try'), m: () => (machine() ? null : '.try [data-act=demo]'), skipIf: () => !!machine(), title: 'Prova-ho sense instal·lar res', text: 'L’ordinador simulat té un agent de demostració que llegeix, et demana permís i executa. Ideal per veure com funciona.' },
+  { route: 'approvals', target: '.side nav a[href="#/aprovacions"]', m: '#mRight .icon-btn', title: 'Tu decideixes', text: 'En mode «Demana permís», abans d’editar un fitxer o executar una ordre, l’agent t’ho pregunta aquí. Si actives els avisos, t’arriba al mòbil.' },
+  { route: 'mobil', target: '.side nav a[href="#/mobil"]', m: '.page .model-card', title: 'Un model sense internet', text: 'Si no tens l’ordinador a mà, pots fer servir un model petit que funciona dins del mateix mòbil.' },
+  { route: 'models', target: '.side nav a[href="#/models"]', m: '.page .top h1, .connect-head h1', title: 'Models al teu ordinador', text: 'Si tens Ollama, aquí descarregues models, veus quins tens i obres sessions amb el que vulguis. Res no surt de casa.' },
+  { route: 'pissarra', target: '.side nav a[href="#/pissarra"]', m: '#bdTools', title: 'Pensa en dibuix', text: 'A la pissarra pots fer diagrames a mà alçada o demanar-me’ls escrivint, amb Ollama o amb el model del mòbil.' },
+  { route: 'maquina', target: '.side nav a[href="#/ordinador"]', m: '.page .top h1, .connect-head h1', title: 'El teu ordinador', text: 'Aquí veus quins agents hi ha instal·lats, actives els avisos i connectes més ordinadors.' },
+  { target: '[data-act=palette]', m: '#burger', title: () => (mq.matches ? 'El menú' : 'Un últim truc'), text: () => (mq.matches ? 'Toca aquí per anar a qualsevol secció. També pots lliscar des de la vora esquerra de la pantalla.' : 'Prem ⌘K (o Ctrl+K) per anar a qualsevol lloc o obrir una sessió sense tocar el ratolí.') },
+  { center: true, mood: 'happy', title: 'Ja està tot a punt.', text: 'Si mai vols repassar-ho, tens el tutorial al menú.', next: 'Finalitza' }
+];
+const tval = (v) => (typeof v === 'function' ? v() : v);
+function tourStart() { T.on = true; T.seen = true; tourGo(0); }
+function tourEnd(silent) { T.on = false; T.seen = true; saveTour(); $('#tour').hidden = true; if (!silent) toast('Tutorial tancat. El tens al menú quan vulguis.'); }
+function tourGo(i) {
+  while (i < TSTEPS.length && TSTEPS[i].skipIf?.()) i++;
+  if (i >= TSTEPS.length) return tourEnd(true);
+  T.i = Math.max(0, i); saveTour();
+  const st = TSTEPS[T.i];
+  if (st.route && state.route.name !== st.route) { setTimeout(() => tourDraw(true), 80); go(HASH[st.route]); }
+  else tourDraw(true);
+}
+function tourDraw(scroll) {
+  if (!T.on) return;
+  const st = TSTEPS[T.i], card = $('#tourCard'), busy = $('#sheet').open || $('#palette').open;
+  $('#tour').hidden = busy; if (busy) return;
+  const n = TSTEPS.length - 2;
+  card.className = 'tour-card' + (st.center ? ' center' : '');
+  card.innerHTML = `<div class="tour-head">${bot(st.mood || 'idle')}${st.center ? '' : `<span class="tour-step">Pas ${T.i} de ${n}</span>`}<button class="tour-x" data-tour="close" type="button" aria-label="Tanca el tutorial">×</button></div>
+    <h3 id="tourT">${tval(st.title)}</h3><p>${tval(st.text)}</p>
+    <div class="tour-foot">${st.center ? '' : `<div>${T.i > 1 ? '<button class="btn sm ghost" data-tour="back" type="button">Enrere</button>' : ''}</div>`}
+      <div class="row">${T.i === 0 ? '<button class="btn sm ghost" data-tour="close" type="button">Ara no</button>' : ''}<button class="btn sm ink" data-tour="next" type="button">${tval(st.next) || 'Següent'}</button></div></div>`;
+  window.NioBot?.refresh(); tourPlace(scroll);
+}
+function tourTarget() {
+  const st = TSTEPS[T.i], sel = st.center ? null : tval(mq.matches && 'm' in st ? st.m : st.target), e = sel && document.querySelector(sel);
+  if (!e || !e.getClientRects().length || e.closest('[inert]')) return null;
+  return e;
+}
+function tourPlace(scroll) {
+  if (!T.on || $('#tour').hidden) return;
+  const spot = $('#tourSpot'), card = $('#tourCard'), e = tourTarget();
+  if (!e) {
+    Object.assign(spot.style, { left: innerWidth / 2 + 'px', top: innerHeight / 2 + 'px', width: '0px', height: '0px' });
+    card.classList.add('center'); card.classList.remove('top', 'bottom');
+    Object.assign(card.style, { left: Math.max(16, (innerWidth - card.offsetWidth) / 2) + 'px', top: Math.max(16, (innerHeight - card.offsetHeight) / 2) + 'px', bottom: '' });
+    return;
+  }
+  card.classList.remove('center');
+  const pad = 6, gap = 14;
+  if (mq.matches) {
+    // Al mòbil la targeta va a dalt o a baix de la pantalla, sempre a l'altra banda del que assenyala.
+    const ch = card.offsetHeight, mbar = $('.mbar').offsetHeight;
+    let r = e.getBoundingClientRect();
+    const below = r.top + r.height / 2 < innerHeight / 2 || r.top < mbar + ch + 24;
+    const free = below ? [mbar + 8, innerHeight - ch - 24] : [ch + 24, innerHeight - 8];
+    if (scroll && (r.top < free[0] || r.bottom > free[1]) && !e.closest('.mbar, .bd-stage')) {
+      const want = Math.max(free[0], (free[0] + free[1] - r.height) / 2);
+      scrollBy({ top: r.top - want, behavior: 'instant' });
+      r = e.getBoundingClientRect();
+    }
+    Object.assign(spot.style, { left: r.left - pad + 'px', top: r.top - pad + 'px', width: r.width + pad * 2 + 'px', height: r.height + pad * 2 + 'px' });
+    card.classList.toggle('bottom', below); card.classList.toggle('top', !below);
+    Object.assign(card.style, { left: '', top: '', bottom: '' });
+    return;
+  }
+  card.classList.remove('top', 'bottom');
+  if (scroll) { const r0 = e.getBoundingClientRect(); if (r0.top < 70 || r0.bottom > innerHeight - 220) { e.scrollIntoView({ block: 'center', behavior: 'instant' }); } }
+  const r = e.getBoundingClientRect();
+  Object.assign(spot.style, { left: r.left - pad + 'px', top: r.top - pad + 'px', width: r.width + pad * 2 + 'px', height: r.height + pad * 2 + 'px' });
+  const cw = card.offsetWidth, ch = card.offsetHeight;
+  let top = r.bottom + pad + gap, left = r.left + r.width / 2 - cw / 2;
+  if (top + ch > innerHeight - 12) top = r.top - pad - gap - ch;
+  if (r.width < 260 && r.right + gap + cw < innerWidth - 12 && (top < 12 || r.bottom + ch > innerHeight)) { left = r.right + gap; top = r.top + r.height / 2 - ch / 2; }
+  Object.assign(card.style, { left: Math.min(Math.max(12, left), innerWidth - cw - 12) + 'px', top: Math.min(Math.max(12, top), innerHeight - ch - 12) + 'px', bottom: '' });
+}
+function tourUpdate() { if (T.on) setTimeout(() => tourDraw(false), 30); }
+$('#tour').addEventListener('click', (e) => {
+  const b = e.target.closest('[data-tour]'); if (!b) return;
+  if (b.dataset.tour === 'close') tourEnd(false);
+  else if (b.dataset.tour === 'next') tourGo(T.i + 1);
+  else if (b.dataset.tour === 'back') { let i = T.i - 1; while (i > 0 && TSTEPS[i].skipIf?.()) i--; tourGo(i); }
+});
+addEventListener('resize', () => tourPlace(false));
+addEventListener('scroll', () => tourPlace(false), { passive: true });
+addEventListener('keydown', (e) => {
+  if (!T.on || $('#sheet').open || $('#palette').open || e.target.closest?.('input, textarea')) return;
+  if (e.key === 'Escape') tourEnd(false); else if (e.key === 'ArrowRight') tourGo(T.i + 1); else if (e.key === 'ArrowLeft' && T.i > 1) tourGo(T.i - 1);
+});
+$('#sheet').addEventListener('close', () => setTimeout(() => tourDraw(false), 30));
+$('#palette').addEventListener('close', () => setTimeout(() => tourDraw(false), 30));
+
+/* ---------------------------------------------------------------- arrencada */
+// 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); };
+  vv.addEventListener('resize', fit); vv.addEventListener('scroll', fit); fit();
+}
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js').catch(() => {});
+  navigator.serviceWorker.addEventListener('message', (e) => { if (e.data?.type === 'open-session' && e.data.id) go(`#/s/${e.data.id}`); });
+}
+addEventListener('hashchange', route);
+document.addEventListener('visibilitychange', () => { if (!document.hidden && machine() && !state.connected && !isDemo()) connect(); });
+setInterval(() => { if (!document.hidden && state.route.name === 'sessions') render(); }, 60000);
+const qs = new URLSearchParams(location.search).get('s');
+if (qs) history.replaceState(null, '', location.pathname + `#/s/${qs}`);
+// Les dades del panell antic (simulació d'agents d'operacions) ja no es fan servir.
+try { localStorage.removeItem('nio.panell.v1'); localStorage.removeItem('nio.tour.v1'); } catch { /* res */ }
+setNav(false);
+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);