lampson 0.1.3 → 0.2.0

package/public/js/lsp.js

@@ -0,0 +1,81 @@
+// lsp.js — language servers: sección del panel lateral + vista browse del Panel («+ agregar» = fila con el formulario)
+let lspServers = [], lspPresets = {}, lspGlobalFile = '.lampson/lsp.json';
+async function fetchLsp() {
+  let r; try { r = await (await fetch(BASE + '/api/lsp')).json(); } catch (e) { return lspServers; }
+  lspServers = r.servers || []; lspPresets = r.presets || {}; lspGlobalFile = r.global || lspGlobalFile;
+  return lspServers;
+}
+async function loadLsp() {
+  const list = await fetchLsp();
+  const box = $('#lspBox'); box.innerHTML = '';
+  const ready = list.filter(s => s.status === 'ready').length;
+  $('#lspCount').textContent = list.length ? (ready ? `${ready} ● · ${list.length}` : `${list.length}`) : ''; autoSec('lsp', list.some(s => s.status === 'error' || s.status === 'exited'));
+  if (!list.length) { const e = document.createElement('div'); e.className = 'p none'; e.style.cursor = 'default'; e.textContent = 'sin language servers'; box.appendChild(e); }
+  for (const sv of list) {
+    const d = document.createElement('div'); d.className = 'p' + (sv.status === 'ready' ? ' run' : '');
+    d.title = `${sv.scope} · $ ${sv.command}` + (sv.error ? `\n${sv.error}` : '');
+    d.innerHTML = `<span class="st"></span><span class="nm">${esc(sv.name)}</span><span class="cm">${esc(sv.status)} · ${esc((sv.extensions || []).join(' '))}${sv.error ? ' · ' + esc(sv.error) : ''}</span>`;
+    d.onclick = () => openLsp(sv.name);
+    box.appendChild(d);
+  }
+  const addRow = document.createElement('div'); addRow.className = 'p'; addRow.innerHTML = `<span class="nm" style="color:var(--accent)">+ agregar un language server…</span>`;
+  addRow.title = 'preset (typescript, python, rust, go, css, html) o tu propio comando · también podés editar ' + lspGlobalFile;
+  addRow.onclick = () => openLsp('__new');
+  box.appendChild(addRow);
+  if (Panel.is('lsp')) Panel.refresh();
+}
+const LSP_NEW = { name: '__new' };
+function openLsp(selectName) {
+  Panel.open({
+    id: 'lsp', eyebrow: 'lsp', title: 'Language servers', sub: 'arrancan en la primera consulta del agente', layout: 'browse', select: selectName || null,
+    browse: {
+      placeholder: 'buscar…', listWidth: '260px', key: s => s.name,
+      load: async (q) => { const all = await fetchLsp(); const list = all.filter(s => !q || (s.name + ' ' + s.scope + ' ' + (s.extensions || []).join(' ')).toLowerCase().includes(q.toLowerCase())); return q ? list : [...list, LSP_NEW]; },
+      render: (s) => s === LSP_NEW ? `<span class="dot">+</span><div><div class="nm" style="color:var(--accent);font-weight:400">agregar un language server…</div><div class="meta">preset o comando propio</div></div>` : `<span class="dot">${s.status === 'ready' ? '●' : (s.status === 'error' || s.status === 'exited' ? '!' : '○')}</span><div><div class="nm">${esc(s.name)}</div><div class="meta">${esc(s.scope)} · ${esc(s.status)} · ${esc((s.extensions || []).join(' '))}</div></div>`,
+      count: (rows) => { const n = rows.filter(r => r !== LSP_NEW).length; return `${n} server${n === 1 ? '' : 's'}`; },
+      emptyHtml: 'nada coincide',
+      detail: (s) => s === LSP_NEW ? lspForm() : `<div class="dhead"><span class="nm">${esc(s.name)}</span><span class="meta">${esc(s.scope)} · ${esc(s.status)}</span></div>
+        <div class="dcap">$ ${esc(s.command)}</div>${s.error ? `<div class="dcap err">${esc(s.error)}</div>` : ''}
+        <div class="ddesc">Extensiones: ${(s.extensions || []).map(e => `<code>${esc(e)}</code>`).join(' ') || '—'}. El agente lo usa con la tool <code>lsp</code>: <code>symbols</code> (estructura de un archivo sin leerlo), <code>definition</code>, <code>references</code>, <code>hover</code>. ${s.status === 'idle' ? 'Está en espera: arranca en la primera consulta.' : ''}</div>
+        <div class="dfoot"><span>${esc(s.scope === 'project' ? '.lampson/lsp.json' : lspGlobalFile)}</span><span class="del">quitar</span></div><div class="derr"></div>`,
+      wire: (s, box) => {
+        const err = (t) => { const e = box.querySelector('.derr'); if (e) e.textContent = t || ''; };
+        if (s === LSP_NEW) {
+          const f = n => box.querySelector(`[name="${n}"]`);
+          const changed = () => { const k = f('preset').value; const p = lspPresets[k]; box.querySelector('[data-custom]').style.display = k ? 'none' : ''; box.querySelector('[data-install]').textContent = p ? `$ ${p.command} ${(p.args || []).join(' ')}` + (p.install ? ` · si no está instalado: ${p.install}` : '') : ''; };
+          f('preset').onchange = changed; changed();
+          box.querySelector('[data-go]').onclick = async () => {
+            const k = f('preset').value; const body = { scope: f('scope').value };
+            if (k) body.name = k;
+            else {
+              body.name = f('name').value.trim(); body.command = f('command').value.trim(); body.languages = {};
+              for (const tok of f('ext').value.trim().split(/\s+/).filter(Boolean)) { const i = tok.indexOf('='); if (i > 0) body.languages[tok.slice(0, i)] = tok.slice(i + 1); }
+              if (!body.name || !body.command || !Object.keys(body.languages).length) { err('falta nombre, comando o extensiones (.ext=languageId)'); return; }
+            }
+            err('guardando…');
+            const r = await api(BASE + '/api/lsp/add', body);
+            if (!r.ok) { err(r.data.error || ('error ' + r.status)); return; }
+            add('meta', '⌁ ' + esc(r.data.result || 'server agregado')); await loadLsp(); Panel.selectKey(body.name);
+          };
+          return;
+        }
+        const del = box.querySelector('.dfoot .del');
+        del.onclick = () => inlineConfirm(del, `¿quitar ${s.name}?`, async () => { const r = await api(BASE + '/api/lsp/remove', { name: s.name }); if (!r.ok) { err(r.data.error || 'error'); return; } add('meta', '⌁ ' + esc(r.data.result || '')); loadLsp(); });
+      }
+    }
+  });
+}
+function lspForm() {
+  const presets = Object.keys(lspPresets).map(k => `<option value="${esc(k)}">${esc(k)} — ${esc(Object.keys(lspPresets[k].languages || {}).join(' '))}</option>`).join('') + '<option value="">otro — mi propio comando</option>';
+  return `<div class="dhead"><span class="nm serif">Agregar un language server</span></div><div class="dform">
+    <p class="lead">El mismo proceso que usa tu editor para «ir a definición». No se instala nada acá: elegí un preset (con <code>npx</code> se baja solo) o poné tu comando. Arranca en la primera consulta.</p>
+    <label>preset <select name="preset">${presets}</select></label>
+    <div data-custom style="display:none">
+      <label>nombre <input name="name" spellcheck="false" autocomplete="off" placeholder="mylang"></label>
+      <label>comando <input name="command" spellcheck="false" autocomplete="off" placeholder="my-language-server --stdio"></label>
+      <label>extensiones <input name="ext" spellcheck="false" autocomplete="off" placeholder=".ml=ocaml .mli=ocaml"></label>
+    </div>
+    <p class="lead" data-install></p>
+    <label>alcance <select name="scope"><option value="global">global — todos los proyectos</option><option value="project">proyecto — solo este repo</option></select></label>
+    <div class="pfoot"><button class="primary" data-go>Agregar</button><span class="derr"></span></div></div>`;
+}

