lampson 0.2.9 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lampson",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "A coding agent written in Synsema: terminal + web, tools confined to the mounted project, plugins (your own tools, any language), LSP, MCP, sub-agents.",
   "license": "MIT",
   "repository": {

package/public/css/mobile.css

@@ -0,0 +1,95 @@
+/* mobile.css — la vista de celular (≤ 900 px), con js/mobile.js. Va ÚLTIMA en la cascada: solo pisa lo que cambia.
+   Barra inferior Chat · Sesiones · Archivos · Más; chips de agente/permisos/modelo sobre la caja de texto; paneles y
+   modales a pantalla completa; nada más ancho que la pantalla (el código y las tablas se deslizan dentro de su caja). */
+@media (min-width:901px) { .mtabs, .mchips, .msheet, .mnew { display:none !important; } }
+
+@media (max-width:900px) {
+  html, body { height:100%; overflow:hidden; }
+  body { height:100dvh; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:"top" "main" "tabs"; }
+
+  /* header: una fila — dónde estás, ⚙ y tema; la segunda fila se reparte entre los chips y «Más» */
+  header { padding-top:env(safe-area-inset-top); }
+  header .hrow { height:48px; padding:0 8px 0 14px; gap:4px; }
+  header .hrow.sub { display:none; }
+  header #term, header #new { display:none; }
+  .brand { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:15px; }
+  header .spacer { display:none; }
+  .theme-toggle { padding:10px; }
+
+  /* paneles: uno por pestaña, a pantalla completa en el lugar del chat */
+  aside { display:none; }
+  body[data-mtab="side"] aside:not(.right), body[data-mtab="files"] aside.right { display:flex; grid-area:main; border:0; overflow:auto; }
+  body[data-mtab="side"] main, body[data-mtab="files"] main { display:none; }
+  aside .fold, aside .rail { display:none !important; }
+  aside.closed .sec { display:flex; }
+  aside .sec h2 { padding:15px 16px 12px; font-size:11.5px; }
+  aside.right h2, aside:not(.right) > .sec:first-of-type h2 { padding-right:16px; }
+  aside .sec .body { padding:0 12px 12px 16px; font-size:15px; }
+  aside .sec .body > * { min-height:34px; }
+  .mnew { flex:none; margin:12px 14px 4px; padding:12px; font:600 11.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.09em; color:var(--accent); background:var(--accent-bg); border:1px solid var(--accent); border-radius:var(--r); cursor:pointer; }
+
+  /* chat: todo el ancho, nada más ancho que la pantalla */
+  #log { padding:14px 16px 18px; max-width:none; }
+  #log.hero { padding:18px 16px; align-items:flex-start; }
+  .user, .assistant, .step { overflow-wrap:anywhere; }
+  .assistant pre, .step pre { max-width:100%; }
+  .assistant table { display:block; max-width:100%; overflow-x:auto; }
+  .assistant img { max-width:100%; height:auto; }
+  .empty code { white-space:normal; }
+  .empty .grid { grid-template-columns:minmax(0,1fr); }
+  .approval .card { max-width:none; }
+  .approval .card button { min-height:40px; }
+
+  /* composer: chips arriba, texto de 16 px (iOS no hace zoom), botón grande para el dedo */
+  form { padding:8px 10px 10px; }
+  /* el texto y el botón en la misma fila (como en cualquier app de mensajes); las imágenes pegadas, arriba */
+  .composer { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; padding:6px 6px 6px 12px; }
+  .composer .attach { flex-basis:100%; }
+  .composer textarea { flex:1; width:auto; min-width:0; min-height:0; font-size:16px; max-height:30vh; padding:7px 0; }
+  .crow { flex:none; margin:0; }
+  .crow .keys, .crow .tools { display:none; }
+  #send { width:44px; height:40px; font-size:17px; }
+  #stop { height:40px; }
+  /* chips: UNA fila que se desliza de costado (en 4 renglones le comían medio chat) */
+  .mchips { display:flex; flex-wrap:nowrap; gap:6px; margin:0 -10px 8px; padding:0 10px; overflow-x:auto; scrollbar-width:none; }
+  .mchips::-webkit-scrollbar { display:none; }
+  .mchips #wsPill { display:none !important; }
+  .mchips select, .mchips .pill { flex:none; height:30px; font:400 12px/1 var(--mono); color:var(--ink-2); background:var(--paper-2); border:1px solid var(--rule-2); border-radius:15px; padding:0 10px; }
+  .mchips select { padding-right:4px; }
+  .mchips .pill { display:inline-flex; align-items:center; max-width:62vw; }
+  .mchips .pill.on { color:var(--accent); }
+  .mchips .pill.nokey { color:var(--rubric); }
+
+  /* barra inferior */
+  .mtabs { grid-area:tabs; display:flex; background:var(--paper); border-top:1px solid var(--rule); padding-bottom:env(safe-area-inset-bottom); }
+  .mtabs button { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 7px; background:none; border:0; color:var(--ink-3); font:400 10.5px/1 var(--mono); letter-spacing:.04em; cursor:pointer; -webkit-tap-highlight-color:transparent; }
+  .mtabs button.on { color:var(--accent); }
+  .mtabs .badge { position:absolute; top:4px; left:calc(50% + 8px); min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--rubric); color:#fff; font:600 10px/16px var(--mono); font-style:normal; }
+
+  /* «Más»: hoja desde abajo */
+  .msheet { position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; justify-content:flex-end; }
+  .msheet .mback { position:absolute; inset:0; background:rgba(0,0,0,.45); }
+  .msheet .mcard { position:relative; background:var(--paper); border-top:1px solid var(--rule-2); border-radius:12px 12px 0 0; padding:10px 12px calc(12px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:4px; }
+  .msheet .mwhere { padding:8px 6px 10px; border-bottom:1px solid var(--rule); margin-bottom:4px; font:400 12px/1.5 var(--mono); color:var(--ink-3); overflow-wrap:anywhere; }
+  .msheet .mgit { color:var(--ink-2); margin-bottom:2px; }
+  .msheet button { text-align:left; padding:14px 8px; background:none; border:0; border-radius:var(--r); color:var(--ink); font:400 16px/1 var(--serif); text-transform:none; letter-spacing:0; cursor:pointer; }
+  .msheet button:active { background:var(--paper-2); }
+  .msheet .mcancel { text-align:center; color:var(--ink-3); font:400 12px/1 var(--mono); text-transform:uppercase; letter-spacing:.09em; margin-top:4px; border-top:1px solid var(--rule); border-radius:0; }
+
+  /* modales (configuración, sesiones, plugins…): pantalla completa; en «browse» la lista arriba y el detalle abajo */
+  .modal { align-items:stretch; justify-content:stretch; }
+  .panel, .panel.lg, .panel.md, .panel.sm { width:100vw; height:100dvh; max-height:none; border:0; border-radius:0; box-shadow:none; padding:calc(10px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); }
+  .panel .browse { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,38%) minmax(0,1fr); }
+  .panel .blist { border-right:0; border-bottom:1px solid var(--rule); padding:10px 0 8px; }
+  .panel .bdetail { padding:12px 2px 8px; }
+  .panel input, .panel select, .panel textarea { font-size:16px; }
+  .panel .pghost { width:36px; height:36px; flex:none; }
+  /* cabecera del modal: la ✕ siempre a la vista (la ruta de «sub» la empujaba fuera de la pantalla) */
+  .panel .phead { gap:8px; min-width:0; }
+  .panel .phead .sub { display:none; }
+  .panel .phead h3 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+
+  /* terminal y visor de archivos: el ancho de la pantalla */
+  #termpane .vh { overflow-x:auto; }
+  #viewer pre { font-size:12px; }
+}

package/public/index.html

@@ -11,13 +11,14 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <link rel="manifest" href="/manifest.webmanifest">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-<!-- estilos: tokens (fuentes, paleta, base) → layout (grid, cabecera, paneles, chat, composer) → sidebar → chat → panel (el modal) → code (editor de archivos + tema de highlight.js) -->
+<!-- estilos: tokens (fuentes, paleta, base) → layout (grid, cabecera, paneles, chat, composer) → sidebar → chat → panel (el modal) → code (editor de archivos + tema de highlight.js) → mobile (la vista de celular, ≤ 900 px) -->
 <link rel="stylesheet" href="/css/tokens.css">
 <link rel="stylesheet" href="/css/layout.css">
 <link rel="stylesheet" href="/css/sidebar.css">
 <link rel="stylesheet" href="/css/chat.css">
 <link rel="stylesheet" href="/css/panel.css">
 <link rel="stylesheet" href="/css/code.css">
+<link rel="stylesheet" href="/css/mobile.css">
 <link rel="stylesheet" href="/vendor/xterm.css">
 <script src="/vendor/xterm.js"></script>
 <script src="/vendor/xterm-addon-fit.js"></script>
@@ -138,6 +139,7 @@
 <script src="/js/sessions.js"></script>
 <script src="/js/chat.js"></script>
 <script src="/js/events.js"></script>
+<script src="/js/mobile.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/pwa.js"></script>
 </body>

package/public/js/mobile.js

@@ -0,0 +1,122 @@
+// mobile.js — la vista de celular (≤ 900 px; en escritorio no hace nada). Decisiones del usuario (2026-09-28):
+//   * barra inferior al alcance del pulgar: Chat · Sesiones (el panel izquierdo entero) · Archivos · Más
+//   * agente, permisos, modelo y plugins como chips sobre la caja de texto (hoy la fila del header rompía el ancho:
+//     la página medía 1060 px en una pantalla de 390)
+// Los controles se MUEVEN (appendChild), no se copian: sus listeners siguen andando; al volver a escritorio vuelven
+// a su lugar. Todo lo que se muestra en el centro pasa por showPane() (sesión, archivo, log, terminal): envuelto,
+// en el celular te lleva solo a la pestaña Chat.
+(function () {
+  const mq = window.matchMedia('(max-width: 900px)');
+  const ICON = {
+    chat: '<path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z"/>',
+    side: '<path d="M4 6h16M4 12h16M4 18h10"/>',
+    files: '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+    more: '<circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/>',
+  };
+  const svg = (k) => `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${ICON[k]}</svg>`;
+  let bar = null, chips = null, sheet = null, newBtn = null, moved = [], on = false, placeholder = null;
+
+  function setTab(t) {
+    document.body.dataset.mtab = t;
+    if (bar) bar.querySelectorAll('button').forEach(b => b.classList.toggle('on', b.dataset.t === t));
+  }
+
+  function build() {
+    bar = document.createElement('nav');
+    bar.className = 'mtabs';
+    bar.innerHTML = [['chat', 'Chat'], ['side', 'Sesiones'], ['files', 'Archivos'], ['more', 'Más']]
+      .map(([t, l]) => `<button type="button" data-t="${t}">${svg(t)}<span>${l}</span><i class="badge" hidden></i></button>`).join('');
+    bar.onclick = (e) => {
+      const b = e.target.closest('button'); if (!b) return;
+      if (b.dataset.t === 'more') openMore(); else setTab(b.dataset.t);
+    };
+    document.body.appendChild(bar);
+    chips = document.createElement('div');
+    chips.className = 'mchips';
+    // «+ nueva sesión» arriba de la lista de sesiones (en escritorio está en el header)
+    newBtn = document.createElement('button');
+    newBtn.type = 'button'; newBtn.className = 'mnew'; newBtn.textContent = '+ nueva sesión';
+    newBtn.onclick = () => { const n = document.getElementById('new'); if (n) n.click(); setTab('chat'); };
+    // aprobaciones pendientes: un número sobre «Sesiones» para no perderlas de vista
+    const cnt = document.getElementById('apprCount');
+    if (cnt) new MutationObserver(badge).observe(cnt, { childList: true, characterData: true, subtree: true });
+    // todo lo que se abre en el centro (sesión, archivo, log, terminal) vuelve a la pestaña Chat
+    if (typeof window.showPane === 'function') {
+      const orig = window.showPane;
+      window.showPane = function (which) { const r = orig.apply(this, arguments); if (on) setTab('chat'); return r; };
+    }
+  }
+
+  function badge() {
+    const b = bar && bar.querySelector('button[data-t="side"] .badge'); if (!b) return;
+    const n = parseInt((document.getElementById('apprCount') || {}).textContent || '0', 10);
+    b.hidden = !(n > 0); b.textContent = n > 0 ? String(n) : '';
+  }
+
+  // los controles del header que van como chips sobre la caja de texto
+  const CHIP_IDS = ['agent', 'perm', 'model', 'plugins', 'wsPill'];
+
+  function attach() {
+    if (!bar) build();
+    const form = document.getElementById('f');
+    if (form && chips.parentNode !== form) form.insertBefore(chips, form.firstChild);
+    moved = [];
+    for (const id of CHIP_IDS) {
+      const el = document.getElementById(id); if (!el) continue;
+      moved.push({ el, parent: el.parentNode, next: el.nextSibling });
+      chips.appendChild(el);
+    }
+    const aside = document.querySelector('aside:not(.right)');
+    if (aside && newBtn.parentNode !== aside) aside.insertBefore(newBtn, aside.firstChild);
+    const ta = document.getElementById('in');
+    if (ta) { placeholder = ta.placeholder; ta.placeholder = 'Escribí… · !comando lo corrés vos'; }
+    document.body.classList.add('mobile');
+    on = true;
+    setTab(document.body.dataset.mtab || 'chat');
+    badge();
+  }
+
+  function detach() {
+    for (const m of moved.reverse()) m.parent.insertBefore(m.el, m.next && m.next.parentNode === m.parent ? m.next : null);
+    moved = [];
+    if (newBtn && newBtn.parentNode) newBtn.parentNode.removeChild(newBtn);
+    const ta = document.getElementById('in');
+    if (ta && placeholder != null) ta.placeholder = placeholder;
+    closeMore();
+    document.body.classList.remove('mobile');
+    delete document.body.dataset.mtab;
+    on = false;
+  }
+
+  // «Más»: lo que en escritorio vive en el header (terminal, configuración, tema, workspaces) y dónde estás
+  function openMore() {
+    closeMore();
+    const click = (id) => () => { closeMore(); const el = document.getElementById(id); if (el) el.click(); };
+    const path = (document.getElementById('hpath') || {}).textContent || '';
+    const git = (document.getElementById('git') || {}).innerHTML || '';
+    const upd = document.getElementById('update');
+    sheet = document.createElement('div');
+    sheet.className = 'msheet';
+    sheet.innerHTML = `<div class="mback"></div><div class="mcard">
+      <div class="mwhere">${git ? `<div class="mgit">${git}</div>` : ''}<div class="mpath">${esc(path)}</div></div>
+      ${upd && upd.style.display !== 'none' ? `<button type="button" data-a="update">${esc(upd.textContent || 'actualizar')}</button>` : ''}
+      <button type="button" data-a="term">&gt;_ terminal</button>
+      <button type="button" data-a="cfg">⚙ configuración</button>
+      <button type="button" data-a="theme">◐ cambiar tema</button>
+      <button type="button" data-a="hub">⌂ workspaces</button>
+      <button type="button" data-a="close" class="mcancel">cerrar</button></div>`;
+    const acts = { update: click('update'), term: click('term'), cfg: click('cfgBtn'), theme: click('theme'), hub: () => { location.href = '/'; }, close: closeMore };
+    sheet.onclick = (e) => {
+      if (e.target.classList.contains('mback')) return closeMore();
+      const b = e.target.closest('button[data-a]'); if (b && acts[b.dataset.a]) acts[b.dataset.a]();
+    };
+    document.body.appendChild(sheet);
+  }
+  function closeMore() { if (sheet) { sheet.remove(); sheet = null; } }
+  function esc(s) { return String(s).replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c])); }
+
+  function apply() { if (mq.matches && !on) attach(); else if (!mq.matches && on) detach(); }
+  // después de que app.js armó el header (los selects se llenan al arrancar)
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', apply); else apply();
+  (mq.addEventListener ? mq.addEventListener('change', apply) : mq.addListener(apply));
+})();

package/public/js/terminal.js

@@ -65,7 +65,7 @@ function newTerm(id, show) {
   if (terms.length >= MAX_TERMS) return;
   if (show !== false) { showPane('term'); procOpen = null; clearInterval(procTimer); }
   const el = document.createElement('div'); el.className = 'xt'; $('#xterms').appendChild(el);
-  const term = new Terminal({ cursorBlink: true, fontFamily: getComputedStyle(document.documentElement).getPropertyValue('--mono'), fontSize: 13, lineHeight: 1.25, theme: termTheme(), scrollback: 5000, allowProposedApi: true });
+  const term = new Terminal({ cursorBlink: true, fontFamily: getComputedStyle(document.documentElement).getPropertyValue('--mono'), fontSize: 13, lineHeight: 1, theme: termTheme(), scrollback: 5000, allowProposedApi: true });
   const fit = new FitAddon.FitAddon(); term.loadAddon(fit);
   const t = { id: id || '', el, term, fit, ws: null, ro: null, box: '', meta: 'conectando…', live: false };
   terms.push(t);