nio-cat 0.9.0 → 0.9.2

package/web/app/index.html

@@ -65,6 +65,7 @@
 <div class="tour" id="tour" hidden>
   <div class="tour-spot" id="tourSpot"></div>
   <div class="tour-card" id="tourCard" role="dialog" aria-modal="false" aria-labelledby="tourT"></div>
+  <span class="tour-tap" id="tourTap" aria-hidden="true"></span>
 </div>
 <nav class="tabbar" id="tabbar" aria-label="Navegació"></nav>
 <div class="toasts" id="toasts" popover="manual" aria-live="polite"></div>

package/web/app/style.css

@@ -66,7 +66,7 @@ button { cursor: pointer; }
 kbd { font: 600 11px var(--font); padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--fg-muted); }
 .main { min-width: 0; display: flex; flex-direction: column; }
 .page { padding: 32px 40px 96px; max-width: 1080px; width: 100%; }
-.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
+.top { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
 .top h1 { font-size: 30px; font-weight: 500; letter-spacing: -.05em; line-height: 1.1; }
 .top p { margin-top: 4px; color: var(--fg-muted); }
 .mbar, .scrim { display: none; }
@@ -186,7 +186,7 @@ button.chip:hover { border-color: var(--fg); }
 /* ---------- Sessions ---------- */
 .session-card .title { font-size: 16px; font-weight: 500; letter-spacing: -.02em; margin-top: 8px; }
 .session-card .last.err { color: var(--red); }
-.session-card .last { color: var(--fg-muted); font-size: 14px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.session-card .last { color: var(--fg-muted); font-size: 14px; margin-top: 4px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .session-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--fg-muted); }
 .fab { position: fixed; right: 24px; bottom: calc(24px + var(--safe-b)); z-index: 15; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px 0 16px; border: 0; border-radius: 16px; background: var(--fg); color: var(--bg); font-weight: 600; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--fg) 70%, transparent); transition: transform .15s; }
 .fab:active { transform: scale(.97); }
@@ -304,6 +304,23 @@ dialog.sheet[open] { animation: pop .22s var(--ease); }
 .tour-card h3 { font-size: 19px; font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
 .tour-card.center h3 { font-size: 26px; letter-spacing: -.045em; }
 .tour-card p { font-size: 14px; color: var(--fg-muted); }
+.tour-card { transition: left .35s var(--ease), top .35s var(--ease), opacity .25s; }
+.tour-card.swap { opacity: .0; pointer-events: none; }
+.tour-spot.fade { box-shadow: 0 0 0 9999px color-mix(in srgb, var(--fg) 42%, transparent); }
+.tour-dots { display: flex; gap: 5px; width: 100%; }
+.tour-card.center .tour-dots { display: none; }
+.tour-dots i { flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 14%, transparent); transition: background .3s; }
+.tour-dots i.done { background: color-mix(in srgb, var(--fg) 45%, transparent); }
+.tour-dots i.on { background: var(--fg); }
+.tour-tap { position: fixed; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 0 2px var(--fg), 0 6px 16px rgba(0,0,0,.3); opacity: 0; pointer-events: none; z-index: 2; transition: translate .6s var(--ease), opacity .25s, scale .15s; }
+.tour-tap.on { opacity: 1; }
+.tour-tap.press { scale: .76; }
+.tour-tap.nomove { transition: none; }
+.tour-tap::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--fg); opacity: 0; }
+.tour-tap.press::after { animation: tourRipple .5s ease-out; }
+@keyframes tourRipple { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
+.tour-pressed { scale: .97; transition: scale .15s; }
+@media (prefers-reduced-motion: reduce) { .tour-tap, .tour-card, .tour-spot { transition: none !important; } .tour-tap.press::after { animation: none; } }
 .tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding-top: 4px; }
 .tour-card.center .tour-foot { justify-content: center; }
 
@@ -395,7 +412,11 @@ body.board-mode .view-enter { animation: none; }
 .choice .body { min-width: 0; }
 @media (max-width: 820px) { .choice-grid { grid-template-columns: 1fr; } }
 .fs-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.fs-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
