nio-cat 0.3.1 → 0.3.3

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, makeCode } = require('../src/pair');
+const { pairLink, terminalQr, writePairPage, makeCode, codeLink, terminalQrSize } = require('../src/pair');
 const { which } = require('../src/proc');
 
 const argv = process.argv.slice(2);
@@ -82,10 +82,20 @@ function openDashboard() {
 }
 
 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));
+  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'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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

@@ -16,13 +16,17 @@ function pairLink(app, url, token) {
 // 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 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 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}`)]);
+  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');
@@ -33,10 +37,10 @@ function qr(text) {
 
 // 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 } = {}) {
+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++) {
@@ -72,8 +76,8 @@ function qrSvg(text) {
   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, code) {
-  const svg = qrSvg(link);
+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">
@@ -88,4 +92,11 @@ code{display:block;word-break:break-all;font:12px/1.5 ui-monospace,Menlo,monospa
   return file;
 }
 
-module.exports = { pairLink, terminalQr, writePairPage, qrSvg, makeCode };
+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, makeCode } = 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, code: makeCode(pub, cfg.token), 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

@@ -28,6 +28,7 @@ const ICON = {
   more: '<circle cx="5" cy="12" r="1.3" fill="currentColor"/><circle cx="12" cy="12" r="1.3" fill="currentColor"/><circle cx="19" cy="12" r="1.3" fill="currentColor"/>',
   refresh: '<path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7"/>', back: '<path d="M15 5l-7 7 7 7"/>',
   bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+  check: '<path class="tick" d="M5 12.5l4.5 4.5L19 7.5"/>',
   copy: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3"/>'
 };
 const AGENT_NAMES = { claude: 'Claude Code', codex: 'Codex', grok: 'Grok', antigravity: 'Antigravity', ollama: 'Ollama', demo: 'Demo', browser: 'Xat local' };
@@ -194,10 +195,12 @@ function parsePair(text) {
 // 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;
+  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(/=+$/, '') };
+    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;
@@ -212,7 +215,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;
@@ -445,10 +448,17 @@ function renderSessionHead() {
   bar.innerHTML = `<span class="chip"><span class="agent-tag" data-agent="${esc(s.agent)}">${esc(AGENT_NAMES[s.agent] || s.agent)}</span></span>
     ${ag?.noModes ? '' : `<button class="chip" data-act="mode" type="button">${esc(MODES[s.mode]?.label || s.mode)}</button>`}
     <span class="chip mono">${esc(basename(s.cwd))}</span>
-    ${s.model ? `<span class="chip mono">${esc(s.model)}</span>` : ''}
+    <button class="chip mono" data-act="model" type="button" title="Canvia de model">${esc(s.model || 'Model per defecte')}</button>
     ${s.cost ? `<span class="chip mono">${s.cost.toFixed(2)} $</span>` : ''}
     ${stateChip(s)}`;
 }
+// Alçada del camp de text segons el contingut, sense barra de desplaçament fins al límit.
+function autogrow(ta, max = 180) {
+  ta.style.height = 'auto';
+  const h = ta.scrollHeight + (ta.offsetHeight - ta.clientHeight);
+  ta.style.height = `${Math.min(h, max)}px`;
+  ta.style.overflowY = h > max ? 'auto' : 'hidden';
+}
 const nearBottom = (f) => f.scrollHeight - f.scrollTop - f.clientHeight < 140;
 function putEvent(e, scroll = true) {
   const feed = $('#feed'); if (!feed) return;
@@ -516,7 +526,7 @@ function renderComposer() {
   box.dataset.busy = String(busy);
   box.innerHTML = `<div class="inner"><textarea rows="1" id="msg" placeholder="${busy ? 'L’agent està treballant…' : 'Escriu a l’agent…'}" enterkeyhint="send" aria-label="Missatge"></textarea><button class="send ${busy ? 'stop' : ''}" id="sendBtn" type="button" aria-label="${busy ? 'Atura l’agent' : 'Envia'}">${svg(busy ? ICON.stop : ICON.send)}</button></div>`;
   const ta = $('#msg'); ta.value = prev;
-  const grow = () => { ta.style.height = 'auto'; ta.style.height = `${Math.min(ta.scrollHeight, 180)}px`; };
+  const grow = () => autogrow(ta);
   grow(); ta.addEventListener('input', grow);
   const send = async () => {
     const text = ta.value.trim(); if (!text || !s) return;
@@ -662,6 +672,28 @@ async function newSessionSheet(preset = {}) {
     draw();
   }, 'wiz');
 }
+// Canvia el model d'una sessió. Val a partir del pròxim missatge.
+const COST_FROM = {
+  claude: 'El teu compte de Claude Code a l’ordinador (subscripció o clau d’API que hi tinguis)',
+  codex: 'El teu compte de Codex (ChatGPT o clau d’OpenAI) a l’ordinador',
+  grok: 'El teu compte de Grok a l’ordinador',
+  antigravity: 'El teu compte de Google a l’ordinador',
+  ollama: 'Res: el model funciona al teu ordinador'
+};
+const MODEL_PICKS = { claude: [['opus', 'Opus', 'El més capaç'], ['sonnet', 'Sonnet', 'Equilibrat'], ['haiku', 'Haiku', 'El més ràpid']] };
+async function modelSheet(s) {
+  const picks = s.agent === 'ollama'
+    ? (await api('/api/ollama/models').catch(() => [])).map((m) => [m.name, m.name, [m.params, m.quant, bytes(m.size)].filter(Boolean).join(' · ')])
+    : MODEL_PICKS[s.agent] || [];
+  const row = (v, name, note) => `<button class="card" type="button" data-model="${esc(v)}" aria-pressed="${(s.model || '') === v}"><b>${esc(name)}</b>${note ? `<div class="muted small" style="margin-top:4px">${esc(note)}</div>` : ''}</button>`;
+  openSheet(`<h2>Model</h2><p class="muted small">${esc(AGENT_NAMES[s.agent] || s.agent)}. El canvi s’aplica a partir del pròxim missatge.</p>
+    <div class="list">${row('', 'Per defecte', 'El que l’agent faci servir sol')}${picks.map((x) => row(...x)).join('')}</div>
+    <form class="pair-form" id="modelForm"><input type="text" id="modelFree" placeholder="Un altre model (nom exacte)" value="${picks.some((x) => x[0] === s.model) ? '' : esc(s.model || '')}" autocapitalize="off" spellcheck="false" aria-label="Nom del model"><button class="btn ink" type="submit">Desa</button></form>`, (sh) => {
+    const save = async (model) => { try { const sum = await api(`/api/sessions/${s.id}`, { method: 'PATCH', body: { model } }); state.sessions.set(s.id, sum); closeSheet(); renderSessionHead(); } catch (e) { toast(e.message); } };
+    $$('[data-model]', sh).forEach((b) => (b.onclick = () => save(b.dataset.model)));
+    $('#modelForm', sh).onsubmit = (e) => { e.preventDefault(); e.stopPropagation(); save($('#modelFree', sh).value.trim()); };
+  });
+}
 function modeSheet(s) {
   openSheet(`<h2>Permisos</h2><div class="list">${Object.entries(MODES).map(([k, m]) => `<button class="card" type="button" data-m="${k}" style="${k === s.mode ? 'border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)' : ''}"><b>${m.label}</b><div class="muted small" style="margin-top:4px">${esc(modeHelp(s.agent, k))}</div></button>`).join('')}</div><p class="muted small">El canvi s’aplica a partir del pròxim missatge.</p>`, (sh) => {
     $$('[data-m]', sh).forEach((b) => (b.onclick = async () => {
@@ -742,7 +774,7 @@ async function gitSheet(id) {
 function sessionOptions(id) {
   const s = state.sessions.get(id); if (!s) return;
   openSheet(`<h2>${esc(s.title || 'Sessió')}</h2>
-    <dl class="kv"><dt>Agent</dt><dd>${esc(AGENT_NAMES[s.agent] || s.agent)}</dd><dt>Carpeta</dt><dd class="mono">${esc(s.cwd)}</dd><dt>Permisos</dt><dd>${esc(MODES[s.mode]?.label || '')}</dd><dt>Creada</dt><dd>${new Date(s.created).toLocaleString('ca')}</dd></dl>
+    <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>Model</dt><dd class="mono">${esc(s.model || 'per defecte')}</dd><dt>Es gasta de</dt><dd>${esc(COST_FROM[s.agent] || 'El compte de l’agent a l’ordinador')}. nio no fa cap crida pel seu compte.</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>
     <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) => {
@@ -930,7 +962,7 @@ function bindLocal() {
   for (const m of local.messages) feed.appendChild(m.role === 'user' ? el(`<div class="msg-user">${esc(m.content)}</div>`) : el(`<div class="msg-ai">${md(stripThink(m.content))}</div>`));
   feed.scrollTop = feed.scrollHeight;
   const ta = $('#lmsg');
-  ta.addEventListener('input', () => { ta.style.height = 'auto'; ta.style.height = `${Math.min(ta.scrollHeight, 180)}px`; });
+  ta.addEventListener('input', () => autogrow(ta));
   ta.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey && !isTouch) { e.preventDefault(); sendLocal(); } });
   $('#lsend').onclick = () => (local.busy ? stopLocal() : sendLocal());
   setLocalBusy(local.busy);
@@ -964,7 +996,7 @@ async function loadLocal(id) {
 async function sendLocal() {
   const ta = $('#lmsg'), text = ta.value.trim();
   if (!text || local.busy) return;
-  ta.value = ''; ta.style.height = 'auto';
+  ta.value = ''; autogrow(ta);
   const feed = $('#lfeed'); if (!local.messages.length) feed.innerHTML = '';
   local.messages.push({ role: 'user', content: text });
   feed.appendChild(el(`<div class="msg-user">${esc(text)}</div>`));
@@ -990,7 +1022,15 @@ async function sendLocal() {
 document.addEventListener('click', async (e) => {
   const a = e.target.closest('[data-act], [data-copy], [data-decide], [data-machine], [data-lm]');
   if (!a) return;
-  if (a.dataset.copy) { try { await navigator.clipboard.writeText(a.dataset.copy); toast('Copiat'); } catch { toast(a.dataset.copy); } return; }
+  if (a.dataset.copy) {
+    try { await navigator.clipboard.writeText(a.dataset.copy); } catch { return toast(a.dataset.copy); }
+    if (a.dataset.copied) return;
+    // El botó mostra una marca animada i «Copiat» un moment.
+    const html = a.innerHTML; a.dataset.copied = '1'; a.classList.add('copied');
+    a.innerHTML = `${svg(ICON.check)}${/\S/.test(a.textContent) ? 'Copiat' : ''}`;
+    setTimeout(() => { a.innerHTML = html; a.classList.remove('copied'); delete a.dataset.copied; }, 1700);
+    return;
+  }
   if (a.dataset.decide) return decide(a.closest('[data-approval]'), a.dataset.decide);
   if (a.dataset.machine != null) { closeSheet(); store.active = Number(a.dataset.machine); state.ollama = null; state.sessions.clear(); state.approvals.clear(); state.events.clear(); state.loaded.clear(); state.connected = false; state.info = null; connect(); return render(); }
   if (a.dataset.lm) { if (local.loading) return; LS.set('nio.localModel', a.dataset.lm); return render(); }
@@ -1002,6 +1042,7 @@ document.addEventListener('click', async (e) => {
     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 'retry': return connect();
+    case 'model': { const s = state.sessions.get(state.route.id); if (s) modelSheet(s); return; }
     case 'mode': { const s = state.sessions.get(state.route.id); if (s) modeSheet(s); return; }
     case 'session-more': return sessionOptions(state.route.id);
     case 'refresh-agents': try { state.info = await api('/api/info?refresh=1'); render(); toast('Agents actualitzats'); } catch (err) { toast(err.message); } return;

package/web/app/style.css

@@ -419,3 +419,11 @@ dialog.sheet.wiz .sheet-in { padding: 0; gap: 0; flex: 1; min-height: 0; display
 #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; }
+
+/* Enllaços-targeta sense subratllat, camps de text sense barra mínima, animació de «Copiat» */
+a.card, a.card:hover { text-decoration: none; color: inherit; }
+.composer textarea { overflow-y: hidden; }
+.copied { color: var(--moss); }
+.copied .tick { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick .38s var(--ease) forwards; }
+@keyframes tick { to { stroke-dashoffset: 0; } }
+@media (prefers-reduced-motion: reduce) { .copied .tick { animation: none; stroke-dashoffset: 0; } }