nio-cat 0.9.6 → 0.9.9

package/web/app/style.css

@@ -134,6 +134,9 @@ button.chip:hover { border-color: var(--fg); }
 .chip.running { background: var(--fg); color: var(--bg); border-color: var(--fg); }
 .chip.waiting { background: var(--lemon); border-color: var(--lemon); }
 .chip.error { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
+.chip.usage { gap: 6px; }
+.chip.usage .uw + .uw::before { content: '·'; margin-right: 6px; color: var(--fg-muted); font-weight: 400; }
+.chip.usage .uw[data-hi="1"] { color: var(--red); font-weight: 600; }
 .chip.beta { height: 20px; padding: 0 7px; font-size: 10px; color: var(--fg-muted); }
 .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-in-out infinite; }
 @keyframes pulse { 50% { opacity: .3; } }
@@ -188,6 +191,11 @@ button.chip:hover { border-color: var(--fg); }
 .session-card .last.err { color: var(--red); }
 .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); }
+#termSessions:not(:empty) { margin-bottom: 16px; }
+.old-sessions { margin-top: 8px; }
+.old-sessions > summary { cursor: pointer; padding: 8px 0; list-style: none; }
+.old-sessions > summary::-webkit-details-marker { display: none; }
+.old-sessions > .list { margin-top: 8px; }
 .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); }
 
@@ -718,3 +726,78 @@ html.rd-open, html.rd-open body { overflow: hidden; }
 .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; } }
+
+/* Sense ordinador: seccions de mostra desactivades */
+.panel.off { opacity: .55; }
+.panel.off .btn[disabled] { cursor: not-allowed; }
+.card.off-note { display: flex; flex-direction: row; align-items: center; gap: 12px 16px; flex-wrap: wrap; border-style: dashed; }
+
+/* Primer ordinador: ordre d'instal·lació, passos i botons alineats a la mateixa amplada */
+.first-run > p:first-of-type { max-width: 34em; margin-inline: auto; }
+.first-run .cmd { width: 100%; max-width: 640px; margin: 18px auto 0; text-align: left; }
+.first-run .stepper { margin: 22px auto 20px; }
+.first-run > .muted.small { margin-top: 12px; }
+.first-run > .muted.small { max-width: none; }
+.first-run .stepper { max-width: 680px; }
+@media (max-width: 820px) { .first-run .cmd.big code { white-space: normal; overflow-wrap: anywhere; } }
+
+/* Mòbil: la barra de dalt ja ocupa 56 px, així que la carcassa no ha de fer tota la pantalla (si no, sobra scroll
+   i la conversa puja en obrir-la). El camp de text queda enganxat a baix encara que tingui position: relative més amunt. */
+@media (max-width: 820px) {
+  .shell { min-height: calc(100dvh - 56px - var(--safe-t)); }
+  body.chat-mode .composer { position: sticky; bottom: var(--kb, 0px); }
+}
+/* Referència per mesurar els missatges (offsetTop) dins la conversa. */
+.feed { position: relative; }
+
+/* Totes les seccions, amb controls còmodes de tocar. */
+.more-sections { display: grid; gap: 22px; margin-top: 20px; }
+.more-sections h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
+.more-sections section > div { display: grid; }
+.more-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
+.more-link > span:first-of-type { flex: 1; }
+.more-link > .ico:last-child { width: 14px; color: var(--fg-muted); }
+.more-link:hover, .more-link[aria-current="page"] { background: var(--bg-2); }
+.voice-extras { border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; }
+.voice-extras summary { min-height: 48px; padding-block: 13px; cursor: pointer; font-weight: 600; }
+.voice-extras > div { padding: 6px 0 16px; }
+@media (max-width: 820px) { .tabbar > * { min-height: 48px; } .side nav a { min-height: 46px; } }
+
+/* Llistes i formularis també han d’encaixar amb text llarg o el teclat obert. */
+.side nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+.side > .brand, .side > .foot { flex-shrink: 0; }
+:where(.panel, .card, .stack, .stack-lg, .grid-2, .grid-2 > *, label.f) { min-width: 0; }
+:where(.top, .panel .body, .mem-list, .job, .sheet-in h2, .conn span) { overflow-wrap: anywhere; }
+.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.conn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+:where(button, a, input, textarea, select, summary):focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
+@media (max-width: 820px) {
+  dialog.sheet { max-height: min(92dvh, calc(var(--vvh, 100dvh) - 8px)); }
+  .btn, .btn.sm, .icon-btn, .seg button { min-height: 44px; }
+  input[type="text"], input[type="password"], input[type="url"], input[type="search"], select, textarea.field { font-size: 16px; }
+  .sheet-foot { bottom: calc(-22px - var(--safe-b)); }
+}
+@media (max-width: 520px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
+.sheet-in { position: relative; }
+.sheet-close { position: absolute; top: 14px; right: 14px; z-index: 1; }
+.sheet-in > h2 { padding-right: 42px; }
+.form-error { color: var(--red); font-size: 13px; overflow-wrap: anywhere; }
+dialog.sheet:has(#memForm) { width: min(780px, calc(100% - 32px)); }
+@media (max-width: 820px) {
+  .sheet-close { top: 16px; right: 10px; }
+  dialog.sheet:has(#memForm) { width: 100%; }
+}
+@media (max-width: 520px) {
+  #jobWhen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
+  #jobWhen button { white-space: normal; padding: 6px 8px; }
+}
+@media (max-width: 820px) {
+  dialog.sheet { top: auto; bottom: var(--kb, 0px); margin: 0; }
+}
+
+/* Sessions obertes al terminal de l'ordinador */
+.term-sessions { margin-bottom: 22px; }
+.term-sessions h2.sec { margin: 0 0 8px; }
+.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); }

package/web/index.html

@@ -20,14 +20,19 @@
 <meta property="og:url" content="https://www.nio.cat/">
 <meta property="og:title" content="nio // els teus agents, des del mòbil">
 <meta property="og:description" content="Claude Code i Codex als teus ordinadors, controlats des del mòbil. Personal, gratuït i amb les teves claus.">
-<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 property="og:video" content="https://www.nio.cat/og.mp4">
+<meta property="og:video:secure_url" content="https://www.nio.cat/og.mp4">
+<meta property="og:video:type" content="video/mp4">
+<meta property="og:video:width" content="1920">
+<meta property="og:video:height" content="1080">
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="nio // els teus agents, des del mòbil">
 <meta name="twitter:description" content="Claude Code i Codex als teus ordinadors, controlats des del mòbil. Personal, gratuït i amb les teves claus.">
-<meta name="twitter:image" content="https://www.nio.cat/og.png">
+<meta name="twitter:image" content="https://www.nio.cat/og.jpg">
 <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">

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-v38';
-const FILES = ['/app', '/app/style.css', '/app/app.js', '/app/demo.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
+const SHELL = 'nio-shell-v50';
+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'];
 
 self.addEventListener('install', (e) => {
   e.waitUntil(caches.open(SHELL).then((c) => c.addAll(FILES)).catch(() => {}));