@danieltmn/tamnora 0.22.0 → 0.23.0

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

@@ -0,0 +1,156 @@
+// Formato puro de la consola: lo que se calcula de los datos del turno sin
+// tocar el DOM. Vive aparte para poder testearlo (chat.js es todo DOM).
+export const READ_ONLY_TOOLS = new Set([
+  'read',
+  'list',
+  'glob',
+  'grep',
+  'fetch_url',
+  'git_status',
+  'git_diff',
+  'git_log',
+  'task',
+  'spawn_agent',
+]);
+export function isReadOnlyTool(name) {
+  const value = String(name ?? '');
+  if (READ_ONLY_TOOLS.has(value)) return true;
+  return /^mcp__.+__(read|list|search|get|fetch|query)/i.test(value);
+}
+
+export function shortText(value, max = 80) {
+  const raw = String(value ?? '').replace(/\s+/g, ' ').trim();
+  return raw.length > max ? `${raw.slice(0, max - 1)}…` : raw;
+}
+
+export function toolSummary(name, args) {
+  const a = args && typeof args === 'object' ? args : {};
+  switch (name) {
+    case 'read': {
+      const base = a.path ? shortText(a.path, 60) : '.';
+      const offset = Number(a.offset) || 0;
+      const limit = Number(a.limit) || 0;
+      if (offset && limit) return `${base}:${offset}-${offset + limit - 1}`;
+      if (offset) return `${base}:${offset}+`;
+      return base;
+    }
+    case 'write':
+    case 'edit':
+      return a.path ? shortText(a.path, 60) : 'archivo';
+    case 'list':
+      return a.path ? shortText(a.path, 60) : '.';
+    case 'glob':
+      return [a.pattern ? `"${shortText(a.pattern, 50)}"` : '', a.path ? `en ${shortText(a.path, 40)}` : '']
+        .filter(Boolean)
+        .join(' ');
+    case 'grep':
+      return [
+        a.pattern ? `"${shortText(a.pattern, 50)}"` : '',
+        a.include ? shortText(a.include, 30) : '',
+        a.path ? `en ${shortText(a.path, 40)}` : '',
+      ]
+        .filter(Boolean)
+        .join(' ');
+    case 'bash':
+      return shortText(String(a.command ?? '').split('\n')[0], 90);
+    case 'fetch_url':
+      return shortText(a.url, 90);
+    case 'speak':
+      return shortText(a.texto, 90);
+    case 'screenshot':
+    case 'console_errors':
+    case 'preview_url':
+      return shortText(a.url, 90);
+    case 'git_diff':
+      return [a.ref ? `vs ${shortText(a.ref, 30)}` : a.staged ? 'staged' : 'unstaged', a.path ? shortText(a.path, 40) : '']
+        .filter(Boolean)
+        .join(' ');
+    case 'git_log':
+      return a.limit ? `${a.limit} commits` : '';
+    case 'git_commit':
+      return shortText(a.message, 70);
+    case 'task':
+    case 'spawn_agent':
+      return shortText(a.description || a.prompt, 80);
+    default:
+      return '';
+  }
+}
+
+export function parseToolArgs(call) {
+  const raw = call?.function?.arguments ?? call?.arguments;
+  if (raw && typeof raw === 'object') return raw;
+  if (typeof raw !== 'string') return {};
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return {};
+  }
+}
+
+export function isFailedToolText(text) {
+  return /^Error|^Permiso denegado/i.test(String(text ?? ''));
+}
+
+/** Nombre de archivo de una captura, del meta o del texto del resultado. */
+export function screenshotName(data, text) {
+  const fromMeta = data?.meta?.screenshot?.name;
+  if (fromMeta) return String(fromMeta);
+  const match = /capturas\/([a-z0-9][a-z0-9-]*\.png)/i.exec(String(text ?? ''));
+  return match ? match[1] : null;
+}
+
+export function previewText(value, maxLines = 24, maxChars = 4000) {
+  const content = typeof value === 'string' ? value : JSON.stringify(value ?? '', null, 2) ?? '';
+  const lines = content.split('\n');
+  let preview = lines.slice(0, maxLines).join('\n');
+  let truncated = lines.length > maxLines;
+  if (preview.length > maxChars) {
+    preview = preview.slice(0, maxChars);
+    truncated = true;
+  }
+  return { preview, truncated };
+}
+
+export function userText(content) {
+  if (typeof content === 'string') return content;
+  if (Array.isArray(content)) {
+    return content
+      .filter((part) => part?.type === 'text')
+      .map((part) => part.text)
+      .join('\n');
+  }
+  return content == null ? '' : JSON.stringify(content);
+}
+
+export function userImages(content) {
+  if (!Array.isArray(content)) return [];
+  return content
+    .filter((part) => part?.type === 'image_url')
+    .map((part) => part.image_url?.url)
+    .filter(Boolean);
+}
+
+export const ADVISOR_KINDS = {
+  code: { label: 'Cuidado!', glyph: '⚠' },
+  explain: { label: 'Importante!', glyph: 'ℹ' },
+  advice: { label: 'Consejo', glyph: '✦' },
+  summary: { label: 'Resumen', glyph: '✎' },
+};
+
+export function advisorMeta(kind) {
+  return ADVISOR_KINDS[kind] || { label: 'Asesor', glyph: '✦' };
+}
+
+/** Ultimo segmento de un path (sin separadores finales). */
+export function basename(p) {
+  const text = String(p ?? '').replace(/[\\/]+$/, '');
+  return text.split(/[\\/]/).pop() || text;
+}
+
+/** Duracion humana de un turno: 1.2s o 300ms, vacio si no hubo tiempo. */
+export function formatDuration(ms) {
+  const value = Number(ms) || 0;
+  if (value <= 0) return '';
+  return value >= 1000 ? `${(value / 1000).toFixed(1)}s` : `${value}ms`;
+}

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

