lampson 0.1.3 → 0.2.0

package/public/css/layout.css

@@ -0,0 +1,97 @@
+/* layout: grid de tres columnas, cabecera, paneles laterales plegables, zona central (chat / visor / terminal), composer */
+/* ---- grid: cabecera arriba, panel izquierdo (todo lo operativo), chat, panel derecho (árbol) ---- */
+body { display:grid; grid-template-rows:auto 1fr; grid-template-columns:var(--side-l) 1fr var(--side-r); grid-template-areas:"top top top" "side main tree"; --side-l:var(--side); --side-r:var(--side); }
+body.l-closed { --side-l:40px; }
+body.r-closed { --side-r:40px; }
+
+/* ---- header: fila 1 quién/dónde, fila 2 contexto y cómo corre el agente ---- */
+header { grid-area:top; border-bottom:1px solid var(--rule); background:var(--paper); }
+.hrow { display:flex; align-items:center; gap:14px; padding:0 18px; height:44px; min-width:0; }
+.hrow.sub { height:32px; border-top:1px solid var(--rule); gap:12px; }
+.brand { font:600 14px/1 var(--mono); color:var(--ink); letter-spacing:-.01em; white-space:nowrap; }
+.brand .proj { color:var(--ink-3); font-weight:400; margin-left:.6em; }
+.hbtn { display:flex; align-items:center; gap:6px; font:600 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2); background:none; border:1px solid var(--rule-2); border-radius:2px; padding:7px 12px; cursor:pointer; }
+.hbtn:hover { color:var(--ink); border-color:var(--ink-3); }
+.hbtn.upd { color:var(--amber); border-color:var(--amber); }
+.hbtn.upd:hover { color:var(--ink); border-color:var(--ink); }
+.theme-toggle { display:flex; align-items:center; justify-content:center; background:none; border:0; color:var(--ink-3); cursor:pointer; padding:6px; border-radius:var(--r); line-height:0; }
+.theme-toggle:hover { color:var(--ink); background:var(--paper-2); }
+header select { font:400 11.5px/1 var(--mono); color:var(--ink-2); background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:5px 6px; cursor:pointer; }
+header select:hover { border-color:var(--rule-2); color:var(--ink); }
+.pill { font:400 11.5px/1 var(--mono); color:var(--ink-3); letter-spacing:.02em; white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; flex:none; cursor:pointer; border-bottom:1px dashed transparent; }
+.pill:hover { color:var(--ink); border-bottom-color:var(--rule-2); }
+.pill.nokey { color:var(--rubric); }
+.pill.on { color:var(--accent); }
+
+.gitchip { display:none; align-items:center; gap:8px; font:400 11.5px/1 var(--mono); color:var(--ink-2); max-width:45%; flex:none; }
+.gitchip .br { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.gitchip b { font-weight:600; }
+.gitchip .w { color:var(--amber); } .gitchip .g { color:var(--str); } .gitchip .r { color:var(--rubric); } .gitchip .c { color:var(--ink-3); font-weight:400; }
+.hpath { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); font:400 11.5px/1 var(--mono); }
+
+/* ---- paneles laterales: iguales, plegables (cerrado = barra angosta con su icono) ---- */
+aside { grid-area:side; position:relative; border-right:1px solid var(--rule); background:var(--paper); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
+aside.right { grid-area:tree; border-right:0; border-left:1px solid var(--rule); }
+aside .rail { display:none; flex-direction:column; align-items:center; padding-top:10px; gap:8px; }
+aside .rail button, aside .fold { background:none; border:0; color:var(--ink-3); cursor:pointer; padding:5px; border-radius:var(--r); line-height:0; }
+aside .rail button:hover, aside .fold:hover { color:var(--ink); background:var(--paper-2); }
+aside .fold { position:absolute; top:7px; right:6px; z-index:2; }
+aside.right h2 { padding-right:56px; }
+aside:not(.right) > .sec:first-of-type h2 { padding-right:60px; }
+aside.closed .sec, aside.closed .fold { display:none; }
+aside.closed .rail { display:flex; }
+
+/* ---- main ---- */
+main { grid-area:main; display:grid; grid-template-rows:1fr auto; min-height:0; min-width:0; background:var(--paper); }
+#stage { overflow:auto; min-height:0; }
+#log { padding:26px 40px 30px; max-width:920px; }
+#log.hero { max-width:none; min-height:100%; display:flex; align-items:center; padding:20px 40px; }
+#viewer { display:none; padding:0; }
+.vh { position:sticky; top:0; display:flex; gap:12px; align-items:center; padding:9px 16px; background:var(--paper-3); border-bottom:1px solid var(--rule); font:400 11.5px/1 var(--mono); color:var(--ink-3); letter-spacing:.03em; }
+.vh b { color:var(--ink); font-weight:400; }
+.vh .x { cursor:pointer; color:var(--ink-3); }
+.vh .x:hover { color:var(--ink); }
+#viewer pre { margin:0; padding:14px 18px; font:400 12.5px/1.62 var(--mono); tab-size:4; }
+#viewer pre .ln { display:inline-block; width:4ch; margin-right:16px; color:var(--ink-3); text-align:right; user-select:none; }
+#viewer pre.log { color:var(--ink-2); white-space:pre-wrap; }
+/* terminal real (xterm.js sobre un pty del servidor) — ocupa la zona central como un archivo abierto */
+#termpane { display:none; height:100%; flex-direction:column; }
+#termpane .vh { position:static; }
+#termpane .vh .st { width:7px; height:7px; border-radius:50%; background:var(--ink-3); }
+#termpane.live .vh .st { background:var(--str); }
+#xterm { flex:1; min-height:0; padding:10px 14px; background:var(--paper); }
+#xterm .xterm { height:100%; }
+#xterm .xterm-viewport { background:transparent !important; }
+
+/* ---- composer ---- */
+form { padding:12px 40px 12px; border-top:1px solid var(--rule); background:var(--paper); box-sizing:border-box; width:100%; max-width:100%; min-width:0; }
+main > div { min-width:0; }
+.composer { background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r); padding:10px 10px 8px 14px; transition:border-color .12s, box-shadow .12s; }
+.composer:focus-within { border-color:var(--rule-2); box-shadow:0 0 0 3px var(--accent-bg); }
+textarea { display:block; width:100%; resize:none; min-height:40px; max-height:220px; background:transparent; color:var(--ink); border:0; padding:2px 0; font:400 15px/1.55 var(--serif); }
+textarea::placeholder { color:var(--ink-3); }
+textarea:focus { outline:none; }
+.crow { display:flex; align-items:center; gap:10px; margin-top:6px; min-width:0; }
+.crow .tools { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.crow .keys, .crow button { flex:none; }
+/* imágenes pegadas: miniaturas en el composer y en el mensaje */
+.attach { display:flex; gap:8px; flex-wrap:wrap; }
+.attach:not(:empty) { margin:2px 0 8px; }
+.attach .th, .user .th { position:relative; width:72px; height:72px; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; background:var(--paper-3); }
+.attach .th img, .user .th img { width:100%; height:100%; object-fit:cover; display:block; }
+.attach .th .rm { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:var(--paper); color:var(--ink-2); font:600 11px/18px var(--mono); text-align:center; cursor:pointer; border:1px solid var(--rule-2); }
+.attach .th .rm:hover { color:var(--rubric); }
+.attach .th .sz { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.55); color:#fff; font:400 9.5px/1.4 var(--mono); text-align:center; }
+.user .ims { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
+.user .th { width:120px; height:90px; cursor:zoom-in; }
+.composer.drop { border-color:var(--accent); }
+.attach .novision { flex-basis:100%; color:var(--amber); font:400 11.5px/1.5 var(--mono); }
+.crow .tools { color:var(--ink-3); font:400 11px/1 var(--mono); letter-spacing:.03em; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.crow .keys { color:var(--ink-3); font:400 10.5px/1 var(--mono); letter-spacing:.03em; }
+#send { width:34px; height:30px; padding:0; font-size:15px; display:inline-flex; align-items:center; justify-content:center; }
+#stop { color:var(--rubric); border-color:var(--rubric); display:none; height:30px; }
+form.busy #send { display:none; } form.busy #stop { display:inline-flex; align-items:center; gap:6px; }
+.hint { display:none; }
+
+@media (max-width:900px) { body { grid-template-columns:1fr; grid-template-areas:"top" "main"; } aside { display:none; } #log, form { padding-left:20px; padding-right:20px; } }
+@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }

package/public/css/panel.css

@@ -0,0 +1,125 @@
+/* panel: EL componente modal de la app (js/panel.js). Un cascarón (overlay, cabecera, ✕/Esc/clic afuera) y
+   tres layouts: browse (buscador + lista + detalle), tabs (pestañas con formularios) y form (un formulario).
+   Cada vista (sesiones, lámparas, configuración, programar…) solo aporta su contenido; nada de esto se repite. */
+.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:50; }
+.panel { background:var(--paper); border:1px solid var(--rule-2); border-radius:var(--r); box-shadow:0 10px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; min-height:0; max-height:92vh; }
+.panel.lg { width:min(1100px, 94vw); height:min(760px, 90vh); padding:14px 18px 12px; }
+.panel.md { width:min(680px, 94vw); padding:14px 18px 12px; }
+.panel.sm { width:min(560px, 92vw); padding:14px 18px 12px; }
+
+/* cabecera */
+.panel .phead { display:flex; align-items:center; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--rule); flex:none; }
+.panel .phead .eyebrow { font:400 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--rubric); margin:0; }
+.panel .phead h3 { margin:0; font:600 16px/1.2 var(--serif); letter-spacing:-.01em; }
+.panel .phead .sub { color:var(--ink-3); font:400 11.5px/1 var(--mono); }
+.panel .pghost { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; margin:0; font:400 13px/1 var(--mono); letter-spacing:0; text-transform:none; border:1px solid var(--rule); border-radius:var(--r); background:transparent; color:var(--ink-3); cursor:pointer; }
+.panel .pghost:hover { color:var(--ink); border-color:var(--rule-2); }
+.panel .pghost + .pghost { margin-left:6px; }
+
+/* pestañas */
+.panel .ptabs { display:flex; gap:2px; border-bottom:1px solid var(--rule); margin:0 0 14px; flex:none; }
+.panel .ptab { font:400 11px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); padding:10px 12px 8px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
+.panel .ptab:hover { color:var(--ink); }
+.panel .ptab.on { color:var(--accent); border-bottom-color:var(--accent); }
+
+/* cuerpo genérico (form / tabs): prosa y campos con la gramática de la app */
+.panel .pbody { flex:1; min-height:0; overflow:auto; padding:14px 2px 4px; }
+.panel .lead { color:var(--ink-2); margin:0 0 16px; font-size:14px; }
+.panel .lead code, .panel .phelp code { font:400 .88em/1.5 var(--mono); background:var(--paper-2); padding:.08em .3em; border-radius:2px; color:var(--ink); }
+.panel label { display:flex; align-items:center; gap:12px; font:400 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin:0 0 10px; }
+.panel label.col { flex-direction:column; align-items:stretch; gap:4px; }
+.panel label .ds { display:block; color:var(--ink-3); font:400 11.5px/1.4 var(--serif); text-transform:none; letter-spacing:0; margin-top:2px; }
+.panel input, .panel select, .panel textarea { flex:1; font:400 13px/1.4 var(--mono); color:var(--ink); background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r); padding:7px 10px; min-width:0; }
+.panel input:focus, .panel select:focus, .panel textarea:focus { outline:none; border-color:var(--rule-2); box-shadow:0 0 0 3px var(--accent-bg); }
+.panel input[disabled] { opacity:.55; }
+.panel textarea { width:100%; resize:vertical; font:400 12.5px/1.45 var(--mono); }
+.panel .pfoot { display:flex; gap:8px; align-items:center; margin-top:14px; flex:none; }
+.panel .err { color:var(--rubric); font:400 12px/1.4 var(--mono); min-height:14px; }
+.panel .plist { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); max-height:40vh; overflow:auto; margin:0 0 14px; }
+.panel .plist .pr { display:flex; align-items:center; gap:10px; padding:7px 10px; cursor:pointer; font:400 12.5px/1.4 var(--mono); color:var(--ink-2); border-left:2px solid transparent; }
+.panel .plist .pr:hover { color:var(--ink); }
+.panel .plist .pr.on { color:var(--ink); border-left-color:var(--accent); background:var(--paper-2); }
+.panel .plist .pr b { width:110px; font-weight:600; color:var(--ink); }
+.panel .plist .pr .dm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); }
+.panel .plist .pr .k { font-size:11px; color:var(--str); }
+.panel .plist .pr .k.no { color:var(--ink-3); }
+
+/* browse: lista a la izquierda (buscador, filas, contador), detalle a la derecha. Un scroll por columna, nunca horizontal. */
+.panel .browse { flex:1; min-height:0; display:grid; grid-template-columns:var(--list-w, 300px) minmax(0,1fr); }
+.panel .blist { display:flex; flex-direction:column; border-right:1px solid var(--rule); padding:10px 12px 8px 0; min-height:0; min-width:0; }
+.panel .blist input { flex:none; height:30px; font:400 12px/1.4 var(--mono); background:transparent; padding:0 8px; margin:0 0 8px; width:100%; }
+.panel .bitems { flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; }
+.panel .bcount { color:var(--ink-3); font:400 11px/1 var(--mono); padding-top:8px; border-top:1px solid var(--rule); flex:none; }
+.panel .bdetail { overflow-y:auto; overflow-x:hidden; min-height:0; min-width:0; padding:12px 6px 8px 18px; font:400 12.5px/1.5 var(--mono); }
+.panel .bempty { color:var(--ink-3); font:400 12.5px/1.5 var(--serif); padding:8px; }
+.panel .li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:8px; align-items:start; padding:7px 8px; border-radius:var(--r); cursor:pointer; font:400 12px/1.35 var(--mono); min-width:0; }
+.panel .li.nodot { grid-template-columns:minmax(0,1fr); }
+.panel .li > div { min-width:0; }
+.panel .li:hover { background:var(--paper-2); }
+.panel .li.sel { background:var(--paper-2); box-shadow:inset 2px 0 0 var(--accent); }
+.panel .li .dot { color:var(--ink-3); margin-top:1px; }
+.panel .li.on .dot { color:var(--accent); }
+.panel .li.bad .dot { color:var(--rubric); }
+.panel .li.new .nm { color:var(--accent); font-weight:400; }
+.panel .dform label { margin-top:10px; }
+.panel .dform .lead { margin:8px 0 12px; }
+.panel .dform .pfoot { margin-top:16px; }
+.panel .derr { color:var(--rubric); font:400 12px/1.4 var(--mono); min-height:14px; margin-top:6px; }
+.panel .dlog { margin-top:12px; max-height:38vh; overflow:auto; font:400 11.5px/1.45 var(--mono); border:1px solid var(--rule); border-radius:var(--r); padding:8px; white-space:pre-wrap; color:var(--ink-2); }
+.panel .li.broken .dot { color:var(--rubric); }
+.panel .li .nm { color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.panel .li .nm.serif { font:400 13px/1.35 var(--serif); }
+.panel .li .meta { color:var(--ink-3); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.panel .li .snip { color:var(--ink-2); font:400 12px/1.4 var(--serif); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.panel mark { background:transparent; color:var(--accent); font-weight:600; }
+
+/* piezas de detalle que comparten las vistas */
+.panel .dhead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
+.panel .dhead .nm { font:600 18px/1.2 var(--mono); color:var(--ink); }
+.panel .dhead .nm.serif { font:600 16px/1.3 var(--serif); }
+.panel .dhead .meta { color:var(--ink-3); font-size:11.5px; }
+.panel .ddesc { color:var(--ink-2); font:400 13px/1.5 var(--serif); margin:8px 0 4px; max-width:70ch; }
+.panel .dcap { color:var(--ink-3); font-size:11.5px; margin-bottom:12px; word-break:break-all; }
+.panel .dcap b { color:var(--rubric); font-weight:600; }
+.panel .dcap.err { color:var(--rubric); }
+.panel .dnote { color:var(--ink-3); font:400 12px/1.5 var(--serif); border:1px dashed var(--rule-2); border-radius:var(--r); padding:8px 10px; margin:8px 0 12px; }
+.panel .dacts { display:flex; gap:8px; margin-top:12px; }
+.panel .dacts button { font:400 12px/1 var(--mono); padding:6px 12px; }
+.panel .dfoot { display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:10px; border-top:1px solid var(--rule); color:var(--ink-3); font-size:11.5px; }
+.panel .dfoot .del { margin-left:auto; cursor:pointer; color:var(--rubric); }
+.panel .dfoot .del.ask .yes { color:var(--rubric); cursor:pointer; font-weight:600; }
+.panel .dfoot .del.ask .no { cursor:pointer; }
+.panel .none { color:var(--ink-3); font:400 13px/1.6 var(--serif); max-width:520px; }
+/* switch encendido/apagado (lámparas) */
+.panel label.sw { display:inline-flex; align-items:center; margin:0 0 0 auto; gap:6px; cursor:pointer; user-select:none; font:400 11.5px/1 var(--mono); text-transform:none; letter-spacing:0; color:var(--ink-3); }
+.panel label.sw input { flex:none; width:16px; height:16px; padding:0; margin:0; accent-color:var(--accent); }
+.panel label.sw.on { color:var(--accent); }
+/* formulario generado desde un JSON Schema (tools de una lámpara) */
+.panel .tool { border:1px solid var(--rule); border-radius:var(--r); padding:10px 12px; margin-bottom:10px; }
+.panel .tool .th { display:grid; grid-template-columns:auto 1fr auto; gap:8px 10px; align-items:baseline; }
+.panel .tool .th code { font-weight:600; color:var(--ink); }
+.panel .tool .th .ds { color:var(--ink-3); font:400 12px/1.4 var(--serif); }
+.panel label.lf { display:grid; grid-template-columns:120px minmax(0,1fr); gap:2px 10px; align-items:center; margin:8px 0 0; font:400 12px/1.4 var(--mono); text-transform:none; letter-spacing:0; color:var(--ink); }
+.panel label.lf .lk { color:var(--ink); }
+.panel label.lf .req { color:var(--rubric); font-size:10.5px; }
+.panel label.lf .ds { grid-column:2; color:var(--ink-3); font:400 11.5px/1.4 var(--serif); }
+.panel label.lf input, .panel label.lf select, .panel label.lf textarea { flex:none; width:100%; max-width:420px; padding:4px 6px; font:400 12px/1.4 var(--mono); background:transparent; }
+.panel label.lf textarea { grid-column:2; min-height:56px; }
+.panel .tool .go { margin-top:10px; display:flex; align-items:center; gap:10px; }
+.panel .tool .go button { font:400 12px/1 var(--mono); padding:5px 10px; }
+.panel .tool .go .st { color:var(--ink-3); font-size:11.5px; }
+.panel .tool pre.out { margin-top:8px; max-height:38vh; overflow:auto; font:400 11.5px/1.45 var(--mono); border:1px solid var(--rule); border-radius:var(--r); padding:8px; white-space:pre-wrap; }
+/* conversación resumida (sesiones) */
+.panel .dmsgs { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
+.panel .dmsg { border-left:2px solid var(--rule-2); padding:2px 0 2px 10px; font:400 12.5px/1.5 var(--serif); color:var(--ink-2); white-space:pre-wrap; word-break:break-word; }
+.panel .dmsg.dm-user { border-left-color:var(--accent); color:var(--ink); }
+.panel .dmsg.dm-bad { border-left-color:var(--rubric); }
+.panel .dmsg .who a { color:var(--accent); text-decoration:none; }
+.panel .dmsg .who { font:400 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); display:block; margin-bottom:3px; }
+/* ayuda («?»): prosa a lo ancho, reemplaza al cuerpo */
+.panel .phelp { flex:1; min-height:0; overflow:auto; padding:16px 24px 8px 6px; font:400 13.5px/1.6 var(--serif); color:var(--ink-2); }
+.panel .phelp h4 { margin:0 0 8px; font:600 15px/1.3 var(--serif); color:var(--ink); }
+.panel .phelp b { color:var(--ink); font-weight:600; }
+.panel .phelp p { margin:0 0 12px; max-width:78ch; }
+.panel .phelp ul { margin:0 0 16px 20px; padding:0; display:grid; gap:4px; max-width:78ch; }
+.panel .phelp button { text-transform:none; letter-spacing:0; font:400 12px/1 var(--mono); padding:6px 10px; }

package/public/css/sidebar.css

@@ -0,0 +1,80 @@
+/* sidebar: secciones acordeón y las filas de cada una */
+/* secciones colapsables; el activo es una muesca en la regla, no una caja */
+.sec { display:flex; flex-direction:column; min-height:0; flex:none; overflow:hidden; }
+.sec + .sec { border-top:1px solid var(--rule); }
+.sec h2 { font:400 10.5px/1.35 var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin:0; padding:12px 16px 8px; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; flex:none; }
+.sec h2:hover { color:var(--ink); }
+.sec .caret { width:9px; font-size:9px; color:var(--ink-3); }
+.sec h2 .h2act { margin-left:auto; border:0; background:none; color:var(--ink-3); font:inherit; font-size:12px; cursor:pointer; padding:0 2px; line-height:1; opacity:.6; }
+.sec h2 .h2act:hover { opacity:1; color:var(--accent); }
+.sec h2 .h2act.spin { animation: h2spin .6s linear; }
+@keyframes h2spin { to { transform: rotate(360deg); } }
+.sec .cnt { margin-left:auto; letter-spacing:0; text-transform:none; }
+.sec .body { display:none; overflow:auto; min-height:0; padding:0 10px 10px 16px; }
+.sec.open .body { display:block; }
+.sec:not(.grow).open .body { max-height:22vh; }
+.sec.grow.open { flex:1; }
+.sec.grow.open .body { flex:1; }
+#tree { font:400 12.5px/1.5 var(--mono); }
+.node { user-select:none; }
+.row { display:flex; align-items:center; gap:6px; padding:3px 6px 3px 8px; cursor:pointer; color:var(--ink-2); white-space:nowrap; margin-left:-1px; border-left:2px solid transparent; }
+.row:hover { color:var(--ink); }
+.row.dir { color:var(--ink); }
+.row .tw { width:9px; color:var(--ink-3); font-size:9px; }
+.row.active { color:var(--ink); font-weight:600; border-left-color:var(--accent); }
+.row.gM > span:nth-child(2) { color:var(--amber); }
+.row.gA > span:nth-child(2), .row.gU > span:nth-child(2) { color:var(--str); }
+.row.gD > span:nth-child(2) { color:var(--rubric); text-decoration:line-through; }
+.row .gs { margin-left:auto; font-size:10px; color:var(--ink-3); }
+.kids { margin-left:12px; border-left:1px solid var(--rule); }
+.kids.hidden { display:none; }
+.s, .m, .p { display:flex; align-items:center; gap:8px; padding:4px 6px 4px 8px; cursor:pointer; color:var(--ink-2); font:400 12.5px/1.5 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-left:-1px; border-left:2px solid transparent; }
+.s:hover, .m:hover, .p:hover { color:var(--ink); }
+.s.active, .m.active, .p.active { color:var(--ink); border-left-color:var(--accent); }
+.s .title { overflow:hidden; text-overflow:ellipsis; font-family:var(--serif); font-size:13px; }
+.s .id { color:var(--ink-3); font-size:11px; flex:none; }
+.m b { color:var(--ink); font-weight:600; flex:none; }
+.m .t { overflow:hidden; text-overflow:ellipsis; font-family:var(--serif); font-size:13px; }
+.p .st { width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:none; }
+.p.run .st { background:var(--str); }
+.p .nm { font-weight:600; color:var(--ink); }
+.p .cm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
+.p .port { color:var(--amber); font-weight:600; text-decoration:none; flex:none; }
+.p .port:hover { text-decoration:underline; text-underline-offset:.18em; }
+.p button { padding:1px 7px; font-size:10px; }
+.none { color:var(--ink-3); cursor:default; }
+.none:hover { color:var(--ink-3); }
+
+/* filas de tareas programadas y aprobaciones */
+.p.sched { flex-wrap:wrap; }
+.p.sched .st.on { background:var(--accent); }
+.p.sched .st.busy { background:var(--amber); animation: pulse 1s ease-in-out infinite; }
+.p.sched .st.bad { background:var(--rubric); }
+.p.sched .sub { flex-basis:100%; color:var(--ink-3); font-size:10.5px; padding-left:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.p.sched .act { margin-left:auto; display:inline-flex; gap:2px; visibility:hidden; }
+.p.sched:hover .act, .p.sched .act.ask { visibility:visible; }
+.p.sched .act span { color:var(--ink-3); font-size:11px; padding:0 4px; cursor:pointer; }
+.p.sched .act span:hover { color:var(--accent); }
+.p.sched .act span.rm:hover { color:var(--rubric); }
+.p.appr { flex-wrap:wrap; cursor:default; }
+.p.appr .msg { flex-basis:100%; color:var(--ink); font-size:11.5px; white-space:pre-wrap; padding-left:15px; }
+.p.appr .why { flex-basis:100%; color:var(--rubric); font-size:10.5px; padding-left:15px; }
+.p.appr .btns { flex-basis:100%; display:flex; gap:6px; padding:4px 0 2px 15px; }
+.p.appr .btns button { padding:2px 9px; font-size:11px; }
+.sec .daemon { font:400 10.5px/1.5 var(--mono); color:var(--ink-3); padding:2px 0 4px; }
+.sec .daemon.off { color:var(--rubric); }
+@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
+
+.s.more { color:var(--accent); }
+
+/* ✕ → «¿borrar? sí · no» en línea */
+.s .del { margin-left:auto; color:var(--ink-3); visibility:hidden; font-size:11px; padding:0 4px; }
+.s:hover .del { visibility:visible; }
+.s .del:hover { color:var(--rubric); }
+.p .del { margin-left:auto; color:var(--ink-3); visibility:hidden; font-size:11px; padding:0 4px; cursor:pointer; }
+.p:hover .del { visibility:visible; }
+.p .del:hover { color:var(--rubric); }
+.del.ask, .s:hover .del.ask { visibility:visible; color:var(--ink-2); font:400 11px/1.4 var(--mono); white-space:nowrap; }
+.del.ask .yes { color:var(--rubric); cursor:pointer; font-weight:600; }
+.del.ask .no { color:var(--ink-2); cursor:pointer; }
+.del.ask .yes:hover, .del.ask .no:hover { text-decoration:underline; text-underline-offset:.18em; }

package/public/css/tokens.css

@@ -0,0 +1,57 @@
+/* tokens: fuentes, paleta (dark/light), base y botones — lo que todo lo demás asume */
+/* Misma dirección que docs.synsema.com: tinta sobre papel, una superfamilia (IBM Plex) en dos
+   voces — la SERIF para lo que se lee (mensajes, hero), la MONO para estructura y maquinaria
+   (header, sidebar, pasos, código, controles). El color se raciona: azul = link / dónde estás,
+   rubric rojo = peligro y permisos (la única cosa que vale la pena ver desde lejos). */
+@font-face{font-family:"Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Plex Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400i-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Plex Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400i-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-serif-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-serif-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
+
+:root, :root[data-theme=dark] {
+  --paper:#131412; --paper-2:#1b1c19; --paper-3:#212320;
+  --ink:#e9e8df; --ink-2:#9b9c90; --ink-3:#848678;
+  --rule:#2b2c27; --rule-2:#3c3d36;
+  --accent:#8fb4dc; --accent-bg:#1b2836;
+  --rubric:#d98670; --str:#a8bd84; --amber:#d9b26f;
+  --sel:#33465b; --term-blue:#4f86d1;
+  --serif:"Plex Serif",Georgia,"Times New Roman",serif;
+  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
+  --r:3px; --side:280px;
+}
+:root[data-theme=light] {
+  --paper:#fcfcfa; --paper-2:#f4f3ee; --paper-3:#ecebe3;
+  --ink:#1a1b18; --ink-2:#56584f; --ink-3:#6a6c61;
+  --rule:#e4e3da; --rule-2:#cfcec2;
+  --accent:#21578c; --accent-bg:#e9eef4;
+  --rubric:#99372a; --str:#4a6b3f; --amber:#8a6a1f;
+  --sel:#cfe0f0; --term-blue:#21578c;
+}
+
+* { box-sizing:border-box; }
+html, body { height:100%; }
+body { margin:0; background:var(--paper); color:var(--ink); font:400 14.5px/1.6 var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
+::selection { background:var(--sel); }
+:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:1px; }
+button, select, textarea { font-family:inherit; }
+.spacer { flex:1; }
+
+/* botones: el primario es tinta sobre papel, el secundario solo borde */
+button { font:600 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2); background:none; border:1px solid var(--rule-2); border-radius:2px; padding:7px 12px; cursor:pointer; }
+button:hover { color:var(--ink); border-color:var(--ink-3); }
+button.primary { color:var(--paper); background:var(--ink); border-color:var(--ink); }
+button.primary:hover { opacity:.85; color:var(--paper); }
+button:disabled { opacity:.45; cursor:default; }
+
+/* barras de scroll finas y del color del tema (las nativas de Windows son gruesas y grises) */
+* { scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent; }
+*::-webkit-scrollbar { width:7px; height:7px; }
+*::-webkit-scrollbar-track { background:transparent; }
+*::-webkit-scrollbar-thumb { background:var(--rule-2); border-radius:4px; }
+*::-webkit-scrollbar-thumb:hover { background:var(--ink-3); }

package/public/hub.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<title>Lampson · workspaces</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="/css/tokens.css">
+<link rel="stylesheet" href="/css/layout.css">
+<link rel="stylesheet" href="/css/chat.css">
+<link rel="stylesheet" href="/css/panel.css">
+<link rel="stylesheet" href="/css/hub.css">
+<script>(function(){try{var t=localStorage.getItem('lampson.theme');if(t!=='light'&&t!=='dark'){t='dark';}document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
+</head>
+<body class="hub">
+<header>
+  <div class="hrow">
+    <span class="brand">lampson<span class="proj">workspaces</span></span>
+    <span class="spacer"></span>
+    <button class="theme-toggle" id="theme" type="button" title="cambiar tema"></button>
+  </div>
+</header>
+<main>
+  <div id="stage">
+    <div class="empty">
+      <p class="eyebrow">workspaces</p>
+      <h1>¿En qué proyecto trabajamos?</h1>
+      <p class="lead">Cada workspace es una carpeta de tu disco con su propio agente: sesiones, tareas programadas, lámparas, MCP. Corren en procesos separados, así podés tener varios abiertos a la vez. Los que tienen tareas encendidas siguen vivos aunque cierres todo.</p>
+      <div class="wsgrid" id="wsGrid"></div>
+      <p class="lead" style="margin-top:22px">Desde una terminal: <code>cd mi-proyecto &amp;&amp; lampson</code> (terminal) o <code>lampson --web</code> (esta web, en ese workspace).</p>
+    </div>
+  </div>
+</main>
+<script src="/js/panel.js"></script>
+<script src="/js/hub.js"></script>
+</body>
+</html>