Fixing typos

Reviewed-on: #4

.gitignore

@@ -3,6 +3,7 @@ __pycache__/
 *$py.class
 venv/
 .env
+dev/.env
 .idea/
 .vscode/
 .agent/

README.md

@@ -1,9 +1,9 @@
 <div align="center">
 
-[![Main Repo](https://img.shields.io/badge/Main%20Repo-gits.tysstech.com-blue?logo=gitea)](https://git.tysstech.com/TySS-Dev/ollama-ai-answers-searxng)
+[![Main Repo](https://img.shields.io/badge/Main%20Repo-git.tysstech.com-blue?logo=gitea)](https://git.tysstech.com/TySS-Dev/ollama-ai-answers-searxng)
 [![Mirror Repo](https://img.shields.io/badge/Mirror%20Repo-github.com-blue?logo=github)](https://github.com/TySP-Dev/ollama-ai-answers-searxng)
 
-<div align="left">
+</div>
 
 # Ollama AI Answers Plugin for SearXNG
 **Based on [ai-answers-searxng](https://github.com/cra88y/ai-answers-searxng) by [cra88y](https://github.com/cra88y)**
@@ -104,14 +104,44 @@ Configure via environment variables.
 
 ## Known Issues
 
+- [ ] Update README with all updates
+
 - [x] When asking a follow up question the previous output disappears
-- [ ] Parts of the UI are not theme aware resulting in a unpolished look when not using a dark theme
+
+- [x] Parts of the UI are not theme aware resulting in a unpolished look when not using a dark theme
+
 - [x] When SearXNG provides a info blob for a search it appears on top of the overview i.e. `Wikipedia` or `Linux` 
 
 For any issues not stated here please create an issue ticket on [Gitea](https://git.tysstech.com/TySS-Dev/ollama-ai-answers-searxng/issues) or [GitHub](https://github.com/TySP-Dev/ollama-ai-answers-searxng/issues) and add the `bug` tag.
 
 ## Roadmap
 
+### Dev Server
+
+- [x] Stream viewer — show tokens arriving in real time in the debug panel as they come out of Valkey, so you can see exactly what the LLM is generating chunk by chunk
+
+- [x] TF-IDF score visualizer — show a table of which URLs were fetched, their scores, and which chunks were selected for context
+
+- [ ] Intent detection display — show what intent was detected and which system prompt was used for each query
+
+- [ ] Saved queries — save/load test queries so you can quickly re-run the same set of searches after making changes to the plugin
+
+- [ ] A/B model comparison — run the same query against two different models simultaneously and show both responses side by side
+
+- [ ] Response time breakdown — show how long each phase took: SearXNG fetch, page fetching, TF-IDF scoring, LLM stream start, stream complete
+
+- [ ] Context inspector — show the full assembled context string that gets sent to the LLM, so you can see exactly what it's working with
+
+- [ ] Prompt viewer — show the full system prompt + user prompt that gets sent to Ollama
+
+- [ ] Export button — copy the full context + prompt + response as a JSON blob for bug reports
+
+- [ ] Per-intent system prompt editor — edit the system prompts for each intent type live without restarting
+
+- [ ] Token counter — show estimated token count of the context being sent
+
+### Plugin
+
 - [ ] Working on feature plans
 
 ## Architecture

dev/.env.example

@@ -0,0 +1,39 @@
+# AI Answers Plugin — Dev Server Config
+# Copy this to .env and fill in your values
+# .env is gitignored and never committed
+
+# Ollama endpoint (required)
+LLM_URL=http://localhost:11434/v1/chat/completions
+
+# Default model
+LLM_MODEL=qwen3.5:9b
+
+# Max response tokens
+LLM_MAX_TOKENS=200
+
+# Response temperature (0.0 - 2.0)
+LLM_TEMPERATURE=0.2
+
+# Bearer token for authenticated LLM endpoints
+# Leave empty if no Bearer token is needed for your server
+LLM_API_KEY=
+
+# Live SearXNG instance for real search results
+# Leave empty to use mock results
+SEARXNG_URL=
+
+# Valkey for streaming (required)
+# Start with: docker run -d --name dev-valkey -p 6379:6379 valkey/valkey:9-alpine
+VALKEY_HOST=localhost
+VALKEY_PORT=6379
+
+# Dev server host and port
+DEV_HOST=127.0.0.1
+DEV_PORT=5000
+
+# Plugin settings
+LLM_INTERACTIVE=true
+LLM_QUESTION_MARK_REQUIRED=false
+LLM_TABS=general,science,it,news
+LLM_CONTEXT_DEEP_COUNT=5
+LLM_CONTEXT_SHALLOW_COUNT=15

ollama_answers.py

@@ -1,12 +1,11 @@
-import json, os, logging, base64, time, hashlib, re, http.client, ssl, concurrent.futures, threading, math
+import json, os, logging, base64, typing, time, hashlib, re, http.client, ssl, concurrent.futures, threading, math
 from collections import Counter
 from urllib.parse import urlparse
-from searx import network
 try:
     from searx.network import get_network
 except ImportError:
     get_network = None
-from flask import Response, request, abort, jsonify
+from flask import request, abort, jsonify
 from searx.plugins import Plugin, PluginInfo
 from searx.result_types import EngineResults
 from searx import settings
@@ -24,7 +23,6 @@ except ImportError:
     logger.warning("AI Answers: valkey package not found. Streaming via Valkey unavailable.")
 
 TOKEN_EXPIRY_SEC = 3600
-STREAM_CHUNK_SIZE = 512
 STREAM_TIMEOUT_SEC = 60
 CONV_TTL = 1800
 
@@ -276,17 +274,17 @@ INTERACTIVE_CSS = '''
                             width: 32px;
                             height: 32px;
                             padding: 0;
-                            border: none;
+                            border: 1px solid var(--color-result-border, rgba(0,0,0,0.1));
                             border-radius: 4px;
-                            background: var(--color-sidebar-bg, #424247);
-                            color: var(--color-search-url, #bbb);
+                            background: var(--color-base-background-hover, rgba(0,0,0,0.06));
+                            color: var(--color-base-font, inherit);
                             cursor: pointer;
                             vertical-align: middle;
                             line-height: 1.4;
                         }
                         .sxng-btn:hover {
-                            background: var(--color-search-url, #303033);
-                            color: var(--color-sidebar-bg, #bbb);
+                            background: var(--color-result-border, rgba(0,0,0,0.15));
+                            color: var(--color-base-font, inherit);
                         }
                         .sxng-btn svg { width: 18px; height: 18px; fill: currentColor; }
                         .sxng-input-wrapper {
@@ -300,9 +298,9 @@ INTERACTIVE_CSS = '''
                         .sxng-input {
                             width: 100%;
                             height: -webkit-fill-available;
-                            background: var(--color-sidebar-bg, #424247);
-                            border: none;
-                            color: var(--color-base-font, #cdd6f4);
+                            background: var(--color-base-background-hover, rgba(0,0,0,0.06));
+                            border: 1px solid var(--color-result-border, rgba(0,0,0,0.15));
+                            color: var(--color-base-font, inherit);
                             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                             font-size: 0.78em;
                             padding: 3px 8px;
@@ -311,7 +309,7 @@ INTERACTIVE_CSS = '''
                             vertical-align: middle;
                         }
                         .sxng-input:focus { outline: none; }
-                        .sxng-input::placeholder { color: var(--color-base-font, #333); opacity: 0.35; }
+                        .sxng-input::placeholder { color: var(--color-base-font, inherit); opacity: 0.4; }
                         .sxng-input-line {
                             position: absolute;
                             bottom: 0;
@@ -344,14 +342,15 @@ INTERACTIVE_CSS = '''
                             appearance: none;
                             -webkit-appearance: none;
                             background: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%20fill%3D%22%23aaa%22%3E%0A%3Cpolygon%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") calc(100% + 2rem) / 1rem no-repeat content-box border-box;
-                            background-color: var(--color-toolkit-select-background, #424247);
+                            background-color: var(--color-base-background-hover, rgba(0,0,0,0.06));
                             text-overflow: ellipsis;
-                            border-width: 0 2rem 0 0;
-                            border-color: transparent;
+                            border: 0px solid var(--color-result-border, rgba(0,0,0,0.1));
+                            border-right-width: 2rem;
+                            border-right-color: transparent;
                             border-radius: 5px;
                             outline: none;
                             height: 25px;
-                            color: var(--color-search-url, #bbb);
+                            color: var(--color-base-font, inherit);
                             font-size: .9rem;
                             padding: 1px 10px 1px 10px !important;
                             margin: 0;
@@ -361,8 +360,7 @@ INTERACTIVE_CSS = '''
                             vertical-align: middle;
                         }
                         .sxng-model-select:hover {
-                            background-color: var(--color-result-hover, #303033);
-                            color: var(--color-search-url, #bbb);
+                            background-color: var(--color-result-border, rgba(0,0,0,0.15));
                         }
                         .sxng-reasoning {
                             margin: 0.5rem 0; padding: 0.5rem;
@@ -385,7 +383,8 @@ INTERACTIVE_CSS = '''
                             font-size: 0.75em;
                             color: var(--color-result-link, #5e81ac);
                             text-decoration: none;
-                            opacity: 0.75;
+                            opacity: 1;
+                            font-weight: 600;
                         }
                         .sxng-citation-item a:hover {
                             opacity: 1;
@@ -395,18 +394,18 @@ INTERACTIVE_CSS = '''
                             margin-bottom: 0.75rem;
                             padding: 0.5rem;
                             border-left: 2px solid var(--color-result-link, #5e81ac);
-                            opacity: 0.6;
+                            opacity: 0.85;
                             font-size: 0.85em;
                         }
                         .sxng-prior-history summary {
                             cursor: pointer;
                             color: var(--color-result-link, #5e81ac);
-                            font-weight: 600;
+                            font-weight: 700;
                         }
                         .sxng-prior-answer {
                             margin: 0.25rem 0;
                             padding-left: 0.5rem;
-                            color: var(--color-base-font, #cdd6f4);
+                            color: var(--color-base-font, inherit);
                         }
                         .sxng-md-content {
                             line-height: 1.6;
@@ -669,7 +668,6 @@ INTERACTIVE_JS = r'''
                                         }
                                     });
                                     box.style.display = 'block';
-                                    if(wrapper) wrapper.style.display = '';
                                     if(footer && is_interactive) footer.style.display = 'flex';
                                     restored = true;
                                 }
@@ -854,7 +852,6 @@ FRONTEND_JS_TEMPLATE = r"""
     const conversation = {
         originalQuery: q_init,
         originalContext: new TextDecoder().decode(Uint8Array.from(atob(b64_init), c => c.charCodeAt(0))),
-        originalSources: [...urls],
         turns: [{role: 'user', content: q_init, ts: Date.now()}]
     };
     const box = document.getElementById('sxng-stream-box');
@@ -888,10 +885,6 @@ FRONTEND_JS_TEMPLATE = r"""
                 });
             });
 
-            // Also apply to document root so our CSS vars cascade
-            Object.entries(theme).forEach(([k, v]) => {
-                if (v) box.style.setProperty(k, v);
-            });
         } catch(e) {}
     })();
 
@@ -904,11 +897,24 @@ FRONTEND_JS_TEMPLATE = r"""
         // Create our own container
         const aiContainer = document.createElement('div');
         aiContainer.id = 'ai-answers';
+        const rootStyle = getComputedStyle(document.documentElement);
+        const getVar = (v, fb) => rootStyle.getPropertyValue(v).trim() || fb;
+        const bg = getVar('--color-answer-background', '');
+        const answerFont = getVar('--color-answer-font', '');
+        // Detect light mode by checking if answer font is dark
+        const isLight = answerFont && (answerFont.includes('0,0,0') ||
+            answerFont.includes('#000') || answerFont.includes('#333') ||
+            answerFont.includes('#444') || answerFont.includes('rgb(0') ||
+            answerFont.includes('rgb(3') || answerFont.includes('rgb(4') ||
+            answerFont.includes('rgb(5') || answerFont.includes('rgb(6'));
+        const containerBg = isLight
+            ? 'rgba(0,0,0,0.06)'
+            : (bg || 'var(--color-answer-background, #313338)');
         aiContainer.style.cssText = [
-            'background: var(--color-answer-background)',
+            `background: ${containerBg}`,
             'padding: 1rem',
             'margin: 0 0 1rem 0',
-            'color: var(--color-answer-font)',
+            `color: ${getVar('--color-answer-font', 'var(--color-answer-font, #fff)')}`,
             'border-radius: 8px',
             'box-sizing: border-box',
             'width: 100%'
@@ -1340,8 +1346,6 @@ INTENT_CONFIGS = {
     },
 }
 
-
-import typing
 if typing.TYPE_CHECKING:
     from searx.search import SearchWithPlugins
     from searx.extended_types import SXNG_Request
@@ -1721,6 +1725,16 @@ class SXNGPlugin(Plugin):
 
             job_id = hashlib.sha256(f"{time.time()}{q}".encode()).hexdigest()[:16]
 
+            # Persist intent for dev UI
+            logger.warning(f"INTENT BEFORE PERSIST: {repr(intent)}")
+            logger.warning(f"JOB_ID BEFORE PERSIST: {repr(job_id)}")
+            try:
+                vk = _get_valkey()
+                vk.setex(f"ai:job:{job_id}:intent", 3600, intent)
+                logger.debug(f"{PLUGIN_NAME}: persisted intent '{intent}' for job {job_id}")
+            except Exception:
+                logger.exception(f"{PLUGIN_NAME}: failed to persist intent")
+
             payload_dict = {
                 "model": effective_model,
                 "messages": [
@@ -2034,6 +2048,17 @@ class SXNGPlugin(Plugin):
             detected_intent = _detect_intent(q_clean)
             js_intent = safe_json(detected_intent)
 
+            # Persist intent for dev tooling / UI
+            try:
+                vk = _get_valkey()
+                vk.setex(
+                    f"ai:job:{job_id}:intent",
+                    1800,
+                    detected_intent
+                )
+            except Exception as e:
+                logger.debug(f"{PLUGIN_NAME}: failed to persist intent: {e}")
+
             b64_context = base64.b64encode(context_str.encode('utf-8')).decode('utf-8')
             total_context_count = self.context_deep_count + self.context_shallow_count
 
@@ -2134,7 +2159,7 @@ class SXNGPlugin(Plugin):
                         </span>
                         <select id="sxng-model-select" class="sxng-model-select" title="Select model"></select>
                     </div>
-                    <p id="sxng-stream-data" style="white-space: pre-wrap; color: var(--color-result-description); font-size: 0.95rem; margin:0;"><span class="sxng-cursor"></span></p>
+                    <p id="sxng-stream-data" style="white-space: pre-wrap; color: var(--color-answer-font, var(--color-result-description, inherit)); font-size: 0.95rem; margin:0;"><span class="sxng-cursor"></span></p>
                     {interactive_html}
                     <script>
                     {js_code}

requirements.txt

@@ -1,3 +1,5 @@
 flask
 flask-babel
 certifi
+python-dotenv
+valkey

tests/dev.py

@@ -1,346 +0,0 @@
-import sys
-import os
-sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
-import logging
-from types import ModuleType
-from flask import Flask, request, redirect
-
-logging.basicConfig(level=logging.INFO, format='%(levelname)s: %(message)s')
-os.environ.setdefault('LLM_URL', 'http://localhost:11434/v1/chat/completions')
-
-# SearXNG module mocks
-searx = ModuleType("searx")
-searx_plugins = ModuleType("searx.plugins")
-searx_results = ModuleType("searx.result_types")
-
-class MockPlugin:
-    def __init__(self, cfg):
-        self.active = getattr(cfg, 'active', True)
-
-class MockPluginInfo:
-    def __init__(self, **kwargs):
-        self.meta = kwargs
-
-class MockEngineResults:
-    def __init__(self):
-        self.types = ModuleType("types")
-        self.types.Answer = lambda *args, **kwargs: kwargs.get('answer', args[0] if args else "")
-        self._results = []
-    
-    def add(self, res):
-        self._results.append(res)
-
-searx_plugins.Plugin = MockPlugin
-searx_plugins.PluginInfo = MockPluginInfo
-searx_results.EngineResults = MockEngineResults
-
-searx.settings = {'server': {'secret_key': 'demo-secret'}}
-searx.network = ModuleType("searx.network")
-
-sys.modules["searx"] = searx
-sys.modules["searx.plugins"] = searx_plugins
-sys.modules["searx.result_types"] = searx_results
-
-# Network module mock
-searx_network = ModuleType("searx.network")
-def mock_network_call(method, url, **kwargs):
-    import http.client, ssl, json
-    from urllib.parse import urlparse
-    
-    parsed = urlparse(url)
-    port = parsed.port or (443 if parsed.scheme=='https' else 80)
-    target = f"{parsed.hostname}:{port}"
-    
-    if parsed.scheme == 'https':
-        conn = http.client.HTTPSConnection(target, timeout=30, context=ssl.create_default_context())
-    else:
-        conn = http.client.HTTPConnection(target, timeout=30)
-    
-    headers = kwargs.get('headers', {})
-    body = None
-    if kwargs.get('json'):
-        body = json.dumps(kwargs['json'])
-    elif kwargs.get('data'):
-        body = kwargs['data']
-
-    path = parsed.path
-    if parsed.query:
-        path += f"?{parsed.query}"
-    
-    if kwargs.get('params'):
-        from urllib.parse import urlencode
-        query_str = urlencode(kwargs['params'])
-        if '?' in path:
-            path += f"&{query_str}"
-        else:
-            path += f"?{query_str}"
-
-    conn.request(method, path, body=body, headers=headers)
-    return conn.getresponse()
-
-def mock_stream(method, url, **kwargs):
-    res = mock_network_call(method, url, **kwargs)
-    
-    class MockResponse:
-        def __init__(self, r):
-            self.status_code = r.status
-            self.text = "Mock Response" # Stub
-            self._r = r
-    
-    def generator():
-        while True:
-            chunk = res.read(128)
-            if not chunk: break
-            yield chunk
-
-    return MockResponse(res), generator()
-
-def mock_get(url, **kwargs):
-    import json
-    res = mock_network_call('GET', url, **kwargs)
-    
-    class MockResponse:
-        def __init__(self, r):
-            self.status_code = r.status
-            self._content = r.read()
-            self.text = self._content.decode('utf-8')
-        
-        def json(self):
-            return json.loads(self.text)
-            
-    return MockResponse(res)
-
-searx_network.stream = mock_stream
-searx_network.get = mock_get
-sys.modules["searx.network"] = searx_network
-
-from ollama_answers import SXNGPlugin
-from flask_babel import Babel
-
-app = Flask(__name__)
-babel = Babel(app)
-
-class MockConfig:
-    active = True
-
-plugin = SXNGPlugin(MockConfig())
-plugin.init(app)
-
-@app.route("/config", methods=["POST"])
-def update_config():
-    url = request.form.get("url", "").strip()
-    bearer = request.form.get("bearer", "").strip()
-    model = request.form.get("model", "").strip()
-    query = request.form.get("q", "")
-    if url:
-        plugin.endpoint_url = url
-    plugin.api_key = bearer if bearer else "ollama"
-    if model:
-        plugin.model = model
-    redirect_q = f"?q={query}" if query else ""
-    return redirect(f"/{redirect_q}")
-
-
-@app.route("/search")
-def mock_search():
-    query = request.args.get("q", "")
-    format_type = request.args.get("format", "html")
-    
-    if format_type != "json":
-        return "Demo only supports JSON format", 400
-    
-    results = [
-        {"title": f"Result 1 for: {query}", "content": f"This is simulated content about {query}. It contains relevant information.", "url": f"https://example.com/1/{query.replace(' ', '-')}", "publishedDate": "2026-01-18"},
-        {"title": f"Result 2 for: {query}", "content": f"Additional information regarding {query}. More context and details.", "url": f"https://example.com/2/{query.replace(' ', '-')}", "publishedDate": "2026-01-17"},
-        {"title": f"Result 3 for: {query}", "content": f"Further reading on {query}. Expert analysis.", "url": f"https://example.com/3/{query.replace(' ', '-')}", "publishedDate": "2026-01-16"},
-    ]
-    
-    return {
-        "results": results,
-        "infoboxes": [],
-        "answers": [],
-        "suggestions": [f"{query} explained", f"{query} tutorial"]
-    }
-
-@app.route("/")
-def index():
-    query = request.args.get("q", "why is the sky blue")
-    
-    class MockSearchQuery:
-        pageno = 1
-        lang = 'en'
-        categories = ['general']
-    MockSearchQuery.query = query
-    
-    class MockSearch:
-        search_query = MockSearchQuery()
-        class MockResultContainer:
-            def __init__(self):
-                self.answers = set()
-
-            def get_ordered_results(self):
-                base_results = [
-                    {"title": "Wikipedia", "content": "The sky appears blue due to Rayleigh scattering of sunlight. When sunlight enters the atmosphere, it collides with gas molecules and scatters in all directions. Blue light scatters more than other colors because it travels in shorter waves.", "url": "https://en.wikipedia.org/wiki/Rayleigh_scattering", "publishedDate": "2026-01-15"},
-                    {"title": "NASA Science", "content": "Shorter blue wavelengths scatter more than longer red wavelengths. This phenomenon, discovered by Lord Rayleigh in the 1870s, explains why we see a blue sky during the day.", "url": "https://science.nasa.gov/blue-sky", "publishedDate": "2026-01-10"},
-                    {"title": "Physics Today", "content": "The atmosphere acts as a filter, scattering blue light in all directions while letting other colors pass through more directly.", "url": "https://physicstoday.org/atmosphere", "publishedDate": "2026-01-01"},
-                    {"title": "Scientific American", "content": "At sunset, light travels through more atmosphere, scattering away the blue and leaving reds and oranges.", "url": "https://scientificamerican.com/sunset", "publishedDate": "2025-12-20"},
-                    {"title": "National Geographic", "content": "Ocean color also results from light scattering and absorption by water molecules.", "url": "https://nationalgeographic.com/ocean-blue", "publishedDate": "2025-12-15"},
-                ]
-                broad_results = [
-                    {"title": "MIT OpenCourseWare: Atmospheric Physics", "content": "Course materials.", "url": "https://ocw.mit.edu/physics"},
-                    {"title": "NOAA: Understanding the Atmosphere", "content": "Educational resource.", "url": "https://noaa.gov/atmosphere"},
-                    {"title": "BBC Science: Why is the sky blue?", "content": "Explainer article.", "url": "https://bbc.com/science/sky"},
-                    {"title": "Khan Academy: Light and Color", "content": "Video lesson.", "url": "https://khanacademy.org/light"},
-                    {"title": "HowStuffWorks: Rayleigh Scattering", "content": "Detailed explanation.", "url": "https://howstuffworks.com/rayleigh"},
-                    {"title": "Physics Stack Exchange: Sky color discussion", "content": "Q&A thread.", "url": "https://physics.stackexchange.com/sky"},
-                    {"title": "Quora: Atmospheric optics explained", "content": "Community answers.", "url": "https://quora.com/atmosphere"},
-                ]
-                if 'quantum' in query.lower():
-                    return [
-                        {"title": "IBM Quantum", "content": "Quantum computers rely on qubits, which can represent 0, 1, or both via superposition. They solve complex problems faster.", "url": "https://www.ibm.com/quantum", "publishedDate": "2026-01-15"},
-                        {"title": "Nature Physics", "content": "Entanglement allows qubits to be correlated instantly across distances. This is key for quantum cryptography and teleportation.", "url": "https://nature.com/articles/quantum", "publishedDate": "2026-01-10"},
-                        {"title": "Wikipedia", "content": "Quantum computing uses quantum mechanics. Major applications include drug discovery and materials science.", "url": "https://en.wikipedia.org/wiki/Quantum_computing", "publishedDate": "2025-12-01"}
-                    ] + broad_results
-                return base_results + broad_results
-        result_container = MockResultContainer()
-
-    search = MockSearch()
-    plugin.post_search(None, search)
-    
-    injection_html = ""
-    if search.result_container.answers:
-        injection_html = list(search.result_container.answers)[0]
-    
-    bearer_display = plugin.api_key if plugin.api_key != "ollama" else ""
-    return f"""
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title>AI Answers Demo</title>
-        <style>
-            body {{
-                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-                padding: 2rem;
-                max-width: 800px;
-                margin: 0 auto;
-                background: #2e3440;
-                color: #eceff4;
-            }}
-            :root {{
-                --color-result-border: #3b4252;
-                --color-result-description: #d8dee9;
-                --color-base-font: #88c0d0;
-                --color-result-link: #81a1c1;
-            }}
-            .meta {{ color: #81a1c1; font-size: 0.9rem; }}
-            hr {{ border-color: #4c566a; }}
-            a {{ color: #88c0d0; }}
-            .config-panel {{
-                background: #3b4252;
-                border-radius: 6px;
-                padding: 1rem 1.25rem;
-                margin-bottom: 1.25rem;
-            }}
-            .config-panel summary {{
-                cursor: pointer;
-                font-size: 0.85rem;
-                color: #81a1c1;
-                user-select: none;
-            }}
-            .config-panel summary:hover {{ color: #88c0d0; }}
-            .config-row {{
-                display: flex;
-                flex-direction: column;
-                gap: 0.5rem;
-                margin-top: 0.75rem;
-            }}
-            .config-row label {{
-                font-size: 0.8rem;
-                color: #81a1c1;
-            }}
-            .config-row input {{
-                background: #2e3440;
-                border: 1px solid #4c566a;
-                border-radius: 4px;
-                color: #eceff4;
-                font-size: 0.85rem;
-                padding: 0.4rem 0.6rem;
-                width: 100%;
-                box-sizing: border-box;
-            }}
-            .config-row input:focus {{ outline: none; border-color: #81a1c1; }}
-            .config-btn {{
-                margin-top: 0.75rem;
-                background: #4c566a;
-                border: none;
-                border-radius: 4px;
-                color: #eceff4;
-                cursor: pointer;
-                font-size: 0.85rem;
-                padding: 0.4rem 1rem;
-            }}
-            .config-btn:hover {{ background: #5e81ac; }}
-            .search-row {{
-                display: flex;
-                gap: 0.5rem;
-                margin-bottom: 1.25rem;
-            }}
-            .search-row input {{
-                flex: 1;
-                background: #3b4252;
-                border: 1px solid #4c566a;
-                border-radius: 4px;
-                color: #eceff4;
-                font-size: 0.95rem;
-                padding: 0.45rem 0.75rem;
-            }}
-            .search-row input:focus {{ outline: none; border-color: #81a1c1; }}
-            .search-row button {{
-                background: #5e81ac;
-                border: none;
-                border-radius: 4px;
-                color: #eceff4;
-                cursor: pointer;
-                font-size: 0.9rem;
-                padding: 0.45rem 1rem;
-            }}
-            .search-row button:hover {{ background: #81a1c1; }}
-        </style>
-    </head>
-    <body>
-        <details class="config-panel" {'open' if not bearer_display and 'localhost' in plugin.endpoint_url else ''}>
-            <summary>&#9881; Ollama Configuration</summary>
-            <form method="POST" action="/config">
-                <input type="hidden" name="q" value="{query}">
-                <div class="config-row">
-                    <label>Endpoint URL</label>
-                    <input type="text" name="url" value="{plugin.endpoint_url}" placeholder="http://localhost:11434/v1/chat/completions">
-                </div>
-                <div class="config-row">
-                    <label>Bearer Token <span style="opacity:0.5;">(optional)</span></label>
-                    <input type="text" name="bearer" value="{bearer_display}" placeholder="Leave empty if not required">
-                </div>
-                <button type="submit" class="config-btn">Apply</button>
-            </form>
-        </details>
-
-        <form class="search-row" method="GET" action="/">
-            <input type="text" name="q" value="{query}" placeholder="Ask something...">
-            <button type="submit">Search</button>
-        </form>
-
-        <p class="meta">Model: <strong>{plugin.model}</strong></p>
-        <hr>
-        {injection_html if injection_html else '<p style="color:#f66;">No response — check your Ollama endpoint and token above.</p>'}
-    </body>
-    </html>
-    """
-
-if __name__ == "__main__":
-    print("AI Answers - Demo\n")
-    print(f"  Endpoint: {plugin.endpoint_url}")
-    print(f"  Model:    {plugin.model or 'N/A'}")
-    print(f"  Mode:     {'interactive' if plugin.interactive else 'simple'}")
-    print(f"\n  http://localhost:5000/?q=why+is+the+sky+blue\n")
-    app.run(debug=False, port=5000)