package/public/js/mcp.js

@@ -0,0 +1,74 @@
+// mcp.js — servers MCP: sección del panel lateral + vista browse del Panel (servers a la izquierda, detalle a la
+// derecha; «+ conectar» es una fila más cuyo detalle es el formulario)
+let mcpServers = [], mcpFiles = { global: '.lampson/mcp.json', project: '' };
+async function fetchMcp() {
+  let r; try { r = await (await fetch(BASE + '/api/mcp')).json(); } catch (e) { return mcpServers; }
+  mcpServers = r.servers || []; mcpFiles = { global: r.global || '.lampson/mcp.json', project: r.project || '' };
+  return mcpServers;
+}
+async function loadMcp() {
+  const list = await fetchMcp();
+  const box = $('#mcpBox'); box.innerHTML = '';
+  const ready = list.filter(s => s.status === 'ready').length;
+  $('#mcpCount').textContent = list.length ? (ready ? `${ready} ● · ${list.length}` : `${list.length}`) : ''; autoSec('mcp', list.some(s => s.status === 'error'));
+  if (!list.length) { const e = document.createElement('div'); e.className = 'p none'; e.style.cursor = 'default'; e.textContent = 'sin servers conectados'; box.appendChild(e); }
+  for (const sv of list) {
+    const d = document.createElement('div'); d.className = 'p' + (sv.status === 'ready' ? ' run' : '');
+    d.title = `${sv.scope} · $ ${sv.command}` + (sv.error ? `\n${sv.error}` : '') + (sv.tools.length ? `\ntools: ${sv.tools.join(', ')}` : '');
+    d.innerHTML = `<span class="st"></span><span class="nm">${esc(sv.name)}</span><span class="cm">${esc(sv.status)} · ${sv.tools.length} tools${sv.error ? ' · ' + esc(sv.error) : ''}</span>`;
+    d.onclick = () => openMcp(sv.name);
+    box.appendChild(d);
+  }
+  const addRow = document.createElement('div'); addRow.className = 'p'; addRow.innerHTML = `<span class="nm" style="color:var(--accent)">+ conectar un server…</span>`;
+  addRow.title = 'también podés editar a mano ' + mcpFiles.global + ' (global) o ' + mcpFiles.project + ' (proyecto), o pedírselo al agente';
+  addRow.onclick = () => openMcp('__new');
+  box.appendChild(addRow);
+  if (Panel.is('mcp')) Panel.refresh();
+}
+const MCP_NEW = { name: '__new' };
+function openMcp(selectName) {
+  Panel.open({
+    id: 'mcp', eyebrow: 'mcp', title: 'Servers MCP', sub: 'formato Claude Code / Cursor', layout: 'browse', select: selectName || null,
+    browse: {
+      placeholder: 'buscar server o tool…', listWidth: '260px', key: s => s.name,
+      load: async (q) => { const all = await fetchMcp(); const list = all.filter(s => !q || (s.name + ' ' + s.scope + ' ' + (s.tools || []).join(' ')).toLowerCase().includes(q.toLowerCase())); return q ? list : [...list, MCP_NEW]; },
+      render: (s) => s === MCP_NEW ? `<span class="dot">+</span><div><div class="nm" style="color:var(--accent);font-weight:400">conectar un server…</div><div class="meta">${esc(mcpFiles.global)}</div></div>` : `<span class="dot">${s.status === 'ready' ? '●' : (s.status === 'error' ? '!' : '○')}</span><div><div class="nm">${esc(s.name)}</div><div class="meta">${esc(s.scope)} · ${esc(s.status)} · ${(s.tools || []).length} tools</div></div>`,
+      count: (rows, q) => `${rows.filter(r => r !== MCP_NEW).length} server${rows.filter(r => r !== MCP_NEW).length === 1 ? '' : 's'}`,
+      emptyHtml: 'nada coincide',
+      detail: (s) => s === MCP_NEW ? mcpForm() : `<div class="dhead"><span class="nm">${esc(s.name)}</span><span class="meta">${esc(s.scope)} · ${esc(s.status)}</span></div>
+        <div class="dcap">$ ${esc(s.command)}</div>${s.error ? `<div class="dcap err">${esc(s.error)}</div>` : ''}
+        <div class="ddesc">${(s.tools || []).length ? 'Tools en el catálogo del agente: ' + (s.tools || []).map(t => `<code>mcp_${esc(s.name)}_${esc(t)}</code>`).join(' ') : 'sin tools todavía (el server no terminó de arrancar o falló)'}</div>
+        <div class="dfoot"><span>${esc(s.scope === 'project' ? mcpFiles.project : mcpFiles.global)}</span><span class="del">quitar</span></div><div class="derr"></div>`,
+      wire: (s, box) => {
+        const err = (t) => { const e = box.querySelector('.derr'); if (e) e.textContent = t || ''; };
+        if (s === MCP_NEW) {
+          const f = n => box.querySelector(`[name="${n}"]`);
+          f('scope').onchange = () => { box.querySelector('[data-file]').textContent = f('scope').value === 'project' ? mcpFiles.project : mcpFiles.global; };
+          box.querySelector('[data-go]').onclick = async () => {
+            const name = f('name').value.trim(), command = f('command').value.trim();
+            if (!name || !command) { err('falta nombre o comando'); return; }
+            const env = {};
+            for (const tok of f('env').value.trim().split(/\s+/).filter(Boolean)) { const i = tok.indexOf('='); if (i > 0) env[tok.slice(0, i)] = tok.slice(i + 1); }
+            err('conectando…');
+            const r = await api(BASE + '/api/mcp/add', { name, command, env, scope: f('scope').value });
+            if (!r.ok) { err(r.data.error || ('error ' + r.status)); return; }
+            add('meta', '⌁ ' + esc(r.data.result || 'server conectado')); await loadMcp(); Panel.selectKey(name);
+          };
+          f('name').focus();
+          return;
+        }
+        const del = box.querySelector('.dfoot .del');
+        del.onclick = () => inlineConfirm(del, `¿quitar ${s.name}?`, async () => { const r = await api(BASE + '/api/mcp/remove', { name: s.name }); if (!r.ok) { err(r.data.error || 'error'); return; } add('meta', '⌁ ' + esc(r.data.result || '')); loadMcp(); });
+      }
+    }
+  });
+}
+function mcpForm() {
+  return `<div class="dhead"><span class="nm serif">Conectar un server MCP</span></div><div class="dform">
+    <p class="lead">El comando arranca el server por stdio. Queda guardado en <code data-file>${esc(mcpFiles.global)}</code> y sus tools entran al catálogo del agente como <code>mcp_&lt;server&gt;_&lt;tool&gt;</code> desde el próximo turno.</p>
+    <label>nombre <input name="name" spellcheck="false" autocomplete="off" placeholder="github"></label>
+    <label>comando <input name="command" spellcheck="false" autocomplete="off" placeholder="npx -y @modelcontextprotocol/server-github"></label>
+    <label>env <input name="env" spellcheck="false" autocomplete="off" placeholder="opcional: GITHUB_TOKEN=… · separá con espacios"></label>
+    <label>alcance <select name="scope"><option value="global">global — todos los proyectos</option><option value="project">proyecto — solo este repo</option></select></label>
+    <div class="pfoot"><button class="primary" data-go>Conectar</button><span class="derr"></span></div></div>`;
+}

