lampson 0.2.8 → 0.2.9

package/public/js/editor.js

@@ -0,0 +1,232 @@
+// editor.js — editor de archivos del visor: un textarea transparente (caret, selección, teclado nativo) sobre un
+// <pre> con el mismo texto resaltado por highlight.js (vendor/highlight.min.js = build "common" + powershell +
+// dockerfile; Synsema se registra acá, traducido de la gramática TextMate oficial del repo kitecosmic/synsema,
+// editors/vscode/syntaxes/synsema.tmLanguage.json). El gutter con los números va aparte y sigue el scroll.
+//
+// Guardar: Ctrl+S o el botón → POST /api/fs {op:"write"} (lib/fs.syn: solo archivos que existen, dentro del
+// workspace). Antes de guardar se relee el archivo: si cambió en disco (el agente lo editó mientras tanto) se
+// avisa y se elige sobrescribir o recargar, nunca se pisa a ciegas. Cambiar de archivo con cambios sin guardar
+// no los pierde: quedan como borrador en memoria y vuelven al reabrirlo (se pierden al recargar la página, con aviso).
+// Solo lectura: archivos truncados por la API (> 200k) y binarios — guardar un recorte destruiría el archivo.
+
+const LANG_BY_EXT = {
+  js: 'javascript', mjs: 'javascript', cjs: 'javascript', jsx: 'javascript', ts: 'typescript', mts: 'typescript', cts: 'typescript', tsx: 'typescript',
+  css: 'css', scss: 'scss', less: 'less', html: 'xml', htm: 'xml', xml: 'xml', svg: 'xml', vue: 'xml', svelte: 'xml', xsl: 'xml', plist: 'xml',
+  json: 'json', jsonc: 'json', md: 'markdown', markdown: 'markdown', py: 'python', rs: 'rust', go: 'go',
+  sh: 'bash', bash: 'bash', zsh: 'bash', env: 'bash', ps1: 'powershell', psm1: 'powershell', psd1: 'powershell',
+  yml: 'yaml', yaml: 'yaml', sql: 'sql', c: 'c', h: 'c', cpp: 'cpp', cc: 'cpp', cxx: 'cpp', hpp: 'cpp', hh: 'cpp', cs: 'csharp',
+  java: 'java', kt: 'kotlin', kts: 'kotlin', swift: 'swift', rb: 'ruby', php: 'php', lua: 'lua', r: 'r', pl: 'perl',
+  ini: 'ini', toml: 'ini', cfg: 'ini', conf: 'ini', properties: 'ini', diff: 'diff', patch: 'diff', graphql: 'graphql', gql: 'graphql',
+  wasm: 'wasm', wat: 'wasm', syn: 'synsema', fsyn: 'synsema', txt: 'plaintext', log: 'plaintext', csv: 'plaintext', lock: 'plaintext',
+  prisma: 'prisma', tsbuildinfo: 'json', map: 'json', webmanifest: 'json', jsonl: 'json', har: 'json', mdx: 'markdown', proto: 'protobuf',
+  bat: 'dos', cmd: 'dos', psql: 'sql', pgsql: 'sql', mysql: 'sql', m: 'objectivec', csproj: 'xml', xaml: 'xml', astro: 'xml', ejs: 'xml', hbs: 'xml',
+  // nombres de fence habituales en el chat que no son extensiones
+  javascript: 'javascript', typescript: 'typescript', python: 'python', rust: 'rust', shell: 'bash', powershell: 'powershell',
+  synsema: 'synsema', html5: 'xml', dockerfile: 'dockerfile', makefile: 'makefile', text: 'plaintext', plaintext: 'plaintext'
+};
+const LANG_BY_NAME = { dockerfile: 'dockerfile', makefile: 'makefile', gnumakefile: 'makefile', '.env': 'bash', '.env.example': 'bash', '.gitignore': 'plaintext', '.gitattributes': 'plaintext', '.npmrc': 'ini', '.editorconfig': 'ini', '.nvmrc': 'plaintext', '.babelrc': 'json', '.eslintrc': 'json', '.prettierrc': 'json', '.swcrc': 'json', 'nginx.conf': 'nginx', procfile: 'plaintext' };
+function langOf(path) {
+  const base = String(path || '').split('/').pop().toLowerCase();
+  if (LANG_BY_NAME[base]) return LANG_BY_NAME[base];
+  if (base.startsWith('.env')) return 'bash';            // .env.local, .env.production…
+  if (base.startsWith('dockerfile')) return 'dockerfile'; // Dockerfile.dev
+  const i = base.lastIndexOf('.'); const ext = i >= 0 ? base.slice(i + 1) : '';
+  return LANG_BY_EXT[ext] || 'plaintext';
+}
+// código en un bloque ``` del chat (core.js md()): resaltado si el fence trae un lenguaje conocido
+function hlCode(code, lang) {
+  if (typeof hljs === 'undefined') return esc(code);
+  const l = String(lang || '').toLowerCase(); const name = LANG_BY_EXT[l] || (l && hljs.getLanguage(l) ? l : '');
+  if (!name || name === 'plaintext' || code.length > 60000) return esc(code);
+  try { return hljs.highlight(code, { language: name, ignoreIllegals: true }).value; } catch (e) { return esc(code); }
+}
+
+// ---- Synsema para highlight.js (misma partición que el tmLanguage: control, tipos, seguridad, agentes, LLM,
+// humano, observabilidad, serve, módulos; builtins solo cuando se llaman; task/type/agent + nombre = definición) ----
+function synsemaGrammar(hljs) {
+  const KEYWORDS = [
+    'when', 'otherwise', 'each', 'while', 'repeat', 'match', 'is', 'try', 'recover', 'give', 'stop', 'then', 'and_then', 'return',
+    'let', 'be', 'set', 'to', 'task', 'type', 'agent', 'state',
+    'and', 'or', 'not', 'in', 'of', 'as', 'with',
+    'spawn', 'share', 'observe', 'signal', 'wait_for',
+    'analyze', 'decide', 'reason', 'generate',
+    'approve', 'confirm', 'ask', 'show',
+    'trace', 'log', 'measure', 'checkpoint',
+    'serve', 'on', 'route', 'auth', 'errors', 'requires', 'expect', 'max_body', 'max_streams', 'stream', 'send', 'static', 'cache', 'fallback', 'cors', 'describe', 'private', 'from', 'domain', 'tls', 'redirect', 'proxy', 'host', 'paged', 'per', 'rate_limit', 'unlimited', 'none', 'mount', 'at',
+    'use', 'export', 'routes', 'enum'
+  ];
+  const SECURITY = ['require', 'allow', 'deny', 'sandbox', 'intent', 'invariant', 'verify'];
+  const BUILTINS = ['print', 'text', 'length', 'append', 'range', 'contains', 'split', 'join', 'type_of', 'matches', 'find_all', 'capture', 'replace_re', 'fetch', 'read_file', 'write_file', 'http', 'http_get', 'http_post', 'sql', 'sql_exec', 'sql_tables', 'db_open', 'db_close', 'format_time', 'parse_time', 'date_parts', 'now', 'sleep', 'apply', 'where', 'reduce', 'collect', 'transform', 'sort_by', 'group_by', 'every', 'some', 'flatten', 'parallel_map', 'chunk', 'remember', 'recall', 'forget_memory', 'add_rule', 'check_rules', 'get_rules', 'memory_summary', 'create_progress', 'start_step', 'complete_step', 'fail_step', 'resume_point', 'progress_display', 'progress_percent', 'ok', 'created', 'not_found', 'fail', 'html', 'respond', 'render', 'page', 'heading', 'prose', 'list', 'ordered_list', 'link', 'image', 'section', 'code', 'raw', 'content'];
+  const NUMBER = { scope: 'number', match: /\b[0-9][0-9_]*(\.[0-9][0-9_]*)?([eE][+-]?[0-9]+)?\b/ };
+  const CALL = { scope: 'built_in', match: new RegExp('\\b(' + BUILTINS.join('|') + ')(?=\\s*\\()') };
+  // {expr} dentro de un string: termina en }, pero también ante la comilla que cierra el string o al final de la
+  // línea, así una llave sin cerrar no arrastra el color
+  const subst = (quote) => ({ scope: 'subst', begin: /\{/, end: new RegExp('\\}|(?=' + quote + ')|$'), keywords: { keyword: KEYWORDS, literal: ['true', 'false', 'nothing'] }, contains: [NUMBER, CALL] });
+  return {
+    name: 'Synsema', aliases: ['syn', 'fsyn'],
+    keywords: { $pattern: /[A-Za-z_][A-Za-z0-9_]*/, keyword: KEYWORDS, literal: ['true', 'false', 'nothing'] },
+    contains: [
+      hljs.COMMENT('--', '$'),
+      // los strings no cruzan líneas: end también en $ (hljs compila con la bandera m). Sin esto una comilla o un
+      // backtick sin cerrar pintaban el resto del archivo como string (visto 2026-09-05 con un ` suelto en un .syn)
+      { scope: 'string', begin: /"/, end: /"|$/, contains: [{ scope: 'char.escape', match: /\\./ }, subst('"')] },
+      { scope: 'string', begin: /`/, end: /`|$/, contains: [{ scope: 'char.escape', match: /\\./ }, subst('`')] },
+      { match: [/\b(task|type|agent)\b/, /\s+/, /[A-Za-z_][A-Za-z0-9_]*/], scope: { 1: 'keyword', 3: 'title.function' } },
+      { scope: 'keyword.security', match: new RegExp('\\b(' + SECURITY.join('|') + ')\\b') },
+      CALL,
+      NUMBER
+    ]
+  };
+}
+// Prisma (schema.prisma): highlight.js no lo trae. Bloques model/enum/datasource/generator, tipos escalares,
+// atributos @id/@@map, env("…"), comentarios // y ///.
+function prismaGrammar(hljs) {
+  return {
+    name: 'Prisma', aliases: ['prisma'],
+    keywords: {
+      keyword: ['model', 'enum', 'type', 'view', 'datasource', 'generator'],
+      built_in: ['String', 'Int', 'BigInt', 'Float', 'Decimal', 'Boolean', 'DateTime', 'Json', 'Bytes', 'Unsupported'],
+      literal: ['true', 'false', 'null']
+    },
+    contains: [
+      hljs.COMMENT('///', '$'), hljs.COMMENT('//', '$'),
+      { scope: 'string', begin: /"/, end: /"|$/, contains: [{ scope: 'char.escape', match: /\\./ }] },
+      { match: [/\b(model|enum|type|view|datasource|generator)\b/, /\s+/, /[A-Za-z_]\w*/], scope: { 1: 'keyword', 3: 'title.class' } },
+      { scope: 'attribute', match: /@@?[A-Za-z_][\w.]*/ },
+      { scope: 'built_in', match: /\benv(?=\()/ },
+      { scope: 'number', match: /\b\d+(\.\d+)?\b/ }
+    ]
+  };
+}
+if (typeof hljs !== 'undefined') { hljs.registerLanguage('synsema', synsemaGrammar); hljs.registerLanguage('prisma', prismaGrammar); }
+
+// ---- estado ----
+const ED = { path: '', loaded: null, lang: 'plaintext', dirty: false, readonly: false, saving: false };
+const drafts = new Map(); // path → texto sin guardar (al cambiar de archivo no se pierde nada)
+const eta = $('#eta'), ehl = $('#ehl'), egut = $('#egut'), edBox = $('#editor');
+const HL_MAX = 120000;    // más que esto se muestra sin resaltar (hljs tardaría en cada tecla)
+const HL_SYNC_MAX = 30000; // hasta acá el espejo se redibuja en el mismo tick que la tecla; después con debounce corto
+
+function edVisible() { return !edBox.hidden && $('#viewer').style.display !== 'none' && !!ED.path; }
+function edDirty() { return ED.dirty; }
+
+// abre la respuesta de GET /api/file en el editor (tree.js openFile). Un borrador guardado gana al disco.
+function edOpen(d) {
+  edStash();
+  ED.path = d.path; ED.loaded = String(d.content ?? ''); ED.lang = langOf(d.path); ED.saving = false;
+  const binary = /\u0000/.test(ED.loaded);
+  ED.readonly = !!d.truncated || binary;
+  const draft = drafts.get(ED.path);
+  eta.value = !ED.readonly && draft != null && draft !== ED.loaded ? draft : ED.loaded;
+  ED.dirty = eta.value !== ED.loaded;
+  eta.readOnly = ED.readonly;
+  $('#vbody').hidden = true; edBox.hidden = false; $('#viewer').classList.add('edit');
+  edRender(); edMeta(d.truncated ? 'archivo muy grande · solo lectura' : binary ? 'binario · solo lectura' : '');
+  eta.scrollTop = 0; eta.scrollLeft = 0; edSync();
+  if (!ED.readonly) eta.focus({ preventScroll: true });
+}
+function edStash() { if (!ED.path) return; if (ED.dirty) drafts.set(ED.path, eta.value); else drafts.delete(ED.path); }
+// cierra el editor (✕ del visor, tras confirmar si había cambios); el visor vuelve a su <pre> de texto
+function edClose(discard) {
+  if (discard) drafts.delete(ED.path); else edStash();
+  ED.path = ''; ED.loaded = null; ED.dirty = false;
+  edBox.hidden = true; $('#vbody').hidden = false; $('#viewer').classList.remove('edit');
+}
+// el visor va a mostrar texto plano (logs de procesos/agentes, showText): el editor se esconde sin perder borradores
+function viewerText() { if (!edBox.hidden) edClose(false); }
+
+function edRender() {
+  const src = eta.value; let html;
+  if (src.length > HL_MAX || ED.lang === 'plaintext' || typeof hljs === 'undefined') html = esc(src);
+  else { try { html = hljs.highlight(src, { language: ED.lang, ignoreIllegals: true }).value; } catch (e) { html = esc(src); } }
+  // el espacio final: un <pre> no pinta la última línea vacía, el textarea sí; así ambos miden lo mismo
+  ehl.firstElementChild.innerHTML = html + '\n ';
+  const n = src.split('\n').length;
+  if (egut.childElementCount !== n) { let g = ''; for (let i = 1; i <= n; i++) g += '<span>' + i + '</span>'; egut.innerHTML = g; }
+}
+function edSync() { ehl.scrollTop = eta.scrollTop; ehl.scrollLeft = eta.scrollLeft; egut.style.transform = 'translateY(' + (-eta.scrollTop) + 'px)'; }
+function edMeta(note, bad) {
+  const n = eta.value.split('\n').length;
+  const parts = [ED.lang === 'plaintext' ? 'texto' : ED.lang, n + (n === 1 ? ' línea' : ' líneas')];
+  if (ED.dirty) parts.push('<b class="dirty">● sin guardar</b>');
+  if (note) parts.push(`<span class="${bad ? 'err' : 'note'}">${esc(note)}</span>`);
+  $('#vmeta').innerHTML = parts.join(' · ');
+  const b = $('#vsave'); b.hidden = ED.readonly; b.disabled = !ED.dirty || ED.saving;
+}
+
+// ---- guardar ----
+async function edSave(force) {
+  if (!edVisible() || ED.readonly || ED.saving) return;
+  const content = eta.value, path = ED.path;
+  if (!ED.dirty && !force) return;
+  ED.saving = true; edMeta('guardando…');
+  try {
+    if (!force) { // ¿cambió en disco desde que lo abrimos? (el agente pudo escribirlo mientras tanto)
+      const r0 = await fetch(BASE + '/api/file?path=' + encodeURIComponent(path)); const d0 = await r0.json();
+      if (r0.ok && String(d0.content) !== ED.loaded) { ED.saving = false; edConflict(); return; }
+    }
+    const r = await api(BASE + '/api/fs', { op: 'write', path, content });
+    if (!r.ok) { ED.saving = false; edMeta(r.data.error || 'no se pudo guardar', true); return; }
+    if (ED.path === path) { ED.loaded = content; ED.dirty = eta.value !== content; } // el usuario pudo seguir tipeando
+    drafts.delete(path); ED.saving = false;
+    edMeta('guardado'); setTimeout(() => { if (ED.path === path && !ED.dirty) edMeta(); }, 1800);
+    if (typeof treeChanged === 'function') treeChanged();
+  } catch (e) { ED.saving = false; edMeta('no se pudo guardar: ' + e.message, true); }
+}
+function edConflict() {
+  $('#vmeta').innerHTML = `<span class="warn">cambió en disco mientras lo editabas</span> · <a href="#" id="edover">sobrescribir</a> · <a href="#" id="edreload">recargar (pierde tus cambios)</a>`;
+  $('#edover').onclick = ev => { ev.preventDefault(); edSave(true); };
+  $('#edreload').onclick = ev => { ev.preventDefault(); drafts.delete(ED.path); ED.dirty = false; openFile(ED.path); };
+}
+// una tool del agente pudo tocar el archivo abierto (chat.js): sin cambios locales se recarga solo conservando el
+// scroll; con cambios locales se avisa y el conflicto se resuelve al guardar
+async function edTouched(path) {
+  if (!edVisible()) return;
+  const p = path ? String(path).replace(/\\/g, '/').replace(/^\.\//, '') : '';
+  if (p && p !== ED.path) return;
+  try {
+    const r = await fetch(BASE + '/api/file?path=' + encodeURIComponent(ED.path)); const d = await r.json();
+    if (!r.ok || String(d.content) === ED.loaded) return;
+    if (ED.dirty) { edMeta('el agente cambió este archivo en disco · al guardar podés sobrescribir o recargar', true); return; }
+    const st = eta.scrollTop, sl = eta.scrollLeft;
+    ED.loaded = String(d.content); eta.value = ED.loaded; ED.readonly = !!d.truncated; eta.readOnly = ED.readonly;
+    edRender(); edMeta('actualizado: el agente lo cambió'); eta.scrollTop = st; eta.scrollLeft = sl; edSync();
+    setTimeout(() => { if (!ED.dirty) edMeta(); }, 2500);
+  } catch (e) {}
+}
+
+// ---- teclado y eventos ----
+function edInsert(t) {
+  if (!document.execCommand || !document.execCommand('insertText', false, t)) { // execCommand conserva el undo del navegador
+    eta.setRangeText(t, eta.selectionStart, eta.selectionEnd, 'end'); eta.dispatchEvent(new Event('input'));
+  }
+}
+eta.addEventListener('input', () => {
+  ED.dirty = eta.value !== ED.loaded;
+  if (eta.value.length > HL_SYNC_MAX) debounce('edhl', edRender, 40); else edRender();
+  edMeta(); edSync();
+});
+eta.addEventListener('scroll', edSync);
+eta.addEventListener('keydown', ev => {
+  if (ED.readonly) return;
+  if (ev.key === 'Tab' && !ev.ctrlKey && !ev.altKey) {
+    ev.preventDefault();
+    const v = eta.value, s = eta.selectionStart, e = eta.selectionEnd;
+    if (s === e || !v.slice(s, e).includes('\n')) { if (!ev.shiftKey) edInsert('    '); return; } // 4 espacios: la indentación de Synsema
+    // varias líneas seleccionadas: indentar / desindentar el bloque
+    const ls = v.lastIndexOf('\n', s - 1) + 1; let le = v.indexOf('\n', e - 1); if (le < 0) le = v.length;
+    const lines = v.slice(ls, le).split('\n');
+    const out = lines.map(l => ev.shiftKey ? l.replace(/^(    |\t| {1,3})/, '') : '    ' + l).join('\n');
+    eta.setSelectionRange(ls, le); edInsert(out); eta.setSelectionRange(ls, ls + out.length);
+  } else if (ev.key === 'Enter' && !ev.ctrlKey && !ev.altKey && !ev.shiftKey) {
+    ev.preventDefault();
+    const v = eta.value, s = eta.selectionStart; const ls = v.lastIndexOf('\n', s - 1) + 1;
+    const ind = (v.slice(ls, s).match(/^[ \t]*/) || [''])[0];
+    edInsert('\n' + ind); // conserva la indentación de la línea anterior
+  } else if (ev.key === 'Escape') { eta.blur(); }
+});
+document.addEventListener('keydown', ev => {
+  if ((ev.ctrlKey || ev.metaKey) && !ev.altKey && ev.key.toLowerCase() === 's' && edVisible()) { ev.preventDefault(); edSave(); }
+});
+$('#vsave').onclick = () => edSave();
+window.addEventListener('beforeunload', ev => { if (ED.dirty || drafts.size) { ev.preventDefault(); ev.returnValue = ''; } });

package/public/js/login.js

@@ -0,0 +1,78 @@
+// login.js — /login (passkey de un dispositivo ya emparejado) y /pair#<código> (registrar una passkey nueva).
+// Los binarios de WebAuthn viajan en base64url: el server manda challenge / user.id / ids así, y recibe la
+// credencial en la forma de PublicKeyCredential.toJSON() (armada a mano: toJSON no está en todos los Safari).
+const $ = s => document.querySelector(s);
+const b64uToBuf = (s) => { s = s.replace(/-/g, '+').replace(/_/g, '/'); while (s.length % 4) s += '='; const bin = atob(s); const u = new Uint8Array(bin.length); for (let i = 0; i < bin.length; i++) u[i] = bin.charCodeAt(i); return u.buffer; };
+const bufToB64u = (buf) => { const u = new Uint8Array(buf); let s = ''; for (let i = 0; i < u.length; i++) s += String.fromCharCode(u[i]); return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''); };
+function say(text, kind) { const m = $('#msg'); m.textContent = text || ''; m.className = 'msg' + (kind ? ' ' + kind : ''); }
+async function post(path, body) { const r = await fetch(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body || {}) }); let data = {}; try { data = await r.json(); } catch (e) {} return { ok: r.ok, status: r.status, data }; }
+function credJSON(c) {
+  const r = c.response, out = { id: c.id, rawId: bufToB64u(c.rawId), type: c.type, clientExtensionResults: c.getClientExtensionResults ? c.getClientExtensionResults() : {}, response: { clientDataJSON: bufToB64u(r.clientDataJSON) } };
+  if (c.authenticatorAttachment) out.authenticatorAttachment = c.authenticatorAttachment;
+  if (r.attestationObject) { out.response.attestationObject = bufToB64u(r.attestationObject); if (r.getTransports) out.response.transports = r.getTransports(); }
+  if (r.authenticatorData) out.response.authenticatorData = bufToB64u(r.authenticatorData);
+  if (r.signature) out.response.signature = bufToB64u(r.signature);
+  if (r.userHandle) out.response.userHandle = bufToB64u(r.userHandle);
+  return out;
+}
+function why(e) {
+  if (!e) return 'algo falló';
+  if (e.name === 'NotAllowedError') return 'cancelado o sin respuesta — volvé a intentar';
+  if (e.name === 'InvalidStateError') return 'este dispositivo ya tiene una passkey de lampson para este dominio — entrá desde /login';
+  if (e.name === 'SecurityError') return 'el navegador rechazó el dominio: las passkeys necesitan https (o localhost)';
+  return (e.name ? e.name + ': ' : '') + (e.message || String(e));
+}
+function guessName() {
+  const ua = navigator.userAgent;
+  const os = /iPhone/.test(ua) ? 'iPhone' : /iPad/.test(ua) ? 'iPad' : /Android/.test(ua) ? 'Android' : /Mac OS X/.test(ua) ? 'Mac' : /Windows/.test(ua) ? 'Windows' : /Linux/.test(ua) ? 'Linux' : 'dispositivo';
+  const br = /EdgA?\//.test(ua) ? 'Edge' : /SamsungBrowser/.test(ua) ? 'Samsung' : /CriOS|Chrome\//.test(ua) ? 'Chrome' : /FxiOS|Firefox\//.test(ua) ? 'Firefox' : /Safari\//.test(ua) ? 'Safari' : '';
+  return br ? os + ' · ' + br : os;
+}
+const next = () => { const n = new URLSearchParams(location.search).get('next'); return n && n.startsWith('/') && !n.startsWith('//') ? n : '/'; };
+const supported = () => window.isSecureContext && window.PublicKeyCredential && navigator.credentials;
+
+async function doPair(code) {
+  const btn = $('#doPair'); btn.disabled = true; say('preparando…');
+  try {
+    const o = await post('/api/auth/register/options', { code, name: $('#devName').value.trim() || guessName() });
+    if (!o.ok) { say(o.data.error || ('error ' + o.status), 'err'); btn.disabled = false; return; }
+    const pk = o.data.publicKey;
+    pk.challenge = b64uToBuf(pk.challenge); pk.user.id = b64uToBuf(pk.user.id);
+    say('seguí las instrucciones del dispositivo…');
+    const cred = await navigator.credentials.create({ publicKey: pk });
+    const r = await post('/api/auth/register', { code, challenge_id: o.data.challenge_id, name: $('#devName').value.trim() || guessName(), credential: credJSON(cred) });
+    if (!r.ok) { say(r.data.error || ('error ' + r.status), 'err'); btn.disabled = false; return; }
+    say('listo · entrando…', 'ok');
+    history.replaceState(null, '', '/pair');   // el código ya no sirve: que no quede en el historial
+    setTimeout(() => { location.href = '/'; }, 500);
+  } catch (e) { say(why(e), 'err'); btn.disabled = false; }
+}
+
+async function doLogin() {
+  const btn = $('#doLogin'); btn.disabled = true; say('');
+  try {
+    const o = await post('/api/auth/login/options', {});
+    if (!o.ok) { say(o.data.error || ('error ' + o.status), 'err'); btn.disabled = false; return; }
+    if (!o.data.known) { say('no hay dispositivos emparejados para este dominio: emparejá este desde la PC', 'err'); btn.disabled = false; return; }
+    const pk = o.data.publicKey;
+    pk.challenge = b64uToBuf(pk.challenge); pk.allowCredentials = (pk.allowCredentials || []).map(c => ({ type: c.type, id: b64uToBuf(c.id) }));
+    const cred = await navigator.credentials.get({ publicKey: pk });
+    const r = await post('/api/auth/login', { challenge_id: o.data.challenge_id, credential: credJSON(cred) });
+    if (!r.ok) { say(r.data.error || ('error ' + r.status), 'err'); btn.disabled = false; return; }
+    say('entrando…', 'ok'); location.href = next();
+  } catch (e) { say(why(e), 'err'); btn.disabled = false; }
+}
+
+(async () => {
+  const code = location.pathname === '/pair' ? decodeURIComponent(location.hash.slice(1)) : '';
+  if (code) {
+    $('#pair').hidden = false; $('#devName').value = guessName();
+    $('#doPair').onclick = () => doPair(code);
+  } else {
+    // ¿ya adentro? (esta PC o una sesión viva) → directo al hub
+    try { const me = await (await fetch('/api/auth/me')).json(); if (me.authenticated) { location.href = next(); return; } } catch (e) {}
+    $('#login').hidden = false; $('#doLogin').onclick = doLogin;
+    if (location.pathname === '/pair') say('este link no trae código: escaneá el QR de nuevo', 'err');
+  }
+  if (!supported()) { say('este navegador no puede usar passkeys aquí: hace falta https (el túnel) y un navegador actual', 'err'); document.querySelectorAll('button.primary').forEach(b => b.disabled = true); }
+})();

