theus-cli 0.2.82 → 0.2.84

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

@@ -1,546 +0,0 @@
-'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
-};