@danieltmn/tamnora 0.23.1 → 0.24.1

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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
+
+- feat(modelos): catalogo completo de OpenRouter con busqueda y seleccion de modelos
+
 ## [0.23.1] - 2026-10-28
 
 ### Cambios

package/harness/packages/core/src/index.js

@@ -28,6 +28,7 @@ export {
   createCustomProvider,
   resolveProviderRuntime,
   listProviderModels,
+  selectVisibleModels,
   testProviderConnection,
   streamChat,
 } from './providers/index.js';

package/harness/packages/core/src/providers/index.js

@@ -83,6 +83,18 @@ function manualModel(model) {
   return { id, label: model.label ?? id, vision: Boolean(model.vision) };
 }
 
+/**
+ * Acota un catalogo a la seleccion del usuario. `visible` vacio o ausente
+ * significa "sin seleccion": se muestra todo. Es solo de presentacion, no
+ * cambia la resolucion del provider.
+ */
+export function selectVisibleModels(models = [], visible = null) {
+  if (!Array.isArray(models) || !models.length) return [];
+  if (!Array.isArray(visible) || !visible.length) return models;
+  const wanted = new Set(visible.map(String));
+  return models.filter((m) => wanted.has(String(m?.id)));
+}
+
 export async function listProviderModels(settings = {}) {
   const { provider, config } = resolveProviderRuntime(settings);
   const manual = settings.providerModels?.[provider.id];

package/harness/packages/core/src/providers/openrouter.js

@@ -14,8 +14,10 @@ function openrouterHeaders({ apiKey, siteUrl, siteName, headers = {} }) {
 }
 
 /**
- * OpenRouter adapter. Only exposes free models, matching the app's original
- * behavior (`:free` suffix or zero prompt/completion pricing).
+ * OpenRouter adapter. Expone el catalogo completo (pagos y gratis), sin los
+ * alias `~familia-latest` ni las variantes `:batch` (mismo modelo, cola
+ * diferida), que son ruido de seleccion. Los gratis salen primero para que el
+ * modelo por defecto siga siendo uno sin costo.
  */
 export const openrouterProvider = {
   id: 'openrouter',
@@ -33,14 +35,10 @@ export const openrouterProvider = {
     const { data } = await res.json();
     return sortModels(
       (data ?? [])
-        .filter(
-          (m) =>
-            m.id?.endsWith(':free') ||
-            (m.pricing?.prompt === '0' && m.pricing?.completion === '0')
-        )
+        .filter((m) => !m.id?.startsWith('~') && !m.id?.endsWith(':batch'))
         .map(normalizeModel)
         .filter((m) => m.id)
-    );
+    ).sort((a, b) => Number(b.free) - Number(a.free));
   },
 
   async streamChat(ctx, { model, messages, tools, signal, onEvent, maxOutputTokens, promptCaching }) {

package/harness/packages/core/src/providers/utils.js

@@ -91,6 +91,12 @@ export async function providerError(response, { providerLabel, model, hasTools }
   return new Error(`${providerLabel} error ${response.status}${suffix}`);
 }
 
+/** USD por 1M de tokens, que es como se comparan los modelos. */
+const perMillion = (value) => {
+  const n = Number(value);
+  return Number.isFinite(n) ? Math.round(n * 1e6 * 1e4) / 1e4 : null;
+};
+
 export function normalizeModel(model) {
   const id = model.id ?? model.name ?? model.model ?? '';
   const label = model.name ?? model.label ?? model.model ?? id;
@@ -107,7 +113,10 @@ export function normalizeModel(model) {
         model.context ??
         0
     ) || null;
-  return { id, label, vision, context };
+  const prompt = perMillion(model.pricing?.prompt);
+  const completion = perMillion(model.pricing?.completion);
+  const free = id.endsWith(':free') || (prompt === 0 && completion === 0);
+  return { id, label, vision, context, free, pricing: { prompt, completion } };
 }
 
 export function sortModels(models) {

package/harness/packages/core/src/storage/sqlite.js

@@ -105,6 +105,7 @@ CREATE TABLE IF NOT EXISTS providers (
   base_url TEXT,
   api_key TEXT,
   models TEXT,
+  visible_models TEXT,
   requires_key INTEGER,
   custom INTEGER,
   enabled INTEGER,
@@ -145,9 +146,12 @@ export function openDatabase(file) {
 }
 
 function migrate(db) {
-  const columns = db.prepare('PRAGMA table_info(messages)').all().map((c) => c.name);
-  if (!columns.includes('mode')) db.exec('ALTER TABLE messages ADD COLUMN mode TEXT');
-  if (!columns.includes('agent_id')) db.exec('ALTER TABLE messages ADD COLUMN agent_id TEXT');
+  const messages = db.prepare('PRAGMA table_info(messages)').all().map((c) => c.name);
+  if (!messages.includes('mode')) db.exec('ALTER TABLE messages ADD COLUMN mode TEXT');
+  if (!messages.includes('agent_id')) db.exec('ALTER TABLE messages ADD COLUMN agent_id TEXT');
+
+  const providers = db.prepare('PRAGMA table_info(providers)').all().map((c) => c.name);
+  if (!providers.includes('visible_models')) db.exec('ALTER TABLE providers ADD COLUMN visible_models TEXT');
 }
 
 const now = () => Date.now();
@@ -523,11 +527,11 @@ export class Store {
   saveProvider(provider) {
     this.db
       .prepare(
-        `INSERT INTO providers (id, label, base_url, api_key, models, requires_key, custom, enabled, updated_at)
-         VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+        `INSERT INTO providers (id, label, base_url, api_key, models, visible_models, requires_key, custom, enabled, updated_at)
+         VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
          ON CONFLICT(id) DO UPDATE SET
            label = excluded.label, base_url = excluded.base_url, api_key = excluded.api_key,
-           models = excluded.models, requires_key = excluded.requires_key,
+           models = excluded.models, visible_models = excluded.visible_models, requires_key = excluded.requires_key,
            custom = excluded.custom, enabled = excluded.enabled, updated_at = excluded.updated_at`
       )
       .run(
@@ -536,6 +540,7 @@ export class Store {
         provider.baseUrl ?? null,
         provider.apiKey ?? null,
         json(provider.models ?? []),
+        json(provider.visibleModels ?? []),
         provider.requiresKey === undefined ? null : provider.requiresKey ? 1 : 0,
         provider.custom ? 1 : 0,
         provider.enabled === false ? 0 : 1,
@@ -676,6 +681,7 @@ function toProvider(row) {
     baseUrl: row.base_url ?? '',
     apiKey: row.api_key ?? '',
     models: parseJson(row.models) ?? [],
+    visibleModels: parseJson(row.visible_models) ?? [],
     requiresKey: row.requires_key === null ? undefined : Boolean(row.requires_key),
     custom: Boolean(row.custom),
     enabled: row.enabled === 0 ? false : true,

package/harness/packages/core/test/openrouter.test.js

@@ -0,0 +1,90 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { openrouterProvider } from '../src/providers/openrouter.js';
+import { selectVisibleModels } from '../src/providers/index.js';
+
+// Catalogo con los casos que filtra el adapter: uno pago, dos gratis (por
+// sufijo `:free` y por precio cero), un alias `~familia-latest` y un `:batch`.
+const CATALOGA = {
+  data: [
+    { id: 'prov/paid-model', name: 'Prov: Paid Model', pricing: { prompt: '0.000002', completion: '0.00001' } },
+    { id: 'prov/free-suffix:free', name: 'Prov: Free Suffix', pricing: { prompt: '0.000002', completion: '0.00001' } },
+    { id: 'prov/zero-price', name: 'Prov: Zero Price', pricing: { prompt: '0', completion: '0' } },
+    { id: '~prov/alias-latest', name: 'Prov: Alias', pricing: { prompt: '0', completion: '0' } },
+    { id: 'prov/paid-model:batch', name: 'Prov: Paid Batch', pricing: { prompt: '0', completion: '0' } },
+  ],
+};
+
+async function listarConFetchFalso() {
+  const original = globalThis.fetch;
+  globalThis.fetch = async () =>
+    new Response(JSON.stringify(CATALOGA), {
+      status: 200,
+      headers: { 'content-type': 'application/json' },
+    });
+  try {
+    return await openrouterProvider.listModels({ apiKey: 'k' });
+  } finally {
+    globalThis.fetch = original;
+  }
+}
+
+test('openrouter.listModels expone el catalogo completo (pagos y gratis)', async () => {
+  const models = await listarConFetchFalso();
+  const ids = models.map((m) => m.id);
+  assert.ok(ids.includes('prov/paid-model'), 'el modelo pago debe estar');
+  assert.ok(ids.includes('prov/free-suffix:free'), 'el gratis por sufijo debe estar');
+  assert.ok(ids.includes('prov/zero-price'), 'el gratis por precio cero debe estar');
+  assert.equal(models.length, 3);
+});
+
+test('openrouter.listModels excluye alias ~ y variantes :batch', async () => {
+  const models = await listarConFetchFalso();
+  const ids = models.map((m) => m.id);
+  assert.ok(!ids.some((id) => id.startsWith('~')), 'sin alias ~');
+  assert.ok(!ids.some((id) => id.endsWith(':batch')), 'sin variantes :batch');
+});
+
+test('openrouter.listModels ordena los gratis primero', async () => {
+  const models = await listarConFetchFalso();
+  const primerPago = models.findIndex((m) => !m.free);
+  const ultimoGratis = models.map((m) => m.free).lastIndexOf(true);
+  assert.notEqual(primerPago, -1, 'debe haber al menos un pago');
+  assert.ok(ultimoGratis < primerPago, 'todos los gratis antes que los pagos');
+});
+
+test('normalizeModel marca free y convierte pricing a USD por 1M', async () => {
+  const models = await listarConFetchFalso();
+  const paid = models.find((m) => m.id === 'prov/paid-model');
+  const zero = models.find((m) => m.id === 'prov/zero-price');
+  const suffix = models.find((m) => m.id === 'prov/free-suffix:free');
+
+  assert.equal(paid.free, false);
+  assert.equal(paid.pricing.prompt, 2);
+  assert.equal(paid.pricing.completion, 10);
+
+  assert.equal(zero.free, true);
+  assert.equal(zero.pricing.prompt, 0);
+  // gratis por sufijo, aunque el precio no sea cero
+  assert.equal(suffix.free, true);
+});
+
+test('selectVisibleModels sin seleccion devuelve todo', () => {
+  const models = [{ id: 'a' }, { id: 'b' }];
+  assert.deepEqual(selectVisibleModels(models, []), models);
+  assert.deepEqual(selectVisibleModels(models, null), models);
+  assert.deepEqual(selectVisibleModels(models, undefined), models);
+});
+
+test('selectVisibleModels acota a los ids seleccionados', () => {
+  const models = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];
+  assert.deepEqual(selectVisibleModels(models, ['a', 'c']).map((m) => m.id), ['a', 'c']);
+  // ids desconocidos se ignoran; no rompen
+  assert.deepEqual(selectVisibleModels(models, ['a', 'zzz']).map((m) => m.id), ['a']);
+});
+
+test('selectVisibleModels con catalogo vacio o no-array → []', () => {
+  assert.deepEqual(selectVisibleModels([], ['a']), []);
+  assert.deepEqual(selectVisibleModels(null, ['a']), []);
+  assert.deepEqual(selectVisibleModels(undefined, ['a']), []);
+});

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

@@ -109,7 +109,8 @@ import {
   setTunnelUi,
   syncPreviewTunnel,
 } from './explorer.js';
-import { renderMarkdown } from './markdown.js';
+import { renderMarkdown } from './markdown.js';
+import { wireModelPicker } from './models.js';
 import { restoreTabs, startNewSession } from './sessions.js';
 import {
   activateAjustesPanel,
@@ -795,7 +796,8 @@ if (brandVerEl) {
 
 /* --- boot ---------------------------------------------------------------- */
 
-async function boot() {
+async function boot() {
+  wireModelPicker();
   const auth = await api('/api/auth/me').catch(() => null);
   if (auth?.enabled && !auth.authenticated) {
     location.replace('/landing');

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,44 +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 models = data?.models ?? [];
-  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;
+    }
 
-  for (const model of models) {
-    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 && models.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.23.1</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">
@@ -538,7 +538,10 @@
               <label for="provider">Proveedor</label>
               <select id="provider" title="proveedor"></select>
               <label for="model">Modelo</label>
-              <select id="model" title="modelo"></select>
+              <div class="model-row">
+                <select id="model" title="modelo"></select>
+                <button type="button" id="model-pick" class="btn" title="elegir qué modelos mostrar">elegir</button>
+              </div>
               <label class="check" title="aprobar automáticamente tools con permiso ask">
                 <input id="yes" type="checkbox" /> Aprobar automáticamente las tools (auto)
               </label>
@@ -1228,6 +1231,36 @@
       </div>
     </dialog>
 
-      <script type="module" src="app.js"></script>
+      <dialog id="model-modal" class="modal model-modal">
+  <div class="modal-card">
+    <div class="row between">
+      <h3>elegir modelos</h3>
+      <button type="button" id="model-close" class="btn icon" title="cerrar" aria-label="cerrar">
+        <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="M18 6 6 18M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+    <div class="model-search">
+      <input id="model-query" aria-label="buscar modelos" type="text" placeholder="buscar por nombre o id…" spellcheck="false" autocomplete="off" />
+    </div>
+    <div class="model-actions">
+      <button type="button" id="model-all" class="btn">todos</button>
+      <button type="button" id="model-none" class="btn">ninguno</button>
+      <button type="button" id="model-free" class="btn">solo gratis</button>
+      <span class="spacer"></span>
+      <span id="model-count" class="summary"></span>
+    </div>
+    <ul id="model-list" class="model-list"></ul>
+    <div class="row between settings-actions">
+      <span id="model-status" class="summary"></span>
+      <span class="spacer"></span>
+      <button type="button" id="model-cancel" class="btn">cancelar</button>
+      <button type="button" id="model-save" class="btn primary">guardar</button>
+    </div>
+  </div>
+</dialog>
+
+<script type="module" src="app.js"></script>
   </body>
 </html>

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

@@ -0,0 +1,147 @@
+// Selector de modelos: buscador + seleccion de qué modelos mostrar/usar.
+// La logica de busqueda vive en `modelsQuery.js` (pura, testeada); esto es el
+// DOM del modal `#model-modal`. La seleccion se guarda como `visibleModels` del
+// proveedor: vacio = "mostrar todo"; un subconjunto = "mostrar estos".
+import { $, api, clear, el, state } from './core.js';
+import { loadModels, providerSelect } from './chrome.js';
+import { filterModels } from './modelsQuery.js';
+
+const picker = { catalog: [], checked: new Set(), query: '' };
+
+function fmtPrice(n) {
+  return n == null ? '?' : Number.isInteger(n) ? String(n) : n.toFixed(2);
+}
+
+function priceEl(model) {
+  if (model.free) return el('span', 'model-item-free', 'gratis');
+  const p = model.pricing;
+  if (!p || (p.prompt == null && p.completion == null)) return el('span', 'model-item-price', '');
+  return el('span', 'model-item-price', `$${fmtPrice(p.prompt)}/$${fmtPrice(p.completion)}`);
+}
+
+function checkedCount() {
+  return picker.catalog.filter((m) => picker.checked.has(m.id)).length;
+}
+
+function updateModelCount() {
+  const count = $('#model-count');
+  if (count) count.textContent = `${checkedCount()} / ${picker.catalog.length} seleccionados`;
+}
+
+function setModelStatus(text, cls = '') {
+  const status = $('#model-status');
+  if (!status) return;
+  status.textContent = text;
+  status.className = `summary${cls ? ` ${cls}` : ''}`;
+}
+
+function renderModelPicker() {
+  const list = $('#model-list');
+  if (!list) return;
+  clear(list);
+  const shown = filterModels(picker.query, picker.catalog);
+
+  if (!shown.length) {
+    list.appendChild(el('li', 'model-empty', picker.catalog.length ? 'sin coincidencias' : 'sin modelos'));
+    updateModelCount();
+    return;
+  }
+
+  for (const model of shown) {
+    const li = el('li');
+    const label = el('label', 'model-item');
+    const cb = el('input');
+    cb.type = 'checkbox';
+    cb.checked = picker.checked.has(model.id);
+    cb.addEventListener('change', () => {
+      if (cb.checked) picker.checked.add(model.id);
+      else picker.checked.delete(model.id);
+      updateModelCount();
+    });
+
+    label.appendChild(cb);
+    label.appendChild(
+      el('span', 'model-item-name', model.label && model.label !== model.id ? model.label : model.id)
+    );
+    label.appendChild(el('span', 'model-item-id', model.id));
+    label.appendChild(priceEl(model));
+    li.appendChild(label);
+    list.appendChild(li);
+  }
+  updateModelCount();
+}
+
+function setDisplayed(predicate) {
+  for (const m of filterModels(picker.query, picker.catalog)) {
+    if (predicate(m)) picker.checked.add(m.id);
+    else picker.checked.delete(m.id);
+  }
+  renderModelPicker();
+}
+
+export async function openModelPicker() {
+  const provider = providerSelect.value;
+  let catalog = state.modelCatalog;
+  if (!Array.isArray(catalog) || !catalog.length) {
+    const data = await api(`/api/models?provider=${encodeURIComponent(provider)}`).catch(() => null);
+    catalog = data?.models ?? [];
+    state.modelCatalog = catalog;
+    state.visibleModels = data?.visibleModels ?? [];
+  }
+  picker.catalog = catalog;
+
+  // Sin seleccion guardada = "mostrar todo": todo tildado. Con seleccion, esa.
+  const selected = Array.isArray(state.visibleModels) ? state.visibleModels : [];
+  picker.checked = new Set(selected.length ? selected : catalog.map((m) => m.id));
+  picker.query = '';
+
+  const queryInput = $('#model-query');
+  if (queryInput) queryInput.value = '';
+  setModelStatus('');
+  renderModelPicker();
+  $('#model-modal')?.showModal();
+}
+
+export function closeModelPicker() {
+  $('#model-modal')?.close();
+}
+
+export async function saveModelPicker() {
+  const provider = providerSelect.value;
+  const catalog = picker.catalog;
+  const checkedIds = catalog.filter((m) => picker.checked.has(m.id)).map((m) => m.id);
+  if (!checkedIds.length) {
+    setModelStatus('marcá al menos un modelo', 'err');
+    return;
+  }
+  // Todo el catálogo tildado se guarda como [] = "mostrar todo" (sin filtro).
+  const visibleModels = checkedIds.length === catalog.length ? [] : checkedIds;
+  setModelStatus('guardando…');
+  try {
+    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');
+  }
+}
+
+export function wireModelPicker() {
+  $('#model-pick')?.addEventListener('click', () => {
+    openModelPicker();
+  });
+  $('#model-close')?.addEventListener('click', closeModelPicker);
+  $('#model-cancel')?.addEventListener('click', closeModelPicker);
+  $('#model-save')?.addEventListener('click', saveModelPicker);
+  $('#model-query')?.addEventListener('input', (event) => {
+    picker.query = event.target.value;
+    renderModelPicker();
+  });
+  $('#model-all')?.addEventListener('click', () => setDisplayed(() => true));
+  $('#model-none')?.addEventListener('click', () => setDisplayed(() => false));
+  $('#model-free')?.addEventListener('click', () => setDisplayed((m) => Boolean(m.free)));
+}

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

@@ -0,0 +1,32 @@
+// Busqueda de modelos: logica pura, sin DOM, para poder testearla en Node.
+// Vive separada del picker (`models.js`) porque ese importa `chrome.js`, que
+// toca el DOM al cargarse; este modulo no importa nada.
+
+/**
+ * ¿El modelo coincide con la consulta? La consulta se parte en términos y
+ * todos deben aparecer (AND) en el id o el label, sin distinguir mayúsculas.
+ * Vacío coincide con todo.
+ */
+export function matchModel(query, model) {
+  const q = String(query ?? '').trim().toLowerCase();
+  if (!q) return true;
+  const hay = `${model?.id ?? ''} ${model?.label ?? ''}`.toLowerCase();
+  return q.split(/\s+/).every((term) => hay.includes(term));
+}
+
+/** Filtra un catálogo por consulta. `models` ausente o no-array → []. */
+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

@@ -2426,7 +2426,56 @@ dialog.modal {
 dialog.modal::backdrop { background: rgba(24, 22, 16, 0.55); backdrop-filter: blur(3px); }
 .modal-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
 .modal-card h3 { margin: 0; font: 700 17px var(--serif); letter-spacing: -0.02em; }
-.confirm-modal .modal-card { max-width: min(420px, 92vw); }
+.confirm-modal .modal-card { max-width: min(420px, 92vw); }
+
+/* --- selector de modelos (busqueda + seleccion) -------------------------- */
+.model-row { display: flex; align-items: center; gap: 6px; }
+.model-row select { flex: 1; min-width: 0; }
+.model-modal { width: min(680px, calc(100vw - 40px)); }
+.model-search input {
+  width: 100%;
+  padding: 9px 11px;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  background: var(--theirs);
+  color: var(--text);
+  font: 500 13px var(--sans);
+}
+.model-actions { display: flex; align-items: center; gap: 7px; }
+.model-list {
+  list-style: none;
+  margin: 0;
+  padding: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  max-height: min(52vh, 420px);
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  background: var(--panel);
+}
+.model-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 9px;
+  border-radius: 7px;
+  cursor: pointer;
+}
+.model-item:hover { background: var(--theirs); }
+.model-item input { flex: 0 0 auto; }
+.model-item-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.model-item-id { color: var(--muted); font: 500 11px var(--mono); flex: 0 0 auto; }
+.model-item-price { color: var(--muted); font: 500 11px var(--mono); flex: 0 0 auto; }
+.model-item-free { color: var(--ok); font: 600 10px var(--sans); flex: 0 0 auto; }
+.model-empty { padding: 16px; color: var(--muted); text-align: center; }
 .confirm-text { margin: 0; color: var(--muted, inherit); line-height: 1.5; }
 .confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .row .spacer { flex: 1; }

package/harness/packages/server/src/routes/models.js

@@ -1,4 +1,4 @@
-import { listProviderModels } from '../lib/core.js';
+import { listProviderModels, selectVisibleModels } from '../lib/core.js';
 import { sendJson } from '../lib/http.js';
 import { createModelCache } from '../lib/modelCache.js';
 
@@ -13,14 +13,19 @@ export function registerModels(route, ctx) {
 
     try {
       const { models, cached, stale } = await modelCache.get(key, () => listProviderModels(settings));
+      // `models` es el catalogo completo (para buscar); `visible` es la seleccion
+      // del usuario para el selector. Sin seleccion, `visible` = todo.
+      const visibleModels = ctx.store.getProvider(providerId)?.visibleModels ?? [];
       sendJson(res, 200, {
         provider: providerId,
         models,
+        visible: selectVisibleModels(models, visibleModels),
+        visibleModels,
         cached: Boolean(cached),
         ...(stale ? { stale } : {}),
       });
     } catch (error) {
-      sendJson(res, 200, { provider: providerId, models: [], error: error?.message ?? String(error) });
+      sendJson(res, 200, { provider: providerId, models: [], visible: [], error: error?.message ?? String(error) });
     }
   });
 }

package/harness/packages/server/src/routes/providers.js

@@ -32,6 +32,7 @@ export function providerList(ctx) {
       hasKey: Boolean(row?.apiKey),
       apiKeyHint: maskSecret(row?.apiKey),
       models: row?.models ?? [],
+      visibleModels: row?.visibleModels ?? [],
     });
   }
 
@@ -49,6 +50,7 @@ export function providerList(ctx) {
         hasKey: Boolean(row.apiKey),
         apiKeyHint: maskSecret(row.apiKey),
         models: row.models,
+        visibleModels: row.visibleModels ?? [],
       });
     }
   }
