nio-cat 0.9.10 → 0.9.13

package/web/app/style.css

@@ -304,6 +304,15 @@ dialog.sheet[open] { animation: pop .22s var(--ease); }
 #palette li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
 #palette li[aria-selected="true"] { background: var(--bg-2); }
 #palette li span { color: var(--fg-muted); font-size: 12px; }
+/* Al mòbil, la paleta és un full de baix com els altres, i es tanca lliscant cap avall. */
+@media (max-width: 820px) {
+  #palette { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0; padding-bottom: var(--safe-b); max-height: 82dvh; }
+  #palette[open] { display: flex; flex-direction: column; animation: sheet-up .3s var(--ease); }
+  #palette::before { content: ''; display: block; width: 36px; height: 4px; margin: 8px auto 2px; border-radius: 4px; background: var(--border); flex: none; }
+  #palette input { border-radius: 0; flex: none; }
+  #palette ul { max-height: none; flex: 1; min-height: 0; }
+  #palette li { min-height: 46px; align-items: center; font-size: 15px; }
+}
 
 .tour { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
 .tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px color-mix(in srgb, var(--fg) 42%, transparent), 0 0 0 2px var(--white) inset; transition: left .35s var(--ease), top .35s var(--ease), width .35s var(--ease), height .35s var(--ease); }
@@ -458,7 +467,9 @@ dialog.sheet.wiz .sheet-in { padding: 0; gap: 0; flex: 1; min-height: 0; display
 .fs-pick b { overflow-wrap: anywhere; }
 .fs-list { max-height: none; }
 @media (max-width: 820px) {
-  dialog.sheet.wiz { height: min(92dvh, calc(var(--vvh, 100dvh) - 8px)); }
+  /* Al mòbil, els assistents (Nova sessió, Afegeix ordinador…) fan l'alçada del contingut, no la de tota la pantalla. */
+  dialog.sheet.wiz { height: auto; max-height: min(92dvh, calc(var(--vvh, 100dvh) - 8px - var(--safe-t))); }
+  dialog.sheet.wiz .sheet-in, dialog.sheet.wiz .wiz-body { flex: 0 1 auto; }
   .wiz-head { padding: 10px 18px 8px; }
   .wiz-body { padding: 4px 18px 14px; }
   .wiz-foot { padding: 12px 18px calc(14px + var(--safe-b)); }
@@ -550,7 +561,14 @@ a.kbd { text-decoration: none; color: inherit; }
 .composer .mic.wait { opacity: .5; }
 
 /* ---------- Ordre i text net ---------- */
-.grid2.one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
+.grid2.one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
+.cols { max-width: 760px; }
+/* Pantalla ampla: els panells d'una sola columna (Ajustos, Ordinadors, Pantalla) es reparteixen en dues, sense forats. */
+@media (min-width: 1180px) {
+  .grid2.one, .cols { max-width: none; }
+  .cols, .grid2.one > .stack { display: block; columns: 2; column-gap: 16px; }
+  .cols > *, .grid2.one > .stack > * { break-inside: avoid; margin: 0 0 16px; }
+}
 .top h1, .top p, .panel.empty h2, .panel.empty p, .stepper p, .stepper b, .help-body p, .card p, .sheet h2, .sheet p, .tour-card h3, .tour-card p, .muted.small { text-wrap: balance; }
 @media (max-width: 820px) {
   .side nav a[href="#/models"] { display: none; }
@@ -717,7 +735,7 @@ html.rd-open, html.rd-open body { overflow: hidden; }
 @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 { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b, 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; }
@@ -732,7 +750,7 @@ html.rd-open, html.rd-open body { overflow: hidden; }
 #jobMinsU { flex: 1; }
 
 /* Demo: avís d'ordinador simulat */
-.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 16px 40px 0; padding: 10px 12px 10px 16px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--panel); font-size: 13px; }
+.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 16px 40px 0; max-width: 1000px; padding: 10px 12px 10px 16px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--panel); font-size: 13px; }
 .demo-bar b { color: var(--accent); }
 body.chat-mode .demo-bar, body.board-mode .demo-bar { display: none; }
 @media (max-width: 820px) { .demo-bar { margin: 12px 16px 0; } }
@@ -814,3 +832,15 @@ dialog.sheet:has(#memForm) { width: min(780px, calc(100% - 32px)); }
 .term-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border-style: dashed; }
 .term-card:disabled { opacity: .6; cursor: progress; }
 .term-go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--fg); }
