lampson 0.1.3 → 0.2.0

package/public/js/agents.js

@@ -0,0 +1,31 @@
+// agents.js — subagentes (tool delegate): lista + log vivo por hijo
+let agentOpen = null, agentTimer = null, agentPaint = null;
+async function loadAgents() {
+  let r; try { r = await (await fetch(BASE + '/api/agents')).json(); } catch (e) { return; }
+  const box = $('#agentsBox'); box.innerHTML = '';
+  const list = (r.agents || []).slice().reverse(); const act = list.filter(a => a.status === 'running').length;
+  $('#agentCount').textContent = list.length ? (act ? `${act} ● · ${list.length}` : `${list.length}`) : ''; autoSec('agents', act > 0);
+  if (!list.length) { box.innerHTML = '<div class="p none">ninguno</div>'; return; }
+  for (const a of list) {
+    const run = a.status === 'running';
+    const d = document.createElement('div'); d.className = 'p' + (run ? ' run' : '') + (agentOpen === a.id ? ' active' : ''); d.title = `${a.status} · ${a.steps} pasos · ${a.tokens} tokens\n${a.brief}`;
+    d.innerHTML = `<span class="st"></span><span class="nm">${esc(a.id)}</span><span class="cm">${esc(String(a.brief || '').split('\n')[0].slice(0, 90))}</span>` + (run ? '<button title="parar: devuelve el informe parcial">■</button>' : '');
+    d.onclick = () => openAgent(a.id);
+    const b = d.querySelector('button'); if (b) b.onclick = async (ev) => { ev.stopPropagation(); await api(BASE + '/api/agents/stop', { id: a.id }); setTimeout(loadAgents, 1500); };
+    box.appendChild(d);
+  }
+}
+async function openAgent(id) {
+  agentOpen = id; procOpen = null; document.querySelectorAll('.row.active').forEach(x => x.classList.remove('active'));
+  const paint = async () => {
+    let r; try { r = await (await fetch(BASE + '/api/agents/log?id=' + encodeURIComponent(id))).json(); } catch (e) { return false; }
+    const meta = (r.agent || {});
+    $('#vpath').textContent = 'subagente ' + id; $('#vmeta').textContent = meta.status === 'running' ? `● corriendo · ${meta.steps} pasos · log en vivo` : `○ ${meta.status || 'terminado'} · ${meta.steps ?? '?'} pasos · ${meta.tokens ?? '?'} tokens`;
+    const pre = $('#vbody'); pre.className = 'log'; pre.textContent = (r.log || '(sin salida todavía)') + (meta.status && meta.status !== 'running' && meta.text ? '\n\n── informe ──\n' + meta.text : '');
+    return meta.status === 'running';
+  };
+  agentPaint = async () => { if (agentOpen !== id || $('#viewer').style.display === 'none') return; const still = await paint(); if (!still) loadAgents(); };
+  const running = await paint(); showPane('viewer'); $('#stage').scrollTop = $('#stage').scrollHeight;
+  clearInterval(agentTimer); if (running && !events) agentTimer = setInterval(agentPaint, 2000); // respaldo sin stream
+  loadAgents();
+}

package/public/js/app.js

@@ -0,0 +1,21 @@
+// app.js — arranque: config de la cabecera y primera carga de cada sección (se carga último)
+async function loadCfg() {
+  try { cfg = await (await fetch(BASE + '/api/config')).json(); } catch (e) { cfg = {}; }
+  const ws = cfg.workspace || '';
+  $('#proj').textContent = ws.split(/[\\/]/).filter(Boolean).pop() || 'workspace'; $('#proj').title = ws;
+  $('#hpath').textContent = ws; $('#hpath').title = ws;
+  $('#perm').value = localStorage.getItem('lampson.perm') || cfg.permission || 'ask'; $('#perm').onchange = () => localStorage.setItem('lampson.perm', $('#perm').value);
+  paintModel();
+  if (cfg.configured === false) openSetup(true);
+  const sel = $('#agent'); sel.innerHTML = '';
+  for (const a of (cfg.agents || ['build'])) { const o = document.createElement('option'); o.value = a; o.textContent = 'agente: ' + a; sel.appendChild(o); }
+  sel.value = localStorage.getItem('lampson.agent') || 'build';
+  const hint = () => { const p = (cfg.profiles || {})[sel.value]; const t = p ? sel.value + ' · ' + p.tools.join(' · ') : ''; $('#agentHint').textContent = t; $('#agentHint2').textContent = t; };
+  sel.onchange = () => { localStorage.setItem('lampson.agent', sel.value); hint(); }; hint();
+  if (!log.children.length) empty();
+}
+loadCfg().then(() => { loadTree(); loadSessions(); loadProcs(); loadMemory(); loadAgents(); loadMcp(); loadLsp(); loadLamps(); loadTodo(); loadSched(); loadApprovals(); checkUpdate(); const pq = new URLSearchParams(location.search).get('proc'); if (pq) openProc(pq); else if (session) open(session); });
+// respaldos lentos por si el stream de eventos se cae
+setInterval(loadProcs, events ? 60000 : 10000);
+setInterval(() => { loadSched(); if (!events) loadApprovals(); }, events ? 60000 : 15000);
+setInterval(() => { if (!events && ($('#agentCount').textContent.includes('●') || busy)) loadAgents(); }, 5000);

package/public/js/approvals.js

@@ -0,0 +1,26 @@
+// approvals.js — lo que espera tu permiso (lib/approvals.syn), venga del chat o de una tarea programada.
+// Una corrida desatendida que quiere hacer algo peligroso queda esperando acá (y en el webhook/link si están
+// configurados). Las del chat de esta pestaña ya tienen su tarjeta en la conversación; igual aparecen en la lista.
+const apprSeen = new Set();
+async function loadApprovals() {
+  let r; try { r = await (await fetch(BASE + '/api/approvals')).json(); } catch (e) { return; }
+  const list = r.approvals || [], pend = list.filter(a => a.status === 'pending');
+  const box = $('#apprBox'); box.innerHTML = '';
+  $('#apprCount').textContent = pend.length ? `${pend.length} ●` : ''; autoSec('approvals', pend.length > 0);
+  if (!list.length) { box.innerHTML = '<div class="p none" style="cursor:default">ninguna pendiente</div>'; }
+  for (const a of list) {
+    const d = document.createElement('div'); d.className = 'p appr'; const src = a.source === 'chat' ? 'chat' : ('⏰ ' + a.source.replace(/^schedule:?/, ''));
+    d.innerHTML = `<span class="st ${a.status === 'pending' ? 'busy' : ''}"></span><span class="nm">${esc(src)}</span><span class="cm">${a.status === 'pending' ? 'vence ' + esc(fmtWhen(a.expires_at)) : esc(a.status)}</span><span class="msg">${esc(a.message)}</span><span class="why">${esc(a.why)}</span>`
+      + (a.status === 'pending' ? `<span class="btns"><button class="primary" data-ok="1">Permitir</button><button data-ok="0">Denegar</button></span>` : '');
+    d.querySelectorAll('button').forEach(b => b.onclick = async () => { d.querySelectorAll('button').forEach(x => x.disabled = true); await api(BASE + '/api/approve', { id: a.id, decision: b.dataset.ok === '1' }); setTimeout(loadApprovals, 600); });
+    box.appendChild(d);
+  }
+  if (r.public_url === '' && pend.length) { const n = document.createElement('div'); n.className = 'daemon'; n.textContent = 'para aprobar desde el móvil: URL pública + webhook en ⚙'; box.appendChild(n); }
+  // tarjeta en el chat para las que NO vienen de esta conversación (una tarea programada pidiendo permiso)
+  for (const a of pend) {
+    if (a.source === 'chat' || apprSeen.has(a.id)) continue; apprSeen.add(a.id);
+    const el = add('approval', `<div class="card"><div class="why">⚠ ${esc(a.why)} · ${esc(a.source.replace(/^schedule:?/, 'tarea programada '))}</div><code>${esc(a.message)}</code><div class="btns"><button class="primary" data-ok="1">Permitir</button><button data-ok="0">Denegar</button></div></div>`);
+    el.dataset.id = a.id; el.querySelectorAll('button').forEach(b => b.onclick = async () => { el.querySelectorAll('button').forEach(x => x.disabled = true); await api(BASE + '/api/approve', { id: a.id, decision: b.dataset.ok === '1' }); });
+  }
+  for (const a of list) { if (a.status === 'pending') continue; const el = [...log.querySelectorAll('.approval')].find(x => x.dataset.id === a.id); if (el && el.querySelector('.btns button')) el.querySelector('.btns').innerHTML = a.status === 'approved' ? '<span style="color:var(--str)">✓ permitido</span>' : (a.status === 'expired' ? '<span class="denied">✗ sin respuesta, denegado</span>' : '<span class="denied">✗ denegado</span>'); }
+}

