nio-cat 0.9.5 → 0.9.7

package/web/app/demo.js

@@ -0,0 +1,413 @@
+// nio · demo: un ordinador simulat dins del navegador, per provar l'app sense instal·lar res.
+// Respon les mateixes adreces que el programa (/api/…) a les adreces «demo:…», amb sessions,
+// text en directe, eines i aprovacions de mentida. No surt res del navegador i es reinicia en recarregar.
+(() => {
+  const ROOT = '/Users/tu/projectes';
+  const DEMO_USAGE = { claude: { windows: [{ label: '5 h', used: 0.32, resetsAt: Math.floor(Date.now() / 1000) + 7200 }, { label: 'setmana', used: 0.57, resetsAt: Math.floor(Date.now() / 1000) + 3 * 86400 }], at: Date.now() }, codex: { windows: [{ label: '5 h', used: 0.85, resetsAt: Math.floor(Date.now() / 1000) + 3600 }, { label: 'setmana', used: 0.17, resetsAt: Math.floor(Date.now() / 1000) + 5 * 86400 }], at: Date.now() } };
+  const AGENTS = [
+    { id: 'claude', name: 'Claude Code', beta: false, approvals: true, noModes: false, login: '', available: true, version: 'simulat' },
+    { id: 'codex', name: 'Codex', beta: false, approvals: true, noModes: false, login: '', available: true, version: 'simulat' },
+  ];
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  const rid = () => Math.random().toString(36).slice(2, 12);
+  const err = (status, error) => Object.assign(new Error(error), { status });
+  const NOPE = 'Això no es pot fer a la demo. Instal·la nio a l’ordinador per fer-ho de debò: npx nio-cat';
+
+  const sessions = new Map(), approvals = new Map(), streams = new Set(), runs = new Map(), audit = [];
+  const out = (msg) => { const data = new TextEncoder().encode(`data: ${JSON.stringify(msg)}\n\n`); for (const c of streams) try { c.enqueue(data); } catch { streams.delete(c); } };
+
+  function summary(s) {
+    const last = [...s.events].reverse().find((e) => e.kind === 'text' || e.kind === 'user');
+    return { id: s.id, agent: s.agent, title: s.title, cwd: s.cwd, mode: s.mode, model: '', state: s.state, created: s.created, updated: s.updated, cost: s.cost || 0, last: last ? last.text.slice(0, 160) : '', error: '', pending: [...approvals.values()].filter((a) => a.session === s.id && a.state === 'pending').length };
+  }
+  const list = () => [...sessions.values()].sort((a, b) => b.updated - a.updated).map(summary);
+  const pending = () => [...approvals.values()].filter((a) => a.state === 'pending').map(({ resolve, ...a }) => a);
+  const touch = (s) => { s.updated = Date.now(); out({ type: 'session', session: summary(s) }); };
+  function push(s, kind, data = {}) {
+    const last = s.events[s.events.length - 1];
+    if (last?.open) { delete last.open; out({ type: 'event', session: s.id, event: last }); }
+    const ev = { seq: s.events.length + 1, t: Date.now(), kind, ...data };
+    s.events.push(ev); out({ type: 'event', session: s.id, event: ev }); touch(s);
+    return ev;
+  }
+  async function stream(s, text, run) {
+    const ev = push(s, 'text', { text: '', open: true });
+    for (const w of text.split(/(?<= )/)) {
+      if (run.stopped) return;
+      ev.text += w; out({ type: 'delta', session: s.id, seq: ev.seq, text: w });
+      await sleep(35 + Math.random() * 45);
+    }
+    delete ev.open; out({ type: 'event', session: s.id, event: ev }); touch(s);
+  }
+  function ask(s, tool, input) {
+    const a = { id: rid(), session: s.id, agent: s.agent, title: s.title, tool, input, reason: input.description || '', state: 'pending', created: Date.now() };
+    approvals.set(a.id, a); s.state = 'waiting';
+    push(s, 'approval', { approval: a.id, tool, input, reason: a.reason, state: 'pending' });
+    out({ type: 'approval', approval: pending().find((x) => x.id === a.id) });
+    return new Promise((r) => { a.resolve = r; });
+  }
+  function decide(id, decision) {
+    const a = approvals.get(id);
+    if (!a || a.state !== 'pending') return null;
+    a.state = decision === 'allow' ? 'allowed' : 'denied'; a.decided = Date.now(); a.by = 'Aquest navegador';
+    audit.unshift({ t: Date.now(), type: 'approval', session: a.session, agent: a.agent, title: a.title, tool: a.tool, what: a.input.command || a.input.file_path || a.tool, why: a.reason, decision: a.state, by: a.by, asked: a.created });
+    const s = sessions.get(a.session);
+    if (s) {
+      const ev = s.events.find((e) => e.kind === 'approval' && e.approval === id);
+      if (ev) { ev.state = a.state; out({ type: 'event', session: s.id, event: ev }); }
+      if (s.state === 'waiting') s.state = runs.has(s.id) ? 'running' : 'idle';
+      touch(s);
+    }
+    const { resolve, ...pub } = a;
+    out({ type: 'approval', approval: pub });
+    resolve?.(a.state === 'allowed' ? 'allow' : 'deny');
+    return pub;
+  }
+
+  // Què fa l'agent simulat segons el que li demanes. Sempre: llegeix, proposa un canvi, el demana i prova.
+  function plan(text, s) {
+    const t = text.toLowerCase(), dir = s.cwd.split('/').pop();
+    if (/test|prova/.test(t)) return { intro: `Miro quins tests hi ha a ${dir} i quins fallen.`, read: 'package.json', readOut: '{\n  "scripts": { "test": "node --test" }\n}', edit: { file_path: `${s.cwd}/test/usuaris.test.js`, old_string: '', new_string: "test('crea un usuari', async () => {\n  const u = await crear({ nom: 'Anna' });\n  assert.equal(u.nom, 'Anna');\n});", description: 'Afegeixo un test per crear usuaris' }, bash: 'npm test', bashOut: '✓ 14 tests passen (0,8 s)', end: 'Fet. He afegit el test que faltava i **tots els tests passen**.' };
+    if (/fosc|dark|color|disseny|css|estil/.test(t)) return { intro: 'Faig una ullada als estils per afegir-hi el que em demanes.', read: 'src/styles.css', readOut: ':root {\n  --bg: #fff;\n  --text: #1a1a1a;\n}', edit: { file_path: `${s.cwd}/src/styles.css`, old_string: ':root {\n  --bg: #fff;', new_string: ':root {\n  --bg: #fff;\n}\n@media (prefers-color-scheme: dark) {\n  :root { --bg: #141414; --text: #eee; }', description: 'Afegeixo els colors del mode fosc' }, bash: 'npm run build', bashOut: '✓ build fet en 1,9 s', end: 'Llest. El mode fosc s’activa sol quan el sistema el fa servir. Vols que hi afegeixi un botó per canviar-lo a mà?' };
+    if (/error|bug|falla|arregla|peta/.test(t)) return { intro: 'Busco d’on ve l’error.', read: 'src/server.js', readOut: "app.get('/usuaris/:id', (req, res) => {\n  res.json(db.usuaris[req.params.id].nom);\n});", edit: { file_path: `${s.cwd}/src/server.js`, old_string: 'res.json(db.usuaris[req.params.id].nom);', new_string: "const u = db.usuaris[req.params.id];\n  if (!u) return res.status(404).json({ error: 'No existeix' });\n  res.json(u.nom);", description: 'Retorno un 404 quan l’usuari no existeix' }, bash: 'npm test', bashOut: '✓ 12 tests passen', end: 'Trobat: quan l’usuari no existia, el servidor petava. Ara respon un **404** i els tests passen.' };
+    return { intro: `Entesos. Començo per entendre com està organitzat ${dir}.`, read: 'README.md', readOut: `# ${dir}\nProjecte d’exemple de la demo de nio.`, edit: { file_path: `${s.cwd}/NOTES.md`, old_string: '', new_string: `## Pendent\n- ${text.slice(0, 80)}`, description: 'Apunto la tasca a les notes del projecte' }, bash: 'git status --short', bashOut: ' M NOTES.md', end: 'Fet. A la versió de debò, aquí l’agent treballaria als fitxers del teu ordinador i et demanaria permís abans de cada canvi.' };
+  }
+  async function work(s, text) {
+    const run = { stopped: false }; runs.set(s.id, run);
+    const p = plan(text, s), tool = (name, input, output, error) => { const id = rid(); push(s, 'tool', { id, name, input }); logTool(s, name, input); return { id, done: () => push(s, 'tool_result', { id, name, output, error: !!error }) }; };
+    const allowed = async (name, input) => s.mode === 'tot' || (await ask(s, name, input)) === 'allow';
+    try {
+      await sleep(500); await stream(s, p.intro, run); if (run.stopped) return;
+      const r = tool('Read', { file_path: p.read }, p.readOut); await sleep(700); r.done(); if (run.stopped) return;
+      if (s.mode === 'llegir') { await stream(s, 'Treballo en mode només lectura, així que no toco res. Et proposo aquest canvi:\n\n```\n' + p.edit.new_string + '\n```', run); return; }
+      await sleep(400);
+      // Un fitxer nou és «Write»; un canvi a un fitxer que ja hi és, «Edit».
+      const [eName, eInput] = p.edit.old_string ? ['Edit', p.edit] : ['Write', { file_path: p.edit.file_path, content: p.edit.new_string, description: p.edit.description }];
+      if (!(await allowed(eName, eInput))) { if (!run.stopped) await stream(s, 'D’acord, no hi toco. Què vols que faci?', run); return; }
+      if (run.stopped) return;
+      const e = tool(eName, eInput, eName === 'Write' ? 'Fitxer creat' : 'Fitxer actualitzat'); await sleep(500); e.done();
+      if (!(await allowed('Bash', { command: p.bash, description: 'Comprovo que tot funciona' }))) { if (!run.stopped) await stream(s, 'Entesos, no ho executo. El canvi ja és fet.', run); return; }
+      if (run.stopped) return;
+      const b = tool('Bash', { command: p.bash }, p.bashOut); await sleep(1100); b.done();
+      await stream(s, p.end, run);
+      const cost = 0.02 + Math.random() * 0.08; s.cost = (s.cost || 0) + cost; push(s, 'result', { cost, ms: 6000, turns: 3 });
+    } finally {
+      runs.delete(s.id);
+      for (const a of approvals.values()) if (a.session === s.id && a.state === 'pending') decide(a.id, 'deny');
+      s.state = 'idle'; push(s, 'status', { state: 'idle', code: run.stopped ? 130 : 0 });
+      runEnded(s, run.stopped);
+    }
+  }
+  const logTool = (s, tool, input) => audit.unshift({ t: Date.now(), type: 'tool', session: s.id, agent: s.agent, title: s.title, tool, what: input.command || input.file_path || tool, mode: s.mode });
+  function create({ agent, cwd, title, mode }) {
+    if (!AGENTS.some((a) => a.id === agent)) throw err(400, `A la demo només hi ha ${AGENTS.map((a) => a.name).join(' i ')}`);
+    const s = { id: rid(), agent, cwd: cwd || `${ROOT}/web-botiga`, title: title || '', mode: ['llegir', 'preguntar', 'tot'].includes(mode) ? mode : 'preguntar', state: 'idle', created: Date.now(), updated: Date.now(), cost: 0, events: [] };
+    sessions.set(s.id, s); touch(s); return s;
+  }
+  function send(s, text) {
+    if (runs.has(s.id)) throw err(409, 'L’agent encara està treballant. Espera que acabi o atura’l.');
+    text = String(text || '').trim(); if (!text) throw err(400, 'El missatge és buit');
+    if (!s.title) s.title = text.replace(/\s+/g, ' ').slice(0, 60);
+    push(s, 'user', { text }); s.state = 'running'; push(s, 'status', { state: 'running' });
+    work(s, text);
+    return summary(s);
+  }
+
+  // Sessions d'exemple: una d'acabada, una que espera permís i una d'antiga.
+  function seed() {
+    const ago = (min) => Date.now() - min * 60000;
+    const mk = (agent, dir, title, min, evs, extra = {}) => {
+      const s = { id: rid(), agent, cwd: `${ROOT}/${dir}`, title, mode: 'preguntar', state: 'idle', created: ago(min + 5), updated: ago(min), cost: extra.cost || 0, events: evs.map((e, i) => ({ seq: i + 1, t: ago(min + (evs.length - i) / 4), ...e })) };
+      sessions.set(s.id, s); return s;
+    };
+    mk('claude', 'web-botiga', 'Afegeix el mode fosc a la botiga', 12, [
+      { kind: 'user', text: 'Afegeix el mode fosc a la botiga' }, { kind: 'status', state: 'running' },
+      { kind: 'text', text: 'Miro com estan definits els colors.' },
+      { kind: 'tool', id: 'a1', name: 'Read', input: { file_path: 'src/styles.css' } }, { kind: 'tool_result', id: 'a1', name: 'Read', output: ':root {\n  --bg: #fff;\n  --text: #1a1a1a;\n}', error: false },
+      { kind: 'tool', id: 'a2', name: 'Edit', input: { file_path: `${ROOT}/web-botiga/src/styles.css`, old_string: '--bg: #fff;', new_string: '--bg: #fff;\n}\n@media (prefers-color-scheme: dark) {\n  :root { --bg: #141414; }' } }, { kind: 'tool_result', id: 'a2', name: 'Edit', output: 'Fitxer actualitzat', error: false },
+      { kind: 'tool', id: 'a3', name: 'Bash', input: { command: 'npm run build' } }, { kind: 'tool_result', id: 'a3', name: 'Bash', output: '✓ build fet en 1,9 s', error: false },
+      { kind: 'text', text: 'Fet. El **mode fosc** s’activa sol quan el sistema el fa servir.' }, { kind: 'result', cost: 0.07, ms: 41000, turns: 4 }, { kind: 'status', state: 'idle', code: 0 },
+    ], { cost: 0.07 });
+    const w = mk('codex', 'api', 'Prepara la migració de la base de dades', 2, [
+      { kind: 'user', text: 'Prepara la migració de la base de dades' }, { kind: 'status', state: 'running' },
+      { kind: 'text', text: 'He escrit la migració que afegeix la columna «telefon» a usuaris. Ara l’he d’executar.' },
+    ]);
+    const a = { id: rid(), session: w.id, agent: 'codex', title: w.title, tool: 'Bash', input: { command: 'npm run migrate', description: 'Executo la migració a la base de dades local' }, reason: 'Executo la migració a la base de dades local', state: 'pending', created: ago(1) };
+    approvals.set(a.id, a); w.state = 'waiting'; runs.set(w.id, { stopped: false }); w.events.push({ seq: w.events.length + 1, t: ago(1), kind: 'approval', approval: a.id, tool: a.tool, input: a.input, reason: a.reason, state: 'pending' });
+    // Quan la decideixis, la sessió continua.
+    a.resolve = async (d) => {
+      const run = runs.get(w.id) || { stopped: false }; runs.set(w.id, run); w.state = 'running'; touch(w);
+      if (run.stopped) { runs.delete(w.id); w.state = 'idle'; push(w, 'status', { state: 'idle', code: 130 }); return; }
+      if (d === 'allow') { push(w, 'tool', { id: 'm1', name: 'Bash', input: { command: 'npm run migrate' } }); await sleep(900); push(w, 'tool_result', { id: 'm1', name: 'Bash', output: '✓ 1 migració aplicada', error: false }); await stream(w, 'Migració aplicada. La taula d’usuaris ja té la columna «telefon».', run); }
+      else await stream(w, 'D’acord, no l’executo. La tens a migrations/004_telefon.sql per quan vulguis.', run);
+      runs.delete(w.id); w.state = 'idle'; push(w, 'status', { state: 'idle', code: 0 });
+    };
+    mk('claude', 'api', 'Escriu tests per a /usuaris', 60 * 26, [
+      { kind: 'user', text: 'Escriu tests per a /usuaris' }, { kind: 'text', text: 'He afegit 6 tests a test/usuaris.test.js. Tots passen.' }, { kind: 'result', cost: 0.11, ms: 52000, turns: 5 },
+    ], { cost: 0.11 });
+  }
+  seed();
+
+  // ---------- Feines: cua, cadenes i programades. Cada feina obre una sessió i acaba quan l'agent acaba.
+  const jobs = [];
+  const jobOut = (j) => out({ type: 'job', job: { ...j } });
+  function runJob(j) {
+    const prev = j.after && jobs.find((x) => x.id === j.after);
+    const prompt = j.prompt.replace('{{anterior}}', prev?.result || '');
+    const s = create({ agent: j.agent, cwd: j.cwd, title: j.title, mode: j.mode });
+    Object.assign(j, { state: 'en curs', session: s.id, started: Date.now(), runAt: null });
+    jobOut(j); audit.unshift({ t: Date.now(), type: 'job', what: `Feina començada: ${j.title}`, agent: j.agent, job: j.id });
+    send(s, prompt);
+  }
+  function runEnded(s, stopped) {
+    const j = jobs.find((x) => x.session === s.id && x.state === 'en curs'); if (!j) return;
+    Object.assign(j, { state: stopped ? 'cancel·lada' : 'feta', finished: Date.now(), result: [...s.events].reverse().find((e) => e.kind === 'text')?.text || '' });
+    jobOut(j); audit.unshift({ t: Date.now(), type: 'job', what: `Feina ${stopped ? 'aturada' : 'feta'}: ${j.title}`, agent: j.agent, job: j.id });
+    if (!stopped) for (const n of jobs) if (n.after === j.id && n.state === 'pendent') runJob(n);
+  }
+  function schedule(j) {
+    if (j.state === 'pendent' && !j.after && (!j.runAt || j.runAt <= Date.now())) return runJob(j);
+    if (j.state === 'pendent' && j.runAt && j.runAt - Date.now() < 3600000) setTimeout(() => j.state === 'pendent' && runJob(j), j.runAt - Date.now());
+  }
+  function addJob(b) {
+    const prompt = String(b.prompt || '').trim(); if (!prompt) throw err(400, 'Explica què ha de fer la feina');
+    const agent = AGENTS.some((a) => a.id === b.agent) ? b.agent : 'claude';
+    if (b.after && !jobs.some((x) => x.id === b.after)) throw err(400, 'La feina anterior no existeix');
+    const at = b.at ? Number(new Date(b.at)) : null;
+    const j = { id: rid(), title: String(b.title || prompt.replace(/\s+/g, ' ').slice(0, 70)), prompt, agent, cwd: b.cwd || `${ROOT}/web-botiga`, mode: ['llegir', 'preguntar', 'tot'].includes(b.mode) ? b.mode : 'preguntar', rule: null, after: b.after || null, cron: b.cron || null, state: b.cron ? 'programada' : 'pendent', runAt: b.cron ? nextNine() : at, created: Date.now() };
+    jobs.unshift(j); jobOut(j);
+    audit.unshift({ t: Date.now(), type: 'job', what: `Feina ${j.cron ? 'programada' : 'a la cua'}: ${j.title}`, agent: j.agent, job: j.id });
+    setTimeout(() => schedule(j), 300);
+    return j;
+  }
+  // La propera vegada que toca una feina programada (a la demo, sempre el proper dia a les 9).
+  const nextNine = () => { const d = new Date(); d.setHours(9, 0, 0, 0); if (d <= new Date()) d.setDate(d.getDate() + 1); return +d; };
+
+  // ---------- Pantalla: un escriptori dibuixat aquí mateix, que respon als clics, al teclat i als arrossegaments.
+  const caps = { navegador: { installed: true, ready: true, enabled: true }, escriptori: { installed: true, ready: true, why: '', enabled: true, screenshot: true }, platform: 'darwin' };
+  const W = 1600, H = 1000;
+  const desk = {
+    ver: 1,
+    wins: [
+      { id: 'code', x: 70, y: 70, w: 860, h: 540, title: 'styles.css — web-botiga' },
+      { id: 'term', x: 720, y: 400, w: 780, h: 440, title: 'Terminal — api' },
+    ],
+    term: ['$ npm test', '✓ 14 tests passen (0,8 s)', '$ git status --short', ' M src/styles.css'],
+    typed: '', mouse: null, ripple: 0, menu: null,
+  };
+  const bump = () => { desk.ver++; };
+  const hit = (x, y) => [...desk.wins].reverse().find((w) => x >= w.x && x <= w.x + w.w && y >= w.y && y <= w.y + w.h);
+  const front = (w) => { desk.wins = desk.wins.filter((x) => x !== w).concat(w); };
+  function input(ev) {
+    const px = (p) => [p[0] * W, p[1] * H];
+    if (ev.type === 'click' || ev.type === 'rclick') {
+      const [x, y] = px([ev.x, ev.y]); desk.mouse = [x, y]; desk.ripple = Date.now(); desk.menu = ev.type === 'rclick' ? [x, y, Date.now()] : null;
+      const w = hit(x, y); if (w) front(w);
+    } else if (ev.type === 'drag' && ev.path?.length > 1) {
+      const [x0, y0] = px(ev.path[0]), [x1, y1] = px(ev.path[ev.path.length - 1]), w = hit(x0, y0);
+      if (w && y0 - w.y < 36) { w.x = Math.max(-w.w + 80, Math.min(W - 80, w.x + x1 - x0)); w.y = Math.max(28, Math.min(H - 60, w.y + y1 - y0)); front(w); }
+      desk.mouse = [x1, y1];
+    } else if (ev.type === 'text') desk.typed = (desk.typed + ev.text).slice(-60);
+    else if (ev.type === 'key') {
+      if (ev.key === 'Backspace' || ev.key === 'BackSpace') desk.typed = desk.typed.slice(0, -1);
+      else if (ev.key === 'Enter' || ev.key === 'Return') { const cmd = desk.typed.trim(); desk.term.push(`$ ${cmd}`); if (cmd) desk.term.push(cmd === 'ls' ? 'api  notes  web-botiga' : cmd === 'pwd' ? ROOT : cmd === 'date' ? new Date().toString() : `demo: «${cmd.split(' ')[0]}» és una ordre simulada`); desk.typed = ''; desk.term = desk.term.slice(-12); }
+    }
+    bump();
+    return { ok: true };
+  }
+  const C = { bar: 'rgba(255,255,255,.72)', ink: '#272224', code: '#1f1d1c', term: '#141313' };
+  function rr(c, x, y, w, h, r) { c.beginPath(); c.roundRect ? c.roundRect(x, y, w, h, r) : c.rect(x, y, w, h); }
+  function paint(c) {
+    const g = c.createLinearGradient(0, 0, W, H); g.addColorStop(0, '#f6b896'); g.addColorStop(.55, '#e8a7b8'); g.addColorStop(1, '#8ea6dc');
+    c.fillStyle = g; c.fillRect(0, 0, W, H);
+    c.fillStyle = C.bar; c.fillRect(0, 0, W, 28);
+    c.fillStyle = C.ink; c.font = '600 14px -apple-system, Segoe UI, sans-serif'; c.textBaseline = 'middle';
+    c.fillText('nio', 18, 14); c.font = '14px -apple-system, Segoe UI, sans-serif';
+    let mx = 60; for (const t of ['Fitxer', 'Edita', 'Visualització', 'Finestra', 'Ajuda']) { c.fillText(t, mx, 14); mx += c.measureText(t).width + 24; }
+    const now = new Date(); c.textAlign = 'right';
+    c.fillText(now.toLocaleString('ca', { weekday: 'short', day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }), W - 18, 14); c.textAlign = 'left';
+    for (const w of desk.wins) {
+      c.save(); c.shadowColor = 'rgba(0,0,0,.28)'; c.shadowBlur = 40; c.shadowOffsetY = 14;
+      c.fillStyle = w.id === 'code' ? C.code : C.term; rr(c, w.x, w.y, w.w, w.h, 12); c.fill(); c.restore();
+      c.save(); rr(c, w.x, w.y, w.w, w.h, 12); c.clip();
+      c.fillStyle = w.id === 'code' ? '#2b2826' : '#242120'; c.fillRect(w.x, w.y, w.w, 36);
+      ['#ff5f57', '#febc2e', '#28c840'].forEach((col, i) => { c.fillStyle = col; c.beginPath(); c.arc(w.x + 20 + i * 20, w.y + 18, 6, 0, 7); c.fill(); });
+      c.fillStyle = '#bdb6ae'; c.font = '13px -apple-system, Segoe UI, sans-serif'; c.textAlign = 'center'; c.fillText(w.title, w.x + w.w / 2, w.y + 18); c.textAlign = 'left';
+      c.font = '16px ui-monospace, SF Mono, Menlo, monospace';
+      if (w.id === 'code') {
+        const lines = [['#7f8c98', '/* Colors de la botiga */'], ['#e8e2d8', ':root {'], ['#9cdcfe', '  --bg: #fff;'], ['#9cdcfe', '  --text: #1a1a1a;'], ['#e8e2d8', '}'], ['', ''], ['#c586c0', '@media (prefers-color-scheme: dark) {'], ['#9cdcfe', '  :root { --bg: #141414; --text: #eee; }'], ['#e8e2d8', '}'], ['', ''], ['#d7ba7d', '.boto-comprar {'], ['#9cdcfe', '  background: var(--accent);'], ['#9cdcfe', '  border-radius: 999px;'], ['#e8e2d8', '}']];
+        lines.forEach(([col, t], i) => { c.fillStyle = '#5c5652'; c.fillText(String(i + 1).padStart(2), w.x + 16, w.y + 66 + i * 26); c.fillStyle = col; c.fillText(t, w.x + 56, w.y + 66 + i * 26); });
+      } else {
+        const lines = [...desk.term, `$ ${desk.typed}`];
+        lines.slice(-14).forEach((t, i, a) => { c.fillStyle = t.startsWith('✓') ? '#7bd88f' : t.startsWith('$') ? '#f2ede6' : '#b9b2aa'; c.fillText(t, w.x + 20, w.y + 64 + i * 26); if (i === a.length - 1 && Math.floor(Date.now() / 500) % 2) { c.fillStyle = '#f2ede6'; c.fillRect(w.x + 20 + c.measureText(t).width + 2, w.y + 54 + i * 26, 9, 20); } });
+      }
+      c.restore();
+    }
+    // Dock
+    c.fillStyle = 'rgba(255,255,255,.45)'; rr(c, W / 2 - 230, H - 82, 460, 66, 20); c.fill();
+    ['#f46a3b', '#2b5bd8', '#5b6551', '#e7e66a', '#272224', '#e2382b'].forEach((col, i) => { c.fillStyle = col; rr(c, W / 2 - 205 + i * 70, H - 70, 50, 50, 12); c.fill(); });
+    if (desk.menu && Date.now() - desk.menu[2] < 2500) {
+      const [x, y] = desk.menu; c.fillStyle = 'rgba(248,246,242,.97)'; rr(c, x, y, 210, 128, 10); c.fill();
+      c.fillStyle = C.ink; c.font = '15px -apple-system, Segoe UI, sans-serif'; ['Obre', 'Copia', 'Mostra informació', 'Mou a la paperera'].forEach((t, i) => c.fillText(t, x + 16, y + 22 + i * 28));
+    }
+    if (desk.mouse) {
+      const [x, y] = desk.mouse, age = Date.now() - desk.ripple;
+      if (age < 600) { c.strokeStyle = `rgba(244,106,59,${1 - age / 600})`; c.lineWidth = 3; c.beginPath(); c.arc(x, y, 10 + age / 15, 0, 7); c.stroke(); }
+      c.fillStyle = '#fff'; c.strokeStyle = '#000'; c.lineWidth = 1.5; c.beginPath(); c.moveTo(x, y); c.lineTo(x, y + 22); c.lineTo(x + 6, y + 17); c.lineTo(x + 11, y + 27); c.lineTo(x + 15, y + 25); c.lineTo(x + 10, y + 15); c.lineTo(x + 17, y + 15); c.closePath(); c.fill(); c.stroke();
+    }
+  }
+  // Clau de l'estat visible: si no canvia, el panell rep un 204 i no es redibuixa res.
+  const deskHash = () => `${desk.ver}-${Math.floor(Date.now() / 500)}-${Date.now() - desk.ripple < 700 ? Date.now() : 0}`;
+  async function frame(w, q) {
+    const scale = Math.min(1, Math.max(.3, (Number(w) || W) / W));
+    const cv = typeof OffscreenCanvas !== 'undefined' ? new OffscreenCanvas(Math.round(W * scale), Math.round(H * scale)) : Object.assign(document.createElement('canvas'), { width: Math.round(W * scale), height: Math.round(H * scale) });
+    const c = cv.getContext('2d'); c.scale(scale, scale); paint(c);
+    const quality = Math.min(.92, Math.max(.3, (Number(q) || 70) / 100));
+    return cv.convertToBlob ? cv.convertToBlob({ type: 'image/jpeg', quality }) : new Promise((r) => cv.toBlob(r, 'image/jpeg', quality));
+  }
+  const shots = new Map();
+  let lastShot = null;
+  async function takeShot(from) {
+    const id = rid(); shots.set(id, await frame(1600, 80));
+    lastShot = { id, t: Date.now(), from: from || 'Aquest navegador' };
+    audit.unshift({ t: Date.now(), type: 'tool', agent: 'claude', title: 'Captura de pantalla', tool: 'Bash', what: 'agent-desktop screenshot', mode: 'preguntar' });
+    return lastShot;
+  }
+
+  // ---------- Activitat d'exemple: el que haurien fet els agents abans que obrissis la demo.
+  function seedExtra() {
+    const ago = (min) => Date.now() - min * 60000;
+    const s1 = [...sessions.values()].find((s) => s.agent === 'claude' && /fosc/.test(s.title));
+    const s3 = [...sessions.values()].find((s) => /tests per/.test(s.title));
+    jobs.push(
+      { id: rid(), title: 'Revisa les dependències i obre un PR si n’hi ha de noves', prompt: 'Revisa les dependències de l’API i, si n’hi ha de noves, actualitza-les i obre un PR.', agent: 'codex', cwd: `${ROOT}/api`, mode: 'preguntar', rule: null, after: null, cron: '0 9 * * 1-5', state: 'programada', runAt: nextNine(), created: ago(60 * 48) },
+      { id: rid(), title: 'Afegeix el mode fosc a la botiga', prompt: 'Afegeix el mode fosc a la botiga', agent: 'claude', cwd: `${ROOT}/web-botiga`, mode: 'preguntar', rule: null, after: null, cron: null, state: 'feta', session: s1?.id, created: ago(20), started: ago(18), finished: ago(12), result: 'Fet.' },
+      { id: rid(), title: 'Escriu tests per a /usuaris', prompt: 'Escriu tests per a /usuaris', agent: 'claude', cwd: `${ROOT}/api`, mode: 'preguntar', rule: null, after: null, cron: null, state: 'feta', session: s3?.id, created: ago(60 * 27), started: ago(60 * 26 + 5), finished: ago(60 * 26), result: 'Fet.' },
+    );
+    audit.push(
+      { t: ago(12), type: 'tool', agent: 'claude', title: 'Afegeix el mode fosc a la botiga', tool: 'Bash', what: 'npm run build', mode: 'preguntar' },
+      { t: ago(12.5), type: 'approval', agent: 'claude', title: 'Afegeix el mode fosc a la botiga', tool: 'Edit', what: `${ROOT}/web-botiga/src/styles.css`, why: 'Afegeixo els colors del mode fosc', decision: 'allowed', by: 'iPhone', asked: ago(13) },
+      { t: ago(13), type: 'tool', agent: 'claude', title: 'Afegeix el mode fosc a la botiga', tool: 'Read', what: 'src/styles.css', mode: 'preguntar' },
+      { t: ago(35), type: 'tool', agent: 'claude', title: 'Comprova la botiga al navegador', tool: 'Bash', what: 'agent-browser open http://localhost:4321', mode: 'preguntar' },
+      { t: ago(34), type: 'tool', agent: 'claude', title: 'Comprova la botiga al navegador', tool: 'Bash', what: 'agent-desktop screenshot', mode: 'preguntar' },
+      { t: ago(60 * 5), type: 'device', what: 'iPhone s’ha connectat amb un codi', by: 'iPhone' },
+      { t: ago(60 * 26), type: 'job', what: 'Feina feta: Escriu tests per a /usuaris', agent: 'claude' },
+    );
+    lastShot = { id: 'inicial', t: ago(34), from: 'Claude Code' };
+  }
+  seedExtra();
+
+  const now = Date.now(), NOTES = [
+    { id: 'n1', title: 'Reunió de dimarts', text: 'Parlar amb la Marta del pressupost.\nRevisar el contracte del fuster abans de divendres.', items: null, color: 'lemon', pinned: true, archived: false, trashed: 0, labels: ['feina'], audio: [], created: now - 9e5, updated: now - 9e5 },
+    { id: 'n2', title: 'Compra', text: '', items: [{ id: 'i1', text: 'llet', done: false }, { id: 'i2', text: 'pa de pagès', done: true }, { id: 'i3', text: 'pintura blanca', done: false }], color: 'sky', pinned: false, archived: false, trashed: 0, labels: ['casa'], audio: [], created: now - 8e5, updated: now - 8e5 },
+    { id: 'n3', title: 'Idees per al logo', text: 'El bot que es converteix en la O. Animació suau, fons crema.', items: null, color: 'lilac', pinned: false, archived: false, trashed: 0, labels: ['nio'], audio: [], created: now - 7e5, updated: now - 7e5 },
+  ];
+  const noteId = () => Math.random().toString(36).slice(2, 10);
+  const MEMORY = {
+    'preferencies.md': '# Preferències\n\n- Respon en català.\n- Fes commits petits i explica’ls bé.\n',
+    'projectes/web-botiga.md': '# web-botiga\n\nBotiga en línia feta amb Astro. Els colors són a src/styles.css.\n',
+  };
+  const DIRS = { [ROOT]: ['web-botiga', 'api', 'notes'], [`${ROOT}/api`]: ['src', 'test'], [`${ROOT}/web-botiga`]: ['public', 'src'] };
+
+  async function route(method, p, q, body) {
+    let m;
+    if (method === 'GET') {
+      if (p === '/api/info') return { name: 'nio', version: 'demo', host: 'Ordinador de demo', platform: 'darwin', user: 'tu', publicUrl: null, agents: AGENTS, roots: [ROOT], vapidKey: null, id: 'demo', device: { id: 'demo', name: 'Aquest navegador', primary: true }, demo: true, control: caps };
+      if (p === '/api/usage') return DEMO_USAGE;
+      if (p === '/api/notes') return { notes: NOTES };
+      if (p === '/api/notes/engines') return { engines: [{ id: 'ollama:qwen3:4b', label: 'qwen3:4b · 4.0B', local: true, group: 'Local (Ollama)', params: 4 }] };
+    if (p === '/api/sessions') return list();
+      if (p === '/api/approvals') return pending();
+      if ((m = p.match(/^\/api\/sessions\/([\w-]+)$/))) { const s = sessions.get(m[1]); if (!s) throw err(404, 'Aquesta sessió no existeix'); const since = Number(q.get('since') || 0); return { session: summary(s), events: s.events.filter((e) => e.seq > since) }; }
+      if (/^\/api\/sessions\/[\w-]+\/commands$/.test(p)) return [];
+      if (/^\/api\/sessions\/[\w-]+\/git$/.test(p)) return { repo: false };
+      if (p === '/api/projects') return [{ path: ROOT, name: 'projectes', root: true, git: false }, ...DIRS[ROOT].map((n) => ({ path: `${ROOT}/${n}`, name: n, root: false, git: n !== 'notes' }))];
+      if (p === '/api/fs') { const d = (q.get('path') || ROOT).replace(/\/+$/, '') || ROOT; return { path: d, parent: d === '/Users/tu' ? null : d.replace(/\/[^/]+$/, '') || null, home: '/Users/tu', git: false, dirs: (DIRS[d] || []).map((n) => ({ name: n, path: `${d}/${n}`, hidden: false })) }; }
+      if (p === '/api/memory') return { dir: '~/.nio/memory', files: Object.entries(MEMORY).map(([path, c]) => ({ path, size: c.length, updated: Date.now() - 86400000 })) };
+      if ((m = p.match(/^\/api\/memory\/f\/(.+)$/))) { const path = decodeURIComponent(m[1]); if (!(path in MEMORY)) throw err(404, 'Aquest fitxer no existeix'); return { path, content: MEMORY[path], updated: Date.now() - 86400000 }; }
+      if (p === '/api/memory/search') { const t = (q.get('q') || '').toLowerCase(), r = []; for (const [path, c] of Object.entries(MEMORY)) c.split('\n').forEach((l, i) => l.toLowerCase().includes(t) && t && r.push({ path, line: i + 1, text: l })); return r; }
+      if (p === '/api/jobs') return { jobs: jobs.map((j) => ({ ...j })), routing: [], max: 2 };
+      if (p === '/api/audit') return audit.filter((e) => !q.get('type') || e.type === q.get('type')).sort((a, b) => b.t - a.t).slice(0, 300);
+      if (p === '/api/devices') return [{ id: 'demo', name: 'Aquest navegador', primary: true, created: null, lastSeen: Date.now(), current: true }, { id: 'iphone', name: 'iPhone', primary: false, created: Date.now() - 3 * 86400000, lastSeen: Date.now() - 5 * 3600000 }];
+      if (p === '/api/voice') return { providers: {}, stt: null, tts: null, speak: false, lang: 'ca', voice: {}, demo: true };
+      if (p === '/api/control') return caps;
+      if (p === '/api/screen') return { last: lastShot, enabled: caps.escriptori.enabled || caps.navegador.enabled };
+      if (p === '/api/desktop/status') return { w: W, h: H, screen: true, accessibility: true, platform: 'darwin', input: true, capture: true, enabled: caps.escriptori.enabled };
+      if (p === '/api/telegram') return { configured: false, bot: null, running: false, allowed: [], pending: [], agent: null, cwd: ROOT, mode: 'preguntar', notify: true, voice: false };
+      if (p === '/api/ollama') return { available: false, host: '', models: [], running: [], pulling: [] };
+      if (p === '/api/ollama/models' || p === '/api/notices' || p === '/api/ssh/hosts') return [];
+      if (p === '/api/github') return { available: false, authed: false };
+    }
+    if (method === 'POST') {
+      if (p === '/api/sessions') { const s = create(body); if (body.text) send(s, body.text); return summary(s); }
+      if ((m = p.match(/^\/api\/sessions\/([\w-]+)\/message$/))) { const s = sessions.get(m[1]); if (!s) throw err(404, 'Aquesta sessió no existeix'); return send(s, body.text); }
+      if ((m = p.match(/^\/api\/sessions\/([\w-]+)\/stop$/))) { const r = runs.get(m[1]), s = sessions.get(m[1]); if (!r) return { stopped: false }; r.stopped = true; for (const a of approvals.values()) if (a.session === m[1] && a.state === 'pending') decide(a.id, 'deny'); if (s) push(s, 'info', { text: 'Has aturat l’agent' }); return { stopped: true }; }
+      if ((m = p.match(/^\/api\/approvals\/([\w-]+)$/))) { const a = decide(m[1], body.decision === 'allow' ? 'allow' : 'deny'); if (!a) throw err(404, 'Aquesta petició ja s’ha resolt'); return a; }
+      if (p === '/api/notes') { const t = Date.now(), n = { id: noteId(), title: '', text: '', items: null, color: '', pinned: false, archived: false, trashed: 0, labels: [], audio: [], created: t, updated: t, ...body }; NOTES.unshift(n); return n; }
+      if (p === '/api/notes/ai') { const n = NOTES.find((x) => x.id === body.id), t = (n?.text || '').split('\n').filter(Boolean); return { engine: 'ollama:qwen3:4b', local: true, action: body.action, result: { text: t.map((x) => `- ${x}`).join('\n') || '- (res a resumir)', items: t, title: n?.title || 'Nota', labels: ['demo'] } }; }
+      if (p === '/api/jobs') return addJob(body);
+      if ((m = p.match(/^\/api\/jobs\/([\w-]+)\/(run|cancel)$/))) {
+        const j = jobs.find((x) => x.id === m[1]); if (!j) throw err(404, 'Aquesta feina no existeix');
+        if (m[2] === 'run') { if (j.cron) { const c = { ...j, id: rid(), cron: null, state: 'pendent', created: Date.now() }; jobs.unshift(c); runJob(c); } else runJob(j); return j; }
+        if (j.state === 'en curs') { const r = runs.get(j.session); if (r) r.stopped = true; }
+        Object.assign(j, { state: 'cancel·lada', finished: Date.now() }); jobOut(j); return j;
+      }
+      if (p === '/api/screen') return takeShot('Aquest navegador');
+      if (p === '/api/desktop/session') return { ok: true };
+      if (p === '/api/desktop/input') { if (!caps.escriptori.enabled) throw err(400, 'Activa primer «Apps de l’escriptori».'); return input(body); }
+      if (p === '/api/panic') { let n = 0; for (const [id, r] of runs) { r.stopped = true; n++; const s = sessions.get(id); if (s) push(s, 'info', { text: 'Aturat des de l’aturada d’emergència' }); } for (const a of approvals.values()) if (a.state === 'pending') decide(a.id, 'deny'); return { stopped: n }; }
+      if (p === '/api/voice/stt') throw err(400, 'A la demo no hi ha micròfon. Amb nio instal·lat, dictes amb Whisper, gratis, a l’ordinador.');
+    }
+    if ((m = p.match(/^\/api\/notes\/([\w-]+)$/))) {
+      const n = NOTES.find((x) => x.id === m[1]); if (!n) throw err(404, 'Aquesta nota no existeix');
+      if (method === 'PATCH') { Object.assign(n, body, { updated: Date.now() }); if ('trashed' in body) n.trashed = body.trashed ? Date.now() : 0; return n; }
+      if (method === 'DELETE') { if (n.trashed || q.get('forever') === '1') NOTES.splice(NOTES.indexOf(n), 1); else n.trashed = Date.now(); return { ok: true }; }
+    }
+    if ((m = p.match(/^\/api\/sessions\/([\w-]+)$/))) {
+      const s = sessions.get(m[1]); if (!s) throw err(404, 'Aquesta sessió no existeix');
+      if (method === 'PATCH') { if (['llegir', 'preguntar', 'tot'].includes(body.mode)) s.mode = body.mode; if (typeof body.title === 'string') s.title = body.title.slice(0, 120); touch(s); return summary(s); }
+      if (method === 'DELETE') { runs.get(s.id) && (runs.get(s.id).stopped = true); sessions.delete(s.id); out({ type: 'removed', session: s.id }); return { ok: true }; }
+    }
+    if (method === 'DELETE' && (m = p.match(/^\/api\/jobs\/([\w-]+)$/))) { const i = jobs.findIndex((x) => x.id === m[1]); if (i >= 0) jobs.splice(i, 1); out({ type: 'job', removed: m[1] }); return { ok: true }; }
+    if (method === 'PUT' && p === '/api/control') { for (const k of ['navegador', 'escriptori']) if (typeof body[k] === 'boolean') caps[k].enabled = body[k]; return { ...caps, notes: [] }; }
+    if ((m = p.match(/^\/api\/memory\/f\/(.+)$/))) {
+      if (method === 'PUT') { MEMORY[decodeURIComponent(m[1])] = String(body.content ?? ''); return { ok: true }; }
+      if (method === 'DELETE') { delete MEMORY[decodeURIComponent(m[1])]; return { ok: true }; }
+    }
+    throw err(400, NOPE);
+  }
+
+  const json = (status, data) => new Response(JSON.stringify(data), { status, headers: { 'content-type': 'application/json' } });
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input, opts = {}) => {
+    const href = typeof input === 'string' ? input : input?.url || String(input);
+    if (!href.startsWith('demo:')) return realFetch(input, opts);
+    const u = new URL(href.replace(/^demo:[^/]*/, 'http://demo')), method = (opts.method || 'GET').toUpperCase();
+    if (u.pathname === '/api/stream') {
+      let ctl;
+      const body = new ReadableStream({
+        start(c) { ctl = c; streams.add(c); c.enqueue(new TextEncoder().encode(`data: ${JSON.stringify({ type: 'hello', sessions: list(), approvals: pending(), usage: DEMO_USAGE })}\n\n`)); },
+        cancel() { streams.delete(ctl); },
+      });
+      opts.signal?.addEventListener('abort', () => { streams.delete(ctl); try { ctl.close(); } catch { /* ja tancat */ } });
+      return new Response(body, { status: 200, headers: { 'content-type': 'text/event-stream' } });
+    }
+    if (u.pathname === '/api/desktop/frame') {
+      if (!caps.escriptori.enabled) return json(400, { error: 'Activa primer «Apps de l’escriptori».' });
+      const h = deskHash(), hd = { 'x-hash': h, 'x-screen-w': String(W), 'x-screen-h': String(H), 'x-blank': '0' };
+      if (u.searchParams.get('h') === h) return new Response(null, { status: 204, headers: hd });
+      return new Response(await frame(u.searchParams.get('w'), u.searchParams.get('q')), { status: 200, headers: { ...hd, 'content-type': 'image/jpeg' } });
+    }
+    let sm;
+    if ((sm = u.pathname.match(/^\/api\/screen\/shot\/([\w-]+)$/))) {
+      if (!shots.has(sm[1])) shots.set(sm[1], await frame(1600, 80));
+      return new Response(shots.get(sm[1]), { status: 200, headers: { 'content-type': 'image/jpeg' } });
+    }
+    await sleep(60);
+    let body = {};
+    try { body = typeof opts.body === 'string' ? JSON.parse(opts.body) : {}; } catch { /* àudio o res */ }
+    try { return json(200, await route(method, u.pathname, u.searchParams, body)); }
+    catch (e) { return json(e.status || 500, { error: e.message }); }
+  };
+  window.NioDemo = { url: 'demo:nio', isDemo: (m) => !!m && String(m.url).startsWith('demo:') };
+})();

