nio-cat 0.1.1 → 0.2.0

package/bin/nio.js

@@ -55,6 +55,31 @@ function lanIps() {
     .map((i) => i.address);
 }
 
+function openUrl(target) {
+  try {
+    if (process.platform === 'win32') spawn('cmd', ['/c', 'start', '', target], { stdio: 'ignore', detached: true }).unref();
+    else spawn(process.platform === 'darwin' ? 'open' : 'xdg-open', [target], { stdio: 'ignore', detached: true }).unref();
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// Obre el panell al navegador d'aquest ordinador, ja connectat. En un servidor (SSH, sense pantalla) no ho fa.
+function canOpenBrowser() {
+  if (flags['no-open'] || process.env.CI) return false;
+  if (process.env.SSH_CONNECTION || process.env.SSH_TTY) return false;
+  if (process.platform === 'linux' && !process.env.DISPLAY && !process.env.WAYLAND_DISPLAY) return false;
+  return true;
+}
+
+function openDashboard() {
+  const local = `http://127.0.0.1:${cfg.port}`;
+  const link = pairLink(local, local, cfg.token);
+  if (canOpenBrowser() && openUrl(link)) console.log(`  ${c.dim('Panell:')}   ${local}  ${c.dim('(obert al navegador; --no-open per evitar-ho)')}`);
+  else console.log(`  ${c.dim('Panell:')}   ${link}`);
+}
+
 function showPair(publicUrl) {
   const link = pairLink(flags.app || cfg.app, publicUrl, cfg.token);
   const file = writePairPage(link);
@@ -94,7 +119,7 @@ async function start() {
   const hub = new Hub(cfg);
   let publicUrl = flags.url || null;
   const host = flags.lan ? '0.0.0.0' : '127.0.0.1';
-  const server = createServer({ cfg, hub, getPublicUrl: () => publicUrl });
+  const server = createServer({ cfg, hub, getPublicUrl: () => publicUrl, getApp: () => flags.app || cfg.app });
 
   server.on('error', (e) => {
     if (e.code === 'EADDRINUSE') console.error(c.warn(`\n  El port ${cfg.port} ja el fa servir un altre programa. Tria\'n un altre: nio --port 7718\n`));
@@ -104,6 +129,7 @@ async function start() {
 
   server.listen(cfg.port, host, () => {
     console.log(`  ${c.dim('Local:')}    http://127.0.0.1:${cfg.port}`);
+    openDashboard();
 
     if (flags.lan) {
       const ip = lanIps()[0];
@@ -177,8 +203,13 @@ async function start() {
     --url <adreça>      Una adreça pública teva (Tailscale o similar)
     --no-tunnel         Només des d'aquest ordinador
     --port <n>          Port local (7717 si no dius res)
+    --no-open           No obris el panell al navegador d'aquest ordinador
     --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
+                        Deixa'l sota tmux, pm2 o systemd perquè no s'aturi.
+
   nio doctor            Llista els agents instal·lats
   nio reset-token       Crea una clau nova i desconnecta tots els mòbils
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "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/github.js

@@ -0,0 +1,144 @@
+'use strict';
+// GitHub i git des de l'ordinador: es fa servir el «gh» i el «git» que l'usuari ja té.
+// Cap clau no passa per nio: el token queda on és (gh auth), i res no s'executa amb shell.
+const fs = require('fs');
+const path = require('path');
+const { execFile } = require('child_process');
+const { which } = require('./proc');
+
+function fail(status, message) {
+  const e = new Error(message);
+  e.status = status;
+  return e;
+}
+
+function run(cmd, args, { cwd, timeout = 30000 } = {}) {
+  const bin = which(cmd);
+  if (!bin) return Promise.reject(fail(400, `No trobo «${cmd}» en aquest ordinador`));
+  return new Promise((resolve, reject) => {
+    execFile(
+      bin,
+      args,
+      { cwd, timeout, maxBuffer: 8e6, env: { ...process.env, GIT_TERMINAL_PROMPT: '0', GH_PROMPT_DISABLED: '1', NO_COLOR: '1', GH_NO_UPDATE_NOTIFIER: '1' } },
+      (err, stdout, stderr) => {
+        if (err) {
+          const msg = String(stderr || err.message || '').trim().split('\n').filter(Boolean).slice(-3).join(' ');
+          return reject(fail(400, msg || 'L’ordre ha fallat'));
+        }
+        resolve({ stdout: String(stdout), stderr: String(stderr) });
+      }
+    );
+  });
+}
+
+const OWNER = /^(?![.-])[\w.-]{1,60}$/;
+const REPO = /^(?![.-])[\w.-]{1,60}\/(?![.-])[\w.-]{1,100}$/;
+const BRANCH = /^(?!-)[\w./-]{1,80}$/;
+
+async function status() {
+  if (!which('gh')) return { available: false, authed: false };
+  try {
+    await run('gh', ['auth', 'status'], { timeout: 10000 });
+  } catch {
+    return { available: true, authed: false };
+  }
+  let user = '';
+  try {
+    user = (await run('gh', ['api', 'user', '--jq', '.login'], { timeout: 10000 })).stdout.trim();
+  } catch {
+    /* sense nom */
+  }
+  return { available: true, authed: true, user };
+}
+
+async function repos(owner) {
+  const args = ['repo', 'list'];
+  if (owner) {
+    if (!OWNER.test(owner)) throw fail(400, 'Aquest propietari no és vàlid');
+    args.push(owner);
+  }
+  args.push('--limit', '100', '--json', 'nameWithOwner,description,isPrivate,isFork,updatedAt');
+  const { stdout } = await run('gh', args, { timeout: 30000 });
+  let list = [];
+  try {
+    list = JSON.parse(stdout);
+  } catch {
+    /* buit */
+  }
+  return list.map((r) => ({
+    repo: r.nameWithOwner,
+    description: String(r.description || '').slice(0, 160),
+    private: !!r.isPrivate,
+    fork: !!r.isFork,
+    updated: r.updatedAt,
+  }));
+}
+
+async function clone(cfg, repo) {
+  repo = String(repo || '').trim();
+  if (!REPO.test(repo)) throw fail(400, 'Aquest repositori no és vàlid');
+  const base = cfg.roots[0];
+  if (!base) throw fail(400, 'No hi ha cap carpeta compartida on clonar-lo');
+  const target = path.join(base, repo.split('/')[1]);
+  if (!target.startsWith(base + path.sep)) throw fail(400, 'Aquest nom de carpeta no és vàlid');
+  if (fs.existsSync(target)) {
+    if (fs.existsSync(path.join(target, '.git'))) return { path: target, existed: true };
+    throw fail(409, `Ja hi ha una carpeta «${path.basename(target)}» que no és git`);
+  }
+  await run('gh', ['repo', 'clone', repo, target], { timeout: 600000 });
+  return { path: target, existed: false };
+}
+
+async function gitInfo(cwd) {
+  try {
+    await run('git', ['rev-parse', '--is-inside-work-tree'], { cwd, timeout: 10000 });
+  } catch {
+    return { repo: false };
+  }
+  const out = async (args) => {
+    try {
+      return (await run('git', args, { cwd, timeout: 15000 })).stdout.trim();
+    } catch {
+      return '';
+    }
+  };
+  const branch = (await out(['rev-parse', '--abbrev-ref', 'HEAD'])) || 'HEAD';
+  const raw = await out(['status', '--porcelain=v1']);
+  const files = raw ? raw.split('\n').slice(0, 200).map((l) => ({ status: l.slice(0, 2).trim() || '?', path: l.slice(3) })) : [];
+  const stat = await out(['diff', '--shortstat', 'HEAD']);
+  const remote = (await out(['remote'])).split('\n').filter(Boolean)[0] || '';
+  const ahead = remote ? Number(await out(['rev-list', '--count', '@{u}..HEAD'])) || 0 : 0;
+  const gh = await status();
+  return { repo: true, branch, files, stat, remote, ahead, defaultBranch: branch === 'main' || branch === 'master', gh };
+}
+
+async function commit(cwd, { message, branch }) {
+  message = String(message || '').trim().slice(0, 500);
+  if (!message) throw fail(400, 'Escriu un missatge per al commit');
+  if (branch) {
+    branch = String(branch).trim();
+    if (!BRANCH.test(branch)) throw fail(400, 'Aquest nom de branca no és vàlid');
+    await run('git', ['checkout', '-b', branch], { cwd });
+  }
+  await run('git', ['add', '-A'], { cwd });
+  const r = await run('git', ['commit', '-m', message], { cwd, timeout: 60000 });
+  return { ok: true, summary: r.stdout.trim().split('\n')[0] || 'Fet' };
+}
+
+async function pr(cwd, { title, body }) {
+  const info = await gitInfo(cwd);
+  if (!info.repo) throw fail(400, 'Aquesta carpeta no és un repositori git');
+  if (info.defaultBranch) throw fail(400, 'Ets a la branca principal. Fes el commit en una branca nova per poder crear el PR.');
+  if (!info.remote) throw fail(400, 'Aquest repositori no té cap remot (origin)');
+  if (!info.gh.authed) throw fail(400, 'Cal iniciar sessió a GitHub amb «gh auth login»');
+  await run('git', ['push', '-u', info.remote, 'HEAD'], { cwd, timeout: 120000 });
+  title = String(title || '').trim().slice(0, 200);
+  const args = ['pr', 'create'];
+  if (title) args.push('--title', title, '--body', String(body || '').slice(0, 5000));
+  else args.push('--fill');
+  const r = await run('gh', args, { cwd, timeout: 60000 });
+  const url = (r.stdout.match(/https:\/\/github\.com\/\S+/) || [])[0] || '';
+  return { ok: true, url };
+}
+
+module.exports = { status, repos, clone, gitInfo, commit, pr };

package/src/pair.js

@@ -40,6 +40,10 @@ function terminalQr(text, { color = !process.env.NO_COLOR } = {}) {
   return lines.join('\n');
 }
 
+function qrSvg(text) {
+  return qr(text).createSvgTag({ cellSize: 6, margin: 4, scalable: true });
+}
+
 function writePairPage(link) {
   const q = qr(link);
   const svg = q.createSvgTag({ cellSize: 6, margin: 4, scalable: true });
@@ -58,4 +62,4 @@ code{display:block;word-break:break-all;font:12px/1.5 ui-monospace,Menlo,monospa
   return file;
 }
 
-module.exports = { pairLink, terminalQr, writePairPage };
+module.exports = { pairLink, terminalQr, writePairPage, qrSvg };

package/src/server.js

@@ -9,6 +9,8 @@ const { detectAll } = require('./agents');
 const ollama = require('./agents/ollama');
 const { save } = require('./config');
 const { httpErr } = require('./hub');
+const github = require('./github');
+const { pairLink, qrSvg } = 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, '..', '..')];
@@ -114,7 +116,7 @@ function insideRoots(cfg, p) {
 // Noms de model d'Ollama: «qwen3:4b», «hf.co/usuari/model:Q4_K_M»…
 const MODEL_NAME = /^[\w][\w.\-/]{0,100}(:[\w.\-]{1,60})?$/;
 
-function createServer({ cfg, hub, getPublicUrl }) {
+function createServer({ cfg, hub, getPublicUrl, getApp }) {
   const streams = new Set();
   const pulls = new Map(); // descàrregues de models d'Ollama en curs
 
@@ -201,6 +203,21 @@ function createServer({ cfg, hub, getPublicUrl }) {
       return { ok: true };
     }
 
+    if (p === '/api/pair' && method === 'GET') {
+      // Enllaç i QR per connectar un altre dispositiu (el mòbil) amb aquest ordinador.
+      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) };
+    }
+    if (p === '/api/github' && method === 'GET') return github.status();
+    if (p === '/api/github/repos' && method === 'GET') return github.repos(url.searchParams.get('owner') || '');
+    if (p === '/api/github/clone' && method === 'POST') {
+      const b = await readBody(req);
+      const r = await github.clone(cfg, b.repo);
+      return r;
+    }
+
     if (p === '/api/sessions' && method === 'GET') return hub.list();
     if (p === '/api/sessions' && method === 'POST') {
       const b = await readBody(req);
@@ -225,6 +242,14 @@ function createServer({ cfg, hub, getPublicUrl }) {
         return { ok: true };
       }
     }
+    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));
+    }
     if ((r = m(/^\/api\/sessions\/([\w-]+)\/message$/)) && method === 'POST') {
       const b = await readBody(req);
       return hub.send(r[1], b.text, hookUrl());

package/web/app/app.js

@@ -22,6 +22,7 @@ const ICON = {
   models: '<path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M4 7.5l8 4.5 8-4.5M12 12v9"/>',
   trash: '<path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/>',
   download: '<path d="M12 4v11M7 10l5 5 5-5M5 20h14"/>',
+  chev: '<path d="m6 9 6 6 6-6"/>',
   plus: '<path d="M12 5v14M5 12h14"/>', send: '<path d="M12 19V5M5 12l7-7 7 7"/>',
   stop: '<rect x="7" y="7" width="10" height="10" rx="1.5" fill="currentColor" stroke="none"/>',
   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"/>',
@@ -29,7 +30,7 @@ const ICON = {
   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"/>',
   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: 'Al mòbil' };
+const AGENT_NAMES = { claude: 'Claude Code', codex: 'Codex', grok: 'Grok', antigravity: 'Antigravity', ollama: 'Ollama', demo: 'Demo', browser: 'Xat local' };
 const MODES = {
   llegir: { label: 'Només llegir', short: 'Llegir' },
   preguntar: { label: 'Demana permís', short: 'Permís' },
@@ -178,8 +179,7 @@ const demo = (() => {
       { 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' },
-      { id: 'ollama', name: 'Ollama', available: true, noModes: true, version: 'simulat', login: 'ollama serve' }
+      { id: 'antigravity', name: 'Antigravity', available: false, beta: true, login: 'Instal·la nio al teu ordinador' }
     ] });
   async function request(method, path, body) {
     await sleep(60);
@@ -194,7 +194,10 @@ const demo = (() => {
       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/ollama') return { available: true, host: 'simulat', models: omodels, running: [], pulling: [...opulls.values()].map(({ t, ...r }) => r) };
+    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 };
@@ -362,7 +365,7 @@ const VIEWS = {
   approvals: { label: 'Aprovacions', icon: ICON.approvals, group: 'Feina' },
   models: { label: 'Models', icon: ICON.models, group: 'Ordinador' },
   maquina: { label: 'Ordinador', icon: ICON.machine, group: 'Ordinador' },
-  mobil: { label: 'Al mòbil', icon: ICON.phone, group: 'Eines' },
+  mobil: { label: 'Xat local', icon: ICON.phone, group: 'Eines' },
   pissarra: { label: 'Pissarra', icon: ICON.board, group: 'Eines' }
 };
 const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', mobil: '#/mobil', models: '#/models', maquina: '#/ordinador', pissarra: '#/pissarra' };
@@ -390,7 +393,9 @@ function renderChrome() {
     return `${head}<a href="${HASH[k]}" style="--i:${i}" title="${v.label}" ${k === active ? 'aria-current="page"' : ''}>${svg(v.icon)}<span class="l">${v.label}</span>${k === 'approvals' && n ? `<span class="badge">${n}</span>` : ''}</a>`;
   }).join('');
   const m = machine();
-  $('#sideConn').innerHTML = m ? `<i class="dot ${state.connected ? 'on' : ''}"></i><span>${esc(state.connected ? m.name : state.lastError ? 'Sense connexió' : 'Connectant…')}</span>` : '<i class="dot"></i><span>Cap ordinador connectat</span>';
+  const many = store.machines.length > 1, sc = $('#sideConn');
+  sc.innerHTML = m ? `<i class="dot ${state.connected ? 'on' : ''}"></i><span>${esc(state.connected ? m.name : state.lastError ? 'Sense connexió' : 'Connectant…')}</span>${many ? svg(ICON.chev) : ''}` : '<i class="dot"></i><span>Cap ordinador connectat</span>';
+  sc.classList.toggle('switch', many); many ? (sc.setAttribute('role', 'button'), sc.tabIndex = 0, sc.dataset.act = 'machines', sc.title = 'Canvia d’ordinador') : (sc.removeAttribute('role'), sc.removeAttribute('tabindex'), delete sc.dataset.act, sc.removeAttribute('title'));
   const s = r.name === 'session' ? state.sessions.get(r.id) : null;
   $('#here').textContent = s ? s.title || 'Sessió nova' : VIEWS[r.name]?.label || '';
   $('#mRight').innerHTML = r.name === 'session'
@@ -423,7 +428,7 @@ function render() {
 
 /* ---------- Connecta */
 function viewConnect(compact = false) {
-  const CMD = 'npx https://www.nio.cat/nio.tgz';
+  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>
@@ -443,7 +448,7 @@ function viewConnect(compact = false) {
     <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 un model al mòbil</a></aside>
+      <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>
   </section>`;
 }
@@ -457,7 +462,10 @@ function stateChip(s) {
 }
 function viewSessions() {
   const list = [...state.sessions.values()].sort((a, b) => b.updated - a.updated);
-  const head = `<div class="top"><div><h1>Sessions</h1><p>Cada sessió és una conversa amb un agent, dins d’una carpeta.</p></div><button class="btn ink" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button></div>`;
+  const many = store.machines.length > 1, mach = machine();
+  const switcher = many ? `<button class="chip switch-chip" type="button" data-act="machines"><i class="dot ${state.connected ? 'on' : ''}"></i>${esc(mach.name)}${svg(ICON.chev)}</button>` : '';
+  const hint = mobileHint();
+  const head = `<div class="top"><div><h1>Sessions</h1><p>Cada sessió és una conversa amb un agent, dins d’una carpeta.</p>${switcher}</div><button class="btn ink" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button></div>${hint}`;
   if (!state.connected && !list.length) {
     return `${head}<div class="panel empty">${bot(state.lastError ? 'sleep' : 'work')}<h2>${esc(state.lastError || 'Connectant amb l’ordinador…')}</h2>${state.lastError ? `<p>Comprova que nio continua engegat a l’ordinador i que el túnel està obert.</p><button class="btn" data-act="retry" type="button">${svg(ICON.refresh)}Torna-ho a provar</button>` : ''}</div>`;
   }
@@ -659,14 +667,14 @@ function modeHelp(agentId, mode) {
 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 || [];
+  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="section-title" style="margin:0">Carpeta</div><div class="proj-list" id="projPick"></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>
@@ -692,7 +700,33 @@ async function newSessionSheet(preset = {}) {
         $('#modelIn', sh).value = sel.model; $('#modelIn', sh).oninput = (e) => (sel.model = e.target.value.trim());
       }
     };
+    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 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>`; }
+    };
+    $('#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); }
+    };
     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(); }
@@ -718,11 +752,81 @@ 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 '';
+  return `<div class="panel hint"><div class="row between" style="flex-wrap:wrap;gap:12px"><div><b>Vols fer-lo servir al mòbil?</b><p class="muted small" style="margin-top:2px">Escaneja un codi i continues des del telèfon, amb les mateixes sessions.</p></div><div class="row"><button class="btn ghost" type="button" data-act="mobile-hint-off">Ara no</button><button class="btn ink" type="button" data-act="mobile-qr">Mostra el QR</button></div></div></div>`;
+}
+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('')}
+    <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() {
+  const 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>`;
+  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>`);
+}
+let qrTimer = 0;
+function mobileQrSheet() {
+  clearTimeout(qrTimer);
+  const paint = async (n = 0) => {
+    const box = $('#qrBox'); if (!box) return;
+    let r; try { r = await api('/api/pair'); } catch (e) { box.innerHTML = `<p class="muted small">${esc(e.message)}</p>`; return; }
+    if (!$('#qrBox')) return;
+    if (!r.link) {
+      box.innerHTML = `<p class="muted small">Encara no hi ha cap adreça per al mòbil.${n < 8 ? ' Estic esperant el túnel…' : ''}</p><p class="muted small">Engega nio amb <span class="mono">--lan</span> (mateixa wifi) o instal·la <span class="mono">cloudflared</span> per connectar-t’hi des de qualsevol lloc.</p>`;
+      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>`;
+  };
+  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();
+}
+
+/* ---------- Git i GitHub d'una sessió */
+async function gitSheet(id) {
+  const s = state.sessions.get(id); if (!s) return;
+  openSheet(`<h2>Git i GitHub</h2><p class="muted small" id="gitBody">Mirant els canvis…</p>`);
+  const load = async () => {
+    let g; try { g = await api(`/api/sessions/${id}/git`); } catch (e) { $('#sheetIn').querySelector('#gitBody, #gitWrap').outerHTML = `<p class="muted small" id="gitBody">${esc(e.message)}</p>`; return; }
+    const sh = $('#sheetIn');
+    if (!g.repo) { sh.innerHTML = `<div class="grab"></div><h2>Git i GitHub</h2><p class="muted small">Aquesta carpeta no és un repositori git.</p><div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button></div>`; $('[data-close]', sh).onclick = closeSheet; return; }
+    const stamp = new Date().toISOString().slice(0, 16).replace(/[-:T]/g, '').replace(/^(\d{8})/, '$1-');
+    const files = g.files.slice(0, 12).map((f) => `<div class="row" style="gap:10px"><span class="chip" style="min-width:26px;justify-content:center">${esc(f.status)}</span><span class="mono small" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(f.path)}</span></div>`).join('');
+    const canPr = !g.defaultBranch && g.remote && g.gh?.authed;
+    sh.innerHTML = `<div class="grab"></div><h2>Git i GitHub</h2><div class="stack-lg" id="gitWrap">
+      <dl class="kv"><dt>Branca</dt><dd class="mono">${esc(g.branch)}</dd>${g.remote ? `<dt>Remot</dt><dd class="mono">${esc(g.remote)}${g.ahead ? ` · ${g.ahead} commit${g.ahead > 1 ? 's' : ''} per pujar` : ''}</dd>` : ''}${g.stat ? `<dt>Canvis</dt><dd>${esc(g.stat)}</dd>` : ''}</dl>
+      ${g.files.length ? `<div class="stack"><b>${g.files.length} fitxer${g.files.length > 1 ? 's' : ''} amb canvis</b>${files}${g.files.length > 12 ? `<p class="muted small">I ${g.files.length - 12} més.</p>` : ''}</div>
+      <div class="stack"><label class="f"><span>Missatge del commit</span><input type="text" id="gitMsg" maxlength="200" placeholder="Què has canviat?"></label>
+        ${g.defaultBranch ? `<label class="f"><span>Branca nova (recomanat, ets a ${esc(g.branch)})</span><input type="text" id="gitBranch" value="nio/${stamp}" maxlength="80" autocapitalize="off" spellcheck="false"></label>` : ''}
+        <div class="row"><button class="btn ink" id="gitCommit" type="button">Fes commit</button></div></div>` : '<p class="muted small">No hi ha canvis per desar.</p>'}
+      ${canPr ? `<div class="stack"><b>Pull request</b><label class="f"><span>Títol</span><input type="text" id="prTitle" maxlength="200" placeholder="Si ho deixes buit, es fa servir el dels commits"></label><label class="f"><span>Descripció</span><textarea class="field" id="prBody" rows="3"></textarea></label><div class="row"><button class="btn ink" id="gitPr" type="button">Puja i crea el PR</button></div></div>`
+        : g.defaultBranch ? '<p class="muted small">Per crear un PR, fes primer el commit en una branca nova.</p>' : !g.remote ? '<p class="muted small">Aquest repositori no té cap remot, així que no es pot crear un PR.</p>' : '<p class="muted small">Per crear PR, inicia sessió a l’ordinador amb <span class="mono">gh auth login</span>.</p>'}
+      <div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button></div></div>`;
+    $('[data-close]', sh).onclick = closeSheet;
+    const busy = (b, on, label) => { b.disabled = on; b.textContent = on ? label : b.dataset.l; };
+    const cb = $('#gitCommit', sh);
+    if (cb) { cb.dataset.l = cb.textContent; cb.onclick = async () => { const message = $('#gitMsg', sh).value.trim(); if (!message) return toast('Escriu un missatge per al commit'); busy(cb, true, 'Desant…'); try { const r = await api(`/api/sessions/${id}/git/commit`, { method: 'POST', body: { message, branch: $('#gitBranch', sh)?.value.trim() || undefined } }); toast(r.summary || 'Commit fet'); load(); } catch (e) { toast(e.message, 5000); busy(cb, false); } }; }
+    const pb = $('#gitPr', sh);
+    if (pb) { pb.dataset.l = pb.textContent; pb.onclick = async () => { busy(pb, true, 'Pujant…'); try { const r = await api(`/api/sessions/${id}/git/pr`, { method: 'POST', body: { title: $('#prTitle', sh).value.trim(), body: $('#prBody', sh).value } }); toast('PR creat'); if (r.url) pb.outerHTML = `<a class="btn ink" href="${esc(r.url)}" target="_blank" rel="noopener">Obre el PR</a>`; } catch (e) { toast(e.message, 6000); busy(pb, false); } }; }
+  };
+  load();
+}
+
 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>
     <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>' : ''}
     <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'); };
@@ -741,6 +845,7 @@ 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('')}
         <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>
@@ -835,7 +940,7 @@ 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 (local.engine) out.push({ id: 'local', label: `Al mòbil · ${LOCAL_MODELS.find((x) => x.id === local.model)?.name || local.model}` });
+    if (local.engine) out.push({ id: 'local', label: `Xat local · ${LOCAL_MODELS.find((x) => x.id === local.model)?.name || local.model}` });
     return out;
   },
   async ask(id, messages) {
@@ -844,7 +949,7 @@ window.NioBrains = {
       return (await api('/api/ollama/chat', { method: 'POST', body: { model: id.slice(7), messages, format: 'json' } })).content;
     }
     if (id === 'local') {
-      if (!local.engine) throw new Error('Primer obre un model a «Al mòbil»');
+      if (!local.engine) throw new Error('Primer obre un model a «Xat local»');
       const r = await local.engine.chat.completions.create({ messages, temperature: 0.2 });
       return r.choices[0]?.message?.content || '';
     }
@@ -875,7 +980,7 @@ async function syncServiceWorker() {
   try { (await navigator.serviceWorker.ready).active?.postMessage({ type: 'nio-cfg', url: m.url, token: m.token }); } catch { /* sense service worker */ }
 }
 
-/* ---------------------------------------------------------------- model al mòbil (WebLLM) */
+/* ---------------------------------------------------------------- xat local (WebLLM) */
 const LOCAL_MODELS = [
   { id: 'Qwen3.5-0.8B-q4f16_1-MLC', name: 'Qwen 3.5 · 0,8B', size: '≈ 0,6 GB', note: 'El més lleuger. Respostes curtes i ràpides.' },
   { id: 'Llama-3.2-1B-Instruct-q4f16_1-MLC', name: 'Llama 3.2 · 1B', size: '≈ 0,9 GB', note: 'Petit i equilibrat.' },
@@ -888,7 +993,7 @@ const stripThink = (t) => t.replace(/<think>[\s\S]*?(<\/think>|$)/g, '').trimSta
 function viewLocal() {
   const hasGpu = 'gpu' in navigator, chosen = local.model || LS.get('nio.localModel', LOCAL_MODELS[0].id);
   if (!local.engine) {
-    return `<div class="top"><div><h1>Un model dins del mòbil</h1><p>Per quan no tens l’ordinador a mà. Un cop descarregat, funciona sense connexió i res no surt del dispositiu.</p></div></div>
+    return `<div class="top"><div><h1>Xat local</h1><p>Un model dins d’aquest dispositiu, per quan no tens l’ordinador a mà. Un cop descarregat, funciona sense connexió i res no surt del dispositiu.</p></div></div>
     <div class="stack-lg" style="max-width:640px">
       ${hasGpu ? '' : '<div class="panel"><header><h2>Aquest navegador no té WebGPU</h2></header><div class="body"><p class="muted small">Prova amb Chrome a Android, Safari recent a iPhone o Chrome i Edge a l’ordinador. També pots fer servir Ollama des d’un ordinador connectat.</p></div></div>'}
       <div class="list">${LOCAL_MODELS.map((m) => `<button class="card model-card" type="button" data-lm="${m.id}" aria-pressed="${m.id === chosen}"><div class="row between"><b>${m.name}</b><span class="muted small mono">${m.size}</span></div><div class="muted small" style="margin-top:4px">${m.note}</div></button>`).join('')}</div>
@@ -911,8 +1016,22 @@ function bindLocal() {
   const ta = $('#lmsg');
   ta.addEventListener('input', () => { ta.style.height = 'auto'; ta.style.height = `${Math.min(ta.scrollHeight, 180)}px`; });
   ta.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey && !isTouch) { e.preventDefault(); sendLocal(); } });
-  $('#lsend').onclick = sendLocal;
+  $('#lsend').onclick = () => (local.busy ? stopLocal() : sendLocal());
+  setLocalBusy(local.busy);
 }
+function setLocalBusy(busy) {
+  const b = $('#lsend'); if (!b) return;
+  b.classList.toggle('stop', busy); b.innerHTML = svg(busy ? ICON.stop : ICON.send);
+  b.setAttribute('aria-label', busy ? 'Para' : 'Envia'); b.title = busy ? 'Para la resposta' : 'Envia';
+}
+function stopLocal() { local.stopped = true; try { local.engine?.interruptGenerate(); } catch { /* res */ } }
+const LOCAL_SYSTEM = [
+  'Ets en Nio, un assistent que viu dins del mòbil. Parles català, i canvies a la llengua de l’usuari només si ell escriu en una altra.',
+  'Respon directe, en una a quatre frases curtes. Una idea per frase.',
+  'No repeteixis mai una frase ni una idea que ja hagis dit. Quan hagis contestat, para.',
+  'Si no saps una cosa, digues «no ho sé». No t’inventis dades, noms ni enllaços.',
+  'No facis preguntes seguides ni allargassis la conversa. No facis servir emojis.'
+].join(' ');
 async function loadLocal(id) {
   local.loading = true; local.progress = 0; local.status = 'Preparant…'; render();
   try {
@@ -934,12 +1053,21 @@ async function sendLocal() {
   local.messages.push({ role: 'user', content: text });
   feed.appendChild(el(`<div class="msg-user">${esc(text)}</div>`));
   const out = el('<div class="msg-ai cursor"></div>'); feed.appendChild(out); feed.scrollTop = feed.scrollHeight;
-  local.busy = true; let acc = '';
+  local.busy = true; local.stopped = false; setLocalBusy(true); let acc = '';
   try {
-    const chunks = await local.engine.chat.completions.create({ messages: [{ role: 'system', content: 'Ets un assistent útil i concís. Respon en la llengua de l’usuari.' }, ...local.messages.slice(-12)], stream: true, temperature: 0.6 });
-    for await (const c of chunks) { acc += c.choices[0]?.delta?.content || ''; out.innerHTML = md(stripThink(acc)); if (nearBottom(feed)) feed.scrollTop = feed.scrollHeight; }
-  } catch (e) { acc = acc || `Error: ${e.message}`; out.innerHTML = md(acc); }
-  out.classList.remove('cursor'); local.messages.push({ role: 'assistant', content: acc }); local.busy = false;
+    const chunks = await local.engine.chat.completions.create({
+      messages: [{ role: 'system', content: LOCAL_SYSTEM }, ...local.messages.slice(-8)], stream: true,
+      temperature: 0.7, top_p: 0.8, frequency_penalty: 0.6, presence_penalty: 0.4, repetition_penalty: 1.15, max_tokens: 700,
+      extra_body: { enable_thinking: false }
+    });
+    for await (const c of chunks) {
+      acc += c.choices[0]?.delta?.content || ''; out.innerHTML = md(stripThink(acc)); if (nearBottom(feed)) feed.scrollTop = feed.scrollHeight;
+      if (local.stopped) break;
+    }
+  } catch (e) { if (!local.stopped) acc = acc || `Error: ${e.message}`; out.innerHTML = md(stripThink(acc)); }
+  out.classList.remove('cursor');
+  if (local.stopped) { try { await local.engine.interruptGenerate(); } catch { /* res */ } }
+  local.messages.push({ role: 'assistant', content: stripThink(acc) || '…' }); local.busy = false; local.stopped = false; setLocalBusy(false);
 }
 
 /* ---------------------------------------------------------------- accions */
@@ -948,7 +1076,7 @@ document.addEventListener('click', async (e) => {
   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.decide) return decide(a.closest('[data-approval]'), a.dataset.decide);
-  if (a.dataset.machine != null) { 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.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(); }
   switch (a.dataset.act) {
     case 'new': return newSessionSheet();
@@ -964,7 +1092,11 @@ document.addEventListener('click', async (e) => {
     case 'refresh-agents': try { state.info = await api('/api/info?refresh=1'); render(); toast('Agents actualitzats'); } catch (err) { toast(err.message); } return;
     case 'push': return enablePush();
     case 'push-test': try { const r = await api('/api/push/test', { method: 'POST' }); toast(r.subs ? 'Enviat. Arribarà en uns segons.' : 'Primer activa els avisos'); } catch (err) { toast(err.message); } return;
-    case 'add-machine': return openSheet('<h2>Connecta un altre ordinador</h2>' + viewConnect(true));
+    case 'add-machine': return addMachineSheet();
+    case 'machines': return machinesSheet();
+    case 'mobile-qr': return mobileQrSheet();
+    case 'mobile-hint-off': LS.set('nio.mobHint.off', true); return render();
+    case 'git': return gitSheet(state.route.id);
     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;
@@ -978,6 +1110,7 @@ document.addEventListener('click', async (e) => {
     case 'tour': return tourStart();
   }
 });
+document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t.classList?.contains('switch') && t.dataset.act) { e.preventDefault(); t.click(); } });
 document.addEventListener('submit', (e) => {
   if (e.target.id === 'pullForm') { e.preventDefault(); return pullModel($('#pullIn').value); }
   if (e.target.id !== 'pairForm') return;

package/web/app/style.css

@@ -58,8 +58,10 @@ button { cursor: pointer; }
 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex: none; }
 .dot.on { background: var(--moss); box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss) 18%, transparent); }
 .dot.wait { background: var(--accent); }
-.kbd { display: flex; gap: 8px; align-items: center; overflow: hidden; width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); color: var(--fg-muted); font-size: 13px; text-align: left; }
-.kbd .ico { width: 16px; height: 16px; }
+.kbd { display: flex; gap: 10px; align-items: center; overflow: hidden; width: 100%; padding: 9px 13px; border: 0; border-radius: 10px; background: none; color: var(--fg-muted); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
+.kbd:hover { color: var(--fg); background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
+.kbd .ico { width: 18px; height: 18px; }
+.kbd kbd { border: 0; background: none; padding: 0; font: 500 12px var(--font); letter-spacing: .02em; color: var(--fg-muted); opacity: .7; }
 .kbd .l { flex: 1 0 auto; white-space: nowrap; }
 kbd { font: 600 11px var(--font); padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--fg-muted); }
 .main { min-width: 0; display: flex; flex-direction: column; }
@@ -298,6 +300,8 @@ dialog.sheet[open] { animation: pop .22s var(--ease); }
 
 /* ---------- Pissarra ---------- */
 body.board-mode .page { padding: 0; max-width: none; }
+body.board-mode { overflow: hidden; overscroll-behavior: none; }
+body.board-mode .view-enter { animation: none; }
 
 @media (prefers-reduced-motion: no-preference) {
   .view-enter { animation: view-in .25s var(--ease); }
@@ -364,3 +368,14 @@ body.board-mode .page { padding: 0; max-width: none; }
   .tour-foot .btn { height: 36px; padding: 0 14px; font-size: 13px; }
   .board-root { height: calc(100dvh - 56px - var(--safe-t)) !important; }
 }
+
+/* Ordinadors, QR i git */
+.conn.switch { cursor: pointer; border-radius: 8px; transition: color .2s; }
+.conn.switch:hover { color: var(--fg); }
+.conn.switch .ico { width: 14px; height: 14px; flex: none; }
+.switch-chip { margin-top: 10px; cursor: pointer; }
+.switch-chip .ico { width: 14px; height: 14px; }
+.panel.hint { margin-bottom: 20px; padding: 16px 18px; }
+.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; }

package/web/board.css

@@ -1,7 +1,7 @@
 /* Nio · Pissarra */
-.board-root { position: relative; height: 100vh; height: 100dvh; --bd-bg: var(--bg); --bd-blue: #2b5bd8; }
-.bd { display: flex; height: 100%; min-height: 0; }
-.bd-stage { container: stage / inline-size; position: relative; flex: 1; min-width: 0; overflow: hidden; background-color: var(--bg); background-image: radial-gradient(circle, color-mix(in srgb, var(--fg) 16%, transparent) 1px, transparent 1.3px); user-select: none; -webkit-user-select: none; }
+.board-root { position: relative; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; --bd-bg: var(--bg); --bd-blue: #2b5bd8; --chat-w: 360px; --bd-ease: cubic-bezier(.22,1,.36,1); }
+.bd { container: stage / inline-size; position: relative; display: block; height: 100%; min-height: 0; overflow: hidden; }
+.bd-stage { position: absolute; inset: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; background-color: var(--bg); background-image: radial-gradient(circle, color-mix(in srgb, var(--fg) 16%, transparent) 1px, transparent 1.3px); user-select: none; -webkit-user-select: none; }
 .bd-stage.nogrid { background-image: none; }
 .bd-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
 .bd-stage[data-tool="select"] .bd-svg { cursor: default; }
@@ -28,7 +28,8 @@
 .bd .ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
 .bd-bar { position: absolute; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); background: color-mix(in srgb, var(--white) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--fg) 40%, transparent); }
 .bd-bar .sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--border); }
-.bd-tools { top: 14px; left: 50%; transform: translateX(-50%); }
+.bd-tools { top: 14px; left: 50%; transform: translateX(-50%); transition: transform .34s var(--bd-ease); }
+.chat-open .bd-tools { transform: translateX(calc(-50% - var(--chat-w) / 2)); }
 .bd .tb, .bd .ib { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s, transform .12s; }
 .bd .ib { width: 34px; height: 34px; }
 .bd .tb:hover, .bd .ib:hover { background: color-mix(in srgb, var(--bg-2) 85%, transparent); }
@@ -39,7 +40,8 @@
 .bd .pct { min-width: 54px; height: 34px; border: 0; border-radius: 10px; background: none; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
 .bd .pct:hover { background: color-mix(in srgb, var(--bg-2) 85%, transparent); }
 .bd-zoom { left: 14px; bottom: 14px; }
-.bd-right { top: 14px; right: 14px; }
+.bd-right { top: 14px; right: 14px; transition: transform .34s var(--bd-ease); }
+.chat-open .bd-right { transform: translateX(calc(-1 * var(--chat-w))); }
 .bd .chat-t { width: auto; display: flex; gap: 8px; padding: 0 12px 0 9px; font-size: 13px; font-weight: 600; }
 .bd .chat-t .tbbot { --s: 20px; --bw: .15; }
 .only-m { display: none !important; }
@@ -84,9 +86,8 @@
 .bd-help dl div { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); font-size: 13px; }
 .bd-help dd { flex: 1; }
 
-.bd-chat { position: relative; z-index: 6; display: flex; flex-direction: column; width: 0; min-height: 0; overflow: hidden; border-left: 1px solid transparent; background: var(--panel); transition: width .38s cubic-bezier(.22,1,.36,1), border-color .38s; }
-.chat-open .bd-chat { width: 360px; border-left-color: var(--border); }
-.bd-chat > * { width: 360px; flex: none; }
+.bd-chat { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: var(--chat-w); min-height: 0; overflow: hidden; border-left: 1px solid var(--border); background: var(--panel); transform: translateX(100%); visibility: hidden; transition: transform .34s var(--bd-ease), visibility 0s linear .34s; }
+.chat-open .bd-chat { transform: none; visibility: visible; transition: transform .34s var(--bd-ease), visibility 0s; }
 .bd-chat header { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--border); }
 .bd-chat .who { display: flex; align-items: center; gap: 10px; }
 .bd-chat .hbot { --s: 30px; --bw: .14; }
@@ -114,11 +115,10 @@
 
 @media (prefers-reduced-motion: reduce) { .bd *, .bd *::before { animation: none !important; transition: none !important; } }
 
-@media (max-width: 1100px) { .chat-open .bd-chat, .bd-chat > * { width: 320px; } }
+@media (max-width: 1100px) { .board-root { --chat-w: 320px; } }
 @media (max-width: 820px) {
   .board-root { height: calc(100dvh - 56px - env(safe-area-inset-top)); }
-  .bd { display: block; position: relative; }
-  .bd-stage { position: absolute; inset: 0; }
+  .chat-open .bd-tools, .chat-open .bd-right { transform: none; }
   .bd-tools { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 10px; right: 10px; transform: none; overflow-x: auto; scrollbar-width: none; }
   .bd-tools::-webkit-scrollbar { display: none; }
   .bd .tb { width: 40px; height: 40px; flex: none; }
@@ -132,15 +132,18 @@
   .bd-style { display: none; }
   .style-open .bd-style:not([hidden]) { display: grid; left: 10px; right: 10px; top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; grid-template-columns: 1fr 1fr; }
   .bd-help .cols { grid-template-columns: 1fr; }
-  .bd-chat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; width: auto !important; height: min(72%, 560px); border: 0; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; transform: translateY(105%); transition: transform .42s cubic-bezier(.22,1,.36,1); box-shadow: 0 -20px 50px -30px color-mix(in srgb, var(--fg) 55%, transparent); }
-  .chat-open .bd-chat { transform: none; }
-  .bd-chat > * { width: auto !important; }
+  .bd-chat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; width: auto; height: min(72%, 560px); border: 0; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; transform: translateY(105%); transition: transform .34s var(--bd-ease), visibility 0s linear .34s; box-shadow: 0 -20px 50px -30px color-mix(in srgb, var(--fg) 55%, transparent); }
+  .chat-open .bd-chat { transform: none; transition: transform .34s var(--bd-ease), visibility 0s; }
   .bd-chat header::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--border); }
   .bd-empty { top: 42%; }
 }
 
 /* El llenç s'adapta a la seva amplada real (tauleta, xat obert, mòbil) */
 @container stage (max-width: 720px) {
+  .bd-chat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; width: auto; height: min(72%, 560px); border: 0; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; transform: translateY(105%); transition: transform .34s var(--bd-ease), visibility 0s linear .34s; box-shadow: 0 -20px 50px -30px color-mix(in srgb, var(--fg) 55%, transparent); }
+  .chat-open .bd-chat { transform: none; transition: transform .34s var(--bd-ease), visibility 0s; }
+  .bd-chat header::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--border); }
+  .chat-open .bd-tools, .chat-open .bd-right { transform: none; }
   .bd-tools { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 10px; right: 10px; transform: none; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
   .bd-tools::-webkit-scrollbar { display: none; }
   .bd .tb { flex: none; }

package/web/board.js

@@ -3,7 +3,7 @@
 'use strict';
 const KEY = 'nio.board.v1';
 const NS = 'http://www.w3.org/2000/svg';
-const GAP = 6;
+const GAP = 3;
 const HAND = '"Caveat", "Segoe Print", "Comic Sans MS", cursive';
 const CLEAN = '"Manrope", system-ui, sans-serif';
 const STROKES = [['#272224', 'Negre'], ['#e2382b', 'Vermell'], ['#2f7d4f', 'Verd'], ['#2b5bd8', 'Blau'], ['#e07b1f', 'Taronja'], ['#8a5cf6', 'Lila']];
@@ -86,6 +86,7 @@ function wrap(text, fs, maxW) {
   return out;
 }
 const fsOf = el => SIZES[el.fs] || el.fsPx || SIZES.m;
+const textW = el => Math.max(30, el.type === 'rect' ? el.w - 28 : el.type === 'ellipse' ? el.w * .7 - 8 : el.w * .5 - 6);
 function fitText(el) {
   const fs = fsOf(el), lines = String(el.text || '').split('\n');
   el.w = Math.max(20, ...lines.map(l => measure(l, fs))) + 4;
@@ -100,6 +101,10 @@ function rline(x1, y1, x2, y2, r, amt) {
   const mx = (x1 + x2) / 2 + j() * 1.4, my = (y1 + y2) / 2 + j() * 1.4;
   return `M${f1(x1 + j())} ${f1(y1 + j())}Q${f1(mx)} ${f1(my)} ${f1(x2 + j())} ${f1(y2 + j())}`;
 }
+function rlineX(x1, y1, x2, y2, r, amt) {
+  const len = Math.hypot(x2 - x1, y2 - y1), o = Math.min(amt, len * .03 + .3), j = () => (r() - .5) * 2 * o;
+  return `M${f1(x1)} ${f1(y1)}Q${f1((x1 + x2) / 2 + j() * 1.4)} ${f1((y1 + y2) / 2 + j() * 1.4)} ${f1(x2)} ${f1(y2)}`;
+}
 function smooth(pts, closed) {
   if (pts.length < 2) return '';
   const p = closed ? [pts[pts.length - 1], ...pts, pts[0], pts[1]] : [pts[0], ...pts, pts[pts.length - 1]];
@@ -110,33 +115,43 @@ function smooth(pts, closed) {
   }
   return d;
 }
+function polyPath(pts, r, bow) {
+  let d = `M${f1(pts[0][0])} ${f1(pts[0][1])}`;
+  for (let i = 0; i < pts.length; i++) {
+    const p = pts[i], q = pts[(i + 1) % pts.length], o = Math.min(bow, Math.hypot(q[0] - p[0], q[1] - p[1]) * .02 + .3);
+    d += `Q${f1((p[0] + q[0]) / 2 + (r() - .5) * 2 * o)} ${f1((p[1] + q[1]) / 2 + (r() - .5) * 2 * o)} ${f1(q[0])} ${f1(q[1])}`;
+  }
+  return d + 'Z';
+}
 function shapePaths(el) {
-  const { x, y, w, h } = el, rough = B.opts.rough, r = rng(el.seed), amt = 1.2 + el.sw * .5;
+  const { x, y, w, h } = el, rough = B.opts.rough, r = rng(el.seed), amt = .8 + el.sw * .3, bow = 1 + el.sw * .3;
+  const jit = (pts, k) => pts.map(p => [p[0] + (r() - .5) * 2 * amt * k, p[1] + (r() - .5) * 2 * amt * k]);
   if (el.type === 'rect') {
-    const clean = `M${x + 8} ${y}H${x + w - 8}Q${x + w} ${y} ${x + w} ${y + 8}V${y + h - 8}Q${x + w} ${y + h} ${x + w - 8} ${y + h}H${x + 8}Q${x} ${y + h} ${x} ${y + h - 8}V${y + 8}Q${x} ${y} ${x + 8} ${y}Z`;
-    if (!rough) return { fill: clean, stroke: [clean] };
-    const pass = () => [rline(x, y, x + w, y, r, amt), rline(x + w, y, x + w, y + h, r, amt), rline(x + w, y + h, x, y + h, r, amt), rline(x, y + h, x, y, r, amt)].join('');
-    return { fill: clean, stroke: [pass(), pass()] };
+    const c = Math.min(8, w / 2, h / 2);
+    if (!rough) {
+      const clean = `M${x + c} ${y}H${x + w - c}Q${x + w} ${y} ${x + w} ${y + c}V${y + h - c}Q${x + w} ${y + h} ${x + w - c} ${y + h}H${x + c}Q${x} ${y + h} ${x} ${y + h - c}V${y + c}Q${x} ${y} ${x + c} ${y}Z`;
+      return { fill: clean, stroke: [clean] };
+    }
+    const pts = [[x, y], [x + w, y], [x + w, y + h], [x, y + h]], p0 = polyPath(jit(pts, .5), r, bow);
+    return { fill: p0, stroke: [p0, polyPath(jit(pts, 1.4), r, bow)] };
   }
   if (el.type === 'diamond') {
-    const t = [x + w / 2, y], ri = [x + w, y + h / 2], b = [x + w / 2, y + h], l = [x, y + h / 2];
-    const clean = `M${t[0]} ${t[1]}L${ri[0]} ${ri[1]}L${b[0]} ${b[1]}L${l[0]} ${l[1]}Z`;
+    const pts = [[x + w / 2, y], [x + w, y + h / 2], [x + w / 2, y + h], [x, y + h / 2]];
+    const clean = `M${pts.map(p => p.join(' ')).join('L')}Z`;
     if (!rough) return { fill: clean, stroke: [clean] };
-    const pass = () => [rline(...t, ...ri, r, amt), rline(...ri, ...b, r, amt), rline(...b, ...l, r, amt), rline(...l, ...t, r, amt)].join('');
-    return { fill: clean, stroke: [pass(), pass()] };
+    const p0 = polyPath(jit(pts, .5), r, bow);
+    return { fill: p0, stroke: [p0, polyPath(jit(pts, 1.4), r, bow)] };
   }
   const cx = x + w / 2, cy = y + h / 2, rx = Math.max(1, w / 2), ry = Math.max(1, h / 2);
   const clean = `M${cx - rx} ${cy}a${rx} ${ry} 0 1 0 ${rx * 2} 0a${rx} ${ry} 0 1 0 ${-rx * 2} 0Z`;
   if (!rough) return { fill: clean, stroke: [clean] };
-  const pass = k => {
-    const n = 22, a0 = r() * Math.PI * 2, pts = [];
-    for (let i = 0; i <= n; i++) {
-      const a = a0 + (i / n) * Math.PI * 2 * (1.04 + k * .02), q = 1 + (r() - .5) * .035;
-      pts.push([cx + Math.cos(a) * rx * q, cy + Math.sin(a) * ry * q]);
-    }
-    return smooth(pts, false);
+  const ring = k => {
+    const n = 28, pts = [];
+    for (let i = 0; i < n; i++) { const a = (i / n) * Math.PI * 2, q = 1 + (r() - .5) * .02 * k; pts.push([cx + Math.cos(a) * rx * q, cy + Math.sin(a) * ry * q]); }
+    return smooth(pts, true) + 'Z';
   };
-  return { fill: clean, stroke: [pass(0), pass(1)] };
+  const p0 = ring(1);
+  return { fill: p0, stroke: [p0, ring(2.4)] };
 }
 
 /* ---------- Geometria ---------- */
@@ -194,16 +209,16 @@ function elSVG(el, exp) {
     const p = shapePaths(el);
     if (el.fill && el.fill !== 'none') s += `<path d="${p.fill}" fill="${el.fill}"/>`;
     s += p.stroke.map((d, i) => `<path d="${d}" ${st}${i ? ' opacity=".7"' : ''}/>`).join('');
-    if (el.text) s += labelSVG(el.text, el.x + el.w / 2, el.y + el.h / 2, fsOf(el), el.stroke, Math.max(30, (el.type === 'rect' ? el.w : el.w * .72) - 16));
+    if (el.text) s += labelSVG(el.text, el.x + el.w / 2, el.y + el.h / 2, fsOf(el), el.stroke, textW(el));
     if (!exp) s += `<path class="hit" d="${p.fill}"/>`;
   } else if (isLinear(el)) {
     const [a, b] = ends(el), r = rng(el.seed), amt = 1 + el.sw * .4;
-    const body = B.opts.rough ? rline(a[0], a[1], b[0], b[1], r, amt) + rline(a[0], a[1], b[0], b[1], r, amt * .7) : `M${f1(a[0])} ${f1(a[1])}L${f1(b[0])} ${f1(b[1])}`;
+    const body = B.opts.rough ? rlineX(a[0], a[1], b[0], b[1], r, amt) + rlineX(a[0], a[1], b[0], b[1], r, amt * .7) : `M${f1(a[0])} ${f1(a[1])}L${f1(b[0])} ${f1(b[1])}`;
     let head = '';
     if (el.type === 'arrow') {
       const ang = Math.atan2(b[1] - a[1], b[0] - a[0]), L = Math.min(16 + el.sw * 2, Math.hypot(b[0] - a[0], b[1] - a[1]) * .5);
       const h1 = [b[0] - L * Math.cos(ang - .45), b[1] - L * Math.sin(ang - .45)], h2 = [b[0] - L * Math.cos(ang + .45), b[1] - L * Math.sin(ang + .45)];
-      head = B.opts.rough ? rline(h1[0], h1[1], b[0], b[1], r, 1) + rline(h2[0], h2[1], b[0], b[1], r, 1) : `M${f1(h1[0])} ${f1(h1[1])}L${f1(b[0])} ${f1(b[1])}L${f1(h2[0])} ${f1(h2[1])}`;
+      head = `M${f1(h1[0])} ${f1(h1[1])}L${f1(b[0])} ${f1(b[1])}L${f1(h2[0])} ${f1(h2[1])}`;
     }
     s += `<path d="${body}" ${st}/>`;
     if (head) s += `<path d="${head}" fill="none" stroke="${el.stroke}" stroke-width="${el.sw}" stroke-linecap="round" stroke-linejoin="round"/>`;
@@ -341,7 +356,7 @@ function placeEditor() {
   if (el.type === 'text') { x = el.x; y = el.y; w = Math.max(el.w, 120); ta.style.textAlign = 'left'; }
   else {
     const b = isLinear(el) ? (() => { const [a, c] = ends(el); return { x: (a[0] + c[0]) / 2 - 110, y: (a[1] + c[1]) / 2, w: 220, h: 0 }; })() : bbox(el);
-    w = isLinear(el) ? 220 : Math.max(60, (el.type === 'rect' ? el.w : el.w * .72) - 16);
+    w = isLinear(el) ? 220 : Math.max(60, textW(el));
     x = b.x + (b.w - w) / 2; y = b.y + b.h / 2; ta.style.textAlign = 'center';
   }
   ta.style.width = w * z + 'px';
@@ -358,6 +373,7 @@ function endEdit() {
   if (el.text !== v) { if (!el._new) record(); el.text = v; }
   delete el._new;
   if (el.type === 'text') { if (!v) { B.els = B.els.filter(e => e !== el); sel.delete(el.id); } else fitText(el); }
+  else growToFit(el);
   full(); save();
 }
 
@@ -569,7 +585,7 @@ function paste() {
 }
 function setStyle(k, v) {
   B.style[k] = v;
-  if (sel.size) { record(); sel.forEach(id => { const el = byId(id); if (!el) return; if (k === 'fill' && !isShape(el)) return; el[k] = v; if (k === 'fs') { el.fsPx = null; if (el.type === 'text') fitText(el); } }); full(); }
+  if (sel.size) { record(); sel.forEach(id => { const el = byId(id); if (!el) return; if (k === 'fill' && !isShape(el)) return; el[k] = v; if (k === 'fs') { el.fsPx = null; if (el.type === 'text') fitText(el); else growToFit(el); } }); full(); }
   save(); panel();
 }
 function order(dir) {
@@ -608,13 +624,19 @@ function importJSON(file) {
 }
 
 /* ---------- Diagrames ---------- */
-function nodeSize(label, type) {
-  const fs = SIZES[B.style.fs] || 24, lines = wrap(label, fs, 240);
-  const tw = Math.max(...lines.map(l => measure(l, fs)), 40);
-  let w = Math.max(150, tw + 44), h = Math.max(72, lines.length * fs * 1.25 + 32);
-  if (type === 'diamond') { w = Math.max(190, tw * 1.5 + 40); h = Math.max(120, h * 1.5); }
-  if (type === 'ellipse') { w = Math.max(150, tw * 1.25 + 40); h = Math.max(76, h * 1.1); }
-  return [w, h];
+function nodeSize(label, type, fsKey) {
+  const fs = SIZES[fsKey || B.style.fs] || 24, lines = wrap(label, fs, type === 'diamond' ? 150 : type === 'ellipse' ? 200 : 240);
+  const tw = Math.max(...lines.map(l => measure(l, fs)), 40), th = lines.length * fs * 1.25;
+  if (type === 'rect') return [Math.max(150, Math.ceil(tw + 56)), Math.max(72, Math.ceil(th + 40))];
+  if (type === 'ellipse') return [Math.max(160, Math.ceil((tw + 8) / .7 + 8)), Math.max(80, Math.ceil(th * 1.5 + 24))];
+  return [Math.max(190, Math.ceil((tw + 6) / .5 + 8)), Math.max(120, Math.ceil(th * 2 + 32))];
+}
+// Fa créixer la figura (des del centre) si el text no hi cap.
+function growToFit(el) {
+  if (!isShape(el) || !el.text) return;
+  const [w, h] = nodeSize(el.text, el.type, el.fs), [cx, cy] = center(el);
+  const nw = Math.max(el.w, w), nh = Math.max(el.h, h);
+  if (nw !== el.w || nh !== el.h) { el.w = nw; el.h = nh; el.x = cx - nw / 2; el.y = cy - nh / 2; }
 }
 function guessType(label) {
   const n = norm(label);
@@ -631,7 +653,7 @@ function findEl(q) {
 }
 function addNode(label, type, x, y, extra = {}) {
   type = type || guessType(label);
-  const [w, h] = nodeSize(label, type);
+  const [w, h] = nodeSize(label, type, B.style.fs);
   const el = mk(type, Object.assign({ x: x - w / 2, y: y - h / 2, w, h, text: label.trim() }, extra));
   if (type === 'diamond' && el.fill === 'none') el.fill = '#fbf1bf';
   B.els.push(el); return el;
@@ -1000,9 +1022,12 @@ function onKeyUp(e) { if (e.key === ' ') { spaceDown = false; R && R.stage.class
 function openChat(open, focus = true, persist = true) {
   if (persist) { B.opts.chat = open; save(); }
   if (!R) return;
+  const wasOpen = R.root.classList.contains('chat-open');
   R.root.classList.toggle('chat-open', open);
-  R.root.querySelector('[data-bd=chat]').setAttribute('aria-pressed', open);
-  if (open && focus) setTimeout(() => R.input.focus(), 60);
+  R.chat.inert = !open;
+  const t = R.root.querySelector('[data-bd=chat]'); t.setAttribute('aria-pressed', open);
+  if (open && focus) setTimeout(() => R.input.focus(), reduce ? 0 : 280);
+  if (!open && wasOpen && R.chat.contains(document.activeElement)) t.focus({ preventScroll: true });
 }
 
 /* ---------- Muntatge ---------- */
@@ -1128,7 +1153,7 @@ function mount(root) {
   R = { root, stage: root.querySelector('#bdStage'), svg: root.querySelector('#bdSvg'), world: root.querySelector('#bdWorld'), els: root.querySelector('#bdEls'), sel: root.querySelector('#bdSel'),
     editor: root.querySelector('#bdEdit'), empty: root.querySelector('#bdEmpty'), tools: root.querySelector('#bdTools'), style: root.querySelector('#bdStyle'),
     zoomPct: root.querySelector('#bdPct'), help: root.querySelector('#bdHelp'), msgs: root.querySelector('#bdMsgs'), input: root.querySelector('#bdInput'),
-    chatBot: root.querySelector('.bd-chat .hbot') };
+    chatBot: root.querySelector('.bd-chat .hbot'), chat: root.querySelector('#bdChat') };
   nodes.clear();
   const first = !B.els.length && B.view.x === 0 && B.view.y === 0;
   if (first) { const r = R.svg.getBoundingClientRect(); B.view = { x: r.width / 2, y: r.height / 2, z: 1 }; }
@@ -1138,7 +1163,7 @@ function mount(root) {
   on(root, 'click', onClick);
   on(R.editor, 'input', placeEditor); on(R.editor, 'blur', () => setTimeout(endEdit, 0));
   on(R.root.querySelector('#bdForm'), 'submit', e => { e.preventDefault(); send(); });
-  on(R.input, 'keydown', e => { if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); send(); } if (e.key === 'Escape') R.input.blur(); });
+  on(R.input, 'keydown', e => { if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); send(); } if (e.key === 'Escape') { e.stopPropagation(); openChat(false); } });
   on(R.input, 'input', () => { R.input.style.height = ''; R.input.style.height = Math.min(140, R.input.scrollHeight) + 'px'; });
   on(R.root.querySelector('#bdBrain'), 'change', (e) => { B.opts.brain = e.target.value; save(); say(B.opts.brain === 'rules' ? 'Faig servir les ordres ràpides. Escriu <b>ajuda</b> per veure-les.' : `Ara t’entendré amb <b>${esc(e.target.selectedOptions[0].textContent)}</b>. Demana’m el diagrama com vulguis.`); });
   on(R.root.querySelector('#bdBrain'), 'focus', drawBrains);

package/web/index.html

@@ -108,7 +108,7 @@ main strong { font-weight: 600; }
   <section aria-labelledby="com">
     <h2 id="com">Com funciona</h2>
     <p>Obre el terminal a la carpeta dels teus projectes i executa:</p>
-    <div class="cmd"><code id="cmd">npx https://www.nio.cat/nio.tgz</code><button class="copy" type="button" data-copy="npx https://www.nio.cat/nio.tgz" aria-label="Copia l’ordre"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><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"/></svg><svg class="ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></button></div>
+    <div class="cmd"><code id="cmd">npx nio-cat</code><button class="copy" type="button" data-copy="npx nio-cat" aria-label="Copia l’ordre"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><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"/></svg><svg class="ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></button></div>
     <p>Escaneja el codi QR que apareix i ja estàs connectat. A casa, per la wifi; amb <code>cloudflared</code>, des de qualsevol lloc. Només cal tenir <a href="https://nodejs.org">Node.js</a>, i cap dada no passa per servidors nostres.</p>
   </section>