package/public/js/procs.js

@@ -44,6 +44,6 @@ async function openProc(name) {
 async function refreshProcViewer(name) {
   if (procOpen !== name || $('#viewer').style.display === 'none') { clearInterval(procTimer); return; }
   const x = await (await fetch(BASE + '/api/proc/log?name=' + encodeURIComponent(name) + '&tail=400')).json();
-  $('#vbody').textContent = x.log || ''; $('#vmeta').textContent = x.running ? '● corriendo · log en vivo' : '○ terminado';
+  viewerText(); $('#vbody').textContent = x.log || ''; $('#vmeta').textContent = x.running ? '● corriendo · log en vivo' : '○ terminado';
   if (!x.running) { clearInterval(procTimer); loadProcs(); }
 }

package/public/js/pwa.js

@@ -0,0 +1,5 @@
+// pwa.js — registra el service worker (instalable en el celular y en el escritorio). Solo en contexto seguro:
+// https (túnel, VPS) o localhost; por http en la LAN el navegador no lo permite y la app sigue como sitio.
+if ('serviceWorker' in navigator && window.isSecureContext) {
+  window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(() => {}); });
+}

package/public/js/tree.js

@@ -241,15 +241,23 @@ function showMenu(x, y, e, only) {
   if (only === 'delete') { const first = m.querySelector('.it'); if (first) first.click(); }
 }
 
