nio-cat 0.1.0 → 0.2.0

package/web/bot.css

@@ -0,0 +1,60 @@
+/* Nio, el bot: una O amb ulls. */
+.bot {
+  --s: 1em;
+  --bw: .15;
+  position: relative;
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--s);
+  height: var(--s);
+  border: calc(var(--s) * var(--bw)) solid currentColor;
+  border-radius: 50%;
+}
+.bot .eyes {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--s) * .11);
+  transform: translate(var(--ex, 0px), var(--ey, 0px));
+  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
+}
+.bot .eyes i {
+  display: block;
+  width: calc(var(--s) * .12);
+  height: calc(var(--s) * .22);
+  border-radius: 999px;
+  background: currentColor;
+  transform-origin: center;
+  animation: bot-blink 5.4s infinite;
+  animation-delay: var(--bd, 0s);
+}
+@keyframes bot-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
+
+/* Treballant: mira d'una banda a l'altra */
+.bot[data-mood="work"] .eyes { animation: bot-scan 1.1s ease-in-out infinite alternate; transition: none; }
+@keyframes bot-scan { from { transform: translateX(calc(var(--s) * -.13)); } to { transform: translateX(calc(var(--s) * .13)); } }
+
+/* En ombra: observa, amb les parpelles a mitges */
+.bot[data-mood="peek"] .eyes i { height: calc(var(--s) * .12); border-radius: 0 0 999px 999px; }
+
+/* Aturat: dorm */
+.bot[data-mood="sleep"] .eyes { transform: translateY(calc(var(--s) * .04)); }
+.bot[data-mood="sleep"] .eyes i { width: calc(var(--s) * .15); height: calc(var(--s) * .035); animation: none; }
+
+/* Content: ulls en arc i un saltet */
+.bot[data-mood="happy"] { animation: bot-hop .45s ease 2; }
+.bot[data-mood="happy"] .eyes i { width: calc(var(--s) * .16); height: calc(var(--s) * .09); background: none; border: calc(var(--s) * .045) solid currentColor; border-bottom: 0; border-radius: 999px 999px 0 0; animation: none; }
+@keyframes bot-hop { 50% { transform: translateY(calc(var(--s) * -.12)); } }
+
+/* Com a O del nom */
+.word { display: inline-flex; align-items: baseline; }
+/* Mides de la «o» de Manrope 600: 0,547 × 0,578 em, traç 0,111 em (vertical) i 0,099 em (horitzontal),
+   comença 0,031 em després de l'origen i baixa 0,016 em sota la línia base. */
+.word .bot { --s: .56em; width: .547em; height: .578em; border-width: .099em .111em; margin-left: .031em; top: .016em; }
+
+@media (prefers-reduced-motion: reduce) {
+  .bot, .bot * { animation: none !important; transition: none !important; }
+}

package/web/bot.js

