nio-cat 0.9.10 → 0.9.11

package/package.json

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

@@ -70,11 +70,11 @@ async function pull(name, onProgress, signal) {
 }
 
 // Una resposta d'un sol cop (sense flux), per exemple per a la pissarra.
-async function chat({ model, messages, format, think, maxTokens, signal }) {
+async function chat({ model, messages, format, think, maxTokens, numCtx, signal }) {
   const res = await fetch(`${base()}/api/chat`, {
     method: 'POST',
     headers: { 'content-type': 'application/json' },
-    body: JSON.stringify({ model, messages, stream: false, ...(format ? { format } : {}), ...(think === false ? { think: false } : {}), options: { temperature: 0.2, ...(maxTokens ? { num_predict: maxTokens } : {}) } }),
+    body: JSON.stringify({ model, messages, stream: false, ...(format ? { format } : {}), ...(think === false ? { think: false } : {}), options: { temperature: 0.2, ...(maxTokens ? { num_predict: maxTokens } : {}), ...(numCtx ? { num_ctx: numCtx } : {}) } }),
     ...(signal ? { signal } : {}),
   });
   if (!res.ok) throw new Error(`Ollama ha tornat un error ${res.status}: ${await res.text()}`);

package/src/call.js

@@ -65,7 +65,7 @@ class Call {
     if (!r.ok) {
       const d = j?.detail;
       const msg = (typeof d === 'string' ? d : d?.message || (Array.isArray(d) ? d.map((x) => x.msg).join('; ') : '') || j?.message || t || `Error ${r.status}`);
-      throw Object.assign(httpErr(r.status === 401 ? 400 : 502, `ElevenLabs: ${clip(msg, 220)}`), { upstream: r.status });
+      throw Object.assign(httpErr(r.status === 401 ? 400 : 502, require('./voice').elPermHint(msg) || `ElevenLabs: ${clip(msg, 220)}`), { upstream: r.status });
     }
     return j;
   }

package/src/notes.js

@@ -49,6 +49,16 @@ class Notes {
     try { this.notes = JSON.parse(fs.readFileSync(FILE, 'utf8')); } catch { /* encara no n'hi ha */ }
     const old = Date.now() - TRASH_DAYS * 864e5;
     this.notes = this.notes.filter((n) => !n.trashed || n.trashed > old);
+    this.queues = new Map(); // cues per nota: «t:<id>» transcripció en ordre, «s:<id>» apunts i resum
+    this.parting = new Map();
+    // Si nio es va aturar enmig d'una classe: es reprèn el que quedava a mitges.
+    setImmediate(() => {
+      for (const n of this.notes) {
+        if (!n.live) continue;
+        for (const sg of n.live.segs) if (sg.state === 'transcribing') this.queue(`t:${n.id}`, () => this.liveTranscribe(n, sg));
+        if (n.live.state === 'closing' || n.live.state === 'summarizing') this.liveFinish(n);
+      }
+    });
   }
 
   save() {
@@ -85,6 +95,7 @@ class Notes {
     const n = this.get(id);
     if (!n.trashed && !forever) return this.patch(id, { trashed: true });
     for (const a of n.audio) fs.rm(this.audioFile(n, a), { force: true }, () => {});
+    for (const sg of n.live?.segs || []) fs.rm(this.liveFile(n, sg), { force: true }, () => {});
     this.notes = this.notes.filter((x) => x !== n);
     this.save();
     this.hub.emit('out', { type: 'note-gone', id });
@@ -136,6 +147,164 @@ class Notes {
     if (this.notes.includes(n)) { n.updated = Date.now(); this.save(); this.emit(n); }
   }
 
+  // ---------- Classe o reunió en directe
+  // El mòbil grava trossos de ~20 s i els envia en ordre. Cada tros es transcriu (en ordre, un darrere l'altre);
+  // cada ~4-5 minuts de veu, un model en fa apunts mentre la gravació continua; en acabar, el resum de tot.
+  queue(key, fn) {
+    const p = (this.queues.get(key) || Promise.resolve()).then(fn).catch(() => {});
+    this.queues.set(key, p);
+    return p;
+  }
+  liveFile(n, sg) { return path.join(AUDIO, `${n.id}-live-${sg.seq}.${extOf(sg.mime)}`); }
+
+  liveStart(b = {}) {
+    const kind = LIVE_KINDS[b.kind] ? b.kind : 'classe';
+    const when = new Date().toLocaleString('ca-ES', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
+    const title = `${LIVE_KINDS[kind]} · ${when}`;
+    const n = this.create({ title, labels: [kind === 'classe' ? 'classe' : 'reunió'] });
+    n.live = { kind, engine: str(b.engine, 80), lang: LIVE_LANGS.includes(b.lang) ? b.lang : 'ca', state: 'rec', started: Date.now(), ended: 0, segs: [], parts: [], error: '', autoTitle: title };
+    this.save(); this.emit(n);
+    return n;
+  }
+
+  liveResume(id) {
+    const n = this.get(id), L = n.live;
+    if (!L) throw httpErr(400, 'Aquesta nota no és d’una classe ni d’una reunió');
+    if (L.state === 'closing' || L.state === 'summarizing') throw httpErr(409, 'Ara mateix l’estic resumint. Espera que acabi.');
+    L.state = 'rec'; L.error = ''; n.updated = Date.now();
+    this.save(); this.emit(n);
+    return n;
+  }
+
+  liveSeg(id, buf, mime, q) {
+    const n = this.get(id), L = n.live;
+    if (!L) throw httpErr(400, 'Aquesta nota no és d’una classe ni d’una reunió');
+    const seq = Math.max(0, Math.floor(Number(q.seq) || 0));
+    if (L.segs.some((x) => x.seq === seq)) return { ok: true, seq, dup: true }; // el mòbil l'ha tornat a enviar
+    if (!buf?.length) throw httpErr(400, 'El tros d’àudio és buit');
+    if (L.segs.length >= 2000) throw httpErr(413, 'Aquesta gravació ja és massa llarga');
+    const sg = { seq, at: Math.max(0, Number(q.at) || 0), dur: Math.max(0, Number(q.dur) || 0), mime, state: 'transcribing', text: '', error: '' };
+    fs.mkdirSync(AUDIO, { recursive: true, mode: 0o700 });
+    fs.writeFileSync(this.liveFile(n, sg), buf);
+    L.segs.push(sg); L.segs.sort((a, b) => a.seq - b.seq);
+    n.updated = Date.now(); this.save(); this.emit(n);
+    this.queue(`t:${n.id}`, () => this.liveTranscribe(n, sg));
+    return { ok: true, seq };
+  }
+
+  async liveTranscribe(n, sg) {
+    if (!this.notes.includes(n)) return;
+    try {
+      const { text } = await voice.transcribe(this.cfg, fs.readFileSync(this.liveFile(n, sg)), sg.mime, n.live.lang);
+      const t = String(text || '').replace(/\s+/g, ' ').trim();
+      sg.text = HALLUCINATION.test(t) ? '' : t; sg.state = 'ok'; sg.error = '';
+    } catch (e) {
+      sg.state = 'error'; sg.error = String(e.message || e).slice(0, 300);
+    }
+    if (!this.notes.includes(n)) return;
+    n.updated = Date.now(); this.save(); this.emit(n);
+    this.liveParts(n);
+  }
+
+  // Apunts dels trossos ja transcrits, en ordre. Amb «final», també el tros que queda encara que sigui curt.
+  liveParts(n, final = false) {
+    if (this.parting.has(n.id)) return final ? this.parting.get(n.id).then(() => this.liveParts(n, true)) : this.parting.get(n.id);
+    const run = (async () => {
+      for (;;) {
+        const L = n.live, last = L.parts.length ? L.parts[L.parts.length - 1].to : -1, ready = [];
+        for (const sg of L.segs) { if (sg.seq <= last) continue; if (sg.state === 'transcribing') break; ready.push(sg); }
+        const text = ready.map((x) => x.text).filter(Boolean).join(' ');
+        if (!ready.length || (!final && text.length < PART_CHARS) || (final && ready.some((x) => x.state === 'transcribing'))) return;
+        const pick = await this.pickEngine(L.engine);
+        if (!pick) return; // sense model: al final es deixa la transcripció
+        const part = { from: ready[0].seq, to: ready[ready.length - 1].seq, text: '', error: '' };
+        if (text.trim().length > 40) {
+          try { part.text = (await this.ask(pick, LIVE_TASKS.part[L.kind], text, false)).text.trim(); }
+          catch (e) { part.error = String(e.message || e).slice(0, 200); }
+        }
+        if (!this.notes.includes(n)) return;
+        L.parts.push(part); n.updated = Date.now(); this.save(); this.emit(n);
+      }
+    })().finally(() => this.parting.delete(n.id));
+    this.parting.set(n.id, run);
+    return run;
+  }
+
+  liveStop(id) {
+    const n = this.get(id), L = n.live;
+    if (!L) throw httpErr(400, 'Aquesta nota no és d’una classe ni d’una reunió');
+    if (L.state === 'rec' || L.state === 'error') { L.state = 'closing'; L.ended = Date.now(); n.updated = Date.now(); this.save(); this.emit(n); this.liveFinish(n); }
+    return n;
+  }
+
+  liveSummary(id, b = {}) {
+    const n = this.get(id), L = n.live;
+    if (!L) throw httpErr(400, 'Aquesta nota no és d’una classe ni d’una reunió');
+    if (L.state === 'rec') throw httpErr(409, 'Primer atura la gravació');
+    if (L.state === 'closing' || L.state === 'summarizing') return n;
+    if (b.engine) L.engine = str(b.engine, 80);
+    L.parts = L.parts.filter((p) => !p.error); // els apunts que havien fallat es tornen a fer
+    L.state = 'closing'; this.save(); this.emit(n);
+    this.liveFinish(n);
+    return n;
+  }
+
+  // Espera la transcripció i els apunts pendents i en fa el resum final.
+  liveFinish(n) {
+    return this.queue(`s:${n.id}`, async () => {
+      const L = n.live;
+      await (this.queues.get(`t:${n.id}`) || Promise.resolve());
+      if (!this.notes.includes(n)) return;
+      L.state = 'summarizing'; L.error = ''; this.emit(n);
+      try {
+        await this.liveParts(n, true);
+        const transcript = L.segs.map((x) => x.text).filter(Boolean).join(' ').trim();
+        if (!transcript) throw new Error('No s’ha transcrit res: no hi ha res a resumir.');
+        const pick = await this.pickEngine(L.engine);
+        if (!pick) {
+          if (!n.text.trim()) n.text = transcript;
+          throw new Error('No hi ha cap model per resumir. He deixat la transcripció a la nota. Instal·la Ollama amb un model (ollama pull qwen3:4b) o Claude Code.');
+        }
+        const max = pick.id.startsWith('ollama:') ? 9000 : 60000; // els models locals petits tenen poc context
+        const rangeText = (p) => L.segs.filter((x) => x.seq >= p.from && x.seq <= p.to).map((x) => x.text).filter(Boolean).join(' ');
+        let blocks = transcript.length <= max ? [transcript] : L.parts.map((p) => p.text || rangeText(p)).filter(Boolean);
+        // Massa llarg per a un sol cop: es condensen els apunts per grups fins que hi caben.
+        while (blocks.join('\n\n').length > max && blocks.length > 1) {
+          const groups = [];
+          for (const b of blocks) { const g = groups[groups.length - 1]; if (g && g.join('\n\n').length + b.length < max * 0.8) g.push(b); else groups.push([b]); }
+          if (groups.length === blocks.length) groups.splice(0, groups.length, ...Array.from({ length: Math.ceil(blocks.length / 2) }, (_, i) => blocks.slice(i * 2, i * 2 + 2)));
+          blocks = [];
+          for (const g of groups) blocks.push((await this.ask(pick, LIVE_TASKS.condense, g.join('\n\n'), false)).text.trim());
+        }
+        const r = await this.ask(pick, LIVE_TASKS.final[L.kind], blocks.join('\n\n').slice(0, max), true);
+        const text = str(r.text, 200000).trim();
+        if (!text) throw new Error('El model no ha tornat cap resum. Torna-ho a provar o tria’n un altre.');
+        if (!this.notes.includes(n)) return;
+        const title = str(r.title, 120).trim();
+        if (title && n.title === L.autoTitle) { n.title = `${title}`; L.autoTitle = n.title; }
+        n.text = text; L.state = 'done'; L.summaryEngine = pick.id;
+      } catch (e) {
+        if (!this.notes.includes(n)) return;
+        L.state = 'error'; L.error = String(e.message || e).slice(0, 300);
+      }
+      n.updated = Date.now(); this.save(); this.emit(n);
+    });
+  }
+
+  async pickEngine(engine) {
+    const list = await this.engines();
+    // Per defecte: el model local més petit de 3 mil milions de paràmetres o més; si no, Claude ràpid; si no, el primer.
+    const auto = list.filter((e) => e.local && e.id.startsWith('ollama:') && e.params >= 3)[0] || list.find((e) => e.id === 'claude:haiku') || list[0];
+    return list.find((e) => e.id === engine) || auto || null;
+  }
+
+  async ask(pick, task, body, json) {
+    const local = pick.id.startsWith('ollama:'), wrap = !json && local;
+    const user = `--- TRANSCRIPCIÓ ---\n${body}\n--- FI ---\n\n${task}${wrap ? '\n\nTorna només JSON amb aquest format: {"text":"…"}. El text pot tenir salts de línia.' : ''}`;
+    const raw = await runModel(this.cfg, pick.id, LIVE_SYSTEM, user, json || wrap, { numCtx: local ? 8192 : 0 });
+    return json ? parseJson(raw) : wrap ? { text: String(parseJson(raw).text ?? '') } : { text: raw };
+  }
+
   // ---------- Motors per resumir i organitzar
   async engines() {
     const { binPath } = require('./agents');
@@ -179,6 +348,9 @@ class Notes {
     return [
       R('GET', '/api/notes', () => ({ notes: this.notes })),
       R('POST', '/api/notes', ({ body }) => this.create(body), { limit: 1024 * 1024 }),
+      R('POST', '/api/notes/live', ({ body }) => this.liveStart(body || {})),
+      R('POST', /^\/api\/notes\/([\w-]+)\/live\/seg$/, async ({ req, params, url }) => this.liveSeg(params[0], await readRaw(req), String(req.headers['content-type'] || 'audio/webm').split(';')[0], Object.fromEntries(url.searchParams)), { raw: true }),
+      R('POST', /^\/api\/notes\/([\w-]+)\/live\/(stop|resume|summary)$/, ({ params, body }) => (params[1] === 'stop' ? this.liveStop(params[0]) : params[1] === 'resume' ? this.liveResume(params[0]) : this.liveSummary(params[0], body || {}))),
       R('GET', '/api/notes/engines', () => this.engines().then((engines) => ({ engines }))),
       R('POST', '/api/notes/ai', ({ body }) => this.ai(body || {})),
       R('PATCH', /^\/api\/notes\/([\w-]+)$/, ({ params, body }) => this.patch(params[0], body), { limit: 1024 * 1024 }),
@@ -241,6 +413,25 @@ const ACTIONS = {
   },
 };
 
+// ---------- Classe o reunió
+const LIVE_KINDS = { classe: 'Classe', reunio: 'Reunió' };
+const LIVE_LANGS = ['ca', 'es', 'en'];
+const PART_CHARS = 3500; // ≈ 4-5 minuts de veu per tros d'apunts
+// Whisper s'inventa aquestes frases quan sent silenci o soroll.
+const HALLUCINATION = /^[\s.…]*$|^(gràcies( per (veure|mirar|escoltar)[^.!]*)?|subtítols[^.!]*|amara\.org[^.!]*|gracias( por (ver|mirar)[^.!]*)?|subtítulos[^.!]*|thank you( for watching)?|thanks for watching)[.!…\s]*$/i;
+const LIVE_SYSTEM = 'Ets l’assistent de notes de nio. Treballes amb la transcripció automàtica d’una classe o d’una reunió: pot tenir paraules mal transcrites, que pots corregir quan el context ho deixa clar. No t’inventis res que no s’hi digui. Respon en l’idioma de la transcripció (si dubtes, en català). No facis servir cap eina.';
+const LIVE_TASKS = {
+  part: {
+    classe: 'Escriu els apunts d’aquest tros de classe: de 3 a 8 punts curts amb els conceptes, definicions, exemples, fórmules i dades que s’hi expliquen. Cada punt comença amb «- ». Només els punts, sense introducció.',
+    reunio: 'Escriu les notes d’aquest tros de reunió: de 3 a 8 punts curts amb els temes tractats, les decisions i les tasques (amb qui se’n fa càrrec, si es diu). Cada punt comença amb «- ». Només els punts, sense introducció.',
+  },
+  condense: 'Són apunts seguits d’una mateixa classe o reunió. Fes-ne uns de sols, sense repeticions i amb tot el que és important: com a màxim 12 punts. Cada punt comença amb «- ». Només els punts.',
+  final: {
+    classe: 'Fes el resum de tota la classe. Torna només JSON amb aquest format: {"title":"…","text":"…"}. «title»: el tema de la classe, en menys de 8 paraules. «text»: Markdown amb aquests apartats: «## Resum» (un paràgraf de 4 a 6 frases), «## Conceptes clau» (llista «- **concepte**: explicació curta»), «## Punts importants» (llista), «## Per repassar» (de 3 a 5 preguntes que podrien sortir a l’examen) i, només si se’n parla, «## Deures i dates».',
+    reunio: 'Fes el resum de tota la reunió. Torna només JSON amb aquest format: {"title":"…","text":"…"}. «title»: el tema principal, en menys de 8 paraules. «text»: Markdown amb aquests apartats: «## Resum» (de 3 a 5 frases), «## Decisions» (llista), «## Tasques» (llista «- [ ] qui: què»; si no es diu qui, només què) i «## Temes oberts» (llista). Deixa fora els apartats que quedarien buits.',
+  },
+};
+
 function parseJson(raw) {
   const t = String(raw || '').replace(/^```(?:json)?\s*|\s*```$/g, '').trim();
   try { return JSON.parse(t); } catch { /* potser hi ha text al voltant */ }
@@ -264,14 +455,14 @@ function runCli(bin, args, input, { cwd, timeout = 180000 } = {}) {
   });
 }
 
-async function runModel(cfg, engine, system, user, json) {
+async function runModel(cfg, engine, system, user, json, { numCtx = 0 } = {}) {
   const { binPath } = require('./agents');
   const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'nio-nota-'));
   try {
     if (engine.startsWith('ollama:')) {
       // Qwen3 «pensa» abans de respondre (minuts en un model petit): «/no_think» ho desactiva. Si la resposta porta un bloc <think>, es treu.
       const model = engine.slice(7), soft = /qwen3/i.test(model) ? '\n\n/no_think' : '';
-      const out = await ollama.chat({ model, messages: [{ role: 'system', content: system }, { role: 'user', content: user + soft }], format: json ? 'json' : undefined, think: false, maxTokens: 3000, signal: AbortSignal.timeout(150000) }).catch((e) => { throw e.name === 'TimeoutError' ? httpErr(504, 'El model ha trigat massa. Prova-ho amb un de més petit o ràpid.') : e; });
+      const out = await ollama.chat({ model, messages: [{ role: 'system', content: system }, { role: 'user', content: user + soft }], format: json ? 'json' : undefined, think: false, maxTokens: 3000, numCtx: numCtx || undefined, signal: AbortSignal.timeout(150000) }).catch((e) => { throw e.name === 'TimeoutError' ? httpErr(504, 'El model ha trigat massa. Prova-ho amb un de més petit o ràpid.') : e; });
       return out.replace(/^[\s\S]*?<\/think>\s*/i, '').trim();
     }
     if (engine === 'claude' || engine.startsWith('claude:')) {

package/src/voice.js

@@ -58,11 +58,21 @@ const PROVIDERS = {
 function ext(mime) {
   return /ogg/.test(mime || '') ? 'ogg' : /mp4|m4a|aac/.test(mime || '') ? 'm4a' : /mpeg|mp3/.test(mime || '') ? 'mp3' : /wav/.test(mime || '') ? 'wav' : 'webm';
 }
+// Una clau restringida a la qual falta un permís: es diu quin interruptor cal activar a ElevenLabs.
+const EL_PERMS = { text_to_speech: 'Text to Speech → Access', speech_to_text: 'Speech to Text → Access', convai_write: 'ElevenAgents → Write', convai_read: 'ElevenAgents → Write' };
+function elPermHint(msg) {
+  const m = String(msg || '').match(/missing the permission (\w+)/i);
+  if (!m) return null;
+  const what = EL_PERMS[m[1]] || m[1];
+  return `A la clau d’ElevenLabs li falta el permís «${what}». Edita-la a elevenlabs.io (Developers → API Keys) i activa’l, o crea’n una de nova amb aquest permís.`;
+}
+
 async function errText(r) {
   const t = await r.text().catch(() => '');
   try {
     const j = JSON.parse(t);
-    return (j.detail?.message || j.detail || j.error?.message || j.error || t).toString().slice(0, 200);
+    const msg = (j.detail?.message || j.detail || j.error?.message || j.error || t).toString();
+    return elPermHint(msg) || msg.slice(0, 200);
   } catch {
     return `${r.status} ${t.slice(0, 160)}`;
   }
@@ -93,12 +103,14 @@ function status(cfg) {
   };
 }
 
-async function transcribe(cfg, audio, mime) {
+async function transcribe(cfg, audio, mime, lang) {
   const p = pick(cfg, 'stt');
+  lang = lang || cfgOf(cfg).lang || 'ca';
+  const l = lang === 'auto' ? '' : lang; // «auto»: que el proveïdor ho endevini
   if (!p) throw httpErr(400, 'Aquest ordinador encara no té veu. Activa Whisper (gratis) o posa una clau a Ajustos → Veu.');
   if (!audio?.length) throw httpErr(400, 'No hi ha àudio');
-  if (p === 'whisper') return { text: await whisper.transcribe(cfg, audio, mime, cfgOf(cfg).lang || 'ca'), provider: p };
-  return { text: (await PROVIDERS[p].stt(cfg.voice.keys[p], audio, mime, cfgOf(cfg).lang || 'ca')).trim(), provider: p };
+  if (p === 'whisper') return { text: await whisper.transcribe(cfg, audio, mime, lang), provider: p };
+  return { text: (await PROVIDERS[p].stt(cfg.voice.keys[p], audio, mime, l)).trim(), provider: p };
 }
 
 async function speak(cfg, text) {
@@ -179,4 +191,4 @@ function routes(cfg) {
   ];
 }
 
-module.exports = { routes, transcribe, speak, status, pick, PROVIDERS };
+module.exports = { routes, transcribe, speak, status, pick, PROVIDERS, elPermHint };

package/src/whisper.js

@@ -128,7 +128,7 @@ async function transcribe(cfg, audio, mime, lang = 'ca') {
     const input = path.join(tmp, `audio.${ext(mime)}`);
     fs.writeFileSync(input, audio);
     if (e === 'python') {
-      await run(pyBin(), [input, '--model', 'turbo', '--language', lang, '--output_format', 'txt', '--output_dir', tmp, '--fp16', 'False', '--verbose', 'False']);
+      await run(pyBin(), [input, '--model', 'turbo', ...(lang === 'auto' ? [] : ['--language', lang]), '--output_format', 'txt', '--output_dir', tmp, '--fp16', 'False', '--verbose', 'False']);
       return fs.readFileSync(path.join(tmp, 'audio.txt'), 'utf8').trim();
     }
     if (!fs.existsSync(modelPath(cfg))) {

package/web/app/app.js

@@ -206,8 +206,11 @@ async function api(path, opts = {}) {
   const body = opts.body && typeof opts.body !== 'string' ? opts.body : opts.body ? JSON.parse(opts.body) : undefined;
   let res;
   try { res = await fetch(m.url + path, { ...opts, headers: { Authorization: `Bearer ${m.token}`, 'content-type': 'application/json', ...(opts.headers || {}) }, body: body ? JSON.stringify(body) : undefined }); }
-  catch (e) { if (e.name === 'AbortError') throw e; throw new Error(`No he pogut parlar amb ${m.name || 'l’ordinador'}. Comprova que nio hi estigui engegat i torna-ho a provar.`); }
-  const data = await res.json().catch(() => ({}));
+  catch (e) { if (e.name === 'AbortError') throw e; throw Object.assign(new Error(`No he pogut parlar amb ${m.name || 'l’ordinador'}. Comprova que nio hi estigui engegat i torna-ho a provar.`), { unreachable: true }); }
+  const data = await res.json().catch(() => null);
+  // Un túnel mort respon una pàgina d'error de Cloudflare (502, 530…), no el JSON de nio: és com no arribar-hi.
+  if (!data && res.status >= 500) throw Object.assign(new Error(`No arribo a ${m.name || 'l’ordinador'}`), { unreachable: true });
+  if (!data) { if (!res.ok) throw new Error(`Error ${res.status}`); return {}; }
   if (!res.ok) throw new Error(data.error || `Error ${res.status}`);
   if (Array.isArray(data.agents)) data.agents = data.agents.filter((x) => x.id !== 'demo'); // l'agent de proves del programa no s'ensenya
   return data;
@@ -320,11 +323,13 @@ async function connect() {
   } catch (e) {
     if (ctrl.signal.aborted) return;
     state.connected = false;
-    state.lastError = e.message === 'Failed to fetch' || e.name === 'TypeError' ? (location.protocol === 'https:' && /^http:\/\/(127\.0\.0\.1|localhost)/.test(m.url) ? 'El navegador no deixa que aquesta web parli amb aquest ordinador. Prova Chrome, o engega nio amb --local.' : 'No arribo a l’ordinador') : e.message;
+    const unreachable = e.unreachable || e.message === 'Failed to fetch' || e.name === 'TypeError' || /^Error 5\d\d$/.test(e.message);
+    state.lastError = unreachable ? (location.protocol === 'https:' && /^http:\/\/(127\.0\.0\.1|localhost)/.test(m.url) ? 'El navegador no deixa que aquesta web parli amb aquest ordinador. Prova Chrome, o engega nio amb --local.' : 'No arribo a l’ordinador') : e.message;
     render();
     if (e.fatal) return;
     // Potser el túnel ha canviat d'adreça: la busquem a nio.cat (signada per l'ordinador).
-    if (state.lastError === 'No arribo a l’ordinador' && (await relocate(store.active))) { if (!ctrl.signal.aborted) connect(); return; }
+    // (Passa sobretot quan es torna a executar install.sh: el túnel ràpid de Cloudflare canvia d'adreça.)
+    if (unreachable && (await relocate(store.active))) { if (!ctrl.signal.aborted) connect(); return; }
     if (m.kind === 'vps' && m.via && retry >= 2) autoReconnect(m);
     setTimeout(() => machine() && !ctrl.signal.aborted && connect(), Math.min(15000, 1000 * 2 ** retry++));
   }
@@ -736,7 +741,7 @@ function viewSettings() {
   const avisos = machine() ? `<section class="panel"><header><h2>Avisos al mòbil</h2></header><div class="body stack"><p class="small">Rep un avís quan un agent et demana permís o acaba la feina.</p>${isIOS && !standalone ? '<p class="muted small">A l’iPhone, primer afegeix nio a la pantalla d’inici (Comparteix → Afegeix a la pantalla d’inici) i obre’l des d’allà.</p>' : ''}${pushOn ? '<p class="small"><span class="chip ok">' + svg(ICON.check) + 'Avisos activats en aquest dispositiu</span></p>' : ''}<div class="row">${pushOn ? '<button class="btn ink grow" data-act="push-test" type="button">Envia’n un de prova</button><button class="btn" data-act="push-off" type="button">Desactiva</button>' : '<button class="btn ink grow" data-act="push" type="button">Activa els avisos</button>'}</div></div></section>` : '';
   if (machine() && pushOn === null) refreshPush();
   if (machine() && tgState === undefined) loadTelegram();
-  return `${head}<div class="stack-lg" style="max-width:640px">${avisos}${voicePanel()}<div id="tgPanel">${telegramPanel()}</div></div>`;
+  return `${head}<div class="stack-lg cols">${avisos}${voicePanel()}<div id="tgPanel">${telegramPanel()}</div></div>`;
 }
 // Ajustos sense ordinador: un sol avís a dalt i les seccions de mostra, desactivades.
 function settingsOff() {
@@ -2632,7 +2637,20 @@ function voicePanel() {
   const on = [...(v?.whisper?.ready ? ['Whisper'] : []), ...Object.entries(P).filter(([, p]) => p.key).map(([, p]) => p.name)];
   return `<section class="panel"><header><h2>Veu</h2>${on.length ? `<span class="chip ok"><i class="dot on"></i>${esc(on.join(' · '))}</span>` : ''}</header><div class="body stack"><p class="small">Dicta els missatges amb el micròfon i escolta les respostes. Amb <b>Whisper</b> és gratis i l’àudio no surt de l’ordinador (${esc(machine().name)}). Si hi poses una clau d’ElevenLabs o OpenAI, també es queda a l’ordinador.</p>${v ? '' : '<p class="muted small">Aquest ordinador encara no té la veu (cal nio 0.7 o més nou).</p>'}<div class="row"><button class="btn ink" data-act="voice" type="button" ${v ? '' : 'disabled'}>${on.length ? 'Canvia la configuració' : 'Configura la veu'}</button></div></div></section>`;
 }
-async function voiceSheet() {
+// Pas a pas per fer la clau d'ElevenLabs amb només els permisos que fa servir nio.
+const EL_GUIDE = `<details class="el-guide" id="elGuide"><summary>Com faig la clau? Pas a pas</summary><ol>
+  <li>Obre <a href="https://elevenlabs.io/app/developers/api-keys" target="_blank" rel="noopener">elevenlabs.io → Developers → API Keys</a> i prem <b>Create API Key</b>.</li>
+  <li><b>Name</b>: «nio». <b>Expire After</b>: «Never» (o la data que vulguis).</li>
+  <li>Activa <b>Restrict Key</b> i, a <b>Endpoints</b>, deixa-ho així:<ul>
+    <li><b>Text to Speech</b> → <span class="el-on">Access</span> · per escoltar les respostes</li>
+    <li><b>ElevenAgents</b> → <span class="el-on">Write</span> · per a la Trucada amb en Nio</li>
+    <li><b>Speech to Text</b> → <span class="el-on">Access</span> · només si vols que ElevenLabs transcrigui en lloc de Whisper</li>
+    <li>Tota la resta, també <b>Administration</b> → <span class="el-off">No Access</span></li></ul></li>
+  <li><b>Usage Limits</b> (opcional): posa un màxim de crèdits, perquè no gasti més del que vols.</li>
+  <li>Deixa activat <b>Auto-disable if leaked</b>.</li>
+  <li>Prem <b>Create</b>, copia la clau (<span class="mono">sk_…</span>; només es veu un cop) i enganxa-la aquí sobre. Es desa a l’ordinador i no torna mai al mòbil.</li>
+</ol><p class="muted small">Si falta algun permís, nio et dirà quin has d’activar.</p></details>`;
+async function voiceSheet(opts = {}) {
   await loadVoice();
   if (!nodeVoice) return toast('Aquest ordinador encara no té la veu. Actualitza nio (npx nio-cat@latest).', 5000);
   if (isDemo()) return toast('A la demo no hi ha veu. Amb nio instal·lat, dictes amb Whisper, gratis.', 4500);
@@ -2642,6 +2660,7 @@ async function voiceSheet() {
     <form class="stack" id="voiceForm" style="margin-top:14px">
       <details class="voice-extras"><summary>Extres opcionals · ElevenLabs i OpenAI</summary><div class="stack"><p class="muted small">Afegeix una clau per fer servir aquests serveis. Whisper funciona sense cap clau.</p>
       <label class="f"><span>Clau d’ElevenLabs ${v.providers.elevenlabs.key ? `<span class="muted">(desada: ${esc(v.providers.elevenlabs.key)})</span>` : ''}</span><input type="password" id="vEl" placeholder="${v.providers.elevenlabs.key ? 'Deixa-ho buit per mantenir-la' : 'sk_…'}" value="${!v.providers.elevenlabs.key && old.key ? esc(old.key) : ''}" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
+      ${EL_GUIDE}
       <label class="f"><span>Clau d’OpenAI ${v.providers.openai.key ? `<span class="muted">(desada: ${esc(v.providers.openai.key)})</span>` : ''}</span><input type="password" id="vOa" placeholder="${v.providers.openai.key ? 'Deixa-ho buit per mantenir-la' : 'sk-…'}" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
       <div class="grid-2"><label class="f"><span>Per entendre’t</span><select id="vStt"><option value="">Automàtic</option>${v.whisper ? `<option value="whisper" ${v.stt === 'whisper' ? 'selected' : ''}>Whisper (gratis)</option>` : ''}<option value="elevenlabs" ${v.stt === 'elevenlabs' ? 'selected' : ''}>ElevenLabs Scribe</option><option value="openai" ${v.stt === 'openai' ? 'selected' : ''}>OpenAI</option></select></label>
       <label class="f"><span>Per parlar</span><select id="vTts"><option value="">Automàtic</option><option value="elevenlabs" ${v.tts === 'elevenlabs' ? 'selected' : ''}>ElevenLabs</option><option value="openai" ${v.tts === 'openai' ? 'selected' : ''}>OpenAI</option></select></label></div>
@@ -2650,6 +2669,7 @@ async function voiceSheet() {
       <button class="btn ghost" type="button" id="vOff">Treu les claus</button></div></details>
       <div class="row sheet-foot"><button class="btn ink" type="submit">Desa</button></div>
     </form>`, (sh) => {
+    if (opts.guide) { const g = $('#elGuide', sh); sh.querySelector('.voice-extras').open = true; g.open = true; setTimeout(() => g.scrollIntoView({ block: 'start', behavior: 'smooth' }), 120); }
     const put = async (body, msg) => { try { nodeVoice = await api('/api/voice', { method: 'PUT', body }); try { localStorage.removeItem('nio.voice'); } catch { /* res */ } closeSheet(); toast(msg); if (state.route.name === 'session') renderSession(); else render(); } catch (e) { toast(e.message, 4500); } };
     $('#voiceForm', sh).onsubmit = (e) => { e.preventDefault(); const keys = {}; const el = $('#vEl', sh).value.trim(), oa = $('#vOa', sh).value.trim(); if (el) keys.elevenlabs = el; if (oa) keys.openai = oa; put({ keys, stt: $('#vStt', sh).value || null, tts: $('#vTts', sh).value || null, speak: $('#vSpeak', sh).checked }, 'Veu desada a l’ordinador'); };
     $('#vOff', sh).onclick = () => { if (confirm('Es treuran les claus de veu d’aquest ordinador.')) put({ keys: { elevenlabs: null, openai: null } }, 'Claus eliminades'); };

package/web/app/call.js

@@ -43,7 +43,7 @@ export function createCall(ctx) {
     if (!m) return head + ctx.noMachine('La trucada parla amb un ordinador. Connecta’n un per trucar.');
     const ready = demo || st?.ready, loading = !demo && !st;
     const why = st?.error ? `<p class="call-why err">${esc(OLD.test(st.error) ? 'Aquest ordinador encara no sap trucar: actualitza nio (cal nio-cat 0.9.9 o més nou).' : st.error)}</p>`
-      : !ready && !loading ? '<p class="call-why">Per trucar cal una clau d’ElevenLabs. Es queda a l’ordinador i el cost va al teu compte d’ElevenLabs.</p>' : '';
+      : !ready && !loading ? '<p class="call-why">Per trucar cal una clau d’ElevenLabs amb el permís «ElevenAgents → Write». Es queda a l’ordinador i el cost va al teu compte d’ElevenLabs. <button class="linkish" type="button" data-call="guide">Com faig la clau?</button></p>' : '';
     return `${head}
       <section class="call-hero">
         <div class="call-face" aria-hidden="true"><span class="call-ring"></span><span class="call-ring r2"></span>${bot('idle', 'call-bot')}</div>
@@ -62,6 +62,7 @@ export function createCall(ctx) {
     const a = b.dataset.call;
     if (a === 'start') start();
     else if (a === 'voice') ctx.voiceSheet();
+    else if (a === 'guide') ctx.voiceSheet({ guide: true });
   });
 
   // ---------------------------------------------------------------- pantalla de la trucada

package/web/app/notes-live.js

@@ -0,0 +1,351 @@
+// nio · Notes en directe: Classe o Reunió.
+// El mòbil (o l'ordinador) grava trossos de 20 s i els envia en ordre a l'ordinador, que els transcriu amb Whisper.
+// Cada ~4-5 minuts de veu, un model en fa apunts; en acabar, el resum de tota la classe o reunió.
+// Mentrestant, aquesta vista mostra la transcripció i els apunts a mesura que arriben.
+
+const SEG_MS = Number(globalThis.NIO_LIVE_SEG_MS) || 20000; // durada de cada tros: prou curt per veure-ho gairebé en directe, prou llarg perquè Whisper tingui context
+const SILENCE = 0.003; // per sota d'aquest volum (RMS) tot el tros, no s'envia: Whisper s'inventa frases en el silenci
+const KINDS = { classe: 'Classe', reunio: 'Reunió' };
+const LANGS = [['ca', 'Català'], ['es', 'Castellà'], ['en', 'Anglès']];
+const STATES = { rec: 'Gravant', closing: 'Acabant de transcriure…', summarizing: 'Fent el resum…', done: 'Resum fet', error: 'No s’ha pogut resumir' };
+const LI = {
+  live: '<path d="M4 10v4M8 7v10M12 4v16M16 8v8M20 11v2"/>',
+  cap: '<path d="M2.5 9 12 4.5 21.5 9 12 13.5z"/><path d="M6.5 11v4.5c0 1.2 2.5 2.5 5.5 2.5s5.5-1.3 5.5-2.5V11M21.5 9v5"/>',
+  people: '<circle cx="9" cy="8" r="3"/><path d="M3.5 19a5.5 5.5 0 0 1 11 0"/><circle cx="17" cy="9" r="2.3"/><path d="M15.5 14.2A4.5 4.5 0 0 1 21 18.5"/>',
+  down: '<path d="M6 9l6 6 6-6"/>',
+  edit: '<path d="M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3z"/>',
+  refresh: '<path d="M20 12a8 8 0 1 1-2.4-5.7L20 8.5"/><path d="M20 4v4.5h-4.5"/>',
+};
+const fmt = (s) => { s = Math.max(0, Math.round(s)); const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), x = String(s % 60).padStart(2, '0'); return h ? `${h}:${String(m).padStart(2, '0')}:${x}` : `${m}:${x}`; };
+const LSget = (k, d) => { try { return JSON.parse(localStorage.getItem(k)) ?? d; } catch { return d; } };
+const LSset = (k, v) => { try { localStorage.setItem(k, JSON.stringify(v)); } catch { /* sense desar */ } };
+
+export function createLive({ ctx, api, esc, toast, svg, getNote, setNote, loadEngines, openEditor }) {
+  let view = null; // { id, el, tab }
+  let rec = null; // gravació en marxa en aquest dispositiu
+  let pill = null;
+
+  // Markdown senzill del resum: títols, llistes, caselles i negretes.
+  function md(src) {
+    const inline = (t) => esc(t).replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>').replace(/(^|[^*])\*([^*]+)\*/g, '$1<i>$2</i>');
+    let out = '', list = false;
+    const close = () => { if (list) { out += '</ul>'; list = false; } };
+    for (const raw of String(src || '').split('\n')) {
+      const l = raw.trimEnd();
+      let m;
+      if (!l.trim()) { close(); continue; }
+      if ((m = l.match(/^#{1,4}\s+(.*)/))) { close(); out += `<h3>${inline(m[1])}</h3>`; continue; }
+      if ((m = l.match(/^\s*[-*•]\s+\[( |x)\]\s+(.*)/i))) { if (!list) { out += '<ul class="lv-check">'; list = true; } out += `<li data-done="${m[1] !== ' '}">${inline(m[2])}</li>`; continue; }
+      if ((m = l.match(/^\s*(?:[-*•]|\d+[.)])\s+(.*)/))) { if (!list) { out += '<ul>'; list = true; } out += `<li>${inline(m[1])}</li>`; continue; }
+      close(); out += `<p>${inline(l)}</p>`;
+    }
+    close();
+    return out;
+  }
+
+  // ---------------------------------------------------------------- començar
+  async function startSheet() {
+    if (ctx.isDemo()) return toast('A la demo no hi ha micròfon. Amb nio instal·lat, grava una classe i Whisper la transcriu a l’ordinador.', 5000);
+    if (!ctx.voiceOn()) { toast('Cal activar Whisper per transcriure (gratis, a l’ordinador).', 3500); return ctx.voiceSheet(); }
+    if (rec) return open(rec.id);
+    if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) return toast('Aquest navegador no pot gravar àudio.');
+    const kind0 = LSget('nio.live.kind', 'classe'), lang0 = LANGS.some(([k]) => k === LSget('nio.live.lang', 'ca')) ? LSget('nio.live.lang', 'ca') : 'ca';
+    ctx.openSheet(`<h2>Classe o reunió</h2>
+      <div class="stack lv-start">
+        <div class="seg" role="group" aria-label="Tipus">${Object.entries(KINDS).map(([k, l]) => `<button type="button" data-kind="${k}" aria-pressed="${k === kind0}">${svg(k === 'classe' ? LI.cap : LI.people)}${l}</button>`).join('')}</div>
+        <label class="f">Idioma<select id="lvLang">${LANGS.map(([k, l]) => `<option value="${k}" ${k === lang0 ? 'selected' : ''}>${l}</option>`).join('')}</select></label>
+        <label class="f">Model per als apunts i el resum<select id="lvEng"><option>Mirant quins models hi ha…</option></select></label>
+        <p class="small muted" id="lvWhat"></p>
+        <p class="small lv-warn">Deixa nio obert i la pantalla encesa: si el mòbil es bloqueja, el navegador atura el micròfon.</p>
+        <div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Cancel·la</button><button class="btn ink" type="button" data-go>${svg('<circle cx="12" cy="12" r="6" fill="currentColor" stroke="none"/>')}Comença a gravar</button></div>
+      </div>`, async (sh) => {
+      let kind = kind0;
+      const what = () => { sh.querySelector('#lvWhat').textContent = kind === 'classe'
+        ? 'Transcriu tota la classe en directe, en fa apunts cada pocs minuts i, quan acabis, un resum amb els conceptes clau i preguntes per repassar.'
+        : 'Transcriu tota la reunió en directe, en fa notes cada pocs minuts i, quan acabis, un resum amb les decisions i les tasques.'; };
+      what();
+      sh.querySelectorAll('[data-kind]').forEach((b) => { b.onclick = () => { kind = b.dataset.kind; sh.querySelectorAll('[data-kind]').forEach((x) => x.setAttribute('aria-pressed', String(x === b))); what(); }; });
+      sh.querySelector('[data-close]').onclick = ctx.closeSheet;
+      const sel = sh.querySelector('#lvEng');
+      loadEngines().then((list) => {
+        if (!list.length) { sel.innerHTML = '<option value="">Cap model: només la transcripció</option>'; return; }
+        const saved = LSget('nio.notes.engine', ''), auto = (list.find((e) => e.local && e.id.startsWith('ollama:') && e.params >= 3) || list.find((e) => e.id === 'claude:haiku') || list[0]).id;
+        const cur = list.some((e) => e.id === saved) ? saved : auto, groups = [...new Set(list.map((e) => e.group))];
+        sel.innerHTML = groups.map((g) => `<optgroup label="${esc(g)}">${list.filter((e) => e.group === g).map((e) => `<option value="${esc(e.id)}" ${e.id === cur ? 'selected' : ''}>${esc(e.label)}</option>`).join('')}</optgroup>`).join('');
+      });
+      sh.querySelector('[data-go]').onclick = async (ev) => {
+        const b = ev.currentTarget; b.disabled = true;
+        // El micròfon es demana dins del clic: Safari no el deixa demanar més tard.
+        let stream;
+        try { stream = await mic(); } catch { b.disabled = false; return toast('No tinc permís per al micròfon. Activa’l als ajustos del navegador.', 4500); }
+        const lang = sh.querySelector('#lvLang').value, engine = sel.value || '';
+        LSset('nio.live.kind', kind); LSset('nio.live.lang', lang); if (engine) LSset('nio.notes.engine', engine);
+        try {
+          const n = await api('/api/notes/live', { method: 'POST', body: { kind, lang, engine } });
+          setNote(n); ctx.closeSheet();
+          begin(n, stream); open(n.id);
+        } catch (e) { stream.getTracks().forEach((t) => t.stop()); b.disabled = false; toast(e.message, 4500); }
+      };
+    });
+  }
+  // Àudio de sala: sense cancel·lació d'eco (no hi ha altaveu) i amb guany automàtic per al professor que és lluny.
+  const mic = () => navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: false, noiseSuppression: true, autoGainControl: true } });
+
+  // ---------------------------------------------------------------- gravació per trossos
+  function begin(n, stream) {
+    const segs = n.live?.segs || [];
+    const last = segs[segs.length - 1];
+    rec = {
+      id: n.id, stream, running: true, seq: last ? last.seq + 1 : 0, base: last ? last.at + last.dur : 0, t0: Date.now(),
+      queue: [], sending: false, fails: 0, skipped: 0, peak: 0, level: 0, mr: null, timer: 0, lost: false, wake: null, stopping: false,
+    };
+    meter(rec);
+    wake(rec);
+    for (const t of stream.getAudioTracks()) t.onended = () => { if (rec?.stream === stream && rec.running) { rec.lost = true; draw(); } };
+    segment(rec);
+    rec.tick = setInterval(() => { drawRec(); drawPill(); }, 500);
+  }
+  const elapsed = (r) => r.base + (Date.now() - r.t0) / 1000;
+  function segment(r) {
+    if (!r.running || r.lost) return;
+    if (r.stream.getAudioTracks().every((t) => t.readyState === 'ended')) { r.lost = true; draw(); return; }
+    let mr;
+    try { mr = new MediaRecorder(r.stream); } catch { r.lost = true; draw(); return; }
+    const chunks = [], start = Date.now(), at = r.base + (start - r.t0) / 1000;
+    r.mr = mr; r.peak = 0;
+    mr.ondataavailable = (e) => { if (e.data.size) chunks.push(e.data); };
+    mr.onstop = () => {
+      clearTimeout(r.timer);
+      const dur = (Date.now() - start) / 1000, blob = new Blob(chunks, { type: mr.mimeType || 'audio/webm' });
+      if (blob.size > 1500 && r.peak >= SILENCE) { r.queue.push({ seq: r.seq++, at: Math.round(at * 10) / 10, dur: Math.round(dur * 10) / 10, blob }); pump(r); }
+      else if (dur > 2) r.skipped++;
+      if (r.running && !r.lost) segment(r);
+      else if (!r.running) finish(r);
+    };
+    mr.onerror = () => { r.lost = true; draw(); };
+    mr.start(1000);
+    r.timer = setTimeout(() => { if (mr.state === 'recording') mr.stop(); }, SEG_MS);
+  }
+  // Envia els trossos en ordre; si no arriba a l'ordinador, ho torna a provar (es queden a la memòria del mòbil).
+  async function pump(r) {
+    if (r.sending) return;
+    r.sending = true;
+    while (r.queue.length) {
+      const s = r.queue[0];
+      try {
+        await ctx.nodeAudio(`/api/notes/${r.id}/live/seg?seq=${s.seq}&at=${s.at}&dur=${s.dur}`, { headers: { 'content-type': s.blob.type || 'audio/webm' }, body: s.blob });
+        r.queue.shift(); r.fails = 0;
+      } catch (e) {
+        r.fails++; r.error = e.message; draw();
+        await new Promise((ok) => setTimeout(ok, Math.min(30000, 2000 * 2 ** Math.min(r.fails, 4))));
+        if (rec !== r && !r.stopping) break;
+      }
+      draw();
+    }
+    r.sending = false;
+    if (r.stopping && !r.queue.length) closeRec(r);
+  }
+  function stop() {
+    const r = rec; if (!r) return;
+    r.running = false; r.stopping = true;
+    if (r.mr?.state === 'recording') r.mr.stop(); else finish(r);
+    draw();
+  }
+  function finish(r) {
+    clearInterval(r.tick); clearInterval(r.meterT);
+    r.stream.getTracks().forEach((t) => t.stop());
+    r.ctx?.close?.().catch(() => {});
+    r.wake?.release?.().catch(() => {});
+    if (!r.queue.length && !r.sending) closeRec(r); else pump(r);
+  }
+  async function closeRec(r) {
+    if (r.closed) return; r.closed = true;
+    try { setNote(await api(`/api/notes/${r.id}/live/stop`, { method: 'POST' })); }
+    catch (e) { toast(`No he pogut acabar la gravació: ${e.message}`, 5000); }
+    if (rec === r) rec = null;
+    pill?.remove(); pill = null;
+    draw();
+  }
+  // El micròfon s'ha aturat (pantalla bloquejada, trucada…): es continua a la mateixa nota amb un clic.
+  async function resume(id) {
+    let stream;
+    try { stream = await mic(); } catch { return toast('No tinc permís per al micròfon.', 4000); }
+    if (rec && rec.id === id) {
+      rec.stream.getTracks().forEach((t) => t.stop());
+      rec.base = elapsed(rec); rec.t0 = Date.now(); rec.stream = stream; rec.lost = false; rec.running = true;
+      clearInterval(rec.meterT); rec.ctx?.close?.().catch(() => {}); meter(rec); wake(rec);
+      for (const t of stream.getAudioTracks()) t.onended = () => { if (rec?.stream === stream && rec.running) { rec.lost = true; draw(); } };
+      segment(rec); draw(); return;
+    }
+    try {
+      const n = await api(`/api/notes/${id}/live/resume`, { method: 'POST' });
+      setNote(n); begin(n, stream); draw();
+    } catch (e) { stream.getTracks().forEach((t) => t.stop()); toast(e.message, 4500); }
+  }
+  // Nivell del micròfon: per veure que sent i per no enviar els trossos en silenci.
+  function meter(r) {
+    try {
+      const AC = window.AudioContext || window.webkitAudioContext, ac = new AC(), an = ac.createAnalyser();
+      ac.createMediaStreamSource(r.stream).connect(an); an.fftSize = 1024;
+      const buf = new Float32Array(an.fftSize);
+      r.ctx = ac;
+      r.meterT = setInterval(() => {
+        an.getFloatTimeDomainData(buf);
+        let sum = 0; for (const v of buf) sum += v * v;
+        const rms = Math.sqrt(sum / buf.length);
+        r.peak = Math.max(r.peak, rms); r.level = rms;
+        const bar = view && view.el.querySelector('.lv-meter i'); if (bar) bar.style.transform = `scaleX(${Math.min(1, rms * 12).toFixed(3)})`;
+      }, 120);
+    } catch { r.peak = 1; } // sense AudioContext, s'envia tot
+  }
+  async function wake(r) { try { r.wake = await navigator.wakeLock?.request('screen'); } catch { /* sense bloqueig de pantalla */ } }
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden || !rec) return;
+    if (rec.running) wake(rec); // el bloqueig de pantalla es perd en sortir de l'app
+    const r = rec, tracks = () => r.stream.getAudioTracks();
+    if (r.running && tracks().some((t) => t.readyState === 'ended')) r.lost = true;
+    // A l'iPhone, en tornar, la pista pot quedar silenciada uns instants: només és «aturat» si continua així.
+    else if (r.running && tracks().some((t) => t.muted)) setTimeout(() => { if (rec === r && tracks().some((t) => t.muted)) { r.lost = true; draw(); } }, 1500);
+    draw();
+  });
+  addEventListener('beforeunload', (e) => { if (rec) { e.preventDefault(); e.returnValue = ''; } });
+
+  // ---------------------------------------------------------------- vista
+  function open(id) {
+    const n = getNote(id); if (!n?.live) return false;
+    if (!view || view.id !== id) {
+      close(true);
+      const el = document.createElement('div');
+      el.className = 'lv'; el.setAttribute('role', 'dialog'); el.setAttribute('aria-modal', 'true');
+      document.body.appendChild(el);
+      view = { id, el, tab: n.live.state === 'done' ? 'notes' : 'tr', follow: true };
+      el.addEventListener('click', onClick);
+      history.pushState({ ...(history.state || {}), nioLive: id }, '', location.href);
+    }
+    pill?.remove(); pill = null;
+    draw(true);
+    return true;
+  }
+  function close(silent) {
+    if (!view) return;
+    view.el.remove(); view = null;
+    if (!silent && history.state?.nioLive) history.back();
+    drawPill();
+  }
+  addEventListener('popstate', () => { if (view && !history.state?.nioLive) { view.el.remove(); view = null; drawPill(); } });
+  function drawPill() {
+    if (!rec || view) { if (pill && view) { pill.remove(); pill = null; } return; }
+    if (!pill) {
+      pill = document.createElement('button');
+      pill.type = 'button'; pill.className = 'lv-pill';
+      pill.onclick = () => open(rec.id);
+      document.body.appendChild(pill);
+    }
+    const n = getNote(rec.id);
+    pill.innerHTML = `<i class="lv-dot ${rec.lost ? 'off' : ''}"></i><b>${fmt(elapsed(rec))}</b><span>${esc(rec.lost ? 'Micròfon aturat' : KINDS[n?.live?.kind] || 'Gravant')}</span>`;
+  }
+
+  function draw(first) {
+    if (!view) { drawPill(); return; }
+    const n = getNote(view.id); if (!n?.live) return close(true);
+    const L = n.live, here = rec && rec.id === n.id, el = view.el;
+    const tr = el.querySelector('.lv-tr'), keep = tr && !first ? tr.scrollTop : 0;
+    const atEnd = tr ? tr.scrollHeight - tr.scrollTop - tr.clientHeight < 60 : true;
+    const pend = L.segs.filter((s) => s.state === 'transcribing').length;
+    const dur = here ? elapsed(rec) : L.segs.length ? L.segs[L.segs.length - 1].at + L.segs[L.segs.length - 1].dur : 0;
+    const busy = L.state === 'closing' || L.state === 'summarizing';
+    el.innerHTML = `<div class="lv-in">
+      <header class="lv-h">
+        <button class="icon-btn" type="button" data-lv="close" aria-label="${here ? 'Amaga (continua gravant)' : 'Tanca'}">${svg(here ? LI.down : '<path d="m10 5-7 7 7 7M3 12h18"/>')}</button>
+        <div class="lv-ttl"><h2>${esc(n.title || KINDS[L.kind])}</h2><small>${KINDS[L.kind]} · ${esc(LANGS.find(([k]) => k === L.lang)?.[1] || L.lang)} · ${fmt(dur)}</small></div>
+        <button class="icon-btn" type="button" data-lv="edit" aria-label="Edita la nota" title="Edita la nota">${svg(LI.edit)}</button>
+      </header>
+      ${here ? recBar(n) : `<div class="lv-state" data-s="${L.state}">${busy ? '<i class="nt-spin"></i>' : ''}<span>${esc(STATES[L.state] || '')}${L.state === 'rec' ? ' en un altre dispositiu' : ''}${pend ? ` · ${pend} trossos per transcriure` : ''}</span>
+        ${L.state === 'rec' ? `<button class="btn sm" type="button" data-lv="resume">Continua aquí</button>` : ''}
+        ${L.state === 'done' || L.state === 'error' ? `<button class="btn ghost sm" type="button" data-lv="resume">Continua gravant</button><button class="btn sm" type="button" data-lv="again">${svg(LI.refresh)}Torna a resumir</button>` : ''}</div>`}
+      ${L.error ? `<p class="lv-err" role="alert">${esc(L.error)}</p>` : ''}
+      <div class="seg lv-tabs" role="tablist">${[['notes', L.state === 'done' ? 'Resum' : 'Apunts'], ['tr', 'Transcripció']].map(([k, l]) => `<button type="button" role="tab" data-tab="${k}" aria-pressed="${view.tab === k}">${l}</button>`).join('')}</div>
+      <div class="lv-body" data-tab="${view.tab}">
+        <section class="lv-notes" data-label="${L.state === 'done' ? 'Resum' : 'Apunts'}">${notesHtml(n)}</section>
+        <section class="lv-tr" data-label="Transcripció" aria-live="off">${trHtml(n)}</section>
+      </div>
+    </div>`;
+    const t2 = el.querySelector('.lv-tr');
+    if (t2) t2.scrollTop = (first || (atEnd && view.follow)) ? t2.scrollHeight : keep;
+    t2?.addEventListener('scroll', () => { if (view) view.follow = t2.scrollHeight - t2.scrollTop - t2.clientHeight < 60; }, { passive: true });
+  }
+  function recBar(n) {
+    const r = rec, waiting = r.queue.length;
+    const status = r.stopping ? (waiting ? `Enviant ${waiting} ${waiting === 1 ? 'tros' : 'trossos'}…` : 'Acabant…')
+      : r.lost ? 'El micròfon s’ha aturat (pantalla bloquejada o una altra app). Prem «Continua».'
+      : waiting > 1 ? `Sense connexió amb l’ordinador: ${waiting} trossos esperant` : 'Grava i transcriu cada 20 s';
+    return `<div class="lv-rec ${r.lost ? 'lost' : ''}">
+      <i class="lv-dot ${r.lost || r.stopping ? 'off' : ''}"></i><b class="lv-time">${fmt(elapsed(r))}</b>
+      <span class="lv-meter" aria-hidden="true"><i></i></span>
+      <span class="lv-st">${esc(status)}</span>
+      ${r.lost && !r.stopping ? `<button class="btn sm" type="button" data-lv="resume">Continua</button>` : ''}
+      ${r.stopping ? '' : `<button class="btn ink sm" type="button" data-lv="stop">${svg('<rect x="7" y="7" width="10" height="10" rx="2"/>')}Atura i resumeix</button>`}
+    </div>`;
+  }
+  function drawRec() {
+    if (!view || !rec || view.id !== rec.id) return;
+    const t = view.el.querySelector('.lv-time'); if (t) t.textContent = fmt(elapsed(rec));
+  }
+  const rangeTime = (n, p) => { const a = n.live.segs.find((s) => s.seq === p.from), b = n.live.segs.find((s) => s.seq === p.to); return `${fmt(a?.at || 0)}–${fmt((b?.at || 0) + (b?.dur || 0))}`; };
+  function notesHtml(n) {
+    const L = n.live, parts = L.parts.filter((p) => p.text || p.error);
+    const partsHtml = parts.map((p) => `<article class="lv-part"><h4>${rangeTime(n, p)}</h4>${p.text ? md(p.text) : `<p class="muted small">No s’han pogut fer aquests apunts (${esc(p.error)}). Es faran amb el resum.</p>`}</article>`).join('');
+    if (L.state === 'done' && n.text.trim()) {
+      return `<div class="lv-sum">${md(n.text)}</div>${L.summaryEngine ? `<p class="lv-by small muted">Resum fet amb ${esc(L.summaryEngine.replace(/^ollama:/, ''))}</p>` : ''}${parts.length ? `<details class="lv-parts"><summary>Apunts per trossos (${parts.length})</summary>${partsHtml}</details>` : ''}`;
+    }
+    const busy = L.state === 'closing' || L.state === 'summarizing';
+    return `${busy ? `<div class="lv-busy"><i class="nt-spin"></i><span>${esc(STATES[L.state])} Amb una classe llarga i un model local pot trigar uns minuts.</span></div>` : ''}
+      ${partsHtml || `<p class="lv-empty">${L.segs.length ? 'Els primers apunts surten quan hi hagi uns 4 minuts de veu transcrits.' : 'Quan comenci a parlar, aquí aniran sortint els apunts cada pocs minuts.'}</p>`}`;
+  }
+  function trHtml(n) {
+    const segs = n.live.segs;
+    if (!segs.length) return '<p class="lv-empty">La transcripció surt aquí cada 20 segons.</p>';
+    let out = '', lastMark = -999;
+    for (const s of segs) {
+      if (s.at - lastMark >= 60) { out += `<b class="lv-ts">${fmt(s.at)}</b>`; lastMark = s.at; }
+      out += s.state === 'transcribing' ? '<span class="lv-seg wait">…</span> '
+        : s.state === 'error' ? `<span class="lv-seg err" title="${esc(s.error)}">[no s’ha pogut transcriure]</span> `
+        : s.text ? `<span class="lv-seg">${esc(s.text)}</span> ` : '';
+    }
+    return `<p>${out}</p>`;
+  }
+  async function onClick(e) {
+    const tab = e.target.closest('[data-tab]');
+    if (tab) { view.tab = tab.dataset.tab; draw(); return; }
+    const a = e.target.closest('[data-lv]')?.dataset.lv; if (!a) return;
+    const id = view.id;
+    if (a === 'close') return close();
+    if (a === 'stop') return stop();
+    if (a === 'resume') return resume(id);
+    if (a === 'edit') { close(); setTimeout(() => openEditor(id), 60); return; }
+    if (a === 'again') {
+      const list = await loadEngines(), saved = LSget('nio.notes.engine', '');
+      const pick = list.length > 1 ? await chooseEngine(list, getNote(id)?.live?.engine || saved) : list[0]?.id || '';
+      if (pick === null) return;
+      try { setNote(await api(`/api/notes/${id}/live/summary`, { method: 'POST', body: { engine: pick } })); draw(); }
+      catch (er) { toast(er.message, 4500); }
+    }
+  }
+  function chooseEngine(list, cur) {
+    return new Promise((done) => {
+      const groups = [...new Set(list.map((x) => x.group))];
+      ctx.openSheet(`<h2>Torna a resumir</h2><div class="stack"><label class="f">Model<select id="lvAgain">${groups.map((g) => `<optgroup label="${esc(g)}">${list.filter((x) => x.group === g).map((x) => `<option value="${esc(x.id)}" ${x.id === cur ? 'selected' : ''}>${esc(x.label)}</option>`).join('')}</optgroup>`).join('')}</select></label>
+        <div class="row sheet-foot"><button class="btn ghost" type="button" data-no>Cancel·la</button><button class="btn ink" type="button" data-ok>Resumeix</button></div></div>`, (sh) => {
+        sh.querySelector('[data-no]').onclick = () => { ctx.closeSheet(); done(null); };
+        sh.querySelector('[data-ok]').onclick = () => { const v = sh.querySelector('#lvAgain').value; LSset('nio.notes.engine', v); ctx.closeSheet(); done(v); };
+      });
+    });
+  }
+
+  return {
+    start: startSheet,
+    open,
+    update(n) { if (view?.id === n.id) draw(); else drawPill(); },
+    get recording() { return !!rec; },
+  };
+}

package/web/app/notes.css

@@ -223,3 +223,68 @@ body:has(.nt-ov) { overflow: hidden; }
   .nt-ed { min-height: min(480px, calc(var(--vvh, 100dvh) - 48px)); max-height: min(820px, calc(var(--vvh, 100dvh) - 48px)); }
 }
 @media (prefers-reduced-motion: reduce) { .nt-card, .nt-new, .nt-pop, .nt-ai { transition: none; animation: none; } .nt-rec-dot, .nt-spin, .nt-skel { animation: none; } }
+
+/* ---------- Classe o reunió en directe (notes-live.js) */
+.nt-tools { display: flex; gap: 8px; flex-wrap: wrap; }
+.nt-badge.nt-lvb { color: var(--fg); }
+.nt-badge .lv-dot { width: 8px; height: 8px; }
+.lv-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--red); flex: none; animation: nt-pulse 1.1s ease-in-out infinite; }
+.lv-dot.off { background: var(--fg-muted); animation: none; }
+.lv-start .seg button { height: 44px; }
+.lv-start .seg .ico { width: 18px; height: 18px; }
+.lv-warn { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--lemon, #f6e9a0) 45%, transparent); }
+
+.lv { position: fixed; inset: 0; z-index: 72; display: flex; justify-content: center; background: var(--bg); overscroll-behavior: contain; }
+.lv-in { display: flex; flex-direction: column; width: min(1100px, 100%); height: 100%; padding: calc(10px + var(--safe-t, 0px)) 20px calc(10px + var(--safe-b, 0px)); gap: 12px; min-height: 0; }
+.lv-h { display: flex; align-items: center; gap: 8px; }
+.lv-ttl { flex: 1; min-width: 0; }
+.lv-ttl h2 { font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lv-ttl small { color: var(--fg-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
+.lv-rec { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--red) 9%, var(--white)); }
+.lv-rec.lost { background: color-mix(in srgb, var(--lemon, #f6e9a0) 55%, var(--white)); }
+.lv-time { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
+.lv-meter { width: 64px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; }
+.lv-meter i { display: block; height: 100%; background: var(--moss); transform-origin: left; transform: scaleX(0); transition: transform .12s linear; }
+.lv-st { flex: 1 1 160px; min-width: 0; font-size: 13px; color: var(--fg-muted); }
+.lv-rec .btn .ico { width: 15px; height: 15px; }
+.lv-state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--border); font-size: 14px; }
+.lv-state span { flex: 1 1 180px; }
+.lv-state[data-s="done"] { background: color-mix(in srgb, var(--moss) 10%, var(--white)); }
+.lv-err { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--red) 10%, var(--white)); color: var(--red); font-size: 14px; }
+.lv-tabs { display: none; }
+.lv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
+.lv-body > section { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--border); }
+.lv-tr { font-size: 15px; line-height: 1.65; }
+@media (min-width: 761px) { .lv-body > section::before { content: attr(data-label); display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--fg-muted); } }
+.lv-tr p { margin: 0; }
+.lv-ts { display: inline-block; margin: 0 6px 0 0; padding: 0 6px; border-radius: 6px; background: var(--bg-2); color: var(--fg-muted); font: 600 11px var(--mono); vertical-align: 1px; }
+.lv-tr .lv-ts:not(:first-child) { margin-top: 10px; }
+.lv-seg.wait { color: var(--fg-muted); }
+.lv-seg.err { color: var(--red); font-size: 13px; }
+.lv-empty { color: var(--fg-muted); font-size: 14px; }
+.lv-notes h3 { margin: 16px 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
+.lv-notes h3:first-child { margin-top: 0; }
+.lv-notes p { margin: 0 0 8px; line-height: 1.55; }
+.lv-notes ul { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; line-height: 1.5; }
+.lv-notes ul.lv-check { list-style: none; padding-left: 0; }
+.lv-notes ul.lv-check li::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 8px; border: 1.6px solid var(--fg-muted); border-radius: 4px; vertical-align: -2px; }
+.lv-part + .lv-part { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
+.lv-part h4 { margin-bottom: 6px; font: 600 12px var(--mono); color: var(--fg-muted); }
+.lv-busy { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--fg-muted); font-size: 14px; }
+.lv-parts { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
+.lv-parts summary { cursor: pointer; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
+.lv-by { margin-top: 12px; }
+.lv-pill { position: fixed; z-index: 66; left: 50%; bottom: calc(76px + var(--safe-b, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--fg); color: var(--bg); font: inherit; font-size: 14px; box-shadow: 0 10px 30px -10px rgba(39,34,36,.6); cursor: pointer; }
+.lv-pill b { font-variant-numeric: tabular-nums; }
+@media (max-width: 760px) {
+  .lv-in { padding-left: 12px; padding-right: 12px; gap: 10px; }
+  .lv-tabs { display: flex; }
+  .lv-body { display: block; }
+  .lv-body > section { height: 100%; }
+  .lv-body[data-tab="notes"] .lv-tr, .lv-body[data-tab="tr"] .lv-notes { display: none; }
+  .lv-time { font-size: 19px; }
+  .nt-tools .btn span { white-space: nowrap; }
+  .nt-tools .btn.nt-live-btn span { display: inline; }
+  .nt-tools .btn.nt-live-btn { padding: 0 13px; }
+}
+@media (prefers-reduced-motion: reduce) { .lv-dot { animation: none; } .lv-meter i { transition: none; } }

package/web/app/notes.js

@@ -1,3 +1,5 @@
+import { createLive } from './notes-live.js';
+
 // nio · Notes. Com Google Keep, però a l'ordinador: targetes, llistes, colors, etiquetes, veu (Whisper local)
 // i un assistent que resumeix i ordena amb un model local, Claude Code o Codex.
 // Es carrega des d'app.js, que li passa el que necessita (ctx).
@@ -24,6 +26,7 @@ const I = {
   pause: '<path d="M8 5.500v13M16 5.500v13"/>',
   phone: '<rect x="7" y="3" width="10" height="18" rx="2.500"/><path d="M11 18h2"/>',
   check: '<path d="M5 12.500l4.500 4.500L19 7.500"/>',
+  live: '<path d="M4 10v4M8 7v10M12 4v16M16 8v8M20 11v2"/>',
   more: '<circle cx="6" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="18" cy="12" r="1.5"/>',
 };
 const COLORS = [['', 'Sense color'], ['lemon', 'Llimona'], ['peach', 'Préssec'], ['moss', 'Molsa'], ['sky', 'Cel'], ['lilac', 'Lila'], ['rose', 'Rosa'], ['sand', 'Sorra']];
@@ -45,6 +48,8 @@ const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
 export function createNotes(ctx) {
   const { api, esc, toast } = ctx;
   const $ = (s, e = document) => e.querySelector(s);
+  // Classe o reunió: grava i transcriu en directe, en fa apunts i en acabar el resum (notes-live.js).
+  const live = createLive({ ctx, api, esc, toast, svg, getNote: (id) => notes.get(id), setNote: (n) => { upsert(n); if (root) { drawFilters(); drawGrid(); } schedule(); }, loadEngines: () => loadEngines(), openEditor: (id) => openEditor(id, null) });
   let root = null, notes = new Map(), loaded = false, loading = false, engines = null;
   let view = 'notes', q = '', layout = LSget('nio.notes.layout', 'grid');
   let ed = null, aborter = null;
@@ -101,7 +106,7 @@ export function createNotes(ctx) {
     root.innerHTML = `<div class="nt">
       <div class="nt-top">
         <div class="nt-title"><h1>Notes</h1><p>Escriu, grava i deixa que un model ho ordeni. Es desa a l’ordinador.</p></div>
-        ${ctx.isPhone() ? '' : `<div class="nt-tools"><button class="btn" type="button" data-nt="phone">${svg(I.phone)}<span>Mòbil com a micròfon</span></button></div>`}
+        <div class="nt-tools"><button class="btn nt-live-btn" type="button" data-nt="live">${svg(I.live)}<span>Classe o reunió</span></button>${ctx.isPhone() ? '' : `<button class="btn" type="button" data-nt="phone">${svg(I.phone)}<span>Mòbil com a micròfon</span></button>`}</div>
       </div>
       <div class="nt-bar">
         <label class="nt-search">${svg(I.search)}<input type="search" id="ntQ" placeholder="Busca a les notes" autocomplete="off" aria-label="Busca a les notes"></label>
@@ -143,6 +148,8 @@ export function createNotes(ctx) {
     const chip = (v, label, extra = '') => `<button type="button" class="nt-chip" data-nt="view" data-v="${esc(v)}" ${view === v ? 'aria-current="true"' : ''}>${extra}${esc(label)}</button>`;
     $('#ntFilters', root).innerHTML = `<div class="nt-filter-views">${chip('notes', 'Notes')}${chip('archive', 'Arxivades', svg(I.archive))}${chip('trash', nTrash ? `Paperera · ${nTrash}` : 'Paperera', svg(I.trash))}</div>${labs.length ? `<div class="nt-filter-labels"><span>Etiquetes</span>${labs.map((l) => chip(`l:${l}`, l, svg(I.tag))).join('')}</div>` : ''}`;
   }
+  // A la targeta, el Markdown (resums de classe, notes organitzades) es veu com a text net.
+  const plain = (t) => t.trim().replace(/^#{1,4}\s+/gm, '').replace(/\*\*([^*]+)\*\*/g, '$1').replace(/^(\s*)[-*]\s+\[[ x]\]\s+/gim, '$1☐ ').replace(/^(\s*)[-*]\s+/gm, '$1• ');
   function cardHtml(n) {
     const items = n.items || [];
     const open = items.filter((i) => !i.done), doneN = items.length - open.length;
@@ -151,9 +158,10 @@ export function createNotes(ctx) {
     return `<article class="nt-card" data-id="${n.id}" data-color="${n.color}" tabindex="0" aria-label="${esc(n.title || 'Nota sense títol')}">
       ${view === 'trash' ? '' : `<button class="nt-pin ${n.pinned ? 'on' : ''}" type="button" data-nt="pin" aria-label="${n.pinned ? 'Deixa de fixar' : 'Fixa la nota'}" aria-pressed="${n.pinned}">${svg(I.pin)}</button>`}
       ${n.title ? `<h3>${esc(n.title)}</h3>` : ''}
-      ${n.text.trim() ? `<div class="nt-txt">${esc(n.text.trim())}</div>` : ''}
+      ${n.text.trim() ? `<div class="nt-txt">${esc(plain(n.text))}</div>` : ''}
       ${items.length ? `<div class="nt-its">${shown.map((i) => `<div class="nt-it ${i.done ? 'done' : ''}"><input type="checkbox" data-nt="tick" data-i="${i.id}" ${i.done ? 'checked' : ''} aria-label="Fet"><span>${esc(i.text)}</span></div>`).join('')}${items.length > 8 ? `<span class="nt-more">+ ${items.length - 8} més</span>` : ''}${doneN && items.length <= 8 ? '' : ''}</div>` : ''}
       ${!n.title && !n.text.trim() && !items.length ? `<div class="nt-txt muted">${n.audio.length ? 'Nota de veu' : 'Nota buida'}</div>` : ''}
+      ${n.live ? liveBadge(n) : ''}
       ${n.audio.length ? `<div class="nt-badge ${err ? 'err' : ''}">${svg(I.mic)}<span>${pend ? 'Transcrivint…' : err ? 'No s’ha pogut transcriure' : `${n.audio.length} ${n.audio.length === 1 ? 'àudio' : 'àudios'}`}</span></div>` : ''}
       ${n.labels.length ? `<div class="nt-labels">${n.labels.map((l) => `<span class="nt-label">${esc(l)}</span>`).join('')}</div>` : ''}
       <div class="nt-acts">${view === 'trash'
@@ -161,6 +169,12 @@ export function createNotes(ctx) {
         : `<button type="button" data-nt="archive" title="${n.archived ? 'Desarxiva' : 'Arxiva'}">${svg(I.archive)}</button><button type="button" data-nt="trash" title="Paperera">${svg(I.trash)}</button>`}</div>
     </article>`;
   }
+  function liveBadge(n) {
+    const L = n.live, last = L.segs[L.segs.length - 1], mins = last ? Math.max(1, Math.round((last.at + last.dur) / 60)) : 0;
+    const kind = L.kind === 'reunio' ? 'Reunió' : 'Classe';
+    const st = L.state === 'rec' ? '<i class="lv-dot"></i>Gravant' : L.state === 'closing' || L.state === 'summarizing' ? 'Resumint…' : L.state === 'error' ? 'Sense resum' : `${kind}${mins ? ` · ${mins} min` : ''}`;
+    return `<div class="nt-badge nt-lvb ${L.state === 'error' ? 'err' : ''}">${L.state === 'rec' ? '' : svg(I.live)}<span>${st}</span></div>`;
+  }
   function drawGrid() {
     if (!root) return;
     if (swipe?.card) { swipe.redraw = true; return; } // no es toca la llista amb una targeta sota el dit
@@ -194,6 +208,7 @@ export function createNotes(ctx) {
     if (act === 'view') { view = t.dataset.v; drawFilters(); drawGrid(); return; }
     if (act === 'layout') { layout = layout === 'grid' ? 'list' : 'grid'; LSset('nio.notes.layout', layout); drawLayout(); return; }
     if (act === 'phone') return phoneSheet();
+    if (act === 'live') return live.start();
     if (act === 'new') return openEditor(null, $('#ntNew', root));
     if (act === 'newlist') { e.stopPropagation(); return openEditor(null, $('#ntNew', root), { list: true }); }
     if (act === 'newmic') { e.stopPropagation(); return openEditor(null, $('#ntNew', root), { mic: true }); }
@@ -207,7 +222,7 @@ export function createNotes(ctx) {
       if (act === 'restore') return patch(n, { trashed: false });
       if (act === 'forever') { if (confirm('Aquesta nota s’esborrarà per sempre.')) api(`/api/notes/${n.id}?forever=1`, { method: 'DELETE' }).catch((er) => toast(er.message)); return; }
     }
-    if (card && n) return openEditor(n.id, card);
+    if (card && n) { if (n.live && live.open(n.id)) return; return openEditor(n.id, card); }
   }
   // Lliscar una targeta cap a qualsevol costat l'arxiva (o la desarxiva a «Arxivades»), com a Keep.
   // Segueix el dit 1:1; si passa d'un terç de l'amplada o es llença ràpid, marxa; si no, torna al lloc.
@@ -289,14 +304,16 @@ export function createNotes(ctx) {
       ed.n = mine; notes.set(n.id, mine); syncEditor();
     }
     if (root) { drawFilters(); drawGrid(); }
-    if (n.audio?.some((a) => a.state === 'transcribing')) schedule();
+    live.update(n);
+    if (n.audio?.some((a) => a.state === 'transcribing') || liveBusy(n)) schedule();
   }
+  const liveBusy = (n) => !!n.live && (['closing', 'summarizing'].includes(n.live.state) || n.live.segs.some((s) => s.state === 'transcribing'));
   const reload = () => { if (root || loaded) load(); };
 
   // Per si el flux en directe s'ha perdut (mòbil en segon pla, túnel que talla): es consulta l'ordinador
   // cada poc mentre hi ha àudio transcrivint-se i, si no, de tant en tant. Només s'aplica el que ha canviat.
   let pollT = 0, polling = false;
-  const busy = () => all().some((n) => n.audio.some((a) => a.state === 'transcribing')) || !!ed?.uploading;
+  const busy = () => all().some((n) => n.audio.some((a) => a.state === 'transcribing') || liveBusy(n)) || !!ed?.uploading || live.recording;
   async function refresh() {
     if (polling || inflight || loading || !loaded || ctx.isDemo?.()) return; polling = true;
     const mk = machineKey();

package/web/app/style.css

@@ -550,7 +550,14 @@ a.kbd { text-decoration: none; color: inherit; }
 .composer .mic.wait { opacity: .5; }
 
 /* ---------- Ordre i text net ---------- */
-.grid2.one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
+.grid2.one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
+.cols { max-width: 760px; }
+/* Pantalla ampla: els panells d'una sola columna (Ajustos, Ordinadors, Pantalla) es reparteixen en dues, sense forats. */
+@media (min-width: 1180px) {
+  .grid2.one, .cols { max-width: none; }
+  .cols, .grid2.one > .stack { display: block; columns: 2; column-gap: 16px; }
+  .cols > *, .grid2.one > .stack > * { break-inside: avoid; margin: 0 0 16px; }
+}
 .top h1, .top p, .panel.empty h2, .panel.empty p, .stepper p, .stepper b, .help-body p, .card p, .sheet h2, .sheet p, .tour-card h3, .tour-card p, .muted.small { text-wrap: balance; }
 @media (max-width: 820px) {
   .side nav a[href="#/models"] { display: none; }
@@ -732,7 +739,7 @@ html.rd-open, html.rd-open body { overflow: hidden; }
 #jobMinsU { flex: 1; }
 
 /* Demo: avís d'ordinador simulat */
-.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 16px 40px 0; padding: 10px 12px 10px 16px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--panel); font-size: 13px; }
+.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 16px 40px 0; max-width: 1000px; padding: 10px 12px 10px 16px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--panel); font-size: 13px; }
 .demo-bar b { color: var(--accent); }
 body.chat-mode .demo-bar, body.board-mode .demo-bar { display: none; }
 @media (max-width: 820px) { .demo-bar { margin: 12px 16px 0; } }
@@ -814,3 +821,15 @@ dialog.sheet:has(#memForm) { width: min(780px, calc(100% - 32px)); }
 .term-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border-style: dashed; }
 .term-card:disabled { opacity: .6; cursor: progress; }
 .term-go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--fg); }
+
+/* Pas a pas de la clau d'ElevenLabs */
+.el-guide { margin: -4px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); font-size: 13.5px; }
+.el-guide summary { cursor: pointer; font-weight: 600; }
+.el-guide ol { margin: 10px 0 6px; padding-left: 20px; display: grid; gap: 8px; line-height: 1.45; }
+.el-guide ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 4px; }
+.el-guide a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+.el-on, .el-off { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 600; }
+.el-on { background: color-mix(in srgb, var(--moss) 18%, transparent); color: var(--moss); }
+.el-off { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg-muted); }
+.linkish { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
+.main:has(.nt) .demo-bar { max-width: 1160px; }

package/web/sw.js

@@ -1,6 +1,6 @@
 // nio · service worker: obre l'app encara que no hi hagi connexió i mostra els avisos.
-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'];
+const SHELL = 'nio-shell-v53';
+const FILES = ['/app', '/app/style.css', '/app/notes.css', '/app/call.css', '/app/app.js', '/app/notes.js', '/app/notes-live.js', '/app/call.js', '/app/demo.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
 
 self.addEventListener('install', (e) => {
   e.waitUntil(caches.open(SHELL).then((c) => c.addAll(FILES)).catch(() => {}));