nio-cat 0.9.6 → 0.9.7

package/web/app/notes.js

@@ -0,0 +1,504 @@
+// 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).
+
+const I = {
+  pin: '<path d="M9 4h6l-1 6 3 3v1H7v-1l3-3z"/><path d="M12 14v6"/>',
+  archive: '<rect x="3.5" y="4.5" width="17" height="4" rx="1"/><path d="M5 8.5V19h14V8.5M10 12.5h4"/>',
+  trash: '<path d="M5 7h14M10 7V4.5h4V7M7 7l1 13h8l1-13M10.5 11v5.5M13.5 11v5.5"/>',
+  restore: '<path d="M4 12a8 8 0 1 0 2.5-5.8L4 8.5"/><path d="M4 4v4.5h4.5"/>',
+  list: '<path d="M9 6.5h11M9 12h11M9 17.5h11"/><path d="M3.8 6.5l1 1 1.8-2M3.8 12l1 1 1.8-2M3.8 17.5l1 1 1.8-2"/>',
+  text: '<path d="M5 6h14M5 11h14M5 16h9"/>',
+  mic: '<rect x="9" y="3.5" width="6" height="11" rx="3"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3"/>',
+  stop: '<rect x="7" y="7" width="10" height="10" rx="2"/>',
+  palette: '<path d="M12 3.5a8.5 8.5 0 1 0 0 17c1.4 0 2-.9 1.6-2-.4-1.2.3-2.3 1.600-2.300H17a3.500 3.500 0 0 0 3.500-3.500C20.500 7 16.800 3.500 12 3.500z"/><circle cx="8" cy="11" r="1"/><circle cx="11" cy="7.500" r="1"/><circle cx="15.500" cy="8.500" r="1"/>',
+  tag: '<path d="M4 4h7.500l8.500 8.500-7.500 7.500L4 11.500z"/><circle cx="8.500" cy="8.500" r="1.200"/>',
+  spark: '<path d="M12 3.500l1.800 5.200 5.200 1.800-5.200 1.800L12 17.500l-1.800-5.200L5 10.500l5.200-1.800zM18.500 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/>',
+  close: '<path d="M6 6l12 12M18 6L6 18"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  search: '<circle cx="11" cy="11" r="6.500"/><path d="M16 16l4 4"/>',
+  grid: '<rect x="4" y="4" width="7" height="7" rx="1.500"/><rect x="13" y="4" width="7" height="7" rx="1.500"/><rect x="4" y="13" width="7" height="7" rx="1.500"/><rect x="13" y="13" width="7" height="7" rx="1.500"/>',
+  rows: '<rect x="4" y="5" width="16" height="5" rx="1.500"/><rect x="4" y="14" width="16" height="5" rx="1.500"/>',
+  play: '<path d="M8 5.500l10 6.500-10 6.500z"/>',
+  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"/>',
+};
+const COLORS = [['', 'Sense color'], ['lemon', 'Llimona'], ['peach', 'Préssec'], ['moss', 'Molsa'], ['sky', 'Cel'], ['lilac', 'Lila'], ['rose', 'Rosa'], ['sand', 'Sorra']];
+const ACTIONS = [
+  ['summary', 'Resumeix', 'Punts clau de la nota'],
+  ['clean', 'Neteja la transcripció', 'Puntuació, paràgrafs, sense «eh»'],
+  ['organize', 'Organitza', 'Títol, ordre i etiquetes'],
+  ['tasks', 'Extreu tasques', 'Les accions pendents, en llista'],
+  ['title', 'Posa-hi un títol', 'Una frase curta'],
+];
+const svg = (d) => `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true">${d}</svg>`;
+const uid = () => Math.random().toString(36).slice(2, 10);
+const fmtDur = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
+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 */ } };
+const grow = (ta) => { ta.style.height = 'auto'; ta.style.height = `${ta.scrollHeight}px`; };
+const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+export function createNotes(ctx) {
+  const { api, esc, toast } = ctx;
+  const $ = (s, e = document) => e.querySelector(s);
+  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;
+
+  // ---------------------------------------------------------------- dades
+  const all = () => [...notes.values()];
+  const empty = (n) => !n.title.trim() && !n.text.trim() && !(n.items || []).some((i) => i.text.trim()) && !n.audio.length;
+  const labelsOf = () => [...new Set(all().filter((n) => !n.trashed).flatMap((n) => n.labels))].sort((a, b) => a.localeCompare(b, 'ca'));
+  const haystack = (n) => `${n.title}\n${n.text}\n${(n.items || []).map((i) => i.text).join('\n')}\n${n.labels.join(' ')}`.toLowerCase();
+  function visible() {
+    const term = q.trim().toLowerCase();
+    return all().filter((n) => {
+      if (view === 'trash') { if (!n.trashed) return false; }
+      else if (n.trashed) return false;
+      else if (view === 'archive') { if (!n.archived) return false; }
+      else if (view.startsWith('l:')) { if (!n.labels.includes(view.slice(2))) return false; }
+      else if (n.archived && !term) return false;
+      return !term || haystack(n).includes(term);
+    }).sort((a, b) => (b.pinned - a.pinned) || b.updated - a.updated);
+  }
+  async function load() {
+    if (loading) return; loading = true;
+    try { const r = await api('/api/notes'); notes = new Map(r.notes.map((n) => [n.id, n])); loaded = true; }
+    catch (e) { if (root) root.querySelector('#ntGrid').innerHTML = `<p class="nt-empty">${esc(e.message)}</p>`; }
+    loading = false; drawAll();
+  }
+  const upsert = (n) => { const old = notes.get(n.id); notes.set(n.id, n); return old; };
+
+  // ---------------------------------------------------------------- pàgina
+  function mount(el) {
+    root = el; aborter?.abort(); aborter = new AbortController();
+    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>
+        <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>
+      <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>
+        <button class="icon-btn" type="button" data-nt="layout" aria-label="Canvia la vista" id="ntLayout"></button>
+      </div>
+      <div class="nt-new" id="ntNew" role="button" tabindex="0" data-nt="new"><span>Escriu una nota…</span>
+        <span class="nt-new-b"><button type="button" data-nt="newlist" aria-label="Nova llista" title="Nova llista">${svg(I.list)}</button><button type="button" data-nt="newmic" aria-label="Grava una nota" title="Grava una nota">${svg(I.mic)}</button></span></div>
+      <nav class="nt-filters" id="ntFilters" aria-label="Filtres"></nav>
+      <div id="ntGrid" class="nt-body"></div>
+    </div>`;
+    const sig = { signal: aborter.signal };
+    $('#ntQ', root).addEventListener('input', (e) => { q = e.target.value; drawGrid(); }, sig);
+    root.addEventListener('click', onClick, sig);
+    root.addEventListener('keydown', (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target.matches?.('.nt-card, #ntNew')) { e.preventDefault(); e.target.click(); } }, sig);
+    drawAll();
+    load();
+    if (/[?&]mic=1/.test(location.hash)) setTimeout(() => openEditor(null, $('#ntNew', root), { mic: true }), 250);
+  }
+  function unmount() { aborter?.abort(); closeEditor(true); root = null; }
+  const drawAll = () => { if (!root) return; drawLayout(); drawFilters(); drawGrid(); };
+  function drawLayout() { const b = $('#ntLayout', root); if (b) b.innerHTML = svg(layout === 'grid' ? I.rows : I.grid); root.querySelector('.nt').dataset.layout = layout; }
+  function drawFilters() {
+    const labs = labelsOf(), nTrash = all().filter((n) => n.trashed).length;
+    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 = chip('notes', 'Notes') + labs.map((l) => chip(`l:${l}`, l, svg(I.tag))).join('') + chip('archive', 'Arxivades', svg(I.archive)) + chip('trash', nTrash ? `Paperera · ${nTrash}` : 'Paperera', svg(I.trash));
+  }
+  function cardHtml(n) {
+    const items = n.items || [];
+    const open = items.filter((i) => !i.done), doneN = items.length - open.length;
+    const shown = [...open, ...items.filter((i) => i.done)].slice(0, 8);
+    const pend = n.audio.filter((a) => a.state === 'transcribing').length, err = n.audio.some((a) => a.state === 'error');
+    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>` : ''}
+      ${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.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'
+        ? `<button type="button" data-nt="restore" title="Recupera">${svg(I.restore)}</button><button type="button" data-nt="forever" title="Esborra del tot">${svg(I.trash)}</button>`
+        : `<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 drawGrid() {
+    const g = $('#ntGrid', root); if (!g) return;
+    if (!loaded) { g.innerHTML = '<div class="nt-grid"><i class="nt-skel"></i><i class="nt-skel tall"></i><i class="nt-skel"></i></div>'; return; }
+    const list = visible();
+    if (!list.length) {
+      g.innerHTML = `<p class="nt-empty">${q ? 'Cap nota coincideix amb la cerca.' : view === 'trash' ? 'La paperera és buida. Les notes s’hi esborren soles als 30 dies.' : view === 'archive' ? 'No hi ha notes arxivades.' : view.startsWith('l:') ? 'Cap nota amb aquesta etiqueta.' : 'Encara no hi ha cap nota. Escriu-ne una o grava-la amb la veu.'}</p>`;
+      return;
+    }
+    const sec = (title, arr) => arr.length ? `${title ? `<h2 class="nt-sec">${title}</h2>` : ''}<div class="nt-grid">${arr.map(cardHtml).join('')}</div>` : '';
+    const pinned = view === 'notes' || view.startsWith('l:') ? list.filter((n) => n.pinned) : [];
+    const rest = pinned.length ? list.filter((n) => !n.pinned) : list;
+    g.innerHTML = view === 'trash' ? `<div class="nt-trash-bar"><span>Esborrades soles als 30 dies.</span><button class="btn ghost" type="button" data-nt="empty-trash">Buida la paperera</button></div>${sec('', list)}` : sec(pinned.length ? 'Fixades' : '', pinned) + sec(pinned.length ? 'Altres' : '', rest);
+  }
+
+  // ---------------------------------------------------------------- clics de la pàgina
+  async function onClick(e) {
+    const t = e.target.closest('[data-nt]'), card = e.target.closest('.nt-card');
+    const act = t?.dataset.nt, n = card ? notes.get(card.dataset.id) : null;
+    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 === '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 }); }
+    if (act === 'empty-trash') { if (!confirm('S’esborraran per sempre totes les notes de la paperera.')) return; for (const x of all().filter((m) => m.trashed)) api(`/api/notes/${x.id}?forever=1`, { method: 'DELETE' }).catch(() => {}); return; }
+    if (n && act) {
+      e.stopPropagation();
+      if (act === 'tick') { const items = n.items.map((i) => (i.id === t.dataset.i ? { ...i, done: t.checked } : i)); return patch(n, { items }); }
+      if (act === 'pin') return patch(n, { pinned: !n.pinned });
+      if (act === 'archive') return leave(card, () => patch(n, { archived: !n.archived, pinned: false }), n.archived ? 'Desarxivada' : 'Arxivada', () => patch(n, { archived: n.archived, pinned: n.pinned }));
+      if (act === 'trash') return leave(card, () => patch(n, { trashed: true }), 'Anat a la paperera', () => patch(n, { trashed: false }));
+      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);
+  }
+  // La targeta s'esvaeix abans de marxar de la llista; el toast permet desfer-ho.
+  function leave(card, fn, msg, undo) {
+    if (!reduce) { card.style.transition = 'opacity .16s, transform .16s'; card.style.opacity = '0'; card.style.transform = 'scale(.96)'; }
+    setTimeout(() => { fn(); toastUndo(msg, undo); }, reduce ? 0 : 150);
+  }
+  function toastUndo(msg, undo) {
+    toast(msg, 4200);
+    const t = document.querySelector('#toasts')?.lastElementChild; if (!t || !undo) return;
+    const b = document.createElement('button'); b.type = 'button'; b.className = 'nt-undo'; b.textContent = 'Desfés';
+    b.addEventListener('pointerdown', (ev) => ev.stopPropagation()); // el toast captura el punter per poder-lo arrossegar
+    b.onclick = (ev) => { ev.stopPropagation(); undo(); t.remove(); };
+    t.append(' ', b);
+  }
+  async function patch(n, fields) {
+    Object.assign(n, fields); notes.set(n.id, n); drawAll();
+    try { upsert(await api(`/api/notes/${n.id}`, { method: 'PATCH', body: fields })); } catch (e) { toast(e.message, 4200); load(); }
+  }
+
+  // ---------------------------------------------------------------- esdeveniments en directe (del flux d'nio)
+  function onEvent(msg) {
+    if (msg.type === 'note-gone') { notes.delete(msg.id); if (ed?.id === msg.id) closeEditor(true); drawAll(); return; }
+    const n = msg.note, old = upsert(n); void old;
+    if (ed && ed.id === n.id) {
+      // Del servidor només entra el que no estem editant ara mateix: l'àudio, la transcripció i els canvis d'altres dispositius.
+      const keep = new Set(Object.keys(ed.dirty));
+      const mine = ed.n; for (const k of Object.keys(n)) if (!keep.has(k)) mine[k] = n[k];
+      ed.n = mine; notes.set(n.id, mine); syncEditor();
+    }
+    if (root) { drawFilters(); drawGrid(); }
+  }
+  const reload = () => { if (root || loaded) load(); };
+
+  // ---------------------------------------------------------------- editor
+  function openEditor(id, src, opts = {}) {
+    if (ed) return;
+    const n = id ? notes.get(id) : { id: null, title: '', text: '', items: opts.list ? [] : null, color: '', pinned: false, archived: false, trashed: 0, labels: [], audio: [] };
+    if (!n) return;
+    ed = { id, n, dirty: {}, timer: 0, chain: Promise.resolve(), rec: null, ai: null, src, pop: null };
+    const ov = document.createElement('div');
+    ov.className = 'nt-ov'; ov.innerHTML = `<div class="nt-ed" role="dialog" aria-modal="true" aria-label="Edita la nota" data-color="${n.color}"></div>`;
+    document.body.append(ov); ed.ov = ov; ed.card = ov.firstElementChild;
+    buildEditor();
+    ov.addEventListener('mousedown', (e) => { if (e.target === ov) closeEditor(); });
+    ov.addEventListener('keydown', (e) => { if (e.key === 'Escape') { if (ed.pop) closePop(); else closeEditor(); } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) closeEditor(); });
+    animateOpen(ed.card, src);
+    if (!n.title && !n.text && !n.items?.length && !opts.mic) setTimeout(() => ($('.nt-ed-title', ed.card) || {}).focus?.(), 60);
+    if (opts.list) addItem(null);
+    if (opts.mic) setTimeout(() => toggleRec(), 220);
+  }
+  function animateOpen(card, src) {
+    if (reduce) return;
+    const phone = matchMedia('(max-width: 700px)').matches;
+    if (phone || !src?.isConnected) { card.animate([{ transform: 'translateY(40px)', opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 260, easing: 'cubic-bezier(.22,1,.36,1)' }); return; }
+    const a = src.getBoundingClientRect(), b = card.getBoundingClientRect();
+    const dx = a.left - b.left, dy = a.top - b.top, sx = a.width / b.width, sy = Math.max(.2, a.height / b.height);
+    card.style.transformOrigin = '0 0';
+    card.animate([{ transform: `translate(${dx}px,${dy}px) scale(${sx},${sy})`, opacity: .6 }, { transform: 'none', opacity: 1 }], { duration: 300, easing: 'cubic-bezier(.22,1,.36,1)' });
+    ed.ov.animate([{ background: 'rgba(39,34,36,0)' }, { background: 'rgba(39,34,36,.32)' }], { duration: 300, easing: 'ease-out' });
+  }
+  async function closeEditor(instant) {
+    const e = ed; if (!e) return;
+    ed = null; clearTimeout(e.timer); e.rec?.cancel?.(); e.audioEl?.pause();
+    const done = () => e.ov.remove();
+    if (instant || reduce) done(); else {
+      const src = e.id && root ? root.querySelector(`.nt-card[data-id="${e.id}"]`) : null, phone = matchMedia('(max-width: 700px)').matches;
+      let kf = [{ transform: 'none', opacity: 1 }, { transform: 'translateY(30px)', opacity: 0 }];
+      if (!phone && src) { const a = src.getBoundingClientRect(), b = e.card.getBoundingClientRect(); kf = [{ transform: 'none', opacity: 1 }, { transform: `translate(${a.left - b.left}px,${a.top - b.top}px) scale(${a.width / b.width},${Math.max(.2, a.height / b.height)})`, opacity: .4 }]; }
+      e.card.style.transformOrigin = '0 0';
+      e.card.animate(kf, { duration: 220, easing: 'cubic-bezier(.4,0,.2,1)', fill: 'forwards' });
+      e.ov.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 220, fill: 'forwards' }).onfinish = done;
+    }
+    await flush(e);
+    if (e.id && empty(e.n)) { notes.delete(e.id); api(`/api/notes/${e.id}?forever=1`, { method: 'DELETE' }).catch(() => {}); }
+    if (root) drawAll();
+  }
+
+  // Desat: s'envia només el que ha canviat, en cua, mig segon després de l'última tecla.
+  function set(fields) {
+    Object.assign(ed.n, fields); Object.assign(ed.dirty, fields);
+    ed.card.dataset.color = ed.n.color;
+    clearTimeout(ed.timer); ed.timer = setTimeout(flush, 450);
+    if (ed.id) notes.set(ed.id, ed.n);
+    if (root) { clearTimeout(set.t); set.t = setTimeout(() => { drawFilters(); drawGrid(); }, 200); }
+  }
+  function flush(e = ed, force = false) {
+    if (!e) return Promise.resolve();
+    clearTimeout(e.timer);
+    e.chain = e.chain.then(async () => {
+      const fields = e.dirty; e.dirty = {};
+      try {
+        if (!e.id) {
+          if (!force && empty(e.n)) { e.dirty = { ...fields, ...e.dirty }; return; } // una nota buida no es desa
+          const { audio, id, ...body } = e.n; void audio; void id;
+          const r = await api('/api/notes', { method: 'POST', body }); e.id = r.id; Object.assign(e.n, { id: r.id, audio: r.audio, created: r.created, updated: r.updated }); notes.set(r.id, e.n);
+        } else if (Object.keys(fields).length) { const r = await api(`/api/notes/${e.id}`, { method: 'PATCH', body: fields }); void r; }
+      } catch (er) { Object.assign(fields, e.dirty); e.dirty = fields; toast(`No s’ha pogut desar: ${er.message}`, 4500); }
+    });
+    return e.chain;
+  }
+  const ensureId = async () => { if (!ed.id) await flush(ed, true); return ed.id; };
+
+  function buildEditor() {
+    const n = ed.n, c = ed.card;
+    c.innerHTML = `
+      <div class="nt-ed-head"><input class="nt-ed-title" type="text" placeholder="Títol" value="${esc(n.title)}" aria-label="Títol" maxlength="200" autocomplete="off">
+        <button class="nt-ib ${n.pinned ? 'on' : ''}" type="button" data-e="pin" aria-label="Fixa la nota" aria-pressed="${n.pinned}">${svg(I.pin)}</button></div>
+      <div class="nt-ed-body" id="edBody"></div>
+      <div class="nt-audio" id="edAudio"></div>
+      <div class="nt-labels nt-ed-labels" id="edLabels"></div>
+      <div class="nt-ai" id="edAi" hidden></div>
+      <div class="nt-rec" id="edRec" hidden></div>
+      <div class="nt-ed-foot" id="edFoot">
+        <div class="nt-tb">
+          <button class="nt-ib" type="button" data-e="mic" aria-label="Grava amb el micròfon" title="Grava (Whisper, a l’ordinador)">${svg(I.mic)}</button>
+          <button class="nt-ib" type="button" data-e="mode" id="edMode" title="Llista o text"></button>
+          <button class="nt-ib" type="button" data-e="color" aria-label="Color" title="Color">${svg(I.palette)}</button>
+          <button class="nt-ib" type="button" data-e="label" aria-label="Etiquetes" title="Etiquetes">${svg(I.tag)}</button>
+          <button class="nt-ib nt-ai-b" type="button" data-e="ai" aria-label="Assistent" title="Resumeix i organitza amb un model">${svg(I.spark)}<span>Assistent</span></button>
+          <span class="nt-sp"></span>
+          <button class="nt-ib" type="button" data-e="archive" aria-label="Arxiva" title="Arxiva">${svg(I.archive)}</button>
+          <button class="nt-ib" type="button" data-e="trash" aria-label="Paperera" title="Paperera">${svg(I.trash)}</button>
+          <button class="btn ink nt-done" type="button" data-e="done">Fet</button>
+        </div>
+      </div>`;
+    const title = $('.nt-ed-title', c);
+    title.addEventListener('input', () => set({ title: title.value }));
+    title.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); ($('.nt-ed-text', c) || $('.nt-item input[type=text]', c))?.focus(); } });
+    c.addEventListener('click', onEditorClick);
+    drawBody(); drawAudio(); drawLabels(); drawMode();
+  }
+  function drawMode() { const b = $('#edMode', ed.card); if (b) { b.innerHTML = svg(ed.n.items ? I.text : I.list); b.setAttribute('aria-label', ed.n.items ? 'Passa a text' : 'Passa a llista'); } }
+  function drawBody() {
+    const n = ed.n, box = $('#edBody', ed.card);
+    if (!n.items) {
+      box.innerHTML = '<textarea class="nt-ed-text" placeholder="Escriu una nota…" aria-label="Text de la nota" rows="3"></textarea>';
+      const ta = $('textarea', box); ta.value = n.text; grow(ta);
+      ta.addEventListener('input', () => { grow(ta); set({ text: ta.value }); });
+      return;
+    }
+    const open = n.items.filter((i) => !i.done), done = n.items.filter((i) => i.done);
+    const row = (i) => `<div class="nt-item ${i.done ? 'done' : ''}" data-i="${i.id}"><input type="checkbox" data-e="tick" ${i.done ? 'checked' : ''} aria-label="Fet"><input type="text" value="${esc(i.text)}" placeholder="Element" aria-label="Element" maxlength="500"><button type="button" class="nt-x" data-e="rm" aria-label="Treu l’element">${svg(I.close)}</button></div>`;
+    box.innerHTML = `${n.text.trim() ? '<textarea class="nt-ed-text nt-desc" rows="2" aria-label="Text de la nota"></textarea>' : ''}<div id="edItems">${open.map(row).join('')}</div><button class="nt-add" type="button" data-e="add">${svg(I.plus)}<span>Afegeix un element</span></button>${done.length ? `<div class="nt-donehd">${done.length} ${done.length === 1 ? 'fet' : 'fets'}</div><div>${done.map(row).join('')}</div>` : ''}`;
+    const d = $('.nt-desc', box); if (d) { d.value = n.text; grow(d); d.addEventListener('input', () => { grow(d); set({ text: d.value }); }); }
+    $$all('.nt-item input[type=text]', box).forEach((inp) => {
+      const id = inp.closest('.nt-item').dataset.i;
+      inp.addEventListener('input', () => set({ items: ed.n.items.map((x) => (x.id === id ? { ...x, text: inp.value } : x)) }));
+      inp.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); addItem(id); }
+        else if (e.key === 'Backspace' && !inp.value) { e.preventDefault(); const prev = inp.closest('.nt-item').previousElementSibling; removeItem(id); prev?.querySelector('input[type=text]')?.focus(); }
+      });
+    });
+  }
+  const $$all = (s, e) => [...e.querySelectorAll(s)];
+  function addItem(afterId) {
+    const it = { id: uid(), text: '', done: false }, arr = [...ed.n.items], i = afterId ? arr.findIndex((x) => x.id === afterId) : arr.length - 1;
+    arr.splice(i + 1, 0, it); set({ items: arr }); drawBody(); $(`.nt-item[data-i="${it.id}"] input[type=text]`, ed.card)?.focus();
+  }
+  function removeItem(id) { set({ items: ed.n.items.filter((x) => x.id !== id) }); drawBody(); }
+  function drawLabels() { const box = $('#edLabels', ed.card); box.innerHTML = ed.n.labels.map((l) => `<span class="nt-label">${esc(l)}<button type="button" data-e="unlabel" data-l="${esc(l)}" aria-label="Treu l’etiqueta ${esc(l)}">${svg(I.close)}</button></span>`).join(''); box.hidden = !ed.n.labels.length; }
+  function drawAudio() {
+    const box = $('#edAudio', ed.card), list = ed.n.audio;
+    box.hidden = !list.length;
+    box.innerHTML = list.map((a) => `<div class="nt-au" data-a="${a.id}" data-st="${a.state}">
+      <button type="button" class="nt-ib sm" data-e="play" aria-label="Escolta">${svg(I.play)}</button>
+      <span class="nt-au-d">${a.dur ? fmtDur(a.dur) : 'Àudio'}</span>
+      <span class="nt-au-s">${a.state === 'transcribing' ? '<i class="nt-spin"></i>Transcrivint amb Whisper…' : a.state === 'ok' ? `${svg(I.check)}Transcripció afegida` : `${esc(a.error || 'No s’ha pogut transcriure')}`}</span>
+      ${a.state === 'error' ? (/Whisper|veu/i.test(a.error) && !ctx.voiceOn() ? '<button type="button" class="btn sm" data-e="voice">Activa Whisper</button>' : '<button type="button" class="btn ghost sm" data-e="retry">Torna-ho a provar</button>') : ''}</div>`).join('');
+  }
+  // Canvis que arriben de fora (transcripció acabada, un altre dispositiu).
+  function syncEditor() {
+    const n = ed.n, c = ed.card;
+    drawAudio(); drawLabels(); drawMode(); c.dataset.color = n.color;
+    const ta = $('.nt-ed-text', c); if (ta && document.activeElement !== ta && ta.value !== n.text) { ta.value = n.text; grow(ta); }
+    const ti = $('.nt-ed-title', c); if (document.activeElement !== ti && ti.value !== n.title) ti.value = n.title;
+    if (n.items && !c.contains(document.activeElement?.closest?.('.nt-item'))) drawBody();
+    if (!n.items && !ta) drawBody();
+    $('[data-e="pin"]', c).classList.toggle('on', n.pinned);
+  }
+
+  async function onEditorClick(ev) {
+    const b = ev.target.closest('[data-e]'), c = ed?.card; if (!b || !ed) { if (ed?.pop && !ev.target.closest('.nt-pop')) closePop(); return; }
+    const a = b.dataset.e;
+    if (!['color', 'label', 'ai', 'aiengine'].includes(a) && !ev.target.closest('.nt-pop')) closePop();
+    if (a === 'done') return closeEditor();
+    if (a === 'pin') { set({ pinned: !ed.n.pinned }); b.classList.toggle('on', ed.n.pinned); b.setAttribute('aria-pressed', ed.n.pinned); return; }
+    if (a === 'archive') { set({ archived: !ed.n.archived, pinned: false }); toast(ed.n.archived ? 'Arxivada' : 'Desarxivada'); return closeEditor(); }
+    if (a === 'trash') { set({ trashed: true }); toast('Anat a la paperera'); return closeEditor(); }
+    if (a === 'mode') {
+      const n = ed.n;
+      if (n.items) set({ text: [n.text, ...n.items.map((i) => i.text)].filter((s) => s.trim()).join('\n'), items: null });
+      else { const lines = n.text.split('\n').map((s) => s.replace(/^\s*(?:[-*•]|\[[ x]\])\s*/i, '').trim()).filter(Boolean); set({ items: lines.map((t) => ({ id: uid(), text: t, done: false })), text: '' }); if (!lines.length) addItem(null); }
+      drawMode(); drawBody(); return;
+    }
+    if (a === 'tick') { const id = b.closest('.nt-item').dataset.i; set({ items: ed.n.items.map((x) => (x.id === id ? { ...x, done: b.checked } : x)) }); drawBody(); return; }
+    if (a === 'rm') return removeItem(b.closest('.nt-item').dataset.i);
+    if (a === 'add') return addItem(null);
+    if (a === 'unlabel') { set({ labels: ed.n.labels.filter((l) => l !== b.dataset.l) }); drawLabels(); return; }
+    if (a === 'color') return popColor(b);
+    if (a === 'label') return popLabel(b);
+    if (a === 'ai') return popAi(b);
+    if (a === 'mic') return toggleRec();
+    if (a === 'play') return play(b.closest('.nt-au').dataset.a, b);
+    if (a === 'voice') return ctx.voiceSheet();
+    if (a === 'retry') { try { await api(`/api/notes/${ed.id}/audio/${b.closest('.nt-au').dataset.a}/retry`, { method: 'POST' }); } catch (e) { toast(e.message, 4500); } return; }
+    void c;
+  }
+
+  // ---------------------------------------------------------------- finestretes (color, etiquetes, assistent)
+  function closePop() { ed?.pop?.remove(); if (ed) ed.pop = null; }
+  function pop(anchor, html) {
+    closePop();
+    const p = document.createElement('div'); p.className = 'nt-pop'; p.innerHTML = html;
+    ed.card.append(p); ed.pop = p;
+    const a = anchor.getBoundingClientRect(), r = ed.card.getBoundingClientRect(), w = p.offsetWidth;
+    p.style.left = `${Math.max(8, Math.min(a.left - r.left, r.width - w - 8))}px`; p.style.bottom = `${r.bottom - a.top + 8}px`;
+    return p;
+  }
+  function popColor(b) {
+    const p = pop(b, `<div class="nt-colors">${COLORS.map(([k, l]) => `<button type="button" class="nt-dot" data-color="${k}" aria-label="${l}" title="${l}" ${ed.n.color === k ? 'aria-pressed="true"' : ''}></button>`).join('')}</div>`);
+    p.addEventListener('click', (e) => { const d = e.target.closest('.nt-dot'); if (d) { set({ color: d.dataset.color }); closePop(); } });
+  }
+  function popLabel(b) {
+    const mine = new Set(ed.n.labels), labs = labelsOf().filter((l) => !mine.has(l));
+    const p = pop(b, `<form class="nt-lf"><input type="text" placeholder="Nova etiqueta" maxlength="30" aria-label="Nova etiqueta" autocomplete="off"><button class="btn ink sm" type="submit">Afegeix</button></form>${labs.length ? `<div class="nt-lsug">${labs.map((l) => `<button type="button" class="nt-chip" data-l="${esc(l)}">${esc(l)}</button>`).join('')}</div>` : ''}`);
+    const add = (l) => { l = l.trim().toLowerCase(); if (!l || ed.n.labels.includes(l) || ed.n.labels.length >= 12) return; set({ labels: [...ed.n.labels, l] }); drawLabels(); closePop(); };
+    $('form', p).onsubmit = (e) => { e.preventDefault(); add($('input', p).value); };
+    p.addEventListener('click', (e) => { const c = e.target.closest('[data-l]'); if (c) add(c.dataset.l); });
+    setTimeout(() => $('input', p).focus(), 30);
+  }
+
+  // ---------------------------------------------------------------- veu: grava aquí, transcriu l'ordinador
+  async function toggleRec() {
+    if (!ed) return;
+    if (ed.rec) return ed.rec.stop();
+    if (ctx.isDemo()) return toast('A la demo no hi ha micròfon. Amb nio instal·lat, transcrius amb Whisper, gratis.', 4500);
+    if (!ctx.voiceOn()) { toast('Cal activar Whisper per transcriure (gratis, a l’ordinador).', 3500); return ctx.voiceSheet(); }
+    if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) return toast('Aquest navegador no pot gravar àudio.');
+    let stream; try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); } catch { return toast('No tinc permís per al micròfon. Activa’l als ajustos del navegador.', 4500); }
+    if (!ed) { stream.getTracks().forEach((t) => t.stop()); return; }
+    const rec = new MediaRecorder(stream), chunks = [], t0 = Date.now(); let send = true;
+    const box = $('#edRec', ed.card), foot = $('#edFoot', ed.card);
+    const tick = () => { const s = $('.nt-rec-t', box); if (s) s.textContent = fmtDur((Date.now() - t0) / 1000); };
+    box.hidden = false; foot.hidden = true;
+    box.innerHTML = `<span class="nt-rec-dot"></span><span class="nt-rec-t">0:00</span><span class="nt-rec-l">Gravant…</span><button class="btn ghost sm" type="button" data-r="cancel">Cancel·la</button><button class="btn ink sm" type="button" data-r="stop">${svg(I.stop)}Atura i transcriu</button>`;
+    const timer = setInterval(tick, 500);
+    box.onclick = (e) => { const r = e.target.closest('[data-r]')?.dataset.r; if (r === 'cancel') { send = false; rec.stop(); } else if (r === 'stop') rec.stop(); };
+    const cleanup = () => { clearInterval(timer); stream.getTracks().forEach((t) => t.stop()); if (ed) { ed.rec = null; box.hidden = true; foot.hidden = false; } };
+    rec.ondataavailable = (e) => { if (e.data.size) chunks.push(e.data); };
+    rec.onstop = async () => {
+      const dur = (Date.now() - t0) / 1000; cleanup();
+      if (!send) return;
+      const blob = new Blob(chunks, { type: rec.mimeType || 'audio/webm' });
+      if (!ed) return;
+      try {
+        if (blob.size < 1500) throw new Error('No he sentit res. Prova-ho una altra vegada.');
+        const id = await ensureId(); if (!id) throw new Error('No s’ha pogut crear la nota');
+        const res = await ctx.nodeAudio(`/api/notes/${id}/audio?dur=${Math.round(dur)}`, { headers: { 'content-type': blob.type || 'audio/webm' }, body: blob });
+        const note = await res.json(); if (ed) { const mine = ed.n; mine.audio = note.audio; drawAudio(); }
+      } catch (e) { toast(e.message, 4500); }
+    };
+    ed.rec = { stop: () => rec.stop(), cancel: () => { send = false; try { rec.stop(); } catch { cleanup(); } } };
+    rec.start(1000);
+  }
+  async function play(aid, btn) {
+    if (ed.audioEl && ed.audioId === aid) { const a = ed.audioEl; if (a.paused) { a.play(); btn.innerHTML = svg(I.pause); } else { a.pause(); btn.innerHTML = svg(I.play); } return; }
+    ed.audioEl?.pause(); $$all('.nt-au [data-e=play]', ed.card).forEach((x) => { x.innerHTML = svg(I.play); });
+    try {
+      const m = ctx.machine(), r = await fetch(`${m.url}/api/notes/${ed.id}/audio/${aid}`, { headers: { Authorization: `Bearer ${m.token}` } });
+      if (!r.ok) throw new Error('No he pogut baixar l’àudio');
+      const url = URL.createObjectURL(await r.blob()), a = new Audio(url);
+      a.onended = () => { btn.innerHTML = svg(I.play); ed.audioId = null; URL.revokeObjectURL(url); };
+      ed.audioEl = a; ed.audioId = aid; await a.play(); btn.innerHTML = svg(I.pause);
+    } catch (e) { toast(e.message, 4000); }
+  }
+
+  // ---------------------------------------------------------------- assistent: resumeix i organitza amb un model
+  async function loadEngines() { if (!engines) { try { engines = (await api('/api/notes/engines')).engines; } catch { engines = []; } } return engines; }
+  async function popAi(b) {
+    const p = pop(b, '<p class="muted small nt-pad">Mirant quins models hi ha…</p>');
+    const list = await loadEngines(); if (ed?.pop !== p) return;
+    if (!list.length) { p.innerHTML = '<p class="small nt-pad">No hi ha cap model en aquest ordinador.<br>Instal·la <b>Ollama</b> i un model (<span class="mono">ollama pull qwen3:4b</span>) o <b>Claude Code</b>.</p>'; return; }
+    // 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.find((e) => e.local && e.id.startsWith('ollama:') && e.params >= 3) || list.find((e) => e.id === 'claude:haiku') || list[0]).id;
+    const saved0 = LSget('nio.notes.engine', ''), saved = list.some((e) => e.id === saved0) ? saved0 : auto, groups = [...new Set(list.map((e) => e.group))];
+    const hasText = !!ed.n.text.trim() || !!ed.n.items?.length;
+    p.innerHTML = `<label class="nt-pad small"><span class="muted">Model</span><select id="aiEng" class="nt-sel">${groups.map((g) => `<optgroup label="${esc(g)}">${list.filter((e) => e.group === g).map((e) => `<option value="${esc(e.id)}" ${e.id === saved ? 'selected' : ''}>${esc(e.label)}</option>`).join('')}</optgroup>`).join('')}</select></label>
+      <div class="nt-acts-list">${ACTIONS.map(([k, l, d]) => `<button type="button" data-ai="${k}" ${hasText ? '' : 'disabled'}><b>${l}</b><span>${d}</span></button>`).join('')}</div>
+      <form class="nt-lf" id="aiForm"><input type="text" placeholder="O demana-li qualsevol cosa…" maxlength="300" aria-label="Instrucció pròpia" ${hasText ? '' : 'disabled'}><button class="btn ink sm" type="submit" ${hasText ? '' : 'disabled'}>Envia</button></form>
+      <p class="nt-note small muted" id="aiNote"></p>`;
+    const eng = $('#aiEng', p), note = $('#aiNote', p);
+    const upd = () => { const e = list.find((x) => x.id === eng.value); note.textContent = e?.local ? 'Es queda a l’ordinador: cap dada surt de casa.' : 'Aquest text s’envia al servei del model (Anthropic, OpenAI o núvol d’Ollama).'; };
+    eng.onchange = () => { LSset('nio.notes.engine', eng.value); upd(); }; upd();
+    p.addEventListener('click', (e) => { const x = e.target.closest('[data-ai]'); if (x && !x.disabled) runAi(x.dataset.ai, eng.value); });
+    $('#aiForm', p).onsubmit = (e) => { e.preventDefault(); const v = $('input', p).value.trim(); if (v) runAi('custom', eng.value, v); };
+  }
+  async function runAi(action, engine, prompt) {
+    closePop();
+    const e = ed; await flush(); if (!ed || ed !== e) return; if (!e.id) return;
+    const box = $('#edAi', e.card); box.hidden = false;
+    box.innerHTML = `<div class="nt-ai-run"><i class="nt-spin"></i><span>Treballant amb ${esc(engine.replace(/^ollama:/, ''))}…</span></div>`;
+    try {
+      const r = await api('/api/notes/ai', { method: 'POST', body: { id: e.id, action, engine, prompt } });
+      if (ed !== e) return;
+      showAiResult(box, r);
+    } catch (er) { if (ed === e) box.innerHTML = `<div class="nt-ai-err"><span>${esc(er.message)}</span><button class="btn ghost sm" type="button" data-x>Tanca</button></div>`; box.onclick = (ev) => { if (ev.target.closest('[data-x]')) box.hidden = true; }; }
+  }
+  function showAiResult(box, r) {
+    const { action, result: x } = r, n = ed.n;
+    const body = action === 'tasks' ? (x.items.length ? `<ul>${x.items.map((i) => `<li>${esc(i)}</li>`).join('')}</ul>` : '<p class="muted">No he trobat cap tasca.</p>')
+      : action === 'title' ? `<p><b>${esc(x.title)}</b></p>`
+      : action === 'organize' ? `<p><b>${esc(x.title)}</b></p><pre>${esc(x.text)}</pre>${x.labels.length ? `<p>${x.labels.map((l) => `<span class="nt-label">${esc(l)}</span>`).join('')}</p>` : ''}`
+      : `<pre>${esc(x.text)}</pre>`;
+    const label = { summary: 'Resum', clean: 'Transcripció neta', organize: 'Nota organitzada', tasks: 'Tasques', title: 'Títol', custom: 'Resposta' }[action];
+    const can = action === 'tasks' ? x.items.length : action === 'title' ? x.title : true;
+    box.innerHTML = `<div class="nt-ai-h"><span>${svg(I.spark)}${label}</span><small>${esc(r.engine.replace(/^ollama:/, ''))}${r.local ? ' · local' : ''}</small></div><div class="nt-ai-b">${body}</div>
+      <div class="row nt-ai-f"><button class="btn ghost sm" type="button" data-x>Descarta</button>${action === 'summary' || action === 'custom' ? '<button class="btn sm" type="button" data-ap="add">Afegeix al final</button>' : ''}<button class="btn ink sm" type="button" data-ap="apply" ${can ? '' : 'disabled'}>${action === 'summary' ? 'Afegeix a dalt' : 'Aplica'}</button></div>`;
+    box.onclick = (ev) => {
+      if (ev.target.closest('[data-x]')) { box.hidden = true; return; }
+      const ap = ev.target.closest('[data-ap]')?.dataset.ap; if (!ap) return;
+      const snap = { title: n.title, text: n.text, items: n.items ? n.items.map((i) => ({ ...i })) : null, labels: [...n.labels] };
+      if (action === 'summary') set({ text: ap === 'add' ? `${n.text.trimEnd()}\n\nResum\n${x.text}` : `Resum\n${x.text}\n\n${n.text}`.trimEnd() });
+      else if (action === 'custom') set({ text: ap === 'add' ? `${n.text.trimEnd()}\n\n${x.text}` : `${x.text}\n\n${n.text}`.trimEnd() });
+      else if (action === 'clean') set({ text: x.text });
+      else if (action === 'title') set({ title: x.title });
+      else if (action === 'tasks') set({ items: [...(n.items || []), ...x.items.map((t) => ({ id: uid(), text: t, done: false }))] });
+      else if (action === 'organize') set({ title: x.title, text: x.text, labels: [...new Set([...n.labels, ...x.labels])].slice(0, 12) });
+      const t = ed.card.querySelector('.nt-ed-title'); if (t) t.value = n.title;
+      drawBody(); drawLabels(); drawMode();
+      box.innerHTML = '<div class="nt-ai-run"><span>Aplicat.</span><button class="btn ghost sm" type="button" data-undo>Desfés</button></div>';
+      box.onclick = (e2) => { if (e2.target.closest('[data-undo]')) { set(snap); if (t) t.value = n.title; drawBody(); drawLabels(); drawMode(); box.hidden = true; } };
+    };
+  }
+
+  // ---------------------------------------------------------------- el mòbil com a micròfon
+  function phoneSheet() {
+    ctx.openSheet(`<h2>El mòbil, com a micròfon</h2>
+      <div class="stack"><p class="small">Obre nio al mòbil, entra a <b>Notes</b> i prem el micròfon. L’àudio va a aquest ordinador i el transcriu Whisper, gratis i sense sortir de casa. La nota surt aquí a l’instant.</p>
+      <ol class="small nt-steps"><li>Connecta el mòbil (un cop).</li><li>Obre <b>Notes</b> i prem <b>${svg(I.mic)}</b>.</li><li>Parla. Prem «Atura i transcriu».</li></ol>
+      <div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button><button class="btn ink" type="button" data-qr>${svg(I.phone)}Connecta el mòbil</button></div></div>`,
+      (sh) => { sh.querySelector('[data-close]').onclick = ctx.closeSheet; sh.querySelector('[data-qr]').onclick = () => { ctx.closeSheet(); setTimeout(ctx.mobileQrSheet, 220); }; });
+  }
+
+  return { mount, unmount, onEvent, reload, get open() { return !!ed; } };
+}

package/web/app/style.css

@@ -134,6 +134,9 @@ button.chip:hover { border-color: var(--fg); }
 .chip.running { background: var(--fg); color: var(--bg); border-color: var(--fg); }
 .chip.waiting { background: var(--lemon); border-color: var(--lemon); }
 .chip.error { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
+.chip.usage { gap: 6px; }
+.chip.usage .uw + .uw::before { content: '·'; margin-right: 6px; color: var(--fg-muted); font-weight: 400; }
+.chip.usage .uw[data-hi="1"] { color: var(--red); font-weight: 600; }
 .chip.beta { height: 20px; padding: 0 7px; font-size: 10px; color: var(--fg-muted); }
 .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-in-out infinite; }
 @keyframes pulse { 50% { opacity: .3; } }
@@ -718,3 +721,26 @@ html.rd-open, html.rd-open body { overflow: hidden; }
 .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; } }
+
+/* Sense ordinador: seccions de mostra desactivades */
+.panel.off { opacity: .55; }
+.panel.off .btn[disabled] { cursor: not-allowed; }
+.card.off-note { display: flex; flex-direction: row; align-items: center; gap: 12px 16px; flex-wrap: wrap; border-style: dashed; }
+
+/* Primer ordinador: ordre d'instal·lació, passos i botons alineats a la mateixa amplada */
+.first-run > p:first-of-type { max-width: 34em; margin-inline: auto; }
+.first-run .cmd { width: 100%; max-width: 640px; margin: 18px auto 0; text-align: left; }
+.first-run .stepper { margin: 22px auto 20px; }
+.first-run > .muted.small { margin-top: 12px; }
+.first-run > .muted.small { max-width: none; }
+.first-run .stepper { max-width: 680px; }
+@media (max-width: 820px) { .first-run .cmd.big code { white-space: normal; overflow-wrap: anywhere; } }
+
+/* Mòbil: la barra de dalt ja ocupa 56 px, així que la carcassa no ha de fer tota la pantalla (si no, sobra scroll
+   i la conversa puja en obrir-la). El camp de text queda enganxat a baix encara que tingui position: relative més amunt. */
+@media (max-width: 820px) {
+  .shell { min-height: calc(100dvh - 56px - var(--safe-t)); }
+  body.chat-mode .composer { position: sticky; bottom: var(--kb, 0px); }
+}
+/* Referència per mesurar els missatges (offsetTop) dins la conversa. */
+.feed { position: relative; }

package/web/index.html

@@ -20,14 +20,19 @@
 <meta property="og:url" content="https://www.nio.cat/">
 <meta property="og:title" content="nio // els teus agents, des del mòbil">
 <meta property="og:description" content="Claude Code i Codex als teus ordinadors, controlats des del mòbil. Personal, gratuït i amb les teves claus.">
-<meta property="og:image" content="https://www.nio.cat/og.png">
+<meta property="og:image" content="https://www.nio.cat/og.jpg">
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="630">
 <meta property="og:image:alt" content="nio">
+<meta property="og:video" content="https://www.nio.cat/og.mp4">
+<meta property="og:video:secure_url" content="https://www.nio.cat/og.mp4">
+<meta property="og:video:type" content="video/mp4">
+<meta property="og:video:width" content="1920">
+<meta property="og:video:height" content="1080">
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="nio // els teus agents, des del mòbil">
 <meta name="twitter:description" content="Claude Code i Codex als teus ordinadors, controlats des del mòbil. Personal, gratuït i amb les teves claus.">
-<meta name="twitter:image" content="https://www.nio.cat/og.png">
+<meta name="twitter:image" content="https://www.nio.cat/og.jpg">
 <meta name="format-detection" content="telephone=no">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">

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-v38';
-const FILES = ['/app', '/app/style.css', '/app/app.js', '/app/demo.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
+const SHELL = 'nio-shell-v45';
+const FILES = ['/app', '/app/style.css', '/app/notes.css', '/app/app.js', '/app/notes.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(() => {}));