+// abre el archivo en el editor (js/editor.js): colores por tipo de archivo, Ctrl+S guarda. El <pre> #vbody queda para logs.
 async function openFile(path, row) {
   document.querySelectorAll('.row.active').forEach(x => x.classList.remove('active')); if (row) row.classList.add('active');
   const r = await fetch(BASE + '/api/file?path=' + encodeURIComponent(path)); const d = await r.json();
-  if (!r.ok) { add('denied', esc(d.error || 'error')); return; }
-  $('#vpath').textContent = d.path; $('#vmeta').textContent = d.lines + ' líneas';
-  $('#vbody').className = ''; $('#vbody').innerHTML = String(d.content).split('\n').map((l, i) => `<span class="ln">${i + 1}</span>${esc(l)}`).join('\n');
+  if (!r.ok) { viewerNotice(path, 'no se pudo abrir', String(d.error || 'error')); return; }
+  if (!row) { const ar = rowOf(d.path); if (ar) ar.classList.add('active'); }
+  if (d.binary) { viewerNotice(d.path, 'binario · ' + fmtSize(d.size), 'Este archivo no es texto (base de datos, imagen, fuente, ejecutable…): no se puede mostrar ni editar acá.' + (d.error ? '\n\n' + d.error : '')); return; }
+  $('#vpath').textContent = d.path; $('#vbody').className = '';
+  edOpen(d);
   showPane('viewer'); $('#stage').scrollTop = 0;
 }