package/public/js/chat.js

@@ -0,0 +1,92 @@
+// chat.js — el composer (texto + imágenes), el envío por SSE y el pintado de cada evento del loop
+// ---- imágenes pegadas / arrastradas al composer ----
+// Se reducen en el navegador (lado mayor ≤ 1568 px, el límite útil de los modelos con visión) y viajan como
+// base64 en el POST; PNG si sigue liviano (capturas con texto), JPEG si no. Máximo 4 por mensaje.
+let attachments = []; // [{media_type, data(base64), preview(dataURL), bytes}]
+const MAX_IMAGES = 4, MAX_SIDE = 1568;
+function fmtBytes(n) { return n > 1048576 ? (n / 1048576).toFixed(1) + ' MB' : Math.round(n / 1024) + ' KB'; }
+async function shrinkImage(file) {
+  const url = URL.createObjectURL(file); const img = new Image();
+  await new Promise((ok, ko) => { img.onload = ok; img.onerror = ko; img.src = url; }); URL.revokeObjectURL(url);
+  const scale = Math.min(1, MAX_SIDE / Math.max(img.width, img.height));
+  const c = document.createElement('canvas'); c.width = Math.round(img.width * scale); c.height = Math.round(img.height * scale);
+  c.getContext('2d').drawImage(img, 0, 0, c.width, c.height);
+  let dataUrl = c.toDataURL('image/png'); let type = 'image/png';
+  if (dataUrl.length > 1.4 * 1048576) { dataUrl = c.toDataURL('image/jpeg', 0.85); type = 'image/jpeg'; }
+  const data = dataUrl.slice(dataUrl.indexOf(',') + 1);
+  return { media_type: type, data, preview: dataUrl, bytes: Math.round(data.length * 0.75), w: c.width, h: c.height };
+}
+function paintAttach() {
+  const box = $('#attach'); box.innerHTML = '';
+  if (attachments.length && cfg.vision === false) { const w = document.createElement('div'); w.className = 'novision'; w.textContent = `${cfg.provider} · ${cfg.model} no acepta imágenes: el modelo recibirá solo una nota. Cambiá a un modelo con visión (clic en el modelo, arriba) para que la vea.`; box.appendChild(w); }
+  attachments.forEach((a, i) => { const d = document.createElement('div'); d.className = 'th'; d.title = `${a.w}×${a.h} · ${a.media_type} · ${fmtBytes(a.bytes)}`; d.innerHTML = `<img src="${a.preview}" alt=""><span class="rm" title="quitar">✕</span><span class="sz">${fmtBytes(a.bytes)}</span>`; d.querySelector('.rm').onclick = () => { attachments.splice(i, 1); paintAttach(); }; box.appendChild(d); });
+}
+async function addImages(files) {
+  for (const f of files) {
+    if (!f.type.startsWith('image/')) continue;
+    if (attachments.length >= MAX_IMAGES) { add('meta', `máximo ${MAX_IMAGES} imágenes por mensaje`); break; }
+    try { attachments.push(await shrinkImage(f)); } catch (e) { add('denied', 'no pude leer la imagen: ' + esc(e.message)); }
+  }
+  paintAttach(); $('#in').focus();
+}
+$('#in').addEventListener('paste', e => { const files = [...(e.clipboardData?.items || [])].filter(i => i.kind === 'file').map(i => i.getAsFile()).filter(Boolean); if (files.length) { e.preventDefault(); addImages(files); } });
+const composer = document.querySelector('.composer');
+composer.addEventListener('dragover', e => { e.preventDefault(); composer.classList.add('drop'); });
+composer.addEventListener('dragleave', () => composer.classList.remove('drop'));
+composer.addEventListener('drop', e => { e.preventDefault(); composer.classList.remove('drop'); addImages([...e.dataTransfer.files]); });
+function imagesHtml(ims) { if (!ims || !ims.length) return ''; return '<div class="ims">' + ims.map(im => `<div class="th"><img src="data:${esc(im.media_type)};base64,${im.data}" alt="imagen adjunta"></div>`).join('') + '</div>'; }
+log.addEventListener('click', e => { const im = e.target.closest('.user .th img'); if (im) window.open(im.src, '_blank'); });
+
+// ---- envío (SSE) ----
+let aborter = null;
+function setBusy(b) { busy = b; $('#f').classList.toggle('busy', b); $('#send').disabled = b; }
+$('#stop').onclick = () => { if (aborter) aborter.abort(); };
+async function send(message) {
+  setBusy(true); aborter = new AbortController();
+  if (log.querySelector('.empty')) { log.innerHTML = ''; log.classList.remove('hero'); }
+  const images = attachments.map(a => ({ media_type: a.media_type, data: a.data, w: a.w, h: a.h })); attachments = []; paintAttach();
+  add('user', esc(message) + imagesHtml(images));
+  const thinking = add('working', '<span class="dot"></span><span>pensando…</span>');
+  try {
+    const res = await fetch(BASE + '/api/chat', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ session, message, agent: $('#agent').value || 'build', permission: $('#perm').value || 'ask', images }), signal: aborter.signal });
+    if (!res.ok || !res.body) { add('denied', 'error HTTP ' + res.status + ' ' + esc(await res.text())); }
+    else {
+      const reader = res.body.getReader(); const dec = new TextDecoder(); let buf = '';
+      while (true) {
+        const { value, done } = await reader.read(); if (done) break;
+        buf += dec.decode(value, { stream: true });
+        let i; while ((i = buf.indexOf('\n\n')) >= 0) { const chunk = buf.slice(0, i); buf = buf.slice(i + 2); handle(chunk, thinking); }
+      }
+    }
+  } catch (e) { add('meta', e.name === 'AbortError' ? '■ detenido por vos (el agente para en el próximo paso; el historial queda guardado hasta ahí)' : '‼ ' + esc(e.message)); }
+  thinking.remove(); aborter = null; setBusy(false); loadSessions(); loadTree(); loadProcs(); loadMemory(); loadAgents();
+}
+let pending = null;
+function resultHtml(out, bad) { return `<details><summary class="${bad ? 'bad' : ''}">${esc(out.split('\n')[0].slice(0, 140))} <span style="color:var(--ink-3)">(${out.length} chars)</span></summary><pre>${esc(out)}</pre></details>`; }
+function handle(chunk, thinking) {
+  const data = chunk.split('\n').filter(l => l.startsWith('data:')).map(l => l.slice(5).trim()).join('\n'); if (!data) return;
+  let ev; try { ev = JSON.parse(data); } catch { return; }
+  const k = ev.kind, d = ev.data;
+  if (k === 'session') { const changed = d !== session; session = d; localStorage.setItem('lampson.session', d); if (changed) loadTodo(); }
+  else if (k === 'assistant') add('assistant', md(d));
+  else if (k === 'tool_call') { thinking.querySelector('span:last-child').textContent = 'ejecutando ' + esc(d.name) + '…'; pending = add('step', `<span class="ic">⚙</span>${cmdHtml(describe(d))}`); wireMore(pending); if (d.name === 'process') setTimeout(loadProcs, 2500); if (d.name === 'delegate') { setTimeout(loadAgents, 800); setTimeout(loadAgents, 4000); } if (d.name === 'todo') setTimeout(loadTodo, 300); if (d.name === 'lamp') setTimeout(loadLamps, 300); if (d.name === 'lsp') setTimeout(loadLsp, 1500); }
+  else if (k === 'inbox') { add('meta', '✉ ' + esc(String(d).split('\n')[0].slice(0, 160))); loadAgents(); }
+  else if (k === 'tool_result') { const out = String(d.output); const bad = /^(ERROR|DENIED)/.test(out);
+    if (!bad && d.call && /^(write|edit|bash|process|delegate|lamp|skill)$/.test(d.call.name)) treeChanged();
+    if (d.call && d.call.name === 'schedule') { setTimeout(loadSched, 300); if (/^scheduled '/.test(out)) setSec('sched', true); }
+    // lámpara recién creada: avisar en el chat con un acceso directo al switch (el modelo no sabe cómo se enciende en esta UI)
+    if (d.call && d.call.name === 'lamp' && /^lamp '([^']+)' created/.test(out)) { const nm = out.match(/^lamp '([^']+)' created/)[1]; const m = add('meta', `☼ lámpara <b>${esc(nm)}</b> creada — está apagada: <a href="#" class="lampgo">encenderla en «lámparas»</a>`); m.querySelector('.lampgo').onclick = (ev) => { ev.preventDefault(); openLamps(nm); }; $('#lamps').classList.add('new'); setTimeout(() => $('#lamps').classList.remove('new'), 4000); }
+    const el = pending || add('step', '<span class="ic">→</span>'); pending = null; thinking.querySelector('span:last-child').textContent = 'pensando…'; const ic = el.querySelector('.ic'); if (ic) { ic.textContent = bad ? '✗' : '✓'; ic.className = 'ic ' + (bad ? 'bad' : 'ok'); } el.insertAdjacentHTML('beforeend', resultHtml(out, bad)); }
+  else if (k === 'approval_request') { const el = add('approval', `<div class="card"><div class="why">⚠ ${esc(d.why)}</div><code>${esc(describe({name: d.name, args: d.args}))}</code><div class="btns"><button class="primary" data-ok="1">Permitir</button><button data-ok="0">Denegar</button></div></div>`); el.querySelectorAll('button').forEach(b => b.onclick = async () => { el.querySelectorAll('button').forEach(x => x.disabled = true); await api(BASE + '/api/approve', { id: d.id, decision: b.dataset.ok === '1' }); }); el.dataset.id = d.id; }
+  else if (k === 'approval_result') { const el = [...log.querySelectorAll('.approval')].find(x => x.dataset.id === d.id); if (el) el.querySelector('.btns').innerHTML = d.approved ? '<span style="color:var(--str)">✓ permitido</span>' : (d.timeout ? '<span class="denied">✗ sin respuesta, denegado</span>' : '<span class="denied">✗ denegado</span>'); }
+  else if (k === 'mode') { $('#agent').value = d.agent; $('#perm').value = d.permission; if (d.has_key === false) { add('denied', `‼ no hay API key para ${esc(d.provider)} — cargala en la ventana de modelo (clic en «${esc(d.provider)} · ${esc(d.model)}» arriba)`); } }
+  else if (k === 'tool_denied') { const el = pending || add('step', '<span class="ic">✗</span>'); el.insertAdjacentHTML('beforeend', `<span class="denied"> ✗ ${esc(d.reason)}</span>`); }
+  // el hint de "modelo inválido" solo cuando el error realmente habla de eso
+  else if (k === 'error') { add('denied', '‼ ' + esc(d)); if (/(invalid|unknown|no such|not exist|not found|unsupported).{0,30}model|model.{0,30}(invalid|unknown|does not exist|not found|unsupported)/i.test(String(d))) add('meta', `el proveedor rechazó el nombre del modelo (${esc(cfg.model || '')}) — clic en «${esc(cfg.provider || '')} · ${esc(cfg.model || '')}» arriba: la lista de modelos válidos aparece al elegir el proveedor`); }
+  else if (k === 'compact') add('meta', '⧗ compactando contexto (~' + d.before + ' tokens)');
+  else if (k === 'done') { if (d.stopped !== 'user_command') add('meta', `${d.steps} paso${d.steps === 1 ? '' : 's'} · ${d.usage.input + d.usage.output} tokens · ${d.stopped}`); }
+  log.appendChild(thinking); $('#stage').scrollTop = $('#stage').scrollHeight;
+}
+$('#f').onsubmit = e => { e.preventDefault(); const t = $('#in').value.trim(); if ((!t && !attachments.length) || busy) return; $('#in').value = ''; send(t || '(imagen adjunta)'); };
+$('#in').addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (!busy) $('#f').requestSubmit(); } });
+$('#in').addEventListener('input', () => { const t = $('#in'); t.style.height = 'auto'; t.style.height = Math.min(t.scrollHeight, 220) + 'px'; });

