theus-cli-linux-x64 0.2.84

package/vendor/theus-arsenal/scripts/lib/plan-canvas/ui.js

@@ -0,0 +1,546 @@
+'use strict';
+
+/**
+ * Marco de navegador del Lienzo de planes: el shell tipo editor que encuadra
+ * un artefacto, más la plantilla de artefactos markdown renderizados.
+ *
+ * Lenguaje visual del arsenal de Theus: tokens de diseño oscuros primero con
+ * tema claro, gradiente de marca acento→rosa. Todo se sirve inline — sin
+ * CDNs ni recursos externos (salvo Mermaid, opcional y degradable).
+ */
+
+const path = require('path');
+
+const { escapeHtml } = require('./markdown');
+
+// Build ESM de Mermaid fijado, cargado en el navegador solo cuando un
+// artefacto contiene de verdad un diagrama. Se puede apuntar a una URL
+// local/vendorizada (p. ej. un espejo sin internet) vía
+// THEUS_PLAN_CANVAS_MERMAID_URL. Si la carga falla, el código fuente del
+// diagrama queda visible como bloque de código con estilo — nada se rompe.
+const DEFAULT_MERMAID_URL = 'https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs';
+
+function mermaidUrl(env = process.env) {
+  const override = env.THEUS_PLAN_CANVAS_MERMAID_URL;
+  return override && String(override).trim() ? String(override).trim() : DEFAULT_MERMAID_URL;
+}
+
+// Módulo de navegador que renderiza los bloques `<pre class="mermaid">`,
+// tematizado para el lienzo de Theus. Solo importa el módulo, así un fallo
+// del CDN degrada con gracia.
+function mermaidLoaderScript(url) {
+  return `<script type="module">
+  try {
+    const mermaid = (await import(${JSON.stringify(url)})).default;
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      theme: 'dark',
+      fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif",
+      themeVariables: {
+        primaryColor: '#13161e', primaryBorderColor: '#6885e8', primaryTextColor: '#dfe2e9',
+        lineColor: '#80859a', secondaryColor: '#191d2a', tertiaryColor: '#101218',
+        background: '#080a0e', mainBkg: '#13161e', clusterBkg: '#0d0f14'
+      }
+    });
+    await mermaid.run({ querySelector: '.mermaid' });
+  } catch (err) {
+    document.querySelectorAll('.mermaid').forEach(el => el.classList.add('mermaid-unrendered'));
+    console.warn('Render de Mermaid omitido:', err && err.message);
+  }
+</script>`;
+}
+
+// Tokens de diseño compartidos por el marco y la plantilla de markdown.
+const TOKENS_CSS = `
+  :root{
+    --bg:#080a0e; --bg2:#0d0f14; --bg3:#13161e; --bg4:#191d2a;
+    --surface:#101218; --surface-hover:#171a24; --border:#1d2130; --border-light:#272c3e;
+    --text:#dfe2e9; --text2:#80859a; --text3:#4c5168;
+    --accent:#6885e8; --accent-glow:rgba(104,133,232,0.15); --accent-dim:#3d5ab8;
+    --green:#4acb8a; --green-glow:rgba(74,203,138,0.15);
+    --orange:#eca85a; --orange-glow:rgba(236,168,90,0.15);
+    --pink:#e26a9e; --pink-glow:rgba(226,106,158,0.15);
+    --red:#e86060; --red-glow:rgba(232,96,96,0.15);
+    --teal:#4acbbe; --teal-glow:rgba(74,203,190,0.15);
+    --radius:8px; --radius-sm:5px;
+    --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Segoe UI',Roboto,sans-serif;
+    --mono:'SF Mono','Fira Code','JetBrains Mono','Cascadia Code',monospace;
+    --shadow:0 1px 2px rgba(0,0,0,0.4);
+    --shadow-lg:0 8px 32px rgba(0,0,0,0.6);
+  }
+  [data-theme="light"]{
+    --bg:#f4f5f7; --bg2:#ffffff; --bg3:#eaecef; --bg4:#dfe2e6;
+    --surface:#ffffff; --surface-hover:#f4f5f7; --border:#cdd1d9; --border-light:#dde1e8;
+    --text:#181b23; --text2:#585e6e; --text3:#9197a8;
+    --accent:#4560d0; --accent-glow:rgba(69,96,208,0.08); --accent-dim:#2f44a0;
+    --green:#16a34a; --green-glow:rgba(22,163,74,0.08);
+    --orange:#d97706; --orange-glow:rgba(217,119,6,0.08);
+    --pink:#c73877; --pink-glow:rgba(199,56,119,0.08);
+    --red:#dc2626; --red-glow:rgba(220,38,38,0.08);
+    --teal:#0d9488; --teal-glow:rgba(13,148,136,0.08);
+    --shadow:0 1px 2px rgba(0,0,0,0.04);
+    --shadow-lg:0 8px 32px rgba(0,0,0,0.08);
+  }
+`;
+
+function canvasCss() {
+  return `${TOKENS_CSS}
+  *{margin:0;padding:0;box-sizing:border-box}
+  html,body{height:100%}
+  body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.4;overflow:hidden}
+  ::selection{background:var(--accent);color:#fff}
+  ::-webkit-scrollbar{width:8px;height:8px}
+  ::-webkit-scrollbar-track{background:transparent}
+  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
+  button{font-family:var(--font)}
+
+  .bar{display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;background:color-mix(in srgb,var(--bg2) 88%,transparent);border-bottom:1px solid var(--border);backdrop-filter:blur(16px)}
+  .brand{display:flex;align-items:center;gap:9px;min-width:0}
+  .brand .logo{width:26px;height:26px;flex:none;background:linear-gradient(135deg,var(--accent),var(--pink));border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
+  .brand .name{font-size:13.5px;font-weight:600;white-space:nowrap}
+  .brand .file{font-size:11.5px;color:var(--text2);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
+  .bar .spacer{flex:1}
+
+  .presence{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--text2);background:var(--bg3);border:1px solid var(--border);border-radius:99px;padding:3px 10px 3px 8px;white-space:nowrap}
+  .presence .dot{width:7px;height:7px;border-radius:99px;background:var(--text3)}
+  .presence[data-state="listening"] .dot{background:var(--green);box-shadow:0 0 0 3px var(--green-glow);animation:pulse 2s infinite}
+  .presence[data-state="working"] .dot{background:var(--orange);box-shadow:0 0 0 3px var(--orange-glow)}
+  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
+
+  .toggle{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text2);cursor:pointer;user-select:none}
+  .toggle .track{width:30px;height:17px;border-radius:99px;background:var(--bg4);border:1px solid var(--border);position:relative;transition:background .15s}
+  .toggle .knob{position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:99px;background:var(--text2);transition:transform .15s,background .15s}
+  .toggle[aria-pressed="true"] .track{background:var(--accent);border-color:var(--accent-dim)}
+  .toggle[aria-pressed="true"] .knob{transform:translateX(13px);background:#fff}
+
+  .icon-btn{height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:11.5px;display:flex;align-items:center;gap:5px;transition:all .12s}
+  .icon-btn:hover{border-color:var(--border-light);color:var(--text);background:var(--bg4)}
+  .icon-btn.danger:hover{border-color:var(--red);color:var(--red);background:var(--red-glow)}
+
+  .layout{display:flex;height:calc(100% - 52px)}
+  .frame{flex:1;min-width:0;position:relative;background:var(--bg2)}
+  .frame iframe{width:100%;height:100%;border:0;background:#fff}
+  [data-theme] .frame iframe{background:var(--bg2)}
+
+  .panel{width:340px;flex:none;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--bg2)}
+  .panel h2{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);padding:12px 14px 8px}
+
+  .verdict{display:flex;gap:8px;padding:0 14px 12px;border-bottom:1px solid var(--border)}
+  .verdict button{flex:1;height:30px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .12s}
+  .verdict .approve{border:1px solid var(--green);background:var(--green-glow);color:var(--green)}
+  .verdict .approve:hover{background:var(--green);color:#fff}
+  .verdict .changes{border:1px solid var(--orange);background:var(--orange-glow);color:var(--orange)}
+  .verdict .changes:hover{background:var(--orange);color:#fff}
+
+  .chat{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px}
+  .msg{max-width:92%;padding:7px 10px;border-radius:10px;font-size:12.5px;white-space:pre-wrap;word-break:break-word}
+  .msg.user{align-self:flex-end;background:var(--accent-glow);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--text);border-bottom-right-radius:3px}
+  .msg.agent{align-self:flex-start;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:3px}
+  .msg .meta{display:block;font-size:9.5px;color:var(--text3);margin-top:3px}
+  .msg.kind-annotation{border-left:2px solid var(--teal)}
+  .msg.kind-verdict{border-left:2px solid var(--green)}
+  .chat .empty{color:var(--text3);font-size:12px;text-align:center;margin-top:24px;line-height:1.6}
+
+  .queue{padding:8px 14px 0;display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto}
+  .pill{display:flex;align-items:flex-start;gap:8px;background:var(--bg3);border:1px solid var(--border);border-left:2px solid var(--teal);border-radius:6px;padding:6px 8px;font-size:11.5px}
+  .pill.kind-chat{border-left-color:var(--accent)}
+  .pill.kind-verdict{border-left-color:var(--green)}
+  .pill .where{color:var(--teal);font-family:var(--mono);font-size:10px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .pill .body{flex:1;min-width:0;color:var(--text2)}
+  .pill .txt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
+  .pill button{border:none;background:none;color:var(--text3);cursor:pointer;font-size:13px;line-height:1;padding:1px}
+  .pill button:hover{color:var(--red)}
+
+  .composer{padding:10px 14px 14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
+  .composer .hint{font-size:10px;color:var(--text3)}
+  .composer textarea{width:100%;min-height:60px;max-height:160px;resize:vertical;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-size:12.5px;font-family:var(--font);outline:none;transition:all .15s}
+  .composer textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
+  .composer .row{display:flex;gap:8px;align-items:center}
+  .composer .send{flex:1;height:32px;border:none;border-radius:6px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .12s}
+  .composer .send:hover{background:var(--accent-dim)}
+  .composer .send:disabled{opacity:.5;cursor:default}
+  .composer .status{font-size:10.5px;color:var(--text3)}
+
+  .overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(6px);z-index:50}
+  .overlay.show{display:flex}
+  .overlay .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:26px 32px;text-align:center;max-width:340px}
+  .overlay .card h3{font-size:14px;margin-bottom:6px}
+  .overlay .card p{font-size:12px;color:var(--text2);line-height:1.5}
+  `;
+}
+
+// Lógica de cliente de la página del marco (corre en la ventana superior).
+function canvasClientJs() {
+  return `'use strict';
+(() => {
+  const boot = JSON.parse(document.getElementById('pc-session').textContent);
+  const key = boot.key;
+  const $ = id => document.getElementById(id);
+  const frame = $('artifact');
+  const chatLog = $('chatLog');
+  const queueEl = $('queue');
+  const input = $('chatInput');
+  const sendBtn = $('send');
+  const statusEl = $('sendStatus');
+  const presence = $('presence');
+  const QKEY = 'theus-plan-canvas:queue:' + key;
+  let queue = [];
+  let lastScroll = { x: 0, y: 0 };
+  let ended = boot.status === 'ended';
+  let sending = false;
+
+  try { queue = JSON.parse(sessionStorage.getItem(QKEY) || '[]'); } catch { queue = []; }
+
+  // --- tema ------------------------------------------------------------
+  const themeKey = 'theus-plan-canvas:theme';
+  function applyTheme(t) {
+    if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
+    else document.documentElement.removeAttribute('data-theme');
+    $('themeBtn').textContent = t === 'light' ? '\\u263E oscuro' : '\\u2600 claro';
+  }
+  let theme = localStorage.getItem(themeKey) || 'dark';
+  applyTheme(theme);
+  $('themeBtn').addEventListener('click', () => {
+    theme = theme === 'light' ? 'dark' : 'light';
+    localStorage.setItem(themeKey, theme);
+    applyTheme(theme);
+  });
+
+  // --- modo de anotación ------------------------------------------------
+  let annotate = true;
+  function setAnnotate(on) {
+    annotate = on;
+    $('annotate').setAttribute('aria-pressed', String(on));
+    postToFrame({ type: 'pc:set-mode', annotate: on });
+  }
+  $('annotate').addEventListener('click', () => setAnnotate(!annotate));
+  document.addEventListener('keydown', e => {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'i') {
+      e.preventDefault();
+      setAnnotate(!annotate);
+    }
+  }, true);
+
+  // --- puente con el iframe ----------------------------------------------
+  function postToFrame(msg) {
+    if (frame.contentWindow) frame.contentWindow.postMessage(msg, '*');
+  }
+  window.addEventListener('message', e => {
+    if (e.source !== frame.contentWindow) return;
+    const msg = e.data || {};
+    if (msg.type === 'pc:queue' && msg.item) addToQueue(msg.item);
+    else if (msg.type === 'pc:queue-and-send' && msg.item) { addToQueue(msg.item); send(); }
+    else if (msg.type === 'pc:scroll') lastScroll = { x: msg.x || 0, y: msg.y || 0 };
+    else if (msg.type === 'pc:toggle-mode') setAnnotate(!annotate);
+    else if (msg.type === 'pc:ready') {
+      postToFrame({ type: 'pc:set-mode', annotate });
+      postToFrame({ type: 'pc:restore-scroll', x: lastScroll.x, y: lastScroll.y });
+    }
+  });
+
+  // --- cola --------------------------------------------------------------
+  function persistQueue() { try { sessionStorage.setItem(QKEY, JSON.stringify(queue)); } catch { /* lleno */ } }
+  function addToQueue(item) { queue.push(item); persistQueue(); renderQueue(); }
+  function renderQueue() {
+    queueEl.innerHTML = '';
+    queue.forEach((item, i) => {
+      const pill = document.createElement('div');
+      pill.className = 'pill kind-' + item.kind;
+      const body = document.createElement('span');
+      body.className = 'body';
+      if (item.anchor) {
+        const where = document.createElement('span');
+        where.className = 'where';
+        where.textContent = item.anchor.snippet || item.anchor.selector;
+        body.appendChild(where);
+      }
+      const txt = document.createElement('span');
+      txt.className = 'txt';
+      txt.textContent = item.kind === 'verdict' ? (item.verdict === 'approve' ? 'Aprobar plan' : 'Pedir cambios') + (item.text ? ': ' + item.text : '') : item.text;
+      body.appendChild(txt);
+      const rm = document.createElement('button');
+      rm.textContent = '\\u00D7';
+      rm.title = 'Quitar';
+      rm.addEventListener('click', () => { queue.splice(i, 1); persistQueue(); renderQueue(); });
+      pill.append(body, rm);
+      queueEl.appendChild(pill);
+    });
+  }
+  renderQueue();
+
+  // --- chat ----------------------------------------------------------------
+  function renderChat(entries) {
+    chatLog.innerHTML = '';
+    if (!entries.length) {
+      const empty = document.createElement('div');
+      empty.className = 'empty';
+      empty.textContent = 'Haz clic en cualquier parte del plan para anotarla, o escribe abajo. El feedback llega directo a tu agente.';
+      chatLog.appendChild(empty);
+      return;
+    }
+    for (const entry of entries) {
+      const div = document.createElement('div');
+      div.className = 'msg ' + (entry.role === 'agent' ? 'agent' : 'user') + ' kind-' + (entry.kind || 'chat');
+      div.textContent = entry.text;
+      const meta = document.createElement('span');
+      meta.className = 'meta';
+      meta.textContent = (entry.role === 'agent' ? 'agente' : 't\\u00fa') + ' \\u00B7 ' + new Date(entry.at).toLocaleTimeString();
+      div.appendChild(meta);
+      chatLog.appendChild(div);
+    }
+    chatLog.scrollTop = chatLog.scrollHeight;
+  }
+  renderChat(boot.chat || []);
+
+  // --- envío -----------------------------------------------------------------
+  async function send(extraItems) {
+    if (ended || sending) return;
+    const items = queue.slice();
+    if (extraItems) items.push(...extraItems);
+    const text = input.value.trim();
+    if (text) items.push({ kind: 'chat', text });
+    if (!items.length) {
+      statusEl.textContent = 'A\\u00fan no hay nada que enviar: anota el plan o escribe un mensaje.';
+      return;
+    }
+    sending = true;
+    sendBtn.disabled = true;
+    statusEl.textContent = 'Enviando\\u2026';
+    try {
+      const res = await fetch('/api/session/' + key + '/feedback', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ items })
+      });
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      queue = [];
+      persistQueue();
+      renderQueue();
+      input.value = '';
+      statusEl.textContent = 'Enviado. Tu agente lo recoge en su pr\\u00f3xima consulta.';
+    } catch (err) {
+      statusEl.textContent = 'Fallo al enviar (' + err.message + '): \\u00bfsigue corriendo el servidor del lienzo?';
+    } finally {
+      sending = false;
+      sendBtn.disabled = ended;
+    }
+  }
+  sendBtn.addEventListener('click', () => send());
+  input.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
+  });
+  $('approve').addEventListener('click', () => send([{ kind: 'verdict', verdict: 'approve' }]));
+  $('changes').addEventListener('click', () => send([{ kind: 'verdict', verdict: 'request-changes' }]));
+
+  // --- controles de sesión ----------------------------------------------------
+  $('reloadBtn').addEventListener('click', reloadArtifact);
+  $('endBtn').addEventListener('click', async () => {
+    if (!window.confirm('\\u00bfTerminar esta sesi\\u00f3n de revisi\\u00f3n?')) return;
+    try { await fetch('/api/session/' + key + '/end', { method: 'POST' }); } catch { /* servidor ausente */ }
+  });
+  function reloadArtifact() {
+    const base = frame.getAttribute('data-artifact-src');
+    frame.src = base + '?t=' + Date.now();
+  }
+  function markEnded(endedBy) {
+    ended = true;
+    sendBtn.disabled = true;
+    input.disabled = true;
+    presence.setAttribute('data-state', 'ended');
+    presence.querySelector('.label').textContent = 'sesi\\u00f3n terminada';
+    $('endedOverlay').classList.add('show');
+    $('endedWho').textContent = endedBy === 'agent'
+      ? 'Tu agente cerr\\u00f3 esta revisi\\u00f3n.'
+      : 'Terminaste esta revisi\\u00f3n. Vuelve a tu sesi\\u00f3n con el agente.';
+  }
+  if (ended) markEnded(boot.endedBy);
+
+  // --- eventos del servidor -----------------------------------------------------
+  const PRESENCE_LABELS = { waiting: 'agente no conectado', listening: 'agente escuchando', working: 'agente trabajando\\u2026' };
+  function connectEvents() {
+    const es = new EventSource('/events/' + key);
+    es.addEventListener('chat-sync', e => renderChat(JSON.parse(e.data).chat || []));
+    es.addEventListener('presence', e => {
+      const state = JSON.parse(e.data).state;
+      if (ended) return;
+      presence.setAttribute('data-state', state);
+      presence.querySelector('.label').textContent = PRESENCE_LABELS[state] || state;
+    });
+    es.addEventListener('reload', reloadArtifact);
+    es.addEventListener('ended', e => { markEnded(JSON.parse(e.data).endedBy); es.close(); });
+    es.onerror = () => {
+      if (ended) return;
+      presence.setAttribute('data-state', 'waiting');
+      presence.querySelector('.label').textContent = 'servidor del lienzo desconectado';
+    };
+  }
+  connectEvents();
+})();`;
+}
+
+// La página del marco: barra superior, iframe del artefacto y riel de conversación.
+function renderCanvasHtml(session, { clientPath = '/client.js', cssPath = '/canvas.css' } = {}) {
+  const name = path.basename(session.file);
+  const bootstrap = JSON.stringify({
+    key: session.key,
+    file: session.file,
+    status: session.status,
+    endedBy: session.endedBy || null,
+    chat: session.chat
+  }).replace(/</g, '\\u003c');
+  const artifactSrc = `/artifact/${session.key}/`;
+  return `<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(name)} · Lienzo de planes</title>
+<link rel="stylesheet" href="${cssPath}">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%236885e8'/><stop offset='1' stop-color='%23e26a9e'/></linearGradient></defs><rect width='100' height='100' rx='22' fill='url(%23g)'/><text x='50' y='68' font-size='52' font-weight='700' font-family='sans-serif' fill='white' text-anchor='middle'>T</text></svg>">
+</head>
+<body>
+<script id="pc-session" type="application/json">${bootstrap}</script>
+<header class="bar">
+  <div class="brand">
+    <div class="logo">T</div>
+    <span class="name">Lienzo de planes</span>
+    <span class="file" title="${escapeHtml(session.file)}">${escapeHtml(name)}</span>
+  </div>
+  <div class="spacer"></div>
+  <div id="presence" class="presence" data-state="waiting"><span class="dot"></span><span class="label">agente no conectado</span></div>
+  <div id="annotate" class="toggle" role="switch" aria-pressed="true" title="Alternar modo de anotaci&oacute;n (Cmd/Ctrl+I)">
+    <span>Anotar</span><span class="track"><span class="knob"></span></span>
+  </div>
+  <button id="themeBtn" class="icon-btn" type="button">claro</button>
+  <button id="reloadBtn" class="icon-btn" type="button" title="Recargar artefacto">Recargar</button>
+  <button id="endBtn" class="icon-btn danger" type="button">Terminar sesi&oacute;n</button>
+</header>
+<div class="layout">
+  <main class="frame">
+    <iframe id="artifact" title="Artefacto en revisi&oacute;n" src="${artifactSrc}" data-artifact-src="${artifactSrc}" sandbox="allow-scripts allow-forms allow-popups"></iframe>
+    <div id="endedOverlay" class="overlay"><div class="card"><h3>Sesi&oacute;n terminada</h3><p id="endedWho"></p></div></div>
+  </main>
+  <aside class="panel">
+    <h2>Veredicto del plan</h2>
+    <div class="verdict">
+      <button id="approve" class="approve" type="button">Aprobar plan</button>
+      <button id="changes" class="changes" type="button">Pedir cambios</button>
+    </div>
+    <h2>Conversaci&oacute;n</h2>
+    <div id="chatLog" class="chat"></div>
+    <div id="queue" class="queue"></div>
+    <div class="composer">
+      <textarea id="chatInput" placeholder="Escr&iacute;bele a tu agente&#10;Enter env&iacute;a &middot; Shift+Enter salto de l&iacute;nea"></textarea>
+      <div class="row">
+        <button id="send" class="send" type="button">Enviar al agente</button>
+      </div>
+      <div id="sendStatus" class="status"></div>
+      <div class="hint">Las anotaciones se acumulan aqu&iacute; hasta que las env&iacute;as juntas.</div>
+    </div>
+  </aside>
+</div>
+<script src="${clientPath}"></script>
+</body>
+</html>`;
+}
+
+// Plantilla de documento con estilo Theus para artefactos de plan en markdown.
+function renderMarkdownArtifactHtml(bodyHtml, { title, sdkSrc }) {
+  const hasMermaid = bodyHtml.includes('class="mermaid"');
+  return `<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(title)}</title>
+<style>
+${TOKENS_CSS}
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.65;font-size:14.5px}
+  .doc{max-width:860px;margin:0 auto;padding:44px 36px 90px}
+  h1,h2,h3,h4,h5,h6{line-height:1.25;margin:1.6em 0 .55em;letter-spacing:-.01em}
+  h1{font-size:26px;margin-top:.3em;padding-bottom:.45em;border-bottom:1px solid var(--border)}
+  h1:after{content:'';display:block;width:56px;height:3px;margin-top:14px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--pink))}
+  h2{font-size:19px;padding-bottom:.3em;border-bottom:1px solid var(--border)}
+  h3{font-size:15.5px}
+  h4,h5,h6{font-size:13.5px;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
+  p,ul,ol,blockquote,table,pre{margin-bottom:.9em}
+  ul,ol{padding-left:1.5em}
+  li{margin:.25em 0}
+  li.task{list-style:none;margin-left:-1.3em}
+  li.task input{margin-right:.5em;accent-color:var(--accent)}
+  a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-glow)}
+  a:hover{border-bottom-color:var(--accent)}
+  code{font-family:var(--mono);font-size:.88em;background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:.12em .38em}
+  pre{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;overflow-x:auto}
+  pre code{background:none;border:none;padding:0;font-size:12.5px;line-height:1.55}
+  blockquote{border-left:3px solid var(--accent);background:var(--accent-glow);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:8px 14px;color:var(--text2)}
+  table{width:100%;border-collapse:collapse;font-size:13px;display:block;overflow-x:auto}
+  th,td{text-align:left;padding:7px 12px;border:1px solid var(--border)}
+  th{background:var(--bg3);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);white-space:nowrap}
+  tbody tr:hover{background:var(--surface-hover)}
+  hr{border:none;border-top:1px solid var(--border);margin:1.6em 0}
+  img{max-width:100%;border-radius:var(--radius-sm)}
+  pre.mermaid{font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre-wrap}
+  pre.mermaid[data-processed]{background:transparent;border:none;padding:4px 0;text-align:center;overflow-x:auto}
+  pre.mermaid[data-processed] svg{max-width:100%;height:auto}
+  pre.mermaid.mermaid-unrendered:before{content:'código del diagrama (renderizador no disponible)';display:block;font-family:var(--font);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin-bottom:6px}
+</style>
+</head>
+<body>
+<article class="doc">
+${bodyHtml}
+</article>
+${hasMermaid ? mermaidLoaderScript(mermaidUrl()) : ''}
+<script src="${sdkSrc}"></script>
+</body>
+</html>`;
+}
+
+// Página de inicio que lista las sesiones (GET /).
+function renderSessionListHtml(sessions) {
+  const rows = sessions.map(s => {
+    const status = s.status === 'ended'
+      ? `terminada por ${s.endedBy === 'user' ? 'el usuario' : 'el agente'}`
+      : s.status;
+    const link = s.status === 'ended'
+      ? escapeHtml(path.basename(s.file))
+      : `<a href="/canvas/${escapeHtml(s.key)}">${escapeHtml(path.basename(s.file))}</a>`;
+    return `<tr><td>${link}</td><td class="mono">${escapeHtml(s.file)}</td><td><span class="badge ${escapeHtml(s.status)}">${status}</span></td></tr>`;
+  }).join('\n');
+  return `<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<title>Lienzo de planes · sesiones</title>
+<style>
+${TOKENS_CSS}
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{font-family:var(--font);background:var(--bg);color:var(--text);padding:40px;line-height:1.5}
+  .logo{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--pink));border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;margin-right:10px;vertical-align:middle}
+  h1{font-size:18px;display:inline-block;vertical-align:middle}
+  table{margin-top:24px;border-collapse:collapse;width:100%;max-width:900px;font-size:13px}
+  th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}
+  th{color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
+  a{color:var(--accent);text-decoration:none}
+  .mono{font-family:var(--mono);font-size:11.5px;color:var(--text2)}
+  .badge{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--bg3);border:1px solid var(--border);color:var(--text2)}
+  .badge.open,.badge.feedback{color:var(--green);border-color:var(--green);background:var(--green-glow)}
+  .empty{margin-top:24px;color:var(--text3);font-size:13px}
+</style>
+</head>
+<body>
+<span class="logo">T</span><h1>Sesiones del Lienzo de planes</h1>
+${sessions.length ? `<table><thead><tr><th>Artefacto</th><th>Ruta</th><th>Estado</th></tr></thead><tbody>${rows}</tbody></table>` : '<p class="empty">Aún no hay sesiones. Pide a tu agente que abra un plan con la skill lienzo-planes.</p>'}
+</body>
+</html>`;
+}
+
+module.exports = {
+  canvasCss,
+  canvasClientJs,
+  renderCanvasHtml,
+  renderMarkdownArtifactHtml,
+  renderSessionListHtml
+};