termsearch 0.3.1 → 0.3.3

package/README.md

@@ -1,6 +1,6 @@
 # TermSearch - Personal Search Engine
 
-[![Status](https://img.shields.io/badge/Status-0.3.1-blue.svg)](#project-status)
+[![Status](https://img.shields.io/badge/Status-0.3.3-blue.svg)](#project-status)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 [![Node.js](https://img.shields.io/badge/Node.js-18%2B-green.svg)](https://nodejs.org)
 [![Target](https://img.shields.io/badge/Target-Termux%20%2F%20Linux%20%2F%20macOS-green.svg)](https://termux.dev)
@@ -12,7 +12,9 @@ Zero external dependencies, no Docker, no Python. AI is optional and configured
 Core capabilities:
 
 - Zero-config search via DuckDuckGo and Wikipedia — works immediately after install
+- Built-in GitHub Search API fallback (`github-api`) and selectable engine mix from UI
 - Progressive enhancement: add Brave/Mojeek API keys, AI endpoints, or SearXNG when needed
+- Search history persistence (opt-in toggle in Settings)
 - Social profile scanner: GitHub, Bluesky, Reddit, Twitter/X, Instagram, YouTube, LinkedIn, TikTok, Telegram, Facebook
 - Torrent search: The Pirate Bay + 1337x with direct magnet extraction
 - Social search: Bluesky posts/actors + GDELT news
@@ -22,7 +24,7 @@ Core capabilities:
 
 ## Project Status
 
-- Current line: `0.3.1`
+- Current line: `0.3.3`
 - Core is MIT — zero required API keys
 - AI features are optional, configured via Settings page in browser
 - Tested on: Ubuntu 24.04, Termux (Android 15/16)
@@ -89,8 +91,11 @@ Configure at **Settings → AI** in the browser. Supported endpoints:
 |----------|----------|-------|-----|
 | **Localhost** (Ollama) | `http://localhost:11434/v1` | `qwen3.5:4b` or any | not required |
 | **Localhost** (LM Studio) | `http://localhost:1234/v1` | your loaded model | not required |
+| **Localhost** (llama.cpp) | `http://localhost:8080/v1` | your loaded model | not required |
 | **Chutes.ai TEE** | `https://llm.chutes.ai/v1` | `deepseek-ai/DeepSeek-V3.2-TEE` | required |
+| **Anthropic** | `https://api.anthropic.com/v1` | `claude-3-5-haiku-latest` | required |
 | **OpenAI** | `https://api.openai.com/v1` | `gpt-4o-mini` | required |
+| **OpenRouter** | `https://openrouter.ai/api/v1` | any listed model | required |
 | **API custom** | any OpenAI-compatible URL | your model | optional |
 
 All providers use the OpenAI-compatible `/chat/completions` format. Leave API key empty for local models.
@@ -107,7 +112,7 @@ All providers use the OpenAI-compatible `/chat/completions` format. Leave API ke
 src/
   config/           config manager — load/save/defaults/env overrides
   search/
-    providers/      DuckDuckGo, Wikipedia, Brave, Mojeek, SearXNG
+    providers/      DuckDuckGo, Wikipedia, Brave, Mojeek, SearXNG, GitHub API, Yandex, Ahmia, Marginalia
     engine.js       fan-out, merge, rank, cache
     ranking.js      source diversity ranking
     cache.js        tiered cache (L1 Map + L2 disk JSON)
@@ -172,6 +177,8 @@ TERMSEARCH_AI_API_KEY=
 TERMSEARCH_AI_MODEL=glm-4.7
 TERMSEARCH_BRAVE_API_KEY=
 TERMSEARCH_MOJEEK_API_KEY=
+TERMSEARCH_MARGINALIA_API_KEY=public
+TERMSEARCH_MARGINALIA_API_BASE=https://api2.marginalia-search.com
 TERMSEARCH_SEARXNG_URL=
 TERMSEARCH_GITHUB_TOKEN=
 TERMSEARCH_INSTAGRAM_SESSION=

package/config.example.json

@@ -24,6 +24,17 @@
     "enabled": false,
     "api_key": ""
   },
+  "yandex": {
+    "enabled": true
+  },
+  "ahmia": {
+    "enabled": true
+  },
+  "marginalia": {
+    "enabled": true,
+    "api_key": "public",
+    "api_base": "https://api2.marginalia-search.com"
+  },
   "searxng": {
     "enabled": false,
     "url": ""

package/frontend/dist/app.js

@@ -9,6 +9,15 @@ const state = {
   aiStatus: 'idle',
   aiError: null,
   aiMeta: null,
+  aiProgress: 0,
+  aiSteps: [],
+  aiSources: [],
+  aiExpanded: false,
+  aiStartTime: null,
+  aiLatencyMs: null,
+  aiLastQuery: null,
+  aiLastResults: null,
+  aiLastLang: null,
   profilerData: null,
   profilerLoading: false,
   torrentData: [],
@@ -17,6 +26,14 @@ const state = {
   providers: [],
   config: null,
   historyEnabled: localStorage.getItem('ts-save-history') !== '0',
+  selectedEngines: (() => {
+    try {
+      const raw = JSON.parse(localStorage.getItem('ts-engines') || '[]');
+      return Array.isArray(raw) ? raw.slice(0, 20).map((v) => String(v || '').trim().toLowerCase()).filter(Boolean) : [];
+    } catch {
+      return [];
+    }
+  })(),
   searchHistory: (() => {
     try {
       const raw = JSON.parse(localStorage.getItem('ts-history') || '[]');
@@ -95,6 +112,53 @@ function addSearchToHistory(query) {
   persistHistory();
 }
 
+const LANG_CANONICAL = new Map([
+  ['it', 'it-IT'], ['it-it', 'it-IT'],
+  ['en', 'en-US'], ['en-us', 'en-US'],
+  ['es', 'es-ES'], ['es-es', 'es-ES'],
+  ['fr', 'fr-FR'], ['fr-fr', 'fr-FR'],
+  ['de', 'de-DE'], ['de-de', 'de-DE'],
+  ['pt', 'pt-PT'], ['pt-pt', 'pt-PT'],
+  ['ru', 'ru-RU'], ['ru-ru', 'ru-RU'],
+  ['zh', 'zh-CN'], ['zh-cn', 'zh-CN'],
+  ['ja', 'ja-JP'], ['ja-jp', 'ja-JP'],
+]);
+
+function normalizeLangCode(raw) {
+  const key = String(raw || '').trim().toLowerCase();
+  return LANG_CANONICAL.get(key) || null;
+}
+
+function getResolvedLang() {
+  const selected = getLang();
+  if (selected && selected !== 'auto') return selected;
+  const browser = normalizeLangCode(navigator.language || navigator.languages?.[0] || '');
+  return browser || 'en-US';
+}
+
+function persistSelectedEngines() {
+  localStorage.setItem('ts-engines', JSON.stringify(state.selectedEngines.slice(0, 20)));
+}
+
+function setSelectedEngines(engines) {
+  state.selectedEngines = [...new Set(
+    (Array.isArray(engines) ? engines : [])
+      .map((engine) => String(engine || '').trim().toLowerCase())
+      .filter(Boolean)
+  )].slice(0, 20);
+  persistSelectedEngines();
+}
+
+function sanitizeHttpUrl(raw) {
+  try {
+    const url = new URL(String(raw || '').trim());
+    if (url.protocol !== 'http:' && url.protocol !== 'https:') return '';
+    return url.toString();
+  } catch {
+    return '';
+  }
+}
+
 // ─── SVG Icons ────────────────────────────────────────────────────────────
 function svg(paths, size = 16, extra = '') {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ${extra}>${paths}</svg>`;
@@ -155,13 +219,29 @@ const LANGS = [
 ];
 
 const AI_PRESETS = [
-  { id: 'openai', label: 'OpenAI', api_base: 'https://api.openai.com/v1', keyRequired: true, defaultModel: 'gpt-4o-mini' },
-  { id: 'chutes', label: 'Chutes.ai', api_base: 'https://llm.chutes.ai/v1', keyRequired: true, defaultModel: 'deepseek-ai/DeepSeek-V3.2-TEE' },
-  { id: 'openrouter', label: 'OpenRoute/OpenRouter', api_base: 'https://openrouter.ai/api/v1', keyRequired: true, defaultModel: 'openai/gpt-4o-mini' },
-  { id: 'anthropic', label: 'Anthropic', api_base: 'https://api.anthropic.com/v1', keyRequired: true, defaultModel: 'claude-3-5-haiku-latest' },
-  { id: 'ollama', label: 'Ollama', api_base: 'http://127.0.0.1:11434/v1', keyRequired: false, defaultModel: 'qwen3.5:4b' },
-  { id: 'lmstudio', label: 'LM Studio', api_base: 'http://127.0.0.1:1234/v1', keyRequired: false, defaultModel: '' },
-  { id: 'llamacpp', label: 'llama.cpp server', api_base: 'http://127.0.0.1:8080/v1', keyRequired: false, defaultModel: '' },
+  { id: 'ollama',   label: 'LocalHost — Ollama',       api_base: 'http://127.0.0.1:11434/v1', keyRequired: false, defaultModel: 'qwen3.5:4b' },
+  { id: 'lmstudio', label: 'LocalHost — LM Studio',    api_base: 'http://127.0.0.1:1234/v1',  keyRequired: false, defaultModel: '' },
+  { id: 'llamacpp', label: 'LocalHost — llama.cpp',    api_base: 'http://127.0.0.1:8080/v1',  keyRequired: false, defaultModel: '' },
+  { id: 'chutes',   label: 'Chutes.ai TEE',            api_base: 'https://llm.chutes.ai/v1',  keyRequired: true,  defaultModel: 'deepseek-ai/DeepSeek-V3.2-TEE' },
+  { id: 'anthropic',label: 'Anthropic',                api_base: 'https://api.anthropic.com/v1', keyRequired: true, defaultModel: 'claude-3-5-haiku-latest' },
+  { id: 'openai',   label: 'OpenAI',                   api_base: 'https://api.openai.com/v1', keyRequired: true,  defaultModel: 'gpt-4o-mini' },
+  { id: 'openrouter', label: 'OpenRoute/OpenRouter',   api_base: 'https://openrouter.ai/api/v1', keyRequired: true, defaultModel: 'openai/gpt-4o-mini' },
+];
+
+const ENGINE_GROUPS = [
+  { label: 'Web Core', items: ['duckduckgo', 'wikipedia', 'brave', 'startpage', 'qwant', 'mojeek', 'bing', 'google', 'yahoo'] },
+  { label: 'Uncensored', items: ['yandex', 'marginalia', 'ahmia'] },
+  { label: 'Code & Dev', items: ['github', 'github-api', 'hackernews', 'reddit'] },
+  { label: 'Media', items: ['youtube', 'sepiasearch'] },
+  { label: 'Research', items: ['wikidata', 'crossref', 'openalex', 'openlibrary'] },
+  { label: 'Federated', items: ['mastodon users', 'mastodon hashtags', 'tootfinder', 'lemmy communities', 'lemmy posts'] },
+  { label: 'Torrent', items: ['piratebay', '1337x', 'nyaa'] },
+];
+
+const ENGINE_PRESETS = [
+  { id: 'all', label: 'All', engines: [] },
+  { id: 'balanced', label: 'Balanced', engines: ['duckduckgo', 'wikipedia', 'bing', 'startpage', 'github', 'reddit', 'youtube'] },
+  { id: 'github', label: 'GitHub Focus', engines: ['github-api', 'github', 'duckduckgo', 'wikipedia'] },
 ];
 
 function detectPresetFromBase(base) {
@@ -179,12 +259,88 @@ function LangPicker() {
     if (l.code === getLang()) opt.selected = true;
     sel.append(opt);
   }
-  sel.addEventListener('change', () => { setLang(sel.value); });
+  sel.addEventListener('change', () => {
+    setLang(sel.value);
+    if (state.query) {
+      doSearch(state.query, state.category);
+    } else {
+      renderApp();
+    }
+  });
   const arrow = el('span', { className: 'lang-arrow', html: svg('<polyline points="6 9 12 15 18 9"/>', 12) });
   wrap.append(sel, arrow);
   return wrap;
 }
 
+function EnginePicker() {
+  const details = el('details', { className: 'engine-picker' });
+  const selectedCount = state.selectedEngines.length;
+  const summary = el('summary', { className: 'engine-picker-summary' },
+    el('span', { className: 'engine-picker-title' }, selectedCount ? `Engines (${selectedCount})` : 'Engines (all)'),
+    iconEl('chevron', 'engine-chevron'),
+  );
+
+  const body = el('div', { className: 'engine-picker-body' });
+  const presetRow = el('div', { className: 'engine-preset-row' });
+  ENGINE_PRESETS.forEach((preset) => {
+    presetRow.append(el('button', {
+      className: `btn ${preset.id === 'balanced' ? 'btn-primary' : ''}`,
+      type: 'button',
+      onClick: () => {
+        setSelectedEngines(preset.engines);
+        details.open = false;
+        if (state.query) doSearch(state.query, state.category);
+        else renderApp();
+      },
+    }, preset.label));
+  });
+  body.append(presetRow);
+
+  ENGINE_GROUPS.forEach((group) => {
+    const card = el('div', { className: 'engine-group' });
+    card.append(el('div', { className: 'engine-group-title' }, group.label));
+    const list = el('div', { className: 'engine-chip-wrap' });
+    group.items.forEach((engine) => {
+      const checked = state.selectedEngines.includes(engine);
+      const id = `engine-${engine.replace(/[^a-z0-9]+/g, '-')}-${Math.random().toString(36).slice(2, 6)}`;
+      const input = el('input', { id, type: 'checkbox', ...(checked ? { checked: '' } : {}) });
+      const label = el('label', { className: 'engine-chip', for: id }, input, el('span', {}, engine));
+      list.append(label);
+    });
+    card.append(list);
+    body.append(card);
+  });
+
+  body.append(el('div', { className: 'engine-actions' },
+    el('button', {
+      className: 'btn btn-primary',
+      type: 'button',
+      onClick: () => {
+        const selected = [...details.querySelectorAll('.engine-chip input:checked')]
+          .map((node) => node.parentElement?.textContent?.trim().toLowerCase())
+          .filter(Boolean);
+        setSelectedEngines(selected);
+        details.open = false;
+        if (state.query) doSearch(state.query, state.category);
+        else renderApp();
+      },
+    }, 'Apply'),
+    el('button', {
+      className: 'btn',
+      type: 'button',
+      onClick: () => {
+        setSelectedEngines([]);
+        details.open = false;
+        if (state.query) doSearch(state.query, state.category);
+        else renderApp();
+      },
+    }, 'Reset'),
+  ));
+
+  details.append(summary, body);
+  return details;
+}
+
 // ─── Search form ──────────────────────────────────────────────────────────
 function SearchForm(value, onSearch) {
   const form  = el('form', { className: 'search-form' });
@@ -283,37 +439,96 @@ function renderAiPanel() {
   if (!isActive) { panel.style.display = 'none'; return; }
   panel.style.display = 'block';
 
-  const dotsClass = state.aiStatus === 'done' ? 'done' : state.aiStatus === 'error' ? 'error' : '';
-  const statusText = state.aiStatus === 'loading' ? 'Thinking…' : state.aiStatus === 'streaming' ? 'Generating…' : state.aiStatus === 'done' ? 'AI Summary' : 'Error';
+  const isLoading = state.aiStatus === 'loading' || state.aiStatus === 'streaming';
+  const isDone    = state.aiStatus === 'done';
+  const isError   = state.aiStatus === 'error';
+  const dotsClass = isDone ? 'done' : isError ? 'error' : '';
+  const statusText = state.aiStatus === 'loading' ? 'Thinking…'
+    : state.aiStatus === 'streaming' ? 'Generating…'
+    : isDone ? 'AI Summary' : 'Error';
 
+  // Dots
   const dotsEl = el('div', { className: 'ai-dots' });
   ['violet', 'indigo', 'dim'].forEach(c => {
     dotsEl.append(el('div', { className: `ai-dot ${dotsClass || c}` }));
   });
 
-  const header = el('div', { className: 'panel-header' },
-    el('div', { className: 'panel-header-left' },
-      dotsEl,
-      el('span', { className: 'panel-label' }, statusText),
-      state.aiMeta?.model ? el('span', { style: 'font-size:10px;color:var(--text3);margin-left:6px' }, state.aiMeta.model) : null,
-    ),
-  );
+  // Latency
+  const latMs = state.aiLatencyMs;
+  const latLabel = latMs != null ? (latMs < 1000 ? `${latMs}ms` : `${(latMs / 1000).toFixed(1)}s`) : null;
 
-  const content = el('div', { className: 'ai-content' });
-  if (state.aiError) {
-    content.style.color = '#f87171';
-    content.textContent = state.aiError;
+  // Header
+  const headerLeft = el('div', { className: 'panel-header-left' },
+    dotsEl,
+    el('span', { className: 'panel-label' }, statusText),
+    state.aiMeta?.model ? el('span', { className: 'ai-model-label' }, state.aiMeta.model) : null,
+    latLabel ? el('span', { className: 'ai-latency-label' }, `· ${latLabel}`) : null,
+  );
+  const chevronPath = state.aiExpanded ? '<polyline points="18 15 12 9 6 15"/>' : '<polyline points="6 9 12 15 18 9"/>';
+  const expandBtn = el('button', { className: 'ai-expand-btn', type: 'button', title: state.aiExpanded ? 'Collapse' : 'Expand' });
+  expandBtn.innerHTML = svg(chevronPath, 14);
+  expandBtn.onclick = () => { state.aiExpanded = !state.aiExpanded; renderAiPanel(); };
+  const header = el('div', { className: 'panel-header' }, headerLeft, expandBtn);
+
+  // Progress bar
+  const showProgress = isLoading && state.aiProgress > 0;
+  const progressEl = showProgress ? el('div', { className: 'ai-progress-wrap' },
+    el('div', { className: 'ai-progress-bar', style: `width:${state.aiProgress}%` }),
+  ) : null;
+
+  // Steps
+  const showSteps = isLoading && state.aiSteps.length > 0;
+  const stepsEl = showSteps ? el('div', { className: 'ai-steps' },
+    ...state.aiSteps.slice(-4).map(s => el('div', { className: 'ai-step' }, s)),
+  ) : null;
+
+  // Content
+  const contentEl = el('div', { className: `ai-content${!state.aiExpanded && !isLoading ? ' ai-content-collapsed' : ''}` });
+  if (isError) {
+    contentEl.style.color = '#f87171';
+    contentEl.textContent = state.aiError;
   } else {
-    content.textContent = state.aiSummary;
+    contentEl.textContent = state.aiSummary;
   }
 
-  panel.innerHTML = '';
-  panel.append(header, content);
+  // Sources (shown when expanded + done)
+  const showSources = isDone && state.aiExpanded && state.aiSources.length > 0;
+  const sourcesEl = showSources ? el('div', { className: 'ai-sources' },
+    ...state.aiSources.slice(0, 8).map((src, i) => {
+      const safeSrc = sanitizeHttpUrl(src);
+      if (!safeSrc) return null;
+      let label = src;
+      try {
+        const { hostname, pathname } = new URL(safeSrc);
+        const host = hostname.replace(/^www\./, '');
+        const segs = pathname.replace(/\/$/, '').split('/').filter(Boolean).slice(0, 2);
+        label = segs.length ? `${host} › ${segs.join('/')}` : host;
+      } catch {}
+      const a = el('a', { className: 'ai-source-pill', href: safeSrc, target: '_blank', rel: 'noopener noreferrer' }, `[${i + 1}] ${label}`);
+      return a;
+    }),
+  ) : null;
+
+  // Footer: retry + expand/collapse
+  const retryBtn = el('button', { className: 'ai-retry-btn', type: 'button' }, 'Retry');
+  retryBtn.onclick = () => {
+    if (state.aiLastQuery) startAiSummary(state.aiLastQuery, state.aiLastResults || [], state.aiLastLang || 'en-US');
+  };
+  const toggleBtn = el('button', { className: 'ai-toggle-btn', type: 'button' },
+    state.aiExpanded ? 'Show less' : 'Show more',
+  );
+  toggleBtn.onclick = () => { state.aiExpanded = !state.aiExpanded; renderAiPanel(); };
+  const footer = el('div', { className: 'ai-footer' }, retryBtn, toggleBtn);
 
-  if (state.aiMeta?.fetchedCount) {
-    panel.append(el('div', { className: 'ai-meta' }, `Read ${state.aiMeta.fetchedCount} pages`));
-  }
-  if (state.aiStatus === 'streaming') {
+  panel.innerHTML = '';
+  panel.append(header);
+  if (progressEl) panel.append(progressEl);
+  if (stepsEl)    panel.append(stepsEl);
+  panel.append(contentEl);
+  if (sourcesEl)  panel.append(sourcesEl);
+  panel.append(footer);
+
+  if (state.aiStatus === 'streaming' && state.aiSummary.length < 60) {
     panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
   }
 }
@@ -526,8 +741,11 @@ function flattenSocialResults(payload) {
   ].filter((item) => item.url);
 }
 
-async function runSearchProgressive(q, lang, category) {
+async function runSearchProgressive(q, lang, category, engines = []) {
   const params = new URLSearchParams({ q, lang, cat: category });
+  if (Array.isArray(engines) && engines.length > 0) {
+    params.set('engines', engines.join(','));
+  }
   const response = await fetch(`/api/search-stream?${params.toString()}`);
   if (!response.ok) throw new Error(`HTTP ${response.status}`);
 
@@ -599,11 +817,14 @@ async function doSearch(q, category = state.category) {
   state.socialData = [];
   renderApp();
 
-  const lang = getLang();
+  const lang = getResolvedLang();
+  const engines = state.selectedEngines.slice();
 
   try {
-    const searchPromise = runSearchProgressive(q, lang, state.category).catch(async () => {
-      return api(`/api/search?q=${encodeURIComponent(q)}&lang=${lang}&cat=${encodeURIComponent(state.category)}`);
+    const searchPromise = runSearchProgressive(q, lang, state.category, engines).catch(async () => {
+      const p = new URLSearchParams({ q, lang, cat: state.category });
+      if (engines.length > 0) p.set('engines', engines.join(','));
+      return api(`/api/search?${p.toString()}`);
     });
     const promises = [
       searchPromise,
@@ -651,6 +872,15 @@ async function doSearch(q, category = state.category) {
 async function startAiSummary(query, results, lang) {
   state.aiStatus = 'loading';
   state.aiSummary = '';
+  state.aiError = null;
+  state.aiProgress = 0;
+  state.aiSteps = [];
+  state.aiSources = [];
+  state.aiStartTime = Date.now();
+  state.aiLatencyMs = null;
+  state.aiLastQuery = query;
+  state.aiLastResults = results;
+  state.aiLastLang = lang;
   renderAiPanel();
 
   try {
@@ -677,13 +907,22 @@ async function startAiSummary(query, results, lang) {
         if (!line.startsWith('data: ')) continue;
         try {
           const d = JSON.parse(line.slice(6));
-          if (d.chunk)          { state.aiSummary += d.chunk; renderAiPanel(); }
-          else if (d.error)     { state.aiStatus = 'error'; state.aiError = d.message || d.error; renderAiPanel(); }
-          else if (d.model || d.sites) { state.aiStatus = 'done'; state.aiMeta = { fetchedCount: d.fetchedCount, model: d.model }; renderAiPanel(); }
+          if (d.chunk !== undefined)    { state.aiSummary += d.chunk; renderAiPanel(); }
+          else if (d.progress !== undefined) { state.aiProgress = d.progress; renderAiPanel(); }
+          else if (d.step)              { state.aiSteps = [...state.aiSteps.slice(-3), d.step]; renderAiPanel(); }
+          else if (d.error)             { state.aiStatus = 'error'; state.aiError = d.message || d.error; renderAiPanel(); }
+          else if (d.model != null || d.sites != null) {
+            state.aiStatus = 'done';
+            state.aiProgress = 100;
+            state.aiSources = Array.isArray(d.sites) ? d.sites.map(sanitizeHttpUrl).filter(Boolean) : [];
+            state.aiMeta = { fetchedCount: d.fetchedCount, model: d.model };
+            state.aiLatencyMs = Date.now() - state.aiStartTime;
+            renderAiPanel();
+          }
         } catch { /* ignore */ }
       }
     }
-    if (state.aiStatus === 'streaming') { state.aiStatus = 'done'; renderAiPanel(); }
+    if (state.aiStatus === 'streaming') { state.aiStatus = 'done'; state.aiLatencyMs = Date.now() - state.aiStartTime; renderAiPanel(); }
   } catch (e) {
     state.aiStatus = 'error';
     state.aiError = e.message;
@@ -732,6 +971,7 @@ function renderApp() {
       type: 'button',
     }, cat.label));
   });
+  categoryBar.append(EnginePicker());
 
   const main = el('div', { className: 'main' });
 
@@ -751,6 +991,7 @@ function renderApp() {
       const meta = el('div', { className: 'results-meta' });
       meta.append(document.createTextNode(`${state.results.length} results`));
       if (state.providers.length) meta.append(document.createTextNode(' · ' + state.providers.join(', ')));
+      if (state.selectedEngines.length) meta.append(document.createTextNode(' · engines: ' + state.selectedEngines.join(', ')));
       main.append(meta);
     }
 
@@ -785,7 +1026,7 @@ function renderHome(app) {
     el('div', { className: 'home-logo' }, 'Term', el('strong', {}, 'Search')),
     el('div', { className: 'home-tagline' },
       el('span', { className: 'tagline-desktop' }, 'Personal search engine · privacy-first · local-first'),
-      el('span', { className: 'tagline-mobile' }, 'Private search · local-first'),
+      el('span', { className: 'tagline-mobile' }, 'Private local search'),
     ),
     el('div', { className: 'home-search' }, SearchForm('', (q) => { state.query = q; state.category = 'web'; doSearch(q, 'web'); })),
     el('div', { className: 'home-actions' },
@@ -857,8 +1098,13 @@ async function renderSettings() {
     presetSelect.append(opt);
   });
   const modelInput = makeInput('ai-model', ai.model, 'qwen3.5:4b');
-  modelInput.setAttribute('list', 'ai-model-list');
-  const modelDataList = el('datalist', { id: 'ai-model-list' });
+  const modelSelect = el('select', { className: 'form-input', id: 'ai-model-select' },
+    el('option', { value: '' }, 'Load models first…')
+  );
+  const modelQuickList = el('div', { id: 'ai-model-quick-list', className: 'model-quick-list' },
+    el('div', { className: 'form-hint' }, 'No models loaded.')
+  );
+  let loadedModels = [];
 
   function setModelStatus(message, type = 'info') {
     aiModelStatus.style.display = 'block';
@@ -879,9 +1125,31 @@ async function renderSettings() {
   }
 
   function populateModelList(models) {
-    modelDataList.innerHTML = '';
+    loadedModels = models.slice();
+    modelSelect.innerHTML = '';
     for (const model of models) {
-      modelDataList.append(el('option', { value: model }));
+      modelSelect.append(el('option', { value: model }, model));
+    }
+    modelQuickList.innerHTML = '';
+    models.forEach((model) => {
+      modelQuickList.append(el('button', {
+        className: 'model-chip-btn',
+        type: 'button',
+        onClick: () => {
+          const modelField = document.getElementById('ai-model');
+          if (modelField) modelField.value = model;
+          modelSelect.value = model;
+          [...modelQuickList.querySelectorAll('.model-chip-btn')].forEach((n) => n.classList.remove('active'));
+          const active = [...modelQuickList.querySelectorAll('.model-chip-btn')].find((n) => n.textContent === model);
+          if (active) active.classList.add('active');
+        },
+      }, model));
+    });
+    const current = val('ai-model');
+    if (current && models.includes(current)) {
+      modelSelect.value = current;
+      const active = [...modelQuickList.querySelectorAll('.model-chip-btn')].find((n) => n.textContent === current);
+      if (active) active.classList.add('active');
     }
   }
 
@@ -911,6 +1179,11 @@ async function renderSettings() {
       const models = Array.isArray(res.models) ? res.models : [];
       if (!models.length) {
         setModelStatus(`No models found${res.provider ? ` for ${res.provider}` : ''}.`, 'err');
+        modelSelect.innerHTML = '';
+        modelSelect.append(el('option', { value: '' }, 'No models found'));
+        modelQuickList.innerHTML = '';
+        modelQuickList.append(el('div', { className: 'form-hint' }, 'No models loaded.'));
+        loadedModels = [];
         return;
       }
       populateModelList(models);
@@ -918,6 +1191,7 @@ async function renderSettings() {
       if (!current || !models.includes(current)) {
         const modelField = document.getElementById('ai-model');
         if (modelField) modelField.value = models[0];
+        modelSelect.value = models[0];
       }
       setModelStatus(`Loaded ${models.length} model(s)${res.provider ? ` from ${res.provider}` : ''}.`, 'ok');
     } catch (e) {
@@ -1101,7 +1375,7 @@ async function renderSettings() {
         el('label', { className: 'form-label', for: 'ai-base' }, 'API Endpoint'),
         makeInput('ai-base', ai.api_base, 'http://localhost:11434/v1'),
         el('div', { className: 'form-hint' },
-          'Included presets: Chutes.ai · Anthropic · OpenAI · OpenRoute/OpenRouter · llama.cpp · Ollama · LM Studio',
+          'Included presets: LocalHost (Ollama · LM Studio · llama.cpp) · Chutes.ai TEE · Anthropic · OpenAI · OpenRoute/OpenRouter',
           el('br', {}),
           'You can also keep custom OpenAI-compatible endpoints.',
         ),
@@ -1114,7 +1388,9 @@ async function renderSettings() {
       el('div', { className: 'form-group' },
         el('label', { className: 'form-label', for: 'ai-model' }, 'Model'),
         modelInput,
-        modelDataList,
+        el('div', { className: 'form-hint', style: 'margin-top:4px' }, 'Model list (tap to open):'),
+        modelSelect,
+        modelQuickList,
         el('div', { className: 'form-row', style: 'margin-top:6px' },
           el('button', { id: 'ai-load-models-btn', className: 'btn', onClick: () => loadModels('manual'), type: 'button' }, 'Load models'),
           el('span', { className: 'form-hint', style: 'margin-top:0' }, 'Auto-loads from endpoint with current key.'),
@@ -1216,7 +1492,7 @@ async function renderSettings() {
     // Server info
     el('div', { className: 'settings-section' },
       el('h2', {}, 'Server Info'),
-      el('div', { className: 'info-row' }, el('span', { className: 'info-key' }, 'Version'),          el('span', { className: 'info-val' }, health?.version || '0.3.1')),
+      el('div', { className: 'info-row' }, el('span', { className: 'info-key' }, 'Version'),          el('span', { className: 'info-val' }, health?.version || '0.3.3')),
       el('div', { className: 'info-row' }, el('span', { className: 'info-key' }, 'Active providers'), el('span', { className: 'info-val' }, (health?.providers || []).join(', ') || 'none')),
       el('div', { className: 'info-row' }, el('span', { className: 'info-key' }, 'AI'),               el('span', { className: 'info-val' }, health?.ai_enabled ? `enabled (${health.ai_model})` : 'not configured')),
       el('div', { className: 'info-row' }, el('span', { className: 'info-key' }, 'GitHub'),           el('a', { href: 'https://github.com/DioNanos/termsearch', target: '_blank', className: 'info-val', style: 'color:var(--link)' }, 'DioNanos/termsearch')),
@@ -1248,6 +1524,27 @@ async function renderSettings() {
     setHistoryEnabled(Boolean(e.target?.checked));
     renderHistoryPreview();
   });
+  modelSelect.addEventListener('change', () => {
+    if (!modelSelect.value) return;
+    const modelField = document.getElementById('ai-model');
+    if (modelField) modelField.value = modelSelect.value;
+    [...modelQuickList.querySelectorAll('.model-chip-btn')].forEach((n) => {
+      n.classList.toggle('active', n.textContent === modelSelect.value);
+    });
+  });
+  modelSelect.addEventListener('focus', () => {
+    if (!loadedModels.length) loadModels('auto');
+  });
+  modelInput.addEventListener('input', () => {
+    const current = modelInput.value || '';
+    if ([...modelSelect.options].some((opt) => opt.value === current)) {
+      modelSelect.value = modelInput.value;
+    }
+    [...modelQuickList.querySelectorAll('.model-chip-btn')].forEach((n) => {
+      n.classList.toggle('active', n.textContent === current);
+      n.style.display = !current || n.textContent.toLowerCase().includes(current.toLowerCase()) ? 'inline-flex' : 'none';
+    });
+  });
   document.getElementById('ai-key')?.addEventListener('change', () => loadModels('auto'));
   document.getElementById('ai-base')?.addEventListener('change', () => loadModels('auto'));
   presetSelect.addEventListener('change', applyPreset);