feat: chat interface upgrades

static/app.js

@@ -1,387 +1,346 @@
+/* ============================================================
+   Web3 Research Co-Pilot — app.js
+   Optimised streaming chat client with inline tool activity
+   ============================================================ */
+// ── State ────────────────────────────────────────────────────
 let chatHistory = [];
-let messageCount = 0;
-let useGemini = false; // Track current LLM choice
-
-// Initialize Gemini toggle
-document.addEventListener('DOMContentLoaded', function() {
-    const geminiToggle = document.getElementById('geminiToggle');
-    const toggleLabel = document.querySelector('.toggle-label');
-    
-    // Load saved preference
-    useGemini = localStorage.getItem('useGemini') === 'true';
-    geminiToggle.checked = useGemini;
-    updateToggleLabel();
-    
-    // Handle toggle changes
-    geminiToggle.addEventListener('change', function() {
-        useGemini = this.checked;
-        localStorage.setItem('useGemini', useGemini.toString());
-        updateToggleLabel();
-        console.log(`Switched to ${useGemini ? 'Gemini' : 'Ollama'} mode`);
-        
-        // Show confirmation
-        showStatus(`Switched to ${useGemini ? 'Gemini (Cloud AI)' : 'Ollama (Local AI)'} mode`, 'info');
-        
-        // Refresh status to reflect changes
-        checkStatus();
-    });
+let useGemini   = false;
+// ── Tool icon map ─────────────────────────────────────────────
+const TOOL_ICONS = {
+    coingecko:     'fa-coins',
+    defillama:     'fa-droplet',
+    cryptocompare: 'fa-chart-bar',
+    etherscan:     'fa-magnifying-glass',
+    chart:         'fa-chart-line',
+    price:         'fa-dollar-sign',
+    market:        'fa-chart-area',
+    gas:           'fa-gas-pump',
+    whale:         'fa-fish',
+    'default':     'fa-gear',
+};
+// ── Marked.js setup ───────────────────────────────────────────
+try {
+    marked.use({ breaks: true, gfm: true });
+} catch(e) { /* older marked version — ignore */ }
+// ── Init ─────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+    initTheme();
+    initModel();
+    initTextarea();
+    checkStatus();
+    document.getElementById('queryInput').focus();
 });
-
-function updateToggleLabel() {
-    const toggleLabel = document.querySelector('.toggle-label');
-    if (toggleLabel) {
-        toggleLabel.textContent = `AI Model: ${useGemini ? 'Gemini' : 'Ollama'}`;
-    }
+// ── Textarea auto-grow ───────────────────────────────────────
+function initTextarea() {
+    const ta = document.getElementById('queryInput');
+    ta.addEventListener('input', () => {
+        ta.style.height = 'auto';
+        ta.style.height = Math.min(ta.scrollHeight, 130) + 'px';
+        document.getElementById('charCount').textContent =
+            `${ta.value.length} / 1000`;
+    });
+    ta.addEventListener('keydown', e => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendQuery();
+        }
+    });
 }
