@danieltmn/tamnora 0.24.0 → 0.24.2

package/CHANGELOG.md

@@ -5,6 +5,19 @@ Todos los cambios relevantes de este proyecto se documentan en este archivo.
 El formato sigue [Keep a Changelog](https://keepachangelog.com/es-ES/1.1.0/)
 y el proyecto usa [Versionado Semantico](https://semver.org/lang/es/).
 
+## [0.24.2] - 2026-10-30
+
+### Cambios
+
+- feat(consola): el input del chat crece hacia arriba al escribir
+- feat: botón para volver al chat desde las demás páginas
+
+## [0.24.1] - 2026-10-28
+
+### Cambios
+
+- fix(consola): deja de repintar el selector de modelos en cada cambio de pestaña
+
 ## [0.24.0] - 2026-10-28
 
 ### Cambios

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

@@ -220,6 +220,8 @@ document.addEventListener('keydown', (event) => {
   if (event.key === 'Escape' && !moreMenu.hidden) hideMoreMenu();
 });
 
+$('#back-chat')?.addEventListener('click', () => activateTab('chat'));
+
 if (settingsModal) {
   $('#settings-toggle')?.addEventListener('click', openSettingsModal);
   $('#settings-close')?.addEventListener('click', closeSettingsModal);

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

@@ -103,6 +103,16 @@ export const panesEl = $('#panes');
 export const tabbarEl = $('#tabbar');
 export const chatForm = $('#chat-form');
 export const chatInput = $('#chat-input');
+
+/**
+ * Ajusta el alto del textarea al contenido: crece hacia arriba a medida que se
+ * escribe, hasta el `max-height` del CSS (donde pasa a scrollear por dentro).
+ * Hay que llamarlo tambien al vaciarlo por codigo, o quedaria alto y vacio.
+ */
+export function autoGrowChatInput() {
+  chatInput.style.height = 'auto';
+  chatInput.style.height = `${chatInput.scrollHeight}px`;
+}
 export const submitBtn = chatForm.querySelector('button[type="submit"]');
 export const stopBtn = $('#stop-btn');
 export const interruptBtn = $('#interrupt-btn');
@@ -305,6 +315,7 @@ export async function regenerate(message) {
   await api(`/api/sessions/${id}/truncate`, { method: 'POST', body: { fromId: lastUser.id } }).catch(() => {});
   await reloadPane(id);
   chatInput.value = userText(lastUser.content);
+  autoGrowChatInput();
   await sendMessage();
 }
 
@@ -338,6 +349,7 @@ export async function undoTurn(message) {
 
 export function editMessage(message) {  const id = messageId(message);
   chatInput.value = message.textEl.textContent;
+  autoGrowChatInput();
   chatInput.focus();
   state.pendingEdit = id ? { fromId: id } : null;
 }
@@ -753,6 +765,7 @@ export function addContinueButton(turn, data) {
   btn.addEventListener('click', () => {
     if (state.panes.get(turn.sessionKey)?.working) return;
     chatInput.value = 'Continuá donde quedaste.';
+    autoGrowChatInput();
     sendMessage();
   });
   turn.assistant().tools.appendChild(btn);
@@ -1195,6 +1208,7 @@ export async function sendMessage() {
     chatInput.value = '';
     state.attachments = [];
     renderAttachments();
+    autoGrowChatInput();
     if (command) runShell(command);
     return;
   }
@@ -1224,6 +1238,7 @@ export async function sendMessage() {
     chatInput.value = '';
     state.attachments = [];
     renderAttachments();
+    autoGrowChatInput();
     syncInterruptBtn();
     return;
   }
@@ -1240,6 +1255,7 @@ export async function sendMessage() {
   chatInput.value = '';
   state.attachments = [];
   renderAttachments();
+  autoGrowChatInput();
   await startTurn(state.sessionId, activePane, input, images);
 }
 
@@ -1275,6 +1291,7 @@ export function sendInterrupt() {
   chatInput.value = '';
   state.attachments = [];
   renderAttachments();
+  autoGrowChatInput();
   syncInterruptBtn();
   interruptAndSend(state.sessionId, input, images);
 }

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

@@ -11,7 +11,8 @@ import {
 } from './appearance.js';
 import { basename, chatInput, scheduleScrollNav, sendMessage } from './chat.js';
 import { $, api, clear, el, state, storage } from './core.js';
-import { refreshExplorerMode } from './explorer.js';
+import { refreshExplorerMode } from './explorer.js';
+import { pickVisible } from './modelsQuery.js';
 import { activateSession, registerSession } from './sessions.js';
 import {
   activateAjustesPanel,
@@ -43,7 +44,8 @@ export function setCwd(value) {
 
 export const moreTab = $('#more-tab');
 export const moreMenu = $('#more-menu');
-export const topbarSection = $('#topbar-section');
+export const topbarSection = $('#topbar-section');
+export const backChat = $('#back-chat');
 
 export const TAB_LABELS = { chat: 'chat', providers: 'proveedores', ajustes: 'ajustes', eval: 'eval', runs: 'runs' };
 
@@ -60,6 +62,7 @@ export function activateTab(name) {
     .querySelectorAll('#more-menu button[data-tab]')
     .forEach((t) => t.classList.toggle('active', t.dataset.tab === name));
   if (topbarSection) topbarSection.textContent = TAB_LABELS[name] || name;
+  if (backChat) backChat.hidden = name === 'chat';
   moreTab.classList.toggle('active', name !== 'chat');
   document.querySelectorAll('.view').forEach((v) => v.classList.toggle('active', v.id === `view-${name}`));
   hideMoreMenu();
@@ -531,52 +534,83 @@ export async function applySessionAgent(record) {
   renderModelPill();
 }
 
-export async function loadModels({ save = false, prefer = null } = {}) {
+/** Firma de la lista dibujada: si no cambia, no hay que repintar el select. */
+function modelsSignature(shown) {
+  return shown.map((m) => `${m.id}\u0000${m.label ?? ''}\u0000${m.vision ? 1 : 0}\u0000${m.context ?? ''}`).join('\u0001');
+}
+
+/**
+ * Carga el catalogo del proveedor y dibuja el select.
+ *
+ * `force` vuelve a pedirlo al server; sin el se reusa el de `state` (son ~374
+ * modelos / 591 KB, y esto corre en cada cambio de pestana: refetchearlo hacia
+ * parpadear la consola).
+ */
+export async function loadModels({ save = false, prefer = null, force = false } = {}) {
   const provider = providerSelect.value;
+  const cached = !force && state.modelCatalogProvider === provider && state.modelCatalog?.length;
   modelSelect.disabled = true;
-  const data = await api(`/api/models?provider=${encodeURIComponent(provider)}`).catch((error) => ({
-    models: [],
-    error: error.message,
-  }));
-  const catalog = data?.models ?? [];
-  const models = data?.visible ?? catalog;
-  state.modelCatalog = catalog;
-  state.visibleModels = data?.visibleModels ?? [];
-  clear(modelSelect);
+  try {
+    if (!cached) {
+      const data = await api(`/api/models?provider=${encodeURIComponent(provider)}`).catch((error) => ({
+        models: [],
+        error: error.message,
+      }));
+      state.modelCatalog = data?.models ?? [];
+      state.visibleModels = data?.visibleModels ?? [];
+      state.modelCatalogProvider = provider;
+      if (!state.modelCatalog.length) {
+        clear(modelSelect);
+        const option = document.createElement('option');
+        option.value = '';
+        option.textContent = data?.error ? `sin modelos - ${data.error}` : 'sin modelos (configura el proveedor)';
+        modelSelect.appendChild(option);
+        return;
+      }
+    }
 
-  if (!models.length) {
-    const option = document.createElement('option');
-    option.value = '';
-    option.textContent = data?.error ? `sin modelos — ${data.error}` : 'sin modelos (configurá el proveedor)';
-    modelSelect.appendChild(option);
-    updateStatus();
-    renderTokens();
-    return;
-  }
+    const catalog = state.modelCatalog;
+    const models = pickVisible(catalog, state.visibleModels);
+    const activeModel = prefer || state.active.model;
+    // Si el modelo activo quedo fuera de la seleccion, lo mostramos igual para no
+    // cambiarlo en silencio: sigue siendo el usado aunque no este tildado.
+    const hidden = activeModel && catalog.some((m) => m.id === activeModel) && !models.some((m) => m.id === activeModel);
+    const shown = hidden ? [catalog.find((m) => m.id === activeModel), ...models] : models;
+    if (!shown.length) {
+      clear(modelSelect);
+      const option = document.createElement('option');
+      option.value = '';
+      option.textContent = 'sin modelos (configura el proveedor)';
+      modelSelect.appendChild(option);
+      return;
+    }
 
-  const activeModel = prefer || state.active.model;
-  // Si el modelo activo quedó fuera de la selección, lo mostramos igual para no
-  // cambiarlo en silencio: sigue siendo el usado aunque no esté tildado.
-  const hidden = activeModel && catalog.some((m) => m.id === activeModel) && !models.some((m) => m.id === activeModel);
-  const shown = hidden ? [catalog.find((m) => m.id === activeModel), ...models] : models;
-  for (const model of shown) {
-    const option = document.createElement('option');
-    option.value = model.id;
-    option.textContent = model.label && model.label !== model.id ? model.label : model.id;
-    if (model.vision) option.textContent += ' · visión';
-    if (model.context) option.dataset.context = String(model.context);
-    modelSelect.appendChild(option);
-  }
-  const wanted = prefer || state.active.model;
-  if (wanted && shown.some((m) => m.id === wanted)) {
-    modelSelect.value = wanted;
-  } else {
-    modelSelect.value = models[0].id;
-    if (save) await saveSettings({ model: modelSelect.value });
+    // Repintar el select con cientos de opciones es lo que se ve como parpadeo:
+    // solo se hace cuando la lista realmente cambio.
+    const signature = modelsSignature(shown);
+    if (signature !== state.modelSignature) {
+      state.modelSignature = signature;
+      clear(modelSelect);
+      for (const model of shown) {
+        const option = document.createElement('option');
+        option.value = model.id;
+        option.textContent = model.label && model.label !== model.id ? model.label : model.id;
+        if (model.vision) option.textContent += ' - vision';
+        if (model.context) option.dataset.context = String(model.context);
+        modelSelect.appendChild(option);
+      }
+    }
+
+    const wanted = prefer || state.active.model;
+    if (wanted && shown.some((m) => m.id === wanted)) {
+      modelSelect.value = wanted;
+    } else {
+      modelSelect.value = models[0].id;
+      if (save) await saveSettings({ model: modelSelect.value });
+    }
+  } finally {
+    modelSelect.disabled = false;
   }
-  modelSelect.disabled = false;
-  updateStatus();
-  renderTokens();
 }
 
 /* --- folder picker -------------------------------------------------------- */

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

@@ -3,6 +3,7 @@ import {
   activePane,
   addCompactCard,
   addMessage,
+  autoGrowChatInput,
   basename,
   chatInput,
   finishCompactCard,
@@ -398,6 +399,7 @@ export function handleSlashKey(event) {
 export function onChatInputChanged() {
   slashIndex = 0;
   updateSlashMenu();
+  autoGrowChatInput();
   syncInterruptBtn();
 }
 

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

@@ -14,6 +14,13 @@ export const state = {
   streaming: false,
   providers: [],
   active: { provider: '', model: '' },
+  // Catalogo de modelos del proveedor y su seleccion. Se cachea porque el
+  // catalogo son cientos de modelos (~591 KB) y `loadModels` corre en cada
+  // cambio de pestana: refetchearlo hacia parpadear la consola.
+  modelCatalog: [],
+  modelCatalogProvider: null,
+  modelSignature: null,
+  visibleModels: [],
   pendingInput: null,
   permissionCards: new Map(),
   questionCards: new Map(),

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

@@ -75,7 +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.24.0</span></div>
+      <div class="brand"><span class="logo"><img src="/icons/logo.png" alt="Tamnora" /></span> <button id="back-chat" type="button" class="back-chat" title="volver al chat" aria-label="volver al chat" hidden><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="m15 18-6-6 6-6" /></svg><span>chat</span></button> <span id="topbar-section" class="topbar-section">chat</span> <span class="ver">v0.24.2</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">

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

@@ -121,6 +121,9 @@ export async function saveModelPicker() {
     await api(`/api/providers/${encodeURIComponent(provider)}`, { method: 'PUT', body: { visibleModels } });
     setModelStatus('guardado', 'ok');
     $('#model-modal')?.close();
+    // La seleccion ya la tenemos aca: se aplica al estado y se repinta sin
+    // volver a pedir el catalogo (591 KB) al server.
+    state.visibleModels = visibleModels;
     await loadModels();
   } catch (error) {
     setModelStatus(error?.message ?? 'no se pudo guardar', 'err');

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

@@ -18,3 +18,15 @@ export function matchModel(query, model) {
 export function filterModels(query, models) {
   return Array.isArray(models) ? models.filter((m) => matchModel(query, m)) : [];
 }
+
+/**
+ * Aplica la seleccion guardada a un catalogo. Sin seleccion devuelve todo.
+ * Espeja `selectVisibleModels` del core para poder recalcular en el cliente sin
+ * volver a pedir el catalogo (591 KB) cada vez que cambia de pestaña.
+ */
+export function pickVisible(catalog, selected) {
+  if (!Array.isArray(catalog) || !catalog.length) return [];
+  if (!Array.isArray(selected) || !selected.length) return catalog;
+  const wanted = new Set(selected.map(String));
+  return catalog.filter((m) => wanted.has(String(m?.id)));
+}

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

@@ -93,7 +93,7 @@ export function renderProviderList() {
 
 export async function useProvider(id) {
   providerSelect.value = id;
-  await loadModels({ save: false });
+  await loadModels({ save: false, force: true });
   await persistAgent({ provider: id, model: modelSelect.value || undefined });
   await refreshProviders();
 }
@@ -135,7 +135,7 @@ export async function submitProvider(event) {
     await api(`/api/providers/${encodeURIComponent(id)}`, { method: 'PUT', body });
     closeProviderForm();
     await refreshProviders();
-    await loadModels();
+    await loadModels({ force: true });
   } catch (error) {
     setProviderStatus(error.message, 'err');
   }
@@ -144,7 +144,7 @@ export async function submitProvider(event) {
 export async function removeProvider(id) {
   await deleteEntity(`/api/providers/${encodeURIComponent(id)}`, {
     confirmText: `¿Borrar la configuración de "${id}"?`,
-    after: loadModels,
+    after: () => loadModels({ force: true }),
     refresh: refreshProviders,
   });
 }
@@ -165,7 +165,7 @@ export async function testProvider() {
     $('#pf-models').value = ids.join(', ');
     note = ' · modelos autocompletados';
   }
-  if (id === state.active.provider) await loadModels();
+  if (id === state.active.provider) await loadModels({ force: true });
   setProviderStatus(`ok · ${out.count} modelos (${out.source})${note}`, 'ok');
 }
 

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

@@ -571,6 +571,27 @@ html[data-scheme='light'] .brand .logo img { content: url('/icons/logo_light.png
   letter-spacing: 0.08em;
   white-space: nowrap;
 }
+/* Botón para volver al chat desde las demás páginas (proveedores, ajustes, eval, runs). */
+.back-chat {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  height: 24px;
+  padding: 0 9px 0 5px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--theirs);
+  color: var(--muted);
+  cursor: pointer;
+  font: 700 10px var(--sans);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+  transition: 0.15s ease;
+}
+.back-chat[hidden] { display: none; }
+.back-chat:hover { border-color: var(--accent); color: var(--accent); }
+.back-chat svg { width: 15px; height: 15px; display: block; flex: 0 0 auto; }
 .menu { position: relative; display: block; }
 
 /* El icono muestra el tema al que se va a cambiar: claro -> luna, oscuro -> sol. */