nio-cat 0.4.1 → 0.4.3

package/bin/nio.js

@@ -74,12 +74,14 @@ function canOpenBrowser() {
   return true;
 }
 
+let panelOpened = false;
 function openDashboard() {
   const local = `http://127.0.0.1:${cfg.port}`;
   // 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' : '') + ')')}`);
+  // &qr=1: el panell mostra el QR per al mòbil tot just obrir-se, a la mateixa pestanya.
+  const link = pairLink(online ? flags.app || cfg.app : local, local, cfg.token) + '&qr=1';
+  if (canOpenBrowser() && openUrl(link)) { panelOpened = true; 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}`);
 }
 
@@ -95,8 +97,7 @@ async function showPair(publicUrl) {
     console.log(`\n  ${c.b('Escaneja aquest codi amb el mòbil')}\n`);
     console.log(terminalQr(qrLink, { margin }));
   } else {
-    console.log(`\n  ${c.warn('El terminal és massa petit per al QR.')} Fes-lo més gran o obre ${file}`);
-    if (canOpenBrowser()) openUrl(file);
+    console.log(`\n  ${c.warn('El terminal és massa petit per al QR.')} ${panelOpened ? 'El tens al panell del navegador.' : 'Fes-lo més gran, o obre el panell i prem «Continua al mòbil».'}`);
   }
   console.log(`\n  ${c.b('Codi:')} ${code}`);
   console.log(c.dim('  Copia\'l i enganxa\'l a Sessions → Tria un ordinador.'));

package/package.json

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

package/src/commands.js

@@ -0,0 +1,51 @@
+'use strict';
+// Comandes pròpies de cada agent que es poden escriure amb «/» a la sessió.
+// Claude Code: les teves comandes (~/.claude/commands i .claude/commands del projecte) i les skills.
+// Es passen a l'agent tal qual («/nom arguments»); el mode d'impressió les entén.
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+function frontmatter(file) {
+  let txt = '';
+  try { txt = fs.readFileSync(file, 'utf8').slice(0, 4000); } catch { return {}; }
+  const m = txt.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+  const out = {};
+  if (m) for (const l of m[1].split('\n')) { const kv = l.match(/^([\w-]+):\s*(.*)$/); if (kv) out[kv[1]] = kv[2].trim().replace(/^["']|["']$/g, ''); }
+  if (!out.description) {
+    const first = txt.replace(/^---[\s\S]*?---\s*/, '').split('\n').map((l) => l.trim()).find((l) => l && !l.startsWith('#'));
+    if (first) out.description = first;
+  }
+  return out;
+}
+
+function listDir(dir) {
+  try { return fs.readdirSync(dir, { withFileTypes: true }); } catch { return []; }
+}
+
+function claudeCommands(cwd) {
+  const out = new Map();
+  const bases = [path.join(os.homedir(), '.claude'), cwd && path.join(cwd, '.claude')].filter(Boolean);
+  for (const base of bases) {
+    // Comandes: commands/nom.md i commands/espai/nom.md (→ «espai:nom»)
+    const cdir = path.join(base, 'commands');
+    for (const e of listDir(cdir)) {
+      if (e.isFile() && e.name.endsWith('.md')) { const n = e.name.slice(0, -3); out.set(n, { name: n, hint: frontmatter(path.join(cdir, e.name)).description || '', kind: 'comanda' }); }
+      else if (e.isDirectory()) for (const f of listDir(path.join(cdir, e.name))) if (f.isFile() && f.name.endsWith('.md')) { const n = `${e.name}:${f.name.slice(0, -3)}`; out.set(n, { name: n, hint: frontmatter(path.join(cdir, e.name, f.name)).description || '', kind: 'comanda' }); }
+    }
+    // Skills: skills/nom/SKILL.md
+    const sdir = path.join(base, 'skills');
+    for (const e of listDir(sdir)) {
+      if (!e.isDirectory() && !e.isSymbolicLink()) continue;
+      const fm = frontmatter(path.join(sdir, e.name, 'SKILL.md'));
+      if (fm.description || fs.existsSync(path.join(sdir, e.name, 'SKILL.md'))) { const n = fm.name || e.name; if (/^[\w:.-]+$/.test(n)) out.set(n, { name: n, hint: fm.description || '', kind: 'skill' }); }
+    }
+  }
+  return [...out.values()].map((c) => ({ ...c, hint: c.hint.slice(0, 110) })).sort((a, b) => a.name.localeCompare(b.name)).slice(0, 150);
+}
+
+function agentCommands(agent, cwd) {
+  return agent === 'claude' ? claudeCommands(cwd) : [];
+}
+
+module.exports = { agentCommands };

package/src/server.js

@@ -11,6 +11,7 @@ const { save } = require('./config');
 const { httpErr } = require('./hub');
 const github = require('./github');
 const { addServer, knownHosts } = require('./ssh');
+const { agentCommands } = require('./commands');
 const { pairLink, qrSvg, makeCode, codeLink } = require('./pair');
 
 // L'app web: copiada dins del paquet en publicar-lo, o l'arrel del repositori en desenvolupament.
@@ -269,6 +270,11 @@ function createServer({ cfg, hub, getPublicUrl, getApp }) {
         return { ok: true };
       }
     }
+    if ((r = m(/^\/api\/sessions\/([\w-]+)\/commands$/)) && method === 'GET') {
+      const s = hub.get(r[1]);
+      if (!s) throw httpErr(404, 'Aquesta sessió no existeix');
+      return agentCommands(s.agent, s.cwd);
+    }
     if ((r = m(/^\/api\/sessions\/([\w-]+)\/git(?:\/(commit|pr))?$/))) {
       const s = hub.get(r[1]);
       if (!s) throw httpErr(404, 'Aquesta sessió no existeix');

package/web/app/app.js

@@ -247,9 +247,14 @@ function forgetMachine(i) {
 }
 function checkPairHash() {
   const pair = parsePair(location.hash) || parseCode(location.hash); if (!pair) return false;
+  const hashAtStart = location.hash;
   history.replaceState(null, '', location.pathname + '#/sessions');
   state.route = { name: 'sessions' };
-  addMachine(pair); render(); toast('Ordinador connectat'); return true;
+  const wantQr = new URLSearchParams(location.hash.replace(/^#/, '')).get('qr') === '1' || /[#&]qr=1\b/.test(hashAtStart);
+  addMachine(pair); render(); toast('Ordinador connectat');
+  // Quan nio obre el panell, el QR per al mòbil surt tot seguit, sense cap pestanya nova.
+  if (wantQr && !isPhone()) setTimeout(mobileQrSheet, 500);
+  return true;
 }
 
 /* ---------------------------------------------------------------- navegació */
@@ -669,23 +674,103 @@ function renderTyping() {
   if (!busy) $$('.msg-ai.cursor', feed).forEach((n) => n.classList.remove('cursor'));
   const hb = $('#headBot .bot'); if (hb) hb.dataset.mood = sessionMood(s);
 }
+/* ---------- Comandes amb «/» (les de nio i les de l'agent) */
+const NIO_CMDS = [
+  { name: 'mode', hint: 'Canvia els permisos', args: [['llegir', 'Només llegir', 'l'], ['preguntar', 'Demana permís', 'p'], ['tot', 'Via lliure', 't']] },
+  { name: 'model', hint: 'Canvia de model' },
+  { name: 'stop', hint: 'Atura l’agent' },
+  { name: 'nova', hint: 'Nova sessió amb el mateix agent i carpeta' },
+  { name: 'git', hint: 'Git i GitHub: commit i PR' },
+  { name: 'nom', hint: 'Posa nom a la sessió', free: true },
+  { name: 'opcions', hint: 'Opcions de la sessió' },
+  { name: 'ajuda', hint: 'Llista de comandes' }
+];
+const cmdCache = new Map();
+async function loadCmds(id) {
+  if (cmdCache.has(id) || !machine()) return;
+  cmdCache.set(id, []);
+  try { cmdCache.set(id, await api(`/api/sessions/${id}/commands`)); } catch { /* sense comandes de l'agent */ }
+}
+const agentCmds = (id) => cmdCache.get(id) || [];
+function pickMode(arg) {
+  const a = String(arg || '').trim().toLowerCase(); if (!a) return null;
+  const m = NIO_CMDS[0].args.find(([k, , al]) => k === a || al === a || k.startsWith(a) || (a === 'lliure' && k === 'tot'));
+  return m ? m[0] : null;
+}
+async function runCmd(s, name, arg) {
+  const patch = async (body, msg) => { try { const sum = await api(`/api/sessions/${s.id}`, { method: 'PATCH', body }); state.sessions.set(s.id, sum); renderSessionHead(); if (msg) toast(msg); } catch (e) { toast(e.message, 4200); } };
+  switch (name) {
+    case 'mode': { const m = pickMode(arg); if (!arg) return modeSheet(s); if (!m) return toast('Els permisos són: llegir (l), preguntar (p) o tot (t)'); return patch({ mode: m }, `Permisos: ${MODES[m].label}`); }
+    case 'model': return arg ? patch({ model: arg }, `Model: ${arg}`) : modelSheet(s);
+    case 'stop': try { await api(`/api/sessions/${s.id}/stop`, { method: 'POST' }); toast('Aturat'); } catch (e) { toast(e.message); } return;
+    case 'nova': return newSessionSheet({ agent: s.agent, cwd: s.cwd, mode: s.mode });
+    case 'git': return gitSheet(s.id);
+    case 'nom': return arg ? patch({ title: arg }, 'Nom desat') : toast('Escriu el nom: /nom Arregla els tests');
+    case 'opcions': return sessionOptions(s.id);
+    case 'ajuda': return helpCmdsSheet(s);
+  }
+}
+function helpCmdsSheet(s) {
+  const ac = agentCmds(s.id);
+  openSheet(`<h2>Comandes</h2><p class="muted small">Escriu <span class="mono">/</span> al missatge per veure-les.</p><div class="list">${NIO_CMDS.map((c) => `<div class="card"><b class="mono">/${c.name}</b>${c.args ? ' <span class="muted small mono">l · p · t</span>' : ''}<div class="muted small">${esc(c.hint)}</div></div>`).join('')}</div>${ac.length ? `<p class="muted small">De ${esc(AGENT_NAMES[s.agent] || s.agent)}: ${ac.length} comandes i skills. Se li envien a l’agent tal qual.</p>` : ''}<div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button></div>`, (sh) => { $('[data-close]', sh).onclick = closeSheet; });
+}
+// Llista de suggeriments segons el que hi ha escrit: «/», «/mo», «/mode l».
+function slashItems(s, v) {
+  const m = v.match(/^\/([\w:.-]*)$/), a = v.match(/^\/mode\s+(\S*)$/i);
+  if (a) { const q = a[1].toLowerCase(); return NIO_CMDS[0].args.filter(([k, , al]) => !q || k.startsWith(q) || al === q).map(([k, h, al]) => ({ fill: `/mode ${k}`, run: ['mode', k], label: `/mode ${k}`, hint: `${h} · ${al}`, tag: 'nio' })); }
+  if (!m) return [];
+  const q = m[1].toLowerCase();
+  const nio = NIO_CMDS.map((c) => ({ ...c, tag: 'nio' }));
+  const ag = agentCmds(s.id).map((c) => ({ name: c.name, hint: c.hint, tag: AGENT_NAMES[s.agent] || s.agent, agent: true }));
+  const all = [...nio, ...ag], starts = all.filter((c) => c.name.toLowerCase().startsWith(q)), has = all.filter((c) => !c.name.toLowerCase().startsWith(q) && c.name.toLowerCase().includes(q));
+  return [...starts, ...has].slice(0, 40).map((c) => ({ ...c, label: `/${c.name}` }));
+}
 function renderComposer() {
   const box = $('#composer'); if (!box) return;
   const s = state.sessions.get(state.route.id), busy = !!s && (s.state === 'running' || s.state === 'waiting');
   const prev = $('textarea', box)?.value || '';
   if (box.dataset.busy === String(busy) && $('textarea', box)) return;
   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>`;
+  if (s) loadCmds(s.id).then(() => { if (state.route.id === s.id) drawSlash(); });
+  box.innerHTML = `<div class="slash" id="slash" role="listbox" hidden></div><div class="inner"><textarea rows="1" id="msg" placeholder="${busy ? 'L’agent està treballant…' : 'Escriu a l’agent… (/ per a comandes)'}" enterkeyhint="send" aria-label="Missatge" aria-controls="slash"></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 = () => autogrow(ta);
-  grow(); ta.addEventListener('input', grow);
+  let items = [], sel = 0;
+  const pop = $('#slash');
+  function drawSlash() {
+    const cur = state.sessions.get(state.route.id); if (!cur || !pop.isConnected) return;
+    items = ta.value.includes('\n') ? [] : slashItems(cur, ta.value);
+    pop.hidden = !items.length; if (!items.length) return;
+    sel = Math.min(sel, items.length - 1);
+    pop.innerHTML = items.map((c, i) => `<button type="button" role="option" data-i="${i}" aria-selected="${i === sel}"><span class="n mono">${esc(c.label)}</span><span class="h">${esc(c.hint || '')}</span><span class="t ${c.agent ? 'ag' : ''}">${esc(c.tag)}</span></button>`).join('');
+    $('[aria-selected="true"]', pop)?.scrollIntoView({ block: 'nearest' });
+  }
+  const pick = (i) => {
+    const c = items[i]; if (!c) return; const cur = state.sessions.get(state.route.id);
+    if (c.run) { ta.value = ''; grow(); drawSlash(); return runCmd(cur, ...c.run); }
+    if (c.args || c.free || c.agent) { ta.value = `/${c.name} `; grow(); sel = 0; drawSlash(); ta.focus(); return; }
+    ta.value = ''; grow(); drawSlash(); runCmd(cur, c.name, '');
+  };
+  ta.addEventListener('input', () => { grow(); sel = 0; drawSlash(); });
+  pop.addEventListener('pointerdown', (e) => { const b = e.target.closest('[data-i]'); if (b) { e.preventDefault(); pick(+b.dataset.i); } });
   const send = async () => {
     const text = ta.value.trim(); if (!text || !s) return;
-    ta.value = ''; grow();
+    const c = text.match(/^\/([\w:.-]+)(?:\s+([\s\S]*))?$/), nio = c && NIO_CMDS.find((x) => x.name === c[1].toLowerCase());
+    ta.value = ''; grow(); drawSlash();
+    if (nio) return runCmd(s, nio.name, (c[2] || '').trim());
     try { await api(`/api/sessions/${s.id}/message`, { method: 'POST', body: { text } }); }
     catch (e) { ta.value = text; grow(); toast(e.message, 4200); }
   };
-  ta.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey && !isTouch && !e.isComposing) { e.preventDefault(); send(); } });
+  ta.addEventListener('keydown', (e) => {
+    if (items.length && !pop.hidden) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); sel = (sel + 1) % items.length; return drawSlash(); }
+      if (e.key === 'ArrowUp') { e.preventDefault(); sel = (sel - 1 + items.length) % items.length; return drawSlash(); }
+      if (e.key === 'Tab' || (e.key === 'Enter' && !e.shiftKey && !isTouch && !e.isComposing && !/^\/\S+\s/.test(ta.value))) { e.preventDefault(); return pick(sel); }
+      if (e.key === 'Escape') { e.preventDefault(); pop.hidden = true; items = []; return; }
+    }
+    if (e.key === 'Enter' && !e.shiftKey && !isTouch && !e.isComposing) { e.preventDefault(); send(); }
+  });
+  grow(); drawSlash();
   $('#sendBtn').onclick = async () => { if (busy) { try { await api(`/api/sessions/${s.id}/stop`, { method: 'POST' }); } catch (e) { toast(e.message); } } else send(); };
 }
 

package/web/app/style.css

@@ -469,3 +469,14 @@ video.scan { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14p
 .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; } }