@@ -140,6 +142,9 @@ export function registerProviders(route, ctx) {
       models: Array.isArray(body.models)
         ? body.models.map((m) => String(m).trim()).filter(Boolean)
         : existing.models ?? [],
+      visibleModels: Array.isArray(body.visibleModels)
+        ? body.visibleModels.map((m) => String(m).trim()).filter(Boolean)
+        : existing.visibleModels ?? [],
       requiresKey: body.requiresKey ?? existing.requiresKey ?? builtin?.requiresKey,
       custom: builtin ? Boolean(body.custom ?? existing.custom ?? false) : true,
       enabled: body.enabled ?? existing.enabled ?? true,

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

@@ -0,0 +1,76 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { matchModel, filterModels, pickVisible } from '../public/modelsQuery.js';
+
+const CATALOG = [
+  { id: 'z-ai/glm-5.3', label: 'Z.ai: GLM 5.3' },
+  { id: 'z-ai/glm-5.3-flash', label: 'Z.ai: GLM 5.3 Flash' },
+  { id: 'deepseek/deepseek-v4.1-flash-1017', label: 'DeepSeek: DeepSeek V4.1 Flash 1017' },
+  { id: 'anthropic/claude-haiku-5.5', label: 'Anthropic: Claude Haiku 5.5' },
+];
+
+test('matchModel: la consulta vacía coincide con todo', () => {
+  for (const model of CATALOG) {
+    assert.equal(matchModel('', model), true);
+    assert.equal(matchModel('   ', model), true);
+    assert.equal(matchModel(undefined, model), true);
+  }
+});
+
+test('matchModel: busca por id y por label, sin distinguir mayúsculas', () => {
+  assert.equal(matchModel('glm', CATALOG[0]), true);
+  assert.equal(matchModel('GLM', CATALOG[0]), true);
+  assert.equal(matchModel('z.ai', CATALOG[0]), true);
+  assert.equal(matchModel('deepseek v4', CATALOG[2]), true);
+  assert.equal(matchModel('haiku', CATALOG[3]), true);
+});
+
+test('matchModel: todos los términos deben aparecer (AND)', () => {
+  assert.equal(matchModel('glm 5.3 flash', CATALOG[1]), true);
+  assert.equal(matchModel('glm flash', CATALOG[1]), true);
+  // "flash" no está en el label del glm-5.3 base
+  assert.equal(matchModel('glm flash', CATALOG[0]), false);
+});
+
+test('matchModel: sin coincidencia devuelve false', () => {
+  assert.equal(matchModel('gpt', CATALOG[0]), false);
+  assert.equal(matchModel('no-existe', CATALOG[2]), false);
+});
+
+test('matchModel: tolera modelos sin id ni label', () => {
+  assert.equal(matchModel('', {}), true);
+  assert.equal(matchModel('algo', {}), false);
+  assert.equal(matchModel('algo', null), false);
+});
+
+test('filterModels: filtra el catálogo por consulta', () => {
+  assert.equal(filterModels('glm', CATALOG).length, 2);
+  assert.equal(filterModels('flash', CATALOG).length, 2);
+  assert.equal(filterModels('deepseek', CATALOG).length, 1);
+  assert.equal(filterModels('', CATALOG).length, 4);
+});
+
+test('filterModels: no-array o ausente → []', () => {
+  assert.deepEqual(filterModels('x', null), []);
+  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.23.1",
+  "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",