+.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; }
+.crumb { background: none; border: 0; padding: 6px 6px; margin: 0; border-radius: 8px; color: var(--muted, #8a8f98); font: inherit; cursor: pointer; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.crumb:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
+.crumb.cur { color: inherit; font-weight: 600; cursor: default; }
+.crumbs .sl { opacity: .4; flex: none; }
 .fs-list { max-height: 240px; overflow: auto; }
 
 /* Assistent «Nova sessió»: drawer fix al telèfon, capçalera i peu fixos, cos amb scroll */
@@ -477,6 +498,14 @@ video.scan { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14p
 .help-body { display: grid; gap: 8px; padding: 0 0 14px; font-size: 14px; color: var(--fg-muted); }
 .help-body ul { padding-left: 18px; display: grid; gap: 4px; }
 .help-body b { color: var(--fg); font-weight: 600; }
+.help-body .mono { padding: 2px 7px; border-radius: 6px; background: var(--code); color: var(--fg); white-space: nowrap; }
+.help-body .cmdb { margin: 2px 0; padding: 12px 14px; border-radius: 10px; background: var(--code); color: var(--fg); font: 14px/1.4 var(--mono); overflow-x: auto; }
+.help-body .cmdlist { display: grid; gap: 6px; margin: 2px 0; }
+.help-body .cmdlist > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--code) 45%, transparent); }
+.help-body .cmdlist .mono { justify-self: start; white-space: normal; overflow-wrap: anywhere; }
+.help-grp { margin: 22px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
+.help-grp:first-child { margin-top: 0; }
+@media (max-width: 620px) { .help-body .cmdlist > div { grid-template-columns: 1fr; } }
 .empty .stepper { text-align: left; max-width: 640px; margin: 16px auto 18px; }
 a.kbd { text-decoration: none; color: inherit; }
 
@@ -642,7 +671,7 @@ dialog.sheet.wiz.compact .sheet-in, .compact .wiz-body { flex: 0 1 auto; }
 .section-title + .mem-list { margin-bottom: 8px; }
 
 /* Capçalera d'una secció dins d'una pàgina */
-.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 36px 0 14px; }
+.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 36px 0 14px; }
 .sec-head .sec { margin: 0; }
 .sec-head p { margin-top: 4px; max-width: 640px; }
 
