nio-cat 0.8.2 → 0.9.0

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.2",
+  "version": "0.9.0",
   "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/server.js

@@ -393,7 +393,7 @@ function createServer({ cfg, hub, auth, audit, getPublicUrl, getApp, routes = []
       res.setHeader('Access-Control-Allow-Origin', origin);
       res.setHeader('Vary', 'Origin');
       res.setHeader('Access-Control-Allow-Headers', 'authorization, content-type');
-      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE, OPTIONS');
+      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
       res.setHeader('Access-Control-Allow-Private-Network', 'true');
       res.setHeader('Access-Control-Max-Age', '600');
     }

package/web/app/app.js

@@ -1824,7 +1824,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 +1835,220 @@ 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, { 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>
+    <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></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(1800, Math.max(640, Math.round(stage.clientWidth * Math.min(devicePixelRatio || 1, 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 rdBind(root) {
+  const stage = $('#rdStage', root), typer = $('#rdType', root);
+  const ptrs = new Map();
+  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.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 (!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) 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) 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 '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 +2239,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

@@ -645,3 +645,26 @@ 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; } }

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-v23';
 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) => {