@@ -0,0 +1,48 @@
+/* Nio, el bot: els ulls segueixen el cursor i, sense cursor, de tant en tant fan una ullada. */
+(() => {
+  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const fine = matchMedia('(hover: hover) and (pointer: fine)').matches;
+  let px = null, py = null, raf = 0;
+
+  const free = b => !['work', 'sleep'].includes(b.dataset.mood);
+  const delay = b => { if (!b.style.getPropertyValue('--bd')) b.style.setProperty('--bd', (-Math.random() * 5).toFixed(2) + 's'); };
+
+  function apply() {
+    raf = 0;
+    document.querySelectorAll('.bot').forEach(b => {
+      delay(b);
+      const e = b.firstElementChild;
+      if (!e) return;
+      if (!free(b) || px == null) { e.style.removeProperty('--ex'); e.style.removeProperty('--ey'); return; }
+      const r = b.getBoundingClientRect();
+      if (!r.width) return;
+      const dx = px - (r.left + r.width / 2), dy = py - (r.top + r.height / 2);
+      const d = Math.hypot(dx, dy) || 1, k = Math.min(1, d / 260) * r.width * .15;
+      e.style.setProperty('--ex', (dx / d * k).toFixed(2) + 'px');
+      e.style.setProperty('--ey', (dy / d * k).toFixed(2) + 'px');
+    });
+  }
+  const refresh = () => { if (!raf) raf = requestAnimationFrame(apply); };
+
+  if (!reduce) {
+    addEventListener('pointermove', e => { if (e.pointerType === 'mouse') { px = e.clientX; py = e.clientY; refresh(); } }, { passive: true });
+    addEventListener('scroll', refresh, { passive: true });
+    document.addEventListener('mouseleave', () => { px = py = null; refresh(); });
+    setInterval(() => {
+      if (fine && px != null) return;
+      document.querySelectorAll('.bot').forEach(b => {
+        if (!free(b) || Math.random() < .5) return;
+        const e = b.firstElementChild, w = b.getBoundingClientRect().width * .14, a = Math.random() * Math.PI * 2;
+        e.style.setProperty('--ex', (Math.cos(a) * w).toFixed(2) + 'px');
+        e.style.setProperty('--ey', (Math.sin(a) * w * .6).toFixed(2) + 'px');
+        setTimeout(() => { if (px == null || !fine) { e.style.removeProperty('--ex'); e.style.removeProperty('--ey'); } }, 900 + Math.random() * 600);
+      });
+    }, 3400);
+  }
+
+  window.NioBot = {
+    html: (mood = 'idle', cls = '') => `<span class="bot ${cls}" data-mood="${mood}" aria-hidden="true" style="--bd:${(-Math.random() * 5).toFixed(2)}s"><span class="eyes"><i></i><i></i></span></span>`,
+    refresh
+  };
+  document.readyState === 'loading' ? addEventListener('DOMContentLoaded', refresh) : refresh();
+})();

package/web/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#f0ede7"/><circle cx="16" cy="16" r="10.2" fill="none" stroke="#272224" stroke-width="3.6"/><rect x="11.9" y="12.6" width="2.6" height="6" rx="1.3" fill="#272224"/><rect x="17.5" y="12.6" width="2.6" height="6" rx="1.3" fill="#272224"/></svg>

package/web/index.html