@@ -668,3 +697,18 @@ html.rd-open, html.rd-open body { overflow: hidden; }
 .rd-keys[hidden] { display: none; }
 .rd-type { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; font-size: 16px; pointer-events: none; }
 @media (max-width: 560px) { .rd-bar { padding: 8px 10px; gap: 8px; } .rd-stat, #rdFull { display: none; } .rd-seg button { padding: 9px 11px; } }
+
+.rd-stage img { transform-origin: center; will-change: transform; }
+.rd-tools { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: rgba(22, 22, 23, .86); border: 1px solid #36363a; backdrop-filter: blur(8px); z-index: 2; max-width: calc(100% - 20px); }
+.rd-tools .rd-btn { padding: 10px 12px; min-width: 40px; }
+.rd-pct { min-width: 56px !important; font-variant-numeric: tabular-nums; }
+.rd-sep { width: 1px; align-self: stretch; background: #36363a; }
+.rd-msg { bottom: 84px; }
+@media (max-width: 560px) { .rd-tools { gap: 4px; padding: 5px; } .rd-tools .rd-btn { padding: 12px 10px; min-width: 44px; font-size: 14px; } .rd-pct { min-width: 52px !important; } }
+
+.session-card { padding: 14px 16px; }
+.session-card .meta { margin-top: 8px; }
+#jobWhen { flex-wrap: wrap; }
+#jobWhen button { flex: 1 0 auto; padding: 0 12px; }
+#jobTimes .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
+#jobMinsU { flex: 1; }

package/web/board.css

@@ -190,3 +190,53 @@
   .bd-chat header { padding-top: 22px; }
   .bd-chat .cin textarea { font-size: 16px; }
 }
+
+/* Tàctil: botons còmodes, sense menú de pressió llarga ni selecció */
+.bd-stage, .bd-svg { -webkit-touch-callout: none; }
+@media (pointer: coarse) {
+  .bd .ib, .bd .pct { height: 40px; }
+  .bd .ib { width: 40px; }
+  .bd .pct { min-width: 52px; font-size: 13px; }
+  .bd .tb { width: 44px; height: 44px; }
+  .bd .chat-t { height: 44px; }
+  .bd-menu { top: 50px; min-width: 250px; }
+  .bd-menu button, .bd-menu label { padding: 13px 12px; font-size: 15px; }
+  .bd-style .sw-c { width: 34px; height: 34px; }
+  .bd-style .seg2 button { height: 36px; }
+  .bd-chat .chip-s { height: 38px; line-height: 36px; font-size: 13px; }
+  .bd-chat .send { width: 46px; height: 46px; }
+}
+@media (pointer: coarse) and (max-width: 820px) {
+  .bd-zoom [data-bd="zin"], .bd-zoom [data-bd="zout"] { display: none; }
+  .bd-tools { gap: 0; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
+  .bd .tb { scroll-snap-align: center; }
+}
+@container stage (max-width: 440px) {
+  .bd .tb { width: 40px; height: 44px; }
+  .bd-zoom { max-width: calc(100% - 128px); }
+}
+@container stage (max-width: 400px) {
+  .bd-tools .tb { min-width: 34px; height: 44px; }
+}
+
+/* Teclat obert: el xat puja per damunt del teclat */
+@media (max-width: 820px) {
+  .bd-chat { bottom: var(--kb, 0px); transition: transform .34s var(--bd-ease), bottom .2s, visibility 0s linear .34s; }
+  .chat-open .bd-chat { transition: transform .34s var(--bd-ease), bottom .2s, visibility 0s; }
+  .bd-chat.dragging { transition: none !important; }
+}
+@container stage (max-width: 720px) {
+  .bd-chat { bottom: var(--kb, 0px); height: min(78%, 600px, calc(100% - var(--kb, 0px) - 8px)); }
+}
+
+/* Mòbil en horitzontal: poc d'alçada */
+@media (max-height: 480px) and (max-width: 940px) {
+  .bd-chat { height: min(92%, 600px); }
+  .bd-tools { bottom: calc(6px + env(safe-area-inset-bottom)); left: auto; right: auto; max-width: calc(100% - 20px); }
+  .bd-tools { left: 50%; transform: translateX(-50%); }
+  .bd .tb { height: 40px; }
+  .style-open .bd-style:not([hidden]) { bottom: calc(58px + env(safe-area-inset-bottom)); max-height: calc(100% - 130px); overflow-y: auto; grid-template-columns: repeat(2, 1fr); }
+  .bd-help-in { padding: 14px; }
+  .bd-empty { display: none; }
+}
+

package/web/board.js

@@ -42,6 +42,7 @@ const uid = () => Math.random().toString(36).slice(2, 10);
 const norm = s => String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/·/g, '').toLowerCase().trim();
 const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
 const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+const coarse = matchMedia('(pointer: coarse)').matches;
 
 /* ---------- Estat ---------- */
 function fresh() {
@@ -311,13 +312,13 @@ function drawSel() {
   if (list.length) {
     const p = 6 / z;
     if (list.length === 1 && isLinear(list[0])) {
-      const [a, b] = ends(list[0]), r = 6 / z;
+      const [a, b] = ends(list[0]), r = (coarse ? 11 : 6) / z;
       s += `<circle class="hdl" data-ep="0" cx="${a[0]}" cy="${a[1]}" r="${r}" stroke-width="${1.5 / z}"/><circle class="hdl" data-ep="1" cx="${b[0]}" cy="${b[1]}" r="${r}" stroke-width="${1.5 / z}"/>`;
     } else {
       const b = union(list);
       s += `<rect class="selbox" x="${b.x - p}" y="${b.y - p}" width="${b.w + p * 2}" height="${b.h + p * 2}" stroke-width="${1.2 / z}" stroke-dasharray="${4 / z} ${3 / z}"/>`;
       if (list.length === 1 && list[0].type !== 'draw') {
-        const H = 9 / z, bx = b.x - p, by = b.y - p, bw = b.w + p * 2, bh = b.h + p * 2;
+        const H = (coarse ? 17 : 9) / z, bx = b.x - p, by = b.y - p, bw = b.w + p * 2, bh = b.h + p * 2;
         const pos = { nw: [bx, by], n: [bx + bw / 2, by], ne: [bx + bw, by], e: [bx + bw, by + bh / 2], se: [bx + bw, by + bh], s: [bx + bw / 2, by + bh], sw: [bx, by + bh], w: [bx, by + bh / 2] };
         HANDLES.forEach(k => { if (list[0].type === 'text' && (k === 'n' || k === 's' || k === 'e' || k === 'w')) return; s += `<rect class="hdl" data-h="${k}" x="${pos[k][0] - H / 2}" y="${pos[k][1] - H / 2}" width="${H}" height="${H}" rx="${2 / z}" stroke-width="${1.5 / z}"/>`; });
       }
@@ -395,7 +396,7 @@ function onDown(e) {
   if (editing) { endEdit(); if (tool === 'select') return; }
   R.svg.setPointerCapture(e.pointerId);
   pointers.set(e.pointerId, [e.clientX, e.clientY]);
-  if (pointers.size === 2) { const [a, b] = [...pointers.values()]; drag = { mode: 'pinch', d0: Math.hypot(a[0] - b[0], a[1] - b[1]), z0: B.view.z, v0: { ...B.view }, m0: [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2] }; marquee = null; return; }
+  if (pointers.size === 2) { abortDrag(); const [a, b] = [...pointers.values()]; drag = { mode: 'pinch', d0: Math.hypot(a[0] - b[0], a[1] - b[1]), z0: B.view.z, v0: { ...B.view }, m0: [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2] }; marquee = null; return; }
   const [wx, wy] = toWorld(e.clientX, e.clientY);
   const hitG = e.target.closest('[data-id]'), hit = hitG ? byId(hitG.dataset.id) : null;
   const touch = e.pointerType === 'touch';
@@ -439,6 +440,13 @@ function onDown(e) {
     drag = { mode: 'draw', el, last: [wx, wy] };
   }
 }
+function abortDrag() {
+  const d = drag; if (!d) return;
+  if (d.mode === 'create' || d.mode === 'line' || d.mode === 'draw') { B.els = B.els.filter(x => x !== d.el); nodes.get(d.el.id)?.remove(); nodes.delete(d.el.id); hist.pop(); }
+  else if (d.mode === 'move' && d.rec) { Object.entries(d.orig).forEach(([id, o]) => { const el = byId(id); if (el) { el.x = o.x; el.y = o.y; } }); hist.pop(); full(); }
+  else if (d.mode === 'resize' && d.rec) { Object.assign(d.el, d.o); hist.pop(); full(); }
+  marquee = null; R.stage.classList.remove('panning'); drag = null; R.empty.hidden = !!B.els.length; drawSel();
+}
 function snapshotSel() { const m = {}; sel.forEach(id => { const el = byId(id); if (el) m[id] = { x: el.x, y: el.y }; }); return m; }
 function onMove(e) {
   if (!R) return;
@@ -559,8 +567,18 @@ function onWheel(e) {
   if (!R) return;
   e.preventDefault();
   const r = R.svg.getBoundingClientRect();
-  if (e.ctrlKey || e.metaKey) zoomAt(B.view.z * Math.exp(-e.deltaY * .0028), e.clientX - r.left, e.clientY - r.top);
-  else { B.view.x -= e.shiftKey && !e.deltaX ? e.deltaY : e.deltaX; B.view.y -= e.shiftKey && !e.deltaX ? 0 : e.deltaY; applyView(); drawSel(); save(); }
+  const k = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? r.height : 1, dx = e.deltaX * k, dy = e.deltaY * k;
+  if (e.ctrlKey || e.metaKey) zoomAt(B.view.z * Math.exp(-clamp(dy, -40, 40) * .01), e.clientX - r.left, e.clientY - r.top);
+  else { B.view.x -= e.shiftKey && !dx ? dy : dx; B.view.y -= e.shiftKey && !dx ? 0 : dy; applyView(); drawSel(); save(); }
+}
+let gz = null;
+function onGesture(e) {
+  if (!R) return;
+  e.preventDefault();
+  const r = R.svg.getBoundingClientRect();
+  if (e.type === 'gesturestart') { gz = { z0: B.view.z }; return; }
+  if (e.type === 'gestureend') { gz = null; return; }
+  if (gz) zoomAt(gz.z0 * e.scale, e.clientX - r.left, e.clientY - r.top);
 }
 
 /* ---------- Accions ---------- */
@@ -1169,6 +1187,7 @@ function mount(root) {
   if (first) { const r = R.svg.getBoundingClientRect(); B.view = { x: r.width / 2, y: r.height / 2, z: 1 }; }
   on(R.svg, 'pointerdown', onDown); on(window, 'pointermove', onMove); on(window, 'pointerup', onUp); on(window, 'pointercancel', onUp);
   on(R.svg, 'wheel', onWheel, { passive: false });
+  ['gesturestart', 'gesturechange', 'gestureend'].forEach(t => on(R.svg, t, onGesture, { passive: false }));
   on(window, 'keydown', onKey); on(window, 'keyup', onKeyUp);
   on(root, 'click', onClick);
   on(R.editor, 'input', placeEditor); on(R.editor, 'blur', () => setTimeout(endEdit, 0));
@@ -1180,6 +1199,11 @@ function mount(root) {
   on(R.root.querySelector('#bdImport'), 'change', e => { const f = e.target.files[0]; if (f) importJSON(f); e.target.value = ''; });
   on(document, 'click', e => { if (R && !e.target.closest('.bd-menuwrap')) { const m = R.root.querySelector('#bdMenu'); if (m) m.hidden = true; } });
   on(window, 'resize', () => { applyView(); drawSel(); });
+  const vv = window.visualViewport;
+  if (vv) {
+    const kb = () => R && R.root.style.setProperty('--kb', Math.max(0, Math.round(innerHeight - vv.height - vv.offsetTop)) + 'px');
+    on(vv, 'resize', kb); on(vv, 'scroll', kb); kb();
+  }
   if (document.fonts) document.fonts.load(`500 24px Caveat`).then(() => { if (R) { B.els.forEach(el => { if (el.type === 'text' && el.text) fitText(el); }); full(); } }).catch(() => {});
   chatSwipe(R.chat);
   full(); drawChat(); drawBrains(); setTool(tool); openChat(B.opts.chat && !matchMedia('(max-width: 820px)').matches, false, false);

package/web/index.html

@@ -79,6 +79,15 @@ main .cmd code::-webkit-scrollbar { display: none; }
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none; transition: none; } }
 .copy.done .ic { display: none; }
 main strong { font-weight: 600; }
+.feat { list-style: none; display: grid; gap: 14px; padding: 0; margin-top: 4px; }
+.feat li { padding-left: 18px; position: relative; text-wrap: pretty; }
+.feat li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+.cmds { display: grid; gap: 8px; margin: 16px 0; }
+.cmds > div { display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: #e6e1d8; }
+.cmds dt code { background: #f6f3ee; }
+.cmds dd { font-size: .86em; color: var(--fg-muted); }
+@media (max-width: 620px) { .cmds > div { grid-template-columns: 1fr; } }
+
 
 .footer .page { padding: 40px 0 56px; text-align: center; font-size: 13px; color: var(--fg-muted); }
 .footer a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@@ -117,16 +126,66 @@ main strong { font-weight: 600; }
 
   <section aria-labelledby="que">
     <h2 id="que">Què hi pots fer</h2>
-    <ul class="list">
-      <li><strong>Sessions</strong> amb Claude Code i Codex, en directe, a qualsevol dels teus ordinadors.</li>
-      <li><strong>Aprovacions</strong>: abans d’editar, executar o clicar res, te’n demana permís amb el motiu. Tot queda registrat.</li>
-      <li><strong>Feines</strong> que es fan soles: ara, més tard o cada dia, i encadenades («quan Claude Code acabi, que Codex ho revisi»).</li>
-      <li><strong>Memòria compartida</strong>: el que recorda un agent, ho sap l’altre. Fitxers markdown al teu ordinador.</li>
-      <li><strong>Telegram i veu</strong>: parla-hi amb el teu bot o amb notes de veu, i aprova amb un botó.</li>
-      <li><strong>Navegador i escriptori</strong>: els agents poden mirar webs i apps; per actuar, sempre et demanen permís amb una captura.</li>
+    <ul class="feat">
+      <li><strong>Sessions en directe.</strong> Claude Code i Codex a qualsevol dels teus ordinadors: tria l’agent, la carpeta i el nivell de permisos, i la resposta et va arribant mentre treballa, amb les eines que fa servir.</li>
+      <li><strong>Aprovacions.</strong> Abans d’editar, executar o clicar res, te’n demana permís amb el motiu, i ho aproves o ho rebutges amb un toc. Tot queda registrat a Activitat.</li>
+      <li><strong>Avisos al mòbil.</strong> Una notificació quan un agent et demana permís o acaba la feina. Arriba buida: el detall el demana el mòbil directament a l’ordinador.</li>
+      <li><strong>Feines.</strong> Que es facin soles: ara, més tard o cada dia, i encadenades («quan Claude Code acabi, que Codex ho revisi»).</li>
+      <li><strong>Memòria compartida.</strong> El que recorda un agent, ho sap l’altre. Són fitxers markdown al teu ordinador.</li>
+      <li><strong>Ordinadors i servidors.</strong> El teu ordinador o un servidor (VPS), tots a la mateixa llista. Els afegeixes escrivint <code>usuari@servidor</code>.</li>
+      <li><strong>Pantalla remota.</strong> Mira i controla l’escriptori de l’ordinador des del mòbil, amb zoom amb dos dits i captures. Més avall.</li>
+      <li><strong>Navegador i escriptori per als agents.</strong> Poden mirar webs i apps; per actuar, sempre et demanen permís amb una captura.</li>
+      <li><strong>Telegram i veu.</strong> Parla amb el teu bot o amb notes de veu, aprova amb un botó, i escolta les respostes (ElevenLabs o OpenAI). Les claus es queden a l’ordinador.</li>
+      <li><strong>Git i GitHub.</strong> Clona un repositori, mira els canvis, fes commit i crea un PR des del mòbil, amb el <code>git</code> i el <code>gh</code> de l’ordinador.</li>
+      <li><strong>Models d’Ollama i xat local.</strong> Descarrega i fes servir models gratuïts a l’ordinador, o un model petit dins del navegador del mòbil.</li>
+      <li><strong>Pissarra.</strong> Un llenç per fer diagrames, i en Nio te’ls dibuixa si li ho expliques. Més avall.</li>
+      <li><strong>Com una app.</strong> Afegeix nio a la pantalla d’inici del mòbil; llisca als costats per canviar de pàgina i <code>Ctrl K</code> obre el buscador a l’ordinador.</li>
     </ul>
   </section>
 
+  <section aria-labelledby="cmds">
+    <h2 id="cmds">Comandes amb «/»</h2>
+    <p>Al missatge d’una sessió, escriu <code>/</code> i surten els suggeriments. Les de nio funcionen amb tots els agents; les de l’agent (comandes i skills) se li envien tal qual.</p>
+    <dl class="cmds">
+      <div><dt><code>/mode</code></dt><dd>Canvia els permisos: <code>l</code> llegir, <code>p</code> preguntar, <code>t</code> tot</dd></div>
+      <div><dt><code>/model</code></dt><dd>Canvia de model</dd></div>
+      <div><dt><code>/stop</code></dt><dd>Atura l’agent ara mateix</dd></div>
+      <div><dt><code>/nova</code></dt><dd>Nova sessió amb el mateix agent i carpeta</dd></div>
+      <div><dt><code>/carpeta</code></dt><dd>Canvia la carpeta de la sessió</dd></div>
+      <div><dt><code>/git</code></dt><dd>Veure canvis, fer commit i crear un PR</dd></div>
+      <div><dt><code>/nom</code></dt><dd>Posa nom a la sessió</dd></div>
+      <div><dt><code>/opcions</code></dt><dd>Opcions de la sessió</dd></div>
+      <div><dt><code>/ajuda</code></dt><dd>Llista de comandes</dd></div>
+    </dl>
+  </section>
+
+  <section aria-labelledby="screen">
+    <h2 id="screen">La pantalla remota</h2>
+    <p>Obre l’escriptori d’un dels teus ordinadors a pantalla completa, a la mateixa amplada que el mòbil, com un escriptori remot. Al mode <strong>Mirar</strong> només veus què fa l’agent; al mode <strong>Controlar</strong> pots clicar, fer doble clic, clic dret, arrossegar, desplaçar i escriure.</p>
+    <dl class="cmds">
+      <div><dt><code>− 100% +</code></dt><dd>Allunya, apropa o torna a enquadrar la imatge</dd></div>
+      <div><dt><code>1:1</code></dt><dd>Mida real, per llegir text petit</dd></div>
+      <div><dt><code>Desa captura</code></dt><dd>Baixa el fotograma actual com a imatge</dd></div>
+      <div><dt><code>Pantalla completa</code></dt><dd>A l’ordinador, amaga tota la resta</dd></div>
+    </dl>
+    <p><strong>Zoom amb dos dits.</strong> Pessiga per apropar i arrossega amb dos dits per moure’t; al mode Mirar, doble toc alterna entre enquadrar i apropar. Al mode Controlar, el botó «2 dits» tria si els dos dits desplacen l’ordinador o fan zoom. A l’ordinador, pessiga al trackpad o fes servir <code>Ctrl</code> i la roda. Cal activar «Apps de l’escriptori» a l’ordinador, i al Mac donar al terminal els permisos de Gravació de pantalla i Accessibilitat.</p>
+  </section>
+
+  <section aria-labelledby="board">
+    <h2 id="board">La pissarra</h2>
+    <p>Un llenç infinit per fer fluxos, mapes mentals i organigrames, al mòbil i a l’ordinador. Rectangles, el·lipses, rombes, fletxes que s’enganxen a les figures, línies, llapis, text i goma. Desfés i refés, quadrícula, i exportació a PNG, SVG o JSON.</p>
+    <p><strong>Zoom amb dos dits.</strong> Al mòbil, pessiga sobre el llenç per apropar o allunyar, i mou-lo amb els dos dits alhora. A l’ordinador, pessiga al trackpad o fes servir <code>Ctrl</code> i la roda del ratolí.</p>
+    <p><strong>Demana-ho a en Nio.</strong> Obre el xat de la pissarra i escriu què vols:</p>
+    <dl class="cmds">
+      <div><dt><code>Flux: A -> B -> C</code></dt><dd>Una fletxa per línia</dd></div>
+      <div><dt><code>Mapa mental de X: a, b, c</code></dt><dd>Tema central amb branques</dd></div>
+      <div><dt><code>Organigrama: Direcció &gt; Finances</code></dt><dd>Qui depèn de qui</dd></div>
+      <div><dt><code>Connecta Banc amb ERP</code></dt><dd>Uneix dues figures</dd></div>
+      <div><dt><code>Pinta Banc de verd</code></dt><dd>Canvia el color</dd></div>
+      <div><dt><code>Plantilla d’aprovació</code></dt><dd>Un diagrama de partida</dd></div>
+    </dl>
+  </section>
+
   <section aria-labelledby="teu">
     <h2 id="teu">Tot és teu</h2>
     <p>Fas servir els teus agents i les teves claus (Anthropic, OpenAI, ElevenLabs, el bot de Telegram). Les converses, la memòria i les claus es queden als teus ordinadors. nio.cat només serveix l’app i guarda, signada, l’adreça on trobar cada ordinador. Més detalls a <a href="/privadesa">privadesa</a>.</p>
@@ -139,7 +198,7 @@ main strong { font-weight: 600; }
 </main>
 
 <footer class="footer">
-  <div class="page">© 2026 nio // un projecte de <a href="https://f.cat">f.cat</a> · <a href="mailto:hola@nio.cat">hola@nio.cat</a> · <a href="/privadesa">Privadesa</a></div>
+  <div class="page">© 2026 nio // un projecte de <a href="https://f.cat">f.cat</a> · <a href="mailto:hola@nio.cat">hola@nio.cat</a> · <a href="/novetats">Novetats</a> · <a href="/privadesa">Privadesa</a></div>
 </footer>
 <script src="/bot.js" defer></script>
 <script>

package/web/privadesa.html

@@ -141,7 +141,7 @@ main strong { font-weight: 600; }
 </main>
 
 <footer class="footer">
-  <div class="page">© 2026 nio // un projecte de <a href="https://f.cat">f.cat</a> · <a href="mailto:hola@nio.cat">hola@nio.cat</a> · <a href="/privadesa">Privadesa</a></div>
+  <div class="page">© 2026 nio // un projecte de <a href="https://f.cat">f.cat</a> · <a href="mailto:hola@nio.cat">hola@nio.cat</a> · <a href="/novetats">Novetats</a> · <a href="/privadesa">Privadesa</a></div>
 </footer>
 <script src="/bot.js" defer></script>
 </body>

package/web/sw.js

@@ -1,5 +1,5 @@
 // nio · service worker: obre l'app encara que no hi hagi connexió i mostra els avisos.
-const SHELL = 'nio-shell-v23';
+const SHELL = 'nio-shell-v33';
 const FILES = ['/app', '/app/style.css', '/app/app.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
 
 self.addEventListener('install', (e) => {