@danieltmn/tamnora 0.26.0 → 0.27.0

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

@@ -0,0 +1,237 @@
+// Graficos SVG (barras, lineas, torta) para la tool `show_chart`. Sin
+// dependencias y con todo el texto escapado: los datos vienen del modelo y no
+// pueden inyectar markup. Es puro (sin DOM) para poder testearlo en Node.
+
+const PALETTE = [
+  '#4e79a7',
+  '#f28e2b',
+  '#e15759',
+  '#76b7b2',
+  '#59a14f',
+  '#edc948',
+  '#b07aa1',
+  '#ff9da7',
+];
+
+const W = 720;
+const H = 420;
+const PAD = { top: 16, right: 16, bottom: 34, left: 64 };
+const MAX_LABELS = 24;
+const MAX_SERIES = 6;
+
+function esc(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function fmt(value) {
+  const v = Number(value) || 0;
+  return String(Math.round(v * 100) / 100);
+}
+
+function shorten(value, max) {
+  const raw = String(value ?? '');
+  return raw.length > max ? `${raw.slice(0, max - 1)}…` : raw;
+}
+
+/** Redondeo "lindo" hacia arriba: 1/2/5 × 10^k. */
+function niceCeil(value) {
+  const v = Number(value);
+  if (!Number.isFinite(v) || v <= 0) return 1;
+  const pow = 10 ** Math.floor(Math.log10(v));
+  const unit = v / pow;
+  return (unit <= 1 ? 1 : unit <= 2 ? 2 : unit <= 5 ? 5 : 10) * pow;
+}
+
+/**
+ * Normaliza la spec de un grafico (labels y series alineados y numericos).
+ * Devuelve null si no queda nada para dibujar.
+ */
+export function normalizeChart(spec) {
+  const s = spec && typeof spec === 'object' ? spec : {};
+  const labels = (Array.isArray(s.labels) ? s.labels : [])
+    .slice(0, MAX_LABELS)
+    .map((l, idx) => String(l ?? '').trim() || `#${idx + 1}`);
+  if (!labels.length) return null;
+  const n = labels.length;
+  const series = (Array.isArray(s.series) ? s.series : [])
+    .filter((item) => item && typeof item === 'object' && Array.isArray(item.values))
+    .slice(0, MAX_SERIES)
+    .map((item, idx) => ({
+      name: shorten(String(item.name ?? '').trim() || `Serie ${idx + 1}`, 24),
+      values: Array.from({ length: n }, (_, i) => {
+        const v = Number(item.values[i]);
+        return Number.isFinite(v) ? v : 0;
+      }),
+    }));
+  if (!series.length) return null;
+  const type = ['bar', 'line', 'pie'].includes(s.type) ? s.type : 'bar';
+  if (type === 'pie' && series[0].values.every((v) => v <= 0)) return null;
+  return {
+    type,
+    title: shorten(String(s.title ?? '').trim(), 120),
+    unit: shorten(String(s.unit ?? '').trim(), 20),
+    labels,
+    series,
+  };
+}
+
+function gridAndAxes(series, unit, plot) {
+  const { x0, y0, plotW, plotH } = plot;
+  const values = series.flatMap((s) => s.values);
+  const max = Math.max(0, ...values);
+  const min = Math.min(0, ...values);
+  const yTop = niceCeil(max);
+  const yBottom = min < 0 ? -niceCeil(-min) : 0;
+  const y = (v) => y0 + (plotH * (yTop - v)) / (yTop - yBottom || 1);
+
+  const out = [];
+  for (let i = 0; i <= 4; i += 1) {
+    const value = yBottom + ((yTop - yBottom) * i) / 4;
+    const yy = y(value);
+    out.push(
+      `<line x1="${x0}" y1="${yy}" x2="${x0 + plotW}" y2="${yy}" stroke="currentColor" stroke-opacity="${
+        value === 0 ? 0.45 : 0.12
+      }" />`
+    );
+    const label = i === 4 && unit ? `${fmt(value)} ${unit}` : fmt(value);
+    out.push(
+      `<text class="chart-tick" x="${x0 - 8}" y="${yy + 4}" text-anchor="end">${esc(label)}</text>`
+    );
+  }
+  return { svg: out.join(''), y };
+}
+
+function xLabels(labels, plot) {
+  const { x0, y0, plotW, plotH } = plot;
+  const step = Math.ceil(labels.length / 12);
+  const groupW = plotW / labels.length;
+  const out = [];
+  labels.forEach((label, i) => {
+    if (i % step !== 0) return;
+    out.push(
+      `<text class="chart-tick" x="${x0 + groupW * (i + 0.5)}" y="${y0 + plotH + 20}" text-anchor="middle">${esc(
+        shorten(label, 12)
+      )}</text>`
+    );
+  });
+  return out.join('');
+}
+
+function legend(names, y) {
+  let x = PAD.left;
+  const out = [];
+  names.forEach((name, i) => {
+    out.push(`<rect x="${x}" y="${y - 10}" width="12" height="12" rx="2" fill="${PALETTE[i % PALETTE.length]}" />`);
+    out.push(`<text class="chart-legend" x="${x + 18}" y="${y}">${esc(name)}</text>`);
+    x += 30 + shorten(name, 18).length * 7;
+  });
+  return out.join('');
+}
+
+function barLineChart(spec) {
+  const { labels, series, unit, type } = spec;
+  const legendH = series.length > 1 ? 30 : 0;
+  const plot = {
+    x0: PAD.left,
+    y0: PAD.top,
+    plotW: W - PAD.left - PAD.right,
+    plotH: H - PAD.top - PAD.bottom - legendH,
+  };
+  const { svg: axes, y } = gridAndAxes(series, unit, plot);
+  const { x0, plotW } = plot;
+  const n = labels.length;
+  const groupW = plotW / n;
+  const zero = y(0);
+  const out = [axes];
+
+  if (type === 'line') {
+    series.forEach((s, j) => {
+      const points = s.values.map((v, i) => `${x0 + groupW * (i + 0.5)},${y(v)}`).join(' ');
+      out.push(
+        `<polyline points="${points}" fill="none" stroke="${PALETTE[j % PALETTE.length]}" stroke-width="2.5" stroke-linejoin="round" />`
+      );
+      s.values.forEach((v, i) => {
+        out.push(
+          `<circle cx="${x0 + groupW * (i + 0.5)}" cy="${y(v)}" r="3.5" fill="${PALETTE[j % PALETTE.length]}" />`
+        );
+      });
+    });
+  } else {
+    const barW = Math.min((groupW * 0.72) / series.length, 60);
+    series.forEach((s, j) => {
+      s.values.forEach((v, i) => {
+        const yy = y(v);
+        const top = Math.min(yy, zero);
+        const height = Math.max(Math.abs(zero - yy), 1);
+        out.push(
+          `<rect x="${x0 + groupW * i + (groupW - barW * series.length) / 2 + barW * j}" y="${top}" width="${
+            barW - 2
+          }" height="${height}" rx="2" fill="${PALETTE[j % PALETTE.length]}" />`
+        );
+      });
+    });
+  }
+
+  out.push(xLabels(labels, plot));
+  if (series.length > 1) out.push(legend(series.map((s) => s.name), H - 12));
+  return out.join('');
+}
+
+function pieChart(spec) {
+  const { labels, series, unit } = spec;
+  const values = series[0].values.map((v) => Math.max(0, v));
+  const total = values.reduce((a, b) => a + b, 0);
+  if (total <= 0) return '';
+  const cx = 220;
+  const cy = H / 2;
+  const r = 150;
+  const out = [];
+  let angle = -Math.PI / 2;
+  values.forEach((v, i) => {
+    const slice = (v / total) * Math.PI * 2;
+    const color = PALETTE[i % PALETTE.length];
+    if (slice >= Math.PI * 2 - 1e-6) {
+      out.push(`<circle cx="${cx}" cy="${cy}" r="${r}" fill="${color}" />`);
+    } else if (slice > 1e-6) {
+      const x1 = cx + r * Math.cos(angle);
+      const y1 = cy + r * Math.sin(angle);
+      const x2 = cx + r * Math.cos(angle + slice);
+      const y2 = cy + r * Math.sin(angle + slice);
+      const large = slice > Math.PI ? 1 : 0;
+      out.push(
+        `<path d="M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z" fill="${color}" />`
+      );
+    }
+    angle += slice;
+  });
+
+  const startY = cy - (labels.length * 26) / 2 + 8;
+  labels.forEach((label, i) => {
+    const pct = Math.round((values[i] / total) * 1000) / 10;
+    const yy = startY + i * 26;
+    out.push(`<rect x="420" y="${yy - 11}" width="12" height="12" rx="2" fill="${PALETTE[i % PALETTE.length]}" />`);
+    out.push(
+      `<text class="chart-legend" x="440" y="${yy}">${esc(shorten(label, 22))} — ${esc(fmt(values[i]))}${
+        unit ? ` ${esc(unit)}` : ''
+      } (${esc(pct)}%)</text>`
+    );
+  });
+  return out.join('');
+}
+
+/** Renderiza un grafico como SVG. Devuelve '' si la spec no tiene datos. */
+export function renderChart(spec) {
+  const chart = normalizeChart(spec);
+  if (!chart) return '';
+  const body = chart.type === 'pie' ? pieChart(chart) : barLineChart(chart);
+  const label = chart.title || `gráfico de ${chart.type === 'pie' ? 'torta' : chart.type === 'line' ? 'líneas' : 'barras'}`;
+  return (
+    `<svg class="chart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" ` +
+    `role="img" aria-label="${esc(label)}" preserveAspectRatio="xMidYMid meet">${body}</svg>`
+  );
+}

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

@@ -16,11 +16,11 @@ export {
   READ_ONLY_TOOLS,
   basename,
   formatDuration,
+  imageName,
   isFailedToolText,
   isReadOnlyTool,
   parseToolArgs,
   previewText,
-  screenshotName,
   toolSummary,
   userImages,
   userText,
@@ -51,6 +51,7 @@ import { setStatus } from './settings.js';
 import { reconcile, renderAlertSignals } from './system.js';
 import { narrar, reproducirVoz } from './voice.js';
 import {
+  addChartCard,
   addChoiceCard,
   addCompactCard,
   addPermissionCard,
@@ -66,6 +67,7 @@ import {
   toolCardIndex,} from './cards.js';
 export {
   PLAN_MARKS,
+  addChartCard,
   addChoiceCard,
   addCompactCard,
   addPermissionCard,
@@ -447,6 +449,7 @@ export function renderStored(message, pane) {
       if (call.id) toolCardIndex.set(call.id, tool);
       if (name === 'offer_choices') addChoiceCard(bubble, { question: args.question, options: args.options });
       if (name === 'show_plan') addPlanCard(bubble, { title: args.title, steps: args.steps });
+      if (name === 'show_chart') addChartCard(bubble, args);
     }
   } else if (message.role === 'tool') {
     const tool = toolCardIndex.get(message.tool_call_id);
@@ -823,6 +826,9 @@ export function handleChatEvent(event, data, turn) {
     if (turn.live && data.name === 'show_plan') {
       addPlanCard(target, { title: data.args?.title, steps: data.args?.steps });
     }
+    if (turn.live && data.name === 'show_chart') {
+      addChartCard(target, data.args);
+    }
   } else if (event === 'tool_result') {
     setActivity(turn.assistant(), 'thinking');
     finishToolCard(turn.lastTool, data);

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

@@ -57,6 +57,13 @@ export function toolSummary(name, args) {
       return shortText(a.url, 90);
     case 'speak':
       return shortText(a.texto, 90);
+    case 'show_chart': {
+      const tipo = a.type === 'pie' ? 'torta' : a.type === 'line' ? 'líneas' : 'barras';
+      const datos = Array.isArray(a.labels) ? a.labels.length : 0;
+      return [a.title ? shortText(a.title, 40) : '', datos ? `${tipo} · ${datos} datos` : tipo].filter(Boolean).join(' · ');
+    }
+    case 'generate_image':
+      return shortText(a.prompt, 90);
     case 'screenshot':
     case 'console_errors':
     case 'preview_url':
@@ -92,11 +99,15 @@ export function isFailedToolText(text) {
   return /^Error|^Permiso denegado/i.test(String(text ?? ''));
 }
 
-/** Nombre de archivo de una captura, del meta o del texto del resultado. */
-export function screenshotName(data, text) {
-  const fromMeta = data?.meta?.screenshot?.name;
+/**
+ * Nombre de archivo de una imagen del tool (`screenshot` o `generate_image`),
+ * del meta o del texto del resultado. Las imagenes viven en la casa y se sirven
+ * por `/api/screenshots/:name`.
+ */
+export function imageName(data, text) {
+  const fromMeta = data?.meta?.image?.name ?? data?.meta?.screenshot?.name;
   if (fromMeta) return String(fromMeta);
-  const match = /capturas\/([a-z0-9][a-z0-9-]*\.png)/i.exec(String(text ?? ''));
+  const match = /capturas\/([a-z0-9][a-z0-9-]*\.(?:png|jpe?g|webp|gif))/i.exec(String(text ?? ''));
   return match ? match[1] : null;
 }
 

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

@@ -12,7 +12,7 @@ import {
 import { basename, chatInput, scheduleScrollNav, sendMessage } from './chat.js';
 import { $, api, clear, el, state, storage } from './core.js';
 import { refreshExplorerMode } from './explorer.js';
-import { pickVisible } from './modelsQuery.js';
+import { capabilityTags, pickVisible } from './modelsQuery.js';
 import { activateSession, registerSession } from './sessions.js';
 import {
   activateAjustesPanel,
@@ -212,7 +212,10 @@ export function renderModelPill() {
   const provider = record?.provider || state.active.provider;
   const model = record?.model || state.active.model;
   modelPillLabel.textContent = model || 'elegí un modelo';
-  if (modelPill) modelPill.title = `${provider || '—'} / ${model || '—'}`;
+  if (modelPill) {
+    const caps = capabilityTags(state.modelCatalog?.find((m) => m.id === model)?.capabilities);
+    modelPill.title = `${provider || '—'} / ${model || '—'}${caps.length ? `\n${caps.join(' · ')}` : ''}`;
+  }
 }
 
 export function closeModeMenu() {
@@ -627,7 +630,9 @@ export async function applySessionAgent(record) {
 
 /** 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');
+  return shown
+    .map((m) => `${m.id}\u0000${m.label ?? ''}\u0000${m.vision ? 1 : 0}\u0000${m.context ?? ''}\u0000${capabilityTags(m.capabilities).join(',')}`)
+    .join('\u0001');
 }
 
 /**
@@ -686,7 +691,8 @@ export async function loadModels({ save = false, prefer = null, force = false }
         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';
+        const caps = capabilityTags(model.capabilities).slice(0, 3);
+        if (caps.length) option.textContent += ` - ${caps.join(' · ')}`;
         if (model.context) option.dataset.context = String(model.context);
         modelSelect.appendChild(option);
       }

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

@@ -20,7 +20,7 @@
   </head>
   <body>
     <header class="topbar">
-      <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.26.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.27.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">
@@ -402,13 +402,13 @@
               </button>
             </div>
             <div class="row">
-              <label class="field"><span>id</span><input id="pf-id" spellcheck="false" placeholder="deepseek" /></label>
+              <label class="field"><span>id</span><input id="pf-id" spellcheck="false" placeholder="openai" /></label>
               <label class="field"><span>nombre</span><input id="pf-label" spellcheck="false" placeholder="DeepSeek" /></label>
-              <label class="field grow"><span>base URL</span><input id="pf-baseurl" spellcheck="false" placeholder="https://api.deepseek.com/v1" /></label>
+              <label class="field grow"><span>base URL</span><input id="pf-baseurl" spellcheck="false" placeholder="https://api.ejemplo.com/v1" /></label>
             </div>
             <div class="row">
               <label class="field grow"><span>API key</span><input id="pf-key" type="password" spellcheck="false" placeholder="dejar vacío para no cambiar" /></label>
-              <label class="field grow"><span>modelos (coma, opcional)</span><input id="pf-models" spellcheck="false" placeholder="deepseek-chat, deepseek-reasoner" /></label>
+              <label class="field grow"><span>modelos (coma, opcional)</span><input id="pf-models" spellcheck="false" placeholder="modelo-1, modelo-2" /></label>
             </div>
             <div class="row">
               <button type="button" id="pf-test" class="btn">probar conexión</button>
@@ -1207,11 +1207,13 @@
       <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>
+      <button type="button" id="model-all" class="btn" aria-pressed="true">todos</button>
+      <button type="button" id="model-free" class="btn" aria-pressed="false">gratis</button>
+      <button type="button" id="model-sel" class="btn" aria-pressed="false">seleccionados</button>
       <span class="spacer"></span>
       <span id="model-count" class="summary"></span>
+      <button type="button" id="model-bulk-all" class="btn">marcar todo</button>
+      <button type="button" id="model-none" class="btn">vaciar</button>
     </div>
     <ul id="model-list" class="model-list"></ul>
     <div class="row between settings-actions">

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

@@ -109,6 +109,20 @@ export function highlight(code, lang) {
   return highlightCode(code, language);
 }
 
+/**
+ * Fuentes de imagen seguras para `![alt](src)`: URLs http(s), data-URLs de
+ * imagen y rutas del propio server (`/api/screenshots/...`, `capturas/...`).
+ * Todo lo demas (javascript:, data:text/html, ...) no se renderiza como imagen.
+ */
+export function safeImageSrc(url) {
+  const value = String(url ?? '').trim();
+  if (/^https?:\/\/[^\s)]+$/i.test(value)) return value;
+  if (/^data:image\/(png|jpe?g|gif|webp|avif);base64,[a-z0-9+/=]+$/i.test(value)) return value;
+  if (/^\/(?!\/)[^\s)]+$/.test(value)) return value;
+  if (/^capturas\/[a-z0-9][a-z0-9-]*\.(png|jpe?g|webp|gif)$/i.test(value)) return value;
+  return null;
+}
+
 function inline(text) {
   let out = escapeHtml(text).replace(/\uE000/g, '');
   const codes = [];
@@ -120,6 +134,14 @@ function inline(text) {
     .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
     .replace(/__([^_]+)__/g, '<strong>$1</strong>')
     .replace(/(^|[^*\w])\*([^*\n]+)\*/g, '$1<em>$2</em>')
+    .replace(/!\[([^\]]*)\]\(([^\s)]+)\)/g, (match, alt, src) => {
+      const safe = safeImageSrc(src);
+      if (!safe) return match;
+      // El alt puede traer marcadores de codigo inline: se restauran a texto
+      // plano para no meter markup dentro del atributo.
+      const altText = alt.replace(/\uE000(\d+)\uE000/g, (_, idx) => codes[Number(idx)] ?? '');
+      return `<img class="md-img" src="${safe}" alt="${altText}" loading="lazy" referrerpolicy="no-referrer">`;
+    })
     .replace(
       /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
       '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'

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

@@ -4,9 +4,11 @@
 // 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';
+import { applyView, capabilityTags, filterModels } from './modelsQuery.js';
 
-const picker = { catalog: [], checked: new Set(), query: '' };
+const picker = { catalog: [], checked: new Set(), query: '', view: 'all' };
+
+const VIEW_BUTTONS = { all: '#model-all', free: '#model-free', selected: '#model-sel' };
 
 function fmtPrice(n) {
   return n == null ? '?' : Number.isInteger(n) ? String(n) : n.toFixed(2);
@@ -35,14 +37,36 @@ function setModelStatus(text, cls = '') {
   status.className = `summary${cls ? ` ${cls}` : ''}`;
 }
 
+/** Marca el chip de vista activo (los otros son solo vistas, no acciones). */
+function syncViewButtons() {
+  for (const [view, selector] of Object.entries(VIEW_BUTTONS)) {
+    const btn = $(selector);
+    if (!btn) continue;
+    const active = view === picker.view;
+    btn.classList.toggle('active', active);
+    btn.setAttribute('aria-pressed', active ? 'true' : 'false');
+  }
+}
+
+function setView(view) {
+  picker.view = view;
+  syncViewButtons();
+  renderModelPicker();
+}
+
 function renderModelPicker() {
   const list = $('#model-list');
   if (!list) return;
   clear(list);
-  const shown = filterModels(picker.query, picker.catalog);
+  const shown = applyView(picker.view, filterModels(picker.query, picker.catalog), picker.checked);
 
   if (!shown.length) {
-    list.appendChild(el('li', 'model-empty', picker.catalog.length ? 'sin coincidencias' : 'sin modelos'));
+    const empty = picker.catalog.length
+      ? picker.view === 'selected'
+        ? 'sin modelos seleccionados'
+        : 'sin coincidencias'
+      : 'sin modelos';
+    list.appendChild(el('li', 'model-empty', empty));
     updateModelCount();
     return;
   }
@@ -57,6 +81,8 @@ function renderModelPicker() {
       if (cb.checked) picker.checked.add(model.id);
       else picker.checked.delete(model.id);
       updateModelCount();
+      // En la vista "seleccionados" un modelo sin tildar deja de pertenecer.
+      if (picker.view === 'selected') renderModelPicker();
     });
 
     label.appendChild(cb);
@@ -64,6 +90,7 @@ function renderModelPicker() {
       el('span', 'model-item-name', model.label && model.label !== model.id ? model.label : model.id)
     );
     label.appendChild(el('span', 'model-item-id', model.id));
+    for (const tag of capabilityTags(model.capabilities)) label.appendChild(el('span', 'model-cap', tag));
     label.appendChild(priceEl(model));
     li.appendChild(label);
     list.appendChild(li);
@@ -72,7 +99,7 @@ function renderModelPicker() {
 }
 
 function setDisplayed(predicate) {
-  for (const m of filterModels(picker.query, picker.catalog)) {
+  for (const m of picker.catalog) {
     if (predicate(m)) picker.checked.add(m.id);
     else picker.checked.delete(m.id);
   }
@@ -94,10 +121,12 @@ export async function openModelPicker() {
   const selected = Array.isArray(state.visibleModels) ? state.visibleModels : [];
   picker.checked = new Set(selected.length ? selected : catalog.map((m) => m.id));
   picker.query = '';
+  picker.view = 'all';
 
   const queryInput = $('#model-query');
   if (queryInput) queryInput.value = '';
   setModelStatus('');
+  syncViewButtons();
   renderModelPicker();
   $('#model-modal')?.showModal();
 }
@@ -141,7 +170,9 @@ export function wireModelPicker() {
     picker.query = event.target.value;
     renderModelPicker();
   });
-  $('#model-all')?.addEventListener('click', () => setDisplayed(() => true));
+  $('#model-all')?.addEventListener('click', () => setView('all'));
+  $('#model-free')?.addEventListener('click', () => setView('free'));
+  $('#model-sel')?.addEventListener('click', () => setView('selected'));
+  $('#model-bulk-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

@@ -2,15 +2,43 @@
 // Vive separada del picker (`models.js`) porque ese importa `chrome.js`, que
 // toca el DOM al cargarse; este modulo no importa nada.
 
+// Mismo vocabulario que `core/src/providers/capabilities.js` (el cliente no
+// puede importar del core: esto se sirve como modulo estatico del navegador).
+export const CAP_TAGS = {
+  vision: 'visión',
+  image: 'imagen',
+  video: 'video',
+  tts: 'voz',
+  stt: 'escucha',
+  tools: 'tools',
+  reasoning: 'razona',
+};
+
+/** Etiquetas activas de un modelo, para badges y para buscar. */
+export function capabilityTags(caps) {
+  const source = caps && typeof caps === 'object' ? caps : {};
+  return Object.entries(CAP_TAGS)
+    .filter(([key]) => source[key])
+    .map(([, label]) => label);
+}
+
+/** Sin acentos ni mayúsculas, para que "vision" encuentre "visión". */
+function fold(text) {
+  return String(text ?? '')
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/\p{M}/gu, '');
+}
+
 /**
  * ¿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.
+ * todos deben aparecer (AND) en el id, el label o sus capacidades, sin
+ * distinguir mayúsculas ni acentos. Vacío coincide con todo.
  */
 export function matchModel(query, model) {
-  const q = String(query ?? '').trim().toLowerCase();
+  const q = fold(query).trim();
   if (!q) return true;
-  const hay = `${model?.id ?? ''} ${model?.label ?? ''}`.toLowerCase();
+  const hay = fold(`${model?.id ?? ''} ${model?.label ?? ''} ${capabilityTags(model?.capabilities).join(' ')}`);
   return q.split(/\s+/).every((term) => hay.includes(term));
 }
 
@@ -19,6 +47,18 @@ export function filterModels(query, models) {
   return Array.isArray(models) ? models.filter((m) => matchModel(query, m)) : [];
 }
 
+/**
+ * Vista del picker: `'all'` (todo el catálogo), `'free'` (solo gratis) o
+ * `'selected'` (solo lo tildado). `checked` es un Set o lista de ids.
+ */
+export function applyView(view, models, checked = []) {
+  const list = Array.isArray(models) ? models : [];
+  const ids = checked instanceof Set ? checked : new Set(checked ?? []);
+  if (view === 'free') return list.filter((m) => Boolean(m?.free));
+  if (view === 'selected') return list.filter((m) => ids.has(m?.id));
+  return list;
+}
+
 /**
  * Aplica la seleccion guardada a un catalogo. Sin seleccion devuelve todo.
  * Espeja `selectVisibleModels` del core para poder recalcular en el cliente sin