@@ -0,0 +1,140 @@
+<!doctype html>
+<html lang="ca">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>nio // agents al mòbil</title>
+<meta name="description" content="Dona feina als agents d’IA del teu ordinador des del mòbil, segueix-los en directe i aprova cada pas.">
+<link rel="canonical" href="https://www.nio.cat/">
+<meta name="theme-color" content="#f0ede7">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="nio">
+<meta property="og:locale" content="ca_ES">
+<meta property="og:url" content="https://www.nio.cat/">
+<meta property="og:title" content="nio // agents al mòbil">
+<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: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 // agents al mòbil">
+<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="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">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/bot.css">
+<style>
+:root {
+  --bg: #f0ede7;
+  --fg: #272224;
+  --fg-muted: #69615c;
+  --accent: #f46a3b;
+  --border: #cec7bd;
+  --lemon: #e7e66a;
+  --red: #e2382b;
+  --font: "Manrope", system-ui, sans-serif;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
+html { -webkit-text-size-adjust: 100%; }
+body { background: var(--bg); color: var(--fg); font: 400 19px/1.6 var(--font); letter-spacing: -.02em; -webkit-font-smoothing: antialiased; }
+a { color: inherit; }
+::selection { background: var(--lemon); }
+:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
+
+.page { width: min(640px, 100% - 48px); margin: 0 auto; }
+.head { padding: 56px 0 0; display: flex; justify-content: space-between; align-items: baseline; }
+.head .enter { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; transition: border-color .2s, background-color .2s; }
+.head .enter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.head .enter:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 4%, transparent); }
+.mark { font-size: 28px; font-weight: 600; letter-spacing: -.07em; line-height: 1; text-decoration: none; }
+
+main { padding: 96px 0 96px; }
+h1 { font-size: clamp(36px, 6vw, 52px); font-weight: 500; line-height: 1.06; letter-spacing: -.055em; text-wrap: balance; }
+.lead { margin-top: 28px; font-size: 21px; line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
+
+section { margin-top: 56px; }
+h2 { font-size: clamp(26px, 3.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.045em; margin-bottom: 18px; }
+section p { text-wrap: pretty; }
+section p + p, section p + ul, section ul + p, section p + .cmd, section .cmd + p { margin-top: 1em; }
+main a { text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
+main a:hover { color: var(--accent); }
+main code { font: 500 .88em ui-monospace, "SF Mono", Menlo, monospace; padding: 2px 7px; border-radius: 7px; background: #e6e1d8; }
+main .cmd { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 18px; border-radius: 12px; background: #e6e1d8; }
+main .cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 8px 0; background: none; border-radius: 0; font-size: 16px; scrollbar-width: none; }
+main .cmd code::-webkit-scrollbar { display: none; }
+.copy { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--fg-muted); cursor: pointer; transition: color .2s, background-color .2s, transform .12s; }
+.copy:hover { color: var(--fg); }
+.copy:active { transform: scale(.97); }
+.copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.copy .ok { display: none; }
+.copy.done .ok { display: block; color: #5b6551; animation: copy-ok .2s cubic-bezier(.22,1,.36,1); }
+@keyframes copy-ok { from { opacity: 0; transform: scale(.6); } }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none; transition: none; } }
+.copy.done .ic { display: none; }
+main strong { font-weight: 600; }
+
+.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; }
+.footer a:hover { color: var(--red); }
+
+@media (max-width: 620px) {
+  body { font-size: 17px; }
+  .page { width: calc(100% - 40px); }
+  .head { padding-top: 32px; }
+  main { padding: 80px 0; }
+  .lead { font-size: 19px; }
+  section { margin-top: 64px; }
+  main .cmd { padding-left: 14px; }
+  main .cmd code { font-size: 14px; }
+}
+</style>
+</head>
+<body>
+<header class="page head">
+  <a class="mark word" href="/" aria-label="Nio, inici">ni<span class="bot" data-mood="idle" aria-hidden="true"><span class="eyes"><i></i><i></i></span></span></a>
+  <a class="enter" href="/app"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4"/><path d="M9 16l4-4-4-4"/><path d="M13 12H4"/></svg>Entra al panell</a>
+</header>
+
+<main class="page">
+  <h1>Els agents d’IA del teu ordinador, al mòbil.</h1>
+  <p class="lead">Dona feina a Claude Code, Codex, Grok, Antigravity o Ollama des del mòbil. Treballen al teu ordinador, amb els teus comptes. Tu els segueixes en directe i aproves el que facin. És gratuït.</p>
+
+  <section aria-labelledby="com">
+    <h2 id="com">Com funciona</h2>
+    <p>Obre el terminal a la carpeta dels teus projectes i executa:</p>
+    <div class="cmd"><code id="cmd">npx nio-cat</code><button class="copy" type="button" data-copy="npx nio-cat" aria-label="Copia l’ordre"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3"/></svg><svg class="ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></button></div>
+    <p>Escaneja el codi QR que apareix i ja estàs connectat. A casa, per la wifi; amb <code>cloudflared</code>, des de qualsevol lloc. Només cal tenir <a href="https://nodejs.org">Node.js</a>, i cap dada no passa per servidors nostres.</p>
+  </section>
+
+  <section aria-labelledby="limits">
+    <h2 id="limits">Tu decideixes</h2>
+    <p>Cada sessió té el seu nivell de confiança: <strong>només llegir</strong>, <strong>demana permís</strong> abans d’editar o executar, o <strong>via lliure</strong>. Quan l’agent et necessita, t’arriba un avís i ho resols amb un toc.</p>
+  </section>
+
+  <section aria-labelledby="prova">
+    <h2 id="prova">Prova-ho</h2>
+    <p>Sense instal·lar res, amb un ordinador simulat: <a href="/app">obre el panell</a>. També hi trobaràs els teus models d’Ollama i un model petit que funciona dins del mateix mòbil.</p>
+  </section>
+</main>
+
+<footer class="footer">
+  <div class="page">© 2026 nio // un projecte de <a href="https://f.cat">f.cat</a></div>
+</footer>
+<script src="/bot.js" defer></script>
+<script>
+document.addEventListener('click', async (e) => {
+  const b = e.target.closest('[data-copy]'); if (!b) return;
+  try { await navigator.clipboard.writeText(b.dataset.copy); }
+  catch { const r = document.createRange(); r.selectNodeContents(document.getElementById('cmd')); const sel = getSelection(); sel.removeAllRanges(); sel.addRange(r); document.execCommand('copy'); }
+  b.classList.add('done');
+  clearTimeout(b._t); b._t = setTimeout(() => { b.classList.remove('done'); }, 1800);
+});
+</script>
+</body>
+</html>

package/web/manifest.webmanifest

@@ -0,0 +1,17 @@
+{
+  "name": "nio",
+  "short_name": "nio",
+  "description": "Els agents d’IA del teu ordinador, al mòbil.",
+  "lang": "ca",
+  "start_url": "/app",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#f0ede7",
+  "theme_color": "#f0ede7",
+  "icons": [
+    { "src": "/favicon.svg", "sizes": "any", "type": "image/svg+xml" },
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

package/web/sw.js

@@ -0,0 +1,62 @@
+// nio · service worker: obre l'app encara que no hi hagi connexió i mostra els avisos.
+const SHELL = 'nio-shell-v2';
+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) => {
+  e.waitUntil(caches.open(SHELL).then((c) => c.addAll(FILES)).catch(() => {}));
+  self.skipWaiting();
+});
+self.addEventListener('activate', (e) => {
+  e.waitUntil((async () => {
+    for (const k of await caches.keys()) if (k.startsWith('nio-shell-') && k !== SHELL) await caches.delete(k);
+    await self.clients.claim();
+  })());
+});
+
+// Primer la xarxa; si no n'hi ha, la còpia desada.
+self.addEventListener('fetch', (e) => {
+  const url = new URL(e.request.url);
+  if (e.request.method !== 'GET' || url.origin !== location.origin || url.pathname.startsWith('/api/')) return;
+  e.respondWith(
+    fetch(e.request)
+      .then((res) => {
+        if (res.ok && (url.pathname.startsWith('/app') || FILES.includes(url.pathname))) {
+          const copy = res.clone();
+          caches.open(SHELL).then((c) => c.put(e.request, copy));
+        }
+        return res;
+      })
+      .catch(() => caches.match(e.request).then((r) => r || (url.pathname.startsWith('/app') ? caches.match('/app') : undefined)))
+  );
+});
+
+// L'app ens passa l'adreça i la clau de l'ordinador per poder llegir el detall dels avisos.
+self.addEventListener('message', (e) => {
+  if (e.data?.type === 'nio-cfg') {
+    caches.open('nio-cfg').then((c) => c.put('/cfg', new Response(JSON.stringify({ url: e.data.url, token: e.data.token }))));
+  }
+});
+
+// Els avisos arriben buits: el detall es demana directament a l'ordinador.
+self.addEventListener('push', (e) => {
+  e.waitUntil((async () => {
+    let title = 'nio', body = 'Un agent et necessita', session = null;
+    try {
+      const cfg = await (await (await caches.open('nio-cfg')).match('/cfg')).json();
+      const [n] = await (await fetch(`${cfg.url}/api/notices`, { headers: { Authorization: `Bearer ${cfg.token}` } })).json();
+      if (n) { title = n.title; body = n.body; session = n.session; }
+    } catch { /* sense detall: avís genèric */ }
+    await self.registration.showNotification(title, { body, icon: '/icon-192.png', badge: '/icon-192.png', tag: session || 'nio', renotify: true, data: { session } });
+  })());
+});
+
+self.addEventListener('notificationclick', (e) => {
+  e.notification.close();
+  const session = e.notification.data?.session;
+  e.waitUntil((async () => {
+    const wins = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
+    const w = wins.find((c) => new URL(c.url).pathname.startsWith('/app'));
+    if (w) { await w.focus(); if (session) w.postMessage({ type: 'open-session', id: session }); return; }
+    await self.clients.openWindow(session ? `/app#/s/${session}` : '/app');
+  })());
+});