package/public/js/memory.js

@@ -0,0 +1,17 @@
+// memory.js — notas que el agente guarda sobre este proyecto (tool memory)
+let memOpen = null;
+async function loadMemory() {
+  let r; try { r = await (await fetch(BASE + '/api/memory')).json(); } catch (e) { return; }
+  const box = $('#memory'); box.innerHTML = '';
+  const notes = r.notes || [];
+  $('#memCount').textContent = notes.length || ''; autoSec('memory', notes.length > 0);
+  if (!notes.length) { box.innerHTML = '<div class="m none">sin notas todavía</div>'; return; }
+  for (const n of notes) { const d = document.createElement('div'); d.className = 'm' + (memOpen === n.name ? ' active' : ''); d.title = n.title; d.innerHTML = `<b>${esc(n.name)}</b><span class="t">${esc(n.title)}</span>`; d.onclick = () => openMemory(n.name); box.appendChild(d); }
+}
+async function openMemory(name) {
+  memOpen = name; procOpen = null; clearInterval(procTimer);
+  const r = await (await fetch(BASE + '/api/memory/note?name=' + encodeURIComponent(name))).json();
+  if (r.error) { add('denied', esc(r.error)); return; }
+  showText('memoria · ' + name + '.md', 'notas del agente sobre este proyecto (editables a mano en lampson/memory/)', r.content || '(vacía)', false);
+  loadMemory();
+}

package/public/js/panel.js