@@ -43,23 +43,24 @@ export function setCwd(value) {
 
 export const moreTab = $('#more-tab');
 export const moreMenu = $('#more-menu');
-export const moreTabLabel = $('#more-tab-label');
 export const topbarSection = $('#topbar-section');
 
 export const TAB_LABELS = { chat: 'chat', providers: 'proveedores', ajustes: 'ajustes', eval: 'eval', runs: 'runs' };
 
 export function hideMoreMenu() {
+  if (moreMenu.hidden) return;
+  const hadFocus = moreMenu.contains(document.activeElement);
   moreMenu.hidden = true;
   moreTab.setAttribute('aria-expanded', 'false');
+  if (hadFocus) moreTab.focus();
 }
 
 export function activateTab(name) {
   document
-    .querySelectorAll('.tab[data-tab], #more-menu button[data-tab]')
+    .querySelectorAll('#more-menu button[data-tab]')
     .forEach((t) => t.classList.toggle('active', t.dataset.tab === name));
-  if (moreTabLabel) moreTabLabel.textContent = TAB_LABELS[name] || name;
   if (topbarSection) topbarSection.textContent = TAB_LABELS[name] || name;
-  moreTab.classList.toggle('active', name === 'eval' || name === 'runs');
+  moreTab.classList.toggle('active', name !== 'chat');
   document.querySelectorAll('.view').forEach((v) => v.classList.toggle('active', v.id === `view-${name}`));
   hideMoreMenu();
   if (name === 'runs') refreshRuns();

package/harness/packages/server/public/index.html

@@ -75,29 +75,7 @@
   </head>
   <body>
     <header class="topbar">
-      <div class="brand"><span class="logo"><img src="/icons/logo.png" alt="Tamnora" /></span> <span id="topbar-section" class="topbar-section">chat</span> <span class="ver">v0.22.0</span></div>
-      <nav class="tabs">
-        <button class="tab active" data-tab="chat">chat</button>
-        <button class="tab" data-tab="providers">proveedores</button>
-        <button class="tab" data-tab="ajustes">ajustes</button>
-        <div class="menu">
-          <button id="more-tab" class="tab" title="más" aria-haspopup="true" aria-expanded="false" aria-label="más">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="12" cy="12" r="1" />
-              <circle cx="19" cy="12" r="1" />
-              <circle cx="5" cy="12" r="1" />
-            </svg>
-            <span id="more-tab-label">chat</span>
-          </button>
-          <div id="more-menu" class="menu-pop" hidden>
-            <button type="button" class="menu-primary" data-tab="chat">chat</button>
-            <button type="button" class="menu-primary" data-tab="providers">proveedores</button>
-            <button type="button" class="menu-primary" data-tab="ajustes">ajustes</button>
-            <button type="button" data-tab="eval">eval</button>
-            <button type="button" data-tab="runs">runs</button>
-          </div>
-        </div>
-      </nav>
+      <div class="brand"><span class="logo"><img src="/icons/logo.png" alt="Tamnora" /></span> <span id="topbar-section" class="topbar-section">chat</span> <span class="ver">v0.23.0</span></div>
       <div class="settings">
         <button id="new-session-top" type="button" class="btn topbar-new" title="nueva sesión" aria-label="nueva sesión">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
@@ -111,6 +89,21 @@
             <path d="m21 21-4.3-4.3" />
           </svg>
         </button>
+        <div class="menu">
+          <button id="more-tab" type="button" class="btn icon" title="herramientas" aria-haspopup="menu" aria-controls="more-menu" aria-expanded="false" aria-label="herramientas">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+            </svg>
+          </button>
+          <div id="more-menu" class="menu-pop" role="menu" hidden>
+            <button type="button" class="active" data-tab="chat" role="menuitem">chat</button>
+            <button type="button" data-tab="providers" role="menuitem">proveedores</button>
+            <button type="button" data-tab="ajustes" role="menuitem">ajustes</button>
+            <div class="menu-divider" role="separator"></div>
+            <button type="button" data-tab="eval" role="menuitem">eval</button>
+            <button type="button" data-tab="runs" role="menuitem">runs</button>
+          </div>
+        </div>
         <button id="settings-toggle" type="button" class="btn icon" title="modelo, modo y auto" aria-label="ajustes del agente">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <path d="M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3" />
@@ -954,6 +947,12 @@
           <label class="field"><span>presupuesto de tiempo en segundos (0 = sin límite)</span>
             <input id="limits-duration" type="number" min="0" step="1" placeholder="0" />
           </label>
+          <label class="field"><span>máximo de tokens de salida por respuesta (0 = default del proveedor)</span>
+            <input id="limits-output" type="number" min="0" step="256" placeholder="0" />
+          </label>
+          <label class="check" title="reusa el prompt procesado entre rondas: ahorra costo y latencia en conversaciones largas (según el proveedor)">
+            <input id="limits-caching" type="checkbox" /> prompt caching
+          </label>
           <div class="row">
             <button id="limits-save" class="btn primary" type="button">guardar</button>
             <span id="limits-msg" class="summary"></span>

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

@@ -241,6 +241,8 @@ export function activateAjustesPanel(name) {
 export const limitsRoundsEl = $('#limits-rounds');
 export const limitsTokensEl = $('#limits-tokens');
 export const limitsDurationEl = $('#limits-duration');
+export const limitsOutputEl = $('#limits-output');
+export const limitsCachingEl = $('#limits-caching');
 
 export async function refreshLimits() {
   const data = await api('/api/settings').catch(() => null);
@@ -249,6 +251,8 @@ export async function refreshLimits() {
   if (limitsRoundsEl) limitsRoundsEl.value = settings.maxRounds ?? 0;
   if (limitsTokensEl) limitsTokensEl.value = settings.maxTokens ?? 0;
   if (limitsDurationEl) limitsDurationEl.value = Math.round((settings.maxDurationMs ?? 0) / 1000);
+  if (limitsOutputEl) limitsOutputEl.value = settings.maxOutputTokens ?? 0;
+  if (limitsCachingEl) limitsCachingEl.checked = settings.promptCaching === true;
 }
 
 export function setStatus(node, text, cls = '') {

package/harness/packages/server/public/styles.css

@@ -525,7 +525,7 @@ pre, code, kbd, samp { font-family: var(--mono); }
   position: relative;
   z-index: 40;
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: 1fr auto;
   align-items: center;
   gap: 16px;
   padding: 10px 16px;
@@ -555,28 +555,23 @@ pre, code, kbd, samp { font-family: var(--mono); }
   flex: 0 0 auto;
 }
 .brand .logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
+/* El logo sigue el esquema del tema: el claro es el dibujo oscuro y viceversa
+   (`logo_dark`/`logo_light` nombran el tema donde se usan, no su color). */
+.brand .logo img { content: url('/icons/logo_dark.png'); }
+html[data-scheme='light'] .brand .logo img { content: url('/icons/logo_light.png'); }
 .brand .ver { color: var(--muted); font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.04em; }
-.brand .topbar-section { display: none; }
-.tabs { grid-column: 2; justify-self: center; display: flex; gap: 2px; }
-.tab {
-  background: transparent;
-  color: var(--muted);
-  border: 1px solid transparent;
+.brand .topbar-section {
+  padding: 2px 8px;
   border-radius: 999px;
-  padding: 6px 14px;
-  cursor: pointer;
-  font: 600 12.5px var(--sans);
+  border: 1px solid var(--border);
+  background: var(--accent-soft);
+  color: var(--accent);
+  font: 700 10px var(--sans);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
 }
-.tab:hover { color: var(--text); }
-.tab.active { color: var(--text); background: var(--theirs); border-color: var(--border); }
-
 .menu { position: relative; display: block; }
-#more-tab { display: inline-flex; align-items: center; gap: 6px; }
-#more-tab svg { width: 18px; height: 18px; display: block; }
-#more-tab-label { display: none; font: 600 12.5px var(--sans); }
-@media (min-width: 821px) {
-  #more-menu button.menu-primary { display: none; }
-}
 
 /* El icono muestra el tema al que se va a cambiar: claro -> luna, oscuro -> sol. */
 #theme-toggle .ico-sun { display: none; }
@@ -586,9 +581,9 @@ html[data-scheme='dark'] #theme-toggle .ico-moon { display: none; }
 .menu-pop {
   position: absolute;
   top: calc(100% + 4px);
-  left: 0;
+  right: 0;
   z-index: 60;
-  min-width: 130px;
+  min-width: 160px;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -611,7 +606,9 @@ html[data-scheme='dark'] #theme-toggle .ico-moon { display: none; }
 }
 .menu-pop button:hover { background: var(--theirs); }
 .menu-pop button.active { background: var(--theirs); color: var(--accent); }
-.settings { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
+.menu-pop .menu-divider { height: 1px; margin: 3px 4px; background: var(--border); }
+.menu > .btn.icon.active { color: var(--accent); border-color: var(--accent); }
+.settings { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: 8px; }
 .settings select { max-width: 220px; }
 
 /* Nueva sesión en el topbar: texto en desktop, solo el icono en móvil, donde
@@ -2173,32 +2170,8 @@ dialog.file-modal.preview-maximized {
   .brand .ver {
     display: none;
   }
-  .brand .topbar-section {
-    display: inline-block;
-    padding: 2px 8px;
-    border-radius: 999px;
-    border: 1px solid var(--border);
-    background: var(--accent-soft);
-    color: var(--accent);
-    font: 700 10px var(--sans);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    white-space: nowrap;
-  }
-  .tabs {
-    margin-left: auto;
-    max-width: 100%;
-  }
-  .tabs > .tab[data-tab] {
-    display: none;
-  }
-  #more-tab-label {
-    display: none;
-  }
   .menu-pop {
     top: calc(100% + 2px);
-    left: auto;
-    right: 0;
     min-width: 200px;
     padding: 6px;
   }
@@ -2207,7 +2180,7 @@ dialog.file-modal.preview-maximized {
   }
   .settings {
     grid-column: auto;
-    margin-left: 0;
+    margin-left: auto;
     /* Antes `1 1 100%`: eso ocupaba toda la fila y mandaba los botones a una
        segunda linea. Ahora se quedan en la misma linea que TH. */
     flex: 0 0 auto;
@@ -2353,9 +2326,6 @@ dialog.file-modal.preview-maximized {
   .topbar {
     gap: 8px 8px;
   }
-  #more-tab-label {
-    display: none;
-  }
   .settings {
     gap: 5px;
   }

package/harness/packages/server/src/lib/channels/telegram/api.js

@@ -0,0 +1,102 @@
+// Cliente crudo del API de Telegram. Nada de logica del canal aca: solo la
+// llamada HTTP, con sus variantes (json y multipart) y el manejo de errores.
+
+const API = 'https://api.telegram.org';
+
+async function tg(token, method, payload) {
+  const res = await fetch(`${API}/bot${token}/${method}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload ?? {}),
+  });
+  let data = null;
+  try {
+    data = await res.json();
+  } catch {
+    data = null;
+  }
+  if (!data?.ok) {
+    const error = new Error(data?.description || `HTTP ${res.status}`);
+    error.status = res.status;
+    throw error;
+  }
+  return data.result;
+}
+
+/** Variante multipart de `tg` (sendVoice/sendAudio llevan el archivo adjunto). */
+async function tgForm(token, method, form) {
+  const res = await fetch(`${API}/bot${token}/${method}`, { method: 'POST', body: form });
+  let data = null;
+  try {
+    data = await res.json();
+  } catch {
+    data = null;
+  }
+  if (!data?.ok) {
+    const error = new Error(data?.description || `HTTP ${res.status}`);
+    error.status = res.status;
+    throw error;
+  }
+  return data.result;
+}
+
+async function downloadFile(token, fileId) {
+  const file = await tg(token, 'getFile', { file_id: fileId });
+  const res = await fetch(`${API}/file/bot${token}/${file.file_path}`);
+  if (!res.ok) throw new Error(`no se pudo bajar el archivo (HTTP ${res.status})`);
+  return Buffer.from(await res.arrayBuffer());
+}
+
+/** Valida un token consultando `getMe`. Devuelve `{ ok, username, name }` o `{ ok:false, error }`. */
+export async function getTelegramBotInfo(token) {
+  if (!token) return { ok: false, error: 'Falta el token.' };
+  try {
+    const result = await tg(token, 'getMe', {});
+    return { ok: true, username: result?.username ?? null, name: result?.first_name ?? null };
+  } catch (error) {
+    return { ok: false, error: error?.message ?? String(error) };
+  }
+}
+
+/** Telegram corta los mensajes largos: se parten y se mandan de a trozos. */
+function splitMessage(text, max = 3900) {
+  const value = String(text ?? '').trim() || '(sin texto)';
+  const parts = [];
+  for (let i = 0; i < value.length; i += max) parts.push(value.slice(i, i + max));
+  return parts;
+}
+
+/** Manda `text` a un chat (partido si hace falta) y devuelve el primer mensaje. */
+async function send(T, chatId, text, extra = {}) {
+  let first = null;
+  for (const chunk of splitMessage(text)) {
+    const result = await tg(T.token, 'sendMessage', {
+      chat_id: chatId,
+      text: chunk,
+      disable_web_page_preview: true,
+      ...extra,
+    });
+    if (!first) first = result;
+  }
+  return first;
+}
+
+/** Edita un mensaje ya enviado (el resto del texto sale como mensajes nuevos). */
+async function edit(T, chatId, messageId, text) {
+  const parts = splitMessage(text);
+  await tg(T.token, 'editMessageText', {
+    chat_id: chatId,
+    message_id: messageId,
+    text: parts[0],
+    disable_web_page_preview: true,
+  }).catch(() => null);
+  for (let i = 1; i < parts.length; i++) {
+    await tg(T.token, 'sendMessage', {
+      chat_id: chatId,
+      text: parts[i],
+      disable_web_page_preview: true,
+    }).catch(() => null);
+  }
+}
+
+export { API, downloadFile, edit, send, splitMessage, tg, tgForm };