nio-cat 0.9.9 → 0.9.11

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();