nio-cat 0.8.1 → 0.8.2

package/package.json

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

package/src/hub.js

@@ -116,7 +116,7 @@ class Hub extends EventEmitter {
     const last = s.events[s.events.length - 1];
     if (last && last.kind === 'text' && last.open) {
       last.text += text;
-      this.emit('out', { type: 'event', session: s.id, event: last });
+      this.emit('out', { type: 'delta', session: s.id, seq: last.seq, text });
       s.updated = Date.now();
       this.persist(s);
       return;

package/src/server.js

@@ -452,6 +452,7 @@ function createServer({ cfg, hub, auth, audit, getPublicUrl, getApp, routes = []
           'x-accel-buffering': 'no',
           connection: 'keep-alive',
         });
+        req.socket?.setNoDelay(true);
         res.write(`data: ${JSON.stringify({ type: 'hello', sessions: hub.list(), approvals: hub.pendingApprovals() })}\n\n`);
         const dev = String(url.searchParams.get('d') || '').slice(0, 40), kind = url.searchParams.get('k') === 'phone' ? 'phone' : 'desktop';
         if (dev && kind === 'phone' && Date.now() - (seenDevices.get(dev) || 0) > 10 * 60 * 1000) {

package/web/app/app.js

@@ -326,6 +326,11 @@ function handle(msg) {
       if (evs) { const was = evs.get(msg.event.seq); evs.set(msg.event.seq, msg.event); if (r.name === 'session' && r.id === msg.session) { putEvent(msg.event); if (msg.event.kind === 'text' && !msg.event.open && (!was || was.open)) autoSpeak(msg.event); } }
       break;
     }
+    case 'delta': {
+      const e = state.events.get(msg.session)?.get(msg.seq);
+      if (e) { e.text += msg.text; if (r.name === 'session' && r.id === msg.session) streamText(msg.session, e); }
+      break;
+    }
     case 'ollama': onOllama(msg); break;
     case 'job': onJob(msg); break;
     case 'screen': onScreen(msg); break;
@@ -430,22 +435,21 @@ const VIEWS = {
   sessions: { label: 'Sessions', icon: ICON.sessions, group: 'Feina' },
   approvals: { label: 'Aprovacions', icon: ICON.approvals, group: 'Feina' },
   feines: { label: 'Feines', icon: ICON.jobs, group: 'Feina' },
-  activitat: { label: 'Activitat', icon: ICON.activity, group: 'Feina' },
   memoria: { label: 'Memòria', icon: ICON.memory, group: 'Ordinadors' },
-  pantalla: { label: 'Pantalla', icon: ICON.screen, group: 'Ordinadors' },
   ordinadors: { label: 'Ordinadors', icon: ICON.machine, group: 'Ordinadors' },
-  models: { label: 'Models', icon: ICON.models, group: 'Ordinadors' },
   mobil: { label: 'Xat local', icon: ICON.phone, group: 'Eines' },
   pissarra: { label: 'Pissarra', icon: ICON.board, group: 'Eines' },
+  activitat: { label: 'Activitat', icon: ICON.activity, group: 'Compte' },
   ajustos: { label: 'Ajustos', icon: ICON.settings, group: 'Compte' },
   ajuda: { label: 'Ajuda', icon: ICON.help, group: 'Compte' }
 };
-const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', feines: '#/feines', activitat: '#/activitat', memoria: '#/memoria', pantalla: '#/pantalla', ordinadors: '#/ordinadors', models: '#/models', mobil: '#/xat-local', pissarra: '#/pissarra', ajustos: '#/ajustos', ajuda: '#/ajuda' };
-const NEEDS_MACHINE = new Set(['sessions', 'approvals', 'feines', 'activitat', 'memoria', 'pantalla', 'models', 'session']);
+const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', feines: '#/feines', activitat: '#/activitat', memoria: '#/memoria', ordinadors: '#/ordinadors', mobil: '#/xat-local', pissarra: '#/pissarra', ajustos: '#/ajustos', ajuda: '#/ajuda' };
+const NEEDS_MACHINE = new Set(['sessions', 'approvals', 'feines', 'activitat', 'memoria', 'session']);
 function parseRoute() {
   const h = location.hash.replace(/^#\/?/, '');
   if (h.startsWith('s/')) return { name: 'session', id: h.slice(2) };
-  if (h === 'ordinador') return { name: 'ordinadors' }; // adreces antigues
+  if (h === 'ordinador' || h === 'pantalla') return { name: 'ordinadors' }; // adreces antigues
+  if (h === 'models') return { name: 'mobil' };
   if (h === 'mobil') return { name: 'mobil' };
   const k = Object.keys(HASH).find((k) => HASH[k] === '#/' + h);
   return { name: k || 'sessions' };
@@ -455,6 +459,8 @@ let lastName = null;
 function route() {
   if (checkPairHash()) return;
   state.route = parseRoute();
+  const canon = state.route.name === 'session' ? null : HASH[state.route.name];
+  if (canon && location.hash && location.hash !== canon && /^#\/(pantalla|models|ordinador)$/.test(location.hash)) history.replaceState(null, '', canon);
   // Sense cap ordinador, tot porta al mateix lloc: la pàgina Ordinadors.
   if (!machine() && NEEDS_MACHINE.has(state.route.name)) { history.replaceState(null, '', '#/ordinadors'); state.route = { name: 'ordinadors' }; }
   if (state.route.name === 'session') openSession(state.route.id); else render();
@@ -473,7 +479,7 @@ function renderChrome() {
   const m = machine(), sc = $('#sideConn');
   sc.innerHTML = m ? `<i class="dot ${state.connected ? 'on' : ''}"></i><span>${esc(m.name)}</span>${svg(ICON.chev)}` : `<i class="dot"></i><span>Afegeix un ordinador</span>${svg(ICON.plus)}`;
   sc.setAttribute('role', 'button'); sc.tabIndex = 0; sc.classList.add('switch'); sc.dataset.act = 'machines'; sc.title = 'Ordinadors';
-  const more = ['mobil', 'pissarra', 'ajustos', 'ajuda'].includes(r.name);
+  const more = ['mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].includes(r.name);
   $('#tabbar').innerHTML = [['sessions', ICON.sessions, 'Sessions', active === 'sessions'], ['approvals', ICON.approvals, 'Aprovacions', active === 'approvals'], ['ordinadors', ICON.machine, 'Ordinadors', active === 'ordinadors']]
     .map(([k, ic, l, on]) => `<a href="${HASH[k]}" ${on ? 'aria-current="page"' : ''}>${svg(ic)}<span>${l}</span>${k === 'approvals' && n ? `<b class="badge">${n}</b>` : ''}</a>`).join('')
     + `<button type="button" data-act="more" ${more ? 'aria-current="page"' : ''}>${svg(ICON.more)}<span>Més</span></button>`;
@@ -500,12 +506,12 @@ function render() {
   else if (board) { view.innerHTML = '<div class="page"><div class="board-root" id="boardRoot"></div></div>'; window.NioBoard?.mount($('#boardRoot')); brainsForBoard(); }
   else {
     const html = r.name === 'mobil' ? viewLocal() : null;
-    view.innerHTML = html && local.engine ? html : `<div class="page">${html ? html : r.name === 'ordinadors' ? viewComputers() : r.name === 'sessions' ? viewSessions() : r.name === 'approvals' ? viewApprovals() : r.name === 'activitat' ? viewActivity() : r.name === 'feines' ? viewJobs() : r.name === 'memoria' ? viewMemory() : r.name === 'pantalla' ? viewScreen() : r.name === 'ajustos' ? viewSettings() : r.name === 'ajuda' ? viewHelp() : viewModels()}</div>`;
+    view.innerHTML = html && local.engine ? html : `<div class="page">${html ? html : r.name === 'ordinadors' ? viewComputers() : r.name === 'sessions' ? viewSessions() : r.name === 'approvals' ? viewApprovals() : r.name === 'activitat' ? viewActivity() : r.name === 'feines' ? viewJobs() : r.name === 'memoria' ? viewMemory() : r.name === 'ajuda' ? viewHelp() : viewSettings()}</div>`;
     if (r.name === 'mobil') bindLocal();
-    if (r.name === 'models' && machine()) loadOllama();
+    if (r.name === 'mobil' && machine() && !local.engine) loadOllama();
     if (r.name === 'activitat' && machine()) { activity = null; loadActivity(); }
     if (r.name === 'memoria' && machine()) loadMemory();
-    if (r.name === 'pantalla' && machine()) loadScreen();
+    if (r.name === 'ordinadors' && machine() && state.connected) loadScreen();
     if (r.name === 'feines' && machine()) loadJobs();
     hydrateShots();
   }
@@ -600,7 +606,7 @@ function viewComputers() {
   </div>` : '';
   if (detail && info?.device) loadDevices();
   if (ms.length > 1) probeAll();
-  return `${head}<div class="computers">${ms.map(computerCard).join('')}</div>${detail}`;
+  return `${head}<div class="computers">${ms.map(computerCard).join('')}</div>${detail}${detail ? screenSection() : ''}`;
 }
 
 /* ---------- Afegir un ordinador: aquest, un servidor per SSH o un codi */
@@ -735,7 +741,7 @@ function renameSheet(i) {
 }
 function moreSheet() {
   const item = (k) => `<a class="card row" href="${HASH[k]}" style="gap:12px">${svg(VIEWS[k].icon)}<b>${VIEWS[k].label}</b></a>`;
-  openSheet(`<h2>Més</h2><div class="list">${['mobil', 'pissarra', 'ajustos', 'ajuda'].map(item).join('')}</div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
+  openSheet(`<h2>Més</h2><div class="list">${['mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].map(item).join('')}</div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
 }
 
 /* ---------- Sessions */
@@ -841,16 +847,16 @@ async function loadActivity() {
 let mem = null;
 function viewMemory() {
   return `<div class="top"><div><h1>Memòria</h1><p>El que recorden els teus agents en aquest ordinador. Claude Code i Codex la llegeixen i hi escriuen (servidor MCP de nio). Són fitxers markdown a <span class="mono">~/.nio/memory</span>.</p></div><button class="btn ink" data-act="mem-new" type="button">${svg(ICON.plus)}Fitxer nou</button></div>
-    <form class="row mem-search" id="memSearch" style="flex-wrap:nowrap"><input type="search" id="memQ" placeholder="Busca a la memòria…" aria-label="Busca a la memòria"><button class="btn" type="submit">Busca</button></form>
+    <form class="mem-search" id="memSearch" role="search"><input type="search" id="memQ" placeholder="Busca a la memòria…" aria-label="Busca a la memòria" autocomplete="off"><button class="btn ink" type="submit">Busca</button></form>
     <div id="memBody">${memHtml()}</div>`;
 }
 function memHtml() {
   if (!mem) return `<div class="panel empty">${bot('work')}<h2>Carregant…</h2></div>`;
   if (mem.error) return `<div class="panel empty">${bot('sleep')}<h2>${esc(mem.error)}</h2><p>Cal nio 0.6 o més nou en aquest ordinador.</p></div>`;
-  if (mem.hits) return `<div class="list">${mem.hits.length ? mem.hits.map((h) => `<button class="card" type="button" data-mem="${esc(h.path)}"><b class="mono small">${esc(h.path)}:${h.line}</b><div class="muted small">${esc(h.text)}</div></button>`).join('') : '<p class="muted">Cap resultat.</p>'}<button class="btn ghost" data-act="mem-all" type="button">Mostra tots els fitxers</button></div>`;
+  if (mem.hits) return `<div class="list mem-list">${mem.hits.length ? mem.hits.map((h) => `<button class="card" type="button" data-mem="${esc(h.path)}"><b class="mono small">${esc(h.path)}:${h.line}</b><div class="muted small">${esc(h.text)}</div></button>`).join('') : '<p class="muted">Cap resultat.</p>'}<button class="btn ghost" data-act="mem-all" type="button">Mostra tots els fitxers</button></div>`;
   const groups = {};
   for (const f of mem.files) (groups[f.path.includes('/') ? f.path.split('/')[0] : ''] ||= []).push(f);
-  return Object.entries(groups).map(([g, fs]) => `${g ? `<div class="section-title">${esc(g)}</div>` : ''}<div class="list">${fs.map((f) => `<button class="card row" type="button" data-mem="${esc(f.path)}" style="flex-wrap:nowrap"><span class="grow"><b>${esc(f.path.split('/').pop().replace(/\.md$/, ''))}</b><div class="muted small">${ago(f.updated)} · ${bytes(f.size)}</div></span></button>`).join('')}</div>`).join('') || '<p class="muted">La memòria és buida.</p>';
+  return Object.entries(groups).map(([g, fs]) => `${g ? `<div class="section-title">${esc(g)}</div>` : ''}<div class="list mem-list">${fs.map((f) => `<button class="card row" type="button" data-mem="${esc(f.path)}"><span class="grow"><b>${esc(f.path.split('/').pop().replace(/\.md$/, ''))}</b><div class="muted small">${ago(f.updated)} · ${bytes(f.size)}</div></span></button>`).join('')}</div>`).join('') || '<p class="muted">La memòria és buida.</p>';
 }
 async function loadMemory() {
   try { mem = await api('/api/memory'); } catch (e) { mem = { error: e.message }; }
@@ -1041,7 +1047,7 @@ function renderSession() {
     <div class="feed" id="feed" aria-live="polite"></div>
     <div class="composer" id="composer"></div>
   </section>`;
-  feedEls = new Map(); toolEls = new Map();
+  feedEls = new Map(); toolEls = new Map(); typers.clear();
   renderSessionHead();
   const feed = $('#feed'), evs = state.events.get(id);
   if (!evs) feed.innerHTML = machine() ? '<div class="skel-feed" aria-busy="true"><i class="skel r" style="width:46%"></i><i class="skel" style="width:88%;height:64px"></i><i class="skel" style="width:70%;height:40px"></i></div>' : `<div class="ev-info">${ 'Connecta un ordinador per veure aquesta sessió.'}</div>`;
@@ -1077,8 +1083,50 @@ function autogrow(ta, max = 180) {
 const scroller = (f) => (f && /(auto|scroll)/.test(getComputedStyle(f).overflowY) ? f : document.scrollingElement);
 const nearBottom = (f) => { const s = scroller(f), h = s === document.scrollingElement ? innerHeight : s.clientHeight; return s.scrollHeight - s.scrollTop - h < 140; };
 const toBottom = (f) => { const s = scroller(f); s.scrollTop = s.scrollHeight; };
+// El text de l'agent surt paraula per paraula, tal com arriba, sense refer tota la bombolla a cada tros.
+const typers = new Map();
+function wordsAfter(text, i, n) {
+  for (; n > 0 && i < text.length; n--) { while (i < text.length && /\s/.test(text[i])) i++; while (i < text.length && !/\s/.test(text[i])) i++; }
+  return i;
+}
+function streamText(sid, e) {
+  const feed = $('#feed'); if (!feed) return;
+  let t = typers.get(e.seq);
+  if (!t) {
+    const node = eventNode({ ...e, text: '' }); if (!node) return;
+    const typing = $('.typing', feed); typing ? feed.insertBefore(node, typing) : feed.appendChild(node);
+    feedEls.get(e.seq)?.remove(); feedEls.set(e.seq, node);
+    t = { sid, seq: e.seq, node, shown: Math.max(0, e.text.length - 40), last: 0, raf: 0 };
+    typers.set(e.seq, t);
+  }
+  if (!t.raf) t.raf = requestAnimationFrame(typeTick(t));
+  renderTyping();
+}
+const typeTick = (t) => function tick(now) {
+  t.raf = 0;
+  const e = state.events.get(t.sid)?.get(t.seq), feed = $('#feed');
+  if (!e || !feed || !feed.contains(t.node)) { typers.delete(t.seq); return; }
+  if (now - t.last >= 28) {
+    t.last = now;
+    const backlog = e.text.length - t.shown;
+    if (backlog > 0) {
+      const stick = nearBottom(feed);
+      t.shown = wordsAfter(e.text, t.shown, 1 + Math.floor(backlog / 80));
+      t.node.innerHTML = md(e.text.slice(0, t.shown));
+      if (stick) feed.scrollTop = feed.scrollHeight;
+    }
+  }
+  if (!e.open && t.shown >= e.text.length) {
+    typers.delete(t.seq);
+    const node = eventNode(e); t.node.replaceWith(node); feedEls.set(e.seq, node);
+    renderTyping(); if (nearBottom(feed)) feed.scrollTop = feed.scrollHeight;
+    return;
+  }
+  t.raf = requestAnimationFrame(tick);
+};
 function putEvent(e, scroll = true) {
   const feed = $('#feed'); if (!feed) return;
+  if (e.kind === 'text' && scroll && (e.open || typers.has(e.seq))) return streamText(state.route.id, e);
   const stick = nearBottom(feed);
   if (e.kind === 'tool_result') {
     const t = toolEls.get(e.id);
@@ -1288,7 +1336,6 @@ function focusMain() {
   const r = state.route.name;
   if (r === 'session') $('#msg')?.focus({ preventScroll: true });
   else if (r === 'mobil' && local.engine) $('#lmsg')?.focus({ preventScroll: true });
-  else if (r === 'models') $('#pullIn')?.focus({ preventScroll: true });
 }
 $('#sheet').addEventListener('click', (e) => { if (e.target.id === 'sheet') closeSheet(); });
 $('#sheet').addEventListener('close', () => setTimeout(focusMain, 0));
@@ -1540,8 +1587,9 @@ async function loadOllama(force) {
   catch (e) { state.ollama = { available: false, models: [], running: [], pulling: [], error: e.message }; }
   paintModels();
 }
-function viewModels() {
-  return `<div class="top"><div><h1>Models</h1><p>Models d’Ollama que funcionen al teu ordinador, sense internet i sense comptes.</p></div><button class="btn" data-act="ollama-refresh" type="button">${svg(ICON.refresh)}Actualitza</button></div><div id="modelsBody">${state.ollama ? '' : `<div class="panel empty">${bot('work')}<h2>Consultant Ollama…</h2></div>`}</div>`;
+function ollamaSection() {
+  if (!machine()) return `<div class="sec-head"><div><h2 class="sec">Ollama a l’ordinador</h2><p class="muted small">Els models d’Ollama són més grans i capaços, però només funcionen en un ordinador. Connecta’n un per veure’ls i descarregar-ne.</p></div><a class="btn" href="#/ordinadors">Ordinadors</a></div>`;
+  return `<div class="sec-head"><div><h2 class="sec">Ollama a l’ordinador</h2><p class="muted small">Models que funcionen a ${esc(machine().name)}, sense internet i sense comptes. Els fas servir des de Sessions.</p></div><button class="btn" data-act="ollama-refresh" type="button">${svg(ICON.refresh)}Actualitza</button></div><div id="modelsBody">${state.ollama ? '' : `<div class="panel empty">${bot('work')}<h2>Consultant Ollama…</h2></div>`}</div>`;
 }
 function pctOf(j) { return j.total ? Math.min(100, Math.round((j.completed / j.total) * 100)) : 0; }
 function paintModels() {
@@ -1596,14 +1644,14 @@ function onOllama(msg) {
     state.ollama.pulling = list.filter((x) => x.name !== msg.name);
     toast(msg.error ? `${msg.name}: ${msg.error}` : `${msg.name} ja està llest`, 4200);
     if (!msg.error) api('/api/info?refresh=1').then((i) => (state.info = i)).catch(() => {});
-    if (state.route.name === 'models') loadOllama(true);
+    if (state.route.name === 'mobil') loadOllama(true);
     return;
   }
   if (!j) { j = { name: msg.name }; list.push(j); }
   Object.assign(j, { status: msg.status, completed: msg.completed, total: msg.total });
   const row = $(`[data-pull="${CSS.escape(msg.name)}"]`);
   if (row) { $('.progress > i', row).style.width = pctOf(j) + '%'; $('[data-st]', row).textContent = `${j.status}${j.total ? ` · ${bytes(j.completed)} de ${bytes(j.total)}` : ''}`; }
-  else if (state.route.name === 'models') paintModels();
+  else if (state.route.name === 'mobil') paintModels();
 }
 
 /* ---------- Models per a la pissarra */
@@ -1670,12 +1718,13 @@ 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>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>
+    <h2 class="sec" style="margin-top:0">En aquest dispositiu</h2>
     <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>
-      <a class="card" href="#/models"><b>Tens Ollama a l’ordinador?</b><div class="muted small" style="margin-top:4px">Els models d’Ollama són més grans i capaços. Funcionen a l’ordinador i els fas servir des d’aquí.</div></a>
       ${local.loading ? `<div class="stack"><div class="progress"><i style="width:${Math.round(local.progress * 100)}%"></i></div><p class="muted small mono" id="lmStatus">${esc(local.status)}</p></div>` : `<div class="stack"><button class="btn ink block" data-act="lm-load" type="button" ${hasGpu ? '' : 'disabled'}>Descarrega i obre el model</button><p class="muted small">La primera vegada es descarrega i queda desat al navegador.</p></div>`}
-    </div>`;
+    </div>
+    ${ollamaSection()}`;
   }
   const info = LOCAL_MODELS.find((m) => m.id === local.model);
   return `<section class="chat">
@@ -1774,9 +1823,8 @@ async function panicNow() {
   if (!confirm('S’aturaran tots els agents d’aquest ordinador, es rebutjaran les peticions pendents i es tancarà el navegador.')) return;
   try { const r = await api('/api/panic', { method: 'POST' }); toast(`Aturat tot (${r.stopped} agents)`); } catch (e) { toast(e.message, 4500); }
 }
-function viewScreen() {
-  const head = `<div class="top"><div><h1>Pantalla</h1><p>Els agents poden fer servir el navegador (agent-browser) i les apps de l’escriptori (agent-desktop). Mirar passa sol; clicar, escriure o enviar sempre et demana permís, amb una captura.</p></div><button class="btn ink" data-act="screen-now" type="button" ${controlOn() ? '' : 'disabled'}>${svg(ICON.screen)}Veure pantalla ara</button></div>`;
-  return `${head}<div id="screenBody">${screenHtml()}</div>`;
+function screenSection() {
+  return `<div class="sec-head" id="screenSec"><div><h2 class="sec">Pantalla</h2><p class="muted small">Els agents poden fer servir el navegador (agent-browser) i les apps de l’escriptori (agent-desktop). Mirar passa sol; clicar, escriure o enviar sempre et demana permís, amb una captura.</p></div><button class="btn" data-act="screen-now" type="button" ${controlOn() ? '' : 'disabled'}>${svg(ICON.screen)}Veure pantalla ara</button></div><div id="screenBody">${screenHtml()}</div>`;
 }
 function screenHtml() {
   if (!screen) return `<div class="panel empty">${bot('work')}<h2>Carregant…</h2></div>`;
@@ -1786,13 +1834,11 @@ function screenHtml() {
     const st = !x.installed ? `No instal·lat · <span class="mono">${hint}</span>` : x.ready === false ? esc(x.why || 'No està a punt') : x.enabled ? 'Activat' : 'Desactivat';
     return `<div class="agent-row"><i class="dot ${x.enabled ? 'on' : ''}"></i><span class="grow"><b>${name}</b><div class="muted small">${st}</div></span>${x.installed ? `<button class="btn sm ${x.enabled ? '' : 'ink'}" data-ctl="${k}" data-on="${!x.enabled}" type="button">${x.enabled ? 'Desactiva' : 'Activa'}</button>` : ''}</div>`;
   };
-  return `<div class="grid2">
+  return `<div class="grid2 one">
     <div class="stack">
+      <section class="panel"><header><h2>En aquest ordinador</h2></header><div class="body">${row('navegador', 'Navegador web', 'npm i -g agent-browser && agent-browser install')}${row('escriptori', 'Apps de l’escriptori', 'npm i -g agent-desktop')}<p class="muted small" style="margin-top:10px">En activar-ho, nio dona a Claude Code i a Codex les guies oficials. Desactivat per defecte. Claude Code demana permís per a cada acció; Codex no pot preguntar, així que només segueix les normes de la guia.</p></div></section>
       <section class="panel"><header><h2>Última captura</h2>${screen.last ? `<span class="muted small">${ago(screen.last.t)} · ${esc(screen.last.from)}</span>` : ''}</header><div class="body">${screen.last ? `<img class="screen-img" alt="Captura de la pantalla de l’ordinador" data-shot="${esc(screen.last.id)}">` : '<p class="muted small">Encara no n’hi ha cap. Prem «Veure pantalla ara».</p>'}</div></section>
       <section class="panel"><header><h2>Accions fetes</h2></header><div class="body">${screen.actions.length ? screen.actions.map((a) => `<div class="act-row"><span class="act-t mono">${new Date(a.t).toLocaleTimeString('ca', { hour: '2-digit', minute: '2-digit' })}</span><div class="grow"><div class="mono small act-what">${esc(a.what)}</div><div class="muted small">${esc(a.title || '')}</div></div></div>`).join('') : '<p class="muted small">Cap encara.</p>'}</div></section>
-    </div>
-    <div class="stack">
-      <section class="panel"><header><h2>En aquest ordinador</h2></header><div class="body">${row('navegador', 'Navegador web', 'npm i -g agent-browser && agent-browser install')}${row('escriptori', 'Apps de l’escriptori', 'npm i -g agent-desktop')}<p class="muted small" style="margin-top:10px">En activar-ho, nio dona a Claude Code i a Codex les guies oficials. Desactivat per defecte. Claude Code demana permís per a cada acció; Codex no pot preguntar, així que només segueix les normes de la guia.</p></div></section>
       <section class="panel"><header><h2>Aturada d’emergència</h2></header><div class="body stack"><p class="small">Atura tots els agents, rebutja el que estigui pendent i tanca el navegador.</p><button class="btn danger" data-act="panic" type="button">${svg(ICON.panic)}Atura-ho tot</button></div></section>
       <section class="panel"><header><h2>Vols fer-ho tu?</h2></header><div class="body"><p class="muted small">nio no és un escriptori remot. Si necessites controlar la pantalla tu mateix, fes servir <a href="https://rustdesk.com" target="_blank" rel="noopener">RustDesk</a> o <a href="https://remotedesktop.google.com" target="_blank" rel="noopener">Chrome Remote Desktop</a>.</p></div></section>
     </div>
@@ -1807,7 +1853,7 @@ async function loadScreen() {
   renderPanic();
 }
 function syncScreenBtn() { const b = $('[data-act=screen-now]'); if (b) b.disabled = !controlOn(); }
-function onScreen(msg) { if (screen && !screen.error) { screen.last = msg.shot; if (state.route.name === 'pantalla') { const box = $('#screenBody'); box.innerHTML = screenHtml(); hydrateShots(box); } } }
+function onScreen(msg) { if (screen && !screen.error) { screen.last = msg.shot; { const box = $('#screenBody'); if (box) box.innerHTML = screenHtml(); hydrateShots(box); } } }
 document.addEventListener('click', async (e) => {
   const b = e.target.closest('[data-ctl]'); if (!b) return;
   b.disabled = true;
@@ -2033,7 +2079,7 @@ document.addEventListener('submit', (e) => {
 /* ---------------------------------------------------------------- paleta d'ordres */
 let palSel = 0;
 function commands() {
-  const c = Object.entries(VIEWS).filter(([k]) => !(k === 'models' && mq.matches)).map(([k, v]) => ({ label: `Ves a ${v.label}`, hint: 'Navega', run: () => go(HASH[k]) }));
+  const c = Object.entries(VIEWS).map(([k, v]) => ({ label: `Ves a ${v.label}`, hint: 'Navega', run: () => go(HASH[k]) }));
   if (machine()) c.push({ label: 'Nova sessió', hint: 'Crea', run: newSessionSheet });
   c.push({ label: 'Afegeix un ordinador', hint: 'Crea', run: () => addComputerSheet() });
   [...state.sessions.values()].slice(0, 20).forEach((s) => c.push({ label: s.title || 'Sessió nova', hint: AGENT_NAMES[s.agent] || s.agent, run: () => go(`#/s/${s.id}`) }));
@@ -2095,8 +2141,7 @@ const TSTEPS = [
   { route: 'ordinadors', skipIf: () => !machine(), target: '.card.computer.active .c-actions', m: '.card.computer.active .c-actions', title: '2. Continua al mòbil', text: 'A la targeta de l’ordinador prem «Continua al mòbil»: surt un QR i un codi. Al mòbil, obre www.nio.cat/app, Ordinadors, i escaneja el QR o enganxa el codi.' },
   { route: 'sessions', skipIf: () => !machine(), target: '.top [data-act=new]', m: '.top [data-act=new]', title: '3. Dona feina a un agent', text: 'Una sessió és una conversa amb un agent dins d’una carpeta. Tries l’agent, la carpeta (qualsevol de l’ordinador), els permisos i li expliques què ha de fer.' },
   { route: 'approvals', skipIf: () => !machine(), target: '.side nav a[href="#/aprovacions"]', m: '#tabbar a[href="#/aprovacions"]', title: '4. Tu decideixes', text: 'En mode «Demana permís», abans d’editar un fitxer o executar una ordre, l’agent t’ho pregunta aquí. Si actives els avisos, t’arriba al mòbil.' },
-  { route: 'models', skipIf: () => !machine() || mq.matches, target: '.side nav a[href="#/models"]', m: '#tabbar [data-act=more]', title: 'Models al teu ordinador', text: 'Si tens Ollama, aquí descarregues models i veus quins tens. Res no surt de casa i no gasta res.' },
-  { route: 'mobil', target: '.side nav a[href="#/xat-local"]', m: '.page .model-card', title: 'Un model sense internet', text: 'Si no tens l’ordinador a mà, pots fer servir un model petit que funciona dins del mateix mòbil.' },
+  { route: 'mobil', target: '.side nav a[href="#/xat-local"]', m: '.page .model-card', title: 'Models sense internet', text: 'Si no tens l’ordinador a mà, pots fer servir un model petit que funciona dins del mateix mòbil. Si tens Ollama a l’ordinador, aquí hi descarregues models més grans.' },
   { route: 'pissarra', target: '.side nav a[href="#/pissarra"]', m: '#bdTools', title: 'Pensa en dibuix', text: 'A la pissarra pots fer diagrames a mà alçada o demanar-me’ls escrivint, amb Ollama o amb el model del mòbil.' },
   { route: 'ajuda', target: '#help', m: '#help', title: 'Si alguna cosa no va', text: 'A «Ajuda» tens cada pas explicat, què cal al servidor i què mirar si no connecta.' },
   { target: '[data-act=palette]', m: '#tabbar [data-act=more]', title: () => (mq.matches ? 'Més coses' : 'Un últim truc'), text: () => (mq.matches ? 'A «Més» tens el xat local, la pissarra, els ajustos i l’ajuda, amb aquest tutorial.' : 'Prem ⌘K (o Ctrl+K) per anar a qualsevol lloc o obrir una sessió sense tocar el ratolí.') },

package/web/app/style.css

@@ -109,7 +109,7 @@ kbd { font: 600 11px var(--font); padding: 1px 6px; border: 1px solid var(--bord
 .icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--fg); }
 .icon-btn:hover { background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
 .icon-btn .badge { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; font-size: 10px; }
-input[type="text"], input[type="password"], input[type="url"], input[type="search"], select, textarea.field { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); outline: none; }
+input[type="text"], input[type="password"], input[type="url"], input[type="search"], select, textarea.field { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); color: var(--fg); outline: none; }
 textarea.field { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.45; }
 input:focus, select:focus, textarea:focus { border-color: var(--fg); }
 select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369615c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; }
@@ -630,3 +630,18 @@ dialog.sheet.wiz.compact .sheet-in, .compact .wiz-body { flex: 0 1 auto; }
 .panic { position: fixed; z-index: 35; right: 16px; top: calc(66px + var(--safe-t)); display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: 600 13px var(--font); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--red) 80%, transparent); }
 .panic .ico { width: 17px; height: 17px; }
 @media (min-width: 821px) { .panic { top: 16px; right: 20px; } }
+
+/* Memòria */
+.mem-search { display: flex; gap: 10px; align-items: stretch; margin: 0 0 24px; }
+.mem-search input { flex: 1; height: 46px; color: var(--fg); }
+.mem-search input::placeholder { color: var(--fg-muted); opacity: 1; }
+.mem-search .btn { height: 46px; padding: 0 22px; flex: none; }
+.mem-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
+.mem-list .card { color: var(--fg); }
+.mem-list .card b { color: var(--fg); }
+.section-title + .mem-list { margin-bottom: 8px; }
+
+/* Capçalera d'una secció dins d'una pàgina */
+.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 36px 0 14px; }
+.sec-head .sec { margin: 0; }
+.sec-head p { margin-top: 4px; max-width: 640px; }

package/web/sw.js

@@ -1,5 +1,5 @@
 // nio · service worker: obre l'app encara que no hi hagi connexió i mostra els avisos.
-const SHELL = 'nio-shell-v21';
+const SHELL = 'nio-shell-v22';
 const FILES = ['/app', '/app/style.css', '/app/app.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
 
 self.addEventListener('install', (e) => {