@@ -0,0 +1,101 @@
+// panel.js — EL componente modal de la app. Un cascarón y tres layouts; cada vista aporta solo su contenido.
+//
+//   Panel.open({ eyebrow, title, sub, size: 'lg'|'md'|'sm', layout: 'browse'|'tabs'|'form',
+//                headActions: [{label, title, onClick}],   // botones chicos en la cabecera (p.ej. «?»)
+//                noClose: bool,                             // sin ✕/Esc (onboarding)
+//                onClose(), select: clave de la fila a dejar elegida al abrir (browse),
+//     browse: { placeholder, listWidth, load(q) → rows, render(row, q) → html de la fila, key(row) → id estable,
+//               nodot: true (filas sin la columna del punto), detail(row, q) → html del panel derecho (puede ser async), wire(row, box) → engancha handlers,
+//               onPick(row) → Enter / doble clic, count(rows, q) → texto del pie, emptyHtml, help: html },
+//     tabs:   { tabs: [{id, label, html}], footer: html, wire(box), initial },
+//     form:   { html, footer: html, wire(box) } })
+//   Panel.close() · Panel.refresh() (browse: recarga la lista conservando la selección) · Panel.detail() (re-render
+//   del detalle) · Panel.selectKey(k) · Panel.box (el elemento) · Panel.err(texto) (línea de error del pie) · Panel.is(id)
+//
+// Teclado en browse: ↑↓ mueven la selección (el detalle sigue), Enter = onPick, Esc cierra. Un solo panel abierto.
+const Panel = (() => {
+  let cur = null, rows = [], sel = 0, timer = null, seq = 0, overlay = null, pendingKey = null;
+  const ICON_X = '✕';
+  function ensure() {
+    if (overlay) return overlay;
+    overlay = document.createElement('div'); overlay.className = 'modal'; overlay.id = 'panel'; overlay.style.display = 'none';
+    overlay.innerHTML = '<div class="panel"></div>';
+    document.body.appendChild(overlay);
+    overlay.addEventListener('click', (e) => { if (e.target === overlay && cur && !cur.noClose) close(); });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && cur && !cur.noClose) close(); });
+    return overlay;
+  }
+  const box = () => ensure().querySelector('.panel');
+  function head(spec) {
+    const acts = (spec.headActions || []).map((a, i) => `<button class="pghost" data-ha="${i}" title="${esc(a.title || '')}">${esc(a.label)}</button>`).join('');
+    return `<div class="phead"><span class="eyebrow">${esc(spec.eyebrow || '')}</span><h3>${esc(spec.title || '')}</h3><span class="sub">${esc(spec.sub || '')}</span><span class="spacer"></span>${acts}${spec.noClose ? '' : `<button class="pghost" data-close title="cerrar (Esc)">${ICON_X}</button>`}</div>`;
+  }
+  function open(spec) {
+    cur = spec; rows = []; sel = 0; seq++; pendingKey = spec.select != null ? spec.select : null;
+    const b = box(); b.className = 'panel ' + (spec.size || (spec.layout === 'browse' ? 'lg' : 'md'));
+    let body = '';
+    if (spec.layout === 'browse') {
+      const w = spec.browse.listWidth ? `style="--list-w:${spec.browse.listWidth}"` : '';
+      body = `<div class="browse" ${w}><div class="blist"><input class="bsearch" spellcheck="false" autocomplete="off" placeholder="${esc(spec.browse.placeholder || 'buscar…')}"><div class="bitems"></div><div class="bcount"></div></div><div class="bdetail"></div></div>` + (spec.browse.help ? `<div class="phelp" style="display:none">${spec.browse.help}</div>` : '');
+    } else if (spec.layout === 'tabs') {
+      body = `<div class="ptabs">${spec.tabs.tabs.map(t => `<span class="ptab" data-tab="${esc(t.id)}">${esc(t.label)}</span>`).join('')}</div><div class="pbody">${spec.tabs.tabs.map(t => `<div class="pane" data-pane="${esc(t.id)}" style="display:none">${t.html}</div>`).join('')}</div>` + (spec.tabs.footer ? `<div class="pfoot">${spec.tabs.footer}<span class="err"></span></div>` : '');
+    } else {
+      body = `<div class="pbody">${spec.form.html}</div>` + (spec.form.footer ? `<div class="pfoot">${spec.form.footer}<span class="err"></span></div>` : '');
+    }
+    b.innerHTML = head(spec) + body;
+    const x = b.querySelector('[data-close]'); if (x) x.onclick = close;
+    b.querySelectorAll('[data-ha]').forEach(el => el.onclick = () => spec.headActions[Number(el.dataset.ha)].onClick(b));
+    ensure().style.display = 'flex';
+    if (spec.layout === 'browse') wireBrowse(spec);
+    else if (spec.layout === 'tabs') { b.querySelectorAll('.ptab').forEach(t => t.onclick = () => tab(t.dataset.tab)); tab(spec.tabs.initial || spec.tabs.tabs[0].id); if (spec.tabs.wire) spec.tabs.wire(b); }
+    else { if (spec.form.wire) spec.form.wire(b); const f = b.querySelector('.pbody input, .pbody textarea, .pbody select'); if (f && spec.form.focus !== false) f.focus(); }
+    return b;
+  }
+  function tab(id) { const b = box(); b.querySelectorAll('.ptab').forEach(t => t.classList.toggle('on', t.dataset.tab === id)); b.querySelectorAll('.pane').forEach(p => p.style.display = p.dataset.pane === id ? '' : 'none'); }
+  function close() { const p = cur; cur = null; if (overlay) overlay.style.display = 'none'; clearTimeout(timer); if (p && p.onClose) p.onClose(); }
+  function err(t) { const e = box().querySelector('.pfoot .err'); if (e) e.textContent = t || ''; }
+  function is(id) { return !!cur && cur.id === id; }
+  // ---- browse ----
+  function wireBrowse(spec) {
+    const b = box(), inp = b.querySelector('.bsearch');
+    inp.addEventListener('input', () => { clearTimeout(timer); timer = setTimeout(refresh, 220); });
+    inp.addEventListener('keydown', (e) => {
+      if (!rows.length) return;
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); select((sel + (e.key === 'ArrowDown' ? 1 : rows.length - 1)) % rows.length); const it = b.querySelectorAll('.bitems .li')[sel]; it && it.scrollIntoView({ block: 'nearest' }); }
+      else if (e.key === 'Enter' && spec.browse.onPick) { e.preventDefault(); const r = rows[sel]; if (r) { close(); spec.browse.onPick(r); } }
+    });
+    inp.focus(); refresh();
+  }
+  function query() { const i = box().querySelector('.bsearch'); return i ? i.value.trim() : ''; }
+  async function refresh() {
+    if (!cur || cur.layout !== 'browse') return;
+    const spec = cur, q = query(), my = ++seq;
+    const keep = pendingKey != null ? pendingKey : (rows[sel] && spec.browse.key ? spec.browse.key(rows[sel]) : null); pendingKey = null;
+    let list; try { list = await spec.browse.load(q); } catch (e) { list = []; }
+    if (cur !== spec || my !== seq) return;
+    rows = list || [];
+    sel = 0; if (keep != null && spec.browse.key) { const i = rows.findIndex(r => spec.browse.key(r) === keep); if (i >= 0) sel = i; }
+    const items = box().querySelector('.bitems'); items.innerHTML = '';
+    if (!rows.length) items.innerHTML = `<div class="bempty">${q ? 'nada coincide con «' + esc(q) + '»' : (spec.browse.emptyHtml || 'nada todavía')}</div>`;
+    rows.forEach((r, i) => {
+      const d = document.createElement('div'); d.className = 'li' + (spec.browse.nodot ? ' nodot' : '') + (i === sel ? ' sel' : ''); d.innerHTML = spec.browse.render(r, q);
+      d.onclick = () => select(i); if (spec.browse.onPick) d.ondblclick = () => { close(); spec.browse.onPick(r); };
+      items.appendChild(d);
+    });
+    box().querySelector('.bcount').textContent = spec.browse.count ? spec.browse.count(rows, q) : `${rows.length}`;
+    detail();
+  }
+  function select(i) { sel = i; box().querySelectorAll('.bitems .li').forEach((x, j) => x.classList.toggle('sel', j === i)); detail(); }
+  // seleccionar por clave (spec.browse.key): para abrir el panel ya parado en un elemento («+ nuevo», una tarea)
+  function selectKey(k) { if (!cur || cur.layout !== 'browse' || !cur.browse.key) return false; const i = rows.findIndex(r => cur.browse.key(r) === k); if (i < 0) return false; select(i); return true; }
+  async function detail() {
+    if (!cur || cur.layout !== 'browse') return;
+    const spec = cur, my = ++seq, d = box().querySelector('.bdetail'), r = rows[sel];
+    if (!r) { d.innerHTML = `<div class="none">${rows.length ? '' : (spec.browse.emptyDetail || '')}</div>`; return; }
+    let html; try { html = await spec.browse.detail(r, query()); } catch (e) { html = `<div class="none">${esc(String(e.message || e))}</div>`; }
+    if (cur !== spec || my !== seq) return;
+    d.innerHTML = html; if (spec.browse.wire) spec.browse.wire(r, d);
+  }
+  function help(show) { const b = box(); const h = b.querySelector('.phelp'), br = b.querySelector('.browse'); if (!h) return; h.style.display = show ? '' : 'none'; br.style.display = show ? 'none' : ''; }
+  return { open, close, refresh, detail, err, is, tab, help, selectKey, get box() { return box(); }, get current() { return cur; }, get selected() { return rows[sel]; } };
+})();

package/public/js/procs.js

