nio-cat 0.8.3 → 0.9.1

package/bin/nio.js

@@ -19,6 +19,7 @@ const directory = require('../src/directory');
 const voice = require('../src/voice');
 const { Telegram } = require('../src/telegram');
 const { Control } = require('../src/control');
+const { Remote } = require('../src/remote');
 const { Jobs } = require('../src/jobs');
 const { addServer } = require('../src/ssh');
 const { pairLink, terminalQr, writePairPage, makeCode, codeLink, terminalQrSize } = require('../src/pair');
@@ -216,7 +217,8 @@ async function start() {
   tg.start();
   if (cfg.telegram?.token) console.log(`  ${c.dim('Telegram:')} actiu ${c.dim(`(${(cfg.telegram.allowed || []).length} xats autoritzats)`)}`);
   const control = new Control({ cfg, hub, audit });
-  const routes = [...memory.routes(), ...jobs.routes(), ...voice.routes(cfg), ...tg.routes(), ...control.routes()];
+  const remote = new Remote({ cfg, audit });
+  const routes = [...memory.routes(), ...jobs.routes(), ...voice.routes(cfg), ...tg.routes(), ...control.routes(), ...remote.routes()];
   const server = createServer({ cfg, hub, auth, audit, routes, beforeApproval: (t, i) => control.beforeApproval(t, i), info: async () => ({ control: await control.caps().catch(() => null) }), getPublicUrl: () => publicUrl, getApp: () => flags.app || cfg.app });
 
   server.on('error', (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.8.3",
+  "version": "0.9.1",
   "description": "nio: fes servir Claude Code, Codex, Grok, Antigravity i Ollama del teu ordinador des del mòbil.",
   "license": "UNLICENSED",
   "author": "f.cat",

package/src/remote.js

@@ -0,0 +1,295 @@
+'use strict';
+// Pantalla remota: veure i controlar l'escriptori d'aquest ordinador des del mòbil, com un AnyDesk senzill.
+// Fotogrames JPEG sota demanda (no cal cap programa extra) i entrada per macOS (CGEvent + System Events)
+// o Linux/X11 (xdotool). Només funciona si el control de l'escriptori està activat en aquest ordinador.
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const crypto = require('crypto');
+const { execFile } = require('child_process');
+const { which, childEnv } = require('./proc');
+const { HOME } = require('./config');
+
+const TMP = path.join(HOME, 'shots');
+const DARWIN = process.platform === 'darwin';
+const httpErr = (status, message) => Object.assign(new Error(message), { status });
+
+function run(bin, args, timeout = 8000) {
+  return new Promise((resolve) => {
+    execFile(bin, args, { timeout, env: childEnv(), maxBuffer: 8 * 1024 * 1024 }, (err, stdout, stderr) => resolve({ ok: !err, out: String(stdout || ''), err: String(stderr || err?.message || '') }));
+  });
+}
+
+// Codis de tecla de macOS (disposició independent del teclat).
+const MAC_KEYS = { Enter: 36, Tab: 48, ' ': 49, Backspace: 51, Escape: 53, Delete: 117, Home: 115, End: 119, PageUp: 116, PageDown: 121, ArrowLeft: 123, ArrowRight: 124, ArrowDown: 125, ArrowUp: 126, F1: 122, F2: 120, F3: 99, F4: 118, F5: 96, F6: 97, F7: 98, F8: 100, F9: 101, F10: 109, F11: 103, F12: 111 };
+const MAC_MODS = { meta: 'command down', ctrl: 'control down', alt: 'option down', shift: 'shift down' };
+const X_KEYS = { Enter: 'Return', Tab: 'Tab', ' ': 'space', Backspace: 'BackSpace', Escape: 'Escape', Delete: 'Delete', Home: 'Home', End: 'End', PageUp: 'Prior', PageDown: 'Next', ArrowLeft: 'Left', ArrowRight: 'Right', ArrowDown: 'Down', ArrowUp: 'Up' };
+const X_MODS = { meta: 'super', ctrl: 'ctrl', alt: 'alt', shift: 'shift' };
+
+// JXA: un únic script per a tots els esdeveniments de ratolí i per consultar mides i permisos.
+const JXA = `
+ObjC.import('ApplicationServices');
+ObjC.import('CoreGraphics');
+ObjC.import('Foundation');
+function post(type, x, y, button, count) {
+  const ev = $.CGEventCreateMouseEvent(null, type, $.CGPointMake(x, y), button);
+  if (count) $.CGEventSetIntegerValueField(ev, $.kCGMouseEventClickState, count);
+  $.CGEventPost($.kCGHIDEventTap, ev);
+}
+function run(argv) {
+  const op = argv[0];
+  const b = $.CGDisplayBounds($.CGMainDisplayID());
+  const W = b.size.width, H = b.size.height, OX = b.origin.x, OY = b.origin.y;
+  if (op === 'info') {
+    let screen = null;
+    try { screen = !!$.CGPreflightScreenCaptureAccess(); } catch (e) {}
+    return JSON.stringify({ w: W, h: H, screen: screen, accessibility: !!$.AXIsProcessTrusted() });
+  }
+  const px = (v) => OX + Math.max(0, Math.min(1, parseFloat(v))) * W;
+  const py = (v) => OY + Math.max(0, Math.min(1, parseFloat(v))) * H;
+  if (op === 'click' || op === 'rclick') {
+    const x = px(argv[1]), y = py(argv[2]), n = parseInt(argv[3] || '1', 10);
+    const r = op === 'rclick';
+    post($.kCGEventMouseMoved, x, y, 0, 0);
+    post(r ? $.kCGEventRightMouseDown : $.kCGEventLeftMouseDown, x, y, r ? $.kCGMouseButtonRight : $.kCGMouseButtonLeft, n);
+    post(r ? $.kCGEventRightMouseUp : $.kCGEventLeftMouseUp, x, y, r ? $.kCGMouseButtonRight : $.kCGMouseButtonLeft, n);
+  } else if (op === 'move') {
+    post($.kCGEventMouseMoved, px(argv[1]), py(argv[2]), 0, 0);
+  } else if (op === 'drag') {
+    const pts = JSON.parse(argv[1]);
+    const first = pts[0];
+    post($.kCGEventMouseMoved, px(first[0]), py(first[1]), 0, 0);
+    post($.kCGEventLeftMouseDown, px(first[0]), py(first[1]), $.kCGMouseButtonLeft, 1);
+    for (let i = 1; i < pts.length; i++) { post($.kCGEventLeftMouseDragged, px(pts[i][0]), py(pts[i][1]), $.kCGMouseButtonLeft, 1); $.NSThread.sleepForTimeInterval(0.012); }
+    const last = pts[pts.length - 1];
+    post($.kCGEventLeftMouseUp, px(last[0]), py(last[1]), $.kCGMouseButtonLeft, 1);
+  } else if (op === 'scroll') {
+    if (argv[1] !== 'here') post($.kCGEventMouseMoved, px(argv[1]), py(argv[2]), 0, 0);
+    const ev = $.CGEventCreateScrollWheelEvent2(null, $.kCGScrollEventUnitPixel, 2, parseInt(argv[4], 10), parseInt(argv[3], 10), 0);
+    $.CGEventPost($.kCGHIDEventTap, ev);
+  }
+  return 'ok';
+}
+`;
+
+class Remote {
+  constructor({ cfg, audit }) {
+    this.cfg = cfg;
+    this.audit = audit || { add() {} };
+    this.infoAt = 0;
+    this.frame = null;
+    this.busy = null;
+    this.queue = Promise.resolve();
+    this.jxa = path.join(os.tmpdir(), `nio-remote-${process.pid}.js`);
+    this.xdo = !DARWIN ? which('xdotool') : null;
+    fs.mkdirSync(TMP, { recursive: true, mode: 0o700 });
+  }
+
+  enabled() {
+    return !!this.cfg.control?.escriptori;
+  }
+  need() {
+    if (!this.enabled()) throw httpErr(409, 'Activa primer «Apps de l’escriptori» en aquest ordinador.');
+  }
+
+  async osa(...args) {
+    if (!fs.existsSync(this.jxa)) fs.writeFileSync(this.jxa, JXA, { mode: 0o600 });
+    const r = await run('/usr/bin/osascript', ['-l', 'JavaScript', this.jxa, ...args.map(String)], 10000);
+    if (!r.ok) throw httpErr(500, `No he pogut enviar-ho a l’ordinador: ${r.err.trim().slice(0, 200)}`);
+    return r.out.trim();
+  }
+
+  async info() {
+    if (this.infoCache && Date.now() - this.infoAt < 20000) return this.infoCache;
+    let i;
+    if (DARWIN) {
+      try { i = JSON.parse(await this.osa('info')); } catch { i = { w: 0, h: 0, screen: null, accessibility: null }; }
+    } else {
+      let w = 0, h = 0;
+      if (this.xdo) {
+        const r = await run(this.xdo, ['getdisplaygeometry'], 3000);
+        [w, h] = r.out.trim().split(/\s+/).map(Number);
+      }
+      i = { w: w || 0, h: h || 0, screen: null, accessibility: null };
+    }
+    this.infoCache = { ...i, platform: process.platform, input: DARWIN || !!this.xdo, capture: this.captureTool() !== null, enabled: this.enabled() };
+    this.infoAt = Date.now();
+    return this.infoCache;
+  }
+
+  captureTool() {
+    if (DARWIN) return ['screencapture'];
+    if (which('grim')) return ['grim'];
+    if (which('scrot')) return ['scrot'];
+    if (which('gnome-screenshot')) return ['gnome-screenshot'];
+    return null;
+  }
+
+  async grab(width, quality) {
+    const id = crypto.randomBytes(6).toString('hex');
+    const png = path.join(TMP, `live-${id}.png`), jpg = path.join(TMP, `live-${id}.jpg`);
+    try {
+      let ok = false;
+      if (DARWIN) {
+        ok = (await run('/usr/sbin/screencapture', ['-x', '-C', '-D', '1', '-t', 'png', png], 8000)).ok;
+        if (ok) ok = (await run('/usr/bin/sips', ['-s', 'format', 'jpeg', '-s', 'formatOptions', String(quality), '--resampleWidth', String(width), png, '--out', jpg], 8000)).ok;
+      } else {
+        const t = this.captureTool();
+        if (!t) throw httpErr(409, 'No hi ha cap eina per fer captures (cal grim, scrot o gnome-screenshot).');
+        const args = t[0] === 'grim' ? ['-t', 'jpeg', '-q', String(quality), jpg] : t[0] === 'scrot' ? ['-o', '-q', String(quality), jpg] : ['-f', jpg];
+        ok = (await run(which(t[0]), args, 8000)).ok;
+      }
+      if (!ok || !fs.existsSync(jpg)) throw httpErr(409, 'No he pogut capturar la pantalla (sense pantalla accessible o sense permís).');
+      return fs.readFileSync(jpg);
+    } finally {
+      fs.rm(png, { force: true }, () => {});
+      fs.rm(jpg, { force: true }, () => {});
+    }
+  }
+
+  // Fotograma: si ja n'hi ha un de molt recent, el reaprofita; si n'hi ha un en marxa, s'hi espera.
+  async getFrame(width, quality) {
+    this.need();
+    const w = Math.max(320, Math.min(2400, Math.round(width) || 1280));
+    const q = Math.max(25, Math.min(90, Math.round(quality) || 55));
+    const f = this.frame;
+    if (f && f.w === w && f.q === q && Date.now() - f.t < 90) return f;
+    if (this.busy && this.busyKey === `${w}/${q}`) return this.busy;
+    this.busyKey = `${w}/${q}`;
+    this.busy = (async () => {
+      try {
+        const buf = await this.grab(w, q);
+        const info = await this.info();
+        // Un JPEG de pantalla tota negra pesa molt poc: l'ordinador és bloquejat/adormit o falta el permís.
+        this.frame = { buf, t: Date.now(), w, q, blank: buf.length < 5000, sw: info.w, sh: info.h };
+        return this.frame;
+      } finally {
+        this.busy = null;
+      }
+    })();
+    return this.busy;
+  }
+
+  async wake() {
+    if (DARWIN) await run('/usr/bin/caffeinate', ['-u', '-t', '2'], 4000);
+    else if (this.xdo) await run(which('xset') || 'xset', ['dpms', 'force', 'on'], 3000);
+  }
+
+  // Esdeveniments d'entrada: en cua, perquè arribin en ordre.
+  input(ev) {
+    this.need();
+    const job = this.queue.then(() => this.doInput(ev));
+    this.queue = job.catch(() => {});
+    return job;
+  }
+
+  async doInput(ev) {
+    const n = (v) => Math.max(0, Math.min(1, Number(v)));
+    const mods = (Array.isArray(ev.mods) ? ev.mods : []).filter((m) => Object.hasOwn(MAC_MODS, m));
+    const kind = String(ev.type);
+    const info = await this.info();
+    if (!info.input) throw httpErr(501, DARWIN ? 'No es pot controlar aquest ordinador.' : 'Cal xdotool per controlar l’escriptori (sudo apt install xdotool).');
+    if (DARWIN) {
+      if (kind === 'click' || kind === 'rclick') return this.osa(kind, n(ev.x), n(ev.y), ev.count === 2 ? 2 : ev.count === 3 ? 3 : 1);
+      if (kind === 'move') return this.osa('move', n(ev.x), n(ev.y));
+      if (kind === 'drag') {
+        const pts = (Array.isArray(ev.path) ? ev.path : []).slice(0, 120).map((p) => [n(p[0]), n(p[1])]);
+        if (pts.length < 2) throw httpErr(400, 'Arrossegament no vàlid');
+        return this.osa('drag', JSON.stringify(pts));
+      }
+      if (kind === 'scroll') {
+        const dy = Math.max(-1500, Math.min(1500, Math.round(Number(ev.dy) || 0))), dx = Math.max(-1500, Math.min(1500, Math.round(Number(ev.dx) || 0)));
+        return this.osa('scroll', ev.x == null ? 'here' : n(ev.x), n(ev.y || 0), dx, dy);
+      }
+      if (kind === 'text') {
+        const t = String(ev.text || '').slice(0, 2000);
+        if (!t) return 'ok';
+        return this.script('on run argv\ntell application "System Events" to keystroke (item 1 of argv)\nend run', [t]);
+      }
+      if (kind === 'key') {
+        const using = mods.length ? ` using {${mods.map((m) => MAC_MODS[m]).join(', ')}}` : '';
+        const key = String(ev.key || '');
+        if (Object.hasOwn(MAC_KEYS, key)) return this.script(`tell application "System Events" to key code ${MAC_KEYS[key]}${using}`, []);
+        if (key.length === 1 || [...key].length === 1) return this.script(`on run argv\ntell application "System Events" to keystroke (item 1 of argv)${using}\nend run`, [key]);
+        throw httpErr(400, 'Tecla no admesa');
+      }
+      throw httpErr(400, 'Esdeveniment no admès');
+    }
+    // Linux / X11
+    const px = (v, max) => String(Math.round(n(v) * Math.max(0, max - 1)));
+    const xd = (...a) => run(this.xdo, a, 5000).then((r) => (r.ok ? 'ok' : Promise.reject(httpErr(500, r.err.trim().slice(0, 200)))));
+    if (kind === 'click' || kind === 'rclick') {
+      await xd('mousemove', px(ev.x, info.w), px(ev.y, info.h));
+      return xd('click', '--repeat', String(ev.count === 2 ? 2 : 1), '--delay', '40', kind === 'rclick' ? '3' : '1');
+    }
+    if (kind === 'move') return xd('mousemove', px(ev.x, info.w), px(ev.y, info.h));
+    if (kind === 'drag') {
+      const pts = (Array.isArray(ev.path) ? ev.path : []).slice(0, 120);
+      if (pts.length < 2) throw httpErr(400, 'Arrossegament no vàlid');
+      await xd('mousemove', px(pts[0][0], info.w), px(pts[0][1], info.h));
+      await xd('mousedown', '1');
+      for (const p of pts.slice(1)) await xd('mousemove', px(p[0], info.w), px(p[1], info.h));
+      return xd('mouseup', '1');
+    }
+    if (kind === 'scroll') {
+      const dy = Number(ev.dy) || 0, dx = Number(ev.dx) || 0;
+      if (ev.x != null) await xd('mousemove', px(ev.x, info.w), px(ev.y, info.h));
+      const steps = (v, neg, pos) => (v ? Array(Math.min(20, Math.max(1, Math.round(Math.abs(v) / 40)))).fill(v > 0 ? pos : neg) : []);
+      for (const b of [...steps(dy, '5', '4'), ...steps(dx, '7', '6')]) await xd('click', b);
+      return 'ok';
+    }
+    if (kind === 'text') return xd('type', '--delay', '8', '--', String(ev.text || '').slice(0, 2000));
+    if (kind === 'key') {
+      const key = String(ev.key || '');
+      const k = Object.hasOwn(X_KEYS, key) ? X_KEYS[key] : [...key].length === 1 ? key : null;
+      if (!k) throw httpErr(400, 'Tecla no admesa');
+      return xd('key', '--', [...mods.map((m) => X_MODS[m]), k].join('+'));
+    }
+    throw httpErr(400, 'Esdeveniment no admès');
+  }
+
+  async script(src, args) {
+    const r = await run('/usr/bin/osascript', ['-e', src, ...args], 8000);
+    if (!r.ok) {
+      const hint = /not allowed|assistive|1002|accessib/i.test(r.err) ? ' Dona permís d’Accessibilitat al Terminal (Ajustos del Sistema → Privadesa i seguretat).' : '';
+      throw httpErr(500, `No he pogut teclejar.${hint}`);
+    }
+    return 'ok';
+  }
+
+  routes() {
+    return [
+      { method: 'GET', path: '/api/desktop/status', handler: async () => this.info() },
+      {
+        method: 'GET',
+        path: '/api/desktop/frame',
+        handler: async ({ res, url }) => {
+          const f = await this.getFrame(Number(url.searchParams.get('w')), Number(url.searchParams.get('q')));
+          res.writeHead(200, {
+            'content-type': 'image/jpeg',
+            'content-length': f.buf.length,
+            'cache-control': 'no-store',
+            'x-screen-w': String(f.sw || 0),
+            'x-screen-h': String(f.sh || 0),
+            'x-blank': f.blank ? '1' : '0',
+            'access-control-expose-headers': 'x-screen-w, x-screen-h, x-blank',
+          });
+          res.end(f.buf);
+        },
+      },
+      { method: 'POST', path: '/api/desktop/input', limit: 16384, handler: async ({ body }) => ({ ok: true, r: await this.input(body || {}) }) },
+      {
+        method: 'POST',
+        path: '/api/desktop/session',
+        handler: async ({ body, device }) => {
+          this.need();
+          if (body?.wake) await this.wake();
+          if (body?.event === 'open' || body?.event === 'control') this.audit.add({ type: 'control', what: body.event === 'control' ? 'Pantalla remota: control amb ratolí i teclat' : 'Pantalla remota oberta', by: device?.name });
+          return { ok: true };
+        },
+      },
+    ];
+  }
+}
+
+module.exports = { Remote };

package/src/telegram.js

@@ -12,6 +12,22 @@ const httpErr = (status, message) => Object.assign(new Error(message), { status
 const TOKEN_RE = /^\d{5,15}:[\w-]{30,60}$/;
 const clip = (s, n) => (String(s).length > n ? `${String(s).slice(0, n)}…` : String(s));
 
+// Markdown de l'agent -> HTML de Telegram (negreta, cursiva, codi, enllaços, títols i llistes).
+const esc = (t) => t.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+function toHtml(src) {
+  const keep = [];
+  const hold = (h) => `\u0000${keep.push(h) - 1}\u0000`;
+  let t = String(src).replace(/```[^\n`]*\n?([\s\S]*?)```/g, (_, c) => hold(`<pre>${esc(c.replace(/\n$/, ''))}</pre>`));
+  t = t.replace(/`([^`\n]+)`/g, (_, c) => hold(`<code>${esc(c)}</code>`));
+  t = esc(t);
+  t = t.replace(/^#{1,6}\s+(.+)$/gm, '<b>$1</b>')
+    .replace(/^\s*[-*+]\s+/gm, '• ')
+    .replace(/\[([^\]\n]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2">$1</a>')
+    .replace(/\*\*([^*\n]+?)\*\*/g, '<b>$1</b>')
+    .replace(/(^|[\s(])\*([^*\s][^*\n]*?)\*(?=[\s).,;:!?]|$)/g, '$1<i>$2</i>');
+  return t.replace(/\u0000(\d+)\u0000/g, (_, i) => keep[Number(i)]);
+}
+
 class Telegram {
   constructor({ cfg, hub, audit, available = () => ['claude', 'codex'] }) {
     this.cfg = cfg;
@@ -153,7 +169,8 @@ class Telegram {
       this.chatOf.set(sid, chat);
       this.hub.send(sid, text, this.hookUrl ? this.hookUrl() : undefined);
       this.audit.add({ type: 'telegram', what: `Missatge de Telegram: ${clip(text, 120)}`, by: `Telegram · ${who}`, session: sid });
-      return this.send(chat, '👌 Hi treballo.');
+      this.call('sendChatAction', { chat_id: chat, action: 'typing' }).catch(() => {});
+      return;
     } catch (e) {
       return this.send(chat, `No he pogut començar: ${e.message}`);
     }
@@ -211,7 +228,9 @@ class Telegram {
   }
 
   send(chat, text) {
-    return this.call('sendMessage', { chat_id: chat, text: clip(text, 4000) }).catch(() => {});
+    const raw = clip(text, 3500);
+    return this.call('sendMessage', { chat_id: chat, text: toHtml(raw), parse_mode: 'HTML', link_preview_options: { is_disabled: true } })
+      .catch(() => this.call('sendMessage', { chat_id: chat, text: raw }).catch(() => {}));
   }
 
   async download(fileId) {

package/web/app/app.js

@@ -552,12 +552,60 @@ function computerCard(m, i) {
 // Ajuda sempre a mà: com es fa cada cosa, i què mirar si no connecta.
 function helpPanel(open) {
   const q = (t, body) => `<details><summary>${t}</summary><div class="help-body">${body}</div></details>`;
+  const k = (t) => `<span class="mono">${t}</span>`;
+  const blk = (t) => `<pre class="cmdb"><code>${t}</code></pre>`;
+  const rows = (list) => `<div class="cmdlist">${list.map(([c, d]) => `<div><span class="mono">${c}</span><span>${d}</span></div>`).join('')}</div>`;
+  const grp = (t) => `<h3 class="help-grp">${t}</h3>`;
   return `<section class="panel help" id="help"><header><h2>Com es fa</h2></header><div class="body">
-    ${q('Connectar aquest ordinador', `<p>Al terminal, des de la carpeta dels teus projectes, executa <span class="mono">npx nio-cat</span>. S’obre nio.cat ja connectat. Cal Node.js 18 o més nou.</p>`)}
-    ${q('Fer-lo servir des del mòbil', `<p>A l’ordinador, a Ordinadors, prem <b>Continua al mòbil</b>. Surt un QR i un codi <span class="mono">nio-…</span>.</p><p>Al mòbil, obre <b>www.nio.cat/app</b> → Ordinadors → Afegeix ordinador, i escaneja el QR o enganxa el codi.</p><p>Per connectar-t’hi des de qualsevol xarxa cal <span class="mono">cloudflared</span> a l’ordinador (<span class="mono">brew install cloudflared</span>). Sense ell, el mòbil ha d’estar a la mateixa wifi.</p>`)}
-    ${q('Afegir un servidor (VPS) amb Claude Code', `<p>Ordinadors → Afegeix ordinador → <b>Servidor (SSH)</b> → escriu <span class="mono">usuari@servidor</span>. L’ordinador hi entra, hi engega nio i el servidor surt a la llista.</p><p>Després, prem <b>Continua al mòbil</b> amb el servidor actiu per fer-lo servir des del mòbil.</p>`)}
-    ${q('Què cal al servidor', `<ul><li>Entrar-hi per SSH sense contrasenya. Si no, executa <span class="mono">ssh-copy-id usuari@servidor</span> a l’ordinador.</li><li>Node.js 18 o més nou.</li><li>Claude Code instal·lat i amb sessió iniciada: entra al servidor i executa <span class="mono">claude</span> un cop.</li><li>Linux amb <span class="mono">curl</span> o <span class="mono">wget</span> (nio hi instal·la <span class="mono">cloudflared</span> sol).</li></ul>`)}
-    ${q('No es connecta', `<ul><li><b>«No arribo a l’ordinador»</b>: comprova que nio continua engegat al terminal.</li><li><b>El servidor ha deixat de respondre</b>: si s’ha reiniciat, l’adreça canvia. Prem <b>Torna a connectar</b> a la seva targeta.</li><li><b>Safari no connecta</b>: obre nio amb <span class="mono">npx nio-cat --local</span>, o fes servir Chrome.</li><li><b>La clau no és vàlida</b>: torna a afegir l’ordinador amb el codi nou.</li></ul>`)}
+    ${grp('Per començar')}
+    ${q('Què és nio', `<p>nio et deixa donar feina als agents d’IA del teu ordinador (Claude Code, Codex, Grok, Antigravity i Ollama) des del mòbil. Els agents <b>treballen a l’ordinador o al servidor</b>, amb els teus comptes. El mòbil és el comandament: hi segueixes la feina en directe i aproves el que facin.</p>`)}
+    ${q('Connectar aquest ordinador', `<p>Al terminal, des de la carpeta dels teus projectes, executa:</p>${blk('npx nio-cat')}<p>S’obre nio.cat ja connectat. Cal Node.js 18 o més nou. Pots indicar més carpetes: ${k('npx nio-cat ~/projectes')}.</p>`)}
+    ${q('Fer-lo servir des del mòbil', `<p>A l’ordinador, a Ordinadors, prem <b>Continua al mòbil</b>. Surt un QR i un codi ${k('nio-…')}.</p><p>Al mòbil, obre <b>www.nio.cat/app</b> → Ordinadors → Afegeix ordinador, i escaneja el QR o enganxa el codi. Guarda el codi com una contrasenya: qui el té, pot manar a l’ordinador.</p><p>Per connectar-t’hi des de qualsevol xarxa cal ${k('cloudflared')} a l’ordinador (${k('brew install cloudflared')}). Sense ell, el mòbil ha d’estar a la mateixa wifi. Si reinicies nio, l’adreça del túnel canvia: torna a escanejar el codi.</p>`)}
+    ${q('Afegir un servidor (VPS) amb Claude Code', `<p>Ordinadors → Afegeix ordinador → <b>Servidor (SSH)</b> → escriu ${k('usuari@servidor')}. L’ordinador hi entra, hi engega nio i el servidor surt a la llista. Després, prem <b>Continua al mòbil</b> amb el servidor actiu.</p><p>Des del terminal també es pot: ${k('npx nio-cat ssh usuari@servidor')}.</p>`)}
+    ${q('Què cal al servidor', `<ul><li>Entrar-hi per SSH sense contrasenya. Si no, executa ${k('ssh-copy-id usuari@servidor')} a l’ordinador.</li><li>Node.js 18 o més nou.</li><li>Claude Code instal·lat i amb sessió iniciada: entra al servidor i executa ${k('claude')} un cop.</li><li>Linux amb ${k('curl')} o ${k('wget')} (nio hi instal·la ${k('cloudflared')} sol).</li></ul>`)}
+
+    ${grp('Treballar amb els agents')}
+    ${q('Crear una sessió', `<p>A <b>Sessions</b>, prem <b>Nova sessió</b>: tria l’agent, la carpeta (hi ha un explorador de carpetes de l’ordinador) i el nivell de permisos. Escriu què vols i l’agent es posa a treballar. La resposta et va arribant en directe.</p><p>També pots <b>clonar un repositori de GitHub</b> des de Nova sessió: nio fa servir el ${k('gh')} de l’ordinador (cal haver fet ${k('gh auth login')}).</p>`)}
+    ${q('Els tres nivells de permisos', `<ul><li><b>Només llegir</b>: l’agent llegeix i proposa, però no toca cap fitxer.</li><li><b>Demana permís</b>: llegeix sol; abans d’editar o executar alguna cosa, t’ho pregunta (Claude Code).</li><li><b>Via lliure</b>: treballa sense preguntar. Fes-ho servir només en carpetes de confiança.</li></ul><p>Es pot canviar enmig d’una sessió amb ${k('/mode')}.</p>`)}
+    ${q('Aprovacions', `<p>Quan un agent vol editar un fitxer o executar una ordre, surt una targeta amb el que farà. <b>Aprova</b> o <b>rebutja</b> amb un toc. A <b>Aprovacions</b> tens totes les pendents de totes les sessions juntes.</p>`)}
+    ${q('Comandes amb «/»', `<p>Al missatge d’una sessió, escriu ${k('/')} i surt la llista amb suggeriments. Les de nio funcionen sempre; les de l’agent (comandes i skills) se li envien tal qual.</p>${rows([
+      ['/mode', 'Canvia els permisos: ' + k('l') + ' llegir, ' + k('p') + ' preguntar, ' + k('t') + ' tot'],
+      ['/model', 'Canvia de model'],
+      ['/stop', 'Atura l’agent ara mateix'],
+      ['/nova', 'Nova sessió amb el mateix agent i carpeta'],
+      ['/carpeta', 'Canvia la carpeta de la sessió'],
+      ['/git', 'Git i GitHub: veure canvis, fer commit i crear un PR'],
+      ['/nom', 'Posa nom a la sessió (' + k('/nom Feina web') + ')'],
+      ['/opcions', 'Opcions de la sessió'],
+      ['/ajuda', 'Llista de comandes']
+    ])}<p>Exemple: ${k('/mode p')} passa la sessió a «Demana permís».</p>`)}
+    ${q('Git i GitHub', `<p>Dins una sessió, ${k('/git')} (o Opcions → Git i GitHub) mostra els canvis, fa <b>commit</b> (en una branca nova si ets a ${k('main')}) i crea un <b>PR</b>. Cap clau no passa per nio: fa servir el ${k('git')} i el ${k('gh')} de l’ordinador.</p>`)}
+    ${q('Avisos al mòbil', `<p>A <b>Ajustos → Avisos</b>, prem <b>Activa els avisos</b>. Rebràs una notificació quan un agent et demana permís o acaba la feina. L’avís arriba buit; el detall el demana el mòbil directament a l’ordinador.</p><p>A l’iPhone, primer afegeix nio a la pantalla d’inici (Comparteix → Afegeix a la pantalla d’inici) i obre’l des d’allà.</p>`)}
+    ${q('Veu', `<p>A <b>Ajustos → Veu</b> pots posar la teva clau d’ElevenLabs per <b>dictar</b> els missatges amb el micròfon i <b>escoltar</b> les respostes. La clau es queda només en aquest navegador.</p>`)}
+
+    ${grp('Eines')}
+    ${q('Pantalla remota', `<p>Mira i controla l’escriptori d’un ordinador des del mòbil. A <b>Ordinadors</b>, baixa fins a la secció <b>Pantalla</b> i prem <b>Obre la pantalla</b>. S’obre a pantalla completa. Cal activar abans <b>Apps de l’escriptori</b> a la mateixa secció.</p><ul><li><b>Mirar</b>: només veus la pantalla, en directe. Amb un dit la mous quan has fet zoom.</li><li><b>Controlar</b>: toc = clic; doble toc = doble clic; mantenir premut = clic dret; dos dits = desplaçar o fer zoom. El botó <b>1 dit</b> canvia entre desplaçar i arrossegar, i el botó <b>2 dits</b> entre desplaçar l’ordinador i fer zoom amb pessics. <b>Teclat</b> obre el teclat del mòbil, i dalt hi tens ${k('⌘')} ${k('⌥')} ${k('⌃')} ${k('⇧')}, ${k('Esc')}, ${k('Tab')} i fletxes.</li><li><b>Zoom amb dos dits</b>: pessiga per apropar i arrossega amb dos dits per moure’t. Al mode Mirar sempre va així, amb doble toc per alternar entre enquadrar i apropar. Al mode Controlar, tria al botó <b>2 dits</b> si els dos dits desplacen l’ordinador o fan zoom. A l’ordinador, pessiga al trackpad o ${k('Ctrl')} + roda. Els botons <b>− 100% +</b> i <b>1:1</b> fan el mateix i funcionen en tots dos modes.</li><li><b>Desa captura</b>: baixa el fotograma actual com a imatge. <b>Captura</b> (a la secció) en fa una de sola, sense obrir la pantalla.</li><li><b>Si surt negra</b>: al Mac, dona el permís de <b>Gravació de pantalla</b> (i <b>Accessibilitat</b> per controlar) al Terminal on corre <span class="mono">nio-cat</span> i reinicia’l. A Linux, per controlar cal <span class="mono">xdotool</span>.</li></ul>`)}
+    ${q('Pissarra', `<p>Un llenç infinit per fer diagrames a mà alçada: fluxos, mapes mentals i organigrames. Hi arribes des de <b>Més → Pissarra</b> (al mòbil) o al menú (a l’ordinador).</p><ul><li><b>Eines</b>: selecciona, mou el llenç, rectangle, el·lipse, rombe, fletxa, línia, llapis, text i goma. El cadenat manté l’eina activa.</li><li><b>Zoom amb dos dits</b>: al mòbil, pessiga sobre el llenç; amb els dos dits alhora també el mous. A l’ordinador, pessiga al trackpad o fes ${k('Ctrl')} + roda del ratolí.</li><li><b>Moure’s</b>: amb un dit, a l’espai buit (eina Selecciona), o amb ${k('Espai')} + arrossegar, o la roda del ratolí.</li><li><b>Text</b>: doble toc o doble clic per editar; doble toc a l’espai buit crea un text nou.</li><li><b>Zoom ràpid</b>: la xifra del percentatge torna al 100%; el botó de les cantonades ho enquadra tot.</li><li><b>Desfés / refés</b>: els botons de dalt a l’esquerra, o ${k('Ctrl Z')} i ${k('Ctrl ⇧ Z')}.</li><li><b>Estil</b>: color, gruix i traç (al mòbil, el botó de la paleta). Menú ⋯: exporta a PNG, SVG o JSON, i quadrícula.</li></ul>`)}
+    ${q('Demanar-li el dibuix a en Nio', `<p>Prem <b>Nio</b> (dalt a la dreta) per obrir el xat de la pissarra. Descriu què vols i ho dibuixa. Exemples:</p>${rows([
+      ['Flux: A -> B -> C', 'Una fletxa per línia; afegeix ' + k(': etiqueta') + ' si vols'],
+      ['Mapa mental de X: a, b, c', 'Tema central amb branques'],
+      ['Organigrama: Direcció > Finances, Operacions', 'Qui depèn de qui'],
+      ['Afegeix un rombe “Quadra?”', 'Afegeix una figura'],
+      ['Connecta Banc amb ERP', 'Uneix dues figures amb una fletxa'],
+      ['Pinta Banc de verd', 'Canvia el color'],
+      ['Reanomena Banc a Caixa', 'Canvia el text'],
+      ['Esborra ERP', 'Treu una figura'],
+      ['Ordena-ho · Centra · Desfés', 'Ordena, enquadra o desfà'],
+      ['Plantilla agent', 'També ' + k('Plantilla d’aprovació') + ' i ' + k('Plantilla conciliació')],
+      ['Exporta PNG', 'També ' + k('SVG') + ' o ' + k('JSON')]
+    ])}<p>Al desplegable <b>Amb</b> tries què t’entén: les <b>ordres ràpides</b> (sense gastar res) o un model.</p>`)}
+    ${q('Xat local', `<p>A <b>Més → Xat local</b> tens un model petit que funciona <b>dins del navegador del mòbil</b>, sense ordinador ni connexió un cop descarregat. Necessita un navegador amb WebGPU. Si la GPU del mòbil es reinicia, el xat es recupera sol.</p>`)}
+    ${q('Models d’Ollama', `<p>A <b>Models</b> veus els models d’Ollama de l’ordinador, en pots descarregar de nous amb el progrés en directe, esborrar-los i obrir-hi sessions. Funcionen al teu ordinador i no gasten res.</p>`)}
+    ${q('Buscador i dreceres', `<p>Prem ${k('Ctrl K')} (o ${k('⌘ K')}) per obrir el buscador d’accions: nova sessió, afegir ordinador, configurar la veu, fer el tutorial… Al mòbil, llisca cap als costats per canviar de pàgina.</p>`)}
+
+    ${grp('Si alguna cosa no va')}
+    ${q('No es connecta', `<ul><li><b>«No arribo a l’ordinador»</b>: comprova que nio continua engegat al terminal.</li><li><b>El servidor ha deixat de respondre</b>: si s’ha reiniciat, l’adreça canvia. Prem <b>Torna a connectar</b> a la seva targeta.</li><li><b>Safari no connecta</b>: obre nio amb ${k('npx nio-cat --local')}, o fes servir Chrome.</li><li><b>La clau no és vàlida</b>: torna a afegir l’ordinador amb el codi nou. Per invalidar tots els codis antics: ${k('npx nio-cat reset-token')}.</li><li><b>Quins agents té l’ordinador?</b> ${k('npx nio-cat doctor')} els llista.</li></ul>`)}
+    ${q('Seguretat', `<ul><li>L’enllaç de connexió porta una clau aleatòria que el navegador no envia a cap servidor web.</li><li>Cap dada no passa per servidors de nio: el mòbil parla directament amb el teu ordinador.</li><li>Totes les crides demanen la clau, que només tens tu.</li></ul>`)}
     ${q('D’on es gasta', `<p>nio no fa cap crida pel seu compte. Cada agent treballa a l’ordinador o al servidor amb el teu compte (Claude, Codex, Grok…). Ollama funciona al teu ordinador i no gasta res.</p>`)}
   </div></section>`;
 }
@@ -1824,7 +1872,8 @@ async function panicNow() {
   try { const r = await api('/api/panic', { method: 'POST' }); toast(`Aturat tot (${r.stopped} agents)`); } catch (e) { toast(e.message, 4500); }
 }
 function screenSection() {
-  return `<div class="sec-head" id="screenSec"><div><h2 class="sec">Pantalla</h2><p class="muted small">Els agents poden fer servir el navegador (agent-browser) i les apps de l’escriptori (agent-desktop). Mirar passa sol; clicar, escriure o enviar sempre et demana permís, amb una captura.</p></div><button class="btn" data-act="screen-now" type="button" ${controlOn() ? '' : 'disabled'}>${svg(ICON.screen)}Veure pantalla ara</button></div><div id="screenBody">${screenHtml()}</div>`;
+  const on = controlOn();
+  return `<div class="sec-head" id="screenSec"><div><h2 class="sec">Pantalla</h2><p class="muted small">Mira i controla l’escriptori d’aquest ordinador des del mòbil, com un escriptori remot. A més, els agents poden fer servir el navegador (agent-browser) i les apps (agent-desktop): mirar passa sol; clicar, escriure o enviar sempre et demana permís, amb una captura.</p></div><div class="row"><button class="btn" data-act="screen-now" type="button" ${on ? '' : 'disabled'}>${svg(ICON.screen)}Captura</button><button class="btn ink" data-act="remote-open" type="button" ${on ? '' : 'disabled'}>${svg(ICON.screen)}Obre la pantalla</button></div></div><div id="screenBody">${screenHtml()}</div>`;
 }
 function screenHtml() {
   if (!screen) return `<div class="panel empty">${bot('work')}<h2>Carregant…</h2></div>`;
@@ -1834,26 +1883,282 @@ function screenHtml() {
     const st = !x.installed ? `No instal·lat · <span class="mono">${hint}</span>` : x.ready === false ? esc(x.why || 'No està a punt') : x.enabled ? 'Activat' : 'Desactivat';
     return `<div class="agent-row"><i class="dot ${x.enabled ? 'on' : ''}"></i><span class="grow"><b>${name}</b><div class="muted small">${st}</div></span>${x.installed ? `<button class="btn sm ${x.enabled ? '' : 'ink'}" data-ctl="${k}" data-on="${!x.enabled}" type="button">${x.enabled ? 'Desactiva' : 'Activa'}</button>` : ''}</div>`;
   };
+  const d = screen.desk, warn = [];
+  if (d && c.escriptori?.enabled) {
+    if (d.screen === false) warn.push('Falta el permís de <b>Gravació de pantalla</b>: per això les captures surten negres. Ajustos del Sistema → Privadesa i seguretat → Gravació de pantalla: activa el Terminal (o l’app des d’on obres nio) i reinicia nio.');
+    if (d.accessibility === false) warn.push('Falta el permís d’<b>Accessibilitat</b> per controlar el ratolí i el teclat. Ajustos del Sistema → Privadesa i seguretat → Accessibilitat: activa el Terminal (o l’app des d’on obres nio) i reinicia nio.');
+    if (d.input === false && d.platform === 'linux') warn.push('Per controlar l’escriptori cal <span class="mono">xdotool</span>: <span class="mono">sudo apt install xdotool</span>.');
+  }
   return `<div class="grid2 one">
     <div class="stack">
+      ${warn.length ? `<section class="panel"><header><h2>Falten permisos</h2></header><div class="body stack">${warn.map((w) => `<p class="small">${w}</p>`).join('')}</div></section>` : ''}
       <section class="panel"><header><h2>En aquest ordinador</h2></header><div class="body">${row('navegador', 'Navegador web', 'npm i -g agent-browser && agent-browser install')}${row('escriptori', 'Apps de l’escriptori', 'npm i -g agent-desktop')}<p class="muted small" style="margin-top:10px">En activar-ho, nio dona a Claude Code i a Codex les guies oficials. Desactivat per defecte. Claude Code demana permís per a cada acció; Codex no pot preguntar, així que només segueix les normes de la guia.</p></div></section>
       <section class="panel"><header><h2>Última captura</h2>${screen.last ? `<span class="muted small">${ago(screen.last.t)} · ${esc(screen.last.from)}</span>` : ''}</header><div class="body">${screen.last ? `<img class="screen-img" alt="Captura de la pantalla de l’ordinador" data-shot="${esc(screen.last.id)}">` : '<p class="muted small">Encara no n’hi ha cap. Prem «Veure pantalla ara».</p>'}</div></section>
       <section class="panel"><header><h2>Accions fetes</h2></header><div class="body">${screen.actions.length ? screen.actions.map((a) => `<div class="act-row"><span class="act-t mono">${new Date(a.t).toLocaleTimeString('ca', { hour: '2-digit', minute: '2-digit' })}</span><div class="grow"><div class="mono small act-what">${esc(a.what)}</div><div class="muted small">${esc(a.title || '')}</div></div></div>`).join('') : '<p class="muted small">Cap encara.</p>'}</div></section>
       <section class="panel"><header><h2>Aturada d’emergència</h2></header><div class="body stack"><p class="small">Atura tots els agents, rebutja el que estigui pendent i tanca el navegador.</p><button class="btn danger" data-act="panic" type="button">${svg(ICON.panic)}Atura-ho tot</button></div></section>
-      <section class="panel"><header><h2>Vols fer-ho tu?</h2></header><div class="body"><p class="muted small">nio no és un escriptori remot. Si necessites controlar la pantalla tu mateix, fes servir <a href="https://rustdesk.com" target="_blank" rel="noopener">RustDesk</a> o <a href="https://remotedesktop.google.com" target="_blank" rel="noopener">Chrome Remote Desktop</a>.</p></div></section>
     </div>
   </div>`;
 }
 async function loadScreen() {
   try {
-    const [caps, cur, log] = await Promise.all([api('/api/control'), api('/api/screen'), api('/api/audit?type=tool&limit=300')]);
-    screen = { caps, last: cur.last, actions: log.filter((e) => /^(npx\s+)?agent-(browser|desktop)\b/.test(e.what || '')).slice(0, 30) };
+    const [caps, cur, log, desk] = await Promise.all([api('/api/control'), api('/api/screen'), api('/api/audit?type=tool&limit=300'), api('/api/desktop/status').catch(() => null)]);
+    screen = { caps, desk, last: cur.last, actions: log.filter((e) => /^(npx\s+)?agent-(browser|desktop)\b/.test(e.what || '')).slice(0, 30) };
   } catch (e) { screen = { error: e.message }; }
   const box = $('#screenBody'); if (box) { box.innerHTML = screenHtml(); hydrateShots(box); }
   renderPanic();
 }
 function syncScreenBtn() { const b = $('[data-act=screen-now]'); if (b) b.disabled = !controlOn(); }
 function onScreen(msg) { if (screen && !screen.error) { screen.last = msg.shot; { const box = $('#screenBody'); if (box) box.innerHTML = screenHtml(); hydrateShots(box); } } }
+/* ---------------------------------------------------------------- pantalla remota (veure i controlar l'ordinador) */
+const RD = { on: false, ctl: false, mods: new Set(), drag: false, q: 55, blank: 0, err: 0, objUrl: null, chain: Promise.resolve(), sw: 0, tap: null, scroll: null, errAt: 0 };
+const RD_KEYS = [['Escape', 'Esc'], ['Tab', 'Tab'], ['ArrowUp', '↑'], ['ArrowDown', '↓'], ['ArrowLeft', '←'], ['ArrowRight', '→'], ['Enter', '⏎'], ['Backspace', '⌫']];
+const RD_MODS = [['meta', '⌘'], ['alt', '⌥'], ['ctrl', '⌃'], ['shift', '⇧']];
+const RD_SPECIAL = /^(Escape|Tab|Arrow(Up|Down|Left|Right)|Home|End|PageUp|PageDown|Delete|F([1-9]|1[0-2]))$/;
+
+async function remoteOpen() {
+  const m = machine(); if (!m || RD.on) return;
+  if (!(state.info?.control?.escriptori?.enabled || screen?.caps?.escriptori?.enabled)) return toast('Activa primer «Apps de l’escriptori» en aquest ordinador.', 5000);
+  Object.assign(RD, { two: 'scroll', z: 1, px: 0, py: 0, on: true, ctl: false, mods: new Set(), drag: false, blank: 0, err: 0, tap: null, scroll: null });
+  const root = document.createElement('div');
+  root.className = 'rd'; root.id = 'rd'; root.setAttribute('role', 'dialog'); root.setAttribute('aria-label', 'Pantalla remota');
+  root.innerHTML = `<div class="rd-bar"><button class="rd-btn" data-rd="close" type="button">Tanca</button><b class="rd-title">${esc(m.name || 'Ordinador')}</b><span class="rd-stat" id="rdStat"></span><span class="grow"></span><button class="rd-btn" data-rd="full" type="button" id="rdFull" hidden>Pantalla completa</button><div class="rd-seg" role="group" aria-label="Mode"><button data-rd="view" type="button" aria-pressed="true">Mirar</button><button data-rd="ctl" type="button" aria-pressed="false">Controlar</button></div></div>
+    <div class="rd-stage" id="rdStage"><img id="rdImg" alt="Pantalla de l’ordinador" draggable="false"><div class="rd-msg" id="rdMsg">Connectant…</div><div class="rd-tools" role="group" aria-label="Zoom i captura"><button class="rd-btn" data-rd="zout" type="button" aria-label="Allunya">−</button><button class="rd-btn rd-pct" data-rd="zfit" type="button" id="rdPct" aria-label="Enquadra">100%</button><button class="rd-btn" data-rd="zin" type="button" aria-label="Apropa">+</button><button class="rd-btn" data-rd="z11" type="button" aria-label="Mida real">1:1</button><span class="rd-sep"></span><button class="rd-btn" data-rd="save" type="button">Desa captura</button></div></div>
+    <div class="rd-keys" id="rdKeys" hidden><button class="rd-btn" data-rd="kbd" type="button">Teclat</button>${RD_MODS.map(([k, l]) => `<button class="rd-btn" data-mod="${k}" type="button" aria-pressed="false">${l}</button>`).join('')}${RD_KEYS.map(([k, l]) => `<button class="rd-btn" data-key="${k}" type="button">${l}</button>`).join('')}<button class="rd-btn" data-rd="drag" type="button" id="rdDrag">1 dit: desplaça</button><button class="rd-btn" data-rd="two" type="button" id="rdTwo">2 dits: desplaça</button></div>
+    <textarea class="rd-type" id="rdType" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" aria-label="Teclat de l’ordinador"></textarea>`;
+  document.body.appendChild(root);
+  document.documentElement.classList.add('rd-open');
+  if (document.fullscreenEnabled && !matchMedia('(pointer: coarse)').matches) $('#rdFull').hidden = false;
+  rdBind(root);
+  api('/api/desktop/session', { method: 'POST', body: { event: 'open', wake: true } }).catch(() => {});
+  api('/api/desktop/status').then((s) => { RD.status = s; rdHint(); }).catch(() => {});
+  rdLoop();
+}
+function remoteClose() {
+  if (!RD.on) return;
+  RD.on = false;
+  if (document.fullscreenElement) document.exitFullscreen?.().catch(() => {});
+  if (RD.objUrl) URL.revokeObjectURL(RD.objUrl); RD.objUrl = null;
+  $('#rd')?.remove();
+  document.documentElement.classList.remove('rd-open');
+}
+function rdMsg(text) { const el = $('#rdMsg'); if (!el) return; el.textContent = text || ''; el.hidden = !text; }
+function rdHint() {
+  const s = RD.status; if (!s || !RD.on) return;
+  if (RD.blank >= 2) {
+    rdMsg(s.screen === false
+      ? 'La pantalla surt negra perquè falta el permís de Gravació de pantalla. Ajustos del Sistema → Privadesa i seguretat → Gravació de pantalla: activa el Terminal (o l’app des d’on obres nio) i reinicia nio.'
+      : 'La pantalla surt negra: l’ordinador pot estar bloquejat o amb la pantalla apagada. Desbloqueja’l, o mou-hi el ratolí.');
+  } else if (RD.ctl && s.accessibility === false) rdMsg('Per controlar-lo cal el permís d’Accessibilitat. Ajustos del Sistema → Privadesa i seguretat → Accessibilitat: activa el Terminal (o l’app des d’on obres nio) i reinicia nio.');
+  else if (RD.ctl && s.input === false) rdMsg(s.platform === 'linux' ? 'Per controlar-lo cal xdotool: sudo apt install xdotool.' : 'Aquest ordinador no es pot controlar.');
+  else rdMsg('');
+}
+async function rdLoop() {
+  const m = machine();
+  let n = 0, t0 = performance.now();
+  while (RD.on) {
+    if (document.hidden) { await sleep(500); continue; }
+    const started = performance.now();
+    try {
+      const stage = $('#rdStage'); if (!stage) break;
+      const w = Math.min(2400, Math.max(640, Math.round(stage.clientWidth * Math.min(devicePixelRatio || 1, 2) * Math.min(RD.z, 2))));
+      const res = await fetch(`${m.url}/api/desktop/frame?w=${w}&q=${RD.q}&_=${Date.now()}`, { headers: { Authorization: `Bearer ${m.token}` }, cache: 'no-store' });
+      if (!res.ok) { const d = await res.json().catch(() => ({})); throw new Error(d.error || `Error ${res.status}`); }
+      const blob = await res.blob();
+      if (!RD.on) break;
+      const img = $('#rdImg'), old = RD.objUrl, url = URL.createObjectURL(blob);
+      RD.objUrl = url; img.onload = () => { if (old) URL.revokeObjectURL(old); }; img.src = url;
+      RD.sw = Number(res.headers.get('x-screen-w')) || RD.sw;
+      RD.blank = res.headers.get('x-blank') === '1' ? RD.blank + 1 : 0;
+      if (RD.err || RD.blank === 0 || RD.blank === 2) { RD.err = 0; rdHint(); }
+      if (RD.blank === 2) api('/api/desktop/session', { method: 'POST', body: { wake: true } }).catch(() => {});
+      n++; const dt = performance.now() - t0;
+      if (dt > 1500) { const st = $('#rdStat'); if (st) st.textContent = `${(n * 1000 / dt).toFixed(1)} img/s`; n = 0; t0 = performance.now(); }
+    } catch (e) {
+      RD.err++; rdMsg(RD.err > 1 ? `${e.message || 'Sense connexió'}${/^Error|Activa|captura/.test(e.message) ? '' : ' · reconnectant…'}` : '');
+      await sleep(Math.min(3000, 500 * RD.err));
+    }
+    await sleep(Math.max(30, 110 - (performance.now() - started)));
+  }
+}
+function rdSend(ev) {
+  RD.chain = RD.chain.then(() => api('/api/desktop/input', { method: 'POST', body: ev })).catch((e) => { if (Date.now() - RD.errAt > 4000) { RD.errAt = Date.now(); toast(e.message, 5000); } });
+}
+function rdKey(key, extra = []) {
+  const mods = [...new Set([...RD.mods, ...extra])];
+  if (RD.mods.size) { RD.mods.clear(); rdSyncMods(); }
+  rdSend({ type: 'key', key, mods });
+}
+function rdSyncMods() { $$('#rd [data-mod]').forEach((b) => b.setAttribute('aria-pressed', RD.mods.has(b.dataset.mod))); }
+function rdPos(e) {
+  const r = $('#rdImg').getBoundingClientRect(); if (!r.width) return null;
+  const x = (e.clientX - r.left) / r.width, y = (e.clientY - r.top) / r.height;
+  return x < 0 || x > 1 || y < 0 || y > 1 ? null : [x, y];
+}
+function rdScroll(dx, dy, pos) {
+  const s = RD.scroll || (RD.scroll = { dx: 0, dy: 0, pos, t: null });
+  s.dx += dx; s.dy += dy; if (pos) s.pos = pos;
+  if (s.t) return;
+  s.t = setTimeout(() => {
+    const k = RD.scroll; RD.scroll = null;
+    const r = $('#rdImg')?.getBoundingClientRect(), f = r && r.width ? (RD.sw || r.width) / r.width : 1;
+    const ev = { type: 'scroll', dx: Math.round(k.dx * f), dy: Math.round(k.dy * f) };
+    if (k.pos) { ev.x = k.pos[0]; ev.y = k.pos[1]; }
+    if (ev.dx || ev.dy) rdSend(ev);
+  }, 70);
+}
+
+function rdView() {
+  const img = $('#rdImg'), st = $('#rdStage'); if (!img || !st) return;
+  const z = RD.z, mx = Math.max(0, (img.offsetWidth * z - st.clientWidth) / 2), my = Math.max(0, (img.offsetHeight * z - st.clientHeight) / 2);
+  RD.px = Math.max(-mx, Math.min(mx, RD.px)); RD.py = Math.max(-my, Math.min(my, RD.py));
+  if (z === 1) RD.px = RD.py = 0;
+  img.style.transform = z === 1 ? '' : `translate(${RD.px}px,${RD.py}px) scale(${z})`;
+  const pct = $('#rdPct'); if (pct) pct.textContent = Math.round(z * 100) + '%';
+}
+function rdZoom(z, cx, cy) {
+  const st = $('#rdStage'); if (!st) return;
+  z = Math.max(1, Math.min(6, z));
+  const r = st.getBoundingClientRect(), ox = (cx ?? r.left + r.width / 2) - (r.left + r.width / 2), oy = (cy ?? r.top + r.height / 2) - (r.top + r.height / 2), k = z / RD.z;
+  RD.px = ox - (ox - RD.px) * k; RD.py = oy - (oy - RD.py) * k; RD.z = z; rdView();
+}
+function rdSave() {
+  const img = $('#rdImg'); if (!img?.src) return toast('Encara no hi ha cap imatge');
+  const d = new Date(), p = (n) => String(n).padStart(2, '0');
+  const a = document.createElement('a'); a.href = img.src; a.download = `nio-pantalla-${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}.jpg`;
+  document.body.appendChild(a); a.click(); a.remove(); toast('Captura desada');
+}
+function rdGestures(stage) {
+  const pts = new Map(); let g = null, pan = null, tapT = 0;
+  const dist = () => { const [a, b] = [...pts.values()]; return Math.hypot(a.x - b.x, a.y - b.y) || 1; };
+  const mid = () => { const [a, b] = [...pts.values()]; return [(a.x + b.x) / 2, (a.y + b.y) / 2]; };
+  stage.addEventListener('pointerdown', (e) => {
+    if (e.target.closest('.rd-tools') || (RD.ctl && (RD.two !== 'zoom' || e.pointerType === 'mouse'))) return;
+    try { stage.setPointerCapture(e.pointerId); } catch {}
+    pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pts.size === 2) { const [mx, my] = mid(); g = { d: dist(), z: RD.z, mx, my, px: RD.px, py: RD.py }; pan = null; }
+    else if (pts.size === 1 && !RD.ctl) pan = { x: e.clientX, y: e.clientY, px: RD.px, py: RD.py };
+  });
+  stage.addEventListener('pointermove', (e) => {
+    const p = pts.get(e.pointerId); if (!p) return; p.x = e.clientX; p.y = e.clientY;
+    if (pts.size >= 2 && g) {
+      const [mx, my] = mid(), st = stage.getBoundingClientRect(), z = Math.max(1, Math.min(6, g.z * dist() / g.d)), k = z / g.z;
+      const ox = g.mx - (st.left + st.width / 2), oy = g.my - (st.top + st.height / 2);
+      RD.z = z; RD.px = g.px * k + ox * (1 - k) + (mx - g.mx); RD.py = g.py * k + oy * (1 - k) + (my - g.my); rdView();
+    } else if (pan && RD.z > 1 && !RD.ctl) { RD.px = pan.px + e.clientX - pan.x; RD.py = pan.py + e.clientY - pan.y; rdView(); }
+  });
+  const up = (e) => {
+    if (!pts.has(e.pointerId)) return;
+    const moved = pan && Math.hypot(e.clientX - pan.x, e.clientY - pan.y) > 8;
+    pts.delete(e.pointerId); g = null;
+    if (pts.size === 1 && !RD.ctl) { const [q] = pts.values(); pan = { x: q.x, y: q.y, px: RD.px, py: RD.py }; }
+    else { pan = null; if (!pts.size && e.type === 'pointerup' && !moved && !RD.ctl) { const now = performance.now(); if (now - tapT < 320) { RD.z > 1 ? (RD.z = 1, rdView()) : rdZoom(2.5, e.clientX, e.clientY); tapT = 0; } else tapT = now; } }
+  };
+  stage.addEventListener('pointerup', up); stage.addEventListener('pointercancel', up);
+  stage.addEventListener('wheel', (e) => { if (!(e.ctrlKey || e.metaKey) && RD.ctl) return; e.preventDefault(); if (e.ctrlKey || e.metaKey) rdZoom(RD.z * Math.exp(-Math.max(-40, Math.min(40, e.deltaY)) * 0.01), e.clientX, e.clientY); else if (RD.z > 1) { RD.px -= e.deltaX; RD.py -= e.deltaY; rdView(); } }, { passive: false });
+  let gz = 1;
+  stage.addEventListener('gesturestart', (e) => { e.preventDefault(); gz = RD.z; });
+  stage.addEventListener('gesturechange', (e) => { e.preventDefault(); rdZoom(gz * e.scale, e.clientX, e.clientY); });
+  window.addEventListener('resize', rdView);
+}
+function rdBind(root) {
+  const stage = $('#rdStage', root), typer = $('#rdType', root);
+  const ptrs = new Map();
+  rdGestures(stage);
+  const click = (pos, e) => {
+    const now = performance.now(), prev = RD.tap, near = prev && Math.hypot(e.clientX - prev.x, e.clientY - prev.y) < 28;
+    const count = prev && near && now - prev.t < 340 ? (prev.count >= 2 ? 3 : 2) : 1;
+    RD.tap = { t: now, x: e.clientX, y: e.clientY, count };
+    rdSend({ type: 'click', x: pos[0], y: pos[1], count });
+  };
+  stage.addEventListener('pointerdown', (e) => {
+    if (!RD.ctl || e.target.closest('.rd-tools') || (e.pointerType === 'mouse' && e.button !== 0)) return;
+    try { stage.setPointerCapture(e.pointerId); } catch {}
+    const p = { x0: e.clientX, y0: e.clientY, x: e.clientX, y: e.clientY, touch: e.pointerType !== 'mouse', moved: false, long: false, path: [], pt: 0, lp: null };
+    const pos = rdPos(e); if (pos) p.path.push(pos);
+    if (p.touch) p.lp = setTimeout(() => { if (!p.moved && ptrs.size === 1 && ptrs.has(e.pointerId)) { p.long = true; navigator.vibrate?.(15); const q = rdPos(e); if (q) rdSend({ type: 'rclick', x: q[0], y: q[1] }); } }, 550);
+    ptrs.set(e.pointerId, p);
+    if (RD.two === 'zoom' && p.touch && ptrs.size > 1) for (const q of ptrs.values()) { q.moved = q.zoomed = true; clearTimeout(q.lp); }
+    if (!typer.matches(':focus') && !p.touch) typer.focus({ preventScroll: true });
+    e.preventDefault();
+  });
+  stage.addEventListener('pointermove', (e) => {
+    const p = ptrs.get(e.pointerId); if (!p) return;
+    const dx = e.clientX - p.x, dy = e.clientY - p.y; p.x = e.clientX; p.y = e.clientY;
+    if (!p.moved && Math.hypot(p.x - p.x0, p.y - p.y0) > 8) { p.moved = true; clearTimeout(p.lp); }
+    if (!p.moved || p.long || p.zoomed) return;
+    if (p.touch && (ptrs.size > 1 || !RD.drag)) { if (ptrs.size > 1 && e.isPrimary === false) return; rdScroll(dx, dy, rdPos(e)); return; }
+    const now = performance.now(), pos = rdPos(e);
+    if (pos && now - p.pt > 22) { p.path.push(pos); p.pt = now; }
+  });
+  const end = (e) => {
+    const p = ptrs.get(e.pointerId); if (!p) return;
+    ptrs.delete(e.pointerId); clearTimeout(p.lp);
+    if (p.long || p.zoomed) return;
+    const pos = rdPos(e);
+    if (!p.moved) { if (pos && e.type === 'pointerup') click(pos, e); return; }
+    if (p.touch && (ptrs.size > 0 || !RD.drag)) return;
+    if (pos) p.path.push(pos);
+    if (p.path.length >= 2) rdSend({ type: 'drag', path: p.path.length > 100 ? p.path.filter((_, i) => i % Math.ceil(p.path.length / 100) === 0 || i === p.path.length - 1) : p.path });
+  };
+  stage.addEventListener('pointerup', end);
+  stage.addEventListener('pointercancel', end);
+  stage.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!RD.ctl) return; const pos = rdPos(e); if (pos && e.pointerType !== 'touch' && !('ontouchstart' in window && e.sourceCapabilities?.firesTouchEvents)) rdSend({ type: 'rclick', x: pos[0], y: pos[1] }); });
+  stage.addEventListener('wheel', (e) => {
+    if (!RD.ctl) return; e.preventDefault();
+    const k = e.deltaMode === 1 ? 16 : 1;
+    rdScroll(-e.deltaX * k, -e.deltaY * k, rdPos(e));
+  }, { passive: false });
+  // Teclat: el text va per «beforeinput» (serveix per al teclat del mòbil); les tecles especials i les dreceres, per «keydown».
+  typer.addEventListener('keydown', (e) => {
+    if (!RD.ctl || e.isComposing || e.key === 'Process' || e.key === 'Unidentified') return;
+    if (['Meta', 'Control', 'Alt', 'Shift', 'CapsLock'].includes(e.key)) return;
+    const combo = e.metaKey || e.ctrlKey || e.altKey;
+    if (!combo && !RD_SPECIAL.test(e.key)) return;
+    e.preventDefault();
+    const mods = [e.metaKey && 'meta', e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift'].filter(Boolean);
+    rdKey(e.key.length === 1 ? e.key.toLowerCase() : e.key, mods);
+  });
+  typer.addEventListener('beforeinput', (e) => {
+    if (!RD.ctl) return;
+    const t = e.inputType;
+    if (t === 'insertCompositionText') return;
+    e.preventDefault();
+    if (t === 'insertText' || t === 'insertFromPaste' || t === 'insertReplacementText') {
+      const text = e.data ?? e.dataTransfer?.getData('text/plain') ?? '';
+      if (!text) return;
+      if (RD.mods.size && [...text].length === 1) rdKey(text.toLowerCase()); else rdSend({ type: 'text', text });
+    } else if (t === 'deleteContentBackward') rdKey('Backspace');
+    else if (t === 'deleteContentForward') rdKey('Delete');
+    else if (t === 'insertLineBreak' || t === 'insertParagraph') rdKey('Enter');
+  });
+  typer.addEventListener('compositionend', (e) => { if (RD.ctl && e.data) rdSend({ type: 'text', text: e.data }); typer.value = ''; });
+  root.addEventListener('click', (e) => {
+    const b = e.target.closest('button'); if (!b) return;
+    if (b.dataset.key) { rdKey(b.dataset.key); return; }
+    if (b.dataset.mod) { RD.mods.has(b.dataset.mod) ? RD.mods.delete(b.dataset.mod) : RD.mods.add(b.dataset.mod); rdSyncMods(); return; }
+    switch (b.dataset.rd) {
+      case 'close': remoteClose(); break;
+      case 'full': document.fullscreenElement ? document.exitFullscreen() : root.requestFullscreen?.().catch(() => {}); break;
+      case 'view': case 'ctl': {
+        RD.ctl = b.dataset.rd === 'ctl';
+        $$('.rd-seg button', root).forEach((x) => x.setAttribute('aria-pressed', x.dataset.rd === b.dataset.rd));
+        $('#rdKeys').hidden = !RD.ctl; root.classList.toggle('rd-ctl', RD.ctl);
+        if (RD.ctl) { api('/api/desktop/session', { method: 'POST', body: { event: 'control' } }).catch(() => {}); if (!matchMedia('(pointer: coarse)').matches) typer.focus({ preventScroll: true }); }
+        rdHint(); break;
+      }
+      case 'kbd': typer.focus(); break;
+      case 'zin': rdZoom(RD.z * 1.5); break;
+      case 'zout': rdZoom(RD.z / 1.5); break;
+      case 'zfit': RD.z = 1; rdView(); break;
+      case 'z11': { const im = $('#rdImg'); rdZoom(RD.sw && im.offsetWidth ? RD.sw / im.offsetWidth : 2); break; }
+      case 'save': rdSave(); break;
+      case 'two': RD.two = RD.two === 'zoom' ? 'scroll' : 'zoom'; b.textContent = RD.two === 'zoom' ? '2 dits: zoom' : '2 dits: desplaça'; break;
+      case 'drag': RD.drag = !RD.drag; b.textContent = RD.drag ? '1 dit: arrossega' : '1 dit: desplaça'; break;
+    }
+  });
+}
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && RD.on && !RD.ctl) remoteClose(); });
+
 document.addEventListener('click', async (e) => {
   const b = e.target.closest('[data-ctl]'); if (!b) return;
   b.disabled = true;
@@ -2044,6 +2349,7 @@ document.addEventListener('click', async (e) => {
     case 'revoke': return revokeDevice(a.dataset.dev);
     case 'job-new': return newJobSheet();
     case 'panic': return panicNow();
+    case 'remote-open': remoteOpen(); return;
     case 'screen-now': try { const s = await api('/api/screen', { method: 'POST' }); onScreen({ shot: s }); } catch (err) { toast(err.message, 4500); } return;
     case 'mem-new': return memEdit(null);
     case 'mem-all': if (mem) delete mem.hits; return loadMemory();

package/web/app/style.css

@@ -477,6 +477,14 @@ video.scan { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14p
 .help-body { display: grid; gap: 8px; padding: 0 0 14px; font-size: 14px; color: var(--fg-muted); }
 .help-body ul { padding-left: 18px; display: grid; gap: 4px; }
 .help-body b { color: var(--fg); font-weight: 600; }
+.help-body .mono { padding: 2px 7px; border-radius: 6px; background: var(--code); color: var(--fg); white-space: nowrap; }
+.help-body .cmdb { margin: 2px 0; padding: 12px 14px; border-radius: 10px; background: var(--code); color: var(--fg); font: 14px/1.4 var(--mono); overflow-x: auto; }
+.help-body .cmdlist { display: grid; gap: 6px; margin: 2px 0; }
+.help-body .cmdlist > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--code) 45%, transparent); }
+.help-body .cmdlist .mono { justify-self: start; white-space: normal; overflow-wrap: anywhere; }
+.help-grp { margin: 22px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
+.help-grp:first-child { margin-top: 0; }
+@media (max-width: 620px) { .help-body .cmdlist > div { grid-template-columns: 1fr; } }
 .empty .stepper { text-align: left; max-width: 640px; margin: 16px auto 18px; }
 a.kbd { text-decoration: none; color: inherit; }
 
@@ -645,3 +653,34 @@ dialog.sheet.wiz.compact .sheet-in, .compact .wiz-body { flex: 0 1 auto; }
 .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 36px 0 14px; }
 .sec-head .sec { margin: 0; }
 .sec-head p { margin-top: 4px; max-width: 640px; }
+
+/* Pantalla remota */
+html.rd-open, html.rd-open body { overflow: hidden; }
+.rd { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #0b0b0c; color: #f2f1ee; padding: var(--safe-t, 0px) 0 var(--safe-b, 0px); }
+.rd-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #161617; border-bottom: 1px solid #2a2a2c; flex: none; }
+.rd-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.rd-stat { font-size: 12px; color: #8d8c88; white-space: nowrap; }
+.rd-bar .grow { flex: 1; }
+.rd-btn { appearance: none; border: 1px solid #36363a; background: #232326; color: #f2f1ee; font: inherit; font-size: 13px; line-height: 1; padding: 9px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; flex: none; }
+.rd-btn:hover { background: #2d2d31; }
+.rd-btn[aria-pressed=true] { background: #f2f1ee; color: #161617; border-color: #f2f1ee; }
+.rd-seg { display: flex; border: 1px solid #36363a; border-radius: 10px; overflow: hidden; flex: none; }
+.rd-seg button { appearance: none; border: 0; background: transparent; color: #b9b8b3; font: inherit; font-size: 13px; padding: 9px 14px; cursor: pointer; }
+.rd-seg button[aria-pressed=true] { background: #f2f1ee; color: #161617; font-weight: 600; }
+.rd-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; }
+.rd-stage img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; -webkit-user-drag: none; }
+.rd.rd-ctl .rd-stage { cursor: crosshair; }
+.rd-msg { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: min(560px, calc(100% - 32px)); padding: 12px 16px; border-radius: 12px; background: rgba(22, 22, 23, .92); border: 1px solid #36363a; color: #f2f1ee; font-size: 13px; line-height: 1.45; text-align: center; pointer-events: none; }
+.rd-msg[hidden] { display: none; }
+.rd-keys { display: flex; gap: 8px; padding: 10px 12px; background: #161617; border-top: 1px solid #2a2a2c; overflow-x: auto; flex: none; -webkit-overflow-scrolling: touch; }
+.rd-keys[hidden] { display: none; }
+.rd-type { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; font-size: 16px; pointer-events: none; }
+@media (max-width: 560px) { .rd-bar { padding: 8px 10px; gap: 8px; } .rd-stat, #rdFull { display: none; } .rd-seg button { padding: 9px 11px; } }
+
+.rd-stage img { transform-origin: center; will-change: transform; }
+.rd-tools { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: rgba(22, 22, 23, .86); border: 1px solid #36363a; backdrop-filter: blur(8px); z-index: 2; max-width: calc(100% - 20px); }
+.rd-tools .rd-btn { padding: 10px 12px; min-width: 40px; }
+.rd-pct { min-width: 56px !important; font-variant-numeric: tabular-nums; }
+.rd-sep { width: 1px; align-self: stretch; background: #36363a; }
+.rd-msg { bottom: 84px; }
+@media (max-width: 560px) { .rd-tools { gap: 4px; padding: 5px; } .rd-tools .rd-btn { padding: 12px 10px; min-width: 44px; font-size: 14px; } .rd-pct { min-width: 52px !important; } }

package/web/board.css

@@ -190,3 +190,53 @@
   .bd-chat header { padding-top: 22px; }
   .bd-chat .cin textarea { font-size: 16px; }
 }
+
+/* Tàctil: botons còmodes, sense menú de pressió llarga ni selecció */
+.bd-stage, .bd-svg { -webkit-touch-callout: none; }
+@media (pointer: coarse) {
+  .bd .ib, .bd .pct { height: 40px; }
+  .bd .ib { width: 40px; }
+  .bd .pct { min-width: 52px; font-size: 13px; }
+  .bd .tb { width: 44px; height: 44px; }
+  .bd .chat-t { height: 44px; }
+  .bd-menu { top: 50px; min-width: 250px; }
+  .bd-menu button, .bd-menu label { padding: 13px 12px; font-size: 15px; }
+  .bd-style .sw-c { width: 34px; height: 34px; }
+  .bd-style .seg2 button { height: 36px; }
+  .bd-chat .chip-s { height: 38px; line-height: 36px; font-size: 13px; }
+  .bd-chat .send { width: 46px; height: 46px; }
+}
+@media (pointer: coarse) and (max-width: 820px) {
+  .bd-zoom [data-bd="zin"], .bd-zoom [data-bd="zout"] { display: none; }
+  .bd-tools { gap: 0; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
+  .bd .tb { scroll-snap-align: center; }
+}
+@container stage (max-width: 440px) {
+  .bd .tb { width: 40px; height: 44px; }
+  .bd-zoom { max-width: calc(100% - 128px); }
+}
+@container stage (max-width: 400px) {
+  .bd-tools .tb { min-width: 34px; height: 44px; }
+}
+
+/* Teclat obert: el xat puja per damunt del teclat */
+@media (max-width: 820px) {
+  .bd-chat { bottom: var(--kb, 0px); transition: transform .34s var(--bd-ease), bottom .2s, visibility 0s linear .34s; }
+  .chat-open .bd-chat { transition: transform .34s var(--bd-ease), bottom .2s, visibility 0s; }
+  .bd-chat.dragging { transition: none !important; }
+}
+@container stage (max-width: 720px) {
+  .bd-chat { bottom: var(--kb, 0px); height: min(78%, 600px, calc(100% - var(--kb, 0px) - 8px)); }
+}
+
+/* Mòbil en horitzontal: poc d'alçada */
+@media (max-height: 480px) and (max-width: 940px) {
+  .bd-chat { height: min(92%, 600px); }
+  .bd-tools { bottom: calc(6px + env(safe-area-inset-bottom)); left: auto; right: auto; max-width: calc(100% - 20px); }
+  .bd-tools { left: 50%; transform: translateX(-50%); }
+  .bd .tb { height: 40px; }
+  .style-open .bd-style:not([hidden]) { bottom: calc(58px + env(safe-area-inset-bottom)); max-height: calc(100% - 130px); overflow-y: auto; grid-template-columns: repeat(2, 1fr); }
+  .bd-help-in { padding: 14px; }
+  .bd-empty { display: none; }
+}
+

package/web/board.js

@@ -42,6 +42,7 @@ const uid = () => Math.random().toString(36).slice(2, 10);
 const norm = s => String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/·/g, '').toLowerCase().trim();
 const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
 const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+const coarse = matchMedia('(pointer: coarse)').matches;
 
 /* ---------- Estat ---------- */
 function fresh() {
@@ -311,13 +312,13 @@ function drawSel() {
   if (list.length) {
     const p = 6 / z;
     if (list.length === 1 && isLinear(list[0])) {
-      const [a, b] = ends(list[0]), r = 6 / z;
+      const [a, b] = ends(list[0]), r = (coarse ? 11 : 6) / z;
       s += `<circle class="hdl" data-ep="0" cx="${a[0]}" cy="${a[1]}" r="${r}" stroke-width="${1.5 / z}"/><circle class="hdl" data-ep="1" cx="${b[0]}" cy="${b[1]}" r="${r}" stroke-width="${1.5 / z}"/>`;
     } else {
       const b = union(list);
       s += `<rect class="selbox" x="${b.x - p}" y="${b.y - p}" width="${b.w + p * 2}" height="${b.h + p * 2}" stroke-width="${1.2 / z}" stroke-dasharray="${4 / z} ${3 / z}"/>`;
       if (list.length === 1 && list[0].type !== 'draw') {
-        const H = 9 / z, bx = b.x - p, by = b.y - p, bw = b.w + p * 2, bh = b.h + p * 2;
+        const H = (coarse ? 17 : 9) / z, bx = b.x - p, by = b.y - p, bw = b.w + p * 2, bh = b.h + p * 2;
         const pos = { nw: [bx, by], n: [bx + bw / 2, by], ne: [bx + bw, by], e: [bx + bw, by + bh / 2], se: [bx + bw, by + bh], s: [bx + bw / 2, by + bh], sw: [bx, by + bh], w: [bx, by + bh / 2] };
         HANDLES.forEach(k => { if (list[0].type === 'text' && (k === 'n' || k === 's' || k === 'e' || k === 'w')) return; s += `<rect class="hdl" data-h="${k}" x="${pos[k][0] - H / 2}" y="${pos[k][1] - H / 2}" width="${H}" height="${H}" rx="${2 / z}" stroke-width="${1.5 / z}"/>`; });
       }
@@ -395,7 +396,7 @@ function onDown(e) {
   if (editing) { endEdit(); if (tool === 'select') return; }
   R.svg.setPointerCapture(e.pointerId);
   pointers.set(e.pointerId, [e.clientX, e.clientY]);
-  if (pointers.size === 2) { const [a, b] = [...pointers.values()]; drag = { mode: 'pinch', d0: Math.hypot(a[0] - b[0], a[1] - b[1]), z0: B.view.z, v0: { ...B.view }, m0: [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2] }; marquee = null; return; }
+  if (pointers.size === 2) { abortDrag(); const [a, b] = [...pointers.values()]; drag = { mode: 'pinch', d0: Math.hypot(a[0] - b[0], a[1] - b[1]), z0: B.view.z, v0: { ...B.view }, m0: [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2] }; marquee = null; return; }
   const [wx, wy] = toWorld(e.clientX, e.clientY);
   const hitG = e.target.closest('[data-id]'), hit = hitG ? byId(hitG.dataset.id) : null;
   const touch = e.pointerType === 'touch';
@@ -439,6 +440,13 @@ function onDown(e) {
     drag = { mode: 'draw', el, last: [wx, wy] };
   }
 }
+function abortDrag() {
+  const d = drag; if (!d) return;
+  if (d.mode === 'create' || d.mode === 'line' || d.mode === 'draw') { B.els = B.els.filter(x => x !== d.el); nodes.get(d.el.id)?.remove(); nodes.delete(d.el.id); hist.pop(); }
+  else if (d.mode === 'move' && d.rec) { Object.entries(d.orig).forEach(([id, o]) => { const el = byId(id); if (el) { el.x = o.x; el.y = o.y; } }); hist.pop(); full(); }
+  else if (d.mode === 'resize' && d.rec) { Object.assign(d.el, d.o); hist.pop(); full(); }
+  marquee = null; R.stage.classList.remove('panning'); drag = null; R.empty.hidden = !!B.els.length; drawSel();
+}
 function snapshotSel() { const m = {}; sel.forEach(id => { const el = byId(id); if (el) m[id] = { x: el.x, y: el.y }; }); return m; }
 function onMove(e) {
   if (!R) return;
@@ -559,8 +567,18 @@ function onWheel(e) {
   if (!R) return;
   e.preventDefault();
   const r = R.svg.getBoundingClientRect();
-  if (e.ctrlKey || e.metaKey) zoomAt(B.view.z * Math.exp(-e.deltaY * .0028), e.clientX - r.left, e.clientY - r.top);
-  else { B.view.x -= e.shiftKey && !e.deltaX ? e.deltaY : e.deltaX; B.view.y -= e.shiftKey && !e.deltaX ? 0 : e.deltaY; applyView(); drawSel(); save(); }
+  const k = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? r.height : 1, dx = e.deltaX * k, dy = e.deltaY * k;
+  if (e.ctrlKey || e.metaKey) zoomAt(B.view.z * Math.exp(-clamp(dy, -40, 40) * .01), e.clientX - r.left, e.clientY - r.top);
+  else { B.view.x -= e.shiftKey && !dx ? dy : dx; B.view.y -= e.shiftKey && !dx ? 0 : dy; applyView(); drawSel(); save(); }
+}
+let gz = null;
+function onGesture(e) {
+  if (!R) return;
+  e.preventDefault();
+  const r = R.svg.getBoundingClientRect();
+  if (e.type === 'gesturestart') { gz = { z0: B.view.z }; return; }
+  if (e.type === 'gestureend') { gz = null; return; }
+  if (gz) zoomAt(gz.z0 * e.scale, e.clientX - r.left, e.clientY - r.top);
 }
 
 /* ---------- Accions ---------- */
@@ -1169,6 +1187,7 @@ function mount(root) {
   if (first) { const r = R.svg.getBoundingClientRect(); B.view = { x: r.width / 2, y: r.height / 2, z: 1 }; }
   on(R.svg, 'pointerdown', onDown); on(window, 'pointermove', onMove); on(window, 'pointerup', onUp); on(window, 'pointercancel', onUp);
   on(R.svg, 'wheel', onWheel, { passive: false });
+  ['gesturestart', 'gesturechange', 'gestureend'].forEach(t => on(R.svg, t, onGesture, { passive: false }));
   on(window, 'keydown', onKey); on(window, 'keyup', onKeyUp);
   on(root, 'click', onClick);
   on(R.editor, 'input', placeEditor); on(R.editor, 'blur', () => setTimeout(endEdit, 0));
@@ -1180,6 +1199,11 @@ function mount(root) {
   on(R.root.querySelector('#bdImport'), 'change', e => { const f = e.target.files[0]; if (f) importJSON(f); e.target.value = ''; });
   on(document, 'click', e => { if (R && !e.target.closest('.bd-menuwrap')) { const m = R.root.querySelector('#bdMenu'); if (m) m.hidden = true; } });
   on(window, 'resize', () => { applyView(); drawSel(); });
+  const vv = window.visualViewport;
+  if (vv) {
+    const kb = () => R && R.root.style.setProperty('--kb', Math.max(0, Math.round(innerHeight - vv.height - vv.offsetTop)) + 'px');
+    on(vv, 'resize', kb); on(vv, 'scroll', kb); kb();
+  }
   if (document.fonts) document.fonts.load(`500 24px Caveat`).then(() => { if (R) { B.els.forEach(el => { if (el.type === 'text' && el.text) fitText(el); }); full(); } }).catch(() => {});
   chatSwipe(R.chat);
   full(); drawChat(); drawBrains(); setTool(tool); openChat(B.opts.chat && !matchMedia('(max-width: 820px)').matches, false, false);

package/web/index.html

@@ -79,6 +79,15 @@ main .cmd code::-webkit-scrollbar { display: none; }
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none; transition: none; } }
 .copy.done .ic { display: none; }
 main strong { font-weight: 600; }
+.feat { list-style: none; display: grid; gap: 14px; padding: 0; margin-top: 4px; }
+.feat li { padding-left: 18px; position: relative; text-wrap: pretty; }
+.feat li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+.cmds { display: grid; gap: 8px; margin: 16px 0; }
+.cmds > div { display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: #e6e1d8; }
+.cmds dt code { background: #f6f3ee; }
+.cmds dd { font-size: .86em; color: var(--fg-muted); }
+@media (max-width: 620px) { .cmds > div { grid-template-columns: 1fr; } }
+
 
 .footer .page { padding: 40px 0 56px; text-align: center; font-size: 13px; color: var(--fg-muted); }
 .footer a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@@ -117,16 +126,66 @@ main strong { font-weight: 600; }
 
   <section aria-labelledby="que">
     <h2 id="que">Què hi pots fer</h2>
-    <ul class="list">
-      <li><strong>Sessions</strong> amb Claude Code i Codex, en directe, a qualsevol dels teus ordinadors.</li>
-      <li><strong>Aprovacions</strong>: abans d’editar, executar o clicar res, te’n demana permís amb el motiu. Tot queda registrat.</li>
-      <li><strong>Feines</strong> que es fan soles: ara, més tard o cada dia, i encadenades («quan Claude Code acabi, que Codex ho revisi»).</li>
-      <li><strong>Memòria compartida</strong>: el que recorda un agent, ho sap l’altre. Fitxers markdown al teu ordinador.</li>
-      <li><strong>Telegram i veu</strong>: parla-hi amb el teu bot o amb notes de veu, i aprova amb un botó.</li>
-      <li><strong>Navegador i escriptori</strong>: els agents poden mirar webs i apps; per actuar, sempre et demanen permís amb una captura.</li>
+    <ul class="feat">
+      <li><strong>Sessions en directe.</strong> Claude Code i Codex a qualsevol dels teus ordinadors: tria l’agent, la carpeta i el nivell de permisos, i la resposta et va arribant mentre treballa, amb les eines que fa servir.</li>
+      <li><strong>Aprovacions.</strong> Abans d’editar, executar o clicar res, te’n demana permís amb el motiu, i ho aproves o ho rebutges amb un toc. Tot queda registrat a Activitat.</li>
+      <li><strong>Avisos al mòbil.</strong> Una notificació quan un agent et demana permís o acaba la feina. Arriba buida: el detall el demana el mòbil directament a l’ordinador.</li>
+      <li><strong>Feines.</strong> Que es facin soles: ara, més tard o cada dia, i encadenades («quan Claude Code acabi, que Codex ho revisi»).</li>
+      <li><strong>Memòria compartida.</strong> El que recorda un agent, ho sap l’altre. Són fitxers markdown al teu ordinador.</li>
+      <li><strong>Ordinadors i servidors.</strong> El teu ordinador o un servidor (VPS), tots a la mateixa llista. Els afegeixes escrivint <code>usuari@servidor</code>.</li>
+      <li><strong>Pantalla remota.</strong> Mira i controla l’escriptori de l’ordinador des del mòbil, amb zoom amb dos dits i captures. Més avall.</li>
+      <li><strong>Navegador i escriptori per als agents.</strong> Poden mirar webs i apps; per actuar, sempre et demanen permís amb una captura.</li>
+      <li><strong>Telegram i veu.</strong> Parla amb el teu bot o amb notes de veu, aprova amb un botó, i escolta les respostes (ElevenLabs o OpenAI). Les claus es queden a l’ordinador.</li>
+      <li><strong>Git i GitHub.</strong> Clona un repositori, mira els canvis, fes commit i crea un PR des del mòbil, amb el <code>git</code> i el <code>gh</code> de l’ordinador.</li>
+      <li><strong>Models d’Ollama i xat local.</strong> Descarrega i fes servir models gratuïts a l’ordinador, o un model petit dins del navegador del mòbil.</li>
+      <li><strong>Pissarra.</strong> Un llenç per fer diagrames, i en Nio te’ls dibuixa si li ho expliques. Més avall.</li>
+      <li><strong>Com una app.</strong> Afegeix nio a la pantalla d’inici del mòbil; llisca als costats per canviar de pàgina i <code>Ctrl K</code> obre el buscador a l’ordinador.</li>
     </ul>
   </section>
 
+  <section aria-labelledby="cmds">
+    <h2 id="cmds">Comandes amb «/»</h2>
+    <p>Al missatge d’una sessió, escriu <code>/</code> i surten els suggeriments. Les de nio funcionen amb tots els agents; les de l’agent (comandes i skills) se li envien tal qual.</p>
+    <dl class="cmds">
+      <div><dt><code>/mode</code></dt><dd>Canvia els permisos: <code>l</code> llegir, <code>p</code> preguntar, <code>t</code> tot</dd></div>
+      <div><dt><code>/model</code></dt><dd>Canvia de model</dd></div>
+      <div><dt><code>/stop</code></dt><dd>Atura l’agent ara mateix</dd></div>
+      <div><dt><code>/nova</code></dt><dd>Nova sessió amb el mateix agent i carpeta</dd></div>
+      <div><dt><code>/carpeta</code></dt><dd>Canvia la carpeta de la sessió</dd></div>
+      <div><dt><code>/git</code></dt><dd>Veure canvis, fer commit i crear un PR</dd></div>
+      <div><dt><code>/nom</code></dt><dd>Posa nom a la sessió</dd></div>
+      <div><dt><code>/opcions</code></dt><dd>Opcions de la sessió</dd></div>
+      <div><dt><code>/ajuda</code></dt><dd>Llista de comandes</dd></div>
+    </dl>
+  </section>
+
+  <section aria-labelledby="screen">
+    <h2 id="screen">La pantalla remota</h2>
+    <p>Obre l’escriptori d’un dels teus ordinadors a pantalla completa, a la mateixa amplada que el mòbil, com un escriptori remot. Al mode <strong>Mirar</strong> només veus què fa l’agent; al mode <strong>Controlar</strong> pots clicar, fer doble clic, clic dret, arrossegar, desplaçar i escriure.</p>
+    <dl class="cmds">
+      <div><dt><code>− 100% +</code></dt><dd>Allunya, apropa o torna a enquadrar la imatge</dd></div>
+      <div><dt><code>1:1</code></dt><dd>Mida real, per llegir text petit</dd></div>
+      <div><dt><code>Desa captura</code></dt><dd>Baixa el fotograma actual com a imatge</dd></div>
+      <div><dt><code>Pantalla completa</code></dt><dd>A l’ordinador, amaga tota la resta</dd></div>
+    </dl>
+    <p><strong>Zoom amb dos dits.</strong> Pessiga per apropar i arrossega amb dos dits per moure’t; al mode Mirar, doble toc alterna entre enquadrar i apropar. Al mode Controlar, el botó «2 dits» tria si els dos dits desplacen l’ordinador o fan zoom. A l’ordinador, pessiga al trackpad o fes servir <code>Ctrl</code> i la roda. Cal activar «Apps de l’escriptori» a l’ordinador, i al Mac donar al terminal els permisos de Gravació de pantalla i Accessibilitat.</p>
+  </section>
+
+  <section aria-labelledby="board">
+    <h2 id="board">La pissarra</h2>
+    <p>Un llenç infinit per fer fluxos, mapes mentals i organigrames, al mòbil i a l’ordinador. Rectangles, el·lipses, rombes, fletxes que s’enganxen a les figures, línies, llapis, text i goma. Desfés i refés, quadrícula, i exportació a PNG, SVG o JSON.</p>
+    <p><strong>Zoom amb dos dits.</strong> Al mòbil, pessiga sobre el llenç per apropar o allunyar, i mou-lo amb els dos dits alhora. A l’ordinador, pessiga al trackpad o fes servir <code>Ctrl</code> i la roda del ratolí.</p>
+    <p><strong>Demana-ho a en Nio.</strong> Obre el xat de la pissarra i escriu què vols:</p>
+    <dl class="cmds">
+      <div><dt><code>Flux: A -> B -> C</code></dt><dd>Una fletxa per línia</dd></div>
+      <div><dt><code>Mapa mental de X: a, b, c</code></dt><dd>Tema central amb branques</dd></div>
+      <div><dt><code>Organigrama: Direcció &gt; Finances</code></dt><dd>Qui depèn de qui</dd></div>
+      <div><dt><code>Connecta Banc amb ERP</code></dt><dd>Uneix dues figures</dd></div>
+      <div><dt><code>Pinta Banc de verd</code></dt><dd>Canvia el color</dd></div>
+      <div><dt><code>Plantilla d’aprovació</code></dt><dd>Un diagrama de partida</dd></div>
+    </dl>
+  </section>
+
   <section aria-labelledby="teu">
     <h2 id="teu">Tot és teu</h2>
     <p>Fas servir els teus agents i les teves claus (Anthropic, OpenAI, ElevenLabs, el bot de Telegram). Les converses, la memòria i les claus es queden als teus ordinadors. nio.cat només serveix l’app i guarda, signada, l’adreça on trobar cada ordinador. Més detalls a <a href="/privadesa">privadesa</a>.</p>

package/web/sw.js

@@ -1,5 +1,5 @@
 // nio · service worker: obre l'app encara que no hi hagi connexió i mostra els avisos.
-const SHELL = 'nio-shell-v22';
+const SHELL = 'nio-shell-v25';
 const FILES = ['/app', '/app/style.css', '/app/app.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
 
 self.addEventListener('install', (e) => {