nio-cat 0.3.5 → 0.4.3

package/web/app/index.html

@@ -51,6 +51,7 @@
     <nav id="nav" aria-label="Seccions"></nav>
     <div class="foot">
       <div class="conn" id="sideConn"></div>
+      <a class="kbd" href="#/ordinadors" data-act="help" title="Com es fa"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16v.1"/></svg><span class="l">Com es fa</span></a>
       <button class="kbd" data-act="tour" type="button" title="Tutorial"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.6M12 17.2v.1"/></svg><span class="l">Tutorial</span></button>
       <button class="kbd" data-act="palette" type="button" title="Cerca o fes una acció (⌘K)"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="l">Cerca o fes una acció</span><kbd>⌘K</kbd></button>
     </div>
@@ -67,6 +68,7 @@
   <div class="tour-spot" id="tourSpot"></div>
   <div class="tour-card" id="tourCard" role="dialog" aria-modal="false" aria-labelledby="tourT"></div>
 </div>
+<nav class="tabbar" id="tabbar" aria-label="Navegació"></nav>
 <div class="toasts" id="toasts" aria-live="polite"></div>
 
 <script src="/bot.js"></script>

package/web/app/style.css

@@ -427,3 +427,56 @@ a.card, a.card:hover { text-decoration: none; color: inherit; }
 .copied .tick { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick .38s var(--ease) forwards; }
 @keyframes tick { to { stroke-dashoffset: 0; } }
 @media (prefers-reduced-motion: reduce) { .copied .tick { animation: none; stroke-dashoffset: 0; } }
+
+/* Ordinadors: targetes per nom, estat i accions; passos d'un servidor; barra inferior al mòbil */
+.computers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 8px; }
+.card.computer { display: grid; gap: 14px; cursor: default; }
+.card.computer.active { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
+.c-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); }
+.c-actions { gap: 8px; }
+.chip.ok { color: var(--moss); }
+.sec { font-size: 18px; font-weight: 500; letter-spacing: -.03em; margin: 28px 0 12px; }
+.steps { list-style: none; display: grid; gap: 6px; font-size: 14px; }
+.steps li { display: flex; gap: 8px; align-items: baseline; color: var(--fg-muted); }
+.steps li::before { content: '✓'; color: var(--moss); font-weight: 700; }
+.steps li.on { color: var(--fg); }
+.steps li.on::before { content: '…'; color: var(--fg-muted); }
+.steps li.err { color: var(--red); }
+.steps li.err::before { content: '✕'; color: var(--red); }
+video.scan { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #000; }
+.tabbar { display: none; }
+@media (max-width: 820px) {
+  .burger { display: none; }
+  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 8px calc(6px + var(--safe-b)); background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
+  .tabbar > * { flex: 1; position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 0; background: none; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--fg-muted); text-decoration: none; }
+  .tabbar [aria-current="page"] { color: var(--fg); }
+  .tabbar .badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
+  body:not(.no-tabs):not(.kb) .main { padding-bottom: calc(64px + var(--safe-b)); }
+  body.no-tabs .tabbar, body.kb .tabbar { display: none; }
+  .computers { grid-template-columns: 1fr; }
+}
+
+/* Ajuda («Com es fa») */
+.help { margin-top: 28px; }
+.help details { border-bottom: 1px solid var(--border); }
+.help details:last-of-type { border-bottom: 0; margin-bottom: 14px; }
+.help summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
+.help summary::-webkit-details-marker { display: none; }
+.help summary::after { content: '+'; color: var(--fg-muted); font-weight: 400; }
+.help details[open] summary::after { content: '−'; }
+.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; }
+.empty .stepper { text-align: left; max-width: 640px; margin: 16px auto 18px; }
+a.kbd { text-decoration: none; color: inherit; }
+
+/* Comandes amb «/» */
+.composer { position: relative; }
+.slash { position: absolute; left: 24px; right: 24px; bottom: 100%; max-width: 760px; margin: 0 auto 6px; max-height: min(320px, 45dvh); overflow-y: auto; overscroll-behavior: contain; display: grid; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); box-shadow: 0 10px 30px rgba(39, 34, 36, .12); z-index: 5; }
+.slash button { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; text-align: left; padding: 9px 10px; border: 0; border-radius: 9px; background: none; }
+.slash button[aria-selected="true"] { background: var(--bg-2); }
+.slash .n { font-weight: 600; }
+.slash .h { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); font-size: 13px; }
+.slash .t { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--bg-2); color: var(--fg-muted); }
+.slash .t.ag { background: color-mix(in srgb, var(--lemon) 60%, var(--bg)); color: var(--fg); }
+@media (max-width: 820px) { .slash { left: 12px; right: 12px; } .slash .h { grid-column: 1 / -1; grid-row: 2; } }

package/web/index.html

@@ -107,9 +107,11 @@ main strong { font-weight: 600; }
 
   <section aria-labelledby="com">
     <h2 id="com">Com funciona</h2>
-    <p>Obre el terminal a la carpeta dels teus projectes i executa:</p>
+    <p><strong>1. Al teu ordinador.</strong> 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>
+    <p>S’obre nio.cat ja connectat. Només cal <a href="https://nodejs.org">Node.js</a>.</p>
+    <p><strong>2. Amb un servidor (opcional).</strong> A nio.cat, <em>Ordinadors → Afegeix ordinador → Servidor (SSH)</em>, escrius <code>usuari@servidor</code> i nio hi engega Claude Code i la resta. No cal obrir ports.</p>
+    <p><strong>3. Al mòbil.</strong> A l’ordinador, prem <em>Continua al mòbil</em>. Al mòbil, obre <a href="/app">nio.cat/app</a>, escaneja el QR o enganxa el codi, i ja ho controles. Des de qualsevol xarxa amb <code>cloudflared</code>; sense ell, per la mateixa wifi. Cap dada no passa per servidors nostres.</p>
   </section>
 
   <section aria-labelledby="limits">

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-v2';
+const SHELL = 'nio-shell-v3';
 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) => {