package/public/js/config.js

@@ -0,0 +1,100 @@
+// config.js — configuración (⚙) y proveedor/modelo/key: UNA vista browse del Panel. Secciones a la izquierda
+// (General · Aprobaciones a distancia · Proveedor), su formulario a la derecha. Cada cosa configurable nueva
+// entra como una sección más. Los valores fijados en .env se muestran bloqueados; la API key nunca vuelve.
+let setupSel = '';
+function paintModel() {
+  const p = (cfg.providers || []).find(x => x.name === cfg.provider);
+  $('#model').textContent = cfg.provider ? `${cfg.provider} · ${cfg.model || ''}` : '';
+  $('#model').classList.toggle('nokey', !!p && !p.has_key);
+  $('#model').style.display = cfg.provider ? '' : 'none';
+}
+const CFG_SECTIONS = [
+  { id: 'general', name: 'General', meta: 'zona horaria' },
+  { id: 'approvals', name: 'Aprobaciones a distancia', meta: 'URL pública · webhook' },
+  { id: 'provider', name: 'Proveedor', meta: 'modelo · API key' }
+];
+function cfgField(v, key, label, placeholder, ds, type) {
+  return `<label class="col">${label}<input name="${key}" type="${type || 'text'}" spellcheck="false" autocomplete="off" placeholder="${esc(placeholder)}" value="${esc(v[key] || '')}" ${v[key + '_from_env'] ? 'disabled title="fijado en .env (LAMPSON_' + key.toUpperCase() + '): editalo ahí"' : ''}><span class="ds">${ds}</span></label>`;
+}
+async function openCfg(section, onboarding) {
+  let r; try { r = await (await fetch(BASE + '/api/settings/values')).json(); } catch (e) { r = { values: {} }; }
+  const v = r.values || {};
+  Panel.open({
+    id: 'config', eyebrow: 'configuración', title: onboarding ? 'Bienvenido a Lampson' : 'Configuración', sub: 'lampson/.lampson/config.json', layout: 'browse', noClose: !!onboarding,
+    select: section || 'general',
+    browse: {
+      placeholder: 'buscar…', listWidth: '260px', nodot: true, key: s => s.id,
+      load: async (q) => CFG_SECTIONS.filter(s => !q || (s.name + ' ' + s.meta).toLowerCase().includes(q.toLowerCase())),
+      render: (s) => `<div><div class="nm">${esc(s.name)}</div><div class="meta">${esc(s.meta)}</div></div>`,
+      count: (rows) => `${rows.length} secciones`,
+      detail: (s) => {
+        if (s.id === 'general') return `<div class="dhead"><span class="nm serif">General</span></div><div class="dform"><p class="lead">Se guarda en <code>lampson/.lampson/config.json</code> (local). Un valor fijado en <code>.env</code> gana y se muestra bloqueado.</p>`
+          + cfgField(v, 'tz', 'zona horaria', '-03:00', 'para «daily 09:00» y los horarios de las tareas programadas · vacío = la del sistema' + (typeof r.tz_detected === 'number' ? ` (ahora: ${fmtOff(r.tz_detected)})` : ''))
+            + cfgField(v, 'idle_hours', 'apagar workspaces inactivos tras', '4', 'horas sin uso tras las que el hub apaga el proceso de un workspace (vuelve a arrancar al abrirlo, en 1-2 s) - 0 = nunca - los que tienen tareas programadas encendidas o politica siempre vivo no se apagan')
+          + `<div class="pfoot"><button class="primary" data-save>Guardar</button><span class="derr"></span></div></div>`;
+        if (s.id === 'approvals') return `<div class="dhead"><span class="nm serif">Aprobaciones a distancia</span></div><div class="dform"><p class="lead">Cuando una tarea programada (o el chat) necesita tu permiso, además de aparecer acá puede avisarte a tu canal con <b>links de un solo uso</b> para permitir o denegar desde el teléfono.</p>`
+          + cfgField(v, 'public_url', 'URL pública', 'https://lampson.midominio.com', 'por dónde se llega a este lampson desde afuera (túnel, VPS, edge con TLS); con esto cada aprobación trae links <code>/approve/&lt;id&gt;/&lt;token&gt;?d=yes|no</code>')
+          + cfgField(v, 'webhook_url', 'webhook', 'https://hooks.example.com/lampson', 'POST JSON por cada aprobación pendiente (id, mensaje, links); reenvialo a Telegram, Slack o mail con n8n, un bot o un .syn de 6 líneas')
+          + `<label class="col">secreto del webhook<input name="webhook_secret" type="password" spellcheck="false" autocomplete="off" placeholder="${v.has_webhook_secret ? '● guardado — escribí uno nuevo para cambiarlo' : 'opcional'}"><span class="ds">firma HMAC-SHA256 del body en <code>X-Lampson-Signature</code>; dejá vacío para no cambiarlo</span></label>`
+          + `<div class="pfoot"><button class="primary" data-save>Guardar</button><span class="derr"></span></div></div>`;
+        // proveedor / modelo / key
+        setupSel = cfg.provider || (cfg.providers || [])[0]?.name || '';
+        const rows = (cfg.providers || []).map(p => `<div class="pr ${p.name === setupSel ? 'on' : ''}" data-name="${esc(p.name)}"><b>${esc(p.name)}</b><span class="dm">${esc(p.model)}</span><span class="k ${p.has_key ? '' : 'no'}">${p.name === 'ollama' ? 'sin key' : (p.has_key ? '● key guardada' : '○ sin key')}</span></div>`).join('');
+        return `<div class="dhead"><span class="nm serif">${onboarding ? 'Bienvenido a Lampson' : 'Proveedor y modelo'}</span></div><div class="dform"><p class="lead">${onboarding ? 'Un agente con herramientas acotadas a este proyecto. Para empezar, elegí un proveedor y pegá su API key.' : 'Elegí con qué modelo trabaja el agente (vale para la web y la terminal).'} La API key queda en <code>lampson/.lampson/config.json</code>, solo en esta máquina; nunca vuelve al navegador.</p>
+          <div class="plist">${rows}</div>
+          <label>modelo <input name="model" spellcheck="false" autocomplete="off" list="modelList"></label>
+          <label>API key <input name="key" type="password" spellcheck="false" autocomplete="off" placeholder="pegala acá"></label>
+          <datalist id="modelList"></datalist>
+          <div class="pfoot"><button class="primary" data-save-provider>Guardar</button><span class="derr"></span></div></div>`;
+      },
+      wire: (s, box) => {
+        const err = (t) => { const e = box.querySelector('.derr'); if (e) e.textContent = t || ''; };
+        const save = box.querySelector('[data-save]');
+        if (save) save.onclick = async () => {
+          const body = {};
+          for (const key of ['tz', 'public_url', 'webhook_url', 'idle_hours']) { const el = box.querySelector(`[name="${key}"]`); if (el && !el.disabled) body[key] = el.value.trim(); }
+          const sec = box.querySelector('[name="webhook_secret"]'); if (sec && sec.value.trim()) body.webhook_secret = sec.value.trim();
+          if (body.tz && !/^[+-]?\d{1,2}(:?\d{2})?$/.test(body.tz)) { err('zona horaria: usá -03:00 o +0200'); return; }
+          if (body.idle_hours && !/^[0-9]+([.][0-9]+)?$/.test(body.idle_hours)) { err('inactividad: horas (0 = nunca)'); return; }
+          err('guardando…');
+          const r2 = await api(BASE + '/api/settings/values', body);
+          if (!r2.ok) { err(r2.data.error || ('error ' + r2.status)); return; }
+          Object.assign(v, r2.data.values || {}); err('✓ guardado'); add('meta', '⚙ configuración guardada'); loadSched(); loadApprovals();
+        };
+        const saveP = box.querySelector('[data-save-provider]');
+        if (saveP) {
+          const f = n => box.querySelector(`[name="${n}"]`);
+          const fill = () => {
+            const p = (cfg.providers || []).find(x => x.name === setupSel) || {};
+            f('model').value = setupSel === cfg.provider ? (cfg.model || p.model || '') : (p.model || ''); f('model').placeholder = p.model || '';
+            // modelos válidos según la API del proveedor (evita tipear "DeepSeek-V4-Pro" cuando la API quiere "deepseek-v4-pro")
+            const dl = box.querySelector('#modelList'); dl.innerHTML = ''; f('model').title = '';
+            if (p.has_key || setupSel === 'ollama') fetch(BASE + '/api/models?provider=' + encodeURIComponent(setupSel)).then(r => r.json()).then(d => { if (setupSel !== p.name) return; if (d.error) { f('model').title = 'no pude listar modelos: ' + d.error; return; } dl.innerHTML = (d.models || []).map(m => `<option value="${esc(m)}">`).join(''); f('model').title = (d.models || []).length ? 'modelos disponibles: ' + d.models.join(', ') : ''; }).catch(() => {});
+            f('key').value = ''; f('key').disabled = setupSel === 'ollama';
+            f('key').placeholder = setupSel === 'ollama' ? 'ollama no necesita key' : (p.has_key ? 'hay una key guardada · pegá otra para reemplazarla' : 'pegala acá');
+          };
+          box.querySelectorAll('.pr').forEach(r => r.onclick = () => { setupSel = r.dataset.name; box.querySelectorAll('.pr').forEach(x => x.classList.toggle('on', x.dataset.name === setupSel)); fill(); });
+          fill(); if (onboarding) f('key').focus();
+          f('key').addEventListener('keydown', e => { if (e.key === 'Enter') saveP.click(); });
+          saveP.onclick = async () => {
+            const body = { provider: setupSel, model: f('model').value.trim() }; if (f('key').value.trim()) body.key = f('key').value.trim();
+            const p = (cfg.providers || []).find(x => x.name === setupSel) || {};
+            if (setupSel !== 'ollama' && !p.has_key && !body.key) { err('falta la API key'); return; }
+            saveP.disabled = true;
+            try {
+              const r2 = await api(BASE + '/api/settings', body);
+              if (!r2.ok) { err(r2.data.error || ('error ' + r2.status)); return; }
+              const d = r2.data; cfg.providers = d.providers; cfg.provider = d.provider; cfg.model = d.model; cfg.vision = d.vision; cfg.configured = d.configured; paintModel(); paintAttach();
+              if (onboarding) { Panel.close(); if (log.querySelector('.empty')) empty(); } else { err('✓ guardado'); Panel.detail(); }
+            } catch (e) { err(e.message); } finally { saveP.disabled = false; }
+          };
+        }
+      }
+    }
+  });
+}
+// proveedor: la pill de la cabecera y el onboarding abren la misma vista, parados en «Proveedor»
+function openSetup(onboarding) { openCfg('provider', onboarding); }
+$('#cfgBtn').onclick = () => openCfg('general');
+$('#model').onclick = () => openSetup(false);
+if (location.hash === '#config') setTimeout(() => openCfg('general'), 400);