@@ -0,0 +1,45 @@
+// procs.js — procesos gestionados por el agente (tool process) y puertos en escucha de la máquina
+let procOpen = null, procTimer = null;
+async function loadPorts() {
+  let r; try { r = await (await fetch(BASE + '/api/ports')).json(); } catch (e) { return; }
+  const box = $('#ports'); box.innerHTML = '';
+  const list = (r.ports || []).filter(p => p.port !== 8080 || p.name !== 'synsema.exe');
+  $('#portCount').textContent = list.length || ''; autoSec('ports', list.length > 0);
+  if (!list.length) { box.innerHTML = '<div class="p none">ninguno</div>'; return; }
+  for (const p of list) {
+    const d = document.createElement('div'); d.className = 'p'; d.style.cursor = 'default'; d.title = `pid ${p.pid}\n${p.command || '(línea de comando no disponible)'}`;
+    const what = p.command ? p.command.replace(/^"?[A-Za-z]:\\[^"]*\\([^"\\]+)"?/, '$1') : p.name;
+    d.innerHTML = `<a class="port" href="http://127.0.0.1:${p.port}" target="_blank" rel="noopener" title="abrir http://127.0.0.1:${p.port} en otra pestaña">:${p.port}</a><span class="cm">${esc(what)}</span><button title="matar este proceso (pid ${p.pid}; no lo gestiona lampson)">✕</button>`;
+    const kb = d.querySelector('button'); kb.onclick = () => { const holder = document.createElement('span'); holder.className = 'del'; kb.replaceWith(holder); inlineConfirm(holder, `¿matar pid ${p.pid}?`, async () => { await api(BASE + '/api/ports/kill', { pid: p.pid }); loadPorts(); }); setTimeout(() => { if (!holder.classList.contains('ask')) loadPorts(); }, 6100); };
+    box.appendChild(d);
+  }
+}
+async function loadProcs() {
+  loadPorts();
+  let r; try { r = await (await fetch(BASE + '/api/proc')).json(); } catch (e) { return; }
+  const box = $('#procs'); box.innerHTML = '';
+  const list = r.processes || []; const act = list.filter(p => p.running).length;
+  $('#procCount').textContent = list.length ? (act ? `${act} ● · ${list.length}` : `${list.length}`) : '';
+  // Procesos queda cerrado salvo que el usuario lo abra (preferencia guardada); el contador avisa
+  if (!list.length) { box.innerHTML = '<div class="p none">ninguno</div>'; return; }
+  for (const p of list) {
+    const d = document.createElement('div'); d.className = 'p' + (p.running ? ' run' : '') + (procOpen === p.name ? ' active' : ''); d.title = p.command;
+    d.innerHTML = `<span class="st"></span><span class="nm">${esc(p.name)}</span><span class="cm">$ ${esc(p.command)}</span>` + (p.running ? '<button>■</button>' : '');
+    d.onclick = () => openProc(p.name);
+    const b = d.querySelector('button'); if (b) b.onclick = async (ev) => { ev.stopPropagation(); await api(BASE + '/api/proc/stop', { name: p.name }); loadProcs(); if (procOpen === p.name) openProc(p.name); };
+    box.appendChild(d);
+  }
+}
+async function openProc(name) {
+  procOpen = name; document.querySelectorAll('.row.active').forEach(x => x.classList.remove('active'));
+  const r = await (await fetch(BASE + '/api/proc/log?name=' + encodeURIComponent(name) + '&tail=400')).json();
+  showText('proceso ' + name, r.running ? '● corriendo · log en vivo' : '○ terminado', r.log || '(sin salida todavía)', true);
+  clearInterval(procTimer); if (r.running && !events) procTimer = setInterval(() => refreshProcViewer(name), 2000); // sin stream de eventos: respaldo por timer
+  loadProcs();
+}
+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';
+  if (!x.running) { clearInterval(procTimer); loadProcs(); }
+}

package/public/js/schedules.js

