nio-cat 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.9.1",
+  "version": "0.9.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/agents/generic.js

@@ -15,6 +15,32 @@ function pickText(ev) {
   return null;
 }
 
+// Grok Build parla el protocol ACP: {method:'session/update', params:{update:{sessionUpdate, content:{text}}}}.
+function handleAcp(ctx, ev, state) {
+  const u = ev.params?.update || ev.update;
+  if (u && typeof u.sessionUpdate === 'string') {
+    const kind = u.sessionUpdate;
+    if (kind === 'agent_message_chunk') {
+      const t = typeof u.content === 'string' ? u.content : u.content?.text;
+      if (t) { state.sawText = true; ctx.stream(t); }
+    } else if (kind === 'tool_call') {
+      const id = String(u.toolCallId || `tool-${state.n++}`);
+      state.tools = state.tools || new Set(); state.tools.add(id);
+      ctx.tool({ id, name: u.title || u.kind || 'tool', input: u.rawInput || u.locations || {} });
+    } else if (kind === 'tool_call_update' && /completed|failed/i.test(u.status || '')) {
+      const out = Array.isArray(u.content) ? u.content.map((c) => c?.content?.text || c?.text || '').join('\n') : '';
+      ctx.toolResult({ id: String(u.toolCallId), output: String(u.rawOutput ?? out ?? ''), error: /failed/i.test(u.status) });
+    }
+    return true;
+  }
+  if (ev.result && typeof ev.result === 'object' && ev.result.stopReason) {
+    ctx.result({ cost: undefined, tokens: ev.result.usage });
+    return true;
+  }
+  if (ev.error && typeof ev.error === 'object' && ev.id !== undefined) { ctx.error(ev.error.message || 'Error'); return true; }
+  return false;
+}
+
 function handleLine(ctx, line, state) {
   const ev = tryJson(line);
   if (!ev) {
@@ -22,10 +48,12 @@ function handleLine(ctx, line, state) {
     ctx.stream(line + '\n');
     return;
   }
+  if (ev.jsonrpc || ev.method || ev.params || ev.update) { if (handleAcp(ctx, ev, state)) return; }
   const type = String(ev.type || ev.event || ev.kind || '');
   const sid = ev.session_id || ev.sessionId || ev.session?.id;
   if (sid) ctx.setNative(sid);
 
+  if (ev.finished_reason === 'error' && !ev.error) { ctx.error('L’agent ha acabat amb error'); return; }
   if (/error/i.test(type) || ev.status === 'ERROR') {
     ctx.error(ev.error?.message || ev.error || ev.message || 'Error');
     return;

package/src/commands.js

@@ -54,8 +54,18 @@ function claudeCommands(cwd) {
   return [...out.values()].map((c) => ({ ...c, hint: c.hint.slice(0, 110) })).sort((a, b) => a.name.localeCompare(b.name)).slice(0, 150);
 }
 
+const STATUS = { name: 'status', hint: 'Model, carpeta i permisos de la sessió', kind: 'comanda' };
+// Antigravity resol en mode -p les comandes de només lectura i les skills (sense gastar quota).
+const AGY_BUILTIN = [
+  { name: 'usage', hint: 'Ús i límits del compte' }, { name: 'quota', hint: 'Quota restant' }, { name: 'credits', hint: 'Crèdits del compte' },
+  { name: 'model', hint: 'Model actual' }, { name: 'effort', hint: 'Nivell de raonament' }, { name: 'skills', hint: 'Skills disponibles' },
+  { name: 'permissions', hint: 'Regles de permisos' }, { name: 'hooks', hint: 'Hooks configurats' }, { name: 'config', hint: 'Configuració' },
+  { name: 'changelog', hint: 'Novetats de la versió' }, { name: 'help', hint: 'Ajuda' },
+];
+
 function agentCommands(agent, cwd) {
-  if (agent === 'codex') return [{ name: 'status', hint: 'Compte, model i carpeta de la sessió', kind: 'comanda' }];
+  if (agent === 'codex' || agent === 'grok') return [STATUS];
+  if (agent === 'antigravity') return [STATUS, ...AGY_BUILTIN.map((c) => ({ ...c, kind: 'comanda' }))];
   return agent === 'claude' ? claudeCommands(cwd) : [];
 }
 

package/src/hub.js

@@ -170,9 +170,10 @@ class Hub extends EventEmitter {
   // Codex no té /status en mode headless: ho resolem aquí amb el que sí que sap dir.
   codexStatus(s, bp) {
     const { execFile } = require('child_process');
-    execFile(bp, ['login', 'status'], { timeout: 8000 }, (err, out, errOut) => {
+    const codex = s.agent === 'codex', name = byId[s.agent]?.name || s.agent;
+    execFile(bp, codex ? ['login', 'status'] : ['--version'], { timeout: 8000 }, (err, out, errOut) => {
       const rows = String(out || errOut || '').split('\n').map((l) => l.trim()).filter(Boolean), login = rows.find((l) => /logged|log in|login/i.test(l) && !/^warning/i.test(l)) || rows[0] || (err ? 'No he pogut llegir el compte' : '');
-      const lines = [`**Compte:** ${login}`, `**Model:** ${s.model || s.modelUsed || 'el de per defecte'}`, `**Carpeta:** \`${s.cwd}\``, `**Permisos:** ${s.mode}`, `**Conversa:** ${s.nativeId ? 'continua la de Codex' : 'encara no ha començat'}`];
+      const lines = [codex ? `**Compte:** ${login}` : `**Versió:** ${login}`, `**Model:** ${s.model || s.modelUsed || 'el de per defecte'}`, `**Carpeta:** \`${s.cwd}\``, `**Permisos:** ${s.mode}`, `**Conversa:** ${s.nativeId ? `continua la de ${name}` : 'encara no ha començat'}`];
       this.push(s, 'text', { text: lines.join('\n\n') });
       this.touch(s);
     });
@@ -231,7 +232,7 @@ class Hub extends EventEmitter {
 
     if (!s.title) s.title = text.replace(/\s+/g, ' ').slice(0, 60);
     this.push(s, 'user', { text });
-    if (s.agent === 'codex' && /^\/status\s*$/i.test(text)) return this.codexStatus(s, bp);
+    if (['codex', 'grok', 'antigravity'].includes(s.agent) && /^\/status\s*$/i.test(text)) return this.codexStatus(s, bp);
     s.state = 'running';
     this.push(s, 'status', { state: 'running' });
 

package/src/jobs.js

@@ -115,7 +115,7 @@ class Jobs {
       cwd = cwd || r.cwd;
       rule = r.rule;
     }
-    if (!['claude', 'codex', 'demo', 'grok', 'antigravity', 'ollama'].includes(agent)) throw httpErr(400, 'Tria Claude Code, Codex o «automàtic»');
+    if (!['claude', 'codex', 'demo', 'grok', 'antigravity', 'ollama'].includes(agent)) throw httpErr(400, 'Tria un agent o «automàtic»');
     if (!cwd) cwd = this.cfg.roots?.[0];
     if (!cwd || !fs.existsSync(cwd)) throw httpErr(400, 'Aquesta carpeta no existeix');
     if (b.after && !this.get(b.after)) throw httpErr(400, 'La feina anterior no existeix');

package/src/remote.js

@@ -161,7 +161,7 @@ class Remote {
         const buf = await this.grab(w, q);
         const info = await this.info();
         // Un JPEG de pantalla tota negra pesa molt poc: l'ordinador és bloquejat/adormit o falta el permís.
-        this.frame = { buf, t: Date.now(), w, q, blank: buf.length < 5000, sw: info.w, sh: info.h };
+        this.frame = { buf, t: Date.now(), w, q, hash: crypto.createHash('md5').update(buf).digest('hex').slice(0, 12), blank: buf.length < 5000, sw: info.w, sh: info.h };
         return this.frame;
       } finally {
         this.busy = null;
@@ -265,14 +265,20 @@ class Remote {
         path: '/api/desktop/frame',
         handler: async ({ res, url }) => {
           const f = await this.getFrame(Number(url.searchParams.get('w')), Number(url.searchParams.get('q')));
+          const same = url.searchParams.get('h') === f.hash;
+          if (same) {
+            res.writeHead(204, { 'cache-control': 'no-store', 'x-same': '1', 'x-hash': f.hash, 'x-screen-w': String(f.sw || 0), 'x-screen-h': String(f.sh || 0), 'x-blank': f.blank ? '1' : '0', 'access-control-expose-headers': 'x-same, x-hash, x-screen-w, x-screen-h, x-blank' });
+            return res.end();
+          }
           res.writeHead(200, {
             'content-type': 'image/jpeg',
+            'x-hash': f.hash,
             'content-length': f.buf.length,
             'cache-control': 'no-store',
             'x-screen-w': String(f.sw || 0),
             'x-screen-h': String(f.sh || 0),
             'x-blank': f.blank ? '1' : '0',
-            'access-control-expose-headers': 'x-screen-w, x-screen-h, x-blank',
+            'access-control-expose-headers': 'x-hash, x-screen-w, x-screen-h, x-blank',
           });
           res.end(f.buf);
         },

package/src/telegram.js

@@ -284,7 +284,7 @@ class Telegram {
             this.stop();
             this.offset = undefined;
           }
-          if (['claude', 'codex', 'demo'].includes(body.agent)) t.agent = body.agent;
+          if (['claude', 'codex', 'grok', 'antigravity', 'demo'].includes(body.agent)) t.agent = body.agent;
           if (['llegir', 'preguntar', 'tot'].includes(body.mode)) t.mode = body.mode;
           if (typeof body.cwd === 'string' && body.cwd) t.cwd = body.cwd;
           if (typeof body.notify === 'boolean') t.notify = body.notify;

package/web/app/app.js

@@ -479,9 +479,10 @@ 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', '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']]
+  const more = ['feines', 'memoria', 'approvals', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].includes(r.name);
+  $('#tabbar').innerHTML = [['sessions', ICON.sessions, 'Sessions', active === 'sessions'], ['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('')
+    .replace('</a><a href="#/ordinadors"', `</a><button type="button" data-act="pantalla-tab">${svg('<path d="M5 3l14 7-6 2.2L10.8 19z"/>')}<span>Pantalla</span></button><a href="#/ordinadors"`)
     + `<button type="button" data-act="more" ${more ? 'aria-current="page"' : ''}>${svg(ICON.more)}<span>Més</span></button>`;
   const s = r.name === 'session' ? state.sessions.get(r.id) : null;
   $('#here').textContent = s ? s.title || 'Sessió nova' : VIEWS[r.name]?.label || '';
@@ -496,8 +497,8 @@ function render() {
   if (r.name !== 'sessions') manage = null;
   renderChrome();
   document.body.classList.toggle('board-mode', board);
-  document.body.classList.toggle('chat-mode', r.name === 'session' || (r.name === 'mobil' && !!local.engine));
-  document.body.classList.toggle('no-tabs', r.name === 'session' || board || (r.name === 'mobil' && !!local.engine));
+  document.body.classList.toggle('chat-mode', r.name === 'session' || (r.name === 'mobil' && inLocalChat()));
+  document.body.classList.toggle('no-tabs', r.name === 'session' || board || (r.name === 'mobil' && inLocalChat()));
   if (!board && lastName === 'pissarra') window.NioBoard?.unmount();
   if (board && lastName === 'pissarra' && $('#boardRoot')) return;
   const changed = lastName !== r.name || r.name === 'session';
@@ -506,9 +507,9 @@ 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 === 'ajuda' ? viewHelp() : viewSettings()}</div>`;
+    view.innerHTML = html && inLocalChat() ? 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 === 'mobil' && machine() && !local.engine) loadOllama();
+    if (r.name === 'mobil' && machine() && !inLocalChat()) loadOllama();
     if (r.name === 'activitat' && machine()) { activity = null; loadActivity(); }
     if (r.name === 'memoria' && machine()) loadMemory();
     if (r.name === 'ordinadors' && machine() && state.connected) loadScreen();
@@ -787,9 +788,28 @@ function renameSheet(i) {
     };
   });
 }
+async function pantallaTab() {
+  if (!machine() || !state.connected) return toast('Primer connecta un ordinador.', 4000);
+  let caps = state.info?.control;
+  try { caps = await api('/api/control'); if (state.info) state.info.control = caps; } catch (e) { return toast(e.message, 4500); }
+  const d = caps?.escriptori;
+  if (d?.enabled) return remoteOpen();
+  const body = !d?.installed
+    ? `<p class="small">Per veure i controlar l’escriptori cal instal·lar <span class="mono">agent-desktop</span> a ${esc(machine().name)}:</p><p class="mono small">npm i -g agent-desktop</p>`
+    : d.ready === false ? `<p class="small">${esc(d.why || 'L’escriptori encara no està a punt.')}</p>`
+    : `<p class="small">Activa «Apps de l’escriptori» a ${esc(machine().name)} per veure la pantalla i controlar-la des del mòbil. Cada acció dels agents continuarà demanant la teva aprovació.</p>`;
+  openSheet(`<h2>Pantalla</h2><div class="stack">${body}<div class="row between sheet-foot"><button class="btn ghost" type="button" data-close>Ara no</button>${d?.installed && d.ready !== false ? '<button class="btn ink" id="pantOn" type="button">Activa i obre</button>' : ''}</div></div>`, (sh) => {
+    const go = sh.querySelector('#pantOn'); if (!go) return;
+    go.onclick = async () => {
+      go.disabled = true;
+      try { const r = await api('/api/control', { method: 'PUT', body: { escriptori: true } }); if (state.info) state.info.control = r; closeSheet(); remoteOpen(); }
+      catch (err) { toast(err.message, 6000); go.disabled = false; }
+    };
+  });
+}
 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', 'activitat', '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">${['feines', 'memoria', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].map(item).join('')}</div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
 }
 
 /* ---------- Sessions */
@@ -820,6 +840,7 @@ async function manageDelete() {
   manage = fail ? new Set(ids.filter((id) => state.sessions.has(id))) : null;
   toast(fail ? `No he pogut esborrar ${fail} sessions` : `${ids.length} sessions esborrades`); render();
 }
+const plain = (t) => `${t}`.replace(/```[\s\S]*?```/g, ' ').replace(/`([^`]*)`/g, '$1').replace(/!?\[([^\]]*)\]\([^)]*\)/g, '$1').replace(/^\s{0,3}(#{1,6}|[-*+]|\d+\.|>)\s+/gm, '').replace(/(\*\*|__|\*|_)(?=\S)([^*_]*?\S)\1/g, '$2').replace(/\*\*/g, '').replace(/\s#{1,6}\s/g, ' ').replace(/\s#{1,6}\s/g, ' ').replace(/\s+/g, ' ').trim();
 function viewSessions() {
   const list = [...state.sessions.values()].sort((a, b) => b.updated - a.updated);
   const many = store.machines.length > 1, mach = machine();
@@ -835,7 +856,7 @@ function viewSessions() {
     <${manage ? 'div role="checkbox" tabindex="0" aria-checked="' + manage.has(s.id) + '" data-pick="' + esc(s.id) + '"' : 'a href="#/s/' + esc(s.id) + '"'} class="card session-card ${manage ? 'pick-mode' : ''} ${manage?.has(s.id) ? 'picked' : ''}">
       <div class="row between"><span class="agent-tag nosq" data-agent="${esc(s.agent)}">${agentBot(s.agent, sessionMood(s))}${esc(AGENT_NAMES[s.agent] || s.agent)}</span>${stateChip(s)}</div>
       <div class="title">${esc(s.title || 'Sessió nova')}</div>
-      ${s.state === 'error' && s.error ? `<div class="last err">${esc(s.error)}</div>` : s.last ? `<div class="last">${esc(s.last)}</div>` : ''}
+      ${s.state === 'error' && s.error ? `<div class="last err">${esc(s.error)}</div>` : s.last ? `<div class="last">${esc(plain(s.last))}</div>` : ''}
       <div class="meta"><span class="mono">${esc(basename(s.cwd))}</span><span>·</span><span>${esc(MODES[s.mode]?.label || '')}</span><span>·</span><span>${ago(s.updated)}</span>${s.cost ? `<span>·</span><span>${money(s.cost)}</span>` : ''}</div>
     </${manage ? 'div' : 'a'}>`).join('')}</div>` : `<div class="panel empty">${bot('idle')}<h2>Encara no hi ha cap sessió</h2><p>Tria un agent i una carpeta, i explica-li què ha de fer.</p><button class="btn ink" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button></div>`}`;
 }
@@ -983,28 +1004,45 @@ async function newJobSheet() {
   try { projects = await api('/api/projects'); } catch (e) { return toast(e.message); }
   const agents = (state.info?.agents || []).filter((a) => a.available && ['claude', 'codex'].includes(a.id));
   const prev = (jobsData?.jobs || []).filter((j) => ['pendent', 'en curs', 'feta'].includes(j.state)).slice(0, 15);
-  const sel = { agent: 'auto', mode: 'preguntar', when: 'ara' };
+  const sel = { agent: 'auto', mode: 'preguntar', when: 'ara', mins: 0 };
   openSheet(`<h2>Nova feina</h2>
     <label class="f"><span>Què ha de fer?</span><textarea class="field" id="jobPrompt" rows="3" placeholder="Per exemple: revisa les issues noves i fes-me’n un resum"></textarea></label>
     <div class="grid-2"><label class="f"><span>Agent</span><select id="jobAgent"><option value="auto">Automàtic (regles)</option>${agents.map((a) => `<option value="${a.id}">${esc(a.name)}</option>`).join('')}</select></label>
     <label class="f"><span>Carpeta</span><select id="jobCwd">${projects.map((p) => `<option value="${esc(p.path)}">${esc(p.name)}</option>`).join('')}</select></label></div>
     <div class="stack"><div class="section-title" style="margin:0">Permisos</div><div class="seg" id="jobMode" role="group">${Object.entries(MODES).map(([k, m]) => `<button type="button" data-jmode="${k}" aria-pressed="${k === sel.mode}">${m.label}</button>`).join('')}</div></div>
-    <div class="grid-2"><label class="f"><span>Quan</span><select id="jobWhen"><option value="ara">Ara</option><option value="mes">Més tard…</option>${prev.length ? '<option value="after">Quan acabi una altra feina…</option>' : ''}<option value="cron">Periòdicament…</option></select></label>
-    <div id="jobWhenX"></div></div>
+    <div class="stack"><div class="section-title" style="margin:0">Quan es comença</div>
+      <div class="seg" id="jobWhen" role="group" aria-label="Quan es comença"><button type="button" data-w="ara" aria-pressed="true">Ara</button><button type="button" data-w="timer" aria-pressed="false">D’aquí a…</button><button type="button" data-w="mes" aria-pressed="false">A una hora</button>${prev.length ? '<button type="button" data-w="after" aria-pressed="false">Després d’una altra</button>' : ''}<button type="button" data-w="cron" aria-pressed="false">Repetida</button></div>
+      <div id="jobWhenX" class="stack"></div></div>
     ${agents.some((a) => a.id === 'codex') ? '<label class="row check"><input type="checkbox" id="jobReview"> <span>Quan acabi, que Codex revisi els canvis</span></label>' : ''}
     <div class="row between sheet-foot"><button class="btn ghost" type="button" data-close>Cancel·la</button><button class="btn ink" id="jobGo" type="button">Posa-la a la cua</button></div>`, (sh) => {
     const x = $('#jobWhenX', sh);
-    $('#jobWhen', sh).onchange = (e) => {
-      sel.when = e.target.value;
-      x.innerHTML = sel.when === 'mes' ? '<label class="f"><span>Dia i hora</span><input type="datetime-local" id="jobAt"></label>'
-        : sel.when === 'after' ? `<label class="f"><span>Després de</span><select id="jobAfter">${prev.map((j) => `<option value="${esc(j.id)}">${esc(j.title)} (${esc(j.state)})</option>`).join('')}</select></label>`
-        : sel.when === 'cron' ? `<label class="f"><span>Cada quan</span><select id="jobCron">${CRON_PRESETS.slice(1).map(([c, l]) => `<option value="${c}">${l}</option>`).join('')}</select></label><input type="text" id="jobCronX" placeholder="min hora dia mes dia-setmana" hidden autocapitalize="off" spellcheck="false" class="mono">` : '';
+    const TIMES = [[5, '5 min'], [15, '15 min'], [30, '30 min'], [60, '1 h'], [180, '3 h'], [480, '8 h']];
+    const hm = (t) => new Date(t).toLocaleString('ca', { weekday: 'short', hour: '2-digit', minute: '2-digit' });
+    const upd = () => {
+      const go = $('#jobGo', sh);
+      if (sel.when === 'timer') { const out = $('#jobTimerOut', sh); out.innerHTML = sel.mins ? `Començarà a les <b>${hm(Date.now() + sel.mins * 60000)}</b>` : 'Tria quant ha d’esperar'; go.textContent = sel.mins ? `Envia-la d’aquí a ${fmtMins(sel.mins)}` : 'Posa-la a la cua'; }
+      else go.textContent = { ara: 'Posa-la a la cua', mes: 'Programa-la', after: 'Encadena-la', cron: 'Programa-la' }[sel.when];
+    };
+    const fmtMins = (m) => (m % 60 === 0 && m >= 60 ? `${m / 60} h` : m > 60 ? `${Math.floor(m / 60)} h ${m % 60} min` : `${m} min`);
+    const setWhen = (w) => {
+      sel.when = w; $$('#jobWhen [data-w]', sh).forEach((b) => b.setAttribute('aria-pressed', b.dataset.w === w));
+      x.innerHTML = w === 'timer' ? `<div class="row" style="flex-wrap:wrap;gap:8px" id="jobTimes">${TIMES.map(([m, l]) => `<button type="button" class="chip" data-m="${m}" aria-pressed="${m === sel.mins}">${l}</button>`).join('')}</div>
+          <div class="row" style="flex-wrap:nowrap"><input class="field" type="number" id="jobMinsN" min="1" max="9999" inputmode="numeric" placeholder="Altre" style="max-width:110px" aria-label="Quantitat"><select id="jobMinsU" aria-label="Unitat"><option value="1">minuts</option><option value="60">hores</option><option value="1440">dies</option></select></div>
+          <p class="muted small" id="jobTimerOut"></p>`
+        : w === 'mes' ? '<label class="f"><span>Dia i hora</span><input type="datetime-local" id="jobAt"></label>'
+        : w === 'after' ? `<label class="f"><span>Quan acabi</span><select id="jobAfter">${prev.map((j) => `<option value="${esc(j.id)}">${esc(j.title)} (${esc(j.state)})</option>`).join('')}</select></label>`
+        : w === 'cron' ? `<label class="f"><span>Cada quan</span><select id="jobCron">${CRON_PRESETS.slice(1).map(([c, l]) => `<option value="${c}">${l}</option>`).join('')}</select></label><input type="text" id="jobCronX" placeholder="min hora dia mes dia-setmana" hidden autocapitalize="off" spellcheck="false" class="mono">` : '';
       const c = $('#jobCron', sh); if (c) c.onchange = () => ($('#jobCronX', sh).hidden = c.value !== 'custom');
+      upd();
     };
+    $('#jobWhen', sh).addEventListener('click', (e) => { const b = e.target.closest('[data-w]'); if (b) setWhen(b.dataset.w); });
+    x.addEventListener('click', (e) => { const b = e.target.closest('[data-m]'); if (!b) return; sel.mins = Number(b.dataset.m); $$('[data-m]', x).forEach((c) => c.setAttribute('aria-pressed', c === b)); $('#jobMinsN', sh).value = ''; upd(); });
+    x.addEventListener('input', (e) => { if (!e.target.matches('#jobMinsN, #jobMinsU')) return; const n = Number($('#jobMinsN', sh).value); sel.mins = n > 0 ? Math.round(n * Number($('#jobMinsU', sh).value)) : 0; $$('[data-m]', x).forEach((c) => c.setAttribute('aria-pressed', false)); upd(); });
     sh.addEventListener('click', (e) => { const m = e.target.closest('[data-jmode]'); if (m) { sel.mode = m.dataset.jmode; $$('[data-jmode]', sh).forEach((b) => b.setAttribute('aria-pressed', b.dataset.jmode === sel.mode)); } if (e.target.closest('[data-close]')) closeSheet(); });
     $('#jobGo', sh).onclick = async () => {
       const prompt = $('#jobPrompt', sh).value.trim(); if (!prompt) return toast('Explica què ha de fer la feina');
       const body = { prompt, agent: $('#jobAgent', sh).value, cwd: $('#jobCwd', sh).value, mode: sel.mode };
+      if (sel.when === 'timer') { if (!sel.mins) return toast('Tria quant ha d’esperar'); body.at = Date.now() + sel.mins * 60000; }
       if (sel.when === 'mes') { const v = $('#jobAt', sh)?.value; if (!v) return toast('Tria el dia i l’hora'); body.at = new Date(v).getTime(); }
       if (sel.when === 'after') body.after = $('#jobAfter', sh).value;
       if (sel.when === 'cron') body.cron = $('#jobCron', sh).value === 'custom' ? $('#jobCronX', sh).value.trim() : $('#jobCron', sh).value;
@@ -1012,7 +1050,7 @@ async function newJobSheet() {
       try {
         const j = await api('/api/jobs', { method: 'POST', body });
         if ($('#jobReview', sh)?.checked) await api('/api/jobs', { method: 'POST', body: { agent: 'codex', cwd: j.cwd, mode: 'llegir', after: j.id, title: `Revisió: ${j.title}`, prompt: 'Revisa els canvis que s’acaben de fer en aquesta carpeta (git diff i fitxers nous). Explica què està bé, què es pot millorar i si hi ha cap error. Context de la feina anterior:\n\n{{anterior}}' } });
-        closeSheet(); toast(body.cron ? 'Feina programada' : 'Feina a la cua'); loadJobs();
+        closeSheet(); toast(body.cron || body.at ? 'Feina programada' : 'Feina a la cua'); loadJobs();
       } catch (e) { toast(e.message, 4200); $('#jobGo', sh).disabled = false; }
     };
     if (!isTouch) setTimeout(() => $('#jobPrompt', sh)?.focus(), 80);
@@ -1282,11 +1320,17 @@ function quickFolders(extra = []) {
 }
 const folderChip = (f) => `<button type="button" class="chip ${f.tag === 'fav' ? 'fav' : ''}" data-fs="${esc(f.path)}" title="${esc(f.path)}">${f.tag === 'fav' ? '★ ' : f.tag === 'last' ? '↺ ' : ''}${esc(f.name)}</button>`;
 const favBtn = (p) => `<button class="chip" type="button" data-fav aria-pressed="${getFavs().includes(p)}">${getFavs().includes(p) ? '★ Preferida' : '☆ Desa com a preferida'}</button>`;
+function crumbBar(d) {
+  const sep = d.path.includes('\\') && !d.path.startsWith('/') ? '\\' : '/', parts = d.path.split(/[\\/]/).filter(Boolean);
+  const pathAt = (i) => (sep === '/' ? '/' : '') + parts.slice(0, i + 1).join(sep) + (sep === '\\' && i === 0 ? '\\' : '');
+  const from = Math.max(0, parts.length - 3);
+  const segs = parts.slice(from).map((n, k) => { const i = from + k, cur = i === parts.length - 1; return `<button type="button" class="crumb${cur ? ' cur' : ''}" data-fs="${esc(pathAt(i))}"${cur ? ' aria-current="page"' : ''}>${esc(n)}</button>`; });
+  return `<div class="fs-bar"><button class="icon-btn" type="button" data-fs="${esc(d.parent || '')}" ${d.parent ? '' : 'disabled'} aria-label="Carpeta de dalt">${svg(ICON.back)}</button><nav class="crumbs mono small" aria-label="Camí" title="${esc(d.path)}"><button type="button" class="crumb" data-fs="${esc(d.home)}" aria-label="Carpeta d’inici">~</button>${from > 0 ? '<span class="sl">/</span><span class="sl">…</span>' : ''}${segs.map((x) => `<span class="sl">/</span>${x}`).join('')}</nav></div>`;
+}
 function folderSheet(s) {
   let d = null;
   const draw = () => {
-    const crumbs = d ? d.path.split(/[\\/]/).filter(Boolean) : [];
-    $('#fsBody').innerHTML = !d ? '<p class="muted small">Carregant…</p>' : `<div class="row">${favBtn(d.path)}${quickFolders().slice(0, 8).map(folderChip).join('')}</div><div class="fs-bar"><button class="icon-btn" type="button" data-fs="${esc(d.parent || '')}" ${d.parent ? '' : 'disabled'} aria-label="Carpeta de dalt">${svg(ICON.back)}</button><button class="chip" type="button" data-fs="${esc(d.home)}">Inici</button><span class="fs-path mono small" title="${esc(d.path)}">${esc(crumbs.slice(-2).join(' / ') || '/')}</span></div>
+    $('#fsBody').innerHTML = !d ? '<p class="muted small">Carregant…</p>' : `<div class="row">${favBtn(d.path)}${quickFolders().filter((f) => f.tag === 'fav').map(folderChip).join('')}</div>${crumbBar(d)}
       <div class="proj-list fs-list">${d.dirs.map((x) => `<button type="button" class="proj" data-fs="${esc(x.path)}"><span class="ic">›</span><span class="grow"><div ${x.hidden ? 'class="muted"' : ''}>${esc(x.name)}</div></span></button>`).join('') || '<p class="muted small">No hi ha subcarpetes. Pots triar aquesta.</p>'}</div>`;
     const ok = $('#fsOk'); if (ok) { ok.disabled = !d || d.path === s.cwd; ok.textContent = d && d.path === s.cwd ? 'Ja hi és' : 'Treballa aquí'; }
   };
@@ -1383,7 +1427,7 @@ function focusMain() {
   if (isTouch || $('#sheet')?.open || $('#palette')?.open) return;
   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 === 'mobil' && inLocalChat()) $('#lmsg')?.focus({ preventScroll: true });
 }
 $('#sheet').addEventListener('click', (e) => { if (e.target.id === 'sheet') closeSheet(); });
 $('#sheet').addEventListener('close', () => setTimeout(focusMain, 0));
@@ -1463,14 +1507,13 @@ async function newSessionSheet(preset = {}) {
     const VIEWS_ = [
       () => `<p class="wiz-q">Quin agent vols fer servir?</p><div class="picker">${[...agents].sort((x, y) => (y.available ? 1 : 0) - (x.available ? 1 : 0)).map((a) => `<button type="button" class="pick ${a.available ? '' : 'off'}" data-agent-id="${esc(a.id)}" aria-pressed="${a.id === sel.agent}"><div class="row between"><span class="agent-tag" data-agent="${esc(a.id)}">${esc(a.name)}</span>${a.beta ? '<span class="chip beta">beta</span>' : ''}</div><div class="sub">${esc(a.available ? a.version || 'Disponible' : 'No instal·lat')}</div></button>`).join('')}</div>`,
       () => {
-        const crumbs = fsd ? fsd.path.split(/[\\/]/).filter(Boolean) : [];
-        const qf = quickFolders(projects), favN = getFavs().length, quick = qf.filter((f) => f.tag).concat(qf.filter((f) => !f.tag).slice(0, 6)).slice(0, favN + 8).map(folderChip).join('');
+        const quick = quickFolders().filter((f) => f.tag === 'fav').map(folderChip).join('');
         return `<p class="wiz-q">A quina carpeta ha de treballar?</p>
           <form class="pair-form" id="fsForm"><input type="text" id="fsIn" value="${esc(fsd?.path || sel.cwd)}" placeholder="/ruta/exacta/de/la/carpeta" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Ruta de la carpeta"><button class="btn" type="submit">Obre</button></form>
           <div class="fs-pick"><span class="muted small">Carpeta triada</span><b class="mono small">${esc(fsd?.path || sel.cwd || '—')}</b>${fsd?.git ? '<span class="chip">git</span>' : ''}${favBtn(fsd?.path || sel.cwd)}</div>
           <div class="row"><button class="chip" type="button" data-gh>${gh ? 'Torna a les carpetes' : 'Clona de GitHub'}</button>${quick}</div>
           ${gh ? (gh.msg ? `<p class="muted small">${gh.msg}</p>` : '') + (gh.repos ? `<input type="search" id="ghQ" value="${esc(gh.q)}" placeholder="Cerca entre els teus repositoris${gh.user ? ' (' + esc(gh.user) + ')' : ''}" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Cerca un repositori"><div class="proj-list fs-list" id="ghList">${ghList()}</div>` : '')
-          : !fsd ? '<p class="muted small">Carregant…</p>' : `<div class="fs-bar"><button class="icon-btn" type="button" data-fs="${esc(fsd.parent || '')}" ${fsd.parent ? '' : 'disabled'} aria-label="Carpeta de dalt">${svg(ICON.back)}</button><button class="chip" type="button" data-fs="${esc(fsd.home)}">Inici</button><span class="fs-path mono small" title="${esc(fsd.path)}">${esc(crumbs.slice(-2).join(' / ') || '/')}</span></div>
+          : !fsd ? '<p class="muted small">Carregant…</p>' : `${crumbBar(fsd)}
           <div class="proj-list fs-list">${fsd.dirs.map((d) => `<button type="button" class="proj" data-fs="${esc(d.path)}"><span class="ic">›</span><span class="grow"><div ${d.hidden ? 'class="muted"' : ''}>${esc(d.name)}</div></span></button>`).join('') || '<p class="muted small">No hi ha subcarpetes. Pots triar aquesta.</p>'}</div>`}`;
       },
       () => {
@@ -1636,34 +1679,27 @@ async function loadOllama(force) {
   paintModels();
 }
 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>`;
+  if (!machine()) return `<h2 class="sec" style="margin-top:36px">Ollama a l’ordinador</h2><div class="stack-lg" style="max-width:640px"><div class="card"><b>Només en un ordinador</b><div class="muted small" style="margin-top:4px">Els models d’Ollama són més grans i capaços. Connecta’n un per veure’ls i descarregar-ne.</div><a class="btn block" style="margin-top:10px" href="#/ordinadors">Ordinadors</a></div></div>`;
+  return `<div class="row between" style="max-width:640px;margin-top:36px"><h2 class="sec" style="margin:0">Ollama a ${esc(machine().name)}</h2><button class="icon-btn" data-act="ollama-refresh" type="button" aria-label="Actualitza">${svg(ICON.refresh)}</button></div><div id="modelsBody" style="max-width:640px;margin-top:12px">${state.ollama ? '' : `<div class="card"><b>Consultant Ollama…</b></div>`}</div>`;
 }
 function pctOf(j) { return j.total ? Math.min(100, Math.round((j.completed / j.total) * 100)) : 0; }
+const OLLAMA_START = 'Engega Ollama en aquest ordinador: comprova que està instal·lat (si no, digue-m’ho abans d’instal·lar res) i executa «ollama serve» en segon pla. Quan respongui a http://localhost:11434, confirma-m’ho.';
 function paintModels() {
   const box = $('#modelsBody'); if (!box || !state.ollama) return;
   const o = state.ollama, have = new Set(o.models.map((m) => m.name));
   if (!o.available) {
-    box.innerHTML = `<div class="panel empty">${bot('sleep')}<h2>Ollama no està engegat en aquest ordinador</h2><p>Instal·la’l des d’<a href="https://ollama.com" target="_blank" rel="noopener">ollama.com</a> i engega’l amb <span class="mono">ollama serve</span>. Després, torna-ho a comprovar.</p><button class="btn" data-act="ollama-refresh" type="button">${svg(ICON.refresh)}Torna-ho a comprovar</button></div>`;
+    box.innerHTML = `<div class="card"><div class="row between"><b>Ollama no està engegat</b><i class="dot"></i></div><div class="muted small" style="margin-top:4px">Un agent pot engegar-lo per tu amb <span class="mono">ollama serve</span>. Si no el tens, l’instal·les des d’<a href="https://ollama.com" target="_blank" rel="noopener">ollama.com</a>.</div><div class="row" style="margin-top:10px"><button class="btn ink" data-act="ollama-start" type="button">Engega’l amb un agent</button><button class="btn" data-act="ollama-refresh" type="button">Torna-ho a comprovar</button></div></div>`;
     return;
   }
   const pulling = o.pulling || [];
-  box.innerHTML = `<div class="grid2">
-    <div class="stack">
-      <section class="panel"><header><h2>Instal·lats</h2><span class="muted small">${o.models.length}</span></header><div class="body">${o.models.length ? o.models.map((m) => `
-        <div class="agent-row"><span class="grow"><div class="row"><b class="mono" style="font-size:14px">${esc(m.name)}</b>${(o.running || []).includes(m.name) ? '<span class="chip waiting">A memòria</span>' : ''}</div><div class="muted small">${[m.params, m.quant, bytes(m.size)].filter(Boolean).map(esc).join(' · ')}</div></span>
-          <button class="btn sm" data-act="ollama-chat" data-name="${esc(m.name)}" type="button">Sessió</button><button class="icon-btn" data-act="ollama-del" data-name="${esc(m.name)}" type="button" aria-label="Esborra ${esc(m.name)}">${svg(ICON.trash)}</button></div>`).join('') : '<p class="muted small">Encara no n’hi ha cap. Tria’n un de la llista o escriu-ne el nom.</p>'}</div></section>
-      ${pulling.length ? `<section class="panel"><header><h2>Descarregant</h2></header><div class="body stack">${pulling.map((j) => `
-        <div class="stack" data-pull="${esc(j.name)}"><div class="row between"><b class="mono" style="font-size:14px">${esc(j.name)}</b><button class="btn sm ghost" data-act="ollama-cancel" data-name="${esc(j.name)}" type="button">Cancel·la</button></div><div class="progress"><i style="width:${pctOf(j)}%"></i></div><div class="muted small mono" data-st>${esc(j.status)}${j.total ? ` · ${bytes(j.completed)} de ${bytes(j.total)}` : ''}</div></div>`).join('')}</div></section>` : ''}
-    </div>
-    <div class="stack">
-      <section class="panel"><header><h2>Descarrega un model</h2></header><div class="body stack">
-        <form class="row" id="pullForm" style="flex-wrap:nowrap"><input type="text" id="pullIn" placeholder="Nom del model, p. ex. qwen3:4b" autocapitalize="off" spellcheck="false" aria-label="Nom del model"><button class="btn ink" type="submit">${svg(ICON.download)}Descarrega</button></form>
-        <p class="muted small">Tens tots els noms a <a href="https://ollama.com/library" target="_blank" rel="noopener">ollama.com/library</a>. Les mides són aproximades.</p>
-        <div class="list">${OLLAMA_PICKS.map((p) => { const busy = pulling.some((j) => j.name === p.name), got = have.has(p.name); return `
-          <button class="card" type="button" ${got || busy ? 'disabled' : `data-act="ollama-pull" data-name="${p.name}"`} style="${got ? 'opacity:.6' : ''}"><div class="row between"><b class="mono" style="font-size:14px">${p.name}</b><span class="muted small">${got ? 'Instal·lat' : busy ? 'Descarregant…' : p.size}</span></div><div class="muted small" style="margin-top:4px">${p.note}</div></button>`; }).join('')}</div>
-      </div></section>
-    </div>
+  box.innerHTML = `<div class="stack-lg">
+    <div class="list">${o.models.length ? o.models.map((m) => `<div class="card model-card"><div class="row between"><b class="mono" style="font-size:14px">${esc(m.name)}</b><span class="row" style="gap:6px">${(o.running || []).includes(m.name) ? '<span class="chip waiting">A memòria</span>' : ''}<button class="btn sm" data-act="ollama-chat" data-name="${esc(m.name)}" type="button">Xat</button><button class="icon-btn" data-act="ollama-del" data-name="${esc(m.name)}" type="button" aria-label="Esborra ${esc(m.name)}">${svg(ICON.trash)}</button></span></div><div class="muted small" style="margin-top:4px">${[m.params, m.quant, bytes(m.size)].filter(Boolean).map(esc).join(' · ')}</div></div>`).join('') : '<p class="muted small">Encara no n’hi ha cap model. Tria’n un de sota.</p>'}</div>
+    ${pulling.map((j) => `<div class="card stack" data-pull="${esc(j.name)}"><div class="row between"><b class="mono" style="font-size:14px">${esc(j.name)}</b><button class="btn sm ghost" data-act="ollama-cancel" data-name="${esc(j.name)}" type="button">Cancel·la</button></div><div class="progress"><i style="width:${pctOf(j)}%"></i></div><div class="muted small mono" data-st>${esc(j.status)}${j.total ? ` · ${bytes(j.completed)} de ${bytes(j.total)}` : ''}</div></div>`).join('')}
+    <details class="card"><summary><b>Descarrega un model</b></summary><div class="stack" style="margin-top:10px">
+      <form class="row" id="pullForm" style="flex-wrap:nowrap"><input type="text" id="pullIn" placeholder="Nom, p. ex. qwen3:4b" autocapitalize="off" spellcheck="false" aria-label="Nom del model"><button class="btn ink" type="submit">${svg(ICON.download)}Descarrega</button></form>
+      <div class="list">${OLLAMA_PICKS.map((p) => { const busy = pulling.some((j) => j.name === p.name), got = have.has(p.name); return `<button class="card" type="button" ${got || busy ? 'disabled' : `data-act="ollama-pull" data-name="${p.name}"`} style="${got ? 'opacity:.6' : ''}"><div class="row between"><b class="mono" style="font-size:14px">${p.name}</b><span class="muted small">${got ? 'Instal·lat' : busy ? 'Descarregant…' : p.size}</span></div><div class="muted small" style="margin-top:4px">${p.note}</div></button>`; }).join('')}</div>
+      <p class="muted small">Tots els noms a <a href="https://ollama.com/library" target="_blank" rel="noopener">ollama.com/library</a>.</p>
+    </div></details>
   </div>`;
 }
 const pullDone = new Set(); // descàrregues que han acabat abans que respongués la petició
@@ -1708,6 +1744,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}` }));
+    if (machine() && state.connected) (state.info?.agents || []).filter((x) => x.available && !['ollama', 'demo'].includes(x.id)).forEach((x) => out.push({ id: 'agent:' + x.id, label: `${AGENT_NAMES[x.id] || x.id} (agent)` }));
     if (local.engine) out.push({ id: 'local', label: `Xat local · ${LOCAL_MODELS.find((x) => x.id === local.model)?.name || local.model}` });
     return out;
   },
@@ -1716,6 +1753,22 @@ window.NioBrains = {
       if (!machine()) throw new Error('No hi ha cap ordinador connectat');
       return (await api('/api/ollama/chat', { method: 'POST', body: { model: id.slice(7), messages, format: 'json' } })).content;
     }
+    if (id.startsWith('agent:')) {
+      if (!machine()) throw new Error('No hi ha cap ordinador connectat');
+      const cwd = (await api('/api/projects').catch(() => []))[0]?.path;
+      const prompt = messages.map((m) => (m.role === 'system' ? m.content : m.content)).join('\n\n') + '\n\nRespon només amb el JSON demanat, sense usar cap eina.';
+      const s = await api('/api/sessions', { method: 'POST', body: { agent: id.slice(6), cwd, mode: 'llegir', title: 'Pissarra', text: prompt } });
+      try {
+        for (let i = 0; i < 120; i++) {
+          await new Promise((r) => setTimeout(r, 1500));
+          const d = await api(`/api/sessions/${s.id}`);
+          if (d.session.state === 'error') throw new Error(d.session.error || 'L’agent ha fallat');
+          if (d.session.state === 'waiting') { api(`/api/sessions/${s.id}/stop`, { method: 'POST' }).catch(() => {}); throw new Error('L’agent demana permís per a una eina'); }
+          if (d.session.state === 'idle') { const t = d.events.filter((e) => e.kind === 'text').map((e) => e.text).join('\n'); if (t) return t; }
+        }
+        throw new Error('L’agent ha tardat massa');
+      } finally { api(`/api/sessions/${s.id}`, { method: 'DELETE' }).then(() => handle({ type: 'removed', session: s.id })).catch(() => {}); }
+    }
     if (id === 'local') {
       if (!local.engine) throw new Error('Primer obre un model a «Xat local»');
       try {
@@ -1760,11 +1813,11 @@ const LOCAL_MODELS = [
   { id: 'Qwen3-1.7B-q4f16_1-MLC', name: 'Qwen 3 · 1,7B', size: '≈ 1,3 GB', note: 'Va bé amb codi i raonaments curts.' },
   { id: 'Phi-3.5-mini-instruct-q4f16_1-MLC', name: 'Phi 3.5 mini · 3,8B', size: '≈ 2,2 GB', note: 'El més potent. Millor en tauleta o ordinador.' }
 ];
-const local = { engine: null, model: null, loading: false, progress: 0, status: '', messages: [], busy: false };
+const local = { ollama: null, engine: null, model: null, loading: false, progress: 0, status: '', messages: [], busy: false };
 const stripThink = (t) => t.replace(/<think>[\s\S]*?(<\/think>|$)/g, '').trimStart();
 function viewLocal() {
   const hasGpu = 'gpu' in navigator, chosen = local.model || LS.get('nio.localModel', LOCAL_MODELS[0].id);
-  if (!local.engine) {
+  if (!inLocalChat()) {
     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">
@@ -1774,14 +1827,15 @@ function viewLocal() {
     </div>
     ${ollamaSection()}`;
   }
-  const info = LOCAL_MODELS.find((m) => m.id === local.model);
+  const info = local.ollama ? { name: local.ollama } : LOCAL_MODELS.find((m) => m.id === local.model);
   return `<section class="chat">
-    <div class="chat-head"><span>${bot('idle')}</span><div class="grow"><h1>${esc(info?.name || local.model)}</h1><div class="sub">Model dins d’aquest dispositiu</div></div></div>
-    <div class="mode-bar"><span class="chip"><span class="agent-tag" data-agent="browser">${esc(info?.name || local.model)}</span></span><span class="chip">Al dispositiu</span><button class="chip" type="button" data-act="lm-change">Canvia de model</button><button class="chip" type="button" data-act="lm-clear">Comença de nou</button></div>
+    <div class="chat-head"><span>${bot('idle')}</span><div class="grow"><h1>${esc(info?.name || local.model)}</h1><div class="sub">${local.ollama ? `Ollama a ${esc(machine()?.name || 'l’ordinador')}` : 'Model dins d’aquest dispositiu'}</div></div></div>
+    <div class="mode-bar"><span class="chip"><span class="agent-tag" data-agent="browser">${esc(info?.name || local.model)}</span></span><span class="chip">${local.ollama ? 'A l’ordinador' : 'Al dispositiu'}</span><button class="chip" type="button" data-act="lm-change">Canvia de model</button><button class="chip" type="button" data-act="lm-clear">Comença de nou</button></div>
     <div class="feed" id="lfeed">${local.messages.length ? '' : `<div class="empty">${bot('idle')}<h2>Pregunta el que vulguis</h2><p>Va bé per resumir, reescriure textos curts o buscar idees.</p></div>`}</div>
     <div class="composer"><div class="inner"><textarea rows="1" id="lmsg" placeholder="Escriu al model…" enterkeyhint="send" aria-label="Missatge per al model"></textarea><button class="send" id="lsend" type="button" aria-label="Envia">${svg(ICON.send)}</button></div></div>
   </section>`;
 }
+const inLocalChat = () => !!(local.engine || local.ollama);
 function bindLocal() {
   const feed = $('#lfeed'); if (!feed) return;
   for (const m of local.messages) feed.appendChild(m.role === 'user' ? el(`<div class="msg-user">${esc(m.content)}</div>`) : el(`<div class="msg-ai">${md(stripThink(m.content))}</div>`));
@@ -1816,6 +1870,7 @@ async function recoverLocal(text) {
   await loadLocal(id);
 }
 async function loadLocal(id) {
+  local.ollama = null;
   local.loading = true; local.progress = 0; local.status = 'Preparant…'; render();
   try {
     const webllm = await import('https://esm.run/@mlc-ai/web-llm@0.2.86');
@@ -1838,6 +1893,11 @@ async function sendLocal() {
   const out = el('<div class="msg-ai cursor"></div>'); feed.appendChild(out); toBottom(feed);
   local.busy = true; local.stopped = false; setLocalBusy(true); let acc = '';
   try {
+    if (local.ollama) {
+      const r = await api('/api/ollama/chat', { method: 'POST', body: { model: local.ollama, messages: [{ role: 'system', content: LOCAL_SYSTEM }, ...local.messages.slice(-12)] } });
+      if (!local.stopped) acc = r.content || '';
+      out.innerHTML = md(stripThink(acc)); toBottom(feed);
+    } else {
     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,
@@ -1847,12 +1907,13 @@ async function sendLocal() {
       acc += c.choices[0]?.delta?.content || ''; out.innerHTML = md(stripThink(acc)); if (nearBottom(feed)) toBottom(feed);
       if (local.stopped) break;
     }
+    }
   } catch (e) {
     if (gpuLost(e) && !acc) { local.messages.pop(); out.remove(); feed.lastElementChild?.remove(); local.busy = false; local.stopped = false; setLocalBusy(false); return recoverLocal(text); }
     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 */ } }
+  if (local.stopped && local.engine) { try { await local.engine.interruptGenerate(); } catch { /* res */ } }
   if (gpuLost(acc.replace(/^Error: /, ''))) { local.messages.push({ role: 'assistant', content: 'La GPU del mòbil s’ha reiniciat enmig de la resposta.' }); local.busy = false; local.stopped = false; setLocalBusy(false); return recoverLocal(''); }
   local.messages.push({ role: 'assistant', content: stripThink(acc) || '…' }); local.busy = false; local.stopped = false; setLocalBusy(false);
 }
@@ -1863,9 +1924,7 @@ const controlOn = () => !!(state.info?.control?.navegador?.enabled || state.info
 // Aturada d'emergència: sempre a la vista mentre el control estigui actiu.
 function renderPanic() {
   syncScreenBtn();
-  let b = $('#panicBtn');
-  if (!controlOn() || !machine()) { b?.remove(); return; }
-  if (!b) { b = el(`<button class="panic" id="panicBtn" type="button" data-act="panic" aria-label="Aturada d’emergència">${svg(ICON.panic)}<span>Atura-ho tot</span></button>`); document.body.appendChild(b); }
+  $('#panicBtn')?.remove();
 }
 async function panicNow() {
   if (!confirm('S’aturaran tots els agents d’aquest ordinador, es rebutjaran les peticions pendents i es tancarà el navegador.')) return;
@@ -1910,7 +1969,7 @@ async function loadScreen() {
 function syncScreenBtn() { const b = $('[data-act=screen-now]'); if (b) b.disabled = !controlOn(); }
 function onScreen(msg) { if (screen && !screen.error) { screen.last = msg.shot; { const box = $('#screenBody'); if (box) box.innerHTML = screenHtml(); hydrateShots(box); } } }
 /* ---------------------------------------------------------------- pantalla remota (veure i controlar l'ordinador) */
-const RD = { on: false, ctl: false, mods: new Set(), drag: false, q: 55, blank: 0, err: 0, objUrl: null, chain: Promise.resolve(), sw: 0, tap: null, scroll: null, errAt: 0 };
+const RD = { on: false, ctl: false, mods: new Set(), drag: false, q: 55, blank: 0, err: 0, hash: '', still: 0, scale: 1, objUrl: null, chain: Promise.resolve(), sw: 0, tap: null, scroll: null, errAt: 0 };
 const RD_KEYS = [['Escape', 'Esc'], ['Tab', 'Tab'], ['ArrowUp', '↑'], ['ArrowDown', '↓'], ['ArrowLeft', '←'], ['ArrowRight', '→'], ['Enter', '⏎'], ['Backspace', '⌫']];
 const RD_MODS = [['meta', '⌘'], ['alt', '⌥'], ['ctrl', '⌃'], ['shift', '⇧']];
 const RD_SPECIAL = /^(Escape|Tab|Arrow(Up|Down|Left|Right)|Home|End|PageUp|PageDown|Delete|F([1-9]|1[0-2]))$/;
@@ -1918,7 +1977,8 @@ const RD_SPECIAL = /^(Escape|Tab|Arrow(Up|Down|Left|Right)|Home|End|PageUp|PageD
 async function remoteOpen() {
   const m = machine(); if (!m || RD.on) return;
   if (!(state.info?.control?.escriptori?.enabled || screen?.caps?.escriptori?.enabled)) return toast('Activa primer «Apps de l’escriptori» en aquest ordinador.', 5000);
-  Object.assign(RD, { two: 'scroll', z: 1, px: 0, py: 0, on: true, ctl: false, mods: new Set(), drag: false, blank: 0, err: 0, tap: null, scroll: null });
+  const slow = navigator.connection && (navigator.connection.saveData || /^(slow-2g|2g|3g)$/.test(navigator.connection.effectiveType || '') || navigator.connection.type === 'cellular');
+  Object.assign(RD, { hash: '', still: 0, scale: slow ? .6 : 1, q: slow ? 45 : 55, two: 'scroll', z: 1, px: 0, py: 0, on: true, ctl: false, mods: new Set(), drag: false, blank: 0, err: 0, tap: null, scroll: null });
   const root = document.createElement('div');
   root.className = 'rd'; root.id = 'rd'; root.setAttribute('role', 'dialog'); root.setAttribute('aria-label', 'Pantalla remota');
   root.innerHTML = `<div class="rd-bar"><button class="rd-btn" data-rd="close" type="button">Tanca</button><b class="rd-title">${esc(m.name || 'Ordinador')}</b><span class="rd-stat" id="rdStat"></span><span class="grow"></span><button class="rd-btn" data-rd="full" type="button" id="rdFull" hidden>Pantalla completa</button><div class="rd-seg" role="group" aria-label="Mode"><button data-rd="view" type="button" aria-pressed="true">Mirar</button><button data-rd="ctl" type="button" aria-pressed="false">Controlar</button></div></div>
@@ -1960,11 +2020,21 @@ async function rdLoop() {
     const started = performance.now();
     try {
       const stage = $('#rdStage'); if (!stage) break;
-      const w = Math.min(2400, Math.max(640, Math.round(stage.clientWidth * Math.min(devicePixelRatio || 1, 2) * Math.min(RD.z, 2))));
-      const res = await fetch(`${m.url}/api/desktop/frame?w=${w}&q=${RD.q}&_=${Date.now()}`, { headers: { Authorization: `Bearer ${m.token}` }, cache: 'no-store' });
+      const w = Math.min(2400, Math.max(480, Math.round(stage.clientWidth * Math.min(devicePixelRatio || 1, 2) * Math.min(RD.z, 2) * RD.scale)));
+      const res = await fetch(`${m.url}/api/desktop/frame?w=${w}&q=${RD.q}&h=${RD.hash}&_=${Date.now()}`, { headers: { Authorization: `Bearer ${m.token}` }, cache: 'no-store' });
       if (!res.ok) { const d = await res.json().catch(() => ({})); throw new Error(d.error || `Error ${res.status}`); }
+      const t1 = performance.now();
+      if (res.status === 204) { RD.still++; RD.err = 0; n++; await sleep(RD.still > 3 ? 320 : 120); continue; }
       const blob = await res.blob();
       if (!RD.on) break;
+      RD.still = 0; RD.hash = res.headers.get('x-hash') || '';
+      const dl = performance.now() - t1;
+      // Si baixar el fotograma triga massa (dades, una altra xarxa), l'abaixa de mida i qualitat; si va sobrat, el torna a pujar.
+      if (blob.size > 12000) {
+        if (dl > 450) { if (RD.scale > .4) RD.scale = Math.max(.4, RD.scale * .8); else RD.q = Math.max(32, RD.q - 6); }
+        else if (dl < 140 && started - (RD.adj || 0) > 1200) { if (RD.q < 55) RD.q = Math.min(55, RD.q + 4); else RD.scale = Math.min(1, RD.scale * 1.12); RD.adj = started; }
+        if (dl > 450) RD.adj = started;
+      }
       const img = $('#rdImg'), old = RD.objUrl, url = URL.createObjectURL(blob);
       RD.objUrl = url; img.onload = () => { if (old) URL.revokeObjectURL(old); }; img.src = url;
       RD.sw = Number(res.headers.get('x-screen-w')) || RD.sw;
@@ -1977,7 +2047,7 @@ async function rdLoop() {
       RD.err++; rdMsg(RD.err > 1 ? `${e.message || 'Sense connexió'}${/^Error|Activa|captura/.test(e.message) ? '' : ' · reconnectant…'}` : '');
       await sleep(Math.min(3000, 500 * RD.err));
     }
-    await sleep(Math.max(30, 110 - (performance.now() - started)));
+    await sleep(Math.max(0, 70 - (performance.now() - started)));
   }
 }
 function rdSend(ev) {
@@ -2021,6 +2091,20 @@ function rdZoom(z, cx, cy) {
   const r = st.getBoundingClientRect(), ox = (cx ?? r.left + r.width / 2) - (r.left + r.width / 2), oy = (cy ?? r.top + r.height / 2) - (r.top + r.height / 2), k = z / RD.z;
   RD.px = ox - (ox - RD.px) * k; RD.py = oy - (oy - RD.py) * k; RD.z = z; rdView();
 }
+async function screenNow() {
+  const m = machine(); if (!m) return;
+  toast('Fent la captura…');
+  try {
+    const res = await fetch(`${m.url}/api/desktop/frame?w=1600&q=80&_=${Date.now()}`, { headers: { Authorization: `Bearer ${m.token}` }, cache: 'no-store' });
+    if (!res.ok) throw new Error(`Error ${res.status}`);
+    const url = URL.createObjectURL(await res.blob());
+    const d = new Date(), p = (n) => String(n).padStart(2, '0');
+    const name = `nio-pantalla-${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}.jpg`;
+    openSheet(`<h2>Captura de la pantalla</h2><img class="screen-img" alt="Captura de la pantalla de l’ordinador" src="${url}" style="width:100%;border-radius:10px;margin:8px 0"><div class="row"><a class="btn ink" href="${url}" download="${name}">Desa la imatge</a><button class="btn" type="button" data-close>Tanca</button></div>`);
+  } catch {
+    try { const s = await api('/api/screen', { method: 'POST' }); onScreen({ shot: s }); toast('Captura feta'); } catch (err) { toast(`No s’ha pogut fer la captura: ${err.message}`, 5000); }
+  }
+}
 function rdSave() {
   const img = $('#rdImg'); if (!img?.src) return toast('Encara no hi ha cap imatge');
   const d = new Date(), p = (n) => String(n).padStart(2, '0');
@@ -2338,7 +2422,8 @@ document.addEventListener('click', async (e) => {
     case 'ollama-pull': return pullModel(a.dataset.name || $('#pullIn')?.value);
     case 'ollama-cancel': try { await api(`/api/ollama/pull/${encodeURIComponent(a.dataset.name)}`, { method: 'DELETE' }); } catch (err) { toast(err.message); } return;
     case 'ollama-del': return deleteModel(a.dataset.name);
-    case 'ollama-chat': try { state.info = await api('/api/info?refresh=1'); } catch { /* res */ } return newSessionSheet({ agent: 'ollama', model: a.dataset.name });
+    case 'ollama-start': return newSessionSheet({ text: OLLAMA_START });
+    case 'ollama-chat': local.ollama = a.dataset.name; local.engine = null; local.model = null; local.messages = []; return render();
     case 'retry': return connect();
     case 'model': { const s = state.sessions.get(state.route.id); if (s) modelSheet(s); return; }
     case 'mode': { const s = state.sessions.get(state.route.id); if (s) modeSheet(s); return; }
@@ -2350,7 +2435,7 @@ document.addEventListener('click', async (e) => {
     case 'job-new': return newJobSheet();
     case 'panic': return panicNow();
     case 'remote-open': remoteOpen(); return;
-    case 'screen-now': try { const s = await api('/api/screen', { method: 'POST' }); onScreen({ shot: s }); } catch (err) { toast(err.message, 4500); } return;
+    case 'screen-now': return screenNow();
     case 'mem-new': return memEdit(null);
     case 'mem-all': if (mem) delete mem.hits; return loadMemory();
     case 'activity-refresh': activity = null; return loadActivity();
@@ -2359,13 +2444,14 @@ document.addEventListener('click', async (e) => {
     case 'open-sessions': return go('#/sessions');
     case 'help': return go('#/ajuda');
     case 'more': return moreSheet();
+    case 'pantalla-tab': return pantallaTab();
     case 'folder': { const s = state.sessions.get(state.route.id); return s && folderSheet(s); }
     case 'machines': return machinesSheet();
     case 'mobile-qr': return mobileQrSheet();
     case 'mobile-hint-off': { const m = machine(); LS.set(`nio.mobHint.${m?.id || m?.url}`, true); return render(); }
     case 'git': return gitSheet(state.route.id);
     case 'lm-load': return loadLocal(local.model || LS.get('nio.localModel', LOCAL_MODELS[0].id));
-    case 'lm-change': await local.engine?.unload?.(); local.engine = null; local.model = null; return render();
+    case 'lm-change': await local.engine?.unload?.(); local.engine = null; local.model = null; local.ollama = null; local.messages = []; return render();
     case 'lm-clear': local.messages = []; return render();
     case 'palette': return palette();
     case 'tour': return tourStart();
@@ -2438,48 +2524,112 @@ $('#side').addEventListener('click', (e) => { if (e.target.closest('a, button'))
 addEventListener('keydown', (e) => { if (e.key === 'Escape' && document.body.classList.contains('nav-open')) setNav(false); });
 mq.addEventListener('change', () => setNav(false));
 /* ---------------------------------------------------------------- tutorial */
-const TOUR_KEY = 'nio.tour.v2';
-const T = Object.assign({ on: false, i: 0, seen: false }, LS.get(TOUR_KEY, {}));
+const TOUR_KEY = 'nio.tour.v3';
+const T = Object.assign({ on: false, i: 0, seen: false, busy: false, pos: null, drawn: '' }, LS.get(TOUR_KEY, {}));
+T.busy = false; T.drawn = '';
 const saveTour = () => LS.set(TOUR_KEY, { on: T.on, i: T.i, seen: T.seen });
+const PAGE = '.page .top, .top';
 const TSTEPS = [
-  { center: true, mood: 'happy', title: 'Hola, sóc en Nio.', text: 'Faig de pont entre el teu mòbil i els agents d’IA (Claude Code, Codex…) del teu ordinador o d’un servidor. En un minut t’ensenyo com es fa.', next: 'Comencem' },
-  { route: 'ordinadors', target: '#addComputer', m: '#addComputer', title: '1. Afegeix un ordinador', text: 'Hi ha tres maneres: aquest ordinador (<span class="mono">npx nio-cat</span>), un servidor per SSH (<span class="mono">usuari@servidor</span>) o un codi. nio fa la resta.' },
-  { 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: '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í.') },
-  { center: true, mood: 'happy', title: 'Ja està tot a punt.', text: 'Si mai vols repassar-ho, tens el tutorial a Ajuda.', next: 'Finalitza' }
+  { center: true, mood: 'happy', title: 'Hola, sóc en Nio.', text: 'Faig de pont entre el teu mòbil i els agents d’IA (Claude Code, Codex, Grok, Antigravity…) del teu ordinador o d’un servidor. Et faig un recorregut per tot nio, amb un clic a cada apartat. Dura uns dos minuts.', next: 'Comencem' },
+  { route: 'ordinadors', target: '#addComputer', m: '#addComputer', title: 'Afegeix un ordinador', text: 'Hi ha tres maneres: aquest ordinador (<span class="mono">npx nio-cat</span>), un servidor per SSH (<span class="mono">usuari@servidor</span>) o un codi. nio fa la resta.' },
+  { route: 'ordinadors', skipIf: () => !machine(), target: '.card.computer.active .c-actions', m: '.card.computer.active .c-actions', title: '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: 'ordinadors', skipIf: () => !machine(), target: '#screenSec', m: '#screenSec', title: 'Mira i controla la pantalla', text: 'Aquí actives «Apps de l’escriptori» i el navegador dels agents. Amb l’escriptori actiu pots veure la pantalla de l’ordinador i fer-hi captures des del mòbil.' },
+  { route: 'ordinadors', mobileOnly: true, tapOnly: '#tabbar [data-act=pantalla-tab]', target: '#tabbar [data-act=pantalla-tab]', m: '#tabbar [data-act=pantalla-tab]', title: 'Pantalla, a un toc', text: 'La pestanya «Pantalla» obre l’escriptori de l’ordinador al mòbil, com un escriptori remot, amb zoom. Si encara no està activat, t’ajuda a activar-lo.' },
+  { route: 'sessions', skipIf: () => !machine(), target: '.top [data-act=new]', m: '.top [data-act=new]', title: 'Dona feina a un agent', text: 'Una sessió és una conversa amb un agent dins d’una carpeta. Tries l’agent, la carpeta (les preferides o la que vulguis), els permisos i li expliques què ha de fer.' },
+  { route: 'sessions', skipIf: () => !machine(), target: '.session-card, .panel.empty', m: '.session-card, .panel.empty', title: 'Les teves sessions', text: 'Cada targeta té el robot del color de l’agent i diu què està fent: treballant, esperant-te o acabat. Toca’n una per continuar la conversa.' },
+  { route: 'approvals', skipIf: () => !machine(), target: PAGE, m: PAGE, title: 'Tu decideixes', text: 'En mode «Demana permís», abans d’editar un fitxer o executar una ordre, l’agent t’ho pregunta aquí. Al mòbil hi arribes amb la campana de dalt, i si actives els avisos t’arriba la notificació.' },
+  { route: 'feines', skipIf: () => !machine(), target: PAGE, m: PAGE, title: 'Feines programades', text: 'Programa que un agent faci una cosa per tu: d’aquí a una estona, cada dia o quan toqui. Tries l’agent, la carpeta i el moment, com un temporitzador.' },
+  { route: 'memoria', skipIf: () => !machine(), target: PAGE, m: PAGE, title: 'Memòria compartida', text: 'Notes en text pla que tots els agents poden llegir i escriure: preferències, decisions, context dels projectes. Així no repeteixes res a cada agent.' },
+  { route: 'mobil', target: PAGE, m: PAGE, title: 'Xat local', text: 'Un xat senzill amb un model que funciona dins del mòbil (sense internet) o amb els models d’Ollama de l’ordinador. No toca cap carpeta: només preguntes i respostes.' },
+  { route: 'pissarra', target: '#bdTools', m: '#bdTools', title: 'Pensa en dibuix', text: 'A la pissarra pots fer diagrames a mà alçada o demanar-me’ls escrivint, amb Ollama, amb un agent o amb el model del mòbil.' },
+  { route: 'activitat', skipIf: () => !machine(), target: PAGE, m: PAGE, title: 'Activitat', text: 'El registre de tot el que han fet els agents i de tot el que has aprovat o rebutjat, perquè sempre sàpigues què ha passat.' },
+  { route: 'ajustos', target: PAGE, m: PAGE, title: 'Ajustos', text: 'Aspecte, avisos, Telegram i les opcions de l’ordinador. Tot el que canvia el comportament de nio és aquí.' },
+  { 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. També hi pots repetir aquest tutorial.' },
+  { route: 'sessions', desktopOnly: true, target: '[data-act=palette]', m: '[data-act=palette]', title: 'Un últim truc', text: 'Prem ⌘K (o Ctrl+K) per anar a qualsevol lloc o obrir una sessió sense tocar el ratolí.' },
+  { center: true, route: 'sessions', mood: 'happy', title: 'Ja està tot a punt.', text: 'Si mai vols repassar-ho, tens el tutorial a Ajuda.', next: 'Finalitza' }
 ];
 const tval = (v) => (typeof v === 'function' ? v() : v);
-function tourStart() { T.on = true; T.seen = true; tourGo(0); }
-function tourEnd(silent) { T.on = false; T.seen = true; saveTour(); $('#tour').hidden = true; if (!silent) toast('Tutorial tancat. El tens al menú quan vulguis.'); }
-function tourGo(i) {
-  while (i < TSTEPS.length && TSTEPS[i].skipIf?.()) i++;
+const tskip = (st) => st.skipIf?.() || (st.mobileOnly && !mq.matches) || (st.desktopOnly && mq.matches);
+const tpause = (ms) => new Promise((ok) => setTimeout(ok, reduce ? 0 : ms));
+const twait = (find, ms = 3000) => new Promise((done) => { const t0 = performance.now(); const tick = () => { const e = find(); if (e || performance.now() - t0 > ms) done(e || null); else setTimeout(tick, 70); }; tick(); });
+const tvisible = (sel) => { const e = sel && document.querySelector(sel); return e && e.getClientRects().length && !e.closest('[inert]') ? e : null; };
+let tourRun = 0;
+function tourStart() { T.on = true; T.seen = true; $('#tour').hidden = false; tourGo(0); }
+function tourEnd(silent) { tourRun++; T.on = false; T.seen = true; T.busy = false; saveTour(); $('#tourTap').classList.remove('on', 'press'); $('#tour').hidden = true; if (!silent) toast('Tutorial tancat. El tens a Ajuda quan vulguis.'); }
+// El control que tocaria una persona per arribar a l'apartat: menú lateral, pestanya, campana o «Més».
+function tourVia(route) {
+  const h = HASH[route];
+  if (!mq.matches) return tvisible(`.side nav a[href="${h}"]`);
+  return tvisible(`#tabbar a[href="${h}"]`) || (route === 'approvals' ? tvisible(`.mbar a[href="${h}"]`) : null) || tvisible('#tabbar [data-act=more]');
+}
+// Un cercle es mou fins al control i el prem, com un clic de veritat.
+async function tourTap(e, run) {
+  const dot = $('#tourTap'), r = e.getBoundingClientRect();
+  const x = r.left + Math.min(r.width / 2, 60), y = r.top + r.height / 2;
+  if (!T.pos) { dot.classList.add('nomove'); dot.style.translate = `${innerWidth / 2}px ${innerHeight - 140}px`; void dot.offsetWidth; dot.classList.remove('nomove'); }
+  dot.classList.add('on');
+  dot.style.translate = `${x}px ${y}px`; T.pos = [x, y];
+  await tpause(620); if (run !== tourRun) return false;
+  dot.classList.add('press'); e.classList.add('tour-pressed');
+  await tpause(190); if (run !== tourRun) return false;
+  dot.classList.remove('press'); e.classList.remove('tour-pressed');
+  return true;
+}
+async function tourGo(i) {
+  const run = ++tourRun;
+  while (i < TSTEPS.length && tskip(TSTEPS[i])) i++;
   if (i >= TSTEPS.length) return tourEnd(true);
   T.i = Math.max(0, i); saveTour();
-  const st = TSTEPS[T.i];
-  if (st.route && state.route.name !== st.route) { setTimeout(() => tourDraw(true), 80); go(HASH[st.route]); }
-  else tourDraw(true);
+  const st = TSTEPS[T.i], card = $('#tourCard'), spot = $('#tourSpot'), dot = $('#tourTap');
+  $('#tour').hidden = false;
+  T.busy = true; card.classList.add('swap');
+  if (st.tapOnly) {
+    // Només es mostra el toc (la pestanya obriria la pantalla remota).
+    const c = tvisible(st.tapOnly);
+    if (c) { spot.classList.add('fade'); if (!await tourTap(c, run)) return; dot.classList.remove('on'); spot.classList.remove('fade'); }
+  } else if (st.route && state.route.name !== st.route) {
+    const via = tourVia(st.route);
+    spot.classList.add('fade');
+    if (via && !await tourTap(via, run)) return;
+    // Si és dins de «Més», s'obre el menú un instant com faria el dit.
+    if (via?.dataset?.act === 'more') await tpause(380);
+    if (run !== tourRun) return;
+    go(HASH[st.route]);
+    window.scrollTo({ top: 0, behavior: 'instant' });
+    await twait(() => state.route.name === st.route, 1500);
+    dot.classList.remove('on');
+    if (run !== tourRun) return;
+  }
+  const find = () => (st.center ? null : tvisible(tval(mq.matches && 'm' in st ? st.m : st.target)));
+  if (!st.center) await twait(find, 3200);
+  if (run !== tourRun) return;
+  T.busy = false; T.drawn = '';
+  tourDraw(true);
+  spot.classList.remove('fade');
+  card.classList.remove('swap');
+  if (run === tourRun) card.querySelector('[data-tour=next]')?.focus({ preventScroll: true });
 }
 function tourDraw(scroll) {
-  if (!T.on) return;
+  if (!T.on || T.busy) return;
   const st = TSTEPS[T.i], card = $('#tourCard'), busy = $('#sheet').open || $('#palette').open;
   $('#tour').hidden = busy; if (busy) return;
-  const n = TSTEPS.length - 2;
-  card.className = 'tour-card' + (st.center ? ' center' : '');
-  card.innerHTML = `<div class="tour-head">${bot(st.mood || 'idle')}${st.center ? '' : `<span class="tour-step">Pas ${T.i} de ${n}</span>`}<button class="tour-x" data-tour="close" type="button" aria-label="Tanca el tutorial">×</button></div>
+  const key = `${T.i}|${mq.matches}`;
+  if (T.drawn !== key) {
+    T.drawn = key;
+    const n = TSTEPS.length - 2, total = TSTEPS.slice(1, -1).filter((x) => !tskip(x)), pos = total.indexOf(st) + 1;
+    card.className = 'tour-card' + (st.center ? ' center' : '');
+    card.innerHTML = `<div class="tour-head">${bot(st.mood || 'idle')}${st.center ? '' : `<span class="tour-step">Pas ${pos} de ${total.length}</span>`}<button class="tour-x" data-tour="close" type="button" aria-label="Tanca el tutorial">×</button></div>
     <h3 id="tourT">${tval(st.title)}</h3><p>${tval(st.text)}</p>
+    ${st.center ? '' : `<div class="tour-dots" aria-hidden="true">${total.map((_, k) => `<i class="${k + 1 === pos ? 'on' : k + 1 < pos ? 'done' : ''}"></i>`).join('')}</div>`}
     <div class="tour-foot">${st.center ? '' : `<div>${T.i > 1 ? '<button class="btn sm ghost" data-tour="back" type="button">Enrere</button>' : ''}</div>`}
       <div class="row">${T.i === 0 ? '<button class="btn sm ghost" data-tour="close" type="button">Ara no</button>' : ''}<button class="btn sm ink" data-tour="next" type="button">${tval(st.next) || 'Següent'}</button></div></div>`;
-  window.NioBot?.refresh(); tourPlace(scroll);
+    window.NioBot?.refresh();
+  }
+  tourPlace(scroll);
 }
 function tourTarget() {
-  const st = TSTEPS[T.i], sel = st.center ? null : tval(mq.matches && 'm' in st ? st.m : st.target), e = sel && document.querySelector(sel);
-  if (!e || !e.getClientRects().length || e.closest('[inert]')) return null;
-  return e;
+  const st = TSTEPS[T.i], sel = st.center ? null : tval(mq.matches && 'm' in st ? st.m : st.target);
+  return tvisible(sel);
 }
 function tourPlace(scroll) {
   if (!T.on || $('#tour').hidden) return;
@@ -2518,18 +2668,18 @@ function tourPlace(scroll) {
   if (r.width < 260 && r.right + gap + cw < innerWidth - 12 && (top < 12 || r.bottom + ch > innerHeight)) { left = r.right + gap; top = r.top + r.height / 2 - ch / 2; }
   Object.assign(card.style, { left: Math.min(Math.max(12, left), innerWidth - cw - 12) + 'px', top: Math.min(Math.max(12, top), innerHeight - ch - 12) + 'px', bottom: '' });
 }
-function tourUpdate() { if (T.on) setTimeout(() => tourDraw(false), 30); }
+function tourUpdate() { if (T.on && !T.busy) setTimeout(() => tourDraw(false), 30); }
 $('#tour').addEventListener('click', (e) => {
   const b = e.target.closest('[data-tour]'); if (!b) return;
   if (b.dataset.tour === 'close') tourEnd(false);
   else if (b.dataset.tour === 'next') tourGo(T.i + 1);
-  else if (b.dataset.tour === 'back') { let i = T.i - 1; while (i > 0 && TSTEPS[i].skipIf?.()) i--; tourGo(i); }
+  else if (b.dataset.tour === 'back') { let i = T.i - 1; while (i > 0 && tskip(TSTEPS[i])) i--; tourGo(i); }
 });
-addEventListener('resize', () => tourPlace(false));
-addEventListener('scroll', () => tourPlace(false), { passive: true });
+addEventListener('resize', () => { if (T.on && !T.busy) tourPlace(false); });
+addEventListener('scroll', () => { if (T.on && !T.busy) tourPlace(false); }, { passive: true });
 addEventListener('keydown', (e) => {
   if (!T.on || $('#sheet').open || $('#palette').open || e.target.closest?.('input, textarea')) return;
-  if (e.key === 'Escape') tourEnd(false); else if (e.key === 'ArrowRight') tourGo(T.i + 1); else if (e.key === 'ArrowLeft' && T.i > 1) tourGo(T.i - 1);
+  if (e.key === 'Escape') tourEnd(false); else if (e.key === 'ArrowRight') tourGo(T.i + 1); else if (e.key === 'ArrowLeft' && T.i > 1) { let i = T.i - 1; while (i > 0 && tskip(TSTEPS[i])) i--; tourGo(i); }
 });
 $('#sheet').addEventListener('close', () => setTimeout(() => tourDraw(false), 30));
 $('#palette').addEventListener('close', () => setTimeout(() => tourDraw(false), 30));

package/web/app/index.html

@@ -65,6 +65,7 @@
 <div class="tour" id="tour" hidden>
   <div class="tour-spot" id="tourSpot"></div>
   <div class="tour-card" id="tourCard" role="dialog" aria-modal="false" aria-labelledby="tourT"></div>
+  <span class="tour-tap" id="tourTap" aria-hidden="true"></span>
 </div>
 <nav class="tabbar" id="tabbar" aria-label="Navegació"></nav>
 <div class="toasts" id="toasts" popover="manual" aria-live="polite"></div>

package/web/app/style.css

@@ -66,7 +66,7 @@ button { cursor: pointer; }
 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; }
 .page { padding: 32px 40px 96px; max-width: 1080px; width: 100%; }
-.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
+.top { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
 .top h1 { font-size: 30px; font-weight: 500; letter-spacing: -.05em; line-height: 1.1; }
 .top p { margin-top: 4px; color: var(--fg-muted); }
 .mbar, .scrim { display: none; }
@@ -186,7 +186,7 @@ button.chip:hover { border-color: var(--fg); }
 /* ---------- Sessions ---------- */
 .session-card .title { font-size: 16px; font-weight: 500; letter-spacing: -.02em; margin-top: 8px; }
 .session-card .last.err { color: var(--red); }
-.session-card .last { color: var(--fg-muted); font-size: 14px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.session-card .last { color: var(--fg-muted); font-size: 14px; margin-top: 4px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .session-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--fg-muted); }
 .fab { position: fixed; right: 24px; bottom: calc(24px + var(--safe-b)); z-index: 15; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px 0 16px; border: 0; border-radius: 16px; background: var(--fg); color: var(--bg); font-weight: 600; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--fg) 70%, transparent); transition: transform .15s; }
 .fab:active { transform: scale(.97); }
@@ -304,6 +304,23 @@ dialog.sheet[open] { animation: pop .22s var(--ease); }
 .tour-card h3 { font-size: 19px; font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
 .tour-card.center h3 { font-size: 26px; letter-spacing: -.045em; }
 .tour-card p { font-size: 14px; color: var(--fg-muted); }
+.tour-card { transition: left .35s var(--ease), top .35s var(--ease), opacity .25s; }
+.tour-card.swap { opacity: .0; pointer-events: none; }
+.tour-spot.fade { box-shadow: 0 0 0 9999px color-mix(in srgb, var(--fg) 42%, transparent); }
+.tour-dots { display: flex; gap: 5px; width: 100%; }
+.tour-card.center .tour-dots { display: none; }
+.tour-dots i { flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 14%, transparent); transition: background .3s; }
+.tour-dots i.done { background: color-mix(in srgb, var(--fg) 45%, transparent); }
+.tour-dots i.on { background: var(--fg); }
+.tour-tap { position: fixed; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 0 2px var(--fg), 0 6px 16px rgba(0,0,0,.3); opacity: 0; pointer-events: none; z-index: 2; transition: translate .6s var(--ease), opacity .25s, scale .15s; }
+.tour-tap.on { opacity: 1; }
+.tour-tap.press { scale: .76; }
+.tour-tap.nomove { transition: none; }
+.tour-tap::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--fg); opacity: 0; }
+.tour-tap.press::after { animation: tourRipple .5s ease-out; }
+@keyframes tourRipple { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
+.tour-pressed { scale: .97; transition: scale .15s; }
+@media (prefers-reduced-motion: reduce) { .tour-tap, .tour-card, .tour-spot { transition: none !important; } .tour-tap.press::after { animation: none; } }
 .tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding-top: 4px; }
 .tour-card.center .tour-foot { justify-content: center; }
 
@@ -395,7 +412,11 @@ body.board-mode .view-enter { animation: none; }
 .choice .body { min-width: 0; }
 @media (max-width: 820px) { .choice-grid { grid-template-columns: 1fr; } }
 .fs-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.fs-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
+.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; }
+.crumb { background: none; border: 0; padding: 6px 6px; margin: 0; border-radius: 8px; color: var(--muted, #8a8f98); font: inherit; cursor: pointer; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.crumb:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
+.crumb.cur { color: inherit; font-weight: 600; cursor: default; }
+.crumbs .sl { opacity: .4; flex: none; }
 .fs-list { max-height: 240px; overflow: auto; }
 
 /* Assistent «Nova sessió»: drawer fix al telèfon, capçalera i peu fixos, cos amb scroll */
@@ -650,7 +671,7 @@ dialog.sheet.wiz.compact .sheet-in, .compact .wiz-body { flex: 0 1 auto; }
 .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 { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 36px 0 14px; }
 .sec-head .sec { margin: 0; }
 .sec-head p { margin-top: 4px; max-width: 640px; }
 
@@ -684,3 +705,10 @@ html.rd-open, html.rd-open body { overflow: hidden; }
 .rd-sep { width: 1px; align-self: stretch; background: #36363a; }
 .rd-msg { bottom: 84px; }
 @media (max-width: 560px) { .rd-tools { gap: 4px; padding: 5px; } .rd-tools .rd-btn { padding: 12px 10px; min-width: 44px; font-size: 14px; } .rd-pct { min-width: 52px !important; } }
+
+.session-card { padding: 14px 16px; }
+.session-card .meta { margin-top: 8px; }
+#jobWhen { flex-wrap: wrap; }
+#jobWhen button { flex: 1 0 auto; padding: 0 12px; }
+#jobTimes .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
+#jobMinsU { flex: 1; }

package/web/index.html

@@ -198,7 +198,7 @@ main strong { font-weight: 600; }
 </main>
 
 <footer class="footer">
-  <div class="page">© 2026 nio // un projecte de <a href="https://f.cat">f.cat</a> · <a href="mailto:hola@nio.cat">hola@nio.cat</a> · <a href="/privadesa">Privadesa</a></div>
+  <div class="page">© 2026 nio // un projecte de <a href="https://f.cat">f.cat</a> · <a href="mailto:hola@nio.cat">hola@nio.cat</a> · <a href="/novetats">Novetats</a> · <a href="/privadesa">Privadesa</a></div>
 </footer>
 <script src="/bot.js" defer></script>
 <script>

package/web/privadesa.html

@@ -141,7 +141,7 @@ main strong { font-weight: 600; }
 </main>
 
 <footer class="footer">
-  <div class="page">© 2026 nio // un projecte de <a href="https://f.cat">f.cat</a> · <a href="mailto:hola@nio.cat">hola@nio.cat</a> · <a href="/privadesa">Privadesa</a></div>
+  <div class="page">© 2026 nio // un projecte de <a href="https://f.cat">f.cat</a> · <a href="mailto:hola@nio.cat">hola@nio.cat</a> · <a href="/novetats">Novetats</a> · <a href="/privadesa">Privadesa</a></div>
 </footer>
 <script src="/bot.js" defer></script>
 </body>

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-v25';
+const SHELL = 'nio-shell-v33';
 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) => {