nio-cat 0.9.9 → 0.9.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.9.9",
+  "version": "0.9.10",
   "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/claude.js

@@ -20,6 +20,8 @@ module.exports = {
     // Conversa del terminal: el primer missatge en fa una branca; després ja continua la pròpia.
     if (session.nativeId && session.forkNative) { args.push('--fork-session'); delete session.forkNative; }
     if (session.model) args.push('--model', session.model);
+    // Que l'agent posi un títol que resumeixi la feina (eina MCP de nio; el hub el desa).
+    args.push('--append-system-prompt', 'Treballes dins una sessió de nio. Quan entenguis la tasca, crida l’eina mcp__nio__sessio_titol amb un títol de 3-7 paraules que la resumeixi, en l’idioma de l’usuari; torna-la a cridar només si la feina canvia de tema.');
 
     if (session.mode === 'tot' && process.getuid?.() === 0) {
       ctx.fail('Claude Code no deixa el mode «Via lliure» quan s’executa com a root. Canvia els permisos a «Demana permís» o engega nio amb un usuari normal.');

package/src/claude-hook.js

@@ -6,6 +6,7 @@
 const READ_ONLY = new Set([
   'Read', 'Glob', 'Grep', 'LS', 'NotebookRead', 'WebSearch', 'WebFetch',
   'TodoWrite', 'TodoRead', 'Task', 'Agent', 'ToolSearch', 'Skill', 'BashOutput',
+  'mcp__nio__sessio_titol',
 ]);
 
 function reply(decision, reason) {

package/src/hub.js

@@ -5,6 +5,7 @@ const path = require('path');
 const crypto = require('crypto');
 const { EventEmitter } = require('events');
 const { byId, binPath } = require('./agents');
+const TITLE_TOOL = /(^|[._])sessio_titol$/;
 const { HOME, save } = require('./config');
 const push = require('./push');
 const usage = require('./usage');
@@ -206,7 +207,7 @@ class Hub extends EventEmitter {
     const s = this.get(sid);
     if (!s) throw httpErr(404, 'Aquesta sessió no existeix');
     if (patch.mode && ['llegir', 'preguntar', 'tot'].includes(patch.mode)) s.mode = patch.mode;
-    if (typeof patch.title === 'string') s.title = patch.title.slice(0, 120);
+    if (typeof patch.title === 'string') { s.title = patch.title.slice(0, 120); s.titleBy = 'user'; } // un nom posat a mà no el canvia l'agent
     if (typeof patch.model === 'string') s.model = patch.model.slice(0, 80);
     if (typeof patch.cwd === 'string' && path.resolve(patch.cwd) !== s.cwd) {
       const cwd = path.resolve(patch.cwd);
@@ -285,6 +286,12 @@ class Hub extends EventEmitter {
       stream: (t) => this.chunk(s, String(t)),
       tool: ({ id: tid, name, input }) => {
         toolNames.set(tid, name);
+        // L'agent posa títol a la sessió amb l'eina MCP sessio_titol (Claude: mcp__nio__sessio_titol, Codex: nio.sessio_titol).
+        if (TITLE_TOOL.test(name || '') && typeof input === 'string') try { input = JSON.parse(input); } catch { input = {}; }
+        if (TITLE_TOOL.test(name || '') && s.titleBy !== 'user') {
+          const t = String(input?.titol || '').replace(/\s+/g, ' ').trim().replace(/[.。]$/, '').slice(0, 80);
+          if (t && t !== s.title) { s.title = t; s.titleBy = 'agent'; this.touch(s); }
+        }
         const inp = summarizeInput(input);
         this.push(s, 'tool', { id: tid, name, input: inp });
         this.audit.add({ type: 'tool', session: s.id, agent: s.agent, title: s.title, cwd: s.cwd, tool: name, what: describe(name, inp), mode: s.mode });

package/src/mcp.js

@@ -50,6 +50,14 @@ const TOOLS = [
       return `Desat a ${r.path} (${r.size} B).`;
     },
   },
+  {
+    name: 'sessio_titol',
+    description: 'Posa títol a la sessió de nio on treballes: 3-7 paraules que resumeixin la feina (p. ex. «Mode fosc a la botiga»), perquè l’usuari la reconegui a la llista. Crida-la quan entenguis la tasca i torna-la a cridar si la feina canvia de tema. Fora de nio no fa res.',
+    inputSchema: { type: 'object', properties: { titol: { type: 'string', description: 'Títol curt, sense punt final' } }, required: ['titol'], additionalProperties: false },
+    annotations: { readOnlyHint: true },
+    // El títol el posa nio quan veu passar aquesta crida (hub.js); aquí només es confirma.
+    run: ({ titol }) => (String(titol || '').trim() ? `Títol: ${String(titol).trim().slice(0, 80)}` : 'Falta el títol.'),
+  },
 ];
 
 function serve({ input = process.stdin, output = process.stdout } = {}) {
@@ -64,7 +72,7 @@ function serve({ input = process.stdin, output = process.stdout } = {}) {
           protocolVersion: params?.protocolVersion || '2025-06-18',
           capabilities: { tools: {} },
           serverInfo: { name: 'nio', version: require('../package.json').version },
-          instructions: 'Memòria compartida de nio (fitxers markdown en aquest ordinador). Consulta-la a l’inici d’una tasca (memoria_cerca o memoria_llegeix preferencies.md) i desa-hi el que valgui la pena recordar.',
+          instructions: 'Memòria compartida de nio (fitxers markdown en aquest ordinador). Consulta-la a l’inici d’una tasca (memoria_cerca o memoria_llegeix preferencies.md) i desa-hi el que valgui la pena recordar. Si treballes dins una sessió de nio, posa-li un títol curt amb sessio_titol.',
         });
       case 'ping':
         return reply({});

package/web/app/app.js

@@ -213,14 +213,14 @@ async function api(path, opts = {}) {
   return data;
 }
 
-let streamCtrl = null, retry = 0, gotHello = false;
+let streamCtrl = null, retry = 0, gotHello = false, alive = 0; // alive: última vegada que ha arribat alguna cosa de l'ordinador
 async function pollLoop(ctrl) {
   let first = true;
   while (!ctrl.signal.aborted) {
     try {
       const [list, aps] = await Promise.all([api('/api/sessions'), api('/api/approvals')]);
       if (ctrl.signal.aborted) return;
-      state.connected = true; state.lastError = null;
+      state.connected = true; state.lastError = null; alive = Date.now();
       if (first) { first = false; state.synced = true; const r = state.route; state.sessions = new Map(list.map((x) => [x.id, x])); state.approvals = new Map(aps.map((a) => [a.id, a])); if (r.name === 'session') openSession(r.id); else render(); }
       else {
         const r = state.route, seen = new Set();
@@ -297,7 +297,7 @@ async function connect() {
     const res = await fetch(`${m.url}/api/stream?d=${encodeURIComponent(deviceId())}&k=${isPhone() ? 'phone' : 'desktop'}`, { headers: { Authorization: `Bearer ${m.token}` }, signal: ctrl.signal, cache: 'no-store' });
     if (res.status === 401) throw Object.assign(new Error('La clau no és vàlida. Torna a connectar amb el codi QR.'), { fatal: true });
     if (!res.ok || !res.body) throw new Error(`Error ${res.status}`);
-    state.connected = true; state.lastError = null; retry = 0;
+    state.connected = true; state.lastError = null; retry = 0; alive = Date.now();
     rememberIdentity(m.url, state.info.identity);
     renameMachine(state.info.host, state.info.id); syncServiceWorker(); render(); brainsForBoard(); loadVoice().then(() => state.route.name === 'session' && renderComposer?.()); flushQueue();
     const reader = res.body.getReader(), dec = new TextDecoder(); let buf = '';
@@ -306,6 +306,7 @@ async function connect() {
     const hw = setTimeout(() => { if (!gotHello) { poll = true; reader.cancel().catch(() => {}); } }, 5000);
     for (;;) {
       const { value, done } = await reader.read().catch(() => ({ done: true })); if (done) break;
+      alive = Date.now();
       buf += dec.decode(value, { stream: true }); let i;
       while ((i = buf.indexOf('\n\n')) >= 0) {
         const block = buf.slice(0, i); buf = buf.slice(i + 2);
@@ -922,7 +923,7 @@ async function pantallaTab() {
   });
 }
 function moreSheet() {
-  const item = (k) => `<a class="more-link" href="${HASH[k]}" ${state.route.name === k ? 'aria-current="page"' : ''}><span>${VIEWS[k].label}</span>${k === 'approvals' && state.approvals.size ? `<span class="badge">${state.approvals.size}</span>` : ''}</a>`;
+  const item = (k) => `<a class="more-link" href="${HASH[k]}" ${state.route.name === k ? 'aria-current="page"' : ''}>${svg(VIEWS[k].icon)}<span>${VIEWS[k].label}</span>${k === 'approvals' && state.approvals.size ? `<span class="badge">${state.approvals.size}</span>` : ''}</a>`;
   const groups = [...new Set(Object.values(VIEWS).map((v) => v.group))].map((group) => [group, Object.keys(VIEWS).filter((k) => VIEWS[k].group === group)]);
   openSheet(`<h2>Més</h2><nav class="more-sections" aria-label="Totes les seccions">${groups.map(([title, keys]) => `<section><h3>${title}</h3><div>${keys.map(item).join('')}</div></section>`).join('')}</nav>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
 }
@@ -1310,7 +1311,10 @@ const hhmm = (t) => new Date(t * 1000).toLocaleString('ca', { weekday: t * 1000
 function usageChip(agent) {
   const u = state.usage?.[agent]; if (!u?.windows?.length) return '';
   const tip = u.windows.map((w) => `${w.label}: ${Math.round(w.used * 100)} %${w.resetsAt ? ` · es reinicia ${hhmm(w.resetsAt)}` : ''}`).join('\n');
-  return `<span class="chip mono usage" title="${esc(`Ús de la subscripció\n${tip}`)}">${svg(CHIP_ICON.usage)}${u.windows.map((w) => `<span class="uw" data-hi="${w.used >= 0.8 ? 1 : 0}">${esc(w.label)} ${Math.round(w.used * 100)}%</span>`).join('')}</span>`;
+  // Etiquetes curtes: «5h», «7d». La icona és un anell que s'omple amb la finestra més plena.
+  const short = (l) => (l === 'setmana' ? '7d' : l.replace(/\s+/g, '')), top = Math.max(...u.windows.map((w) => w.used)), pct = Math.round(top * 100);
+  const ring = `<svg class="ico ring" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5" class="rt"/><circle cx="12" cy="12" r="8.5" pathLength="100" stroke-dasharray="${Math.max(pct, 2)} 100" transform="rotate(-90 12 12)" class="rv"/></svg>`;
+  return `<span class="chip mono usage" data-hi="${top >= 0.8 ? 1 : 0}" title="${esc(`Ús de la subscripció\n${tip}`)}">${ring}${u.windows.map((w) => `<span class="uw" data-hi="${w.used >= 0.8 ? 1 : 0}">${esc(short(w.label))} (${Math.round(w.used * 100)}%)</span>`).join('')}</span>`;
 }
 function renderSessionHead() {
   renderChrome();
@@ -1423,6 +1427,7 @@ 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' && TITLE_TOOL.test(e.name || '')) return; // el títol ja es veu a dalt i a la línia «Títol»
   if (e.kind === 'tool_result') {
     const t = toolEls.get(e.id);
     if (t) {
@@ -1448,12 +1453,15 @@ function putEvent(e, scroll = true) {
   if (scroll && e.kind === 'user' && pinNext && !old) { pinNext = false; return pinMessage(feed, node); }
   if (scroll) follow(feed, stick);
 }
+// L'agent posa títol a la sessió amb l'eina sessio_titol de nio (Claude: mcp__nio__sessio_titol, Codex: nio.sessio_titol).
+const TITLE_TOOL = /(^|[._])sessio_titol$/;
 function eventNode(e) {
   const s = state.sessions.get(state.route.id);
   switch (e.kind) {
     case 'user': return el(`<div class="msg-user">${esc(e.text)}</div>`);
     case 'text': return el(`<div class="msg-ai ${e.open && s?.state === 'running' ? 'cursor' : ''}" data-seq="${e.seq}">${md(e.text)}${!e.open && ttsOn() ? `<button class="speak" type="button" data-speak aria-label="Escolta la resposta">${svg(ICON.speaker)}<span>Escolta</span></button>` : ''}</div>`);
-    case 'tool': return el(`<details class="tool"><summary><span class="name">${esc(e.name)}</span><span class="arg">${esc(toolArg(e.input))}</span><span class="st">…</span></summary><pre>${esc(prettyInput(e.input))}</pre></details>`);
+    case 'tool': if (TITLE_TOOL.test(e.name || '')) return el(`<div class="ev-info">Títol: «${esc(e.input?.titol || '')}»</div>`);
+      return el(`<details class="tool"><summary><span class="name">${esc(e.name)}</span><span class="arg">${esc(toolArg(e.input))}</span><span class="st">…</span></summary><pre>${esc(prettyInput(e.input))}</pre></details>`);
     case 'tool_result': return el(`<details class="tool"><summary><span class="name">${esc(e.name || 'Eina')}</span><span class="arg"></span><span class="st ${e.error ? 'err' : 'ok'}">${e.error ? '✕' : '✓'}</span></summary><pre class="out">${esc(e.output)}</pre></details>`);
     case 'approval': { const a = state.approvals.get(e.approval) || {}; return el(approvalCard({ ...a, approval: e.approval, tool: e.tool, input: e.input, state: e.state && e.state !== 'pending' ? e.state : a.state || e.state }, false)); }
     case 'error': return el(`<div class="ev-error" role="alert"><b>Error</b><span>${esc(e.text)}</span></div>`);
@@ -3014,7 +3022,19 @@ if ('serviceWorker' in navigator) {
   navigator.serviceWorker.addEventListener('message', (e) => { if (e.data?.type === 'open-session' && e.data.id) go(`#/s/${e.data.id}`); });
 }
 addEventListener('hashchange', route);
-document.addEventListener('visibilitychange', () => { if (!document.hidden && machine() && !state.connected) connect(); });
+// El mòbil congela la pàgina en segon pla i el flux queda mort sense cap error: l'ordinador envia un ping cada 15 s,
+// així que si fa més de 40 s que no arriba res (o en tornar a l'app, més de 20 s), es torna a connectar sol.
+function revive(maxIdle) {
+  if (!machine() || isDemo(machine()) || document.hidden) return;
+  // Desconnectat, el vigilant no talla els reintents en curs; en tornar a l'app sí que es torna a provar de seguida.
+  if (state.connected ? Date.now() - alive < maxIdle : maxIdle >= 40000) return;
+  retry = 0; reconTry.clear(); connect();
+}
+document.addEventListener('visibilitychange', () => revive(20000));
+addEventListener('pageshow', (e) => { if (e.persisted) revive(0); });
+addEventListener('online', () => revive(0));
+addEventListener('focus', () => revive(20000));
+setInterval(() => revive(40000), 10000);
 setInterval(() => { if (!document.hidden && state.route.name === 'sessions') render(); }, 60000);
 const qs = new URLSearchParams(location.search).get('s');
 if (qs) history.replaceState(null, '', location.pathname + `#/s/${qs}`);

package/web/app/style.css

@@ -85,8 +85,8 @@ kbd { font: 600 11px var(--font); padding: 1px 6px; border: 1px solid var(--bord
   body.side-collapsed .brand .word { visibility: hidden; }
   body.side-collapsed .side nav a .l, body.side-collapsed .kbd .l, body.side-collapsed .kbd kbd, body.side-collapsed .conn span, body.side-collapsed .conn svg { display: none; }
   body.side-collapsed .conn { padding-left: 0; justify-content: center; }
-  body.side-collapsed .side nav .grp { font-size: 0; padding: 9px 13px 5px; }
-  body.side-collapsed .side nav .grp::before { content: ''; display: block; height: 1px; background: var(--border); }
+  body.side-collapsed .side nav .grp { font-size: 0; margin-top: 8px; padding: 8px 0 0; }
+  body.side-collapsed .side nav .grp::before { left: 10px; right: 10px; }
   body.side-collapsed .side nav .grp:first-child { display: none; }
   body.side-collapsed .side nav a .badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
 }
@@ -135,7 +135,11 @@ button.chip:hover { border-color: var(--fg); }
 .chip.waiting { background: var(--lemon); border-color: var(--lemon); }
 .chip.error { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
 .chip.usage { gap: 6px; }
-.chip.usage .uw + .uw::before { content: '·'; margin-right: 6px; color: var(--fg-muted); font-weight: 400; }
+.chip.usage .uw + .uw::before { content: '//'; margin-right: 6px; color: var(--fg-muted); font-weight: 400; opacity: .7; }
+.chip.usage .ring { width: 15px; height: 15px; stroke-width: 3; }
+.chip.usage .ring .rt { stroke: color-mix(in srgb, currentColor 18%, transparent); }
+.chip.usage .ring .rv { stroke: var(--moss); }
+.chip.usage[data-hi="1"] .ring .rv { stroke: var(--red); }
 .chip.usage .uw[data-hi="1"] { color: var(--red); font-weight: 600; }
 .chip.beta { height: 20px; padding: 0 7px; font-size: 10px; color: var(--fg-muted); }
 .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-in-out infinite; }
@@ -185,6 +189,9 @@ button.chip:hover { border-color: var(--fg); }
 .try h2 { font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
 .side nav .grp { display: block; padding: 14px 13px 4px; font-size: 11px; font-weight: 600; color: var(--fg-muted); letter-spacing: .02em; }
 .side nav .grp:first-child { padding-top: 0; }
+/* Cada apartat comença amb una línia fina, alineada amb el text dels enllaços. */
+.side nav .grp:not(:first-child) { position: relative; margin-top: 10px; padding-top: 18px; }
+.side nav .grp:not(:first-child)::before { content: ''; position: absolute; top: 0; left: 13px; right: 13px; height: 1px; background: color-mix(in srgb, var(--border) 85%, transparent); }
 
 /* ---------- Sessions ---------- */
 .session-card .title { font-size: 16px; font-weight: 500; letter-spacing: -.02em; margin-top: 8px; }
@@ -360,6 +367,7 @@ body.board-mode .view-enter { animation: none; }
   body.nav-open .side { transform: none; box-shadow: 24px 0 60px -30px color-mix(in srgb, var(--fg) 45%, transparent); }
   .side.dragging { transition: none; }
   .side nav a { padding: 12px; font-size: 16px; }
+  .side nav, .side .foot { flex-shrink: 0; } /* el calaix fa scroll; la llista no s'encongeix sota el peu */
   .side .foot .kbd kbd { display: none; }
   .scrim { display: block; position: fixed; inset: 0; z-index: 45; background: color-mix(in srgb, var(--fg) 30%, transparent); opacity: 0; pointer-events: none; transition: opacity .3s ease-out; }
   body.nav-open .scrim { opacity: 1; pointer-events: auto; }
@@ -372,6 +380,8 @@ body.board-mode .view-enter { animation: none; }
   .cmd.big .btn { height: 38px; }
   .paste .pair-form { flex-direction: column; }
   .side nav .grp { padding: 16px 12px 4px; }
+  .side nav .grp:not(:first-child) { margin-top: 12px; padding-top: 20px; }
+  .side nav .grp:not(:first-child)::before { left: 12px; right: 12px; }
   .top h1 { font-size: 26px; }
   /* Al mòbil només fa scroll el document: res de contenidors amb scroll propi. */
   .chat { height: auto; min-height: calc(100dvh - 56px - var(--safe-t)); }
@@ -751,11 +761,14 @@ body.chat-mode .demo-bar, body.board-mode .demo-bar { display: none; }
 .feed { position: relative; }
 
 /* Totes les seccions, amb controls còmodes de tocar. */
-.more-sections { display: grid; gap: 22px; margin-top: 20px; }
-.more-sections h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
+.more-sections { display: grid; gap: 0; margin-top: 16px; }
+.more-sections section + section { margin-top: 14px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent); }
+.more-sections h3 { margin: 0 0 4px; padding-left: 12px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
 .more-sections section > div { display: grid; }
 .more-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
 .more-link > span:first-of-type { flex: 1; }
+.more-link > .ico:first-child { width: 20px; height: 20px; color: var(--fg-muted); }
+.more-link[aria-current="page"] > .ico:first-child { color: var(--fg); }
 .more-link > .ico:last-child { width: 14px; color: var(--fg-muted); }
 .more-link:hover, .more-link[aria-current="page"] { background: var(--bg-2); }
 .voice-extras { border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; }

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-v50';
+const SHELL = 'nio-shell-v51';
 const FILES = ['/app', '/app/style.css', '/app/notes.css', '/app/call.css', '/app/app.js', '/app/notes.js', '/app/call.js', '/app/demo.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
 
 self.addEventListener('install', (e) => {