@@ -0,0 +1,118 @@
+// schedules.js — tareas programadas (lib/schedule.syn): sección del panel lateral + vista browse del Panel
+// (tareas a la izquierda; a la derecha: qué hace, corridas, log, traza en vivo mientras corre, ▶ / ⏻ / quitar;
+// «+ programar» es una fila más cuyo detalle es el formulario). Corren en cualquier lampson abierto (web o
+// terminal, tick cada 30 s) o con `lampson --daemon start` con todo cerrado.
+let schedData = [], schedLamps = [], schedTick = 30, schedMountOk = true, schedLiveTimer = null;
+async function fetchSched() {
+  let r; try { r = await (await fetch(BASE + '/api/schedules')).json(); } catch (e) { return schedData; }
+  schedData = r.tasks || []; schedLamps = r.lamps || []; schedTick = r.tick || 30; schedMountOk = r.mount_ok !== false;
+  return schedData;
+}
+async function loadSched() {
+  await fetchSched();
+  const box = $('#schedBox'); box.innerHTML = '';
+  const on = schedData.filter(t => t.enabled).length, running = schedData.filter(t => t.running).length;
+  $('#schedCount').textContent = schedData.length ? (running ? `${running} ● · ${schedData.length}` : `${on} · ${schedData.length}`) : ''; autoSec('sched', running > 0);
+  const dm = document.createElement('div'); dm.className = 'daemon' + (schedMountOk ? '' : ' off');
+  dm.textContent = schedMountOk ? `corren solas mientras esta web esté abierta · tick cada ${schedTick} s` : '⚠ ./workspace apunta a otro proyecto: tareas en pausa · lampson --daemon restart desde esta carpeta';
+  dm.title = 'las tareas programadas corren en este proceso (web o terminal). Para que corran con todo cerrado: lampson --daemon start';
+  box.appendChild(dm);
+  if (!schedData.length) { const e = document.createElement('div'); e.className = 'p none'; e.style.cursor = 'default'; e.textContent = 'ninguna'; box.appendChild(e); }
+  for (const t of schedData) {
+    const d = document.createElement('div'); d.className = 'p sched';
+    const st = t.running ? 'busy' : (t.enabled ? (t.last_status && t.last_status !== 'ok' ? 'bad' : 'on') : '');
+    d.title = `${t.action_text}\npermisos: ${t.permission}` + (t.last_run ? `\núltima: ${t.last_local} · ${t.last_status}: ${t.last_summary}` : '');
+    d.innerHTML = `<span class="st ${st}"></span><span class="nm">${esc(t.name)}</span><span class="cm">${esc(t.plan)}</span>`
+      + `<span class="sub">${t.running ? 'corriendo…' : (t.enabled ? 'próxima ' + esc(fmtWhen(t.next_run)) : 'apagada')}${t.last_run ? ' · última ' + esc(t.last_status) : ''} · ${esc(t.action.type)} · ${esc(t.permission)}</span>`;
+    d.onclick = () => openSched(t.id);
+    box.appendChild(d);
+  }
+  const addRow = document.createElement('div'); addRow.className = 'p'; addRow.innerHTML = `<span class="nm" style="color:var(--accent)">+ programar una tarea…</span>`;
+  addRow.title = 'una lámpara, un comando o el agente con instrucciones · también se lo podés pedir al agente en el chat';
+  addRow.onclick = () => openSched('__new');
+  box.appendChild(addRow);
+  if (Panel.is('schedules')) Panel.refresh();
+}
+const SCHED_NEW = { id: '__new' };
+function schedStatusDot(t) { return t.running ? '◐' : (t.enabled ? (t.last_status && t.last_status !== 'ok' ? '!' : '●') : '○'); }
+function openSched(selectId) {
+  Panel.open({
+    id: 'schedules', eyebrow: 'programadas', title: 'Tareas programadas', sub: schedMountOk ? `tick cada ${schedTick} s · lampson --daemon start para correr con todo cerrado` : '⚠ ./workspace apunta a otro proyecto: en pausa', layout: 'browse', select: selectId || null,
+    onClose: () => clearTimeout(schedLiveTimer),
+    browse: {
+      placeholder: 'buscar tarea…', listWidth: '300px', key: t => t.id,
+      load: async (q) => { const all = await fetchSched(); const list = all.filter(t => !q || (t.name + ' ' + t.plan + ' ' + t.action_text).toLowerCase().includes(q.toLowerCase())); return q ? list : [...list, SCHED_NEW]; },
+      render: (t) => t === SCHED_NEW ? `<span class="dot">+</span><div><div class="nm" style="color:var(--accent);font-weight:400">programar una tarea…</div><div class="meta">lámpara, comando o el agente</div></div>` : `<span class="dot">${schedStatusDot(t)}</span><div><div class="nm">${esc(t.name)}</div><div class="meta">${esc(t.plan)} · ${t.running ? 'corriendo' : (t.enabled ? 'próxima ' + esc(fmtWhen(t.next_run)) : 'apagada')}</div></div>`,
+      count: (rows) => { const n = rows.filter(r => r !== SCHED_NEW).length; return `${n} tarea${n === 1 ? '' : 's'}`; },
+      emptyHtml: 'nada coincide',
+      detail: async (t) => {
+        if (t === SCHED_NEW) return schedForm();
+        let r; try { r = await (await fetch(BASE + '/api/schedules/log?id=' + encodeURIComponent(t.id) + '&tail=300')).json(); } catch (e) { r = {}; }
+        // r.task = el registro crudo (plan como objeto, session, history fresco); t = el resumen (plan y horarios en texto)
+        const raw = r.task || t; const task = Object.assign({}, raw, t, { running: raw.running, session: raw.session, history: raw.history, enabled: raw.enabled });
+        let live = '';
+        if (task.running && task.session) { try { const tr = await (await fetch(BASE + '/api/trace?session=' + encodeURIComponent(task.session) + '&tail=80')).json(); live = tr.trace || '(arrancando…)'; } catch (e) { live = '(arrancando…)'; } }
+        else if (task.running) live = task.action.type === 'prompt' ? 'arrancando el agente…' : 'corriendo ' + task.action.type + '…';
+        const hist = (task.history || []).slice().reverse().map(h => `<div class="dmsg ${h.status === 'ok' ? '' : 'dm-bad'}"><span class="who">${esc(new Date(h.started * 1000).toLocaleString())} · ${esc(h.status)}${h.late ? ' · atrasada' : ''}${h.steps != null ? ' · ' + h.steps + ' pasos' : ''}${h.session ? ` · <a href="#" data-session="${esc(h.session)}">sesión ⏰</a>` : ''}</span>${esc(h.summary || '')}</div>`).join('');
+        return `<div class="dhead"><span class="nm">${esc(task.name)}</span><span class="meta">${esc(task.plan)} · ${task.running ? '● corriendo' : (task.enabled ? 'próxima ' + esc(fmtWhen(task.next_run)) : 'apagada')}</span></div>
+          <div class="ddesc">${esc(task.action_text)}</div>
+          <div class="dcap">permisos <b>${esc(task.permission)}</b>${task.notify ? ' · avisa a ' + esc(task.notify) : ''}${task.last_run ? ' · última ' + esc(task.last_local) + ' → ' + esc(task.last_status) : ''}</div>
+          <div class="dacts"><button class="primary" data-run ${task.running ? 'disabled' : ''}>▶ correr ahora</button><button data-toggle>${task.enabled ? '⏻ apagar' : '○ encender'}</button></div>
+          ${live ? `<div class="dcap" style="margin-top:12px">corriendo ahora${task.session ? ' · sesión ' + esc(task.session) : ''}</div><pre class="dlog" data-live>${esc(live)}</pre>` : ''}
+          ${hist ? `<div class="dmsgs">${hist}</div>` : '<div class="none" style="margin-top:12px">sin corridas todavía</div>'}
+          ${r.log ? `<pre class="dlog">${esc(r.log)}</pre>` : ''}
+          <div class="dfoot"><span>.lampson/schedules/${esc(task.id)}.log</span><span class="del">quitar</span></div><div class="derr"></div>`;
+      },
+      wire: (t, box) => {
+        const err = (m) => { const e = box.querySelector('.derr'); if (e) e.textContent = m || ''; };
+        if (t === SCHED_NEW) { schedFormWire(box, err); return; }
+        box.querySelector('[data-run]').onclick = async () => { const r = await api(BASE + '/api/schedules/run', { id: t.id }); add('meta', '⏰ ' + esc(r.data.result || r.data.error || '')); setTimeout(loadSched, 1500); setTimeout(() => Panel.is('schedules') && Panel.detail(), 2500); };
+        box.querySelector('[data-toggle]').onclick = async () => { const r = await api(BASE + '/api/schedules/toggle', { id: t.id, enabled: !t.enabled }); if (!r.ok) { err(r.data.error || 'error'); return; } loadSched(); };
+        box.querySelectorAll('[data-session]').forEach(a => a.onclick = (e) => { e.preventDefault(); Panel.close(); open(a.dataset.session); });
+        const del = box.querySelector('.dfoot .del');
+        del.onclick = () => inlineConfirm(del, `¿quitar ${t.name}?`, async () => { await api(BASE + '/api/schedules/remove', { id: t.id }); loadSched(); });
+        const live = box.querySelector('[data-live]'); if (live) live.scrollTop = live.scrollHeight;
+        clearTimeout(schedLiveTimer); if (t.running) schedLiveTimer = setTimeout(() => { if (Panel.is('schedules')) Panel.refresh(); }, 3000);
+      }
+    }
+  });
+}
+function schedForm() {
+  const lampOpts = schedLamps.filter(l => l.enabled).flatMap(l => (l.tools || []).map(tl => `<option value="${esc(l.name + '/' + tl)}">${esc(l.name)} · ${esc(tl)}</option>`)).join('') || '<option value="">ninguna lámpara encendida</option>';
+  return `<div class="dhead"><span class="nm serif">Programar una tarea</span></div><div class="dform">
+    <p class="lead">Corre sola, a la hora que digas, mientras lampson esté abierto (esta web o la terminal); con todo cerrado, <code>lampson --daemon start</code>. También podés pedírsela al agente en el chat: <i>«todos los días a las 9 corré los tests y avisame»</i>.</p>
+    <label>nombre <input name="name" spellcheck="false" autocomplete="off" placeholder="tests nocturnos"></label>
+    <label>cuándo <input name="when" spellcheck="false" autocomplete="off" placeholder="daily 09:00 · every 6h · mon,wed 08:30 · today 15:14 · once 2026-09-01 10:00 · in 2h"></label>
+    <label>qué corre <select name="kind"><option value="prompt">el agente, con estas instrucciones</option><option value="bash">un comando de shell</option><option value="lamp">una tool de una lámpara encendida</option></select></label>
+    <div data-kind="prompt">
+      <label class="col">instrucciones <textarea name="prompt" rows="4" spellcheck="false" placeholder="Corré la suite de tests. Si algo falla, buscá la causa y proponé el fix en el informe (no lo apliques). Terminá con un resumen corto."></textarea></label>
+      <label>perfil <select name="agent"><option value="build">build — puede editar y correr comandos</option><option value="review">review — corre tests, no edita</option><option value="plan">plan — solo lee y propone</option><option value="explore">explore — solo busca</option></select></label>
+      <label>permisos <select name="permission"><option value="ask">preguntar — lo peligroso te manda un link y espera</option><option value="strict">denegar — lo peligroso se rechaza y se informa</option><option value="yolo">permitir todo — sin preguntas</option></select></label>
+      <p class="lead">Sobre de permisos de una corrida sin nadie mirando. En «preguntar», la aprobación aparece acá y, con URL pública + webhook (⚙), como link en tu canal; sin respuesta en 2 h se deniega. Lo destructivo del sistema se bloquea siempre.</p>
+    </div>
+    <div data-kind="bash" style="display:none"><label>comando <input name="command" spellcheck="false" autocomplete="off" placeholder="npm test"></label></div>
+    <div data-kind="lamp" style="display:none">
+      <label>lámpara · tool <select name="lamptool">${lampOpts}</select></label>
+      <label>args (JSON) <input name="args" spellcheck="false" autocomplete="off" placeholder='{"who": "cron"}'></label>
+    </div>
+    <label>avisar a <input name="notify" spellcheck="false" autocomplete="off" placeholder="opcional: URL de webhook que recibe el resultado (JSON)"></label>
+    <div class="pfoot"><button class="primary" data-go>Programar</button><span class="derr"></span></div></div>`;
+}
+function schedFormWire(box, err) {
+  const f = n => box.querySelector(`[name="${n}"]`);
+  const kind = () => { const k = f('kind').value; box.querySelectorAll('[data-kind]').forEach(el => el.style.display = el.dataset.kind === k ? '' : 'none'); };
+  f('kind').onchange = kind; kind(); f('name').focus();
+  box.querySelector('[data-go]').onclick = async () => {
+    const k = f('kind').value; let action;
+    if (k === 'prompt') action = { type: 'prompt', prompt: f('prompt').value.trim(), agent: f('agent').value };
+    else if (k === 'bash') action = { type: 'bash', command: f('command').value.trim() };
+    else { const v = f('lamptool').value; if (!v) { err('encendé una lámpara primero'); return; } const [lamp, tool] = v.split('/'); let args = {}; if (f('args').value.trim()) { try { args = JSON.parse(f('args').value); } catch (e) { err('args: JSON inválido'); return; } } action = { type: 'lamp', lamp, tool, args }; }
+    const body = { name: f('name').value.trim(), when: f('when').value.trim(), action, permission: f('permission').value, notify: f('notify').value.trim() };
+    if (!body.when) { err('falta cuándo'); return; }
+    err('programando…');
+    const r = await api(BASE + '/api/schedules/add', body);
+    if (!r.ok) { err(r.data.error || ('error ' + r.status)); return; }
+    add('meta', '⏰ ' + esc(r.data.result || 'programada')); setSec('sched', true); await loadSched(); if (r.data.task) Panel.selectKey(r.data.task.id);
+  };
+}
+$('#schedAddBtn').onclick = (ev) => { ev.stopPropagation(); openSched('__new'); };