+
+/* Pas a pas de la clau d'ElevenLabs */
+.el-guide { margin: -4px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); font-size: 13.5px; }
+.el-guide summary { cursor: pointer; font-weight: 600; }
+.el-guide ol { margin: 10px 0 6px; padding-left: 20px; display: grid; gap: 8px; line-height: 1.45; }
+.el-guide ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 4px; }
+.el-guide a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+.el-on, .el-off { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 600; }
+.el-on { background: color-mix(in srgb, var(--moss) 18%, transparent); color: var(--moss); }
+.el-off { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg-muted); }
+.linkish { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
+.main:has(.nt) .demo-bar { max-width: 1160px; }

package/web/board.css

@@ -109,7 +109,7 @@
 .bd-chat .chips::-webkit-scrollbar { display: none; }
 .bd-chat .chip-s { flex: none; scroll-snap-align: start; max-width: 260px; box-sizing: border-box; height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 12px; line-height: 30px; text-align: center; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font-size: 12px; font-weight: 500; cursor: pointer; }
 .bd-chat .chip-s:hover { border-color: var(--fg); }
-.bd-chat .cin { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
+.bd-chat .cin { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px calc(14px + var(--safe-b, 0px)); border-top: 1px solid var(--border); }
 .bd-chat .cin textarea { flex: 1; min-height: 42px; max-height: 140px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); resize: none; font: inherit; font-size: 14px; line-height: 1.4; outline: none; }
 .bd-chat .cin textarea:focus { border-color: var(--fg); }
 .bd-chat .send { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; background: var(--fg); color: var(--bg); cursor: pointer; }
@@ -118,9 +118,9 @@
 
 @media (max-width: 1100px) { .board-root { --chat-w: 320px; } }
 @media (max-width: 820px) {
-  .board-root { height: calc(100dvh - 56px - env(safe-area-inset-top)); }
+  .board-root { height: calc(100dvh - 56px - var(--safe-t, 0px)); }
   .chat-open .bd-tools, .chat-open .bd-right { transform: none; }
-  .bd-tools { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 10px; right: 10px; transform: none; overflow-x: auto; scrollbar-width: none; }
+  .bd-tools { top: auto; bottom: calc(12px + var(--safe-b, 0px)); left: 10px; right: 10px; transform: none; overflow-x: auto; scrollbar-width: none; }
   .bd-tools::-webkit-scrollbar { display: none; }
   .bd .tb { width: 40px; height: 40px; flex: none; }
   .bd .tb small { display: none; }
@@ -131,7 +131,7 @@
   .bd .chat-t > span:not(.bot) { display: none; }
   .only-m { display: grid !important; }
   .bd-style { display: none; }
-  .style-open .bd-style:not([hidden]) { display: grid; left: 10px; right: 10px; top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; grid-template-columns: 1fr 1fr; }
+  .style-open .bd-style:not([hidden]) { display: grid; left: 10px; right: 10px; top: auto; bottom: calc(70px + var(--safe-b, 0px)); width: auto; grid-template-columns: 1fr 1fr; }
   .bd-help .cols { grid-template-columns: 1fr; }
   .bd-chat { position: absolute; top: auto; left: 0; right: 0; bottom: 0; z-index: 9; width: auto; height: min(78%, 600px); border: 0; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; transform: translateY(105%); transition: transform .34s var(--bd-ease), visibility 0s linear .34s; box-shadow: 0 -20px 50px -30px color-mix(in srgb, var(--fg) 55%, transparent); }
   .chat-open .bd-chat { transform: none; transition: transform .34s var(--bd-ease), visibility 0s; }
@@ -145,7 +145,7 @@
   .chat-open .bd-chat { transform: none; transition: transform .34s var(--bd-ease), visibility 0s; }
   .bd-chat header::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--border); }
   .chat-open .bd-tools, .chat-open .bd-right { transform: none; }
