@danieltmn/tamnora 0.24.0 → 0.24.1

package/CHANGELOG.md

@@ -5,6 +5,12 @@ 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.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/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,
@@ -531,52 +532,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/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> <span id="topbar-section" class="topbar-section">chat</span> <span class="ver">v0.24.1</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/test/modelsQuery.test.js

@@ -1,6 +1,6 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { matchModel, filterModels } from '../public/modelsQuery.js';
+import { matchModel, filterModels, pickVisible } from '../public/modelsQuery.js';
 
 const CATALOG = [
   { id: 'z-ai/glm-5.3', label: 'Z.ai: GLM 5.3' },
@@ -55,3 +55,22 @@ test('filterModels: no-array o ausente → []', () => {
   assert.deepEqual(filterModels('x', undefined), []);
   assert.deepEqual(filterModels('x', 'no soy una lista'), []);
 });
+
+test('pickVisible: sin seleccion devuelve el catalogo entero', () => {
+  assert.deepEqual(pickVisible(CATALOG, []), CATALOG);
+  assert.deepEqual(pickVisible(CATALOG, null), CATALOG);
+  assert.deepEqual(pickVisible(CATALOG, undefined), CATALOG);
+});
+
+test('pickVisible: acota a los ids seleccionados, en orden del catalogo', () => {
+  const ids = pickVisible(CATALOG, ['anthropic/claude-haiku-5.5', 'z-ai/glm-5.3']).map((m) => m.id);
+  assert.deepEqual(ids, ['z-ai/glm-5.3', 'anthropic/claude-haiku-5.5']);
+  // ids que ya no estan en el catalogo se ignoran sin romper
+  assert.deepEqual(pickVisible(CATALOG, ['z-ai/glm-5.3', 'no/existe']).map((m) => m.id), ['z-ai/glm-5.3']);
+});
+
+test('pickVisible: catalogo vacio o no-array → []', () => {
+  assert.deepEqual(pickVisible([], ['a']), []);
+  assert.deepEqual(pickVisible(null, ['a']), []);
+  assert.deepEqual(pickVisible(undefined, ['a']), []);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danieltmn/tamnora",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "Harness local para IAs: agente CLI-first con TUI, consola web y evaluacion. Node puro, sin dependencias.",
   "type": "module",
   "packageManager": "pnpm@11.25.0",