+// avisos del visor (binario, error al abrir): en el propio visor, no como mensaje en el chat
+function viewerNotice(path, meta, text) { showText(path, meta, text, false); }
+function fmtSize(n) { n = Number(n) || 0; return n < 1024 ? n + ' B' : n < 1048576 ? (n / 1024).toFixed(1) + ' KB' : (n / 1048576).toFixed(1) + ' MB'; }
 // el árbol se refresca solo cuando una tool pudo crear/borrar archivos, con un pequeño debounce; ↻ lo fuerza a mano
 function treeChanged() { debounce('tree', loadTree, 400); }
 $('#tree-reload').onclick = e => { e.stopPropagation(); const b = e.currentTarget; b.classList.remove('spin'); void b.offsetWidth; b.classList.add('spin'); loadTree(); };
-$('#vclose').onclick = () => { showPane('log'); procOpen = null; clearInterval(procTimer); $('#vbody').className = ''; document.querySelectorAll('.row.active, .m.active, .p.active').forEach(x => x.classList.remove('active')); memOpen = null; };
+function closeViewer(discard) { showPane('log'); procOpen = null; clearInterval(procTimer); $('#vbody').className = ''; document.querySelectorAll('.row.active, .m.active, .p.active').forEach(x => x.classList.remove('active')); memOpen = null; edClose(discard); const x = $('#vclose'); x.classList.remove('ask'); x.textContent = '✕ cerrar'; }
+// con cambios sin guardar, el ✕ pregunta antes (mismo patrón en línea que borrar en el árbol)
+$('#vclose').onclick = () => { if (edVisible() && edDirty()) { inlineConfirm($('#vclose'), '¿descartar cambios?', () => closeViewer(true)); return; } closeViewer(false); };