package/public/js/core.js

@@ -0,0 +1,91 @@
+// core.js — estado compartido y helpers que usan todos los módulos (se carga primero)
+const $ = s => document.querySelector(s);
+// detrás del hub la UI vive en /w/<slug>/ y su API en /w/<slug>/api/…; standalone (sin hub) BASE = ''
+const BASE = (location.pathname.match(/^\/w\/[^/]+/) || [''])[0];
+const WS_SLUG = BASE ? BASE.slice(3) : '';
+const log = $('#log');
+let session = new URLSearchParams(location.search).get('session') || localStorage.getItem('lampson.session') || '';
+let busy = false; let cfg = {};
+
+function esc(s) { return String(s ?? '').replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])); }
+function md(src) { // Markdown mínimo: code fences, inline code, bold, headers, listas, párrafos
+  const blocks = []; src = String(src ?? '').replace(/```(\w*)\n([\s\S]*?)```/g, (m, l, c) => { blocks.push('<pre><code>' + esc(c) + '</code></pre>'); return '\uE000' + (blocks.length - 1) + '\uE001'; }); // marcador = índice entre U+E000/U+E001, NUNCA dígitos a secas (se perdieron dos veces al reescribir el archivo y todo número salía undefined)
+  let h = esc(src).replace(/`([^`\n]+)`/g, '<code>$1</code>').replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>');
+  h = h.split(/\n{2,}/).map(p => {
+    if (/^\uE000\d+\uE001$/.test(p.trim())) return p;
+    if (/^#{1,3} /.test(p)) return '<h3>' + p.replace(/^#{1,3} /, '') + '</h3>';
+    if (/^(\s*[-*] .*\n?)+$/.test(p)) return '<ul>' + p.split('\n').map(l => '<li>' + l.replace(/^\s*[-*] /, '') + '</li>').join('') + '</ul>';
+    if (/^(\s*\d+[.)] .*\n?)+$/.test(p)) return '<ol>' + p.split('\n').map(l => '<li>' + l.replace(/^\s*\d+[.)] /, '') + '</li>').join('') + '</ol>';
+    return '<p>' + p.replace(/\n/g, '<br>') + '</p>';
+  }).join('');
+  return h.replace(/\uE000(\d+)\uE001/g, (m, i) => blocks[+i]);
+}
+// un bloque en el chat: 'user' | 'assistant' | 'step' | 'meta' | 'denied' | 'approval' | 'working'
+function add(cls, html) { showPane('log'); log.classList.remove('hero'); const d = document.createElement('div'); d.className = 'msg ' + cls; d.innerHTML = html; log.appendChild(d); $('#stage').scrollTop = $('#stage').scrollHeight; return d; }
+function describe(c) { const a = c.args || {}; if (c.name === 'bash') return '$ ' + (a.command || ''); if (c.name === 'delegate') return 'delegate → ' + a.agent + ': ' + String(a.brief || '').slice(0, 80); if (a.path) return c.name + ' ' + a.path; if (a.pattern) return c.name + ' ' + a.pattern; if (a.name) return c.name + ' ' + a.name; return c.name + ' ' + JSON.stringify(a); }
+function cmdHtml(text) { const t = String(text); const long = t.length > 220 || t.split('\n').length > 4; return `<span class="cmd">${esc(t)}</span>` + (long ? ' <span class="more">ver todo</span>' : ''); }
+function wireMore(el) { const m = el.querySelector('.more'); if (m) m.onclick = () => { el.querySelector('.cmd').classList.toggle('open'); m.textContent = el.querySelector('.cmd').classList.contains('open') ? 'menos' : 'ver todo'; }; }
+// POST JSON → {ok, status, data}
+async function api(path, body) {
+  const r = await fetch(path, body === undefined ? {} : { 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 };
+}
+// zona central: 'log' | 'viewer' | 'term'
+function showPane(which) {
+  log.style.display = which === 'log' ? '' : 'none';
+  $('#viewer').style.display = which === 'viewer' ? 'block' : 'none';
+  $('#termpane').style.display = which === 'term' ? 'flex' : 'none';
+  // volver al chat = al final de la conversación (el viewer de archivos deja el scroll de #stage arriba)
+  if (which === 'log') $('#stage').scrollTop = $('#stage').scrollHeight;
+}
+// visor de texto (archivo, log, traza, memoria): título, meta y contenido plano
+function showText(title, meta, text, toEnd) {
+  $('#vpath').textContent = title; $('#vmeta').textContent = meta || '';
+  const pre = $('#vbody'); pre.className = 'log'; pre.textContent = text;
+  showPane('viewer'); $('#stage').scrollTop = toEnd ? $('#stage').scrollHeight : 0;
+}
+// confirmación en línea (sin confirm() del navegador): el ✕ se convierte en «¿borrar? sí · no»
+function inlineConfirm(el, label, onYes) {
+  const prev = el.innerHTML; el.classList.add('ask');
+  el.innerHTML = `<span class="q">${esc(label)}</span> <span class="yes">sí</span> · <span class="no">no</span>`;
+  const restore = () => { el.innerHTML = prev; el.classList.remove('ask'); };
+  el.querySelector('.yes').onclick = (ev) => { ev.stopPropagation(); onYes(); };
+  el.querySelector('.no').onclick = (ev) => { ev.stopPropagation(); restore(); };
+  setTimeout(() => { if (el.classList.contains('ask')) restore(); }, 6000);
+}
+const debounces = {};
+function debounce(key, fn, ms) { clearTimeout(debounces[key]); debounces[key] = setTimeout(fn, ms); }
+function fmtWhen(ts) { if (!ts) return '—'; return new Date(ts * 1000).toLocaleString(undefined, { weekday: 'short', day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }); }
+function fmtIso(s) { return String(s || '').replace('T', ' ').replace('Z', ''); }
+function fmtOff(sec) { const a = Math.abs(sec), h = Math.floor(a / 3600), m = Math.floor((a % 3600) / 60); return (sec < 0 ? '-' : '+') + String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0'); }
+function hl(s, q) { const t = esc(s); if (!q) return t; const i = t.toLowerCase().indexOf(q.toLowerCase()); return i < 0 ? t : t.slice(0, i) + '<mark>' + t.slice(i, i + q.length) + '</mark>' + t.slice(i + q.length); }
+// portada cuando no hay conversación
+function empty() {
+  const name = (cfg.workspace || '').split(/[\\/]/).filter(Boolean).pop() || 'workspace';
+  log.classList.add('hero');
+  log.innerHTML = `<div class="empty">
+    <p class="eyebrow">workspace</p>
+    <h1>${esc(name)}</h1>
+    <p class="lead">Un agente con herramientas acotadas a este proyecto. Vos pedís; él lee, busca, edita y corre comandos — y cada paso queda a la vista.</p>
+    <div class="grid">
+      <div class="card"><h3>Probá</h3>
+        <p><span class="try">Explicame la estructura de este proyecto</span></p>
+        <p><span class="try">¿Dónde está el punto de entrada y qué hace?</span></p>
+        <p><span class="try">Buscá TODOs y proponé un plan para resolverlos</span></p>
+        <p><span class="try">Corré los tests y contame qué falla</span></p></div>
+      <div class="card"><h3>Agentes</h3>
+        <p><span class="k">build</span> edita y ejecuta (por defecto)</p>
+        <p><span class="k">plan</span> solo lectura: investiga y propone</p>
+        <p><span class="k">review</span> lee y corre tests, no edita</p>
+        <p><span class="k">explore</span> localiza código</p></div>
+      <div class="card"><h3>Qué puede tocar</h3>
+        <p>Solo archivos dentro de <code>${esc(name)}/</code>.</p>
+        <p>Comandos peligrosos (<code>rm -rf</code>, <code>git push --force</code>, <code>sudo</code>…) según el selector <span class="k">permisos</span>: preguntar, permitir todo o denegar.</p>
+        <p>Lo destructivo del sistema se bloquea siempre.</p></div>
+      <div class="card"><h3>Cómo lo ve el modelo</h3>
+        <p>Cada tool y su resultado — errores y rechazos incluidos — queda en el historial y se le reenvía en cada turno.</p>
+        <p>Hacé clic en un archivo del panel de archivos para verlo. Un mensaje que empieza con <code>!</code> lo corrés vos, sin el modelo.</p></div>
+    </div></div>`;
+  log.querySelectorAll('.try').forEach(el => el.onclick = () => { $('#in').value = el.textContent; $('#in').focus(); });
+}

package/public/js/events.js

@@ -0,0 +1,31 @@
+// events.js — eventos en vivo (SSE /api/events, alimentado por el bus de Synsema)
+// Los supervisores de procesos publican cada línea y cambio de estado; los subagentes, inicio/fin/pasos; las
+// tareas programadas y aprobaciones, sus cambios. La UI reacciona a eso (con un pequeño debounce) en vez de
+// recargar por timer; los timers quedan como respaldo lento por si el stream se cae (reconexión con backoff).
+let events = null, evBackoff = 1000;
+function connectEvents() {
+  try { events = new EventSource(BASE + '/api/events'); } catch (e) { events = null; return; }
+  events.onopen = () => { evBackoff = 1000; };
+  events.addEventListener('event', e => {
+    let ev; try { ev = JSON.parse(e.data); } catch { return; }
+    const t = ev.topic || '';
+    if (t.startsWith('proc.')) {
+      const name = ev.data && ev.data.name;
+      if (!ev.data || ev.data.line === undefined) debounce('procs', loadProcs, 300);        // cambio de estado
+      if (name && procOpen === name) debounce('procview', () => refreshProcViewer(name), 250);
+    } else if (t.startsWith('mcp.')) {
+      debounce('mcp', loadMcp, 300);
+    } else if (t.startsWith('schedule.')) {
+      debounce('sched', loadSched, 300);
+      if (t === 'schedule.done' && ev.data) { setTimeout(loadSessions, 800); add('meta', `⏰ <b>${esc(ev.data.name)}</b> terminó: ${esc(ev.data.status)} — <a href="#" class="schedgo">ver</a>`).querySelector('.schedgo').onclick = (e2) => { e2.preventDefault(); openSched(ev.data.id); }; }
+    } else if (t.startsWith('approval.')) {
+      debounce('appr', loadApprovals, 200);
+    } else if (t.startsWith('subagent.')) {
+      debounce('agents', loadAgents, 300);
+      const id = t.slice('subagent.'.length);
+      if (id && agentOpen === id && agentPaint) debounce('agentview', agentPaint, 250);
+    }
+  });
+  events.onerror = () => { events.close(); events = null; setTimeout(connectEvents, evBackoff); evBackoff = Math.min(evBackoff * 2, 30000); };
+}
+connectEvents();

package/public/js/hub.js

@@ -0,0 +1,40 @@
+// hub.js — la pantalla de workspaces (public/hub.html): tarjetas + el mismo Panel de workspaces que usa la UI de un
+// workspace (js/workspaces.js) para crear/encender/apagar. Sin core.js: acá no hay chat.
+const $ = s => document.querySelector(s);
+const BASE = '', WS_SLUG = '';
+function esc(s) { return String(s ?? '').replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])); }
+async function api(path, body) { const r = await fetch(path, body === undefined ? {} : { 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 fmtWhen(ts) { if (!ts) return '—'; return new Date(ts * 1000).toLocaleString(undefined, { weekday: 'short', day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }); }
+function inlineConfirm(el, label, onYes) {
+  const prev = el.innerHTML; el.classList.add('ask');
+  el.innerHTML = `<span class="q">${esc(label)}</span> <span class="yes">sí</span> · <span class="no">no</span>`;
+  const restore = () => { el.innerHTML = prev; el.classList.remove('ask'); };
+  el.querySelector('.yes').onclick = (ev) => { ev.stopPropagation(); onYes(); };
+  el.querySelector('.no').onclick = (ev) => { ev.stopPropagation(); restore(); };
+  setTimeout(() => { if (el.classList.contains('ask')) restore(); }, 6000);
+}
+// tema
+const SUN = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2.7v2.1M12 19.2v2.1M2.7 12h2.1M19.2 12h2.1M5.3 5.3l1.5 1.5M17.2 17.2l1.5 1.5M18.7 5.3l-1.5 1.5M6.8 17.2l-1.5 1.5"/></svg>';
+const MOON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M20.2 14.6A8.6 8.6 0 0 1 9.4 3.8a8.6 8.6 0 1 0 10.8 10.8z"/></svg>';
+function paintTheme() { const light = document.documentElement.getAttribute('data-theme') === 'light'; $('#theme').innerHTML = light ? MOON : SUN; }
+$('#theme').onclick = () => { const r = document.documentElement; r.setAttribute('data-theme', r.getAttribute('data-theme') === 'light' ? 'dark' : 'light'); try { localStorage.setItem('lampson.theme', r.getAttribute('data-theme')); } catch (e) {} paintTheme(); };
+paintTheme();
+// tarjetas
+async function paintGrid() {
+  const grid = $('#wsGrid'); let r; try { r = await (await fetch(BASE + '/api/workspaces')).json(); } catch (e) { grid.innerHTML = '<div class="card"><p>el hub no responde</p></div>'; return; }
+  wsList = r.workspaces || []; wsIdle = r.idle_hours;
+  grid.innerHTML = '';
+  for (const w of wsList) {
+    const c = document.createElement('a'); c.className = 'card ws' + (w.alive ? ' on' : ''); c.href = w.url;
+    c.innerHTML = `<h3>${w.alive ? '● vivo' : '○ apagado'}${w.schedules_on ? ' · ⏰ ' + w.schedules_on : ''}</h3><p class="nm">${esc(w.name)}</p><p class="pth">${esc(w.path)}</p><p class="meta">último uso ${esc(fmtWhen(w.last_used))}</p>`;
+    grid.appendChild(c);
+  }
+  const add = document.createElement('a'); add.className = 'card ws new'; add.href = '#'; add.innerHTML = '<h3>+</h3><p class="nm">nuevo workspace</p><p class="pth">elegí una carpeta de tu disco</p>';
+  add.onclick = (e) => { e.preventDefault(); openWorkspaces('__new'); };
+  grid.appendChild(add);
+  const all = document.createElement('a'); all.className = 'card ws'; all.href = '#'; all.innerHTML = '<h3>⌕</h3><p class="nm">gestionar</p><p class="pth">encender, apagar, política de vida, quitar</p>';
+  all.onclick = (e) => { e.preventDefault(); openWorkspaces(); };
+  grid.appendChild(all);
+}
+paintGrid();
+setInterval(paintGrid, 10000);

package/public/js/lamps.js

@@ -0,0 +1,112 @@
+// lamps.js — lámparas (plugins de tools): pill en la cabecera + vista browse del Panel (lista, detalle con
+// switch, tools con formulario generado del schema, correr, borrar) y la ayuda «?».
+let lampsData = [], lampsMeta = { global: 'lamps/', project: '.lampson/lamps/' };
+async function fetchLamps() {
+  let r; try { r = await (await fetch(BASE + '/api/lamps')).json(); } catch (e) { return lampsData; }
+  lampsData = r.lamps || []; lampsMeta = { global: r.global || 'lamps/', project: r.project || '.lampson/lamps/' };
+  const on = lampsData.filter(l => l.enabled).length;
+  const pill = $('#lamps'); pill.textContent = lampsData.length ? `lámparas ${on}/${lampsData.length}` : 'lámparas'; pill.classList.toggle('on', on > 0);
+  return lampsData;
+}
+async function loadLamps() { await fetchLamps(); if (Panel.is('lamps')) Panel.refresh(); }
+function lampMatches(l, q) {
+  if (!q) return true;
+  const hay = [l.name, l.description || '', l.scope, l.kind, ...(l.tools || [])].join(' ').toLowerCase();
+  return q.toLowerCase().split(/\s+/).every(t => hay.includes(t));
+}
+function lampField(k, p, required) {
+  const def = p.default !== undefined ? p.default : ''; const req = required.includes(k) ? ' <span class="req">(obligatorio)</span>' : '';
+  let input;
+  if (Array.isArray(p.enum)) input = `<select data-k="${esc(k)}">${p.enum.map(v => `<option value="${esc(String(v))}" ${String(v) === String(def) ? 'selected' : ''}>${esc(String(v))}</option>`).join('')}</select>`;
+  else if (p.type === 'boolean') input = `<select data-k="${esc(k)}"><option value="false" ${def === true ? '' : 'selected'}>no</option><option value="true" ${def === true ? 'selected' : ''}>sí</option></select>`;
+  else if (p.type === 'object' || p.type === 'array') input = `<textarea data-k="${esc(k)}" data-json="1" spellcheck="false" placeholder="JSON">${esc(def === '' ? (p.type === 'array' ? '[]' : '{}') : JSON.stringify(def, null, 1))}</textarea>`;
+  else input = `<input data-k="${esc(k)}" type="${p.type === 'integer' || p.type === 'number' ? 'number' : 'text'}" value="${esc(String(def))}" placeholder="${esc(p.type || 'texto')}">`;
+  return `<label class="lf"><span class="lk">${esc(k)}${req}</span>${input}${p.description ? `<span class="ds">${esc(p.description)}</span>` : ''}</label>`;
+}
+// lee los campos de una tool → args (o {error})
+function lampArgs(tdiv, props, required) {
+  const args = {};
+  for (const el of tdiv.querySelectorAll('[data-k]')) {
+    const k = el.dataset.k, p = props[k] || {}; let v = el.value;
+    if (el.dataset.json) { if (!v.trim()) continue; try { v = JSON.parse(v); } catch (e) { return { error: `${k}: JSON inválido` }; } }
+    else if (p.type === 'boolean') v = v === 'true';
+    else if (p.type === 'integer' || p.type === 'number') { if (v === '') { if (required.includes(k)) return { error: `${k} es obligatorio` }; continue; } v = Number(v); }
+    else if (v === '') { if (required.includes(k)) return { error: `${k} es obligatorio` }; continue; }
+    args[k] = v;
+  }
+  return { args };
+}
+const LAMPS_HELP = `<h4>Herramientas hechas a medida para este proyecto</h4>
+  <p>Una lámpara es una tool que el agente (o vos) escribe para <em>este</em> repo: una carpeta con <code>lamp.json</code> y el código — en Synsema (corre bajo un techo de capacidades que no puede superar) o en cualquier lenguaje (<code>python</code>, <code>node</code>, un binario). A diferencia de un script suelto, el modelo la ve en su catálogo con parámetros tipados, vos la podés correr desde acá, y queda en el repo para la próxima sesión.</p>
+  <p><b>Pedila en el chat</b> — <i>«hacé una lámpara que liste los endpoints del backend»</i>. El agente la escribe en <code data-project></code>, la valida y te pide encenderla acá.</p>
+  <p><b>Encendida = existe</b> — apagada, el agente ni la ve. Al encenderla, sus tools entran al catálogo como <code>lamp_&lt;lámpara&gt;_&lt;tool&gt;</code> desde el próximo turno. Las globales viven en <code data-global></code> y valen para todos los proyectos.</p>
+  <p><b>Ejemplos</b></p>
+  <ul>
+    <li><b>Consultas del proyecto</b> — <code>endpoints()</code> que parsea tus rutas y devuelve método + path + handler; <code>env_keys()</code> usadas vs. definidas en <code>.env.example</code>.</li>
+    <li><b>Generadores con tus convenciones</b> — <code>new_component(name)</code> que crea el <code>.tsx</code> + test + story con tu plantilla exacta.</li>
+    <li><b>Checkers</b> — <code>check_i18n()</code> claves faltantes por idioma; <code>lint_styles()</code> colores hardcodeados fuera de tus tokens.</li>
+    <li><b>Datos locales</b> — <code>db_schema()</code> / <code>query(sql)</code> contra tu SQLite con techo <code>db=./dev.db</code>.</li>
+    <li><b>Integraciones sin MCP</b> — <code>deploy_status()</code> contra tu API con techo <code>net=api.x.com</code>.</li>
+  </ul>
+  <p><button class="primary" data-back>← volver a las lámparas</button></p>`;
+function openLamps(selectName) {
+  let first = selectName || null;
+  Panel.open({
+    id: 'lamps', eyebrow: 'lámparas', title: 'Lámparas', layout: 'browse',
+    headActions: [{ label: '?', title: '¿qué es una lámpara?', onClick: (b) => { Panel.help(true); const h = b.querySelector('.phelp'); h.querySelector('[data-project]').textContent = lampsMeta.project; h.querySelector('[data-global]').textContent = lampsMeta.global; h.querySelector('[data-back]').onclick = () => Panel.help(false); } }],
+    browse: {
+      placeholder: 'buscar lámpara o tool…', listWidth: '260px', help: LAMPS_HELP,
+      key: l => l.name,
+      load: async (q) => { const all = await fetchLamps(); const list = all.filter(l => lampMatches(l, q)); if (first) { const i = list.findIndex(l => l.name === first); first = null; if (i > 0) list.unshift(list.splice(i, 1)[0]); } return list; },
+      render: (l) => `<span class="dot">${l.error ? '!' : (l.enabled ? '●' : '○')}</span><div><div class="nm">${esc(l.name)}</div><div class="meta">${esc(l.scope)} · ${esc(l.kind)} · ${(l.tools || []).length} tool${(l.tools || []).length === 1 ? '' : 's'}${l.error ? ' · rota' : ''}</div></div>`,
+      count: (rows, q) => q ? `${rows.length} de ${lampsData.length}` : `${lampsData.length} lámpara${lampsData.length === 1 ? '' : 's'}`,
+      emptyHtml: 'ninguna todavía',
+      emptyDetail: `Todavía no hay lámparas.<br><br>Pedile una al agente en el chat — <i>«hacé una lámpara que liste los endpoints del backend»</i> — o creá una carpeta con <code>lamp.json</code> en <code>${esc(lampsMeta.project)}</code> (proyecto) o <code>${esc(lampsMeta.global)}</code> (global). El botón <b>?</b> de arriba explica qué son y para qué sirven.`,
+      detail: (l) => {
+        const specs = l.tool_specs || [];
+        const cap = l.error ? `<div class="dcap err">rota: ${esc(l.error)}</div>` : (l.kind === 'syn' ? `<div class="dcap">techo de capacidades: ${esc(l.caps)}</div>` : `<div class="dcap"><b>sin techo</b> (exec) · $ ${esc(l.command)}</div>`);
+        return `<div class="dhead"><span class="nm">${esc(l.name)}</span><span class="meta">${esc(l.scope)} · ${esc(l.kind)}</span><label class="sw ${l.enabled ? 'on' : ''}" title="${l.error ? 'no se puede encender: está rota' : (l.enabled ? 'apagar' : 'encender')}"><input type="checkbox" ${l.enabled ? 'checked' : ''} ${l.error ? 'disabled' : ''}>${l.enabled ? 'encendida' : 'apagada'}</label></div>`
+          + (l.description ? `<div class="ddesc">${esc(l.description)}</div>` : '') + cap
+          + (l.enabled || l.error ? '' : `<div class="dnote">Apagada: el agente no la ve y no se puede correr. Encendela con el switch — el código va a poder ejecutarse${l.kind === 'exec' ? ' <b>sin techo de capacidades</b> (es un ejecutable)' : ' bajo el techo de arriba'}.</div>`)
+          + specs.map((t, i) => {
+              const props = (t.parameters && t.parameters.properties) || {}; const required = (t.parameters && t.parameters.required) || [];
+              return `<div class="tool" data-i="${i}"><div class="th"><code>${esc(t.name)}</code>${t.description ? `<span class="ds">${esc(t.description)}</span>` : '<span></span>'}<span class="ds">lamp_${esc(l.name)}_${esc(t.name)}</span></div>`
+                + (Object.keys(props).length ? Object.keys(props).map(k => lampField(k, props[k], required)).join('') : '<div class="ds" style="margin-top:6px;color:var(--ink-3)">no toma parámetros</div>')
+                + (l.enabled ? `<div class="go"><button class="primary run">▶ correr</button><span class="st"></span></div><pre class="out" style="display:none"></pre>` : '')
+                + `</div>`;
+            }).join('')
+          + `<div class="dfoot"><span>${esc(l.dir || '')}</span>${l.scope === 'project' ? '<span class="del">eliminar</span>' : '<span title="las globales se borran a mano">global · se borra a mano</span>'}</div><div class="err" data-err></div>`;
+      },
+      wire: (l, box) => {
+        const errEl = box.querySelector('[data-err]');
+        box.querySelector('.sw input').onchange = async (ev) => {
+          errEl.textContent = '';
+          const r = await api(BASE + '/api/lamps/toggle', { name: l.name, enabled: ev.target.checked });
+          if (!r.ok) { errEl.textContent = r.data.error || ('error ' + r.status); ev.target.checked = !ev.target.checked; return; }
+          add('meta', '☼ ' + esc(r.data.result || '')); loadLamps(); loadSched();
+        };
+        for (const tdiv of box.querySelectorAll('.tool')) {
+          const t = (l.tool_specs || [])[Number(tdiv.dataset.i)]; const props = (t.parameters && t.parameters.properties) || {}; const required = (t.parameters && t.parameters.required) || [];
+          const b = tdiv.querySelector('button.run'); if (!b) continue;
+          b.onclick = async () => {
+            const st = tdiv.querySelector('.st'), out = tdiv.querySelector('.out'); const got = lampArgs(tdiv, props, required);
+            if (got.error) { st.textContent = got.error; return; }
+            st.textContent = 'corriendo…'; out.style.display = 'none'; b.disabled = true;
+            const r = await api(BASE + '/api/lamps/run', { tool: 'lamp_' + l.name + '_' + t.name, args: got.args });
+            st.textContent = r.ok ? '' : (r.data.error || 'error ' + r.status);
+            if (r.ok) { out.textContent = r.data.output; out.style.display = ''; }
+            b.disabled = false;
+          };
+        }
+        const del = box.querySelector('.dfoot .del');
+        if (del) del.onclick = () => inlineConfirm(del, `¿borrar ${l.name} del disco?`, async () => {
+          const r = await api(BASE + '/api/lamps/remove', { name: l.name });
+          if (!r.ok) { errEl.textContent = r.data.error || ('error ' + r.status); return; }
+          add('meta', '☼ ' + esc(r.data.result || '')); loadLamps();
+        });
+      }
+    }
+  });
+}
+$('#lamps').onclick = () => openLamps();
+if (location.hash === '#lamps') setTimeout(() => openLamps(), 400); // deep link: abre el panel al cargar