package/public/js/sessions.js

@@ -0,0 +1,69 @@
+// sessions.js — sesiones: las últimas 4 en el panel, «ver todas» abre el Panel (browse) con búsqueda en
+// títulos y contenido (GET /api/sessions/search?q=) y una previsualización de la conversación; traza.
+function forgetSession(id) { if (id === session) { session = ''; localStorage.removeItem('lampson.session'); log.innerHTML = ''; showPane('log'); empty(); } }
+async function deleteSession(id) { await api(BASE + '/api/sessions/delete', { id }); forgetSession(id); loadSessions(); }
+async function loadSessions() {
+  let r; try { r = await (await fetch(BASE + '/api/sessions')).json(); } catch (e) { return; }
+  const box = $('#sessions'); box.innerHTML = '';
+  $('#sessCount').textContent = r.sessions.length || '';
+  if (!r.sessions.length) { box.innerHTML = '<div class="s none">todavía ninguna</div>'; return; }
+  const shown = r.sessions.slice(0, 4);
+  for (const s of shown) {
+    const d = document.createElement('div'); d.className = 's' + (s.id === session ? ' active' : ''); d.innerHTML = '<span class="id">' + esc(s.id.slice(-6)) + '</span><span class="title">' + esc(s.title || '') + '</span><span class="del tr" title="traza: qué hizo el agente en esta sesión (pasos, tools, tiempos, tokens)">≡</span><span class="del" title="borrar esta sesión">✕</span>'; d.title = s.id; d.onclick = () => open(s.id);
+    d.querySelector('.tr').onclick = (ev) => { ev.stopPropagation(); openTrace(s.id); };
+    d.querySelector('.del:not(.tr)').onclick = (ev) => { ev.stopPropagation(); inlineConfirm(d.querySelector('.del:not(.tr)'), '¿borrar?', () => deleteSession(s.id)); };
+    box.appendChild(d);
+  }
+  if (r.sessions.length > shown.length) { const m = document.createElement('div'); m.className = 's more'; m.innerHTML = `<span class="title">ver todas (${r.sessions.length}) y buscar…</span>`; m.title = 'buscar en títulos y en el contenido de las conversaciones'; m.onclick = openSessionsPanel; box.appendChild(m); }
+}
+$('#sessAll').onclick = (e) => { e.stopPropagation(); openSessionsPanel(); };
+function openSessionsPanel() {
+  Panel.open({
+    id: 'sessions', eyebrow: 'sesiones', title: 'Todas las sesiones', sub: 'de este workspace', layout: 'browse',
+    browse: {
+      placeholder: 'buscar en títulos y en lo que se habló… (↑↓ · Enter abre)', listWidth: '360px', nodot: true,
+      key: s => s.id,
+      load: async (q) => (await (await fetch(BASE + '/api/sessions/search?q=' + encodeURIComponent(q) + '&limit=300')).json()).sessions || [],
+      render: (s, q) => `<div><div class="nm serif">${hl(s.title || '(sin título)', q)}</div><div class="meta">${esc(s.id)} · ${esc(fmtIso(s.updated))}</div>` + (s.snippet ? `<div class="snip">${hl(s.snippet, q)}</div>` : '') + '</div>',
+      detail: async (s, q) => {
+        const d = await (await fetch(BASE + '/api/sessions/' + encodeURIComponent(s.id))).json();
+        const msgs = (d.messages || []).filter(m => (m.role === 'user' || m.role === 'assistant') && typeof m.content === 'string' && m.content.trim() && !/^\[harness\]|^\[Context compacted/.test(m.content)).slice(0, 14);
+        const steps = (d.messages || []).filter(m => m.role === 'tool').length;
+        return `<div class="dhead"><span class="nm serif">${esc(s.title || '(sin título)')}</span><span class="meta">${esc(s.id)} · ${esc(fmtIso(d.updated))} · ${(d.messages || []).length} mensajes · ${steps} tools</span></div>`
+          + `<div class="dacts"><button class="primary" data-act="open">Abrir</button><button data-act="trace">≡ Traza</button></div>`
+          + `<div class="dmsgs">${msgs.map(m => `<div class="dmsg dm-${m.role}"><span class="who">${m.role === 'user' ? 'vos' : 'agente'}</span>${hl(m.content.length > 500 ? m.content.slice(0, 500) + '…' : m.content, q)}</div>`).join('')}${(d.messages || []).length > msgs.length ? '<div class="none">… (abrila para ver todo)</div>' : ''}</div>`
+          + `<div class="dfoot"><span>.lampson/sessions/${esc(s.id)}.json</span><span class="del">borrar</span></div>`;
+      },
+      wire: (s, box) => {
+        box.querySelector('[data-act="open"]').onclick = () => { Panel.close(); open(s.id); };
+        box.querySelector('[data-act="trace"]').onclick = () => { Panel.close(); openTrace(s.id); };
+        const del = box.querySelector('.dfoot .del');
+        del.onclick = () => inlineConfirm(del, `¿borrar ${s.id}?`, async () => { await deleteSession(s.id); Panel.refresh(); });
+      },
+      onPick: (s) => open(s.id),
+      count: (rows, q) => q ? `${rows.length} coincidencia${rows.length === 1 ? '' : 's'}` : `${rows.length} sesión${rows.length === 1 ? '' : 'es'}`,
+      emptyHtml: 'todavía no hay sesiones'
+    }
+  });
+}
+async function open(id) {
+  session = id; localStorage.setItem('lampson.session', id); log.innerHTML = ''; log.classList.remove('hero'); showPane('log'); loadTodo();
+  const r = await fetch(BASE + '/api/sessions/' + id); if (!r.ok) { session = ''; empty(); return loadSessions(); }
+  const d = await r.json();
+  const queue = []; // pasos sin resultado todavía, en orden (varias tool calls por turno)
+  for (const m of d.messages) {
+    // los avisos del harness viajan con role user (lo exige el wire) pero no los escribió el usuario:
+    // al recargar se muestran como meta (✉), igual que en vivo — nunca con la etiqueta "vos"
+    if (m.role === 'user') { queue.length = 0; const t = String(m.content || ''); if (t.startsWith('[harness]') || t.startsWith('[Context compacted')) add('meta', '✉ ' + esc(t.split('\n')[0].slice(0, 160))); else add('user', esc(m.content) + imagesHtml(m.images)); }
+    else if (m.role === 'assistant') { if (m.content) add('assistant', md(m.content)); for (const c of (m.tool_calls || [])) { const el = add('step', `<span class="ic">⚙</span>${cmdHtml(describe(c))}`); wireMore(el); queue.push(el); } }
+    else if (m.role === 'tool') { const out = String(m.content); const bad = /^(ERROR|DENIED)/.test(out); const el = queue.shift() || add('step', '<span class="ic">→</span>'); const ic = el.querySelector('.ic'); if (ic) { ic.textContent = bad ? '✗' : '✓'; ic.className = 'ic ' + (bad ? 'bad' : 'ok'); } el.insertAdjacentHTML('beforeend', `<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>`); }
+  }
+  loadSessions();
+}
+$('#new').onclick = () => { session = ''; localStorage.removeItem('lampson.session'); log.innerHTML = ''; showPane('log'); empty(); loadSessions(); loadTodo(); };
+// traza legible de una sesión (.lampson/trace/<sid>.log)
+async function openTrace(id) {
+  procOpen = null; agentOpen = null;
+  let r; try { r = await (await fetch(BASE + '/api/trace?session=' + encodeURIComponent(id) + '&tail=600')).json(); } catch (e) { return; }
+  showText('traza ' + id, r.file || '', r.trace || '(sin traza todavía: se escribe a medida que el agente trabaja)', true);
+}

package/public/js/sidebar.js

@@ -0,0 +1,33 @@
+// sidebar.js — secciones acordeón de los paneles laterales y plegado de cada panel
+function setSec(name, open) {
+  const s = document.querySelector(`.sec[data-sec="${name}"]`); if (!s) return;
+  s.classList.toggle('open', open);
+  s.querySelector('.caret').textContent = open ? '▾' : '▸';
+}
+// sin preferencia del usuario, una sección se abre sola solo si tiene contenido
+function autoSec(name, hasContent) {
+  const pref = localStorage.getItem('lampson.sec.' + name);
+  setSec(name, pref === null ? hasContent : pref === '1');
+}
+document.querySelectorAll('.sec h2').forEach(h => h.onclick = () => {
+  const s = h.closest('.sec'); const open = !s.classList.contains('open');
+  localStorage.setItem('lampson.sec.' + s.dataset.sec, open ? '1' : '0');
+  setSec(s.dataset.sec, open);
+});
+for (const s of document.querySelectorAll('.sec')) {
+  const pref = localStorage.getItem('lampson.sec.' + s.dataset.sec);
+  if (pref !== null) setSec(s.dataset.sec, pref === '1');
+}
+// plegar/desplegar: cerrado = barra angosta con su icono; preferencia por lado en localStorage
+function sideSet(which, closed) {
+  document.body.classList.toggle(which + '-closed', closed);
+  const a = document.querySelector(which === 'l' ? 'aside:not(.right)' : 'aside.right'); if (a) a.classList.toggle('closed', closed);
+  try { localStorage.setItem('lampson.side.' + which, closed ? '1' : '0'); } catch (e) {}
+}
+for (const which of ['l', 'r']) {
+  const a = document.querySelector(which === 'l' ? 'aside:not(.right)' : 'aside.right'); if (!a) continue;
+  a.querySelector('.fold').onclick = () => sideSet(which, true);
+  a.querySelector('.rail button').onclick = () => sideSet(which, false);
+  let pref = null; try { pref = localStorage.getItem('lampson.side.' + which); } catch (e) {}
+  if (pref === '1') sideSet(which, true);
+}