nio-cat 0.2.0 → 0.3.1

package/bin/nio.js

@@ -4,13 +4,14 @@ const os = require('os');
 const path = require('path');
 const fs = require('fs');
 const crypto = require('crypto');
+const net = require('net');
 const { spawn } = require('child_process');
 const config = require('../src/config');
 const { Hub } = require('../src/hub');
 const { createServer } = require('../src/server');
 const { detectAll } = require('../src/agents');
 const { startTunnel } = require('../src/tunnel');
-const { pairLink, terminalQr, writePairPage } = require('../src/pair');
+const { pairLink, terminalQr, writePairPage, makeCode } = require('../src/pair');
 const { which } = require('../src/proc');
 
 const argv = process.argv.slice(2);
@@ -21,11 +22,11 @@ for (let i = 0; i < argv.length; i++) {
   if (a.startsWith('--')) {
     const [k, v] = a.slice(2).split('=');
     if (v !== undefined) flags[k] = v;
-    else if (['port', 'url', 'app'].includes(k)) flags[k] = argv[++i];
+    else if (['port', 'url', 'app', 'local-port', 'dir'].includes(k)) flags[k] = argv[++i];
     else flags[k] = true;
   } else pos.push(a);
 }
-const cmd = ['start', 'pair', 'doctor', 'reset-token', 'help'].includes(pos[0]) ? pos.shift() : 'start';
+const cmd = ['start', 'pair', 'doctor', 'reset-token', 'help', 'ssh'].includes(pos[0]) ? pos.shift() : 'start';
 
 const c = {
   dim: (s) => `\x1b[2m${s}\x1b[0m`,
@@ -80,13 +81,14 @@ function openDashboard() {
   else console.log(`  ${c.dim('Panell:')}   ${link}`);
 }
 
-function showPair(publicUrl) {
-  const link = pairLink(flags.app || cfg.app, publicUrl, cfg.token);
-  const file = writePairPage(link);
+async function showPair(publicUrl) {
+  const link = pairLink(flags.app || cfg.app, publicUrl, cfg.token), code = makeCode(publicUrl, cfg.token);
+  const file = writePairPage(link, code);
   console.log(`\n  ${c.b('Escaneja aquest codi amb el mòbil')} ${c.dim('(o obre ' + file + ')')}\n`);
   console.log(terminalQr(link));
-  console.log(`\n  ${c.dim('Enllaç:')} ${link}\n`);
-  console.log(c.dim('  Aquest enllaç dona accés als teus agents. Guarda\'l com una contrasenya.\n'));
+  console.log(`\n  ${c.b('Codi:')} ${code}`);
+  console.log(c.dim('  Copia\'l i enganxa\'l a Sessions → Tria un ordinador.'));
+  console.log(c.dim('  Aquest codi dona accés als teus agents. Guarda\'l com una contrasenya.\n'));
   if (flags.open) {
     const opener = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
     try {
@@ -97,6 +99,75 @@ function showPair(publicUrl) {
   }
 }
 
+// nio ssh usuari@servidor: engega nio al servidor (si no hi és), obre un túnel SSH i obre el panell ja connectat.
+const shq = (v) => `'${String(v).replace(/'/g, `'\\''`)}'`;
+function remoteScript(port, dir) {
+  return `set -e
+command -v node >/dev/null 2>&1 || { echo NIO_NO_NODE; exit 0; }
+up() { (exec 3<>/dev/tcp/127.0.0.1/${port}) 2>/dev/null; }
+if ! up; then
+  mkdir -p "$HOME/.nio"
+  if command -v setsid >/dev/null 2>&1; then S=setsid; else S=; fi
+  $S nohup npx --yes nio-cat@latest --no-open --no-tunnel --port ${port} ${dir ? shq(dir) : '"$HOME"'} > "$HOME/.nio/daemon.log" 2>&1 < /dev/null &
+  for i in $(seq 1 80); do up && break; sleep 0.5; done
+  up || { echo NIO_NO_START; tail -n 5 "$HOME/.nio/daemon.log" 2>/dev/null; exit 0; }
+fi
+node -e "console.log('NIO_TOKEN='+require(require('os').homedir()+'/.nio/config.json').token)"
+`;
+}
+function sshBase(target) {
+  const a = ['-o', 'ServerAliveInterval=30'];
+  if (process.platform !== 'win32') a.push('-o', 'ControlMaster=auto', '-o', 'ControlPath=/tmp/nio-%C', '-o', 'ControlPersist=10m');
+  return a;
+}
+function waitPort(port, ms = 15000) {
+  const end = Date.now() + ms;
+  return new Promise((resolve) => {
+    const t = () => {
+      const s = net.connect(port, '127.0.0.1');
+      s.once('connect', () => { s.destroy(); resolve(true); });
+      s.once('error', () => { s.destroy(); Date.now() > end ? resolve(false) : setTimeout(t, 300); });
+    };
+    t();
+  });
+}
+async function sshStart() {
+  const target = pos[0];
+  if (!target || !/^[A-Za-z0-9_][\w.@:\-\[\]]*$/.test(target)) {
+    console.log(`\n  Ús: ${c.b('nio ssh usuari@servidor')} ${c.dim('[--port 7717] [--local-port 7718] [--dir /ruta/al/servidor]')}\n`);
+    process.exit(1);
+  }
+  const rport = Number(flags.port || 7717), lport = Number(flags['local-port'] || 7718);
+  console.log(`\n  ${c.b('nio')} ${c.dim('· connectant amb')} ${target}${c.dim('…')}`);
+  const out = await new Promise((resolve) => {
+    const p = spawn('ssh', [...sshBase(target), '-T', '--', target, 'bash -l -s'], { stdio: ['pipe', 'pipe', 'inherit'] });
+    let buf = '';
+    p.stdout.on('data', (d) => (buf += d));
+    p.on('error', () => resolve({ code: -1, buf }));
+    p.on('close', (code) => resolve({ code, buf }));
+    p.stdin.end(remoteScript(rport, flags.dir));
+  });
+  if (out.code === -1) { console.error(c.warn('\n  No trobo l’ordre ssh en aquest ordinador.\n')); process.exit(1); }
+  if (out.code !== 0 && !out.buf.includes('NIO_TOKEN=')) { console.error(c.warn('\n  No he pogut entrar al servidor per SSH.\n')); process.exit(1); }
+  if (out.buf.includes('NIO_NO_NODE')) { console.error(c.warn('\n  Al servidor falta Node.js 18 o més nou. Instal·la’l i torna-ho a provar.\n')); process.exit(1); }
+  if (out.buf.includes('NIO_NO_START')) { console.error(c.warn('\n  nio no s’ha engegat al servidor:\n') + out.buf.replace('NIO_NO_START', '').trim() + '\n'); process.exit(1); }
+  const token = (out.buf.match(/NIO_TOKEN=(\S+)/) || [])[1];
+  if (!token) { console.error(c.warn('\n  No he pogut llegir la clau del servidor.\n')); process.exit(1); }
+
+  const tun = spawn('ssh', [...sshBase(target), '-N', '-T', '-o', 'ExitOnForwardFailure=yes', '-L', `127.0.0.1:${lport}:127.0.0.1:${rport}`, '--', target], { stdio: ['ignore', 'ignore', 'inherit'] });
+  tun.on('close', () => { console.log(c.warn('\n  S’ha tallat el túnel SSH.\n')); process.exit(0); });
+  const bye = () => { tun.kill(); process.exit(0); };
+  process.on('SIGINT', bye);
+  process.on('SIGTERM', bye);
+  if (!(await waitPort(lport))) { console.error(c.warn(`\n  No puc obrir el port ${lport} en aquest ordinador. Prova amb --local-port 7719.\n`)); tun.kill(); process.exit(1); }
+
+  const local = `http://127.0.0.1:${lport}`, link = pairLink(local, local, token);
+  console.log(`  ${c.ok('✓')} Connectat. nio funciona al servidor i el panell és a ${local}`);
+  if (canOpenBrowser() && openUrl(link)) console.log(`  ${c.dim('Panell obert al navegador.')}`);
+  else console.log(`  ${c.dim('Obre aquest enllaç:')} ${link}`);
+  console.log(c.dim('\n  Deixa aquesta finestra oberta mentre facis servir el servidor. Amb Ctrl+C es tanca el túnel (nio continua al servidor).\n'));
+}
+
 async function start() {
   if (flags.port) cfg.port = Number(flags.port);
   if (flags.app) cfg.app = flags.app;
@@ -178,6 +249,9 @@ async function start() {
 
 (async () => {
   switch (cmd) {
+    case 'ssh':
+      await sshStart();
+      break;
     case 'doctor':
       await doctor();
       break;
@@ -186,7 +260,7 @@ async function start() {
         console.log('  Encara no hi ha cap adreça desada. Engega nio primer.');
         break;
       }
-      showPair(flags.url || cfg.lastUrl);
+      await showPair(flags.url || cfg.lastUrl);
       break;
     case 'reset-token':
       cfg.token = crypto.randomBytes(24).toString('base64url');
@@ -207,7 +281,12 @@ async function start() {
     --open              Obre al navegador la pàgina del codi QR
   nio pair              Mostra el codi QR una altra vegada
 
-  Servidor (VPS):       nio --url https://la-teva-adreça --no-open
+  nio ssh usuari@servidor   Fes servir nio en un servidor (VPS) per SSH, sense obrir cap port.
+    --port <n>          Port de nio al servidor (7717)
+    --local-port <n>    Port en aquest ordinador (7718)
+    --dir <ruta>        Carpeta del servidor on s'engega (per defecte, la teva carpeta d'inici)
+
+  Servidor amb adreça pública: nio --url https://la-teva-adreça --no-open
                         Deixa'l sota tmux, pm2 o systemd perquè no s'aturi.
 
   nio doctor            Llista els agents instal·lats

package/package.json

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

package/src/pair.js

@@ -12,6 +12,18 @@ function pairLink(app, url, token) {
   return `${app.replace(/\/$/, '')}/app#u=${u}&t=${encodeURIComponent(token)}`;
 }
 
+// Codi de connexió: l'adreça i la clau dins d'una sola cadena («nio-…»). No cal cap servidor.
+// La web ja sap posar-hi l'enllaç de davant. Les adreces de Cloudflare es comprimeixen (≈ 60 caràcters).
+const CF = '.trycloudflare.com';
+function makeCode(url, token) {
+  const raw = Buffer.from(token, 'base64url');
+  const sub = url.startsWith('https://') && url.endsWith(CF) ? url.slice(8, -CF.length) : null;
+  const bytes = raw.length === 24 && raw.toString('base64url') === token && sub && /^[\w-]+$/.test(sub)
+    ? Buffer.concat([Buffer.from([1]), raw, Buffer.from(sub)])
+    : Buffer.concat([Buffer.from([0]), Buffer.from(`${url}\n${token}`)]);
+  return `nio-${bytes.toString('base64url')}`;
+}
+
 function qr(text) {
   const q = qrcode(0, 'L');
   q.addData(text);
@@ -19,34 +31,49 @@ function qr(text) {
   return q;
 }
 
-// QR per al terminal: dues files de mòduls per línia amb mitjos blocs, i colors fixos
-// (negre sobre blanc) perquè la càmera el llegeixi igual amb tema clar o fosc.
+// QR per al terminal: cada mòdul són dos espais amb color de fons (negre o blanc). No depèn de cap glif,
+// així que no es talla amb tipus de lletra o interlineats estranys. Sempre negre sobre blanc, amb tema clar o fosc.
 function terminalQr(text, { color = !process.env.NO_COLOR } = {}) {
   const q = qr(text);
   const n = q.getModuleCount();
   const M = 2; // marge blanc al voltant, en mòduls
   const dark = (r, c) => r >= 0 && c >= 0 && r < n && c < n && q.isDark(r, c);
   const lines = [];
-  for (let r = -M; r < n + M; r += 2) {
-    let line = '';
+  for (let r = -M; r < n + M; r++) {
+    let line = '', prev = null;
     for (let c = -M; c < n + M; c++) {
-      const top = dark(r, c);
-      const bot = r + 1 < n + M && dark(r + 1, c);
-      if (color) line += top && bot ? '█' : top ? '▀' : bot ? '▄' : ' ';
-      else line += top && bot ? ' ' : top ? '▄' : bot ? '▀' : '█';
+      const d = dark(r, c);
+      if (color) {
+        if (d !== prev) line += d ? '\x1b[40m' : '\x1b[107m';
+        line += '  ';
+      } else line += d ? '  ' : '██';
+      prev = d;
     }
-    lines.push(color ? `  \x1b[30;107m${line}\x1b[0m` : `  ${line}`);
+    lines.push(`  ${line}${color ? '\x1b[0m' : ''}`);
   }
   return lines.join('\n');
 }
 
+// SVG propi: una sola forma amb tires horitzontals de mòduls, vora de 4 mòduls i vores nítides.
+// (El de la llibreria dibuixa cada mòdul per separat i, en escalar-lo, deixa línies fines entre mòduls.)
 function qrSvg(text) {
-  return qr(text).createSvgTag({ cellSize: 6, margin: 4, scalable: true });
+  const q = qr(text), n = q.getModuleCount(), M = 4;
+  let d = '';
+  for (let r = 0; r < n; r++) {
+    for (let c = 0; c < n; c++) {
+      if (!q.isDark(r, c)) continue;
+      let w = 1;
+      while (c + w < n && q.isDark(r, c + w)) w++;
+      d += `M${c + M} ${r + M}h${w}v1h-${w}z`;
+      c += w - 1;
+    }
+  }
+  const size = n + M * 2;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" shape-rendering="crispEdges" role="img" aria-label="Codi QR"><rect width="${size}" height="${size}" fill="#fff"/><path d="${d}" fill="#000"/></svg>`;
 }
 
-function writePairPage(link) {
-  const q = qr(link);
-  const svg = q.createSvgTag({ cellSize: 6, margin: 4, scalable: true });
+function writePairPage(link, code) {
+  const svg = qrSvg(link);
   const html = `<!doctype html><html lang="ca"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1"><title>nio // connecta el mòbil</title>
 <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
@@ -55,11 +82,10 @@ main{width:min(420px,100% - 40px);padding:40px 0}h1{font-size:30px;font-weight:5
 .qr{background:#fffefd;border:1px solid #cec7bd;padding:18px;border-radius:16px;margin:24px 0}.qr svg{width:100%;height:auto;display:block}
 code{display:block;word-break:break-all;font:12px/1.5 ui-monospace,Menlo,monospace;background:#e6e1d8;padding:12px 14px;border-radius:12px;color:#272224}small{display:block;margin-top:20px;font-size:13px;color:#69615c}</style></head>
 <body><main><h1>Connecta el mòbil</h1><p>Escaneja el codi amb la càmera. S’obrirà nio ja connectat a aquest ordinador.</p><div class="qr">${svg}</div>
-<p>Si fas servir nio instal·lat a la pantalla d’inici, copia aquest enllaç i enganxa’l a <b>Connecta un ordinador</b>:</p><code>${link.replace(/&/g, '&amp;')}</code>
-<small>Aquest enllaç dona accés als teus agents. Guarda’l com una contrasenya.</small></main></body></html>`;
+<p>O copia aquest codi i enganxa'l a <b>Sessions → Tria un ordinador</b>:</p><code>${code}</code><small>Aquest codi dona accés als teus agents. Guarda'l com una contrasenya.</small></main></body></html>`;
   const file = path.join(HOME, 'pair.html');
   fs.writeFileSync(file, html, { mode: 0o600 });
   return file;
 }
 
-module.exports = { pairLink, terminalQr, writePairPage, qrSvg };
+module.exports = { pairLink, terminalQr, writePairPage, qrSvg, makeCode };

package/src/server.js

@@ -10,7 +10,7 @@ const ollama = require('./agents/ollama');
 const { save } = require('./config');
 const { httpErr } = require('./hub');
 const github = require('./github');
-const { pairLink, qrSvg } = require('./pair');
+const { pairLink, qrSvg, makeCode } = require('./pair');
 
 // L'app web: copiada dins del paquet en publicar-lo, o l'arrel del repositori en desenvolupament.
 const WEB_DIRS = [path.join(__dirname, '..', 'web'), path.join(__dirname, '..', '..')];
@@ -108,9 +108,32 @@ function listProjects(cfg) {
   return out;
 }
 
-function insideRoots(cfg, p) {
-  const r = path.resolve(p);
-  return cfg.roots.some((root) => r === root || r.startsWith(root + path.sep));
+// Qualsevol carpeta existent d'aquest ordinador. Qui té la clau ja pot engegar agents, així que no la limitem a les compartides.
+function isDir(p) {
+  try {
+    return fs.statSync(path.resolve(p)).isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+// Subcarpetes d'una carpeta, per a l'explorador de «Nova sessió».
+function listDir(cfg, raw) {
+  const dir = path.resolve(raw || cfg.roots[0] || os.homedir());
+  if (!isDir(dir)) throw httpErr(400, 'Aquesta carpeta no existeix');
+  let entries = [];
+  try {
+    entries = fs.readdirSync(dir, { withFileTypes: true });
+  } catch {
+    throw httpErr(403, 'No tinc permís per veure aquesta carpeta');
+  }
+  const dirs = entries
+    .filter((e) => (e.isDirectory() || (e.isSymbolicLink() && isDir(path.join(dir, e.name)))) && e.name !== 'node_modules')
+    .map((e) => ({ name: e.name, path: path.join(dir, e.name), hidden: e.name.startsWith('.') }))
+    .sort((a, b) => a.hidden - b.hidden || a.name.localeCompare(b.name, 'ca'))
+    .slice(0, 500);
+  const parent = path.dirname(dir);
+  return { path: dir, parent: parent === dir ? null : parent, home: os.homedir(), git: fs.existsSync(path.join(dir, '.git')), dirs };
 }
 
 // Noms de model d'Ollama: «qwen3:4b», «hf.co/usuari/model:Q4_K_M»…
@@ -149,6 +172,7 @@ function createServer({ cfg, hub, getPublicUrl, getApp }) {
       };
     }
     if (p === '/api/projects' && method === 'GET') return listProjects(cfg);
+    if (p === '/api/fs' && method === 'GET') return listDir(cfg, url.searchParams.get('path'));
     if (p === '/api/ollama/models' && method === 'GET') return (await ollama.listModels()) || [];
     if (p === '/api/ollama' && method === 'GET') {
       const models = await ollama.listModels();
@@ -208,7 +232,7 @@ function createServer({ cfg, hub, getPublicUrl, getApp }) {
       const pub = getPublicUrl();
       if (!pub || /^https?:\/\/(127\.0\.0\.1|localhost|\[::1\])(:|\/|$)/i.test(pub)) return { link: null };
       const link = pairLink(getApp ? getApp() : cfg.app, pub, cfg.token);
-      return { link, svg: qrSvg(link), url: pub, lan: /^http:\/\//.test(pub) };
+      return { link, code: makeCode(pub, cfg.token), svg: qrSvg(link), url: pub, lan: /^http:\/\//.test(pub) };
     }
     if (p === '/api/github' && method === 'GET') return github.status();
     if (p === '/api/github/repos' && method === 'GET') return github.repos(url.searchParams.get('owner') || '');
@@ -222,8 +246,7 @@ function createServer({ cfg, hub, getPublicUrl, getApp }) {
     if (p === '/api/sessions' && method === 'POST') {
       const b = await readBody(req);
       const cwd = path.resolve(b.cwd || cfg.roots[0]);
-      if (!insideRoots(cfg, cwd)) throw httpErr(403, 'Aquesta carpeta no és de les que has compartit en engegar nio');
-      if (!fs.existsSync(cwd)) throw httpErr(400, 'Aquesta carpeta no existeix');
+      if (!isDir(cwd)) throw httpErr(400, 'Aquesta carpeta no existeix');
       const s = hub.create({ agent: b.agent, cwd, title: b.title, mode: b.mode, model: b.model });
       if (b.text) hub.send(s.id, b.text, hookUrl());
       return hub.summary(s);
@@ -245,7 +268,6 @@ function createServer({ cfg, hub, getPublicUrl, getApp }) {
     if ((r = m(/^\/api\/sessions\/([\w-]+)\/git(?:\/(commit|pr))?$/))) {
       const s = hub.get(r[1]);
       if (!s) throw httpErr(404, 'Aquesta sessió no existeix');
-      if (!insideRoots(cfg, s.cwd)) throw httpErr(403, 'Aquesta carpeta no és de les compartides');
       if (!r[2] && method === 'GET') return github.gitInfo(s.cwd);
       if (r[2] === 'commit' && method === 'POST') return github.commit(s.cwd, await readBody(req));
       if (r[2] === 'pr' && method === 'POST') return github.pr(s.cwd, await readBody(req));

package/web/app/app.js

@@ -36,7 +36,6 @@ const MODES = {
   preguntar: { label: 'Demana permís', short: 'Permís' },
   tot: { label: 'Via lliure', short: 'Lliure' }
 };
-const DEMO_URL = 'demo:navegador';
 
 /* ---------------------------------------------------------------- estat */
 const state = { route: { name: 'sessions' }, ollama: null, info: null, connected: false, lastError: null, sessions: new Map(), approvals: new Map(), events: new Map(), loaded: new Set() };
@@ -45,13 +44,12 @@ const LS = {
   set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch { /* emmagatzematge bloquejat */ } }
 };
 const store = {
-  get machines() { return LS.get('nio.machines', []); },
+  get machines() { return LS.get('nio.machines', []).filter((m) => m.url !== 'demo:navegador'); },
   set machines(v) { LS.set('nio.machines', v); },
   get active() { return Number(LS.get('nio.active', 0)) || 0; },
   set active(i) { LS.set('nio.active', i); }
 };
 const machine = () => store.machines[store.active] || store.machines[0] || null;
-const isDemo = () => machine()?.url === DEMO_URL;
 
 /* ---------------------------------------------------------------- utilitats */
 function toast(msg, ms = 2800) {
@@ -102,174 +100,23 @@ function prettyInput(input) {
   return JSON.stringify(input, null, 2);
 }
 
-/* ---------------------------------------------------------------- ordinador de prova (dins del navegador) */
-const demo = (() => {
-  const listeners = new Set();
-  const sessions = new Map(), approvals = new Map(), notices = [];
-  const runs = new Map();
-  const omodels = [{ name: 'qwen3:4b', size: 2.5e9, params: '4.0B', quant: 'Q4_K_M' }], opulls = new Map();
-  const emit = (msg) => listeners.forEach((f) => f(JSON.parse(JSON.stringify(msg))));
-  const err = (status, message) => Object.assign(new Error(message), { status });
-  const summary = (s) => {
-    const last = [...s.events].reverse().find((e) => e.kind === 'text' || e.kind === 'user');
-    return { id: s.id, agent: s.agent, title: s.title, cwd: s.cwd, mode: s.mode, model: s.model, state: s.state, created: s.created, updated: s.updated, cost: 0, last: last ? last.text.slice(0, 160) : '', pending: [...approvals.values()].filter((a) => a.session === s.id && a.state === 'pending').length };
-  };
-  const touch = (s) => { s.updated = Date.now(); emit({ type: 'session', session: summary(s) }); };
-  const push = (s, kind, data = {}) => {
-    const lastEv = s.events[s.events.length - 1];
-    if (lastEv && lastEv.open) delete lastEv.open;
-    const ev = { seq: ++s.seq, t: Date.now(), kind, ...data }; s.events.push(ev);
-    emit({ type: 'event', session: s.id, event: ev }); touch(s); return ev;
-  };
-  const chunk = (s, text) => {
-    const last = s.events[s.events.length - 1];
-    if (last && last.kind === 'text' && last.open) { last.text += text; emit({ type: 'event', session: s.id, event: last }); return; }
-    const ev = push(s, 'text', { text }); ev.open = true;
-  };
-  const pub = (a) => { const { resolve, ...r } = a; return r; };
-  function ask(s, tool, input) {
-    const a = { id: rid(), session: s.id, agent: s.agent, title: s.title, tool, input, state: 'pending', created: Date.now() };
-    const p = new Promise((res) => (a.resolve = res));
-    approvals.set(a.id, a); s.state = 'waiting';
-    push(s, 'approval', { approval: a.id, tool, input, state: 'pending' });
-    emit({ type: 'approval', approval: pub(a) });
-    notices.unshift({ id: rid(4), t: Date.now(), title: 'Demo et demana permís', body: `${tool}: ${input.command || ''}`, session: s.id });
-    return p;
-  }
-  function decide(id, decision) {
-    const a = approvals.get(id); if (!a || a.state !== 'pending') return null;
-    a.state = decision === 'allow' ? 'allowed' : 'denied';
-    const s = sessions.get(a.session);
-    if (s) { const ev = s.events.find((e) => e.kind === 'approval' && e.approval === id); if (ev) { ev.state = a.state; emit({ type: 'event', session: s.id, event: ev }); } s.state = runs.has(s.id) ? 'running' : 'idle'; touch(s); }
-    emit({ type: 'approval', approval: pub(a) }); a.resolve(a.state === 'allowed' ? 'allow' : 'deny');
-    return pub(a);
-  }
-  async function run(s, prompt) {
-    let stopped = false; runs.set(s.id, { stop: () => (stopped = true) });
-    if (s.agent === 'ollama') {
-      try {
-        for (const w of `(Resposta simulada de ${s.model || 'qwen3:4b'}.) Amb Ollama de debò, aquí veuries la resposta del model que funciona al teu ordinador, paraula per paraula.`.split(' ')) { if (stopped) throw 0; chunk(s, w + ' '); await sleep(45); }
-        push(s, 'result', { ms: 1800 });
-      } catch { push(s, 'info', { text: 'Has aturat l’agent' }); }
-      runs.delete(s.id); s.state = 'idle'; push(s, 'status', { state: 'idle', code: 0 }); return;
-    }
-    try {
-      for (const w of `Entesos. Faig una ullada al projecte per a «${prompt.slice(0, 80)}».`.split(' ')) { if (stopped) throw 0; chunk(s, w + ' '); await sleep(55); }
-      push(s, 'tool', { id: 't1', name: 'Read', input: { file_path: 'README.md' } }); await sleep(450);
-      push(s, 'tool_result', { id: 't1', name: 'Read', output: '# Projecte de prova\nAixò és un README d’exemple.' });
-      if (stopped) throw 0;
-      const input = { command: 'npm test' };
-      if (s.mode === 'llegir') push(s, 'text', { text: 'Treballo en mode només lectura, així que no executo res. El següent pas seria `npm test`.' });
-      else {
-        const ok = s.mode === 'tot' ? true : (await ask(s, 'Bash', input)) === 'allow';
-        if (stopped) throw 0;
-        push(s, 'tool', { id: 't2', name: 'Bash', input }); await sleep(380);
-        if (ok) { push(s, 'tool_result', { id: 't2', name: 'Bash', output: '✓ 12 tests passen' }); push(s, 'text', { text: 'Fet. Tots els tests passen.' }); }
-        else { push(s, 'tool_result', { id: 't2', name: 'Bash', output: 'Rebutjat des de nio', error: true }); push(s, 'text', { text: 'D’acord, no l’executo. Què vols que faci?' }); }
-      }
-      push(s, 'result', { cost: 0, ms: 2400 });
-      runs.delete(s.id); s.state = 'idle'; push(s, 'status', { state: 'idle', code: 0 });
-    } catch {
-      runs.delete(s.id); s.state = 'idle'; push(s, 'info', { text: 'Has aturat l’agent' }); push(s, 'status', { state: 'idle', code: 130 });
-    }
-  }
-  const info = () => ({ name: 'nio', version: 'prova', host: 'Ordinador de prova', platform: 'navegador', user: 'tu', publicUrl: DEMO_URL, roots: ['~/projectes'], vapidKey: null,
-    agents: [
-      { id: 'demo', name: 'Demo', available: true, version: 'simulat', approvals: true, login: 'No cal instal·lar res' },
-      { id: 'claude', name: 'Claude Code', available: false, approvals: true, login: 'Instal·la nio al teu ordinador' },
-      { id: 'codex', name: 'Codex', available: false, login: 'Instal·la nio al teu ordinador' },
-      { id: 'grok', name: 'Grok', available: false, beta: true, login: 'Instal·la nio al teu ordinador' },
-      { id: 'antigravity', name: 'Antigravity', available: false, beta: true, login: 'Instal·la nio al teu ordinador' }
-    ] });
-  async function request(method, path, body) {
-    await sleep(60);
-    const url = new URL(path, 'http://x'), p = url.pathname; let m;
-    if (p === '/api/info') return info();
-    if (p === '/api/projects') return [{ path: '~/projectes', name: 'projectes', root: true }, { path: '~/projectes/botiga', name: 'botiga', git: true }, { path: '~/projectes/web', name: 'web', git: true }];
-    if (p === '/api/ollama/models') return omodels;
-    if (p === '/api/ollama/chat') {
-      // Sense model de veritat: proposa un mapa amb les paraules clau de la petició.
-      const ask = String(body.messages?.at(-1)?.content || '').split('Petició de l’usuari:').pop().trim();
-      const words = [...new Set(ask.replace(/[^\p{L}\p{N}\s-]/gu, ' ').split(/\s+/).filter((w) => w.length > 3))].slice(0, 7);
-      await sleep(700);
-      return { content: JSON.stringify({ reply: 'Model simulat: amb Ollama de debò entendria la petició sencera. T’he fet un esquema amb les paraules clau.', actions: words.length > 1 ? [{ op: 'mindmap', center: words[0], items: words.slice(1) }] : [] }) };
-    }
-    if (p === '/api/github') return { available: false, authed: false };
-    if (/^\/api\/sessions\/[\w-]+\/git$/.test(p)) return { repo: false };
-    if (p === '/api/pair') return { link: null };
-    if (p === '/api/ollama') return { available: false, host: 'simulat', models: [], running: [], pulling: [] };
-    if (p === '/api/ollama/pull' && method === 'POST') {
-      const name = String(body.name || '').trim(); if (!/^[\w][\w.\-/]{0,100}(:[\w.\-]{1,60})?$/.test(name)) throw err(400, 'Aquest nom de model no és vàlid');
-      if (opulls.has(name) || omodels.some((m) => m.name === name)) return { ok: true, already: true };
-      const total = 1.2e9 + Math.random() * 3e9, job = { name, status: 'pulling manifest', completed: 0, total };
-      job.t = setInterval(() => {
-        job.completed = Math.min(total, job.completed + total / 18); job.status = job.completed < total ? 'pulling' : 'success';
-        emit({ type: 'ollama', name, status: job.status, completed: job.completed, total });
-        if (job.completed >= total) { clearInterval(job.t); opulls.delete(name); omodels.push({ name, size: total, params: '', quant: 'Q4_K_M' }); emit({ type: 'ollama', name, done: true }); }
-      }, 260);
-      opulls.set(name, job); return { ok: true };
-    }
-    if ((m = p.match(/^\/api\/ollama\/pull\/(.+)$/)) && method === 'DELETE') { const j = opulls.get(decodeURIComponent(m[1])); if (j) { clearInterval(j.t); opulls.delete(j.name); emit({ type: 'ollama', name: j.name, done: true, error: 'Descàrrega cancel·lada' }); } return { ok: !!j }; }
-    if ((m = p.match(/^\/api\/ollama\/models\/(.+)$/)) && method === 'DELETE') { const n = decodeURIComponent(m[1]); const i = omodels.findIndex((x) => x.name === n); if (i >= 0) omodels.splice(i, 1); return { ok: true }; }
-    if (p === '/api/sessions' && method === 'GET') return [...sessions.values()].sort((a, b) => b.updated - a.updated).map(summary);
-    if (p === '/api/sessions' && method === 'POST') {
-      if (body.agent !== 'demo' && body.agent !== 'ollama') throw err(400, 'A l’ordinador de prova només hi ha els agents Demo i Ollama');
-      const s = { id: rid(), agent: body.agent, cwd: body.cwd || '~/projectes', title: (body.text || '').replace(/\s+/g, ' ').slice(0, 60), mode: body.mode || 'preguntar', model: body.model || '', state: 'idle', created: Date.now(), updated: Date.now(), seq: 0, events: [] };
-      sessions.set(s.id, s); touch(s);
-      if (body.text) send(s.id, body.text);
-      return summary(s);
-    }
-    if ((m = p.match(/^\/api\/sessions\/([\w-]+)$/))) {
-      const s = sessions.get(m[1]); if (!s) throw err(404, 'Aquesta sessió no existeix');
-      if (method === 'GET') return { session: summary(s), events: s.events.filter((e) => e.seq > Number(url.searchParams.get('since') || 0)) };
-      if (method === 'PATCH') { if (body.mode) s.mode = body.mode; if (typeof body.title === 'string') s.title = body.title.slice(0, 120); touch(s); return summary(s); }
-      if (method === 'DELETE') { runs.get(s.id)?.stop(); sessions.delete(s.id); emit({ type: 'removed', session: s.id }); return { ok: true }; }
-    }
-    if ((m = p.match(/^\/api\/sessions\/([\w-]+)\/message$/))) return send(m[1], body.text);
-    if ((m = p.match(/^\/api\/sessions\/([\w-]+)\/stop$/))) { const r = runs.get(m[1]); r?.stop(); return { stopped: !!r }; }
-    if (p === '/api/approvals') return [...approvals.values()].filter((a) => a.state === 'pending').map(pub);
-    if ((m = p.match(/^\/api\/approvals\/([\w-]+)$/))) { const a = decide(m[1], body.decision); if (!a) throw err(404, 'Aquesta petició ja s’ha resolt'); return a; }
-    if (p === '/api/notices') return notices.slice(0, 5);
-    if (p.startsWith('/api/push')) throw err(400, 'Els avisos només funcionen amb un ordinador de veritat');
-    throw err(404, 'Aquesta ruta no existeix');
-  }
-  function send(sid, text) {
-    const s = sessions.get(sid); if (!s) throw err(404, 'Aquesta sessió no existeix');
-    if (runs.has(sid)) throw err(409, 'L’agent encara està treballant. Espera que acabi o atura’l.');
-    text = String(text || '').trim(); if (!text) throw err(400, 'El missatge és buit');
-    if (!s.title) s.title = text.slice(0, 60);
-    push(s, 'user', { text }); s.state = 'running'; push(s, 'status', { state: 'running' });
-    run(s, text); return summary(s);
-  }
-  function subscribe(fn) {
-    listeners.add(fn);
-    fn({ type: 'hello', sessions: [...sessions.values()].map(summary), approvals: [...approvals.values()].filter((a) => a.state === 'pending').map(pub) });
-    return () => listeners.delete(fn);
-  }
-  return { request, subscribe };
-})();
-
 /* ---------------------------------------------------------------- API */
 async function api(path, opts = {}) {
   const m = machine();
   if (!m) throw new Error('No hi ha cap ordinador connectat');
   const body = opts.body && typeof opts.body !== 'string' ? opts.body : opts.body ? JSON.parse(opts.body) : undefined;
-  if (m.url === DEMO_URL) return demo.request(opts.method || 'GET', path, body || {});
   const res = await fetch(m.url + path, { ...opts, headers: { Authorization: `Bearer ${m.token}`, 'content-type': 'application/json', ...(opts.headers || {}) }, body: body ? JSON.stringify(body) : undefined });
   const data = await res.json().catch(() => ({}));
   if (!res.ok) throw new Error(data.error || `Error ${res.status}`);
+  if (Array.isArray(data.agents)) data.agents = data.agents.filter((x) => x.id !== 'demo'); // l'agent de proves del programa no s'ensenya
   return data;
 }
 
-let streamCtrl = null, unsubDemo = null, retry = 0;
+let streamCtrl = null, retry = 0;
 async function connect() {
-  streamCtrl?.abort(); unsubDemo?.(); unsubDemo = null;
+  streamCtrl?.abort();
   const m = machine();
   if (!m) { state.connected = false; return render(); }
-  if (m.url === DEMO_URL) {
-    state.info = await api('/api/info'); state.connected = true; state.lastError = null;
-    unsubDemo = demo.subscribe(handle); render(); brainsForBoard(); return;
-  }
   const ctrl = new AbortController(); streamCtrl = ctrl;
   try {
     state.info = await api('/api/info');
@@ -344,14 +191,26 @@ function parsePair(text) {
   if (!url || !token) return null;
   return { url: url.replace(/\/$/, ''), token };
 }
+// Codi «nio-…»: porta l'adreça i la clau dins (vegeu makeCode al programa). Es descodifica aquí, sense servidor.
+const CF = '.trycloudflare.com';
+function parseCode(text) {
+  const m = String(text || '').replace(/\s+/g, '').match(/^nio-([\w-]+)$/i); if (!m) return null;
+  try {
+    const bin = atob(m[1].replace(/-/g, '+').replace(/_/g, '/') + '='.repeat((4 - (m[1].length % 4)) % 4)), u = Uint8Array.from(bin, (c) => c.charCodeAt(0));
+    if (u[0] === 1) return { url: `https://${new TextDecoder().decode(u.slice(25))}${CF}`, token: btoa(String.fromCharCode(...u.slice(1, 25))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '') };
+    if (u[0] === 0) { const [url, token] = new TextDecoder().decode(u.slice(1)).split('\n'); if (url && token) return { url: url.replace(/\/$/, ''), token }; }
+  } catch { /* codi malmès */ }
+  return null;
+}
+// Un codi o un enllaç de connexió (#u=…&t=…).
+const pairFrom = (text) => parsePair(text) || parseCode(text);
 function addMachine({ url, token, name }) {
   const ms = store.machines; let i = ms.findIndex((m) => m.url === url);
-  if (i >= 0) ms[i].token = token; else { ms.push({ url, token, name: name || (url === DEMO_URL ? 'Ordinador de prova' : new URL(url).hostname) }); i = ms.length - 1; }
+  if (i >= 0) ms[i].token = token; else { ms.push({ url, token, name: name || new URL(url).hostname }); i = ms.length - 1; }
   store.machines = ms; store.active = i;
   state.sessions.clear(); state.approvals.clear(); state.events.clear(); state.loaded.clear(); state.info = null; state.ollama = null;
   connect();
 }
-function tryDemo() { addMachine({ url: DEMO_URL, token: 'demo', name: 'Ordinador de prova' }); toast('Connectat a l’ordinador de prova'); go('#/sessions'); }
 function checkPairHash() {
   const pair = parsePair(location.hash); if (!pair) return false;
   history.replaceState(null, '', location.pathname + '#/sessions');
@@ -368,6 +227,11 @@ const VIEWS = {
   mobil: { label: 'Xat local', icon: ICON.phone, group: 'Eines' },
   pissarra: { label: 'Pissarra', icon: ICON.board, group: 'Eines' }
 };
+const NOMACHINE = {
+  approvals: { title: 'Aprovacions', lead: 'Quan un agent vol editar un fitxer o executar una ordre, t’ho demana aquí.' },
+  models: { title: 'Models', lead: 'Models d’Ollama que funcionen a l’ordinador, sense internet i sense comptes.' },
+  maquina: { title: 'Ordinador', lead: 'Els agents instal·lats, els avisos al mòbil i els ordinadors connectats.' }
+};
 const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', mobil: '#/mobil', models: '#/models', maquina: '#/ordinador', pissarra: '#/pissarra' };
 function parseRoute() {
   const h = location.hash.replace(/^#\/?/, '');
@@ -417,7 +281,7 @@ function render() {
   else if (board) { view.innerHTML = '<div class="page"><div class="board-root" id="boardRoot"></div></div>'; window.NioBoard?.mount($('#boardRoot')); brainsForBoard(); }
   else {
     const html = r.name === 'mobil' ? viewLocal() : null;
-    view.innerHTML = html && local.engine ? html : `<div class="page">${html ? html : !machine() && r.name !== 'maquina' ? viewConnect() : r.name === 'sessions' ? viewSessions() : r.name === 'approvals' ? viewApprovals() : r.name === 'models' ? viewModels() : viewMachine()}</div>`;
+    view.innerHTML = html && local.engine ? html : `<div class="page">${html ? html : r.name === 'sessions' ? (machine() ? viewSessions() : viewConnect()) : !machine() ? viewNoMachine(NOMACHINE[r.name]) : r.name === 'approvals' ? viewApprovals() : r.name === 'models' ? viewModels() : viewMachine()}</div>`;
     if (r.name === 'mobil') bindLocal();
     if (r.name === 'models' && machine()) loadOllama();
   }
@@ -427,29 +291,46 @@ function render() {
 }
 
 /* ---------- Connecta */
-function viewConnect(compact = false) {
-  const CMD = 'npx nio-cat';
-  const main = `<div class="panel conn-main">
-      <ol class="stepper">
-        <li><span class="n">1</span><div><b>Engega nio</b><p>Al terminal, des de la carpeta dels teus projectes.</p></div></li>
-        <li><span class="n">2</span><div><b>Escaneja el QR</b><p>Amb la càmera del mòbil. S’obrirà nio connectat.</p></div></li>
-        <li><span class="n">3</span><div><b>Dona-li feina</b><p>Tria un agent i una carpeta, i explica què vols.</p></div></li>
-      </ol>
-      <div class="cmd big"><code>${CMD}</code><button class="btn sm" data-copy="${CMD}" type="button">${svg(ICON.copy)}Copia</button></div>
-      <div class="reqs"><span class="chip">Node.js 18 o més nou</span><span class="chip ghost">cloudflared · opcional</span></div>
-      <p class="muted small">Sense <span class="mono">cloudflared</span> et connectes per la wifi de casa. Amb ell, des de qualsevol lloc (a macOS: <span class="mono">brew install cloudflared</span>).</p>
-      <details class="paste" ${compact ? 'open' : ''}><summary>Ja tens l’enllaç del terminal?</summary>
-        <form class="pair-form" id="pairForm"><input type="url" id="pairInput" placeholder="https://www.nio.cat/app#u=…&t=…" autocomplete="off" autocapitalize="off" spellcheck="false" required aria-label="Enllaç de connexió"><button class="btn ink" type="submit">Connecta</button></form>
-        <p class="muted small">El trobaràs sota el codi QR. Va bé si fas servir nio des de la pantalla d’inici.</p>
-      </details>
-    </div>`;
-  if (compact) return main;
+// La connexió viu només a Sessions. Les altres pàgines, sense ordinador, hi envien.
+const isPhone = () => isTouch || matchMedia('(max-width: 820px)').matches;
+function viewNoMachine(what) {
+  return `<div class="top"><div><h1>${esc(what.title)}</h1><p>${esc(what.lead)}</p></div></div>
+    <div class="panel empty">${bot('sleep')}<h2>Sembla que no hi ha cap sessió iniciada</h2><p>Crea’n una de nova a la pàgina Sessions. Allà connectes l’ordinador i hi dones feina.</p><a class="btn ink" href="#/sessions">Ves a Sessions</a></div>`;
+}
+function pasteForm(open) {
+  return `<details class="paste" ${open ? 'open' : ''}><summary>Tens un codi?</summary>
+    <form class="pair-form" id="pairForm"><input type="text" id="pairInput" placeholder="nio-…" autocomplete="off" autocapitalize="off" spellcheck="false" required aria-label="Codi de connexió"><button class="btn ink" type="submit">Connecta</button></form>
+    <p class="muted small">Surt al terminal, sota el codi QR. Copia’l sencer.</p></details>`;
+}
+function viewConnect() {
+  const CMD = 'npx nio-cat', cmd = (c) => `<div class="cmd big"><code>${esc(c)}</code><button class="btn sm" data-copy="${esc(c)}" type="button">${svg(ICON.copy)}Copia</button></div>`;
+  if (isPhone()) {
+    return `<section class="connect">
+      <div class="connect-head"><h1>Tria un ordinador</h1><p class="lead">Els agents treballen al teu ordinador, amb els teus comptes i els teus fitxers. Des del mòbil els dones feina i aproves el que facin.</p></div>
+      <div class="panel conn-main">
+        <ol class="stepper">
+          <li><span class="n">1</span><div><b>Engega nio a l’ordinador</b><p>Al terminal, des de la carpeta dels teus projectes.</p></div></li>
+          <li><span class="n">2</span><div><b>Escaneja el QR</b><p>Amb la càmera del mòbil. S’obrirà nio connectat.</p></div></li>
+        </ol>
+        ${cmd(CMD)}
+        <p class="muted small">Per connectar-t’hi des de qualsevol xarxa cal <span class="mono">cloudflared</span>. Sense ell, el mòbil ha d’estar a la mateixa wifi.</p>
+        ${pasteForm(false)}
+      </div>
+    </section>`;
+  }
   return `<section class="connect">
-    <div class="connect-head"><h1>Connecta el teu ordinador</h1><p class="lead">Els agents treballen al teu ordinador, amb els teus comptes i els teus fitxers. Des d’aquí els dones feina, els veus treballar i aproves el que facin.</p></div>
-    <div class="connect-grid">
-      ${main}
-      <aside class="panel try">${bot('happy')}<h2>Prova-ho sense instal·lar res</h2><p class="muted small">Un ordinador simulat dins del navegador, amb un agent de demostració que llegeix, et demana permís i executa.</p><button class="btn ink block" data-act="demo" type="button">Obre l’ordinador simulat</button><a class="btn ghost block" href="#/mobil">O fes servir el xat local</a></aside>
+    <div class="connect-head"><h1>Tria un ordinador</h1><p class="lead">Els agents treballen a l’ordinador, amb els teus comptes i els teus fitxers. Des d’aquí els dones feina, els veus treballar i aproves el que facin.</p></div>
+    <div class="choice-grid conn-main">
+      <section class="panel choice"><header><h2>Aquest ordinador</h2></header><div class="body stack">
+        <p class="small">Al terminal, des de la carpeta dels teus projectes:</p>${cmd(CMD)}
+        <p class="muted small">S’obre aquest panell ja connectat. Cal Node.js 18 o més nou.</p></div></section>
+      <section class="panel choice"><header><h2>Un altre ordinador</h2></header><div class="body stack">
+        <p class="small">Engega nio a l’altre ordinador o a un servidor. Copia aquí el codi que mostra.</p>
+        ${pasteForm(true)}
+        <p class="small"><b>Un servidor (VPS) per SSH.</b> Des d'aquest ordinador, sense obrir cap port:</p>${cmd('npx nio-cat ssh usuari@servidor')}
+        <p class="muted small">Engega nio al servidor, obre el túnel i el panell queda connectat.</p></div></section>
     </div>
+    <p class="muted small" style="margin-top:14px">Després, al mòbil, tria l’ordinador i escaneja el codi QR que mostra el panell.</p>
   </section>`;
 }
 
@@ -648,8 +529,8 @@ function renderComposer() {
 }
 
 /* ---------- Fulls */
-function openSheet(html, onMount) {
-  const d = $('#sheet'); $('#sheetIn').innerHTML = `<div class="grab"></div>${html}`;
+function openSheet(html, onMount, cls) {
+  const d = $('#sheet'); d.classList.toggle('wiz', cls === 'wiz'); const si = $('#sheetIn'); si.onclick = si.onsubmit = si.oninput = si.onchange = null; si.innerHTML = cls === 'wiz' ? '' : `<div class="grab"></div>${html}`;
   if (!d.open) d.showModal(); if (T.on) $('#tour').hidden = true;
   onMount?.($('#sheetIn'));
 }
@@ -664,85 +545,122 @@ function modeHelp(agentId, mode) {
   if (agentId === 'codex') return 'Pot editar dins la carpeta, sense accés a internet. Codex no pot fer preguntes en aquest mode.';
   return 'Aquest agent encara no pot demanar permís: les accions que el necessitarien es rebutgen.';
 }
+// Assistent de 4 passos: agent, carpeta exacta, opcions i tasca. Capçalera i peu fixos; només el cos fa scroll.
 async function newSessionSheet(preset = {}) {
   if (!machine()) return go('#/sessions');
   if (!state.connected) return toast('Encara no hi ha connexió amb l’ordinador');
   const agents = [...(state.info?.agents || [])].sort((x, y) => Number(!!y.available) - Number(!!x.available));
   let projects = [];
   try { projects = await api('/api/projects'); } catch (e) { return toast(e.message); }
-  const first = (isDemo() && agents.find((a) => a.id === 'demo')) || agents.find((a) => a.available && a.id !== 'demo') || agents.find((a) => a.available);
-  const sel = { agent: first?.id || 'demo', cwd: projects.find((p) => !p.root)?.path || projects[0]?.path, mode: 'preguntar', model: '', ...preset };
-  openSheet(`<h2>Nova sessió</h2>
-    <div class="stack"><div class="section-title" style="margin:0">Agent</div><div class="picker" id="agentPick"></div></div>
-    <div class="stack"><div class="row between"><div class="section-title" style="margin:0">Carpeta</div><button class="chip" type="button" id="ghOpen">Clona de GitHub</button></div><div class="proj-list" id="projPick"></div><div class="stack" id="ghWrap" hidden></div></div>
-    <div class="stack" id="modeWrap"><div class="section-title" style="margin:0">Permisos</div><div class="seg" id="modePick" role="group">${Object.entries(MODES).map(([k, m]) => `<button type="button" data-mode="${k}">${m.label}</button>`).join('')}</div><p class="muted small" id="modeHelp"></p></div>
-    <div id="modelWrap"></div>
-    <label class="f"><span>Què ha de fer?</span><textarea class="field" id="firstMsg" rows="3" placeholder="Per exemple: troba per què fallen els tests i arregla-ho"></textarea></label>
-    <div class="row between sheet-foot"><button class="btn ghost" type="button" data-close>Cancel·la</button><button class="btn ink" id="startBtn" type="button">Comença</button></div>`, (sh) => {
-    const paint = () => {
-      $('#agentPick', sh).innerHTML = agents.map((a) => `<button type="button" class="pick ${a.available ? '' : 'off'}" data-agent-id="${esc(a.id)}" aria-pressed="${a.id === sel.agent}"><div class="row between"><span class="agent-tag" data-agent="${esc(a.id)}">${esc(a.name)}</span>${a.beta ? '<span class="chip beta">beta</span>' : ''}</div><div class="sub">${esc(a.available ? a.version || 'Disponible' : 'No instal·lat')}</div></button>`).join('');
-      $('#projPick', sh).innerHTML = projects.map((p) => `<button type="button" class="proj" data-path="${esc(p.path)}" aria-pressed="${p.path === sel.cwd}"><span class="ic">${p.git ? 'git' : '·'}</span><span class="grow"><div>${esc(p.name)}</div><div class="p">${esc(p.path)}</div></span></button>`).join('') || '<p class="muted small">No hi ha carpetes compartides.</p>';
-      const ag = agents.find((a) => a.id === sel.agent);
-      $('#modeWrap', sh).hidden = !!ag?.noModes;
-      $$('#modePick button', sh).forEach((b) => b.setAttribute('aria-pressed', b.dataset.mode === sel.mode));
-      $('#modeHelp', sh).textContent = modeHelp(sel.agent, sel.mode);
+  const first = agents.find((a) => a.available);
+  const sel = { agent: first?.id || '', cwd: projects.find((p) => !p.root)?.path || projects[0]?.path || '', mode: 'preguntar', model: '', text: '', ...preset };
+  const STEPS = ['Agent', 'Carpeta', 'Opcions', 'Tasca'];
+  let step = preset.agent ? 1 : 0, fsd = null, gh = null, models = null;
+  const agentOf = () => agents.find((a) => a.id === sel.agent);
+
+  openSheet('', (sh) => {
+    const body = () => { $('#wizBody', sh).innerHTML = VIEWS_[step](); after(); };
+    const head = () => {
+      const last = step === STEPS.length - 1;
+      $('#wizHead', sh).innerHTML = `<div class="grab"></div><div class="row between" style="flex-wrap:nowrap"><h2>Nova sessió</h2><button class="icon-btn" type="button" data-close aria-label="Tanca">×</button></div>
+        <div class="wiz-dots">${STEPS.map((n, i) => `<button type="button" class="wiz-dot ${i === step ? 'on' : i < step ? 'done' : ''}" data-step="${i}" ${i < step ? '' : 'disabled'} aria-label="${i + 1}. ${n}"></button>`).join('')}</div>
+        <p class="muted small">Pas ${step + 1} de ${STEPS.length} · ${STEPS[step]}</p>`;
+      $('#wizFoot', sh).innerHTML = `<button class="btn ghost" type="button" ${step ? 'data-back' : 'data-close'}>${step ? 'Enrere' : 'Cancel·la'}</button><button class="btn ink" type="button" ${last ? 'data-start' : 'data-next'}>${last ? 'Comença' : 'Continua'}</button>`;
     };
-    const paintModel = async () => {
-      const w = $('#modelWrap', sh);
-      if (sel.agent === 'ollama') {
-        const models = await api('/api/ollama/models').catch(() => []);
-        if (!sel.model) sel.model = models[0]?.name || '';
-        w.innerHTML = `<label class="f"><span>Model</span><select id="modelSel">${models.map((m) => `<option ${m.name === sel.model ? 'selected' : ''}>${esc(m.name)}</option>`).join('') || '<option value="">Cap model (ollama pull qwen3:4b)</option>'}</select></label>`;
-        $('#modelSel', sh).onchange = (e) => (sel.model = e.target.value);
-      } else if (sel.agent === 'demo') w.innerHTML = '';
-      else {
-        w.innerHTML = '<label class="f"><span>Model <span class="muted">(opcional)</span></span><input type="text" id="modelIn" placeholder="El que l’agent faci servir per defecte" autocapitalize="off" spellcheck="false"></label>';
-        $('#modelIn', sh).value = sel.model; $('#modelIn', sh).oninput = (e) => (sel.model = e.target.value.trim());
-      }
+    const draw = () => {
+      if (!$('#wizBody', sh)) sh.innerHTML = '<div class="wiz-head" id="wizHead"></div><div class="wiz-body" id="wizBody"></div><div class="wiz-foot" id="wizFoot"></div>';
+      head(); body();
+      $('#wizBody', sh).scrollTop = 0;
     };
-    let ghRepos = null;
-    const ghPaint = (q = '') => {
-      const w = $('#ghList', sh); if (!w) return;
-      const qq = q.trim().toLowerCase(), list = (ghRepos || []).filter((r) => !qq || r.repo.toLowerCase().includes(qq) || r.description.toLowerCase().includes(qq)).slice(0, 40);
-      w.innerHTML = list.map((r) => `<button type="button" class="proj" data-repo="${esc(r.repo)}"><span class="ic">git</span><span class="grow"><div>${esc(r.repo)}${r.private ? ' <span class="chip beta">privat</span>' : ''}</div>${r.description ? `<div class="p">${esc(r.description)}</div>` : ''}</span></button>`).join('') || '<p class="muted small">No hi ha cap repositori amb aquest nom.</p>';
+    const after = () => {
+      if (step === 1 && !fsd) fsGo(sel.cwd);
+      if (step === 2 && sel.agent === 'ollama' && models == null) api('/api/ollama/models').catch(() => []).then((m) => { models = m; if (!sel.model) sel.model = m[0]?.name || ''; if (step === 2) body(); });
+      if (step === 3 && !isTouch) setTimeout(() => $('#firstMsg', sh)?.focus(), 60);
     };
-    const ghOpen = async () => {
-      const w = $('#ghWrap', sh); if (!w.hidden) { w.hidden = true; return; }
-      w.hidden = false; w.innerHTML = '<p class="muted small">Connectant amb GitHub…</p>';
-      let st; try { st = await api('/api/github'); } catch (e) { w.innerHTML = `<p class="muted small">${esc(e.message)}</p>`; return; }
-      if (!st.available) { w.innerHTML = '<p class="muted small">No trobo l’eina <span class="mono">gh</span> en aquest ordinador. Instal·la-la des de <a href="https://cli.github.com" target="_blank" rel="noopener">cli.github.com</a> i inicia sessió amb <span class="mono">gh auth login</span>.</p>'; return; }
-      if (!st.authed) { w.innerHTML = '<p class="muted small">Falta iniciar sessió a GitHub. Al terminal de l’ordinador, executa <span class="mono">gh auth login</span>.</p>'; return; }
-      w.innerHTML = `<input type="search" id="ghQ" placeholder="Cerca entre els teus repositoris${st.user ? ' (' + esc(st.user) + ')' : ''}" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Cerca un repositori"><div class="proj-list" id="ghList"><p class="muted small">Carregant repositoris…</p></div>`;
-      $('#ghQ', sh).oninput = (e) => ghPaint(e.target.value);
-      try { ghRepos = await api('/api/github/repos'); ghPaint(); } catch (e) { $('#ghList', sh).innerHTML = `<p class="muted small">${esc(e.message)}</p>`; }
+
+    /* --- carpeta: la carpeta oberta és la triada */
+    const fsGo = async (dir) => {
+      try { fsd = await api(`/api/fs?path=${encodeURIComponent(dir || '')}`); sel.cwd = fsd.path; gh = null; }
+      catch (e) { toast(e.message, 4200); if (!fsd) fsd = { path: sel.cwd, parent: null, home: '', dirs: [] }; }
+      if (step === 1) body();
+    };
+    const ghList = () => {
+      const q = (gh.q || '').trim().toLowerCase(), list = (gh.repos || []).filter((r) => !q || r.repo.toLowerCase().includes(q) || r.description.toLowerCase().includes(q)).slice(0, 40);
+      return list.map((r) => `<button type="button" class="proj" data-repo="${esc(r.repo)}"><span class="ic">git</span><span class="grow"><div>${esc(r.repo)}${r.private ? ' <span class="chip beta">privat</span>' : ''}</div>${r.description ? `<div class="p">${esc(r.description)}</div>` : ''}</span></button>`).join('') || '<p class="muted small">No hi ha cap repositori amb aquest nom.</p>';
+    };
+    const ghStart = async () => {
+      gh = { msg: 'Connectant amb GitHub…', repos: null, q: '' }; body();
+      let st; try { st = await api('/api/github'); } catch (e) { gh.msg = esc(e.message); return body(); }
+      if (!st.available) gh.msg = 'No trobo l’eina <span class="mono">gh</span> en aquest ordinador. Instal·la-la des de <a href="https://cli.github.com" target="_blank" rel="noopener">cli.github.com</a> i inicia sessió amb <span class="mono">gh auth login</span>.';
+      else if (!st.authed) gh.msg = 'Falta iniciar sessió a GitHub. Al terminal de l’ordinador, executa <span class="mono">gh auth login</span>.';
+      else { gh.user = st.user; gh.msg = 'Carregant repositoris…'; body(); try { gh.repos = await api('/api/github/repos'); gh.msg = ''; } catch (e) { gh.msg = esc(e.message); } }
+      if (gh && step === 1) body();
     };
-    $('#ghOpen', sh).onclick = ghOpen;
     const ghClone = async (repo, btn) => {
       btn.disabled = true; btn.querySelector('.p, div')?.insertAdjacentHTML('beforeend', ' <span class="muted">· clonant…</span>');
-      try {
-        const r = await api('/api/github/clone', { method: 'POST', body: { repo } });
-        if (!projects.some((p) => p.path === r.path)) projects.unshift({ path: r.path, name: r.path.split(/[\\/]/).pop(), root: false, git: true });
-        sel.cwd = r.path; $('#ghWrap', sh).hidden = true; paint(); toast(r.existed ? 'Ja el tenies. L’he seleccionat.' : 'Repositori clonat');
-      } catch (e) { btn.disabled = false; toast(e.message, 6000); }
+      try { const r = await api('/api/github/clone', { method: 'POST', body: { repo } }); toast(r.existed ? 'Ja el tenies. L’he seleccionat.' : 'Repositori clonat'); await fsGo(r.path); }
+      catch (e) { btn.disabled = false; toast(e.message, 6000); }
+    };
+
+    const VIEWS_ = [
+      () => `<p class="wiz-q">Quin agent vols fer servir?</p><div class="picker">${agents.map((a) => `<button type="button" class="pick ${a.available ? '' : 'off'}" data-agent-id="${esc(a.id)}" aria-pressed="${a.id === sel.agent}"><div class="row between"><span class="agent-tag" data-agent="${esc(a.id)}">${esc(a.name)}</span>${a.beta ? '<span class="chip beta">beta</span>' : ''}</div><div class="sub">${esc(a.available ? a.version || 'Disponible' : 'No instal·lat')}</div></button>`).join('')}</div>`,
+      () => {
+        const crumbs = fsd ? fsd.path.split(/[\\/]/).filter(Boolean) : [];
+        const quick = projects.slice(0, 8).map((p) => `<button type="button" class="chip" data-fs="${esc(p.path)}">${esc(p.name)}</button>`).join('');
+        return `<p class="wiz-q">A quina carpeta ha de treballar?</p>
+          <form class="pair-form" id="fsForm"><input type="text" id="fsIn" value="${esc(fsd?.path || sel.cwd)}" placeholder="/ruta/exacta/de/la/carpeta" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Ruta de la carpeta"><button class="btn" type="submit">Obre</button></form>
+          <div class="fs-pick"><span class="muted small">Carpeta triada</span><b class="mono small">${esc(fsd?.path || sel.cwd || '—')}</b>${fsd?.git ? '<span class="chip">git</span>' : ''}</div>
+          <div class="row"><button class="chip" type="button" data-gh>${gh ? 'Torna a les carpetes' : 'Clona de GitHub'}</button>${quick}</div>
+          ${gh ? (gh.msg ? `<p class="muted small">${gh.msg}</p>` : '') + (gh.repos ? `<input type="search" id="ghQ" value="${esc(gh.q)}" placeholder="Cerca entre els teus repositoris${gh.user ? ' (' + esc(gh.user) + ')' : ''}" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Cerca un repositori"><div class="proj-list fs-list" id="ghList">${ghList()}</div>` : '')
+          : !fsd ? '<p class="muted small">Carregant…</p>' : `<div class="fs-bar"><button class="icon-btn" type="button" data-fs="${esc(fsd.parent || '')}" ${fsd.parent ? '' : 'disabled'} aria-label="Carpeta de dalt">${svg(ICON.back)}</button><button class="chip" type="button" data-fs="${esc(fsd.home)}">Inici</button><span class="fs-path mono small" title="${esc(fsd.path)}">${esc(crumbs.slice(-2).join(' / ') || '/')}</span></div>
+          <div class="proj-list fs-list">${fsd.dirs.map((d) => `<button type="button" class="proj" data-fs="${esc(d.path)}"><span class="ic">›</span><span class="grow"><div ${d.hidden ? 'class="muted"' : ''}>${esc(d.name)}</div></span></button>`).join('') || '<p class="muted small">No hi ha subcarpetes. Pots triar aquesta.</p>'}</div>`}`;
+      },
+      () => {
+        const ag = agentOf();
+        const modelHtml = sel.agent === 'ollama'
+          ? `<label class="f"><span>Model</span><select id="modelSel">${(models || []).map((m) => `<option ${m.name === sel.model ? 'selected' : ''}>${esc(m.name)}</option>`).join('') || `<option value="">${models == null ? 'Carregant…' : 'Cap model (ollama pull qwen3:4b)'}</option>`}</select></label>`
+          : `<label class="f"><span>Model <span class="muted">(opcional)</span></span><input type="text" id="modelIn" value="${esc(sel.model)}" placeholder="El que l’agent faci servir per defecte" autocapitalize="off" spellcheck="false"></label>`;
+        return `<p class="wiz-q">Quins permisos té?</p>${ag?.noModes ? '<p class="muted small">Aquest agent no té modes de permisos.</p>' : `<div class="list">${Object.entries(MODES).map(([k, m]) => `<button class="card" type="button" data-mode="${k}" aria-pressed="${k === sel.mode}"><b>${m.label}</b><div class="muted small" style="margin-top:4px">${esc(modeHelp(sel.agent, k))}</div></button>`).join('')}</div>`}${modelHtml}`;
+      },
+      () => `<p class="wiz-q">Què ha de fer?</p>
+        <dl class="kv"><dt>Agent</dt><dd>${esc(AGENT_NAMES[sel.agent] || sel.agent)}</dd><dt>Carpeta</dt><dd class="mono">${esc(sel.cwd)}</dd>${agentOf()?.noModes ? '' : `<dt>Permisos</dt><dd>${esc(MODES[sel.mode].label)}</dd>`}${sel.model ? `<dt>Model</dt><dd class="mono">${esc(sel.model)}</dd>` : ''}</dl>
+        <label class="f"><span>Explica-li la tasca</span><textarea class="field" id="firstMsg" rows="5" placeholder="Per exemple: troba per què fallen els tests i arregla-ho">${esc(sel.text)}</textarea></label>`
+    ];
+
+    const start = async () => {
+      if (!sel.text.trim()) { $('#firstMsg', sh)?.focus(); return toast('Explica a l’agent què ha de fer'); }
+      const btn = $('[data-start]', sh); btn.disabled = true;
+      try { const { text, ...rest } = sel; const s = await api('/api/sessions', { method: 'POST', body: { ...rest, text: text.trim() } }); state.sessions.set(s.id, s); closeSheet(); go(`#/s/${s.id}`); }
+      catch (e) { toast(e.message, 4200); btn.disabled = false; }
     };
     sh.onclick = (e) => {
-      const rp = e.target.closest('[data-repo]'); if (rp) return ghClone(rp.dataset.repo, rp);
-      if (e.target.closest('[data-close]')) return closeSheet();
-      const ag = e.target.closest('[data-agent-id]');
-      if (ag) { const a = agents.find((x) => x.id === ag.dataset.agentId); if (!a.available) return toast(`Primer instal·la’l a l’ordinador: ${a.login}`, 4200); sel.agent = a.id; sel.model = ''; paint(); paintModel(); }
-      const pj = e.target.closest('[data-path]'); if (pj) { sel.cwd = pj.dataset.path; paint(); }
-      const mo = e.target.closest('[data-mode]'); if (mo) { sel.mode = mo.dataset.mode; paint(); }
+      const t = e.target;
+      if (t.closest('[data-close]')) return closeSheet();
+      if (t.closest('[data-back]')) { step = Math.max(0, step - 1); return draw(); }
+      if (t.closest('[data-next]')) {
+        if (step === 0 && !sel.agent) return toast('Tria un agent');
+        if (step === 1 && !sel.cwd) return toast('Tria una carpeta');
+        step++; return draw();
+      }
+      if (t.closest('[data-start]')) return start();
+      const st = t.closest('[data-step]'); if (st && !st.disabled) { step = +st.dataset.step; return draw(); }
+      const ag = t.closest('[data-agent-id]');
+      if (ag) { const a = agents.find((x) => x.id === ag.dataset.agentId); if (!a.available) return toast(`Primer instal·la’l a l’ordinador: ${a.login}`, 4200); if (a.id !== sel.agent) { sel.agent = a.id; sel.model = ''; models = null; } step = 1; return draw(); }
+      const fp = t.closest('[data-fs]'); if (fp && !fp.disabled) return fsGo(fp.dataset.fs);
+      if (t.closest('[data-gh]')) { if (gh) { gh = null; return body(); } return ghStart(); }
+      const rp = t.closest('[data-repo]'); if (rp) return ghClone(rp.dataset.repo, rp);
+      const mo = t.closest('[data-mode]'); if (mo) { sel.mode = mo.dataset.mode; return body(); }
     };
-    paint(); paintModel();
-    $('#startBtn', sh).onclick = async () => {
-      const text = $('#firstMsg', sh).value.trim();
-      if (!text) { $('#firstMsg', sh).focus(); return toast('Explica a l’agent què ha de fer'); }
-      $('#startBtn', sh).disabled = true;
-      try { const s = await api('/api/sessions', { method: 'POST', body: { ...sel, text } }); state.sessions.set(s.id, s); closeSheet(); go(`#/s/${s.id}`); }
-      catch (e) { toast(e.message, 4200); $('#startBtn', sh).disabled = false; }
+    sh.onsubmit = (e) => { e.preventDefault(); if (e.target.id === 'fsForm') fsGo($('#fsIn', sh).value.trim()); };
+    sh.oninput = (e) => {
+      const id = e.target.id;
+      if (id === 'firstMsg') sel.text = e.target.value;
+      else if (id === 'modelIn') sel.model = e.target.value.trim();
+      else if (id === 'ghQ' && gh) { gh.q = e.target.value; $('#ghList', sh).innerHTML = ghList(); }
     };
-    if (!isTouch) setTimeout(() => $('#firstMsg', sh)?.focus(), 80);
-  });
+    sh.onchange = (e) => { if (e.target.id === 'modelSel') sel.model = e.target.value; };
+    draw();
+  }, 'wiz');
 }
 function modeSheet(s) {
   openSheet(`<h2>Permisos</h2><div class="list">${Object.entries(MODES).map(([k, m]) => `<button class="card" type="button" data-m="${k}" style="${k === s.mode ? 'border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)' : ''}"><b>${m.label}</b><div class="muted small" style="margin-top:4px">${esc(modeHelp(s.agent, k))}</div></button>`).join('')}</div><p class="muted small">El canvi s’aplica a partir del pròxim missatge.</p>`, (sh) => {
@@ -753,7 +671,6 @@ function modeSheet(s) {
   });
 }
 /* ---------- Ordinadors i mòbil */
-const isRealMachine = () => { const m = machine(); return !!m && m.url !== DEMO_URL; };
 const isLocalMachine = () => { const m = machine(); try { return !!m && ['127.0.0.1', 'localhost', '[::1]'].includes(new URL(m.url).hostname); } catch { return false; } };
 function mobileHint() {
   if (!isLocalMachine() || !state.connected || LS.get('nio.mobHint.off', false)) return '';
@@ -761,7 +678,7 @@ function mobileHint() {
 }
 function machinesSheet() {
   const ms = store.machines;
-  openSheet(`<h2>Ordinadors</h2><div class="stack">${ms.map((x, i) => `<button class="card row" type="button" data-machine="${i}" style="flex-wrap:nowrap"><i class="dot ${i === store.active && state.connected ? 'on' : ''}"></i><span class="grow"><b>${esc(x.name)}</b><div class="muted small mono" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(x.url === DEMO_URL ? 'Dins del navegador' : x.url)}</div></span>${i === store.active ? '<span class="chip">Actiu</span>' : ''}</button>`).join('')}
+  openSheet(`<h2>Ordinadors</h2><div class="stack">${ms.map((x, i) => `<button class="card row" type="button" data-machine="${i}" style="flex-wrap:nowrap"><i class="dot ${i === store.active && state.connected ? 'on' : ''}"></i><span class="grow"><b>${esc(x.name)}</b><div class="muted small mono" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(x.url)}</div></span>${i === store.active ? '<span class="chip">Actiu</span>' : ''}</button>`).join('')}
     <div class="row between sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button><button class="btn ink" type="button" data-act="add-machine">${svg(ICON.plus)}Connecta’n un altre</button></div></div>`, (sh) => { $('[data-close]', sh).onclick = closeSheet; });
 }
 function addMachineSheet() {
@@ -769,8 +686,9 @@ function addMachineSheet() {
   openSheet(`<h2>Connecta un altre ordinador</h2>
     <div class="stack-lg">
       <div class="stack"><b>Un ordinador</b><p class="muted small">Al terminal de l’altre ordinador, des de la carpeta dels projectes:</p>${cmd('npx nio-cat')}<p class="muted small">Escaneja el QR que surt, o enganxa aquí sota l’enllaç.</p></div>
-      <div class="stack"><b>Un servidor (VPS)</b><p class="muted small">Al servidor, amb l’adreça pública amb HTTPS (Tailscale, Cloudflare o Caddy):</p>${cmd('npx nio-cat --url https://la-teva-adreça --no-open')}<p class="muted small">Deixa’l sota <span class="mono">tmux</span>, <span class="mono">pm2</span> o <span class="mono">systemd</span> perquè no s’aturi. Copia l’enllaç que mostra i enganxa’l aquí.</p></div>
-      <form class="pair-form" id="pairForm"><input type="url" id="pairInput" placeholder="https://…/app#u=…&t=…" autocomplete="off" autocapitalize="off" spellcheck="false" required aria-label="Enllaç de connexió"><button class="btn ink" type="submit">Connecta</button></form>
+      <div class="stack"><b>Un servidor (VPS) per SSH</b><p class="muted small">Des de l’ordinador on tens aquest panell. No cal obrir cap port al servidor, només Node.js 18 o més nou:</p>${cmd('npx nio-cat ssh usuari@servidor')}<p class="muted small">Engega nio al servidor, obre un túnel SSH i et mostra el panell connectat.</p></div>
+      <div class="stack"><b>Un servidor amb adreça pública</b><p class="muted small">Si el servidor té una adreça amb HTTPS (Tailscale, Cloudflare o Caddy):</p>${cmd('npx nio-cat --url https://la-teva-adreça --no-open')}<p class="muted small">Deixa’l sota <span class="mono">tmux</span>, <span class="mono">pm2</span> o <span class="mono">systemd</span>. Copia aquí el codi que mostra.</p></div>
+      <form class="pair-form" id="pairForm"><input type="text" id="pairInput" placeholder="nio-… o enllaç" autocomplete="off" autocapitalize="off" spellcheck="false" required aria-label="Codi o enllaç de connexió"><button class="btn ink" type="submit">Connecta</button></form>
     </div>`);
 }
 let qrTimer = 0;
@@ -785,7 +703,7 @@ function mobileQrSheet() {
       if (n < 8) qrTimer = setTimeout(() => paint(n + 1), 2000);
       return;
     }
-    box.innerHTML = `<div class="qr-box">${r.svg}</div><p class="muted small">Escaneja-ho amb la càmera del mòbil.${r.lan ? ' El mòbil ha d’estar a la mateixa wifi.' : ''}</p><button class="btn" type="button" data-copy="${esc(r.link)}">${svg(ICON.copy)}Copia l’enllaç</button>`;
+    box.innerHTML = `<div class="qr-box">${r.svg}</div><p class="muted small">Escaneja-ho amb la càmera del mòbil.${r.lan ? ' El mòbil ha d’estar a la mateixa wifi.' : ''}</p><div class="row"><button class="btn" type="button" data-copy="${esc(r.code)}">${svg(ICON.copy)}Copia el codi</button></div><p class="muted small">Si no pots escanejar, enganxa el codi a Sessions → Tria un ordinador.</p>`;
   };
   openSheet(`<h2>Continua al mòbil</h2><div class="stack" id="qrBox"><p class="muted small">Preparant el codi…</p></div><div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button></div>`, (sh) => { $('[data-close]', sh).onclick = closeSheet; });
   paint();
@@ -826,7 +744,7 @@ function sessionOptions(id) {
   openSheet(`<h2>${esc(s.title || 'Sessió')}</h2>
     <dl class="kv"><dt>Agent</dt><dd>${esc(AGENT_NAMES[s.agent] || s.agent)}</dd><dt>Carpeta</dt><dd class="mono">${esc(s.cwd)}</dd><dt>Permisos</dt><dd>${esc(MODES[s.mode]?.label || '')}</dd><dt>Creada</dt><dd>${new Date(s.created).toLocaleString('ca')}</dd></dl>
     <label class="f"><span>Nom de la sessió</span><input type="text" id="renameIn" value="${esc(s.title)}" maxlength="120"></label>
-    ${isRealMachine() ? '<button class="btn" data-act="git" type="button">Git i GitHub…</button>' : ''}
+    <button class="btn" data-act="git" type="button">Git i GitHub…</button>
     <div class="row between"><button class="btn danger" id="delBtn" type="button">Esborra la sessió</button><button class="btn ink" id="renameBtn" type="button">Desa</button></div>`, (sh) => {
     $('#renameBtn', sh).onclick = async () => { const t = $('#renameIn', sh).value.trim(); const sum = await api(`/api/sessions/${id}`, { method: 'PATCH', body: { title: t } }).catch((e) => toast(e.message)); if (sum) state.sessions.set(id, sum); closeSheet(); renderSessionHead(); };
     $('#delBtn', sh).onclick = async () => { if (!confirm('S’esborrarà la conversa d’aquesta sessió. Els fitxers del projecte no es toquen.')) return; await api(`/api/sessions/${id}`, { method: 'DELETE' }).catch((e) => toast(e.message)); closeSheet(); go('#/sessions'); };
@@ -836,8 +754,7 @@ function sessionOptions(id) {
 /* ---------- Ordinador */
 function viewMachine() {
   const m = machine(), info = state.info, ms = store.machines;
-  if (!m) return viewConnect();
-  return `<div class="top"><div><h1>${esc(m.name)}</h1><p class="conn"><i class="dot ${state.connected ? 'on' : ''}"></i><span>${state.connected ? 'Connectat' : esc(state.lastError || 'Connectant…')}</span></p></div><button class="btn" data-act="refresh-agents" type="button">${svg(ICON.refresh)}Torna a detectar els agents</button></div>
+  return `<div class="top"><div><h1>${esc(m.name)}</h1><p class="conn"><i class="dot ${state.connected ? 'on' : ''}"></i><span>${state.connected ? 'Connectat' : esc(state.lastError || 'Connectant…')}</span></p></div><div class="row"><button class="btn" data-act="refresh-agents" type="button">${svg(ICON.refresh)}Torna a detectar els agents</button><button class="btn ink" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button></div></div>
   <div class="grid2">
     <div class="stack">
       <section class="panel"><header><h2>Agents</h2></header><div class="body">${info ? info.agents.map((a) => `<div class="agent-row"><i class="dot ${a.available ? 'on' : ''}"></i><div class="grow"><div class="row"><span class="agent-tag" data-agent="${esc(a.id)}">${esc(a.name)}</span>${a.beta ? '<span class="chip beta">beta</span>' : ''}</div><div class="muted small mono">${esc(a.available ? a.version || 'Disponible' : a.login)}</div></div></div>`).join('') : '<p class="muted">Sense connexió.</p>'}</div></section>
@@ -845,9 +762,9 @@ function viewMachine() {
     </div>
     <div class="stack">
       <section class="panel"><header><h2>Avisos al mòbil</h2></header><div class="body stack"><p class="small">Rep un avís quan un agent et demana permís o acaba la feina.</p>${isIOS && !standalone ? '<p class="muted small">A l’iPhone, primer afegeix nio a la pantalla d’inici (Comparteix → Afegeix a la pantalla d’inici) i obre’l des d’allà.</p>' : ''}<div class="row"><button class="btn ink grow" data-act="push" type="button">Activa els avisos</button><button class="btn" data-act="push-test" type="button">Envia’n un de prova</button></div></div></section>
-      ${m.url !== DEMO_URL ? '<section class="panel"><header><h2>Continua al mòbil</h2></header><div class="body stack"><p class="small">Escaneja un codi i obre aquest ordinador des del telèfon.</p><div class="row"><button class="btn ink grow" data-act="mobile-qr" type="button">Mostra el QR</button></div></div></section>' : ''}
-      <section class="panel"><header><h2>Detalls</h2></header><div class="body"><dl class="kv"><dt>Adreça</dt><dd class="mono">${esc(m.url === DEMO_URL ? 'Dins del navegador' : m.url)}</dd>${info ? `<dt>Sistema</dt><dd>${esc(info.platform)} · ${esc(info.user)}</dd><dt>Versió</dt><dd>${esc(info.version)}</dd>` : ''}</dl></div></section>
-      <section class="panel"><header><h2>Ordinadors</h2></header><div class="body stack">${ms.map((x, i) => `<button class="card row" type="button" data-machine="${i}" style="flex-wrap:nowrap"><i class="dot ${i === store.active && state.connected ? 'on' : ''}"></i><span class="grow"><b>${esc(x.name)}</b><div class="muted small mono" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(x.url === DEMO_URL ? 'Dins del navegador' : x.url)}</div></span>${i === store.active ? '<span class="chip">actiu</span>' : ''}</button>`).join('')}
+      ${'<section class="panel"><header><h2>Continua al mòbil</h2></header><div class="body stack"><p class="small">Escaneja un codi i obre aquest ordinador des del telèfon.</p><div class="row"><button class="btn ink grow" data-act="mobile-qr" type="button">Mostra el QR</button></div></div></section>'}
+      <section class="panel"><header><h2>Detalls</h2></header><div class="body"><dl class="kv"><dt>Adreça</dt><dd class="mono">${esc(m.url)}</dd>${info ? `<dt>Sistema</dt><dd>${esc(info.platform)} · ${esc(info.user)}</dd><dt>Versió</dt><dd>${esc(info.version)}</dd>` : ''}</dl></div></section>
+      <section class="panel"><header><h2>Ordinadors</h2></header><div class="body stack">${ms.map((x, i) => `<button class="card row" type="button" data-machine="${i}" style="flex-wrap:nowrap"><i class="dot ${i === store.active && state.connected ? 'on' : ''}"></i><span class="grow"><b>${esc(x.name)}</b><div class="muted small mono" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(x.url)}</div></span>${i === store.active ? '<span class="chip">actiu</span>' : ''}</button>`).join('')}
         <div class="row"><button class="btn" data-act="add-machine" type="button">${svg(ICON.plus)}Connecta’n un altre</button><button class="btn danger" data-act="forget" type="button">Oblida aquest</button></div></div></section>
     </div>
   </div>`;
@@ -939,7 +856,7 @@ function onOllama(msg) {
 window.NioBrains = {
   list() {
     const out = [{ id: 'rules', label: 'Ordres ràpides' }];
-    if (machine() && state.connected) (state.ollama?.models || []).forEach((m) => out.push({ id: 'ollama:' + m.name, label: `Ollama · ${m.name}${isDemo() ? ' (simulat)' : ''}` }));
+    if (machine() && state.connected) (state.ollama?.models || []).forEach((m) => out.push({ id: 'ollama:' + m.name, label: `Ollama · ${m.name}` }));
     if (local.engine) out.push({ id: 'local', label: `Xat local · ${LOCAL_MODELS.find((x) => x.id === local.model)?.name || local.model}` });
     return out;
   },
@@ -966,7 +883,6 @@ async function brainsForBoard() {
 function b64uToU8(s) { const b = atob((s + '='.repeat((4 - (s.length % 4)) % 4)).replace(/-/g, '+').replace(/_/g, '/')); return Uint8Array.from(b, (c) => c.charCodeAt(0)); }
 async function enablePush() {
   try {
-    if (isDemo()) throw new Error('Els avisos només funcionen amb un ordinador de veritat');
     if (!('serviceWorker' in navigator) || !('PushManager' in window)) throw new Error(isIOS ? 'Afegeix nio a la pantalla d’inici i obre’l des d’allà' : 'Aquest navegador no admet avisos');
     if ((await Notification.requestPermission()) !== 'granted') throw new Error('Cal que permetis les notificacions');
     const reg = await navigator.serviceWorker.ready;
@@ -976,7 +892,7 @@ async function enablePush() {
   } catch (e) { toast(e.message, 4200); }
 }
 async function syncServiceWorker() {
-  const m = machine(); if (!m || m.url === DEMO_URL || !('serviceWorker' in navigator)) return;
+  const m = machine(); if (!m || !('serviceWorker' in navigator)) return;
   try { (await navigator.serviceWorker.ready).active?.postMessage({ type: 'nio-cfg', url: m.url, token: m.token }); } catch { /* sense service worker */ }
 }
 
@@ -1085,7 +1001,6 @@ document.addEventListener('click', async (e) => {
     case 'ollama-cancel': try { await api(`/api/ollama/pull/${encodeURIComponent(a.dataset.name)}`, { method: 'DELETE' }); } catch (err) { toast(err.message); } return;
     case 'ollama-del': return deleteModel(a.dataset.name);
     case 'ollama-chat': try { state.info = await api('/api/info?refresh=1'); } catch { /* res */ } return newSessionSheet({ agent: 'ollama', model: a.dataset.name });
-    case 'demo': return tryDemo();
     case 'retry': return connect();
     case 'mode': { const s = state.sessions.get(state.route.id); if (s) modeSheet(s); return; }
     case 'session-more': return sessionOptions(state.route.id);
@@ -1100,7 +1015,7 @@ document.addEventListener('click', async (e) => {
     case 'forget': {
       if (!confirm('Aquest dispositiu deixarà de tenir accés a aquest ordinador.')) return;
       const list = store.machines; list.splice(store.active, 1); store.machines = list; store.active = 0;
-      streamCtrl?.abort(); unsubDemo?.(); state.connected = false; state.info = null; state.sessions.clear(); state.approvals.clear();
+      streamCtrl?.abort(); state.connected = false; state.info = null; state.sessions.clear(); state.approvals.clear();
       connect(); return render();
     }
     case 'lm-load': return loadLocal(local.model || LS.get('nio.localModel', LOCAL_MODELS[0].id));
@@ -1115,8 +1030,8 @@ document.addEventListener('submit', (e) => {
   if (e.target.id === 'pullForm') { e.preventDefault(); return pullModel($('#pullIn').value); }
   if (e.target.id !== 'pairForm') return;
   e.preventDefault();
-  const pair = parsePair($('#pairInput', e.target).value);
-  if (!pair) return toast('Aquest enllaç no és de connexió');
+  const pair = pairFrom($('#pairInput', e.target).value);
+  if (!pair) return toast('Aquest codi no és de connexió. Copia’l sencer del terminal.');
   closeSheet(); addMachine(pair); toast('Connectant…'); go('#/sessions');
 });
 
@@ -1126,7 +1041,6 @@ function commands() {
   const c = Object.entries(VIEWS).map(([k, v]) => ({ label: `Ves a ${v.label}`, hint: 'Navega', run: () => go(HASH[k]) }));
   if (machine()) c.push({ label: 'Nova sessió', hint: 'Crea', run: newSessionSheet });
   [...state.sessions.values()].slice(0, 20).forEach((s) => c.push({ label: s.title || 'Sessió nova', hint: AGENT_NAMES[s.agent] || s.agent, run: () => go(`#/s/${s.id}`) }));
-  if (!isDemo()) c.push({ label: 'Prova l’ordinador simulat', hint: 'Prova', run: tryDemo });
   c.push({ label: 'Fes el tutorial', hint: 'Ajuda', run: tourStart });
   return c;
 }
@@ -1202,8 +1116,7 @@ const T = Object.assign({ on: false, i: 0, seen: false }, LS.get(TOUR_KEY, {}));
 const saveTour = () => LS.set(TOUR_KEY, { on: T.on, i: T.i, seen: T.seen });
 const TSTEPS = [
   { center: true, mood: 'happy', title: 'Hola, sóc en Nio.', text: 'Faig de pont entre el teu mòbil i els agents d’IA del teu ordinador. En un minut t’ensenyo on és cada cosa.', next: 'Comencem' },
-  { route: 'sessions', target: () => (machine() ? '.top [data-act=new]' : '.conn-main'), m: () => (machine() ? '.top [data-act=new]' : '.conn-main .cmd'), title: () => (machine() ? 'Dona feina a un agent' : 'Primer, connecta l’ordinador'), text: () => (machine() ? 'Cada sessió és una conversa amb un agent dins d’una carpeta. Tria l’agent, els permisos i explica-li què ha de fer.' : 'Executa aquesta ordre al terminal de l’ordinador i escaneja el codi QR que apareix. Si encara no el tens a mà, pots provar-ho amb un ordinador simulat.') },
-  { route: 'sessions', target: () => (machine() ? null : '.try'), m: () => (machine() ? null : '.try [data-act=demo]'), skipIf: () => !!machine(), title: 'Prova-ho sense instal·lar res', text: 'L’ordinador simulat té un agent de demostració que llegeix, et demana permís i executa. Ideal per veure com funciona.' },
+  { route: 'sessions', target: () => (machine() ? '.top [data-act=new]' : '.conn-main'), m: () => (machine() ? '.top [data-act=new]' : '.conn-main .cmd'), title: () => (machine() ? 'Dona feina a un agent' : 'Primer, connecta l’ordinador'), text: () => (machine() ? 'Cada sessió és una conversa amb un agent dins d’una carpeta. Tria l’agent, els permisos i explica-li què ha de fer.' : 'Executa aquesta ordre al terminal de l’ordinador i escaneja el codi QR que apareix.') },
   { route: 'approvals', target: '.side nav a[href="#/aprovacions"]', m: '#mRight .icon-btn', title: 'Tu decideixes', text: 'En mode «Demana permís», abans d’editar un fitxer o executar una ordre, l’agent t’ho pregunta aquí. Si actives els avisos, t’arriba al mòbil.' },
   { route: 'mobil', target: '.side nav a[href="#/mobil"]', m: '.page .model-card', title: 'Un model sense internet', text: 'Si no tens l’ordinador a mà, pots fer servir un model petit que funciona dins del mateix mòbil.' },
   { route: 'models', target: '.side nav a[href="#/models"]', m: '.page .top h1, .connect-head h1', title: 'Models al teu ordinador', text: 'Si tens Ollama, aquí descarregues models, veus quins tens i obres sessions amb el que vulguis. Res no surt de casa.' },
@@ -1305,12 +1218,17 @@ if ('serviceWorker' in navigator) {
   navigator.serviceWorker.addEventListener('message', (e) => { if (e.data?.type === 'open-session' && e.data.id) go(`#/s/${e.data.id}`); });
 }
 addEventListener('hashchange', route);
-document.addEventListener('visibilitychange', () => { if (!document.hidden && machine() && !state.connected && !isDemo()) connect(); });
+document.addEventListener('visibilitychange', () => { if (!document.hidden && machine() && !state.connected) connect(); });
 setInterval(() => { if (!document.hidden && state.route.name === 'sessions') render(); }, 60000);
 const qs = new URLSearchParams(location.search).get('s');
 if (qs) history.replaceState(null, '', location.pathname + `#/s/${qs}`);
 // Les dades del panell antic (simulació d'agents d'operacions) ja no es fan servir.
 try { localStorage.removeItem('nio.panell.v1'); localStorage.removeItem('nio.tour.v1'); } catch { /* res */ }
+// A la còpia local (127.0.0.1, localhost) la icona té el fons groc suau, per distingir-la de www.nio.cat.
+if (['127.0.0.1', 'localhost', '[::1]'].includes(location.hostname)) {
+  const ico = document.querySelector('link[rel="icon"]');
+  if (ico) ico.href = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#f6e9a0"/><circle cx="16" cy="16" r="10.2" fill="none" stroke="#272224" stroke-width="3.6"/><rect x="11.9" y="12.6" width="2.6" height="6" rx="1.3" fill="#272224"/><rect x="17.5" y="12.6" width="2.6" height="6" rx="1.3" fill="#272224"/></svg>');
+}
 setNav(false);
 if (!checkPairHash()) state.route = parseRoute();
 if (machine()) connect();

package/web/app/style.css

@@ -148,7 +148,7 @@ button.chip:hover { border-color: var(--fg); }
 .connect { display: grid; gap: 24px; min-width: 0; }
 .connect-head h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 500; letter-spacing: -.05em; line-height: 1.08; }
 .connect-head .lead { color: var(--fg-muted); font-size: 16px; max-width: 58ch; margin-top: 10px; }
-.connect-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
+.connect-grid { display: grid; grid-template-columns: minmax(0, 720px); gap: 16px; align-items: start; }
 .conn-main { padding: 22px; display: grid; gap: 16px; min-width: 0; }
 .stepper { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
 .stepper li { display: flex; gap: 10px; align-items: flex-start; }
@@ -379,3 +379,43 @@ body.board-mode .view-enter { animation: none; }
 .qr-box { width: min(260px, 100%); margin: 0 auto; padding: 14px; border-radius: 16px; background: #fffefd; border: 1px solid var(--border); }
 .qr-box svg { display: block; width: 100%; height: auto; }
 #ghWrap input[type="search"] { margin-bottom: 4px; }
+
+/* Connexió: dues opcions a l'ordinador; explorador de carpetes a Nova sessió */
+.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
+.choice .body { min-width: 0; }
+@media (max-width: 820px) { .choice-grid { grid-template-columns: 1fr; } }
+.fs-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.fs-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
+.fs-list { max-height: 240px; overflow: auto; }
+
+/* Assistent «Nova sessió»: drawer fix al telèfon, capçalera i peu fixos, cos amb scroll */
+body:has(dialog.sheet[open]) { overflow: hidden; }
+dialog.sheet { overscroll-behavior: contain; }
+dialog.sheet.wiz { height: min(680px, 88dvh); overflow: hidden; }
+dialog.sheet.wiz[open] { display: flex; flex-direction: column; }
+dialog.sheet.wiz .sheet-in { padding: 0; gap: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.wiz-head { flex: none; display: grid; gap: 8px; padding: 20px 24px 12px; }
+.wiz-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 24px 18px; display: grid; gap: 14px; align-content: start; }
+.wiz-foot { flex: none; display: flex; justify-content: space-between; gap: 10px; padding: 12px 24px calc(16px + var(--safe-b)); border-top: 1px solid var(--border); background: var(--bg); }
+.wiz-foot .btn { min-width: 110px; justify-content: center; }
+.wiz-q { font-size: 18px; font-weight: 500; letter-spacing: -.03em; }
+.wiz-dots { display: flex; gap: 6px; }
+.wiz-dot { flex: 1; height: 18px; border: 0; background: var(--border) content-box; background-clip: content-box; padding: 7px 0; border-radius: 4px; }
+.wiz-dot.on { background-color: var(--fg); }
+.wiz-dot.done { background-color: var(--moss); }
+.wiz-dot:disabled { cursor: default; }
+.wiz .card[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
+.fs-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); }
+.fs-pick b { overflow-wrap: anywhere; }
+.fs-list { max-height: none; }
+@media (max-width: 820px) {
+  dialog.sheet.wiz { height: min(92dvh, calc(var(--vvh, 100dvh) - 8px)); }
+  .wiz-head { padding: 10px 18px 8px; }
+  .wiz-body { padding: 4px 18px 14px; }
+  .wiz-foot { padding: 12px 18px calc(14px + var(--safe-b)); }
+  .wiz-foot .btn { flex: 1; }
+}
+#fsForm { display: flex; gap: 8px; }
+#fsForm input { flex: 1; min-width: 0; }
+.pair-code { display: grid; gap: 4px; text-align: center; }
+.pair-code b { font-size: 30px; letter-spacing: .14em; font-weight: 600; cursor: copy; }

package/web/index.html

@@ -116,11 +116,6 @@ main strong { font-weight: 600; }
     <h2 id="limits">Tu decideixes</h2>
     <p>Cada sessió té el seu nivell de confiança: <strong>només llegir</strong>, <strong>demana permís</strong> abans d’editar o executar, o <strong>via lliure</strong>. Quan l’agent et necessita, t’arriba un avís i ho resols amb un toc.</p>
   </section>
-
-  <section aria-labelledby="prova">
-    <h2 id="prova">Prova-ho</h2>
-    <p>Sense instal·lar res, amb un ordinador simulat: <a href="/app">obre el panell</a>. També hi trobaràs els teus models d’Ollama i un model petit que funciona dins del mateix mòbil.</p>
-  </section>
 </main>
 
 <footer class="footer">