@danieltmn/tamnora 0.23.1 → 0.24.0

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.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

@@ -538,7 +538,10 @@ export async function loadModels({ save = false, prefer = null } = {}) {
     models: [],
     error: error.message,
   }));
-  const models = data?.models ?? [];
+  const catalog = data?.models ?? [];
+  const models = data?.visible ?? catalog;
+  state.modelCatalog = catalog;
+  state.visibleModels = data?.visibleModels ?? [];
   clear(modelSelect);
 
   if (!models.length) {
@@ -551,7 +554,12 @@ export async function loadModels({ save = false, prefer = null } = {}) {
     return;
   }
 
-  for (const model of models) {
+  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;
@@ -560,7 +568,7 @@ export async function loadModels({ save = false, prefer = null } = {}) {
     modelSelect.appendChild(option);
   }
   const wanted = prefer || state.active.model;
-  if (wanted && models.some((m) => m.id === wanted)) {
+  if (wanted && shown.some((m) => m.id === wanted)) {
     modelSelect.value = wanted;
   } else {
     modelSelect.value = models[0].id;

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.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">
@@ -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,144 @@
+// 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();
+    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,20 @@
+// 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)) : [];
+}

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,57 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { matchModel, filterModels } 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'), []);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danieltmn/tamnora",
-  "version": "0.23.1",
+  "version": "0.24.0",
   "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",