@danieltmn/tamnora 0.22.0 → 0.23.1

package/harness/packages/server/public/cards.js

@@ -0,0 +1,470 @@
+// Tarjetas de la consola: las que dibujan una herramienta, un permiso, una
+// pregunta, un plan o el comentario del asesor.
+
+import { api, button, el, icon, state } from './core.js';
+import { toast } from './commands.js';
+import { addMessage, chatInput, paneOf, scrollMessages, sendMessage } from './chat.js';
+import { ADVISOR_KINDS, advisorMeta, isFailedToolText, isReadOnlyTool, screenshotName, toolSummary } from './chatFormat.js';
+import { renderMarkdown } from './markdown.js';
+import { summarizeArgs } from './reconcile.js';
+import { yesInput } from './chrome.js';
+import { reconcile, renderAlertSignals } from './system.js';
+import { reproducirVoz } from './voice.js';
+export function renderToolOut(node, text) {
+  const content = String(text ?? '');
+  const lines = content.split('\n');
+  const adds = lines.filter((line) => line.startsWith('+ ')).length;
+  const dels = lines.filter((line) => line.startsWith('- ')).length;
+  if (adds === 0 || dels === 0) {
+    node.textContent = content;
+    return;
+  }
+  node.textContent = '';
+  for (const line of lines) {
+    const cls = line.startsWith('+ ')
+      ? 'diff-add'
+      : line.startsWith('- ')
+        ? 'diff-del'
+        : /^ {2}…/.test(line)
+          ? 'diff-sep'
+          : 'diff-eq';
+    node.appendChild(el('span', `diff-line ${cls}`, line));
+  }
+}
+
+export const toolCardIndex = new Map();
+
+/** Muestra la captura del tool `screenshot` en su tarjeta (clic para ampliar). */
+export function showScreenshot(entry, name) {
+  if (!entry || !name || entry.shot) return;
+  entry.shot = true;
+  const img = el('img', 'tool-shot');
+  img.loading = 'lazy';
+  img.alt = 'captura de pantalla';
+  img.src = `/api/screenshots/${encodeURIComponent(name)}`;
+  img.addEventListener('click', () => window.open(img.src, '_blank'));
+  entry.card.appendChild(img);
+}
+
+/** Cierra la tarjeta de un tool-call (evento tool_result o mensaje persistido). */
+export function finishToolCard(entry, data) {
+  if (!entry) return;
+  const preview = data?.preview ?? data?.result ?? '';
+  const failed = data?.failed ?? isFailedToolText(preview);
+  renderToolOut(entry.out, preview);
+  entry.card.classList.remove('running');
+  entry.card.classList.toggle('failed', failed);
+  if (!failed) entry.card.classList.add('done');
+  entry.glyph.textContent = failed ? '✗' : '✓';
+  if (data?.truncated) {
+    entry.truncated = true;
+    entry.more.hidden = false;
+  }
+  if (!failed) showScreenshot(entry, screenshotName(data, preview));
+}
+
+export function ensureToolsToggle(message) {
+  if (!message.toolsToggle) {
+    const bar = el('div', 'tools-actions');
+    const label = el('span', 'tools-count');
+    const toggle = button('colapsar todo', () => {
+      const details = [...message.tools.querySelectorAll('details.tool-card')];
+      const anyOpen = details.some((node) => node.open);
+      for (const node of details) node.open = !anyOpen;
+      toggle.textContent = anyOpen ? 'expandir todo' : 'colapsar todo';
+    }, 'tools-toggle');
+    bar.append(label, toggle);
+    message.tools.prepend(bar);
+    message.toolsToggle = bar;
+    message.toolsCount = label;
+    message.toolsToggleBtn = toggle;
+  }
+  const total = message.tools.querySelectorAll('details.tool-card').length;
+  const groups = new Set([...message.tools.querySelectorAll('details.tool-card')].map((n) => n.dataset.round ?? ''));
+  message.toolsToggle.hidden = total < 2;
+  message.toolsCount.textContent = groups.size > 1 ? `${total} pasos` : `${total} herramientas`;
+}
+
+export async function loadFullToolResult(entry, message) {
+  if (entry.full || !entry.callId) return;
+  const sessionId = paneOf(message)?.dataset.session;
+  if (!sessionId) return;
+  entry.more.disabled = true;
+  entry.more.textContent = 'cargando…';
+  const data = await api(
+    `/api/sessions/${sessionId}/tool-result?callId=${encodeURIComponent(entry.callId)}`
+  ).catch(() => null);
+  entry.more.disabled = false;
+  if (data?.content != null) {
+    renderToolOut(entry.out, data.content);
+    entry.full = true;
+    entry.more.hidden = true;
+  } else {
+    entry.more.textContent = 'ver completo';
+  }
+}
+
+/** Botón del tool `speak`: encola el audio pedido en el reproductor global. */
+export function speakControl(args) {
+  const texto = String(args?.texto ?? '').trim();
+  if (!texto) return null;
+  const btn = button('', () => reproducirVoz(texto, { voice: args?.voice, rate: args?.rate, pitch: args?.pitch, label: 'voz' }).catch(() => {}), 'tool-audio-btn');
+  btn.append(icon('play', 13), el('span', '', 'escuchar'));
+  return btn;
+}
+
+/** Texto de la tarjeta: el server ya manda `summary` calculado; esto es el fallback. */
+export function addToolCard(message, name, args, { callId = null, open = null, round = null, summary = null } = {}) {
+  const collapsed = open === null ? isReadOnlyTool(name) : !open;
+  const card = el('details', 'tool-card running');
+  card.open = !collapsed;
+  if (round != null) card.dataset.round = String(round);
+  const head = el('summary', 'tool-head');
+  const glyph = el('span', 'tool-glyph', '⏺');
+  const argsEl = el('span', 'tool-args', summary ?? toolSummary(name, args));
+  head.append(glyph, el('span', 'tool-name', name), argsEl);
+  const out = el('div', 'tool-out');
+  const speak = name === 'speak' ? speakControl(args) : null;
+  const more = button('ver completo', () => loadFullToolResult(entry, message), 'tool-more');
+  more.hidden = true;
+  card.append(head, out);
+  if (speak) card.appendChild(speak);
+  card.appendChild(more);
+  message.tools.appendChild(card);
+  ensureToolsToggle(message);
+  scrollMessages(paneOf(message));
+
+  const entry = { card, out, glyph, argsEl, more, callId, full: false, truncated: false };
+  card.addEventListener('toggle', () => {
+    if (card.open && entry.truncated && !entry.full) loadFullToolResult(entry, message);
+  });
+  return entry;
+}
+
+/**
+ * La tarjeta de un permiso que sigue en el DOM, o null si ya no esta (la
+ * borraron, p. ej. un re-render del pane). Evita dibujar dos tarjetas por el
+ * mismo permiso sin dejar entradas huerfanas.
+ */
+export function livePermission(askId) {
+  const entry = state.permissionCards.get(askId);
+  return entry && entry.card.isConnected ? entry : null;
+}
+
+export function addPermissionCard(message, data) {
+  // Llega por el stream de la sesion y por el canal global: sin esta guarda se
+  // dibujan dos tarjetas por el mismo permiso. Pero `renderPane` borra el pane,
+  // asi que si la tarjeta vieja quedo desconectada hay que rehacerla en vez de
+  // dejar el mapa apuntando a algo que ya no esta en el DOM.
+  const previous = state.permissionCards.get(data.askId);
+  if (previous && previous.card.isConnected) return previous.card;
+  const card = el('div', 'perm-card');
+  const head = el('div', 'perm-head');
+  head.append(
+    el('span', 'perm-icon', '⚠'),
+    el('span', 'perm-title', `permiso para ${data.name}${repeatedToolNotice(data.name)}`)
+  );
+  const args = el('div', 'perm-args', summarizeArgs(data.name, data.args, 300));
+  const actions = el('div', 'perm-actions');
+  const verdict = el('span', 'muted', 'requiere aprobación');
+  const buttons = {
+    deny: button('denegar', () => decide(false, 'once'), 'btn'),
+    once: button('permitir una vez', () => decide(true, 'once'), 'btn primary'),
+    always: button('autorizar todo', () => decide(true, 'session'), 'btn'),
+  };
+  actions.append(verdict, el('span', 'spacer'), buttons.deny, buttons.once, buttons.always);
+  card.append(head, args, actions);
+  // Una vez resuelta queda minima, pero se puede reabrir para leer que se pidio.
+  // Sin esto la tarjeta es info muerta: nunca se puede volver a desplegar.
+  head.addEventListener('click', () => {
+    if (!card.classList.contains('approved') && !card.classList.contains('denied')) return;
+    card.classList.toggle('collapsed');
+  });
+  message.tools.appendChild(card);
+  scrollMessages(paneOf(message));
+  state.permissionCards.set(data.askId, { card, verdict, buttons, message });
+
+  async function decide(allow, scope) {
+    for (const btn of Object.values(buttons)) btn.disabled = true;
+    card.classList.remove('pending');
+    card.classList.add('collapsed', allow ? 'approved' : 'denied');
+    card.querySelector('.perm-icon').textContent = allow ? '✓' : '✗';
+    verdict.textContent =
+      allow && scope === 'session' ? 'autorizado para toda la sesión' : allow ? 'aprobado' : 'denegado';
+    if (allow && scope === 'session') yesInput.checked = true;
+    try {
+      await api(`/api/permissions/${encodeURIComponent(data.askId)}`, {
+        method: 'POST',
+        body: { allow, scope },
+      });
+    } catch (error) {
+      // Esto se tragaba el error. La UI se cerraba igual, se borraba el permiso
+      // local y el siguiente reconcile lo volvia a traer porque el server
+      // seguia tenerlo pendiente: el permiso reaparecia una y otra vez sin
+      // decir por que.
+      if (error?.status === 404) {
+        // El server ya no tiene ese permiso (expiro o lo resolvio otra
+        // ventana): la tarjeta era vieja, no hay nada que decidir.
+        card.classList.remove('pending');
+        card.classList.add('collapsed', 'denied');
+        verdict.textContent = 'ya no aplica';
+        state.pendingAsks.delete(data.askId);
+        toast('Ese permiso ya no estaba esperando decisión.');
+        reconcile({ immediate: true });
+        return;
+      }
+      for (const btn of Object.values(buttons)) btn.disabled = false;
+      card.classList.remove('approved', 'denied');
+      card.classList.add('pending');
+      card.querySelector('.perm-icon').textContent = '⚠';
+      verdict.textContent = 'requiere aprobación';
+      toast(`No se pudo resolver el permiso: ${error.message}`);
+      reconcile({ immediate: true });
+      return;
+    }
+    rememberDecision(data.name);
+    // El permiso dejo de existir en el server: que el proximo snapshot no lo
+    // vuelva a marcar como pendiente ni lo vuelva a pintar.
+    state.pendingAsks.delete(data.askId);
+    reconcile({ immediate: true });
+  }
+  card.classList.add('pending');
+  return card;
+}
+
+export function rememberDecision(name) {
+  state.recentDecisions.set(name, Date.now());
+  // No crecer sin limite: solo interesa "lo acabo de aprobar".
+  for (const [tool, at] of state.recentDecisions) {
+    if (Date.now() - at > 120000) state.recentDecisions.delete(tool);
+  }
+}
+
+/**
+ * Si la misma tool vuelve a pedir permiso segundos despues de que la
+ * aprobaste, es una peticion **nueva** (otro `askId`), no la misma que vuelve:
+ * la tarjeta lo dice, asi que el agente reintentando no parece un bug.
+ */
+export function repeatedToolNotice(name) {
+  const at = state.recentDecisions.get(name);
+  if (!at) return '';
+  const seconds = Math.round((Date.now() - at) / 1000);
+  return seconds < 120 ? ` · lo pidió de nuevo (aprobaste hace ${seconds} s)` : '';
+}
+
+/** Resuelve una tarjeta desde aca (banner o `permission_resolved` de otro). */
+export function resolvePermissionCard(entry, allow) {
+  if (!entry) return;
+  for (const btn of Object.values(entry.buttons)) btn.disabled = true;
+  entry.card.classList.remove('pending');
+  if (allow === null) return;
+  entry.card.classList.add('collapsed', allow ? 'approved' : 'denied');
+  entry.card.querySelector('.perm-icon').textContent = allow ? '✓' : '✗';
+  entry.verdict.textContent = allow ? 'aprobado desde otra ventana' : 'denegado desde otra ventana';
+}
+
+/* --- formularios interactivos (ask_user) ---------------------------------- */
+
+export function liveQuestion(askId) {
+  const entry = state.questionCards.get(askId);
+  return entry && entry.card.isConnected ? entry : null;
+}
+
+/**
+ * Formulario que el modelo pide con `ask_user`: en vez de preguntas numeradas en
+ * el texto, la consola renderiza los campos y el usuario los contesta de una.
+ */
+export function addQuestionCard(container, data) {
+  const previous = state.questionCards.get(data.askId);
+  if (previous && previous.card.isConnected) return previous.card;
+  const card = el('div', 'question-card');
+  if (data.title) card.appendChild(el('div', 'question-title', data.title));
+  const form = el('form', 'question-form');
+  const fields = [];
+  for (const q of data.questions ?? []) {
+    const field = el('label', 'question-field');
+    field.appendChild(el('span', 'question-label', q.label));
+    let input;
+    if (q.type === 'textarea') {
+      input = document.createElement('textarea');
+      input.rows = 3;
+    } else if (q.type === 'select' || q.type === 'confirm') {
+      input = document.createElement('select');
+      const options = q.type === 'confirm' ? ['sí', 'no'] : q.options ?? [];
+      for (const opt of options) {
+        const option = document.createElement('option');
+        option.value = opt;
+        option.textContent = opt;
+        input.appendChild(option);
+      }
+    } else {
+      input = document.createElement('input');
+      input.type = 'text';
+    }
+    if (q.placeholder && 'placeholder' in input) input.placeholder = q.placeholder;
+    input.name = q.id;
+    input.className = 'question-input';
+    field.appendChild(input);
+    form.appendChild(field);
+    fields.push({ q, input });
+  }
+  const actions = el('div', 'question-actions');
+  const status = el('span', 'muted', '');
+  const submit = button('enviar', () => {});
+  submit.type = 'submit';
+  submit.classList.add('btn', 'primary');
+  actions.append(status, el('span', 'spacer'), submit);
+  form.appendChild(actions);
+  card.appendChild(form);
+  (container.tools ?? container).appendChild(card);
+  scrollMessages(paneOf(container));
+  state.questionCards.set(data.askId, { card, fields, status });
+
+  const settle = (text, klass) => {
+    card.classList.add(klass);
+    status.textContent = text;
+    submit.disabled = true;
+    for (const { input } of fields) input.disabled = true;
+    state.pendingQuestions.delete(data.askId);
+    renderAlertSignals();
+  };
+
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const answers = {};
+    for (const { q, input } of fields) {
+      answers[q.id] = q.type === 'confirm' ? input.value === 'sí' : input.value;
+    }
+    submit.disabled = true;
+    try {
+      await api(`/api/questions/${encodeURIComponent(data.askId)}`, { method: 'POST', body: { answers } });
+      settle('enviado', 'answered');
+    } catch (error) {
+      if (error?.status === 404) {
+        settle('ya no aplica', 'answered');
+        reconcile({ immediate: true });
+        return;
+      }
+      submit.disabled = false;
+      status.textContent = `no se pudo enviar: ${error.message}`;
+    }
+  });
+  return card;
+}
+
+/** Formulario pendiente recreado tras un reload (no se reconstruye de mensajes). */
+export function showStandaloneQuestion(record, ask) {
+  if (liveQuestion(ask.askId)) return;
+  record.el.querySelector('.empty')?.remove();
+  const holder = addMessage('assistant', '', record.el);
+  holder.textEl.remove();
+  addQuestionCard(holder, { askId: ask.askId, title: ask.title, questions: ask.questions });
+  state.pendingQuestions.set(ask.askId, { sessionId: record.id });
+  renderAlertSignals();
+}
+
+/* --- botones de opcion (offer_choices) ------------------------------------ */
+
+export function sendChoice(label) {
+  chatInput.value = label;
+  sendMessage();
+}
+
+/** Botones tappables: al tocar uno se manda como mensaje del usuario. */
+export function addChoiceCard(container, { question, options } = {}) {
+  const items = Array.isArray(options) ? options.map((o) => String(o).trim()).filter(Boolean).slice(0, 6) : [];
+  if (!items.length || !container) return null;
+  const card = el('div', 'choice-card');
+  if (question) card.appendChild(el('div', 'choice-question', question));
+  const row = el('div', 'choice-options');
+  for (const label of items) row.appendChild(button(label, () => sendChoice(label), 'btn choice-btn'));
+  card.appendChild(row);
+  (container.tools ?? container).appendChild(card);
+  scrollMessages(paneOf(container));
+  return card;
+}
+
+/* --- plan/checklist (show_plan) ------------------------------------------- */
+
+export const PLAN_MARKS = { done: '✓', active: '◐', pending: '○' };
+
+/** Checklist interactivo: el modelo lo reemite para actualizar el estado. */
+export function addPlanCard(container, { title, steps } = {}) {
+  const items = Array.isArray(steps)
+    ? steps.filter((s) => s && String(s.text ?? '').trim()).slice(0, 20)
+    : [];
+  if (!items.length || !container) return null;
+  const card = el('div', 'plan-card');
+  if (title) card.appendChild(el('div', 'plan-title', String(title)));
+  const list = el('ul', 'plan-steps');
+  for (const step of items) {
+    const status = ['done', 'active', 'pending'].includes(step.status) ? step.status : 'pending';
+    const li = el('li', `plan-step ${status}`);
+    li.append(el('span', 'plan-mark', PLAN_MARKS[status]), el('span', 'plan-text', String(step.text)));
+    list.appendChild(li);
+  }
+  card.appendChild(list);
+  (container.tools ?? container).appendChild(card);
+  scrollMessages(paneOf(container));
+  return card;
+}
+
+export function addAdvisorCard(container, { text, kind } = {}) {
+  const clean = String(text ?? '').trim();
+  if (!clean || !container) return null;
+  const exists = [...container.querySelectorAll('.advisor-text')].some((node) => node.textContent === clean);
+  if (exists) return null;
+  const meta = advisorMeta(kind);
+  const klass = ADVISOR_KINDS[kind] ? ` advisor-${kind}` : '';
+  const card = el('div', `advisor-card${klass}`);
+  const head = el('div', 'advisor-head');
+  head.append(
+    el('span', 'advisor-glyph', meta.glyph),
+    el('span', 'advisor-title', 'asesor'),
+    el('span', `advisor-badge advisor-badge-${kind || 'advice'}`, meta.label)
+  );
+  card.append(head, el('div', 'advisor-text', clean));
+  container.appendChild(card);
+  return card;
+}
+
+/**
+ * Marca del punto de compactación: una línea que corta el historial y, debajo,
+ * el resumen que pasa a ser el contexto del modelo. Lo de arriba sigue visible
+ * como histórico; al modelo solo le llega lo de abajo (más los mensajes nuevos).
+ */
+export function addCompactCard(container, { text, label, running = false } = {}) {
+  if (!container) return null;
+  const card = el('div', `compact-card${running ? ' running' : ''}`);
+  const rule = el('div', 'compact-rule', label ?? (running ? 'compactando…' : 'contexto compactado'));
+  card.append(rule);
+  if (running) {
+    // La compactación puede tardar (el modelo resume el historial): mostramos el
+    // corte con un loader animado hasta que el resumen llegue.
+    rule.append(el('span', 'loader loader-thinking'));
+  } else {
+    const clean = String(text ?? '').trim();
+    if (clean) {
+      const body = el('div', 'compact-text text');
+      body.innerHTML = renderMarkdown(clean);
+      card.append(body);
+    }
+  }
+  container.appendChild(card);
+  return card;
+}
+
+/** Completa la tarjeta de compactación en curso con el resumen del modelo. */
+export function finishCompactCard(card, text) {
+  if (!card) return;
+  card.classList.remove('running');
+  const rule = card.querySelector('.compact-rule');
+  if (rule) rule.textContent = 'contexto compactado';
+  const clean = String(text ?? '').trim();
+  if (clean && !card.querySelector('.compact-text')) {
+    const body = el('div', 'compact-text text');
+    body.innerHTML = renderMarkdown(clean);
+    card.append(body);
+  }
+}
+