@danieltmn/tamnora 0.9.4 → 0.9.6

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

@@ -1,6 +1,6 @@
 // Tamnora console — dependency-free client for the harness server (terminal theme).
 
-import { renderMarkdown } from './markdown.js';
+import { renderMarkdown, speechText } from './markdown.js';
 import { streamSse, followRun } from './runStream.js';
 import { diffState, pollDelayMs, localState, summarizeArgs } from './reconcile.js';
 import { installRelayTransport, showRelayTokenGate } from './relayClient.js';
@@ -39,6 +39,7 @@ function setCwd(value) {
   if (!value) return;
   state.cwd = value;
   $('#rail-cwd').textContent = value;
+  renderCwdPill();
   if (state.explorerOpen) refreshExplorerMode();
 }
 
@@ -217,7 +218,7 @@ function activateTab(name) {
   hideMoreMenu();
   if (name === 'runs') refreshRuns();
   if (name === 'providers') refreshProviders();
-  if (name === 'ajustes') { refreshMcp(); refreshSkills(); refreshChannels(); refreshLimits(); refreshVoz(); refreshTranscribe(); refreshProfile(); }
+  if (name === 'ajustes') { refreshMcp(); refreshSkills(); refreshChannels(); refreshLimits(); refreshVoz(); refreshAsesor(); refreshTranscribe(); refreshProfile(); }
 }
 
 document.querySelectorAll('.tab[data-tab]').forEach((t) =>
@@ -478,11 +479,6 @@ async function loadModes() {
   updateStatus();
 }
 
-function modeLabel(id) {
-  const option = [...modeSelect.options].find((o) => o.value === id);
-  return option ? option.textContent : id;
-}
-
 async function setMode(id, { persist = true } = {}) {
   if (![...modeSelect.options].some((o) => o.value === id)) return;
   modeSelect.value = id;
@@ -504,11 +500,82 @@ document.addEventListener('keydown', (event) => {
   }
 });
 
+/* --- pills del composer (carpeta, permisos, modelo) ----------------------- */
+
+const cwdPill = $('#cwd-pill');
+const cwdPillLabel = $('#cwd-pill-label');
+const modePill = $('#mode-pill');
+const modePillLabel = $('#mode-pill-label');
+const modeMenu = $('#mode-menu');
+const modelPill = $('#model-pill');
+const modelPillLabel = $('#model-pill-label');
+
+function renderCwdPill() {
+  if (!cwdPillLabel) return;
+  cwdPillLabel.textContent = state.cwd ? basename(state.cwd) : 'sin carpeta';
+  if (cwdPill) cwdPill.title = state.cwd || 'sin carpeta de trabajo';
+}
+
+// El pill de permisos resume modo + auto-aprobación en uno de tres niveles
+// estilo Codex: Read Only, Workspace Write y Full access.
+function renderModePill() {
+  const plan = modeSelect.value === 'plan';
+  const full = !plan && Boolean(yesInput?.checked);
+  if (modePillLabel) modePillLabel.textContent = plan ? 'Read Only' : full ? 'Full access' : 'Workspace Write';
+  if (!modeMenu) return;
+  for (const item of modeMenu.querySelectorAll('.ctrl-menu-item')) {
+    const kind = item.dataset.kind;
+    const active = kind === 'read' ? plan : kind === 'full' ? full : !plan && !full;
+    item.classList.toggle('active', active);
+    item.setAttribute('aria-checked', active ? 'true' : 'false');
+  }
+}
+
+function renderModelPill() {
+  if (!modelPillLabel) return;
+  modelPillLabel.textContent = state.active.model || 'elegí un modelo';
+  if (modelPill) modelPill.title = `${state.active.provider || '—'} / ${state.active.model || '—'}`;
+}
+
+function closeModeMenu() {
+  if (!modeMenu || modeMenu.hidden) return;
+  modeMenu.hidden = true;
+  modePill?.setAttribute('aria-expanded', 'false');
+}
+
+cwdPill?.addEventListener('click', () => openFolderPicker('session'));
+modePill?.addEventListener('click', (event) => {
+  event.stopPropagation();
+  if (!modeMenu) return;
+  modeMenu.hidden = !modeMenu.hidden;
+  modePill.setAttribute('aria-expanded', modeMenu.hidden ? 'false' : 'true');
+});
+modeMenu?.addEventListener('click', async (event) => {
+  const item = event.target.closest('.ctrl-menu-item');
+  if (!item) return;
+  const kind = item.dataset.kind;
+  closeModeMenu();
+  if (kind === 'full') {
+    await setMode('agent');
+    if (yesInput) yesInput.checked = true;
+  } else {
+    if (yesInput) yesInput.checked = false;
+    await setMode(kind === 'read' ? 'plan' : 'agent');
+  }
+  renderModePill();
+});
+document.addEventListener('click', (event) => {
+  if (modeMenu && !modeMenu.hidden && !event.target.closest('.ctrl-wrap')) closeModeMenu();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') closeModeMenu();
+});
+modelPill?.addEventListener('click', () => openSettingsModal());
+yesInput?.addEventListener('change', renderModePill);
+
 function updateStatus(extra = {}) {
-  const p = state.providers.find((x) => x.id === state.active.provider);
-  $('#sb-mode').textContent = modeLabel(modeSelect.value) || 'Build';
-  $('#sb-provider').textContent = p ? `${p.id}` : state.active.provider || '—';
-  $('#sb-model').textContent = state.active.model || '—';
+  renderModePill();
+  renderModelPill();
   if (extra.rounds !== undefined) $('#sb-rounds').textContent = `${extra.rounds} rondas`;
   if (extra.stopReason) $('#sb-rounds').textContent = extra.stopReason;
   if (extra.running) $('#sb-rounds').textContent = 'pensando…';
@@ -1464,8 +1531,35 @@ function userImages(content) {
     .filter(Boolean);
 }
 
+function advisorGlyph(kind) {
+  if (kind === 'code') return '⚠';
+  if (kind === 'explain') return 'ℹ';
+  return '✦';
+}
+
+/** Tarjeta del asesor: una capa de comentario, no un mensaje del agente. */
+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 card = el('div', `advisor-card${kind ? ` advisor-${kind}` : ''}`);
+  const head = el('div', 'advisor-head');
+  head.append(el('span', 'advisor-glyph', advisorGlyph(kind)), el('span', 'advisor-title', 'asesor'));
+  card.append(head, el('div', 'advisor-text', clean));
+  container.appendChild(card);
+  return card;
+}
+
 function renderStored(message, pane) {
   if (message.agent_id) return;
+  if (message.role === 'assistant' && message.name === 'advisor') {
+    addAdvisorCard(pane, {
+      text: typeof message.content === 'string' ? message.content : '',
+      kind: message.mode,
+    });
+    return;
+  }
   if (message.role === 'user') {
     const bubble = addMessage('user', userText(message.content), pane);
     if (message.id) {
@@ -1787,8 +1881,9 @@ function activateSession(id) {
 
 function updateSubmitLabel(working) {
   if (!submitBtn) return;
-  submitBtn.textContent = working ? 'encolar' : 'enviar';
-  submitBtn.title = working ? 'El agente está trabajando: se envía al terminar' : '';
+  submitBtn.dataset.working = working ? '1' : '0';
+  submitBtn.setAttribute('aria-label', working ? 'encolar' : 'enviar');
+  submitBtn.title = working ? 'El agente está trabajando: se envía al terminar' : 'enviar';
 }
 
 function auditStatus(record) {
@@ -2006,6 +2101,11 @@ function addContinueButton(turn, data) {
 function handleChatEvent(event, data, turn) {
   if (handleAgentEvent(event, data, turn)) return;
   narrar(event, data, turn);
+  if (event === 'advice') {
+    addAdvisorCard(turn.pane, { text: data?.text, kind: data?.kind });
+    scrollMessages(turn.pane);
+    return;
+  }
   if (event === 'agent_start') {
     turn.agents.set(data.agentId, addAgentCard(turn.assistant(), data));
   } else if (event === 'agent_end') {
@@ -3622,7 +3722,15 @@ const vozRateEl = $('#voz-rate');
 const vozAnnStartEl = $('#voz-ann-start');
 const vozAnnToolsEl = $('#voz-ann-tools');
 const vozAnnEndEl = $('#voz-ann-end');
+const vozAnnAdviceEl = $('#voz-ann-advice');
+const vozAnnAnswerEl = $('#voz-ann-answer');
 const vozFfmpegEl = $('#voz-ffmpeg');
+const asesorEnabledEl = $('#asesor-enabled');
+const asesorCodeEl = $('#asesor-code');
+const asesorExplainEl = $('#asesor-explain');
+const asesorAdviceEl = $('#asesor-advice');
+const asesorWordsEl = $('#asesor-words');
+const asesorNotesEl = $('#asesor-notes');
 const trProviderEl = $('#tr-provider');
 const trModelEl = $('#tr-model');
 
@@ -3955,7 +4063,7 @@ const voz = {
     enabled: false,
     voice: 'es-AR-ElenaNeural',
     rate: '+0%',
-    announce: { start: true, tools: true, end: true },
+    announce: { start: true, tools: true, end: true, advice: true, answer: false },
   },
 };
 
@@ -4086,10 +4194,10 @@ function reproducirVoz(frase, { voice, rate, label, maxAgeMs } = {}) {
  * Narra una frase del turno. Si el turno tarda y la frase quedó vieja en la
  * cola, se descarta al llegar su turno (`maxAgeMs`): narrar el pasado no informa.
  */
-function hablar(texto) {
+function hablar(texto, { label = 'narrando', maxAgeMs = 45000 } = {}) {
   const frase = String(texto ?? '').trim();
   if (!frase || !voz.settings.enabled) return;
-  reproducirVoz(frase, { label: 'narrando', maxAgeMs: 45000 }).catch(() => {});
+  reproducirVoz(frase, { label, maxAgeMs }).catch(() => {});
 }
 
 /** Habla el progreso de un turno EN VIVO: el replay de una reconexion no habla. */
@@ -4099,7 +4207,15 @@ function narrar(event, data, turn) {
   if (!enabled) return;
   if (event === 'start' && announce.start) hablar(data?.say);
   else if (event === 'tool_call' && announce.tools) hablar(data?.say);
-  else if ((event === 'done' || event === 'aborted' || event === 'error') && announce.end) hablar(data?.say);
+  // El asesor y la respuesta final son el cierre del turno: si quedan en cola
+  // detras de un audio largo, igual hay que leerlos (sin vencimiento).
+  else if (event === 'advice' && announce.advice) hablar(data?.say, { label: 'asesor', maxAgeMs: 0 });
+  else if (event === 'done' && announce.answer) {
+    // Lee la respuesta final limpia; si era solo codigo, cae al cierre.
+    const spoken = speechText(data?.content);
+    if (spoken) hablar(spoken, { label: 'respuesta', maxAgeMs: 0 });
+    else if (announce.end) hablar(data?.say);
+  } else if ((event === 'done' || event === 'aborted' || event === 'error') && announce.end) hablar(data?.say);
 }
 
 async function cargarVoces() {
@@ -4125,6 +4241,8 @@ async function aplicarVoz(data) {
       start: data.announce?.start !== false,
       tools: data.announce?.tools !== false,
       end: data.announce?.end !== false,
+      advice: data.announce?.advice !== false,
+      answer: data.announce?.answer === true,
     },
   };
   if (vozEnabledEl) vozEnabledEl.checked = voz.settings.enabled;
@@ -4142,6 +4260,8 @@ async function aplicarVoz(data) {
   if (vozAnnStartEl) vozAnnStartEl.checked = voz.settings.announce.start;
   if (vozAnnToolsEl) vozAnnToolsEl.checked = voz.settings.announce.tools;
   if (vozAnnEndEl) vozAnnEndEl.checked = voz.settings.announce.end;
+  if (vozAnnAdviceEl) vozAnnAdviceEl.checked = voz.settings.announce.advice;
+  if (vozAnnAnswerEl) vozAnnAnswerEl.checked = voz.settings.announce.answer;
   const estado = $('#voz-status');
   if (estado) {
     estado.className = `summary${voz.settings.enabled ? ' ok' : ''}`;
@@ -4165,6 +4285,8 @@ async function submitVoz() {
       start: vozAnnStartEl?.checked !== false,
       tools: vozAnnToolsEl?.checked !== false,
       end: vozAnnEndEl?.checked !== false,
+      advice: vozAnnAdviceEl?.checked !== false,
+      answer: vozAnnAnswerEl?.checked === true,
     },
   };
   const data = await api('/api/tts/settings', { method: 'PUT', body }).catch((e) => ({ error: e.message }));
@@ -4342,6 +4464,57 @@ async function testVoz() {
   }
 }
 
+/* --- ajustes: asesor ------------------------------------------------------- */
+
+function aplicarAsesor(data) {
+  if (!data) return;
+  if (asesorEnabledEl) asesorEnabledEl.checked = data.enabled === true;
+  if (asesorCodeEl) asesorCodeEl.checked = data.code !== false;
+  if (asesorExplainEl) asesorExplainEl.checked = data.explain !== false;
+  if (asesorAdviceEl) asesorAdviceEl.checked = data.advice !== false;
+  if (asesorWordsEl) asesorWordsEl.value = data.maxWords ?? 40;
+  if (asesorNotesEl) asesorNotesEl.value = data.notes ?? '';
+  const estado = $('#asesor-status');
+  if (estado) {
+    estado.className = `summary${data.enabled ? ' ok' : ''}`;
+    estado.textContent = data.enabled ? 'activo' : 'apagado';
+  }
+}
+
+async function refreshAsesor() {
+  if (!asesorEnabledEl) return;
+  const data = await api('/api/advisor/settings').catch(() => null);
+  if (data) aplicarAsesor(data);
+}
+
+function asesorBody() {
+  return {
+    enabled: asesorEnabledEl?.checked === true,
+    code: asesorCodeEl?.checked !== false,
+    explain: asesorExplainEl?.checked !== false,
+    advice: asesorAdviceEl?.checked !== false,
+    maxWords: Number(asesorWordsEl?.value) || 40,
+    notes: asesorNotesEl?.value ?? '',
+  };
+}
+
+async function submitAsesor() {
+  setStatus('#asesor-msg', 'guardando…');
+  const data = await api('/api/advisor/settings', { method: 'PUT', body: asesorBody() }).catch((e) => ({
+    error: e.message,
+  }));
+  if (data?.error) return setStatus('#asesor-msg', data.error, 'err');
+  aplicarAsesor(data);
+  setStatus('#asesor-msg', 'guardado', 'ok');
+}
+
+async function testAsesor() {
+  setStatus('#asesor-msg', 'consultando…');
+  const data = await api('/api/advisor/test', { method: 'POST' }).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus('#asesor-msg', data.error, 'err');
+  setStatus('#asesor-msg', data.speak ? data.text : '(no diría nada en este caso)', 'ok');
+}
+
 /* --- ajustes: perfil del usuario ------------------------------------------ */
 
 const perfil = {
@@ -4474,8 +4647,10 @@ if (mcpListEl) {
   $('#mcp-reload').addEventListener('click', () => refreshMcp({ connect: true }));
   $('#tg-save')?.addEventListener('click', submitChannel);
   $('#tg-test')?.addEventListener('click', testChannel);
-  $('#voz-save')?.addEventListener('click', submitVoz);
-  $('#voz-test')?.addEventListener('click', testVoz);
+$('#voz-save')?.addEventListener('click', submitVoz);
+$('#voz-test')?.addEventListener('click', testVoz);
+$('#asesor-save')?.addEventListener('click', submitAsesor);
+$('#asesor-test')?.addEventListener('click', testAsesor);
   $('#mcp-close').addEventListener('click', closeMcpForm);
   $('#mf-cancel').addEventListener('click', closeMcpForm);
   $('#mf-transport').addEventListener('change', syncMcpFormFields);
@@ -5312,10 +5487,45 @@ function applyState(diff) {
 
 /* --- señales de alerta: que se note aun mirando otra cosa ----------------- */
 
-const FAVICON_IDLE =
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23231a17'/%3E%3Ctext x='16' y='23' font-family='Georgia,serif' font-size='18' font-weight='700' fill='%23e8dfd6' text-anchor='middle'%3ET%3C/text%3E%3C/svg%3E";
-const FAVICON_ALERT =
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23231a17'/%3E%3Ctext x='16' y='23' font-family='Georgia,serif' font-size='18' font-weight='700' fill='%23e8dfd6' text-anchor='middle'%3ET%3C/text%3E%3Ccircle cx='24' cy='9' r='5' fill='%23d9704a'/%3E%3C/svg%3E";
+const FAVICON_IDLE = '/favicon.ico';
+const FAVICON_SOURCE = '/icons/icon-192x192.png';
+let faviconAlert = '';
+let faviconAlertPending = null;
+
+/**
+ * El favicon de alerta se dibuja sobre una copia del logo (mismo origen), para
+ * que el punto rojo combine con el icono real y no con un SVG desincronizado.
+ */
+function alertFavicon() {
+  if (faviconAlert) return Promise.resolve(faviconAlert);
+  if (faviconAlertPending) return faviconAlertPending;
+  faviconAlertPending = new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        canvas.width = 64;
+        canvas.height = 64;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0, 64, 64);
+        ctx.beginPath();
+        ctx.arc(64 - 16, 16, 13, 0, Math.PI * 2);
+        ctx.fillStyle = '#d9704a';
+        ctx.fill();
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = 'rgba(35,26,23,0.9)';
+        ctx.stroke();
+        faviconAlert = canvas.toDataURL('image/png');
+        resolve(faviconAlert);
+      } catch {
+        resolve(FAVICON_IDLE);
+      }
+    };
+    img.onerror = () => resolve(FAVICON_IDLE);
+    img.src = FAVICON_SOURCE;
+  });
+  return faviconAlertPending;
+}
 
 let baseTitle = '';
 
@@ -5330,7 +5540,10 @@ function renderAlertSignals() {
   const clean = baseTitle.replace(/^\(⚠ \d+\) /, '');
   document.title = pending > 0 ? `(⚠ ${pending}) ${clean}` : clean;
   const link = document.querySelector('link[rel="icon"]');
-  if (link) link.href = pending > 0 ? FAVICON_ALERT : FAVICON_IDLE;
+  if (link) {
+    if (pending > 0) alertFavicon().then((href) => { link.href = href; });
+    else link.href = FAVICON_IDLE;
+  }
 }
 
 /* --- canal global: solo latencia ------------------------------------------ */
@@ -5436,6 +5649,105 @@ function watchLifecycle() {
   window.addEventListener('pageshow', wake);
   window.addEventListener('online', wake);
   window.addEventListener('focus', wake);
+  // La cache del server dura 10 min: revisar al volver a la pestaña es barato.
+  refreshUpdate();
+}
+
+/* --- actualizacion de version --------------------------------------------- */
+
+const UPDATE_DISMISS_KEY = 'tamnora-update-dismissed';
+const updateBanner = $('#update-banner');
+const updateBannerText = $('#update-banner-text');
+let updateInfo = null;
+
+function showUpdateBanner(info, { force = false } = {}) {
+  if (!updateBanner || !info?.updateAvailable) return;
+  if (!force && storage.get(UPDATE_DISMISS_KEY) === String(info.latest)) return;
+  updateInfo = info;
+  updateBannerText.textContent = `Hay una versión nueva (v${info.latest}); tenés la v${info.current}.`;
+  updateBanner.hidden = false;
+  const ver = document.querySelector('.brand .ver');
+  if (ver) {
+    ver.classList.add('has-update');
+    ver.title = `Actualización disponible: v${info.latest}`;
+  }
+}
+
+async function refreshUpdate() {
+  if (!updateBanner) return;
+  const info = await api('/api/update').catch(() => null);
+  if (info?.updateAvailable) showUpdateBanner(info);
+}
+
+function dismissUpdate() {
+  if (updateInfo?.latest) storage.set(UPDATE_DISMISS_KEY, String(updateInfo.latest));
+  if (updateBanner) updateBanner.hidden = true;
+}
+
+/** Chequeo manual (click en la version): fuerza la consulta y avisa el resultado. */
+async function forceUpdateCheck() {
+  const ver = document.querySelector('.brand .ver');
+  const original = ver?.textContent;
+  if (ver) ver.textContent = '…';
+  const info = await api('/api/update?force=1').catch(() => null);
+  if (ver) ver.textContent = info?.current ? `v${info.current}` : original;
+  if (!info) return toast('No pude consultar la versión.');
+  if (info.updateAvailable) {
+    showUpdateBanner(info, { force: true });
+    toast(`Hay una versión nueva: v${info.latest}`);
+  } else if (info.error) {
+    toast(`No pude consultar npm: ${info.error}`);
+  } else {
+    toast(`Estás al día (v${info.current}).`);
+  }
+}
+
+/** Espera a que el server reiniciado vuelva a responder `/api/health`. */
+async function waitServerVersion(tries = 45) {
+  for (let i = 0; i < tries; i++) {
+    await new Promise((r) => setTimeout(r, 2000));
+    const health = await fetch('/api/health', { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : null))
+      .catch(() => null);
+    if (health?.version) return health.version;
+  }
+  return '';
+}
+
+async function runUpdate() {
+  if (!updateInfo) return;
+  if (!confirm(`¿Actualizar a la v${updateInfo.latest}? La consola se reinicia sola.`)) return;
+  const runBtn = $('#update-run');
+  const laterBtn = $('#update-later');
+  if (runBtn) runBtn.disabled = true;
+  if (laterBtn) laterBtn.disabled = true;
+  updateBannerText.textContent = `Actualizando a v${updateInfo.latest}…`;
+  const res = await api('/api/update', { method: 'POST' }).catch((error) => ({ error: error.message }));
+  if (res?.error) {
+    updateBannerText.textContent = `No se pudo actualizar: ${res.error}`;
+    if (runBtn) runBtn.disabled = false;
+    if (laterBtn) laterBtn.disabled = false;
+    return;
+  }
+  updateBannerText.textContent = 'Instalando la versión nueva… la consola se va a reconectar.';
+  const version = await waitServerVersion();
+  if (version) {
+    updateBannerText.textContent = `Actualizado a v${version}. Recargando…`;
+    setTimeout(() => location.reload(), 900);
+  } else {
+    updateBannerText.textContent = 'No pude confirmar el reinicio. Recargá la página en unos segundos.';
+    if (runBtn) runBtn.disabled = false;
+    if (laterBtn) laterBtn.disabled = false;
+  }
+}
+
+$('#update-run')?.addEventListener('click', runUpdate);
+$('#update-later')?.addEventListener('click', dismissUpdate);
+const brandVerEl = document.querySelector('.brand .ver');
+if (brandVerEl) {
+  brandVerEl.title = 'buscar actualización';
+  brandVerEl.classList.add('ver-action');
+  brandVerEl.addEventListener('click', forceUpdateCheck);
 }
 
 /* --- boot ---------------------------------------------------------------- */
@@ -5459,6 +5771,7 @@ async function boot() {
     const ver = document.querySelector('.brand .ver');
     if (ver) ver.textContent = `v${health.version}`;
   }
+  refreshUpdate();
   await refreshProviders();
   await loadModes();
   await loadModels();