-  .bd-tools { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 10px; right: 10px; transform: none; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
+  .bd-tools { top: auto; bottom: calc(12px + var(--safe-b, 0px)); left: 10px; right: 10px; transform: none; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
   .bd-tools::-webkit-scrollbar { display: none; }
   .bd .tb { flex: none; }
   .bd .tb small { display: none; }
@@ -156,7 +156,7 @@
   .bd .chat-t > span:not(.bot) { display: none; }
   .bd .tb.only-m { display: grid !important; }
   .bd-style { display: none; }
-  .style-open .bd-style:not([hidden]) { display: grid; left: 10px; right: 10px; top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; grid-template-columns: 1fr 1fr; }
+  .style-open .bd-style:not([hidden]) { display: grid; left: 10px; right: 10px; top: auto; bottom: calc(70px + var(--safe-b, 0px)); width: auto; grid-template-columns: 1fr 1fr; }
 }
 @container stage (max-width: 440px) {
   .bd .tb[data-tool="hand"], .bd .tb[data-tool="line"], .bd .tb[data-bd="lock"] { display: none; }
@@ -181,7 +181,7 @@
   .bd-chat header { padding-top: 22px; }
   .bd-chat .msgs { overscroll-behavior: contain; }
   .bd-chat .cin textarea { font-size: 16px; }
-  .bd-chat .cin { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
+  .bd-chat .cin { padding-bottom: calc(12px + var(--safe-b, 0px)); }
 }
 @container stage (max-width: 720px) {
   .bd-scrim { display: block; position: absolute; inset: 0; z-index: 8; border: 0; background: color-mix(in srgb, var(--fg) 30%, transparent); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
@@ -232,10 +232,10 @@
 /* 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 { bottom: calc(6px + var(--safe-b, 0px)); 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); }
+  .style-open .bd-style:not([hidden]) { bottom: calc(58px + var(--safe-b, 0px)); 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/index.html

@@ -218,6 +218,7 @@ main { padding-bottom: 8px; }
   <section aria-labelledby="que">
     <div class="sec-head"><span class="eyebrow">Què hi pots fer</span><h2 id="que">Tot el que necessites per treballar amb agents</h2></div>
     <div class="grid">
+      <article class="card big c-lemon"><div class="big-l"><span class="tag">Notes</span><h3>Classe o reunió, apuntada sola</h3><p>Grava amb el micròfon del mòbil o de l’ordinador i Whisper ho transcriu a l’ordinador mentre es parla. Cada 4 o 5 minuts, un model en fa apunts; quan acabes, surt el resum de tot.</p><p class="muted">Tries l’idioma (català, castellà o anglès) i el model. L’àudio no surt dels teus ordinadors.</p></div><dl class="rows stack"><div><dt><strong>En directe</strong></dt><dd>La transcripció apareix cada 20 segons, al costat dels apunts.</dd></div><div><dt><strong>Classe</strong></dt><dd>Conceptes clau, punts importants i preguntes per repassar.</dd></div><div><dt><strong>Reunió</strong></dt><dd>Resum, decisions, tasques amb qui se’n fa càrrec i temes oberts.</dd></div><div><dt><strong>App d’Android</strong></dt><dd>Continua gravant amb la pantalla bloquejada, i si es talla la connexió guarda els trossos fins que torna.</dd></div></dl></article>
       <article class="card c-blue"><span class="tag">Agents</span><h3>Sessions en directe</h3><p>Claude Code, Codex, Grok i Antigravity a qualsevol dels teus ordinadors. Tries la carpeta i els permisos, i la resposta arriba mentre treballa.</p></article>
       <article class="card c-rose"><span class="tag">Seguretat</span><h3>Aprovacions</h3><p>Abans d’editar, executar o clicar res, te’n demana permís amb el motiu. Ho aproves o ho rebutges amb un toc, i tot queda registrat.</p></article>
       <article class="card c-lilac"><span class="tag">Connexió</span><h3>Avisos al mòbil</h3><p>Una notificació quan un agent et demana permís o acaba. Arriba buida: el detall el demana el mòbil directament a l’ordinador.</p></article>
@@ -230,6 +231,9 @@ main { padding-bottom: 8px; }
       <article class="card c-blue"><span class="tag">Agents</span><h3>Git i GitHub</h3><p>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.</p></article>
       <article class="card c-lilac"><span class="tag">Connexió</span><h3>Telegram i veu</h3><p>Parla amb el teu bot o amb notes de veu, aprova amb un botó i escolta les respostes. Dictes gratis amb Whisper, que funciona a l’ordinador: l’àudio no en surt.</p></article>
       <article class="card c-green"><span class="tag">Xat local</span><h3>Ollama i xat local</h3><p>Fes servir models gratuïts a l’ordinador, o un model petit dins del navegador del mòbil, sense connexió.</p></article>
+      <article class="card c-peach"><span class="tag">Notes</span><h3>Notes i veu</h3><p>Notes amb llistes, colors i etiquetes, guardades a l’ordinador. Dicta-les o adjunta-hi àudio i es transcriu; llisca una nota per arxivar-la. Des de l’ordinador, pots fer servir el mòbil com a micròfon.</p></article>
+      <article class="card c-rose"><span class="tag">Agents</span><h3>Truca a en Nio</h3><p>Parla amb en Nio en temps real (ElevenLabs, amb la teva clau): et diu com van les sessions, li encarregues feina i aproves de paraula. La conversa surt en directe, paraula per paraula.</p></article>
+      <article class="card c-blue"><span class="tag">Agents</span><h3>Continua les sessions del terminal</h3><p>Les converses de Claude Code obertes al terminal de l’ordinador surten a Sessions. Toca’n una i continua-la des del mòbil amb tot l’historial.</p></article>
     </div>
   </section>
 

package/web/sw.js

@@ -1,6 +1,6 @@
 // nio · service worker: obre l'app encara que no hi hagi connexió i mostra els avisos.
-const SHELL = 'nio-shell-v51';
-const FILES = ['/app', '/app/style.css', '/app/notes.css', '/app/call.css', '/app/app.js', '/app/notes.js', '/app/call.js', '/app/demo.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
+const SHELL = 'nio-shell-v59';
+const FILES = ['/app', '/app/style.css', '/app/notes.css', '/app/call.css', '/app/app.js', '/app/notes.js', '/app/notes-live.js', '/app/call.js', '/app/demo.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
 
 self.addEventListener('install', (e) => {
   e.waitUntil(caches.open(SHELL).then((c) => c.addAll(FILES)).catch(() => {}));