nio-cat 0.3.0 → 0.3.2

package/bin/nio.js

@@ -11,7 +11,7 @@ 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, codeLink, terminalQrSize } = require('../src/pair');
 const { which } = require('../src/proc');
 
 const argv = process.argv.slice(2);
@@ -81,13 +81,24 @@ 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);
-  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'));
+async function showPair(publicUrl) {
+  const app = flags.app || cfg.app;
+  const link = pairLink(app, publicUrl, cfg.token), code = makeCode(publicUrl, cfg.token), qrLink = codeLink(app, code);
+  const file = writePairPage(link, code, qrLink);
+  // El QR ha de cabre al terminal: marge normal, marge d'1 mòdul i, si no hi cap, la pàgina del navegador.
+  const rows = process.stdout.rows || 999, cols = process.stdout.columns || 999;
+  const fits = (m) => { const z = terminalQrSize(qrLink, m); return z.rows + 9 <= rows && z.cols + 2 <= cols; };
+  const margin = fits(2) ? 2 : fits(1) ? 1 : 0;
+  if (margin) {
+    console.log(`\n  ${c.b('Escaneja aquest codi amb el mòbil')}\n`);
+    console.log(terminalQr(qrLink, { margin }));
+  } else {
+    console.log(`\n  ${c.warn('El terminal és massa petit per al QR.')} Fes-lo més gran o obre ${file}`);
+    if (canOpenBrowser()) openUrl(file);
+  }
+  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 {
@@ -98,7 +109,6 @@ 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) {
@@ -260,7 +270,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');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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,22 @@ 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'), tok24 = raw.length === 24 && raw.toString('base64url') === token;
+  const sub = url.startsWith('https://') && url.endsWith(CF) ? url.slice(8, -CF.length) : null;
+  const lan = url.match(/^http:\/\/(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3}):(\d{1,5})$/);
+  let bytes;
+  if (tok24 && sub && /^[\w-]+$/.test(sub)) bytes = Buffer.concat([Buffer.from([1]), raw, Buffer.from(sub)]);
+  else if (tok24 && lan && lan.slice(1, 5).every((n) => +n < 256) && +lan[5] < 65536) bytes = Buffer.concat([Buffer.from([2]), raw, Buffer.from(lan.slice(1, 5).map(Number)), Buffer.from([+lan[5] >> 8, +lan[5] & 255])]);
+  else bytes = Buffer.concat([Buffer.from([0]), Buffer.from(`${url}\n${token}`)]);
+  return `nio-${bytes.toString('base64url')}`;
+}
+// Enllaç curt per al QR: una adreça de l'app amb el codi al fragment. Un QR més petit cap millor al terminal.
+const codeLink = (app, code) => `${app.replace(/\/$/, '')}/app#${code}`;
+
 function qr(text) {
   const q = qrcode(0, 'L');
   q.addData(text);
@@ -19,34 +35,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.
-function terminalQr(text, { color = !process.env.NO_COLOR } = {}) {
+// 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, margin = 2 } = {}) {
   const q = qr(text);
   const n = q.getModuleCount();
-  const M = 2; // marge blanc al voltant, en mòduls
+  const M = margin; // 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, qrLink) {
+  const svg = qrSvg(qrLink || 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 +86,17 @@ 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, codeLink };
+
+// Mida del QR al terminal: files i columnes que ocupa amb un marge donat.
+function terminalQrSize(text, margin = 2) {
+  const n = qr(text).getModuleCount() + margin * 2;
+  return { rows: n, cols: n * 2 + 2 };
+}
+module.exports.terminalQrSize = terminalQrSize;

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, codeLink } = 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, '..', '..')];
@@ -232,7 +232,8 @@ 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) };
+      const code = makeCode(pub, cfg.token);
+      return { link, code, svg: qrSvg(codeLink(getApp ? getApp() : cfg.app, code)), 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') || '');

package/web/app/app.js

@@ -191,6 +191,21 @@ 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));
+    const tok = () => btoa(String.fromCharCode(...u.slice(1, 25))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+    if (u[0] === 1) return { url: `https://${new TextDecoder().decode(u.slice(25))}${CF}`, token: tok() };
+    if (u[0] === 2) return { url: `http://${[...u.slice(25, 29)].join('.')}:${(u[29] << 8) | u[30]}`, token: tok() };
+    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 || new URL(url).hostname }); i = ms.length - 1; }
@@ -199,7 +214,7 @@ function addMachine({ url, token, name }) {
   connect();
 }
 function checkPairHash() {
-  const pair = parsePair(location.hash); if (!pair) return false;
+  const pair = parsePair(location.hash) || parseCode(location.hash); if (!pair) return false;
   history.replaceState(null, '', location.pathname + '#/sessions');
   state.route = { name: 'sessions' };
   addMachine(pair); render(); toast('Ordinador connectat'); return true;
@@ -285,9 +300,9 @@ function viewNoMachine(what) {
     <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>Ja tens l’enllaç de connexió?</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">Surt al terminal, sota el codi QR.</p></details>`;
+  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>`;
@@ -312,7 +327,7 @@ function viewConnect() {
         <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 l’enllaç que mostra i enganxa’l aquí.</p>
+        <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>
@@ -674,8 +689,8 @@ function addMachineSheet() {
     <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) 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 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 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;
@@ -690,7 +705,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();
@@ -1017,8 +1032,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');
 });
 
@@ -1211,6 +1226,11 @@ 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

@@ -417,3 +417,5 @@ dialog.sheet.wiz .sheet-in { padding: 0; gap: 0; flex: 1; min-height: 0; display
 }
 #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; }