nio-cat 0.3.2 → 0.3.4

package/bin/nio.js

@@ -76,8 +76,10 @@ function canOpenBrowser() {
 
 function openDashboard() {
   const local = `http://127.0.0.1:${cfg.port}`;
-  const link = pairLink(local, local, cfg.token);
-  if (canOpenBrowser() && openUrl(link)) console.log(`  ${c.dim('Panell:')}   ${local}  ${c.dim('(obert al navegador; --no-open per evitar-ho)')}`);
+  // Per defecte s'obre l'app en línia (sempre al dia), ja connectada a aquest ordinador. Amb --local, la còpia que porta nio.
+  const online = !flags.local;
+  const link = pairLink(online ? flags.app || cfg.app : local, local, cfg.token);
+  if (canOpenBrowser() && openUrl(link)) console.log(`  ${c.dim('Panell:')}   ${online ? (flags.app || cfg.app) + '/app' : local}  ${c.dim('(obert al navegador; --no-open per evitar-ho' + (online ? '; --local per fer servir la còpia d\'aquest ordinador' : '') + ')')}`);
   else console.log(`  ${c.dim('Panell:')}   ${link}`);
 }
 
@@ -288,6 +290,7 @@ async function start() {
     --no-tunnel         Només des d'aquest ordinador
     --port <n>          Port local (7717 si no dius res)
     --no-open           No obris el panell al navegador d'aquest ordinador
+    --local             Obre la còpia del panell d'aquest ordinador (si el navegador bloqueja nio.cat, p. ex. Safari)
     --open              Obre al navegador la pàgina del codi QR
   nio pair              Mostra el codi QR una altra vegada
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nio-cat",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "nio: fes servir Claude Code, Codex, Grok, Antigravity i Ollama del teu ordinador des del mòbil.",
   "license": "MIT",
   "author": "f.cat",

package/web/app/app.js

@@ -28,6 +28,7 @@ const ICON = {
   more: '<circle cx="5" cy="12" r="1.3" fill="currentColor"/><circle cx="12" cy="12" r="1.3" fill="currentColor"/><circle cx="19" cy="12" r="1.3" fill="currentColor"/>',
   refresh: '<path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7"/>', back: '<path d="M15 5l-7 7 7 7"/>',
   bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+  check: '<path class="tick" d="M5 12.5l4.5 4.5L19 7.5"/>',
   copy: '<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"/>'
 };
 const AGENT_NAMES = { claude: 'Claude Code', codex: 'Codex', grok: 'Grok', antigravity: 'Antigravity', ollama: 'Ollama', demo: 'Demo', browser: 'Xat local' };
@@ -139,7 +140,7 @@ async function connect() {
   } catch (e) {
     if (ctrl.signal.aborted) return;
     state.connected = false;
-    state.lastError = e.message === 'Failed to fetch' || e.name === 'TypeError' ? 'No arribo a l’ordinador' : e.message;
+    state.lastError = e.message === 'Failed to fetch' || e.name === 'TypeError' ? (location.protocol === 'https:' && /^http:\/\/(127\.0\.0\.1|localhost)/.test(m.url) ? 'El navegador no deixa que aquesta web parli amb aquest ordinador. Prova Chrome, o engega nio amb --local.' : 'No arribo a l’ordinador') : e.message;
     render();
     if (e.fatal) return;
     setTimeout(() => machine() && !ctrl.signal.aborted && connect(), Math.min(15000, 1000 * 2 ** retry++));
@@ -447,10 +448,17 @@ function renderSessionHead() {
   bar.innerHTML = `<span class="chip"><span class="agent-tag" data-agent="${esc(s.agent)}">${esc(AGENT_NAMES[s.agent] || s.agent)}</span></span>
     ${ag?.noModes ? '' : `<button class="chip" data-act="mode" type="button">${esc(MODES[s.mode]?.label || s.mode)}</button>`}
     <span class="chip mono">${esc(basename(s.cwd))}</span>
-    ${s.model ? `<span class="chip mono">${esc(s.model)}</span>` : ''}
+    <button class="chip mono" data-act="model" type="button" title="Canvia de model">${esc(s.model || 'Model per defecte')}</button>
     ${s.cost ? `<span class="chip mono">${s.cost.toFixed(2)} $</span>` : ''}
     ${stateChip(s)}`;
 }
+// Alçada del camp de text segons el contingut, sense barra de desplaçament fins al límit.
+function autogrow(ta, max = 180) {
+  ta.style.height = 'auto';
+  const h = ta.scrollHeight + (ta.offsetHeight - ta.clientHeight);
+  ta.style.height = `${Math.min(h, max)}px`;
+  ta.style.overflowY = h > max ? 'auto' : 'hidden';
+}
 const nearBottom = (f) => f.scrollHeight - f.scrollTop - f.clientHeight < 140;
 function putEvent(e, scroll = true) {
   const feed = $('#feed'); if (!feed) return;
@@ -518,7 +526,7 @@ function renderComposer() {
   box.dataset.busy = String(busy);
   box.innerHTML = `<div class="inner"><textarea rows="1" id="msg" placeholder="${busy ? 'L’agent està treballant…' : 'Escriu a l’agent…'}" enterkeyhint="send" aria-label="Missatge"></textarea><button class="send ${busy ? 'stop' : ''}" id="sendBtn" type="button" aria-label="${busy ? 'Atura l’agent' : 'Envia'}">${svg(busy ? ICON.stop : ICON.send)}</button></div>`;
   const ta = $('#msg'); ta.value = prev;
-  const grow = () => { ta.style.height = 'auto'; ta.style.height = `${Math.min(ta.scrollHeight, 180)}px`; };
+  const grow = () => autogrow(ta);
   grow(); ta.addEventListener('input', grow);
   const send = async () => {
     const text = ta.value.trim(); if (!text || !s) return;
@@ -664,6 +672,28 @@ async function newSessionSheet(preset = {}) {
     draw();
   }, 'wiz');
 }
+// Canvia el model d'una sessió. Val a partir del pròxim missatge.
+const COST_FROM = {
+  claude: 'El teu compte de Claude Code a l’ordinador (subscripció o clau d’API que hi tinguis)',
+  codex: 'El teu compte de Codex (ChatGPT o clau d’OpenAI) a l’ordinador',
+  grok: 'El teu compte de Grok a l’ordinador',
+  antigravity: 'El teu compte de Google a l’ordinador',
+  ollama: 'Res: el model funciona al teu ordinador'
+};
+const MODEL_PICKS = { claude: [['opus', 'Opus', 'El més capaç'], ['sonnet', 'Sonnet', 'Equilibrat'], ['haiku', 'Haiku', 'El més ràpid']] };
+async function modelSheet(s) {
+  const picks = s.agent === 'ollama'
+    ? (await api('/api/ollama/models').catch(() => [])).map((m) => [m.name, m.name, [m.params, m.quant, bytes(m.size)].filter(Boolean).join(' · ')])
+    : MODEL_PICKS[s.agent] || [];
+  const row = (v, name, note) => `<button class="card" type="button" data-model="${esc(v)}" aria-pressed="${(s.model || '') === v}"><b>${esc(name)}</b>${note ? `<div class="muted small" style="margin-top:4px">${esc(note)}</div>` : ''}</button>`;
+  openSheet(`<h2>Model</h2><p class="muted small">${esc(AGENT_NAMES[s.agent] || s.agent)}. El canvi s’aplica a partir del pròxim missatge.</p>
+    <div class="list">${row('', 'Per defecte', 'El que l’agent faci servir sol')}${picks.map((x) => row(...x)).join('')}</div>
+    <form class="pair-form" id="modelForm"><input type="text" id="modelFree" placeholder="Un altre model (nom exacte)" value="${picks.some((x) => x[0] === s.model) ? '' : esc(s.model || '')}" autocapitalize="off" spellcheck="false" aria-label="Nom del model"><button class="btn ink" type="submit">Desa</button></form>`, (sh) => {
+    const save = async (model) => { try { const sum = await api(`/api/sessions/${s.id}`, { method: 'PATCH', body: { model } }); state.sessions.set(s.id, sum); closeSheet(); renderSessionHead(); } catch (e) { toast(e.message); } };
+    $$('[data-model]', sh).forEach((b) => (b.onclick = () => save(b.dataset.model)));
+    $('#modelForm', sh).onsubmit = (e) => { e.preventDefault(); e.stopPropagation(); save($('#modelFree', sh).value.trim()); };
+  });
+}
 function modeSheet(s) {
   openSheet(`<h2>Permisos</h2><div class="list">${Object.entries(MODES).map(([k, m]) => `<button class="card" type="button" data-m="${k}" style="${k === s.mode ? 'border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)' : ''}"><b>${m.label}</b><div class="muted small" style="margin-top:4px">${esc(modeHelp(s.agent, k))}</div></button>`).join('')}</div><p class="muted small">El canvi s’aplica a partir del pròxim missatge.</p>`, (sh) => {
     $$('[data-m]', sh).forEach((b) => (b.onclick = async () => {
@@ -744,7 +774,7 @@ async function gitSheet(id) {
 function sessionOptions(id) {
   const s = state.sessions.get(id); if (!s) return;
   openSheet(`<h2>${esc(s.title || 'Sessió')}</h2>
-    <dl class="kv"><dt>Agent</dt><dd>${esc(AGENT_NAMES[s.agent] || s.agent)}</dd><dt>Carpeta</dt><dd class="mono">${esc(s.cwd)}</dd><dt>Permisos</dt><dd>${esc(MODES[s.mode]?.label || '')}</dd><dt>Creada</dt><dd>${new Date(s.created).toLocaleString('ca')}</dd></dl>
+    <dl class="kv"><dt>Agent</dt><dd>${esc(AGENT_NAMES[s.agent] || s.agent)}</dd><dt>Carpeta</dt><dd class="mono">${esc(s.cwd)}</dd><dt>Permisos</dt><dd>${esc(MODES[s.mode]?.label || '')}</dd><dt>Model</dt><dd class="mono">${esc(s.model || 'per defecte')}</dd><dt>Es gasta de</dt><dd>${esc(COST_FROM[s.agent] || 'El compte de l’agent a l’ordinador')}. nio no fa cap crida pel seu compte.</dd><dt>Creada</dt><dd>${new Date(s.created).toLocaleString('ca')}</dd></dl>
     <label class="f"><span>Nom de la sessió</span><input type="text" id="renameIn" value="${esc(s.title)}" maxlength="120"></label>
     <button class="btn" data-act="git" type="button">Git i GitHub…</button>
     <div class="row between"><button class="btn danger" id="delBtn" type="button">Esborra la sessió</button><button class="btn ink" id="renameBtn" type="button">Desa</button></div>`, (sh) => {
@@ -932,7 +962,7 @@ function bindLocal() {
   for (const m of local.messages) feed.appendChild(m.role === 'user' ? el(`<div class="msg-user">${esc(m.content)}</div>`) : el(`<div class="msg-ai">${md(stripThink(m.content))}</div>`));
   feed.scrollTop = feed.scrollHeight;
   const ta = $('#lmsg');
-  ta.addEventListener('input', () => { ta.style.height = 'auto'; ta.style.height = `${Math.min(ta.scrollHeight, 180)}px`; });
+  ta.addEventListener('input', () => autogrow(ta));
   ta.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey && !isTouch) { e.preventDefault(); sendLocal(); } });
   $('#lsend').onclick = () => (local.busy ? stopLocal() : sendLocal());
   setLocalBusy(local.busy);
@@ -966,7 +996,7 @@ async function loadLocal(id) {
 async function sendLocal() {
   const ta = $('#lmsg'), text = ta.value.trim();
   if (!text || local.busy) return;
-  ta.value = ''; ta.style.height = 'auto';
+  ta.value = ''; autogrow(ta);
   const feed = $('#lfeed'); if (!local.messages.length) feed.innerHTML = '';
   local.messages.push({ role: 'user', content: text });
   feed.appendChild(el(`<div class="msg-user">${esc(text)}</div>`));
@@ -992,7 +1022,15 @@ async function sendLocal() {
 document.addEventListener('click', async (e) => {
   const a = e.target.closest('[data-act], [data-copy], [data-decide], [data-machine], [data-lm]');
   if (!a) return;
-  if (a.dataset.copy) { try { await navigator.clipboard.writeText(a.dataset.copy); toast('Copiat'); } catch { toast(a.dataset.copy); } return; }
+  if (a.dataset.copy) {
+    try { await navigator.clipboard.writeText(a.dataset.copy); } catch { return toast(a.dataset.copy); }
+    if (a.dataset.copied) return;
+    // El botó mostra una marca animada i «Copiat» un moment.
+    const html = a.innerHTML; a.dataset.copied = '1'; a.classList.add('copied');
+    a.innerHTML = `${svg(ICON.check)}${/\S/.test(a.textContent) ? 'Copiat' : ''}`;
+    setTimeout(() => { a.innerHTML = html; a.classList.remove('copied'); delete a.dataset.copied; }, 1700);
+    return;
+  }
   if (a.dataset.decide) return decide(a.closest('[data-approval]'), a.dataset.decide);
   if (a.dataset.machine != null) { closeSheet(); store.active = Number(a.dataset.machine); state.ollama = null; state.sessions.clear(); state.approvals.clear(); state.events.clear(); state.loaded.clear(); state.connected = false; state.info = null; connect(); return render(); }
   if (a.dataset.lm) { if (local.loading) return; LS.set('nio.localModel', a.dataset.lm); return render(); }
@@ -1004,6 +1042,7 @@ document.addEventListener('click', async (e) => {
     case 'ollama-del': return deleteModel(a.dataset.name);
     case 'ollama-chat': try { state.info = await api('/api/info?refresh=1'); } catch { /* res */ } return newSessionSheet({ agent: 'ollama', model: a.dataset.name });
     case 'retry': return connect();
+    case 'model': { const s = state.sessions.get(state.route.id); if (s) modelSheet(s); return; }
     case 'mode': { const s = state.sessions.get(state.route.id); if (s) modeSheet(s); return; }
     case 'session-more': return sessionOptions(state.route.id);
     case 'refresh-agents': try { state.info = await api('/api/info?refresh=1'); render(); toast('Agents actualitzats'); } catch (err) { toast(err.message); } return;

package/web/app/style.css

@@ -419,3 +419,11 @@ dialog.sheet.wiz .sheet-in { padding: 0; gap: 0; flex: 1; min-height: 0; display
 #fsForm input { flex: 1; min-width: 0; }
 .pair-code { display: grid; gap: 4px; text-align: center; }
 .pair-code b { font-size: 30px; letter-spacing: .14em; font-weight: 600; cursor: copy; }
+
+/* Enllaços-targeta sense subratllat, camps de text sense barra mínima, animació de «Copiat» */
+a.card, a.card:hover { text-decoration: none; color: inherit; }
+.composer textarea { overflow-y: hidden; }
+.copied { color: var(--moss); }
+.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; } }