package/public/login.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="theme-color" content="#131412">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+<title>Lampson · entrar</title>
+<link rel="stylesheet" href="/css/tokens.css">
+<link rel="stylesheet" href="/css/login.css">
+<script>(function(){try{var t=localStorage.getItem('lampson.theme');if(t!=='light'&&t!=='dark'){t='dark';}document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
+</head>
+<body class="auth">
+<main class="authbox">
+  <img src="/favicon.svg" alt="" class="logo" width="48" height="48">
+  <!-- login: dispositivo ya emparejado -->
+  <section id="login" hidden>
+    <p class="eyebrow">lampson</p>
+    <h1>Entrar</h1>
+    <p class="lead">Usá la passkey de este dispositivo: huella, cara o el bloqueo de pantalla.</p>
+    <button class="primary" id="doLogin">Entrar con passkey</button>
+    <p class="hint">¿Dispositivo nuevo? En la PC donde corre lampson abrí <b>dispositivos</b> → <b>emparejar</b> y escaneá el QR.</p>
+  </section>
+  <!-- emparejar: llegó desde el QR (/pair#<código>) -->
+  <section id="pair" hidden>
+    <p class="eyebrow">emparejar dispositivo</p>
+    <h1>Conectar con tu PC</h1>
+    <p class="lead">Vas a crear una passkey para este dispositivo. Después entrás solo con la huella o la cara, sin contraseñas.</p>
+    <label class="field">nombre del dispositivo<input id="devName" maxlength="60" autocomplete="off" spellcheck="false"></label>
+    <button class="primary" id="doPair">Crear passkey</button>
+    <p class="hint">El código del QR vale 5 minutos y sirve una sola vez.</p>
+  </section>
+  <p class="msg" id="msg" role="status"></p>
+</main>
+<script src="/js/pwa.js"></script>
+<script src="/js/login.js"></script>
+</body>
+</html>

package/public/manifest.webmanifest

@@ -0,0 +1,16 @@
+{
+  "id": "/",
+  "name": "Lampson",
+  "short_name": "Lampson",
+  "description": "Tu agente de código: workspaces, sesiones y tareas desde el celular.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#131412",
+  "theme_color": "#131412",
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

package/public/offline.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="theme-color" content="#131412">
+<title>Lampson · sin conexión</title>
+<link rel="stylesheet" href="/css/tokens.css">
+<style>
+  body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
+  .box { max-width:420px; }
+  h1 { font:600 22px/1.3 var(--serif); margin:0 0 8px; }
+  p { color:var(--ink-2); margin:0 0 16px; }
+  button { font:400 13px var(--mono); padding:8px 14px; background:transparent; color:var(--accent); border:1px solid var(--accent); border-radius:var(--r); }
+</style>
+</head>
+<body>
+<div class="box">
+  <h1>Tu PC no responde</h1>
+  <p>Lampson corre en tu PC: tiene que estar prendida, con lampson y el túnel andando (<code>lampson --install</code> lo arranca solo al iniciar sesión). Si estás sin señal, revisá tu conexión.</p>
+  <button onclick="location.reload()">reintentar</button>
+</div>
+</body>
+</html>

package/public/sw.js

@@ -0,0 +1,63 @@
+// sw.js — service worker de la PWA de lampson (base: el scaffold de `synsema init --pwa`).
+// Red primero para todo: lampson cambia seguido y es una herramienta en vivo; mostrar una versión vieja de la UI
+// sería peor que avisar. El caché solo sirve para abrir sin red: íconos, CSS/JS/fuentes y una página «sin conexión».
+// Nunca se cachea el API (/api/…, /w/<slug>/api/…) ni una respuesta que falló, ni las páginas con datos del usuario.
+const CACHE = "lampson-shell-v2";
+const SHELL = ["/offline.html", "/manifest.webmanifest", "/icon-192.png", "/favicon.svg", "/css/tokens.css"];
+
+self.addEventListener("install", (e) => {
+  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting()));
+});
+
+self.addEventListener("activate", (e) => {
+  e.waitUntil(
+    caches.keys()
+      .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim())
+  );
+});
+
+const tunnelDown = (res) => res.headers.get("x-synsema-tunnel") === "offline" || [502, 503, 504, 521, 522, 523, 524, 530].includes(res.status);
+const isApi = (p) => p.startsWith("/api/") || /^\/w\/[^/]+\/(api|approve)\//.test(p);
+const isAsset = (p) => /^\/(css|js|fonts|vendor)\//.test(p) || /\.(png|svg|webmanifest|woff2)$/.test(p);
+
+self.addEventListener("fetch", (e) => {
+  const url = new URL(e.request.url);
+  if (e.request.method !== "GET" || url.origin !== self.location.origin) return;
+  if (isApi(url.pathname)) return;   // SSE, WebSocket y JSON van directo a la red, sin tocar
+  if (e.request.mode === "navigate") {
+    // PC apagada o lampson caído: sin red → error de fetch; detrás de un túnel, el túnel SÍ responde, con su propia
+    // página de error (Cloudflare: 530/1033, 502, 504; un túnel de la plataforma marca X-Synsema-Tunnel: offline).
+    // En los dos casos, la pantalla de lampson. El hub nunca responde una página con esos códigos.
+    e.respondWith(fetch(e.request).then((res) => {
+      if (tunnelDown(res)) return caches.match("/offline.html").then((c) => c || res);
+      return res;
+    }).catch(() => caches.match("/offline.html")));
+    return;
+  }
+  if (isAsset(url.pathname)) {
+    e.respondWith(fetch(e.request).then(async (res) => {
+      if (res.ok) { const c = await caches.open(CACHE); await c.put(e.request, res.clone()); }
+      return res;
+    }).catch(async () => (await caches.match(e.request)) || Response.error()));
+  }
+});
+
+// push (para después: avisos de aprobaciones y de tareas terminadas)
+self.addEventListener("push", (e) => {
+  let data = {};
+  try { data = e.data ? e.data.json() : {}; } catch (_) { data = { body: e.data ? e.data.text() : "" }; }
+  const opts = { body: data.body || "", icon: "/icon-192.png", badge: "/badge-96.png", data };
+  if (data.tag) { opts.tag = String(data.tag); opts.renotify = true; }
+  e.waitUntil(self.registration.showNotification(data.title || "Lampson", opts));
+});
+
+self.addEventListener("notificationclick", (e) => {
+  e.notification.close();
+  const url = (e.notification.data && e.notification.data.url) || "/";
+  e.waitUntil(clients.matchAll({ type: "window", includeUncontrolled: true }).then((wins) => {
+    const win = wins.find((w) => "focus" in w);
+    if (win) { win.postMessage({ type: "notificationclick", url }); return win.focus(); }
+    return clients.openWindow(url);
+  }));
+});