-
+// ── Model selection ──────────────────────────────────────────
+function setModel(model) {
+    useGemini = model === 'gemini';
+    localStorage.setItem('useGemini', useGemini);
+    document.getElementById('btnOllama').classList.toggle('active', !useGemini);
+    document.getElementById('btnGemini').classList.toggle('active', useGemini);
+    showToast(`Switched to ${useGemini ? 'Gemini (Cloud)' : 'Ollama (Local)'}`, 'info');
+    checkStatus();
+}
+function initModel() {
+    useGemini = localStorage.getItem('useGemini') === 'true';
+    document.getElementById('btnOllama').classList.toggle('active', !useGemini);
+    document.getElementById('btnGemini').classList.toggle('active', useGemini);
+}
+// ── Status check ─────────────────────────────────────────────
 async function checkStatus() {
+    const badge = document.getElementById('statusBadge');
+    const text  = document.getElementById('statusBadgeText');
     try {
-        const response = await fetch('/status');
-        const status = await response.json();
-        
-        const statusDiv = document.getElementById('status');
-        
-        if (status.enabled && status.gemini_configured) {
-            statusDiv.className = 'status online';
-            statusDiv.innerHTML = '<span>Research systems online</span>' +
-                '<div style="margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.8;">' +
-                'Tools: ' + status.tools_available.join(' • ') + '</div>';
+        const res  = await fetch('/status');
+        const data = await res.json();
+        if (data.enabled) {
+            badge.className = 'status-badge online';
+            text.textContent = 'Online';
         } else {
-            statusDiv.className = 'status offline';
-            statusDiv.innerHTML = '<span>Limited mode - Configure GEMINI_API_KEY for full functionality</span>' +
-                '<div style="margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.8;">' +
-                'Available: ' + status.tools_available.join(' • ') + '</div>';
+            badge.className = 'status-badge offline';
+            text.textContent = 'Limited';
         }
-    } catch (error) {
-        const statusDiv = document.getElementById('status');
-        statusDiv.className = 'status offline';
-        statusDiv.innerHTML = '<span>Connection error</span>';
+    } catch {
+        badge.className = 'status-badge offline';
+        text.textContent = 'Offline';
     }
 }
-
+// ── Send query ───────────────────────────────────────────────
 async function sendQuery() {
-    const input = document.getElementById('queryInput');
+    const ta      = document.getElementById('queryInput');
     const sendBtn = document.getElementById('sendBtn');
-    const loadingIndicator = document.getElementById('loadingIndicator');
-    const statusIndicator = document.getElementById('statusIndicator');
-    const statusText = document.getElementById('statusText');
-    const query = input.value.trim();
-
-    if (!query) {
-        showStatus('Please enter a research query', 'warning');
-        return;
-    }
-
-    console.log('Sending research query');
+    const query   = ta.value.trim();
+    if (!query) return;
     addMessage('user', query);
-    input.value = '';
-
-    // Update UI states
+    ta.value = '';
+    ta.style.height = 'auto';
+    document.getElementById('charCount').textContent = '0 / 1000';
+    const thinkingId = showThinking();
     sendBtn.disabled = true;
-    sendBtn.innerHTML = '<span class="loading">Processing</span>';
-    loadingIndicator.classList.add('active');
-    showStatus('Initializing research...', 'processing');
-
+    sendBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>';
     try {
-        console.log('Starting streaming API request...');
-        const requestStart = Date.now();
-        
-        // Create an AbortController for manual timeout control
         const controller = new AbortController();
-        const timeoutId = setTimeout(() => {
-            console.log('Manual timeout after 5 minutes');
-            controller.abort();
-        }, 300000); // 5 minute timeout instead of default browser timeout
-        
-        // Use fetch with streaming for POST requests with body
-        const response = await fetch('/query/stream', {
+        const timer = setTimeout(() => controller.abort(), 300000);
+        const res = await fetch('/query/stream', {
             method: 'POST',
-            headers: { 
-                'Content-Type': 'application/json',
-                'Accept': 'text/event-stream',
-                'Cache-Control': 'no-cache'
-            },
-            body: JSON.stringify({ 
-                query, 
-                chat_history: chatHistory, 
-                use_gemini: useGemini 
-            }),
+            headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
+            body: JSON.stringify({ query, chat_history: chatHistory, use_gemini: useGemini }),
             signal: controller.signal,
-            // Disable browser's default timeout behavior
-            keepalive: true
         });
-
-        // Clear the timeout since we got a response
-        clearTimeout(timeoutId);
-
-        if (!response.ok) {
-            throw new Error('Request failed with status ' + response.status);
-        }
-
-        const reader = response.body.getReader();
+        clearTimeout(timer);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const reader  = res.body.getReader();
         const decoder = new TextDecoder();
-        let buffer = '';
-
-        while (true) {
+        let buffer    = '';
+        outer: while (true) {
             const { done, value } = await reader.read();
             if (done) break;
-
             buffer += decoder.decode(value, { stream: true });
             const lines = buffer.split('\n');
-            buffer = lines.pop(); // Keep incomplete line in buffer
-
+            buffer = lines.pop(); // keep incomplete line
             for (const line of lines) {
-                if (line.startsWith('data: ')) {
-                    try {
-                        const data = JSON.parse(line.substring(6));
-                        
-                        if (data.type === 'status') {
-                            showStatus(data.message, 'processing');
-                            updateProgress(data.progress);
-                            // Also update the loading text
-                            const loadingText = document.getElementById('loadingText');
-                            if (loadingText) {
-                                loadingText.textContent = data.message;
-                            }
-                            console.log('Progress: ' + data.progress + '% - ' + data.message);
-                        } else if (data.type === 'tools') {
-                            showStatus(data.message, 'processing');
-                            // Update loading text for tools
-                            const loadingText = document.getElementById('loadingText');
-                            if (loadingText) {
-                                loadingText.textContent = data.message;
-                            }
-                            console.log('Tools: ' + data.message);
-                        } else if (data.type === 'result') {
-                            const result = data.data;
-                            const requestTime = Date.now() - requestStart;
-                            console.log('Request completed in ' + requestTime + 'ms');
-                            
-                            if (result.success) {
-                                addMessage('assistant', result.response, result.sources, result.visualizations);
-                                showStatus('Research complete', 'success');
-                                console.log('Analysis completed successfully');
-                            } else {
-                                console.log('Analysis request failed');
-                                addMessage('assistant', result.response || 'Analysis temporarily unavailable. Please try again.', [], []);
-                                showStatus('Request failed', 'error');
-                            }
-                        } else if (data.type === 'complete') {
-                            break;
-                        } else if (data.type === 'error') {
-                            throw new Error(data.message);
-                        }
-                    } catch (parseError) {
-                        console.error('Parse error:', parseError);
-                    }
-                }
+                if (!line.startsWith('data: ')) continue;
+                try {
+                    const evt = JSON.parse(line.slice(6));
+                    if (handleStreamEvent(evt, thinkingId) === 'done') break outer;
+                } catch { /* skip malformed JSON */ }
             }
         }
-
-    } catch (error) {
-        console.error('Streaming request error:', error);
-        
-        // More specific error handling
-        if (error.name === 'AbortError') {
-            addMessage('assistant', 'Request timed out after 5 minutes. Ollama may be processing a complex query. Please try a simpler question or wait and try again.');
-            showStatus('Request timed out', 'error');
-        } else if (error.message.includes('Failed to fetch') || error.message.includes('network error')) {
-            addMessage('assistant', 'Network connection error. Please check your internet connection and try again.');
-            showStatus('Connection error', 'error');
-        } else if (error.message.includes('ERR_HTTP2_PROTOCOL_ERROR')) {
-            addMessage('assistant', 'Ollama is still processing your request in the background. Please wait a moment and try again, or try a simpler query.');
-            showStatus('Processing - please retry', 'warning');
+    } catch (err) {
+        removeThinking(thinkingId);
+        if (err.name === 'AbortError') {
+            addMessage('assistant', 'Request timed out after 5 minutes. Try a shorter or simpler query.');
+        } else if (err.message.includes('Failed to fetch')) {
+            addMessage('assistant', 'Network error — please check your connection.');
         } else {
-            addMessage('assistant', 'Connection error. Please check your network and try again.');
-            showStatus('Connection error', 'error');
+            addMessage('assistant', 'An unexpected error occurred. Please try again.');
         }
     } finally {
-        // Reset UI states
         sendBtn.disabled = false;
-        sendBtn.innerHTML = 'Research';
-        loadingIndicator.classList.remove('active');
-        input.focus();
-        console.log('Request completed');
-        
-        // Hide status after delay
-        setTimeout(() => hideStatus(), 3000);
+        sendBtn.innerHTML = '<i class="fas fa-paper-plane"></i>';
+        ta.focus();
     }
 }
-
-function addMessage(sender, content, sources = [], visualizations = []) {
-    const messagesDiv = document.getElementById('chatMessages');
-    
-    // Clear welcome message
-    if (messageCount === 0) {
-        messagesDiv.innerHTML = '';
+// ── Handle SSE events ────────────────────────────────────────
+function handleStreamEvent(data, thinkingId) {
+    switch (data.type) {
+        case 'status':
+            updateThinking(thinkingId, data.message, data.progress);
+            break;
+        case 'tools':
+            addToolStep(thinkingId, data.message);
+            break;
+        case 'result':
+            removeThinking(thinkingId);
+            if (data.data && data.data.success) {
+                addMessage('assistant', data.data.response, data.data.sources, data.data.visualizations);
+            } else {
+                const msg = (data.data && data.data.response) || 'Analysis temporarily unavailable.';
+                addMessage('assistant', msg);
+            }
+            return 'done';
+        case 'complete':
+            return 'done';
+        case 'error':
+            removeThinking(thinkingId);
+            addMessage('assistant', data.message || 'An error occurred.');
+            return 'done';
     }
-    messageCount++;
-
-    const messageDiv = document.createElement('div');
-    messageDiv.className = 'message ' + sender;
-
-    let sourcesHtml = '';
-    if (sources && sources.length > 0) {
-        sourcesHtml = `
-            <div class="sources">
-                Sources: ${sources.map(s => `<span>${s}</span>`).join('')}
+}
+// ── Thinking bubble ──────────────────────────────────────────
+function showThinking() {
+    const id   = 'thinking-' + Date.now();
+    const msgs = document.getElementById('chatMessages');
+    clearWelcome();
+    const div = document.createElement('div');
+    div.className = 'message assistant';
+    div.id = id;
+    div.innerHTML = `
+        <div class="thinking-bubble">
+            <div class="thinking-header">
+                <div class="thinking-spinner"></div>
+                <span class="thinking-label" id="${id}-label">Analyzing query…</span>
             </div>
-        `;
-    }
-
-    let visualizationHtml = '';
-    if (visualizations && visualizations.length > 0) {
-        console.log('Processing visualizations:', visualizations.length);
-        visualizationHtml = visualizations.map((viz, index) => {
-            console.log(`Visualization ${index}:`, viz.substring(0, 100));
-            return `<div class="visualization-container" id="viz-${Date.now()}-${index}">${viz}</div>`;
-        }).join('');
+            <div class="tool-steps" id="${id}-steps"></div>
+            <div class="progress-strip"><div class="progress-fill" id="${id}-bar"></div></div>
+        </div>
+        <div class="message-time">${fmtTime()}</div>`;
+    msgs.appendChild(div);
+    msgs.scrollTop = msgs.scrollHeight;
+    return id;
+}
+function updateThinking(id, message, progress) {
+    const label = document.getElementById(`${id}-label`);
+    if (label) label.textContent = message;
+    const bar = document.getElementById(`${id}-bar`);
+    if (bar && progress != null) bar.style.width = `${progress}%`;
+}
+function addToolStep(id, message) {
+    const steps = document.getElementById(`${id}-steps`);
+    if (!steps) return;
+
+    // Parse "Available tools: ['CoinGecko', 'DeFiLlama', ...]" into individual rows
+    const listMatch = message.match(/\[(.+)\]/);
+    const toolNames = listMatch
+        ? [...listMatch[1].matchAll(/'([^']+)'/g)].map(m => m[1])
+        : null;
+
+    if (toolNames && toolNames.length > 0) {
+        toolNames.forEach(name => {
+            const step = document.createElement('div');
+            step.className = 'tool-step';
+            step.innerHTML = `<i class="fas ${getToolIcon(name)}"></i><span>${escapeHtml(name)}</span>`;
+            steps.appendChild(step);
+        });
+    } else {
+        const step = document.createElement('div');
+        step.className = 'tool-step';
+        step.innerHTML = `<i class="fas ${getToolIcon(message)}"></i><span>${escapeHtml(message)}</span>`;
+        steps.appendChild(step);
     }
 
-    // Format content based on sender
-    let formattedContent = content;
+    document.getElementById('chatMessages').scrollTop = 9999;
+}
+function removeThinking(id) {
+    const el = document.getElementById(id);
+    if (el) el.remove();
+}
+// ── Add message ──────────────────────────────────────────────
+function addMessage(sender, content, sources = [], visualizations = []) {
+    clearWelcome();
+    const msgs = document.getElementById('chatMessages');
+    const div  = document.createElement('div');
+    div.className = `message ${sender}`;
+    // Render content
+    let bodyHtml = '';
     if (sender === 'assistant') {
-        // Convert markdown to HTML for assistant responses
-        try {
-            formattedContent = marked.parse(content);
-        } catch (error) {
-            // Fallback to basic formatting if marked.js fails
-            console.warn('Markdown parsing failed, using fallback:', error);
-            formattedContent = content
-                .replace(/\n/g, '<br>')
-                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-                .replace(/\*(.*?)\*/g, '<em>$1</em>')
-                .replace(/`(.*?)`/g, '<code>$1</code>');
-        }
+        try   { bodyHtml = `<div class="md-content">${marked.parse(String(content))}</div>`; }
+        catch { bodyHtml = `<div class="md-content">${escapeHtml(String(content)).replace(/\n/g, '<br>')}</div>`; }
     } else {
-        // Apply markdown parsing to user messages too
-        try {
-            formattedContent = marked.parse(content);
-        } catch (error) {
-            formattedContent = content.replace(/\n/g, '<br>');
-        }
+        bodyHtml = `<div class="md-content">${escapeHtml(String(content))}</div>`;
     }
-
-    messageDiv.innerHTML = `
-        <div class="message-content">
-            ${formattedContent}
-            ${sourcesHtml}
-        </div>
-        ${visualizationHtml}
-        <div class="message-meta">${new Date().toLocaleTimeString()}</div>
-    `;
-
-    messagesDiv.appendChild(messageDiv);
-    messagesDiv.scrollTop = messagesDiv.scrollHeight;
-
-    // Execute any scripts in the visualizations after DOM insertion
+    // Sources
+    let srcHtml = '';
+    if (sources && sources.length > 0) {
+        const tags = sources.map(s => `<span class="source-tag">${escapeHtml(s)}</span>`).join('');
+        srcHtml = `<div class="sources-list"><span class="sources-label">Sources</span>${tags}</div>`;
+    }
+    // Visualizations
+    const vizHtml = (visualizations || []).map((v, i) =>
+        `<div class="viz-container" id="viz-${Date.now()}-${i}">${v}</div>`
+    ).join('');
+    div.innerHTML = `
+        <div class="message-bubble">${bodyHtml}${srcHtml}</div>
+        ${vizHtml}
+        <div class="message-time">${fmtTime()}</div>`;
+    msgs.appendChild(div);
+    msgs.scrollTop = msgs.scrollHeight;
+    // Apply syntax highlighting to code blocks
+    if (sender === 'assistant') {
+        requestAnimationFrame(() => {
+            if (typeof hljs !== 'undefined') {
+                div.querySelectorAll('pre code').forEach(b => hljs.highlightElement(b));
+            }
+        });
+    }
+    // Execute embedded Plotly scripts
     if (visualizations && visualizations.length > 0) {
-        console.log('Executing visualization scripts...');
         setTimeout(() => {
-            const scripts = messageDiv.querySelectorAll('script');
-            console.log(`Found ${scripts.length} scripts to execute`);
-            
-            scripts.forEach((script, index) => {
-                console.log(`Executing script ${index}:`, script.textContent.substring(0, 200) + '...');
-                try {
-                    // Execute script in global context using Function constructor
-                    const scriptFunction = new Function(script.textContent);
-                    scriptFunction.call(window);
-                    console.log(`Script ${index} executed successfully`);
-                } catch (error) {
-                    console.error(`Script ${index} execution error:`, error);
-                    console.error(`Script content preview:`, script.textContent.substring(0, 500));
-                }
+            div.querySelectorAll('script').forEach(s => {
+                try { new Function(s.textContent).call(window); }
+                catch (e) { console.warn('Viz script error:', e); }
             });
-            console.log('All visualization scripts executed');
-        }, 100);
+        }, 120);
     }
-
+    // Maintain rolling chat history (last 20 turns)
     chatHistory.push({ role: sender, content });
     if (chatHistory.length > 20) chatHistory = chatHistory.slice(-20);
 }
-
+// ── Helpers ──────────────────────────────────────────────────
+function clearWelcome() {
+    const w = document.querySelector('.welcome-screen');
+    if (w) w.remove();
+}
 function setQuery(query) {
-    document.getElementById('queryInput').value = query;
-    setTimeout(() => sendQuery(), 100);
+    const ta = document.getElementById('queryInput');
+    ta.value = query;
+    ta.style.height = 'auto';
+    ta.style.height = Math.min(ta.scrollHeight, 130) + 'px';
+    document.getElementById('charCount').textContent = `${query.length} / 1000`;
+    setTimeout(sendQuery, 50);
 }
-
-// Status management functions
-function showStatus(message, type = 'info') {
-    const statusIndicator = document.getElementById('statusIndicator');
-    const statusText = document.getElementById('statusText');
-    
-    statusText.textContent = message;
-    statusIndicator.className = `status-indicator show ${type}`;
+function getToolIcon(message) {
+    const m = message.toLowerCase();
+    for (const [key, icon] of Object.entries(TOOL_ICONS)) {
+        if (key !== 'default' && m.includes(key)) return icon;
+    }
+    return TOOL_ICONS.default;
 }
-
-function hideStatus() {
-    const statusIndicator = document.getElementById('statusIndicator');
-    statusIndicator.classList.remove('show');
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
 }
-
-function updateProgress(progress) {
-    // Update progress bar if it exists
-    const progressBar = document.querySelector('.progress-bar');
-    if (progressBar) {
-        progressBar.style.width = `${progress}%`;
-    }
-    
-    // Update loading indicator text with progress
-    const loadingText = document.getElementById('loadingText');
-    if (loadingText && progress) {
-        loadingText.textContent = `Processing ${progress}%...`;
+function fmtTime() {
+    return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+// ── Toast ─────────────────────────────────────────────────────
+let toastTimer = null;
+function showToast(message, type = 'info') {
+    const toast = document.getElementById('statusIndicator');
+    const text  = document.getElementById('statusText');
+    const icon  = toast.querySelector('.toast-icon');
+    const icons = {
+        info:       'fa-circle-info',
+        processing: 'fa-circle-notch fa-spin',
+        success:    'fa-circle-check',
+        error:      'fa-circle-xmark',
+        warning:    'fa-triangle-exclamation',
+    };
+    text.textContent = message;
+    toast.className  = `toast show ${type}`;
+    if (icon) icon.className = `fas ${icons[type] || icons.info} toast-icon`;
+    clearTimeout(toastTimer);
+    if (type !== 'processing') {
+        toastTimer = setTimeout(() => {
+            toast.classList.remove('show');
+        }, 3000);
     }
 }
-
-// Theme toggle functionality
+// ── Theme ─────────────────────────────────────────────────────
+function initTheme() {
+    const theme = localStorage.getItem('theme') || 'dark';
+    document.documentElement.setAttribute('data-theme', theme);
+    syncThemeIcon(theme);
+}
 function toggleTheme() {
-    const currentTheme = document.documentElement.getAttribute('data-theme');
-    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-    const themeIcon = document.querySelector('#themeToggle i');
-    
-    document.documentElement.setAttribute('data-theme', newTheme);
-    localStorage.setItem('theme', newTheme);
-    
-    // Update icon
-    if (newTheme === 'light') {
-        themeIcon.className = 'fas fa-sun';
-    } else {
-        themeIcon.className = 'fas fa-moon';
-    }
+    const cur  = document.documentElement.getAttribute('data-theme');
+    const next = cur === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem('theme', next);
+    syncThemeIcon(next);
 }
-
-// Initialize theme
-function initializeTheme() {
-    const savedTheme = localStorage.getItem('theme') || 'dark';
-    const themeIcon = document.querySelector('#themeToggle i');
-    
-    document.documentElement.setAttribute('data-theme', savedTheme);
-    
-    if (savedTheme === 'light') {
-        themeIcon.className = 'fas fa-sun';
-    } else {
-        themeIcon.className = 'fas fa-moon';
-    }
+function syncThemeIcon(theme) {
+    const icon = document.querySelector('#themeToggle i');
+    if (icon) icon.className = theme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
 }
-
-// Event listeners
-document.getElementById('queryInput').addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') sendQuery();
-});
-
-document.getElementById('sendBtn').addEventListener('click', (e) => {
-    console.log('Research button clicked');
-    e.preventDefault();
-    sendQuery();
-});
-
+// ── Event listeners ───────────────────────────────────────────
+document.getElementById('sendBtn').addEventListener('click', sendQuery);
 document.getElementById('themeToggle').addEventListener('click', toggleTheme);
-
-// Initialize
-document.addEventListener('DOMContentLoaded', () => {
-    console.log('Application initialized');
-    initializeTheme();
-    checkStatus();
-    document.getElementById('queryInput').focus();
-});

static/styles.css

@@ -1,767 +1,652 @@
+/* ============================================================
+   Web3 Research Co-Pilot — Styles
+   Minimalist professional dark UI with Inter font
+   ============================================================ */
+/* CSS Variables */
 :root {
-    --primary: #0066ff;
-    --primary-dark: #0052cc;
-    --accent: #00d4aa;
-    --background: #000000;
-    --surface: #111111;
-    --surface-elevated: #1a1a1a;
-    --text: #ffffff;
-    --text-secondary: #a0a0a0;
-    --text-muted: #666666;
-    --border: rgba(255, 255, 255, 0.08);
-    --border-focus: rgba(0, 102, 255, 0.3);
-    --shadow: rgba(0, 0, 0, 0.4);
-    --success: #00d4aa;
-    --warning: #ffa726;
-    --error: #f44336;
-}
-
+    --primary:       #6366f1;
+    --primary-dark:  #4f46e5;
+    --primary-glow:  rgba(99,102,241,0.15);
+    --accent:        #22d3ee;
+    --bg:            #0d0d14;
+    --surface:       #13131f;
+    --surface-2:     #1c1c2e;
+    --surface-3:     #26263a;
+    --text:          #f1f5f9;
+    --text-2:        #94a3b8;
+    --text-3:        #64748b;
+    --border:        rgba(255,255,255,0.07);
+    --border-2:      rgba(255,255,255,0.11);
+    --success:       #10b981;
+    --warning:       #f59e0b;
+    --error:         #ef4444;
+    --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
+    --shadow:        0 4px 20px rgba(0,0,0,0.45);
+    --radius-sm:     6px;
+    --radius:        10px;
+    --radius-lg:     16px;
+    --radius-xl:     20px;
+}
 [data-theme="light"] {
-    --background: #ffffff;
-    --surface: #f8f9fa;
-    --surface-elevated: #ffffff;
-    --text: #1a1a1a;
-    --text-secondary: #4a5568;
-    --text-muted: #718096;
-    --border: rgba(0, 0, 0, 0.08);
-    --border-focus: rgba(0, 102, 255, 0.3);
-    --shadow: rgba(0, 0, 0, 0.1);
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+    --bg:        #f6f7fb;
+    --surface:   #ffffff;
+    --surface-2: #f1f3f9;
+    --surface-3: #e5e8f0;
+    --text:      #0f172a;
+    --text-2:    #475569;
+    --text-3:    #94a3b8;
+    --border:    rgba(0,0,0,0.06);
+    --border-2:  rgba(0,0,0,0.10);
+    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
+    --shadow:    0 4px 20px rgba(0,0,0,0.10);
+}
+*, *::before, *::after {
+    margin: 0; padding: 0; box-sizing: border-box;
 }
-
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
-    background: var(--background);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    background: var(--bg);
     color: var(--text);
-    line-height: 1.5;
-    min-height: 100vh;
-    font-weight: 400;
+    line-height: 1.6;
+    height: 100vh;
+    overflow: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    transition: background-color 0.25s, color 0.25s;
 }
-
-.container {
-    max-width: 1000px;
+/* App Shell */
+.app {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    max-width: 860px;
     margin: 0 auto;
-    padding: 2rem 1.5rem;
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
 }
-
+/* HEADER */
 .header {
-    text-align: center;
-    margin-bottom: 2.5rem;
-}
-.header-content {
     display: flex;
+    align-items: center;
     justify-content: space-between;
+    padding: 0 1.25rem;
+    height: 52px;
+    border-bottom: 1px solid var(--border);
+    background: var(--surface);
+    flex-shrink: 0;
+    gap: 0.75rem;
+    z-index: 100;
+}
+.header-left {
+    display: flex;
     align-items: center;
-    max-width: 100%;
+    gap: 0.625rem;
+    min-width: 0;
 }
-.header-text {
-    flex: 1;
-    text-align: center;
+.logo-icon { flex-shrink: 0; }
+.header-title {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.brand {
+    background: linear-gradient(135deg, var(--primary), var(--accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
-.header-controls {
+.header-right {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.625rem;
+    flex-shrink: 0;
 }
-
-/* LLM Toggle Switch Styles */
-.llm-toggle {
+/* Status Badge */
+.status-badge {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-}
-.toggle-label {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
+    gap: 0.375rem;
+    padding: 0.25rem 0.625rem;
+    border-radius: 20px;
+    font-size: 0.72rem;
     font-weight: 500;
-}
-
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 80px;
-    height: 32px;
-}
-
-.switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--surface);
     border: 1px solid var(--border);
-    transition: .4s;
-    overflow: hidden;
+    background: var(--surface-2);
+    color: var(--text-3);
+    user-select: none;
 }
-
-.slider:before {
-    position: absolute;
-    content: "";
-    height: 24px;
-    width: 24px;
-    left: 3px;
-    bottom: 3px;
-    background-color: var(--primary);
-    transition: .4s;
+.status-dot {
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
-    z-index: 2;
-}
-
-.slider-text-off, .slider-text-on {
-    position: absolute;
-    color: var(--text-secondary);
-    font-size: 0.7rem;
-    font-weight: 500;
-    top: 50%;
-    transform: translateY(-50%);
-    transition: .4s;
-    pointer-events: none;
-    z-index: 1;
-}
-
-.slider-text-off {
-    left: 8px;
-}
-
-.slider-text-on {
-    right: 8px;
-    opacity: 0;
+    background: var(--text-3);
+    flex-shrink: 0;
+    transition: background 0.3s, box-shadow 0.3s;
+}
+.status-badge.online  .status-dot { background: var(--success); box-shadow: 0 0 0 2px rgba(16,185,129,0.2); }
+.status-badge.offline .status-dot { background: var(--error); }
+.status-badge.checking .status-dot { background: var(--warning); animation: pulse-dot 1.4s ease-in-out infinite; }
+.status-badge.online { color: var(--text-2); }
+@keyframes pulse-dot {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
 }
-
-input:checked + .slider {
-    background-color: var(--accent);
-    border-color: var(--accent);
+/* Model Toggle */
+.model-select {
+    display: flex;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 2px;
+    gap: 2px;
 }
-
-input:checked + .slider .slider-text-off {
-    opacity: 0;
+.model-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.28rem 0.625rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.72rem;
+    font-weight: 500;
+    color: var(--text-3);
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.18s;
+    white-space: nowrap;
+    font-family: inherit;
 }
-
-input:checked + .slider .slider-text-on {
-    opacity: 1;
+.model-btn.active {
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: var(--shadow-sm);
 }
-
-input:checked + .slider:before {
-    transform: translateX(48px);
+.model-btn:hover:not(.active) { color: var(--text-2); }
+/* Icon Button */
+.icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--surface-2);
+    color: var(--text-3);
+    cursor: pointer;
+    font-size: 0.8rem;
+    transition: all 0.18s;
+    flex-shrink: 0;
 }
-
-.slider.round {
-    border-radius: 20px;
+.icon-btn:hover { background: var(--surface-3); color: var(--text); }
+/* MAIN LAYOUT */
+.main {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
-
-.slider.round:before {
-    border-radius: 50%;
+.chat-wrap {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
 }
-
-.theme-toggle {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 0.75rem;
-    color: var(--text);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 1.1rem;
-    min-width: 44px;
-    height: 44px;
+/* CHAT MESSAGES */
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.5rem 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    scroll-behavior: smooth;
+    background: var(--bg);
+}
+.chat-messages::-webkit-scrollbar       { width: 4px; }
+.chat-messages::-webkit-scrollbar-track { background: transparent; }
+.chat-messages::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
+.chat-messages::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
+/* Welcome Screen */
+.welcome-screen {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    text-align: center;
+    padding: 2rem 1rem 1.5rem;
+    flex: 1;
+    animation: fadeIn 0.4s ease;
 }
-.theme-toggle:hover {
-    background: var(--surface-elevated);
-    border-color: var(--primary);
-    transform: translateY(-1px);
-}
-
-.header h1 {
-    font-size: 2.25rem;
+.welcome-icon { margin-bottom: 1.25rem; opacity: 0.85; }
+.welcome-screen h2 {
+    font-size: 1.35rem;
     font-weight: 600;
+    margin-bottom: 0.4rem;
     color: var(--text);
-    margin-bottom: 0.5rem;
-    letter-spacing: -0.025em;
+    letter-spacing: -0.02em;
 }
-
-.header .brand {
-    color: var(--primary);
-}
-
-.header p {
-    color: var(--text-secondary);
-    font-size: 1rem;
-    font-weight: 400;
+.welcome-screen p {
+    color: var(--text-3);
+    font-size: 0.875rem;
+    margin-bottom: 1.75rem;
 }
-
-.status {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 1rem 1.5rem;
-    margin-bottom: 2rem;
-    text-align: center;
-    transition: all 0.2s ease;
-}
-
-.status.online {
-    border-color: var(--success);
-    background: linear-gradient(135deg, rgba(0, 212, 170, 0.05), rgba(0, 212, 170, 0.02));
-}
-
-.status.offline {
-    border-color: var(--error);
-    background: linear-gradient(135deg, rgba(244, 67, 54, 0.05), rgba(244, 67, 54, 0.02));
-}
-
-.status.checking {
-    border-color: var(--warning);
-    background: linear-gradient(135deg, rgba(255, 167, 38, 0.05), rgba(255, 167, 38, 0.02));
-    animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.8; }
+.example-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+    max-width: 580px;
 }
-
-.chat-interface {
+.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.425rem 0.875rem;
     background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 16px;
-    overflow: hidden;
-    margin-bottom: 2rem;
-    backdrop-filter: blur(20px);
-}
-
-.chat-messages {
-    height: 480px;
-    overflow-y: auto;
-    padding: 2rem;
-    background: linear-gradient(180deg, var(--background), var(--surface));
-}
-
-.chat-messages::-webkit-scrollbar {
-    width: 3px;
-}
-
-.chat-messages::-webkit-scrollbar-track {
-    background: transparent;
+    border: 1px solid var(--border-2);
+    border-radius: 20px;
+    color: var(--text-2);
+    font-size: 0.78rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.18s;
+    font-family: inherit;
 }
-
-.chat-messages::-webkit-scrollbar-thumb {
-    background: var(--border);
-    border-radius: 2px;
+.chip:hover {
+    background: var(--surface-2);
+    border-color: var(--primary);
+    color: var(--text);
+    transform: translateY(-1px);
 }
-
+.chip i { color: var(--primary); font-size: 0.72rem; }
+/* MESSAGE BUBBLES */
 .message {
-    margin-bottom: 2rem;
-    opacity: 0;
-    animation: messageSlide 0.4s cubic-bezier(0.2, 0, 0.2, 1) forwards;
-}
-
-@keyframes messageSlide {
-    from { 
-        opacity: 0; 
-        transform: translateY(20px) scale(0.98); 
-    }
-    to { 
-        opacity: 1; 
-        transform: translateY(0) scale(1); 
-    }
-}
-
-.message.user {
-    text-align: right;
-}
-
-.message.assistant {
-    text-align: left;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    animation: msgSlide 0.28s ease;
+}
+@keyframes msgSlide {
+    from { opacity: 0; transform: translateY(6px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+.message.user      { align-items: flex-end; }
+.message.assistant { align-items: flex-start; }
+.message-bubble {
+    max-width: 82%;
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius-lg);
+    font-size: 0.875rem;
+    line-height: 1.65;
+    word-break: break-word;
+    overflow-wrap: anywhere;
 }
-
-.message-content {
-    display: inline-block;
-    max-width: 75%;
-    padding: 1.25rem 1.5rem;
-    border-radius: 24px;
-    font-size: 0.95rem;
-    line-height: 1.6;
-    position: relative;
-}
-
-.message.user .message-content {
-    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-    color: #ffffff;
-    border-bottom-right-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
-}
-
-.message.assistant .message-content {
-    background: var(--surface-elevated);
-    color: var(--text);
-    border-bottom-left-radius: 8px;
-    border: 1px solid var(--border);
+.message.user .message-bubble {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+    color: #fff;
+    border-bottom-right-radius: 4px;
+    box-shadow: 0 2px 10px rgba(99,102,241,0.25);
 }
-.message-content h1, .message-content h2, .message-content h3, .message-content h4 {
-    color: var(--accent);
-    margin: 1.25rem 0 0.5rem 0;
+.message.assistant .message-bubble {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--text);
+    border-bottom-left-radius: 4px;
+    max-width: 94%;
+}
+.message-time {
+    font-size: 0.67rem;
+    color: var(--text-3);
+    padding: 0 0.25rem;
+    font-variant-numeric: tabular-nums;
+}
+/* MARKDOWN CONTENT */
+.md-content { line-height: 1.7; }
+.md-content > *:first-child { margin-top: 0 !important; }
+.md-content > *:last-child  { margin-bottom: 0 !important; }
+.md-content h1, .md-content h2,
+.md-content h3, .md-content h4,
+.md-content h5, .md-content h6 {
     font-weight: 600;
     line-height: 1.3;
-    text-shadow: 0 1px 2px rgba(0, 212, 170, 0.1);
-}
-.message-content h1 { 
-    font-size: 1.35rem; 
-    background: linear-gradient(135deg, var(--accent), #00b894);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-.message-content h2 { 
-    font-size: 1.2rem;
-    color: #00b894;
-}
-.message-content h3 { 
-    font-size: 1.05rem;
+    margin: 1rem 0 0.4rem;
+}
+.md-content h1 { font-size: 1.2rem;  color: var(--accent); }
+.md-content h2 { font-size: 1.05rem; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
+.md-content h3 { font-size: 0.95rem; color: var(--primary); }
+.md-content h4 { font-size: 0.875rem; color: var(--text-2); }
+.md-content p { margin: 0.5rem 0; }
+.md-content ul, .md-content ol {
+    margin: 0.5rem 0;
+    padding-left: 1.4rem;
+}
+.md-content li { margin: 0.2rem 0; }
+.md-content ul li::marker { color: var(--accent); }
+.md-content ol li::marker { color: var(--accent); font-weight: 600; }
+.md-content strong { font-weight: 600; color: var(--text); }
+.md-content em     { color: var(--text-2); font-style: italic; }
+.md-content code {
+    font-family: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace;
+    font-size: 0.8rem;
+    background: var(--surface-2);
+    border: 1px solid var(--border-2);
+    padding: 0.12rem 0.4rem;
+    border-radius: 4px;
     color: var(--accent);
 }
-.message-content h4 { 
-    font-size: 0.95rem;
-    color: #74b9ff;
-}
-.message-content p {
-    margin: 0.75rem 0;
-    line-height: 1.65;
-    color: var(--text);
-}
-.message-content ul, .message-content ol {
+.md-content pre {
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 0.875rem 1rem;
+    overflow-x: auto;
     margin: 0.75rem 0;
-    padding-left: 1.5rem;
-    line-height: 1.6;
-}
-.message-content li {
-    margin: 0.3rem 0;
-    line-height: 1.6;
-    position: relative;
-}
-.message-content ul li::marker {
-    color: var(--accent);
 }
-.message-content ol li::marker {
-    color: var(--accent);
-    font-weight: 600;
+.md-content pre code {
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--text);
+    font-size: 0.8rem;
 }
-.message-content table {
+.hljs { background: transparent !important; padding: 0 !important; }
+.md-content table {
     width: 100%;
     border-collapse: collapse;
-    margin: 1rem 0;
-    font-size: 0.9rem;
-}
-.message-content th, .message-content td {
+    margin: 0.75rem 0;
+    font-size: 0.82rem;
     border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+}
+.md-content th {
+    background: var(--surface-2);
+    color: var(--text-2);
+    font-weight: 600;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
     padding: 0.5rem 0.75rem;
     text-align: left;
+    border-bottom: 1px solid var(--border);
 }
-.message-content th {
-    background: var(--surface);
-    font-weight: 600;
-    color: var(--accent);
+.md-content td {
+    padding: 0.45rem 0.75rem;
+    border-top: 1px solid var(--border);
+    color: var(--text);
 }
-.message-content strong {
-    background: linear-gradient(135deg, var(--accent), #74b9ff);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-weight: 700;
-    text-shadow: 0 1px 2px rgba(0, 212, 170, 0.2);
-}
-.message-content em {
-    color: #a29bfe;
-    font-style: italic;
-    background: rgba(162, 155, 254, 0.1);
-    padding: 0.1rem 0.2rem;
-    border-radius: 3px;
+.md-content tr:hover td { background: rgba(255,255,255,0.015); }
+.md-content blockquote {
+    border-left: 3px solid var(--primary);
+    background: var(--primary-glow);
+    padding: 0.6rem 0.875rem;
+    margin: 0.75rem 0;
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    color: var(--text-2);
+}
+.md-content a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
+.md-content a:hover { border-bottom-color: var(--accent); }
+.md-content hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
+/* User bubble overrides */
+.message.user .md-content h1,
+.message.user .md-content h2,
+.message.user .md-content h3,
+.message.user .md-content h4 { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.2); }
+.message.user .md-content strong { color: #fff; }
+.message.user .md-content em    { color: rgba(255,255,255,0.8); }
+.message.user .md-content code  {
+    background: rgba(255,255,255,0.15);
+    border-color: rgba(255,255,255,0.2);
+    color: #fff;
+}
+.message.user .md-content ul li::marker,
+.message.user .md-content ol li::marker { color: rgba(255,255,255,0.7); }
+/* Sources */
+.sources-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--border);
 }
-.message-content code {
-    background: linear-gradient(135deg, rgba(116, 185, 255, 0.15), rgba(0, 212, 170, 0.1));
-    border: 1px solid rgba(116, 185, 255, 0.3);
-    padding: 0.2rem 0.5rem;
-    border-radius: 6px;
-    font-family: 'SF Mono', Consolas, 'Courier New', monospace;
-    font-size: 0.85rem;
-    color: #74b9ff;
+.sources-label {
+    font-size: 0.68rem;
+    color: var(--text-3);
     font-weight: 600;
-    text-shadow: 0 1px 2px rgba(116, 185, 255, 0.2);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
-.message.user .message-content strong,
-.message.user .message-content code,
-.message.user .message-content em {
-    color: rgba(255, 255, 255, 0.95);
-    background: rgba(255, 255, 255, 0.1);
-    -webkit-text-fill-color: rgba(255, 255, 255, 0.95);
+.source-tag {
+    font-size: 0.7rem;
+    padding: 0.18rem 0.55rem;
+    background: rgba(99,102,241,0.08);
+    border: 1px solid rgba(99,102,241,0.2);
+    border-radius: 20px;
+    color: var(--primary);
+    font-weight: 500;
 }
-.message-content pre {
-    background: var(--background);
+.viz-container {
+    margin-top: 0.875rem;
+    border-radius: var(--radius);
     border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 1rem;
-    margin: 1rem 0;
-    overflow-x: auto;
-    font-family: 'SF Mono', Consolas, 'Courier New', monospace;
-    font-size: 0.85rem;
-    line-height: 1.5;
-}
-.message-content pre code {
-    background: none;
-    border: none;
-    padding: 0;
-    font-size: inherit;
-}
-.message-content blockquote {
-    border-left: 3px solid var(--accent);
-    padding-left: 1rem;
-    margin: 1rem 0;
-    color: var(--text-secondary);
-    font-style: italic;
-    background: rgba(0, 212, 170, 0.05);
-    padding: 0.75rem 0 0.75rem 1rem;
-    border-radius: 0 4px 4px 0;
-}
-.message-content a {
-    color: var(--accent);
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-    transition: border-color 0.2s ease;
+    overflow: hidden;
+    width: 100%;
 }
-.message-content a:hover {
-    border-bottom-color: var(--accent);
+/* THINKING / TOOL STEPS */
+.thinking-bubble {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    border-bottom-left-radius: 4px;
+    padding: 0.75rem 1rem;
+    font-size: 0.82rem;
+    max-width: 90%;
+    min-width: 220px;
 }
-.message.user .message-content {
-    word-wrap: break-word;
-    white-space: pre-wrap;
+.thinking-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-2);
+    margin-bottom: 0.5rem;
 }
-.message.user .message-content strong,
-.message.user .message-content code {
-    color: rgba(255, 255, 255, 0.9);
+.thinking-spinner {
+    width: 13px;
+    height: 13px;
+    border: 2px solid var(--border-2);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 0.75s linear infinite;
+    flex-shrink: 0;
 }
-
-.message-meta {
+@keyframes spin { to { transform: rotate(360deg); } }
+.thinking-label { font-weight: 500; font-size: 0.8rem; }
+.tool-steps { display: flex; flex-direction: column; gap: 0.2rem; }
+.tool-step {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     font-size: 0.75rem;
-    color: var(--text-muted);
-    margin-top: 0.5rem;
-    font-weight: 500;
-}
-
-.sources {
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--border);
-    font-size: 0.8rem;
-    color: var(--text-secondary);
+    color: var(--text-3);
+    padding: 0.15rem 0;
+    animation: msgSlide 0.2s ease;
+}
+.tool-step i { color: var(--primary); width: 13px; text-align: center; font-size: 0.7rem; }
+.tool-step.done i { color: var(--success); }
+.progress-strip {
+    margin-top: 0.625rem;
+    height: 2px;
+    background: var(--border);
+    border-radius: 1px;
+    overflow: hidden;
 }
-
-.sources span {
-    display: inline-block;
-    background: rgba(0, 102, 255, 0.1);
-    border: 1px solid rgba(0, 102, 255, 0.2);
-    padding: 0.25rem 0.75rem;
-    border-radius: 6px;
-    margin: 0.25rem 0.5rem 0.25rem 0;
-    font-weight: 500;
-    font-size: 0.75rem;
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary), var(--accent));
+    border-radius: 1px;
+    transition: width 0.4s ease;
+    width: 0%;
 }
-
+/* INPUT AREA */
 .input-area {
-    padding: 2rem;
-    background: linear-gradient(180deg, var(--surface), var(--surface-elevated));
+    padding: 0.875rem 1.25rem 1rem;
     border-top: 1px solid var(--border);
+    background: var(--surface);
+    flex-shrink: 0;
 }
-
-.input-container {
+.input-box {
     display: flex;
-    gap: 1rem;
-    align-items: stretch;
+    align-items: flex-end;
+    gap: 0.625rem;
+    background: var(--surface-2);
+    border: 1.5px solid var(--border-2);
+    border-radius: var(--radius-xl);
+    padding: 0.55rem 0.625rem 0.55rem 1rem;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+.input-box:focus-within {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-glow);
 }
-
 .input-field {
     flex: 1;
-    padding: 1rem 1.5rem;
-    background: var(--background);
-    border: 2px solid var(--border);
-    border-radius: 28px;
-    color: var(--text);
-    font-size: 0.95rem;
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
-    font-weight: 400;
-}
-
-.input-field:focus {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 4px var(--border-focus);
-    background: var(--surface);
-}
-
-.input-field::placeholder {
-    color: var(--text-muted);
-    font-weight: 400;
-}
-
-.send-button {
-    padding: 1rem 2rem;
-    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-    color: #ffffff;
+    background: none;
     border: none;
-    border-radius: 28px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
-    font-size: 0.95rem;
-    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
-}
-
-.send-button:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3);
-}
-
-.send-button:active {
-    transform: translateY(0);
-}
-
-.send-button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.1);
-}
-
-.examples {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 1rem;
-    margin-top: 1rem;
-}
-
-.example {
-    background: linear-gradient(135deg, var(--surface), var(--surface-elevated));
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 1.5rem;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-}
-
-.example::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.05), transparent);
-    transition: left 0.5s ease;
-}
-
-.example:hover::before {
-    left: 100%;
-}
-
-.example:hover {
-    border-color: var(--primary);
-    transform: translateY(-4px);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
-    background: linear-gradient(135deg, var(--surface-elevated), var(--surface));
-}
-
-.example-title {
-    font-weight: 600;
+    outline: none;
     color: var(--text);
-    margin-bottom: 0.5rem;
-    font-size: 0.95rem;
+    font-size: 0.875rem;
+    font-family: 'Inter', sans-serif;
+    line-height: 1.55;
+    resize: none;
+    overflow-y: hidden;
+    max-height: 130px;
+    padding: 0;
+    min-height: 22px;
+}
+.input-field::placeholder { color: var(--text-3); }
+.input-actions {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    flex-shrink: 0;
 }
-.example-title i {
-    color: var(--primary);
-    font-size: 1rem;
-    width: 20px;
-    text-align: center;
-}
-
-.example-desc {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    font-weight: 400;
+.char-count {
+    font-size: 0.65rem;
+    color: var(--text-3);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
 }
-
-.loading {
-    display: inline-flex;
+.send-btn {
+    display: flex;
     align-items: center;
-    gap: 0.5rem;
-    color: var(--text-secondary);
-    font-weight: 500;
-}
-
-.loading::after {
-    content: '';
-    width: 14px;
-    height: 14px;
-    border: 2px solid currentColor;
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    background: var(--primary);
+    border: none;
+    border-radius: var(--radius-sm);
+    color: #fff;
+    cursor: pointer;
+    font-size: 0.75rem;
+    transition: all 0.18s;
+    flex-shrink: 0;
+    font-family: inherit;
 }
-.loading-indicator {
-    display: none;
-    background: var(--surface-elevated);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 1.5rem;
-    margin: 1rem 0;
-    text-align: center;
-    color: var(--text-secondary);
+.send-btn:hover:not(:disabled) {
+    background: var(--primary-dark);
+    transform: translateY(-1px);
+    box-shadow: 0 3px 10px rgba(99,102,241,0.35);
 }
-.loading-indicator.active {
-    display: block;
+.send-btn:active { transform: translateY(0); }
+.send-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
+.input-hint {
+    font-size: 0.65rem;
+    color: var(--text-3);
+    margin-top: 0.4rem;
+    padding-left: 0.25rem;
 }
-.loading-spinner {
+.input-hint kbd {
     display: inline-block;
-    width: 20px;
-    height: 20px;
-    border: 2px solid var(--border);
-    border-top-color: var(--primary);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-right: 0.5rem;
-}
-.progress-container {
-    width: 100%;
-    height: 4px;
-    background: var(--border);
-    border-radius: 2px;
-    overflow: hidden;
-    margin: 10px 0 0 0;
-}
-.progress-bar {
-    height: 100%;
-    background: linear-gradient(90deg, var(--primary), var(--accent));
-    border-radius: 2px;
-    transition: width 0.3s ease;
-    width: 0%;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.6rem;
+    background: var(--surface-3);
+    border: 1px solid var(--border-2);
+    border-radius: 3px;
+    padding: 0.05rem 0.3rem;
+    color: var(--text-2);
 }
-.status-indicator {
+/* TOAST NOTIFICATION */
+.toast {
     position: fixed;
-    top: 20px;
-    right: 20px;
+    top: 0.875rem;
+    right: 0.875rem;
     background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 0.75rem 1rem;
-    font-size: 0.85rem;
-    color: var(--text-secondary);
+    border: 1px solid var(--border-2);
+    border-radius: var(--radius);
+    padding: 0.55rem 0.875rem;
+    font-size: 0.78rem;
+    color: var(--text-2);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     opacity: 0;
-    transform: translateY(-10px);
-    transition: all 0.3s ease;
+    transform: translateY(-6px) scale(0.97);
+    transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
     z-index: 1000;
-}
-.status-indicator.show {
-    opacity: 1;
-    transform: translateY(0);
-}
-.status-indicator.processing {
-    border-color: var(--primary);
-    background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 102, 255, 0.02));
-}
-
-.visualization-container {
-    margin: 1.5rem 0;
-    background: var(--surface-elevated);
-    border-radius: 12px;
-    padding: 1.5rem;
-    border: 1px solid var(--border);
-}
-
-.welcome {
-    text-align: center;
-    padding: 4rem 2rem;
-    color: var(--text-secondary);
-}
-
-.welcome h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-    color: var(--text);
-}
-
-.welcome p {
-    font-size: 0.95rem;
-    font-weight: 400;
-}
-
-@media (max-width: 768px) {
-    .container {
-        padding: 1rem;
-    }
-    
-    .header-content {
-        flex-direction: column;
-        gap: 1rem;
-    }
-    
-    .header-text {
-        text-align: center;
-    }
-    
-    .header h1 {
-        font-size: 1.75rem;
-    }
-    
-    .chat-messages {
-        height: 400px;
-        padding: 1.5rem;
-    }
-    
-    .message-content {
-        max-width: 85%;
-        padding: 1rem 1.25rem;
-    }
-    
-    .input-area {
-        padding: 1.5rem;
-    }
-    
-    .input-container {
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-    
-    .send-button {
-        align-self: stretch;
-    }
-    
-    .examples {
-        grid-template-columns: 1fr;
-    }
+    box-shadow: var(--shadow);
+    pointer-events: none;
+    max-width: 300px;
+}
+.toast.show { opacity: 1; transform: translateY(0) scale(1); }
+.toast-icon { font-size: 0.75rem; flex-shrink: 0; }
+.toast.processing { border-color: rgba(99,102,241,0.4); }
+.toast.processing .toast-icon { color: var(--primary); }
+.toast.success    { border-color: rgba(16,185,129,0.4); }
+.toast.success    .toast-icon { color: var(--success); }
+.toast.error      { border-color: rgba(239,68,68,0.4); }
+.toast.error      .toast-icon { color: var(--error); }
+.toast.warning    { border-color: rgba(245,158,11,0.4); }
+.toast.warning    .toast-icon { color: var(--warning); }
+/* LIGHT THEME OVERRIDES */
+[data-theme="light"] .md-content pre {
+    background: #f6f8fa;
+    border-color: #d0d7de;
+}
+[data-theme="light"] .md-content code {
+    background: rgba(175,184,193,0.2);
+    border-color: rgba(175,184,193,0.4);
+    color: #0550ae;
+}
+[data-theme="light"] .message.assistant .message-bubble {
+    background: #fff;
+    border-color: rgba(0,0,0,0.08);
+    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
+}
+[data-theme="light"] .thinking-bubble {
+    background: #fff;
+    border-color: rgba(0,0,0,0.08);
+}
+[data-theme="light"] .chat-messages { background: var(--bg); }
+/* RESPONSIVE */
+@media (max-width: 640px) {
+    .app { max-width: 100%; border: none; }
+    .header { padding: 0 1rem; height: 48px; }
+    .header-title { font-size: 0.82rem; }
+    .status-badge { display: none; }
+    .chat-messages { padding: 1rem; }
+    .message-bubble { max-width: 92%; font-size: 0.85rem; }
+    .message.assistant .message-bubble { max-width: 98%; }
+    .input-area { padding: 0.75rem 0.875rem 0.875rem; }
+    .example-chips { gap: 0.375rem; }
+    .chip { font-size: 0.75rem; padding: 0.375rem 0.75rem; }
 }

templates/index.html

@@ -4,99 +4,119 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Web3 Research Co-Pilot</title>
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path fill=%22%2300d4aa%22 d=%22M12 2L2 7v10c0 5.5 3.8 7.7 9 9 5.2-1.3 9-3.5 9-9V7l-10-5z%22/></svg>">
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <!-- Prevent flash of unstyled content -->
+    <script>(function(){var t=localStorage.getItem('theme')||'dark';document.documentElement.setAttribute('data-theme',t);})()</script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path fill=%22%236366f1%22 d=%22M12 2L2 7v10c0 5.5 3.8 7.7 9 9 5.2-1.3 9-3.5 9-9V7l-10-5z%22/></svg>">
+    <script src="https://cdn.jsdelivr.net/npm/marked@9/marked.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-theme">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/static/styles.css">
 </head>
 <body>
-    <div id="statusIndicator" class="status-indicator">
+    <!-- Toast notification -->
+    <div id="statusIndicator" class="toast">
+        <i class="fas fa-circle-info toast-icon"></i>
         <span id="statusText">Ready</span>
     </div>
-    
-    <div class="container">
-        <div class="header">
-            <div class="header-content">
-                <div class="header-text">
-                    <h1><span class="brand">Web3</span> Research Co-Pilot</h1>
-                    <p>Professional cryptocurrency analysis and market intelligence</p>
+
+    <div class="app">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-left">
+                <svg class="logo-icon" width="26" height="26" viewBox="0 0 24 24" fill="none">
+                    <path d="M12 2L2 7v10c0 5.5 3.8 7.7 9 9 5.2-1.3 9-3.5 9-9V7L12 2z" fill="url(#logoGrad)"/>
+                    <defs>
+                        <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" style="stop-color:#6366f1"/>
+                            <stop offset="100%" style="stop-color:#22d3ee"/>
+                        </linearGradient>
+                    </defs>
+                </svg>
+                <span class="header-title"><span class="brand">Web3</span> Research Co-Pilot</span>
+            </div>
+            <div class="header-right">
+                <div id="statusBadge" class="status-badge checking">
+                    <span class="status-dot"></span>
+                    <span id="statusBadgeText">Connecting</span>
                 </div>
-                <div class="header-controls">
-                    <div class="llm-toggle">
-                        <span class="toggle-label">AI Model:</span>
-                        <label class="switch">
-                            <input type="checkbox" id="geminiToggle" title="Switch between Ollama (Local) and Gemini (Cloud)">
-                            <span class="slider round">
-                                <span class="slider-text-off">Ollama</span>
-                                <span class="slider-text-on">Gemini</span>
-                            </span>
-                        </label>
-                    </div>
-                    <button id="themeToggle" class="theme-toggle" title="Toggle theme">
-                        <i class="fas fa-moon"></i>
+                <div class="model-select">
+                    <button class="model-btn active" id="btnOllama" onclick="setModel('ollama')">
+                        <i class="fas fa-microchip"></i> Local
+                    </button>
+                    <button class="model-btn" id="btnGemini" onclick="setModel('gemini')">
+                        <i class="fas fa-cloud"></i> Gemini
                     </button>
                 </div>
+                <button id="themeToggle" class="icon-btn" title="Toggle theme">
+                    <i class="fas fa-sun"></i>
+                </button>
             </div>
-        </div>
-
-        <div id="status" class="status checking">
-            <span>Initializing research systems...</span>
-        </div>
+        </header>
 
-        <div class="chat-interface">
-            <div id="chatMessages" class="chat-messages">
-                <div class="welcome">
-                    <h3>Welcome to Web3 Research Co-Pilot</h3>
-                    <p>Ask about market trends, DeFi protocols, or blockchain analytics</p>
-                </div>
-            </div>
-            <div id="loadingIndicator" class="loading-indicator">
-                <div class="loading-spinner"></div>
-                <span id="loadingText">Processing your research query...</span>
-                <div class="progress-container">
-                    <div class="progress-bar" style="width: 0%;"></div>
-                </div>
-            </div>
-            <div class="input-area">
-                <div class="input-container">
-                    <input 
-                        type="text" 
-                        id="queryInput" 
-                        class="input-field"
-                        placeholder="Research Bitcoin trends, analyze DeFi yields, compare protocols..."
-                        maxlength="500"
-                    >
-                    <button id="sendBtn" class="send-button">Research</button>
+        <!-- Main -->
+        <main class="main">
+            <div class="chat-wrap">
+                <div id="chatMessages" class="chat-messages">
+                    <div class="welcome-screen">
+                        <svg class="welcome-icon" width="52" height="52" viewBox="0 0 24 24" fill="none">
+                            <path d="M12 2L2 7v10c0 5.5 3.8 7.7 9 9 5.2-1.3 9-3.5 9-9V7L12 2z" fill="url(#welcomeGrad)"/>
+                            <defs>
+                                <linearGradient id="welcomeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                                    <stop offset="0%" style="stop-color:#6366f1"/>
+                                    <stop offset="100%" style="stop-color:#22d3ee"/>
+                                </linearGradient>
+                            </defs>
+                        </svg>
+                        <h2>Web3 Research Co-Pilot</h2>
+                        <p>Professional cryptocurrency analysis and market intelligence</p>
+                        <div class="example-chips">
+                            <button class="chip" onclick="setQuery('Analyze Bitcoin price trends and institutional adoption patterns')">
+                                <i class="fas fa-chart-line"></i> BTC Analysis
+                            </button>
+                            <button class="chip" onclick="setQuery('Compare top DeFi protocols by TVL, yield, and risk metrics across chains')">
+                                <i class="fas fa-coins"></i> DeFi Compare
+                            </button>
+                            <button class="chip" onclick="setQuery('Evaluate Ethereum Layer 2 scaling solutions and adoption metrics')">
+                                <i class="fas fa-layer-group"></i> L2 Research
+                            </button>
+                            <button class="chip" onclick="setQuery('Find optimal yield farming strategies with risk assessment')">
+                                <i class="fas fa-seedling"></i> Yield Farming
+                            </button>
+                            <button class="chip" onclick="setQuery('Track whale movements and large Bitcoin transactions today')">
+                                <i class="fas fa-fish"></i> Whale Tracker
+                            </button>
+                            <button class="chip" onclick="setQuery('Analyze gas fees and network congestion across blockchains')">
+                                <i class="fas fa-gauge-high"></i> Gas Analytics
+                            </button>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
 
-        <div class="examples">
-            <div class="example" onclick="setQuery('Analyze Bitcoin price trends and institutional adoption patterns')">
-                <div class="example-title"><i class="fas fa-chart-line"></i> Market Analysis</div>
-                <div class="example-desc">Bitcoin trends, institutional flows, and market sentiment analysis</div>
-            </div>
-            <div class="example" onclick="setQuery('Compare top DeFi protocols by TVL, yield, and risk metrics across chains')">
-                <div class="example-title"><i class="fas fa-coins"></i> DeFi Intelligence</div>
-                <div class="example-desc">Protocol comparison, yield analysis, and cross-chain opportunities</div>
-            </div>
-            <div class="example" onclick="setQuery('Evaluate Ethereum Layer 2 scaling solutions and adoption metrics')">
-                <div class="example-title"><i class="fas fa-layer-group"></i> Layer 2 Research</div>
-                <div class="example-desc">Scaling solutions, transaction costs, and ecosystem growth</div>
-            </div>
-            <div class="example" onclick="setQuery('Find optimal yield farming strategies with risk assessment')">
-                <div class="example-title"><i class="fas fa-seedling"></i> Yield Optimization</div>
-                <div class="example-desc">Cross-chain opportunities, APY tracking, and risk analysis</div>
-            </div>
-            <div class="example" onclick="setQuery('Track whale movements and large Bitcoin transactions today')">
-                <div class="example-title"><i class="fas fa-fish"></i> Whale Tracking</div>
-                <div class="example-desc">Large transactions, wallet analysis, and market impact</div>
-            </div>
-            <div class="example" onclick="setQuery('Analyze gas fees and network congestion across blockchains')">
-                <div class="example-title"><i class="fas fa-tachometer-alt"></i> Network Analytics</div>
-                <div class="example-desc">Gas prices, network utilization, and cost comparisons</div>
+                <!-- Input -->
+                <div class="input-area">
+                    <div class="input-box">
+                        <textarea
+                            id="queryInput"
+                            class="input-field"
+                            placeholder="Ask about crypto markets, DeFi protocols, blockchain analytics..."
+                            maxlength="1000"
+                            rows="1"
+                        ></textarea>
+                        <div class="input-actions">
+                            <span class="char-count" id="charCount">0 / 1000</span>
+                            <button id="sendBtn" class="send-btn" title="Send (Enter)">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <p class="input-hint"><kbd>Enter</kbd> to send &nbsp;·&nbsp; <kbd>Shift+Enter</kbd> for new line</p>
+                </div>
             </div>
-        </div>
+        </main>
     </div>
 
     <script src="/static/app.js"></script>