package/web/app/index.html

@@ -17,14 +17,14 @@
 <meta property="og:url" content="https://www.nio.cat/app">
 <meta property="og:title" content="nio // Panell">
 <meta property="og:description" content="Dona feina als agents d’IA del teu ordinador des del mòbil, segueix-los en directe i aprova cada pas.">
-<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 name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="nio // Panell">
 <meta name="twitter:description" content="Dona feina als agents d’IA del teu ordinador des del mòbil, segueix-los en directe i aprova cada pas.">
-<meta name="twitter:image" content="https://www.nio.cat/og.png">
+<meta name="twitter:image" content="https://www.nio.cat/og.jpg">
 <link rel="manifest" href="/manifest.webmanifest">
 <meta name="format-detection" content="telephone=no">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml">
@@ -35,6 +35,7 @@
 <link rel="stylesheet" href="/bot.css">
 <link rel="stylesheet" href="/board.css">
 <link rel="stylesheet" href="/app/style.css">
+<link rel="stylesheet" href="/app/notes.css">
 </head>
 <body>
 <header class="mbar">
@@ -72,6 +73,7 @@
 
 <script src="/bot.js"></script>
 <script src="/board.js"></script>
+<script src="/app/demo.js"></script>
 <script src="/app/app.js" type="module"></script>
 </body>
 </html>