init this repo

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,38 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+
+# Environment & secrets
+.env
+.env.*
+!.env.example
+
+# Vite local config
+*.local
+vite.config.*.local
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Editor
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
+
+# Coverage
+coverage/
+
+# Local markdown docs
+/*.md
+!/README.md
+
+# Local scratch data
+tmp/

README.md

@@ -0,0 +1,159 @@
+# AXERA Lite WebUI
+
+A lightweight, local-first chat UI for OpenAI-compatible APIs.
+
+It runs entirely in the browser, supports streaming responses, and stores conversations locally.
+
+## Features
+
+- OpenAI-compatible chat interface
+- Streaming responses
+- Markdown rendering with code highlighting
+- Local conversation history in the browser
+- Image upload and paste for vision-capable models
+- Audio transcription workflow for compatible APIs
+- Configurable context window and auto-reset threshold
+- Light and dark themes
+
+## Requirements
+
+- Node.js 18+
+- An OpenAI-compatible API that supports:
+  - `GET /v1/models`
+  - `POST /v1/chat/completions`
+- Optional audio support:
+  - `POST /v1/audio/transcriptions`
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+Open:
+
+```text
+http://localhost:5173
+```
+
+## First-Time Setup
+
+1. Open **Settings**.
+2. Enter your **API Base URL**.
+3. Enter your **API Key** if your provider requires one.
+4. Set **Max Context Tokens** to the real limit of your model.
+5. Adjust **Auto-reset Threshold (%)** if needed.
+6. Click **Save Settings**.
+7. Click **Fetch Models**.
+8. Select a model from the top bar.
+
+![Settings screen](assets/settings.png)
+
+### API Base URL
+
+Use the server root URL. Do **not** append `/v1`.
+
+Correct:
+
+```text
+http://127.0.0.1:8000
+http://127.0.0.1:11434
+https://your-api.example.com
+```
+
+Incorrect:
+
+```text
+http://127.0.0.1:8000/v1
+http://127.0.0.1:11434/v1
+```
+
+## Usage
+
+- **Send:** `Enter`
+- **New line:** `Shift+Enter`
+- **Reset API context only:** `/reset`
+- **Clear current conversation and API context:** `/clean`
+
+### Images
+
+- Upload an image with the image button, or paste an image into the input box.
+- The current model must have **Vision** enabled.
+
+### Audio
+
+- Attach an audio file from the input bar.
+- The current model must have **Audio** enabled.
+- Your API must support `POST /v1/audio/transcriptions`.
+
+### Context Badge
+
+The `ctx x/y` badge in the input bar shows:
+
+- current estimated context usage
+- configured context window limit
+
+When usage approaches the configured threshold, the app automatically resets API context before the next send.
+
+## Development and Deployment
+
+### Development
+
+```bash
+npm run dev
+```
+
+Development mode includes a built-in proxy, which is useful when your API does not allow browser CORS requests during local development.
+
+### Production Preview
+
+```bash
+npm run build
+npm run preview
+```
+
+The production build is static. Your API must allow browser access directly, be served behind a reverse proxy, or share the same origin as the frontend.
+
+## Commands
+
+```bash
+npm run dev
+npm run build
+npm run preview
+npm test
+```
+
+## Data Storage
+
+Settings, model capability overrides, theme preference, and conversations are stored in your browser with `localStorage`.
+
+Clearing site storage resets the app.
+
+## Troubleshooting
+
+### Fetch Models fails
+
+- Make sure you clicked **Save Settings** first.
+- Make sure **API Base URL** does not include `/v1`.
+- Confirm your API supports `GET /v1/models`.
+- If it works in `npm run dev` but fails in preview or production, check CORS.
+
+### Model list is empty
+
+- Click **Fetch Models**.
+- Verify the request succeeded.
+- Confirm your API returns models from `GET /v1/models`.
+
+### Image button is disabled
+
+- Enable **Vision** for the selected model in **Settings**.
+
+### Audio button is disabled
+
+- Enable **Audio** for the selected model in **Settings**.
+- Confirm your backend supports audio transcription.
+
+### Requests fail even though the server is reachable
+
+Make sure your backend is compatible with the OpenAI Chat Completions format, especially `model`, `messages`, and streaming responses.

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AXERA Lite WebUI</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <script>(function(){var t=localStorage.getItem('theme')||'dark';if(t==='dark')document.documentElement.classList.add('dark');})()</script>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "lite-webui",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.1.5",
+    "autoprefixer": "^10.4.0",
+    "jsdom": "^29.1.1",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "vite": "^5.0.0",
+    "vitest": "^4.1.5"
+  },
+  "dependencies": {
+    "highlight.js": "^11.9.0",
+    "marked": "^12.0.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/api.js

@@ -0,0 +1,216 @@
+const DEV_PROXY_BASE = '/lw-proxy';
+const NON_ASCII_TOKEN_ESTIMATE = 1;
+const ASCII_CHARS_PER_TOKEN = 4;
+const IMAGE_MESSAGE_TOKEN_ESTIMATE = 256;
+
+/**
+ * Builds the fetch URL and headers for a given API call.
+ * In dev mode: routes through the Vite CORS proxy (/lw-proxy) using X-LW-Target.
+ * In prod mode: calls the baseUrl directly (server must have CORS configured).
+ *
+ * Exported for unit testing with an explicit isDev parameter.
+ */
+export function buildRequestConfig(baseUrl, apiKey, isDev = import.meta.env.DEV, options = {}) {
+  const cleanBase = String(baseUrl || '').trim().replace(/\/+$/, '');
+  const { contentType = 'application/json' } = options;
+  const headers = {};
+  if (contentType) headers['Content-Type'] = contentType;
+  if (apiKey) headers['Authorization'] = `Bearer ${apiKey}`;
+
+  if (isDev) {
+    headers['X-LW-Target'] = cleanBase;
+    return { urlBase: DEV_PROXY_BASE, headers };
+  }
+  return { urlBase: cleanBase, headers };
+}
+
+export async function fetchModels(baseUrl, apiKey) {
+  const { urlBase, headers } = buildRequestConfig(baseUrl, apiKey);
+  const url = `${urlBase}/v1/models`;
+  const res = await fetch(url, { headers });
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    throw new Error(`Failed to fetch models (${res.status}): ${text.slice(0, 200)}`);
+  }
+  const data = await res.json();
+  // OpenAI returns { data: [{ id, ... }] }
+  const list = data.data || data.models || data;
+  return Array.isArray(list) ? list.map(m => (typeof m === 'string' ? m : m.id)).filter(Boolean).sort() : [];
+}
+
+function extractAudioText(payload) {
+  if (typeof payload === 'string') return payload.trim();
+  if (typeof payload?.text === 'string') return payload.text.trim();
+  if (typeof payload?.transcript === 'string') return payload.transcript.trim();
+  if (typeof payload?.output_text === 'string') return payload.output_text.trim();
+  if (Array.isArray(payload?.segments)) {
+    return payload.segments
+      .map((segment) => String(segment?.text || '').trim())
+      .filter(Boolean)
+      .join(' ')
+      .trim();
+  }
+  return '';
+}
+
+async function submitAudioTextRequest(baseUrl, apiKey, model, file, endpoint, options = {}) {
+  const { prompt = '', language = '' } = options;
+  const { urlBase, headers } = buildRequestConfig(baseUrl, apiKey, import.meta.env.DEV, { contentType: null });
+  const url = `${urlBase}${endpoint}`;
+  const body = new FormData();
+
+  body.append('file', file, file?.name || 'audio.wav');
+  if (model) body.append('model', model);
+  if (prompt) body.append('prompt', prompt);
+  if (language) body.append('language', language);
+  body.append('response_format', 'json');
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers,
+    body,
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    let errMsg = `API error (${res.status})`;
+    try {
+      const json = JSON.parse(text);
+      errMsg = json.error?.message || errMsg;
+    } catch {
+      if (text) errMsg += ': ' + text.slice(0, 200);
+    }
+    throw new Error(errMsg);
+  }
+
+  const payload = await res.json().catch(async () => {
+    const text = await res.text().catch(() => '');
+    return { text };
+  });
+  const text = extractAudioText(payload);
+  if (!text) throw new Error('Audio API returned an empty text result');
+  return text;
+}
+
+export async function transcribeAudio(baseUrl, apiKey, model, file, options = {}) {
+  return submitAudioTextRequest(baseUrl, apiKey, model, file, '/v1/audio/transcriptions', options);
+}
+
+export function estimateTextTokens(text) {
+  const value = String(text || '');
+  let asciiChars = 0;
+  let nonAsciiTokens = 0;
+
+  for (const char of value) {
+    if (/\s/.test(char)) continue;
+    if (char.charCodeAt(0) <= 0x7f) {
+      asciiChars += 1;
+    } else {
+      nonAsciiTokens += NON_ASCII_TOKEN_ESTIMATE;
+    }
+  }
+
+  return nonAsciiTokens + Math.ceil(asciiChars / ASCII_CHARS_PER_TOKEN);
+}
+
+function estimateContentTokens(content) {
+  if (typeof content === 'string') return estimateTextTokens(content);
+  if (!Array.isArray(content)) return 0;
+
+  return content.reduce((total, part) => {
+    if (part?.type === 'text') return total + estimateTextTokens(part.text);
+    if (part?.type === 'image_url') return total + IMAGE_MESSAGE_TOKEN_ESTIMATE;
+    if (part?.type === 'video_url') return total + IMAGE_MESSAGE_TOKEN_ESTIMATE * 8; // rough: ~8 keyframes
+    return total;
+  }, 0);
+}
+
+export function estimateMessageTokens(messages) {
+  if (!Array.isArray(messages) || messages.length === 0) return 0;
+
+  return messages.reduce((total, message) => {
+    return total + 4 + estimateContentTokens(message.content);
+  }, 2);
+}
+
+export function formatCompactTokenCount(tokens) {
+  const safe = Math.max(0, Math.round(Number(tokens) || 0));
+
+  if (safe < 1000) return String(safe);
+  if (safe < 100000) return `${(safe / 1000).toFixed(1).replace(/\.0$/, '')}k`;
+  return `${Math.round(safe / 1000)}k`;
+}
+
+export async function* streamCompletion(baseUrl, apiKey, model, messages, options = {}) {
+  const { onUsage } = options;
+  const { urlBase, headers } = buildRequestConfig(baseUrl, apiKey);
+  const url = `${urlBase}/v1/chat/completions`;
+  const res = await fetch(url, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ model, messages, stream: true }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    let errMsg = `API error (${res.status})`;
+    try {
+      const json = JSON.parse(text);
+      errMsg = json.error?.message || errMsg;
+    } catch {
+      if (text) errMsg += ': ' + text.slice(0, 200);
+    }
+    throw new Error(errMsg);
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = '';
+
+  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
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (!trimmed) continue;
+      if (!trimmed.startsWith('data: ')) continue;
+
+      const data = trimmed.slice(6);
+      if (data === '[DONE]') return;
+
+      try {
+        const json = JSON.parse(data);
+        if (json.usage?.total_tokens != null) onUsage?.(json.usage);
+        const delta = json.choices?.[0]?.delta;
+        if (delta?.content) yield delta.content;
+      } catch {
+        // ignore malformed SSE lines
+      }
+    }
+  }
+
+  // flush any remaining buffer
+  if (buffer.trim().startsWith('data: ')) {
+    const data = buffer.trim().slice(6);
+    if (data && data !== '[DONE]') {
+      try {
+        const json = JSON.parse(data);
+        if (json.usage?.total_tokens != null) onUsage?.(json.usage);
+        const delta = json.choices?.[0]?.delta;
+        if (delta?.content) yield delta.content;
+      } catch { /* ignore */ }
+    }
+  }
+}
+
+export function formatMessagesForApi(messages) {
+  return messages.map(msg => {
+    if (msg.role === 'assistant') return { role: 'assistant', content: msg.content };
+    return { role: 'user', content: msg.content };
+  });
+}

src/capabilities.js

@@ -0,0 +1,35 @@
+export const DEFAULT_CAPABILITIES = {
+  'gpt-4o':                { text: true,  image: true,  audio: false },
+  'gpt-4o-mini':           { text: true,  image: true,  audio: false },
+  'gpt-4-turbo':           { text: true,  image: true,  audio: false },
+  'gpt-4-vision-preview':  { text: true,  image: true,  audio: false },
+  'gpt-4':                 { text: true,  image: false, audio: false },
+  'gpt-3.5-turbo':         { text: true,  image: false, audio: false },
+  'deepseek-v3':           { text: true,  image: false, audio: false },
+  'deepseek-chat':         { text: true,  image: false, audio: false },
+  'qwen2.5-7b-instruct':   { text: true,  image: false, audio: false },
+  'claude-3-5-sonnet':     { text: true,  image: true,  audio: false },
+  'claude-3-opus':         { text: true,  image: true,  audio: false },
+};
+
+const UNKNOWN_DEFAULT = { text: true, image: false, audio: false };
+
+export function getCapabilities(modelId, userOverrides = {}) {
+  const base = DEFAULT_CAPABILITIES[modelId] || UNKNOWN_DEFAULT;
+  const override = userOverrides[modelId];
+  if (!override) return { ...base };
+  return { ...base, ...override };
+}
+
+export function supportsImage(modelId, userOverrides = {}) {
+  return getCapabilities(modelId, userOverrides).image;
+}
+
+// Video is treated as part of the Vision capability — same toggle, same gate.
+export function supportsVideo(modelId, userOverrides = {}) {
+  return supportsImage(modelId, userOverrides);
+}
+
+export function supportsAudio(modelId, userOverrides = {}) {
+  return getCapabilities(modelId, userOverrides).audio;
+}

src/components/app.js

@@ -0,0 +1,502 @@
+import { store } from '../store.js';
+import {
+  streamCompletion,
+  formatMessagesForApi,
+  transcribeAudio,
+} from '../api.js';
+import { estimateThreadTokens, resolveContextConfig } from '../context.js';
+import { Sidebar } from './sidebar.js';
+import { Chat } from './chat.js';
+import { InputBar } from './input-bar.js';
+import { ModelPicker } from './model-picker.js';
+import { SettingsModal } from './settings-modal.js';
+import { icon } from '../icons.js';
+
+export class App {
+  constructor(rootEl) {
+    this.root = rootEl;
+    this.sidebar = new Sidebar();
+    this.chat = new Chat();
+    this.inputBar = new InputBar();
+    this.modelPicker = new ModelPicker();
+    this.settingsModal = new SettingsModal();
+    this._sidebarOpen = false;
+  }
+
+  init() {
+    this._render();
+    this._initTheme();
+    this._syncSidebarLayout();
+    this._bindEvents();
+    this._loadCurrentConversation();
+    this.settingsModal.render(); // pre-render (portal pattern)
+    this._updateContextInfo();
+    this.inputBar.focus();
+  }
+
+  _render() {
+    this.root.className = 'flex h-screen overflow-hidden bg-[var(--c-bg)]';
+
+    // Sidebar
+    const sidebarEl = this.sidebar.render();
+    this.root.appendChild(sidebarEl);
+
+    // Mobile overlay
+    this._mobileOverlay = document.createElement('div');
+    this._mobileOverlay.className = 'fixed inset-0 bg-black/50 z-20 hidden md:hidden';
+    this._mobileOverlay.addEventListener('click', () => this._closeMobileSidebar());
+    document.body.appendChild(this._mobileOverlay);
+
+    // Main content
+    const main = document.createElement('div');
+    main.className = 'flex flex-col flex-1 min-w-0 h-full';
+    main.id = 'main-content';
+
+    // Header
+    const header = document.createElement('header');
+    header.className = 'flex items-center justify-between px-4 py-2.5 border-b border-[var(--c-top-bd)] bg-[var(--c-top)] flex-shrink-0 gap-3';
+    header.innerHTML = `
+      <div class="flex items-center gap-3">
+        <button id="mobile-menu-btn" class="md:hidden p-1.5 rounded text-[var(--c-tx3)] hover:text-[var(--c-tx)] transition-colors" aria-label="Toggle sidebar">
+          ${icon('menu')}
+        </button>
+        <div id="model-picker-mount"></div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button id="theme-toggle-btn" class="p-1.5 rounded-lg text-[var(--c-tx3)] hover:text-[var(--c-tx2)] hover:bg-[var(--c-top-el)] border border-transparent hover:border-[var(--c-top-bd)] transition-all" aria-label="Toggle theme">
+          ${icon('sun')}
+        </button>
+        <button id="settings-btn" class="p-1.5 rounded-lg text-[var(--c-tx3)] hover:text-[var(--c-tx2)] hover:bg-[var(--c-top-el)] border border-transparent hover:border-[var(--c-top-bd)] transition-all" aria-label="Settings">
+          ${icon('settings')}
+        </button>
+      </div>
+    `;
+
+    // Mount model picker
+    header.querySelector('#model-picker-mount').appendChild(this.modelPicker.render());
+    main.appendChild(header);
+
+    // Chat area
+    const chatWrapper = document.createElement('div');
+    chatWrapper.className = 'flex-1 min-h-0 overflow-hidden';
+    chatWrapper.appendChild(this.chat.render());
+    main.appendChild(chatWrapper);
+
+    // Input bar
+    main.appendChild(this.inputBar.render());
+
+    this.root.appendChild(main);
+  }
+
+  _bindEvents() {
+    // Settings button
+    this.root.querySelector('#settings-btn').addEventListener('click', () => {
+      this.settingsModal.toggle();
+    });
+
+    // Theme toggle
+    this.root.querySelector('#theme-toggle-btn')?.addEventListener('click', () => {
+      this._toggleTheme();
+    });
+
+    // Mobile menu
+    this.root.querySelector('#mobile-menu-btn')?.addEventListener('click', () => {
+      this._toggleMobileSidebar();
+    });
+
+    window.addEventListener('resize', () => {
+      this._syncSidebarLayout();
+    });
+
+    // New chat
+    document.addEventListener('sidebar:newchat', () => this._newChat());
+
+    // Select conversation
+    document.addEventListener('sidebar:select', (e) => {
+      this._selectConversation(e.detail.convId);
+    });
+
+    // Delete conversation
+    document.addEventListener('sidebar:deleted', () => {
+      const currentId = store.getCurrentConversationId();
+      if (currentId) {
+        this._selectConversation(currentId);
+      } else {
+        this.chat.clear();
+        this.sidebar.update();
+      }
+    });
+
+    // Send message
+    document.addEventListener('inputbar:send', (e) => {
+      this._handleSend(e.detail.text, e.detail.image, e.detail.video, e.detail.audio);
+    });
+
+    // Model change
+    document.addEventListener('model:changed', () => {
+      this.inputBar.setModel(this.modelPicker.getModel());
+      this._updateContextInfo();
+    });
+
+    document.addEventListener('settings:changed', () => {
+      this.inputBar.setModel(this.modelPicker.getModel());
+      this._updateContextInfo();
+    });
+
+    document.addEventListener('models:changed', () => {
+      this.modelPicker.setModels(store.getAvailableModels());
+      this.inputBar.setModel(this.modelPicker.getModel());
+      this._updateContextInfo();
+    });
+  }
+
+  _loadCurrentConversation() {
+    const currentId = store.getCurrentConversationId();
+    if (currentId) {
+      const conv = store.getCurrentConversation();
+      if (conv) {
+        this.chat.loadConversation(conv);
+        this.modelPicker.syncToConversation(conv);
+        this.inputBar.setModel(this.modelPicker.getModel());
+        this._updateContextInfo();
+        return;
+      }
+    }
+    // No current or invalid current — pick first if exists
+    const convs = store.getConversations();
+    if (convs.length > 0) {
+      this._selectConversation(convs[0].id);
+    }
+  }
+
+  _newChat() {
+    const model = this.modelPicker.getModel();
+    const conv = store.createConversation(model);
+    store.setCurrentConversationId(conv.id);
+    this.chat.loadConversation(conv);
+    this.sidebar.update();
+    this._updateContextInfo();
+    this.inputBar.focus();
+    this._syncSidebarLayout();
+  }
+
+  _selectConversation(convId) {
+    store.setCurrentConversationId(convId);
+    const conv = store.getCurrentConversation();
+    if (!conv) {
+      this.chat.clear();
+      this._updateContextInfo();
+      return;
+    }
+    this.chat.loadConversation(conv);
+    this.modelPicker.syncToConversation(conv);
+    this.inputBar.setModel(this.modelPicker.getModel());
+    this.sidebar.update();
+    this._updateContextInfo();
+    this.inputBar.focus();
+    this._closeMobileSidebar();
+  }
+
+  async _handleSend(text, image, video, audio) {
+    const settings = store.getSettings();
+    const trimmedText = text.trim();
+
+    // /clean — wipes both the API context and the visual chat display
+    if (trimmedText === '/clean' && !image && !video && !audio) {
+      const convId = store.getCurrentConversationId();
+      if (convId) {
+        store.clearMessages(convId);
+        this.chat.clear();
+        this._updateContextInfo();
+      }
+      return;
+    }
+
+    if (trimmedText === '/reset' && !image && !video && !audio) {
+      this._resetConversationContext(store.getCurrentConversationId(), 'manual /reset command');
+      return;
+    }
+
+    // Ensure we have a conversation
+    let convId = store.getCurrentConversationId();
+    if (!convId) {
+      const conv = store.createConversation(this.modelPicker.getModel());
+      convId = conv.id;
+      store.setCurrentConversationId(convId);
+      this.sidebar.update();
+    }
+
+    const model = this.modelPicker.getModel();
+    if (!model) {
+      this.chat.showError('Error: no model selected for the current API Base URL');
+      return;
+    }
+
+    if (audio) {
+      await this._handleAudioTask({
+        convId,
+        model,
+        settings,
+        instruction: trimmedText,
+        audio,
+      });
+      return;
+    }
+
+    const contextConfig = resolveContextConfig(settings, model);
+    const userMessage = this._buildUserMessage(text, image, video);
+    const preConv = store.getCurrentConversation();
+    const projectedTokens = estimateThreadTokens(preConv?.messages, userMessage);
+
+    if (preConv?.messages?.length && projectedTokens >= contextConfig.resetTokens) {
+      this._resetConversationContext(
+        convId,
+        `estimated ${projectedTokens.toLocaleString()} tokens reached the ${contextConfig.resetPercent}% auto-reset threshold`
+      );
+    }
+
+    // Add to store & render
+    store.addMessage(convId, userMessage);
+    this.chat.appendUserMessage(userMessage);
+    this._updateContextInfo();
+
+    // Update title if first message
+    const conv = store.getCurrentConversation();
+    if (conv && conv.messages.length === 1) {
+      const title = text.slice(0, 40) || (video ? 'Video message' : 'Image message');
+      store.updateConversationTitle(convId, title);
+      this.sidebar.update();
+    }
+
+    // Disable input
+    this.inputBar.setSending(true);
+    this.chat.showTypingIndicator();
+
+    // Get conversation history for API
+    const currentConv = store.getCurrentConversation();
+    const apiMessages = formatMessagesForApi(currentConv.messages);
+
+    try {
+      this.chat.startAssistantMessage();
+      let fullText = '';
+
+      for await (const chunk of streamCompletion(settings.baseUrl, settings.apiKey, model, apiMessages)) {
+        fullText += chunk;
+        this.chat.appendToAssistantMessage(chunk);
+      }
+
+      // Finalize
+      this.chat.finalizeAssistantMessage(fullText);
+      store.addMessage(convId, {
+        role: 'assistant',
+        content: fullText,
+        timestamp: new Date().toISOString(),
+      });
+      this._updateContextInfo();
+      this.sidebar.update();
+    } catch (err) {
+      this.chat.showError(`Error: ${err.message}`);
+    } finally {
+      this.inputBar.setSending(false);
+      this.inputBar.focus();
+    }
+  }
+
+  _buildUserMessage(text, image, video) {
+    let content;
+    if (image) {
+      content = [
+        { type: 'text', text: text || '' },
+        { type: 'image_url', image_url: { url: image.dataUrl } },
+      ];
+    } else if (video) {
+      content = [
+        { type: 'text', text: text || '' },
+        { type: 'video_url', video_url: { url: video.dataUrl } },
+      ];
+    } else {
+      content = text;
+    }
+
+    return {
+      role: 'user',
+      content,
+      timestamp: new Date().toISOString(),
+    };
+  }
+
+  _buildAudioUserMessage(audio, instruction = '') {
+    const summary = `Audio upload: ${audio.file?.name || 'audio'}`;
+    const suffix = instruction ? `\nInstruction: ${instruction}` : '';
+    return {
+      role: 'user',
+      content: `${summary}${suffix}`,
+      timestamp: new Date().toISOString(),
+      meta: {
+        type: 'audio',
+        fileName: audio.file?.name || 'audio',
+      },
+    };
+  }
+
+  async _handleAudioTask({ convId, model, settings, instruction, audio }) {
+    const userMessage = this._buildAudioUserMessage(audio, instruction);
+    store.addMessage(convId, userMessage);
+    this.chat.appendUserMessage(userMessage);
+    this._updateContextInfo();
+
+    const conv = store.getCurrentConversation();
+    if (conv && conv.messages.length === 1) {
+      const title = (instruction || userMessage.content).slice(0, 40) || 'Audio task';
+      store.updateConversationTitle(convId, title);
+      this.sidebar.update();
+    }
+
+    this.inputBar.setSending(true);
+    this.chat.showTypingIndicator();
+
+    try {
+      const transcript = await transcribeAudio(settings.baseUrl, settings.apiKey, model, audio.file);
+
+      if (!instruction) {
+        this.chat.hideTypingIndicator();
+        this.chat.startAssistantMessage();
+        this.chat.finalizeAssistantMessage(transcript);
+        store.addMessage(convId, {
+          role: 'assistant',
+          content: transcript,
+          timestamp: new Date().toISOString(),
+        });
+        this._updateContextInfo();
+        this.sidebar.update();
+        return;
+      }
+
+      const followUpMessage = {
+        role: 'user',
+        content: [
+          `The following text came from an uploaded audio file.`,
+          `Task: ${instruction}`,
+          `Audio text:`,
+          transcript,
+        ].join('\n\n'),
+        timestamp: new Date().toISOString(),
+      };
+
+      const currentConv = store.getCurrentConversation();
+      const apiMessages = [
+        ...formatMessagesForApi(currentConv.messages),
+        { role: 'user', content: followUpMessage.content },
+      ];
+
+      this.chat.hideTypingIndicator();
+      this.chat.showSystemMessage('Audio transcribed — applying instruction');
+      this.chat.startAssistantMessage();
+
+      let fullText = '';
+      for await (const chunk of streamCompletion(settings.baseUrl, settings.apiKey, model, apiMessages)) {
+        fullText += chunk;
+        this.chat.appendToAssistantMessage(chunk);
+      }
+
+      this.chat.finalizeAssistantMessage(fullText);
+      store.addMessage(convId, {
+        role: 'assistant',
+        content: fullText,
+        timestamp: new Date().toISOString(),
+      });
+      this._updateContextInfo();
+      this.sidebar.update();
+    } catch (err) {
+      this.chat.showError(`Error: ${err.message}`);
+    } finally {
+      this.inputBar.setSending(false);
+      this.inputBar.focus();
+    }
+  }
+
+  _initTheme() {
+    const saved = localStorage.getItem('theme') || 'dark';
+    document.documentElement.classList.toggle('dark', saved === 'dark');
+    this._updateThemeBtn();
+  }
+
+  _toggleTheme() {
+    const isDark = document.documentElement.classList.toggle('dark');
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    this._updateThemeBtn();
+  }
+
+  _updateThemeBtn() {
+    const btn = this.root.querySelector('#theme-toggle-btn');
+    if (!btn) return;
+    const isDark = document.documentElement.classList.contains('dark');
+    btn.innerHTML = isDark ? icon('sun') : icon('moon');
+    btn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+  }
+
+  _resetConversationContext(convId, reason) {
+    if (!convId) return;
+    const conv = store.getConversations().find((item) => item.id === convId);
+    if (!conv) return;
+
+    const { maxTokens } = resolveContextConfig(store.getSettings(), this.modelPicker.getModel());
+    const currentTokens = estimateThreadTokens(conv.messages);
+    store.clearMessages(convId);
+    this.chat.showSystemMessage(
+      `Context /reset — cleared ${currentTokens.toLocaleString()} estimated tokens (${reason}; window ${maxTokens.toLocaleString()})`
+    );
+    this._updateContextInfo();
+  }
+
+  _updateContextInfo() {
+    const conv = store.getCurrentConversation();
+    const model = this.modelPicker.getModel();
+    const { maxTokens, warnTokens } = resolveContextConfig(store.getSettings(), model);
+    const currentTokens = estimateThreadTokens(conv?.messages);
+    this.inputBar.setContextInfo(currentTokens, maxTokens, warnTokens);
+  }
+
+  _toggleMobileSidebar() {
+    if (this._isDesktopLayout()) return;
+    this._sidebarOpen = !this._sidebarOpen;
+    this._syncSidebarLayout();
+  }
+
+  _closeMobileSidebar() {
+    if (this._isDesktopLayout()) {
+      this._syncSidebarLayout();
+      return;
+    }
+    this._sidebarOpen = false;
+    this._syncSidebarLayout();
+  }
+
+  _isDesktopLayout() {
+    return window.innerWidth >= 768;
+  }
+
+  _syncSidebarLayout() {
+    const sidebar = this.root.querySelector('#sidebar');
+    if (!sidebar) return;
+
+    if (this._isDesktopLayout()) {
+      sidebar.classList.remove('-translate-x-full', 'translate-x-0', 'fixed', 'inset-y-0', 'left-0', 'z-30');
+      this._mobileOverlay?.classList.add('hidden');
+      this._sidebarOpen = true;
+      return;
+    }
+
+    sidebar.classList.add('fixed', 'inset-y-0', 'left-0', 'z-30');
+
+    if (this._sidebarOpen) {
+      sidebar.classList.remove('-translate-x-full');
+      sidebar.classList.add('translate-x-0');
+      this._mobileOverlay?.classList.remove('hidden');
+    } else {
+      sidebar.classList.add('-translate-x-full');
+      sidebar.classList.remove('translate-x-0');
+      this._mobileOverlay?.classList.add('hidden');
+    }
+  }
+}

src/components/chat.js

@@ -0,0 +1,334 @@
+import { renderMarkdown, attachCopyButtons } from '../markdown.js';
+import { icon } from '../icons.js';
+
+const MAX_VISIBLE = 50;
+
+function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function getTextContent(message) {
+  if (typeof message.content === 'string') return message.content;
+  if (Array.isArray(message.content)) {
+    const textParts = message.content.filter(p => p.type === 'text').map(p => p.text);
+    return textParts.join('\n');
+  }
+  return '';
+}
+
+function getImageParts(message) {
+  if (!Array.isArray(message.content)) return [];
+  return message.content.filter(p => p.type === 'image_url');
+}
+
+function getVideoParts(message) {
+  if (!Array.isArray(message.content)) return [];
+  return message.content.filter(p => p.type === 'video_url');
+}
+
+function formatTime(iso) {
+  try {
+    return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return '';
+  }
+}
+
+export class Chat {
+  constructor() {
+    this.el = null;
+    this._messages = [];
+    this._offset = 0; // how many messages we've hidden
+    this._streamingEl = null;
+    this._typingEl = null;
+  }
+
+  render() {
+    const el = document.createElement('div');
+    el.className = 'flex flex-col h-full';
+    el.innerHTML = `
+      <div id="chat-messages" class="flex-1 overflow-y-auto py-6" role="log" aria-live="polite" aria-label="Chat messages">
+        ${this._welcomeScreen()}
+      </div>
+    `;
+    this.el = el;
+    return this.el;
+  }
+
+  _welcomeScreen() {
+    return `
+      <div id="welcome-screen" class="flex h-full items-center justify-center px-6 py-16">
+        <div class="w-full max-w-2xl text-center">
+          <h2 class="text-3xl font-semibold tracking-tight text-[var(--c-tx)] md:text-4xl">需要我为你做些什么？</h2>
+          <p class="mx-auto mt-4 max-w-xl text-sm leading-7 text-[var(--c-tx2)] md:text-[15px]">
+            直接开始提问，或先在 Settings 中配置模型与上下文限制。
+          </p>
+        </div>
+      </div>
+    `;
+  }
+
+  loadConversation(conversation) {
+    this._messages = conversation?.messages || [];
+    this._streamingEl = null;
+    this._typingEl = null;
+    this._rerender();
+  }
+
+  _rerender() {
+    const container = this.el.querySelector('#chat-messages');
+    if (!container) return;
+
+    container.innerHTML = '';
+
+    if (this._messages.length === 0) {
+      container.innerHTML = this._welcomeScreen();
+      return;
+    }
+
+    const msgs = this._messages;
+    const total = msgs.length;
+    this._offset = Math.max(0, total - MAX_VISIBLE);
+    const visible = msgs.slice(this._offset);
+
+    if (this._offset > 0) {
+      const loadMore = document.createElement('div');
+      loadMore.className = 'max-w-4xl mx-auto w-full px-6 flex justify-center py-4';
+      loadMore.innerHTML = `<button id="load-older-btn" class="text-[12px] text-[var(--c-tx3)] border border-[var(--c-bd)] rounded-full px-4 py-1.5 hover:text-[var(--c-tx2)] hover:border-[var(--c-bd-hi)] transition-all">Load ${this._offset} older messages</button>`;
+      loadMore.querySelector('#load-older-btn').addEventListener('click', () => this._loadOlder(container));
+      container.appendChild(loadMore);
+    }
+
+    visible.forEach(msg => {
+      const el = this._buildMessageEl(msg);
+      container.appendChild(el);
+    });
+
+    this._scrollToBottom();
+  }
+
+  _loadOlder(container) {
+    const loadMoreDiv = container.querySelector('#load-older-btn')?.parentElement;
+    const msgs = this._messages;
+    const newOffset = Math.max(0, this._offset - MAX_VISIBLE);
+    const olderMsgs = msgs.slice(newOffset, this._offset);
+    this._offset = newOffset;
+
+    const fragment = document.createDocumentFragment();
+    if (newOffset > 0) {
+      const newLoadMore = document.createElement('div');
+      newLoadMore.className = 'max-w-4xl mx-auto w-full px-6 flex justify-center py-4';
+      newLoadMore.innerHTML = `<button id="load-older-btn" class="text-[12px] text-[var(--c-tx3)] border border-[var(--c-bd)] rounded-full px-4 py-1.5 hover:text-[var(--c-tx2)] hover:border-[var(--c-bd-hi)] transition-all">Load ${newOffset} older messages</button>`;
+      newLoadMore.querySelector('#load-older-btn').addEventListener('click', () => this._loadOlder(container));
+      fragment.appendChild(newLoadMore);
+    }
+
+    olderMsgs.forEach(msg => {
+      fragment.appendChild(this._buildMessageEl(msg));
+    });
+
+    if (loadMoreDiv) {
+      container.insertBefore(fragment, loadMoreDiv);
+      loadMoreDiv.remove();
+    } else {
+      container.insertBefore(fragment, container.firstChild);
+    }
+  }
+
+  _buildMessageEl(msg) {
+    const isUser = msg.role === 'user';
+    const text = getTextContent(msg);
+    const images = getImageParts(msg);
+    const videos = getVideoParts(msg);
+    const time = formatTime(msg.timestamp);
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'message-enter max-w-4xl mx-auto w-full px-6 mb-4';
+    wrapper.dataset.msgId = msg.timestamp || Math.random();
+
+    if (isUser) {
+      const imageHtml = images.map(img => `
+        <img src="${img.image_url?.url || ''}" alt="Attached image" class="max-w-xs max-h-48 rounded-xl border border-[var(--c-bd)] object-cover mb-2" />
+      `).join('');
+
+      const videoHtml = videos.map(() => `
+        <video src="${escapeHtml(videos[0]?.video_url?.url || '')}" controls muted playsinline
+          class="max-w-xs max-h-48 rounded-xl border border-[var(--c-bd)] bg-black mb-2"></video>
+      `).join('');
+
+      wrapper.innerHTML = `
+        <div class="flex justify-end">
+          <div class="max-w-[65%]">
+            ${imageHtml}
+            ${videoHtml}
+            <div class="user-bubble px-4 py-3 text-[13.5px] text-[var(--c-utx)] whitespace-pre-wrap break-words leading-relaxed">${escapeHtml(text)}</div>
+            ${time ? `<div class="text-[11px] text-[var(--c-tx3)] mt-1.5 text-right">${time}</div>` : ''}
+          </div>
+        </div>
+      `;
+    } else {
+      const msgDiv = document.createElement('div');
+      msgDiv.className = 'w-full';
+
+      const bubble = document.createElement('div');
+      bubble.className = 'text-[13.5px] prose-dark leading-relaxed';
+      bubble.innerHTML = renderMarkdown(text);
+      attachCopyButtons(bubble);
+
+      msgDiv.appendChild(bubble);
+
+      if (time) {
+        const timeEl = document.createElement('div');
+        timeEl.className = 'text-[11px] text-[var(--c-tx3)] mt-2';
+        timeEl.textContent = time;
+        msgDiv.appendChild(timeEl);
+      }
+
+      wrapper.appendChild(msgDiv);
+    }
+
+    return wrapper;
+  }
+
+  appendUserMessage(message) {
+    this._messages.push(message);
+    const container = this.el.querySelector('#chat-messages');
+
+    // Remove welcome screen if present
+    const welcome = container.querySelector('#welcome-screen');
+    if (welcome) welcome.remove();
+
+    const el = this._buildMessageEl(message);
+    container.appendChild(el);
+    this._scrollToBottom();
+  }
+
+  showTypingIndicator() {
+    const container = this.el.querySelector('#chat-messages');
+    this.hideTypingIndicator();
+
+    this._typingEl = document.createElement('div');
+    this._typingEl.className = 'max-w-4xl mx-auto w-full px-6 mb-4';
+    this._typingEl.innerHTML = `
+      <div class="flex justify-start">
+        <div class="flex items-center gap-1.5 py-3 px-1">
+          <span class="typing-dot"></span>
+          <span class="typing-dot"></span>
+          <span class="typing-dot"></span>
+        </div>
+      </div>
+    `;
+    container.appendChild(this._typingEl);
+    this._scrollToBottom();
+  }
+
+  hideTypingIndicator() {
+    if (this._typingEl) {
+      this._typingEl.remove();
+      this._typingEl = null;
+    }
+  }
+
+  startAssistantMessage() {
+    this.hideTypingIndicator();
+    const container = this.el.querySelector('#chat-messages');
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'message-enter max-w-4xl mx-auto w-full px-6 mb-4';
+
+    const msgDiv = document.createElement('div');
+    msgDiv.className = 'w-full';
+
+    const bubble = document.createElement('div');
+    bubble.className = 'text-[13.5px] prose-dark leading-relaxed';
+    bubble.innerHTML = '<span class="streaming-cursor opacity-60">▋</span>';
+
+    msgDiv.appendChild(bubble);
+    wrapper.appendChild(msgDiv);
+    container.appendChild(wrapper);
+    this._scrollToBottom();
+    this._streamingEl = bubble;
+    this._streamingText = '';
+    return bubble;
+  }
+
+  appendToAssistantMessage(chunk) {
+    if (!this._streamingEl) return;
+    this._streamingText = (this._streamingText || '') + chunk;
+    // Re-render markdown during streaming for better UX
+    this._streamingEl.innerHTML = renderMarkdown(this._streamingText) + '<span class="streaming-cursor opacity-60 animate-pulse">▋</span>';
+    this._scrollToBottom();
+  }
+
+  finalizeAssistantMessage(fullText) {
+    if (!this._streamingEl) return;
+    this._streamingEl.innerHTML = renderMarkdown(fullText);
+    attachCopyButtons(this._streamingEl);
+    this._streamingEl = null;
+    this._streamingText = '';
+    this._messages.push({
+      role: 'assistant',
+      content: fullText,
+      timestamp: new Date().toISOString(),
+    });
+    this._scrollToBottom();
+  }
+
+  showError(message) {
+    const container = this.el.querySelector('#chat-messages');
+    this.hideTypingIndicator();
+    if (this._streamingEl) {
+      this._streamingEl.innerHTML = `<span class="text-red-400">${escapeHtml(message)}</span>`;
+      this._streamingEl = null;
+      this._streamingText = '';
+      return;
+    }
+    const errEl = document.createElement('div');
+    errEl.className = 'max-w-4xl mx-auto w-full px-6 mb-4 message-enter';
+    errEl.innerHTML = `
+      <div class="bg-red-950/40 border border-red-900/40 rounded-xl px-4 py-3 text-[13px] text-red-400 flex items-center gap-2">
+        ${icon('x')} ${escapeHtml(message)}
+      </div>
+    `;
+    container.appendChild(errEl);
+    this._scrollToBottom();
+  }
+
+  showSystemMessage(text) {
+    const container = this.el.querySelector('#chat-messages');
+    if (!container) return;
+    const welcome = container.querySelector('#welcome-screen');
+    if (welcome) welcome.remove();
+    const el = document.createElement('div');
+    el.className = 'max-w-4xl mx-auto w-full px-6 my-3 message-enter flex justify-center';
+    el.innerHTML = `
+      <div class="text-[11px] text-[var(--c-tx3)] border border-[var(--c-bd)] rounded-full px-3 py-1 bg-[var(--c-ho)] select-none">
+        ${escapeHtml(text)}
+      </div>
+    `;
+    container.appendChild(el);
+    this._scrollToBottom();
+  }
+
+  _scrollToBottom() {
+    const container = this.el.querySelector('#chat-messages');
+    if (container) {
+      requestAnimationFrame(() => {
+        container.scrollTop = container.scrollHeight;
+      });
+    }
+  }
+
+  clear() {
+    this._messages = [];
+    this._streamingEl = null;
+    this._streamingText = '';
+    this._typingEl = null;
+    const container = this.el.querySelector('#chat-messages');
+    if (container) container.innerHTML = this._welcomeScreen();
+  }
+}

src/components/input-bar.js

@@ -0,0 +1,411 @@
+import { store } from '../store.js';
+import { formatCompactTokenCount } from '../api.js';
+import { supportsAudio, supportsImage, supportsVideo } from '../capabilities.js';
+import { icon } from '../icons.js';
+
+const VIDEO_SIZE_LIMIT_MB = 50;
+
+export class InputBar {
+  constructor() {
+    this.el = null;
+    this._pendingImage = null; // { dataUrl, file }
+    this._pendingVideo = null; // { dataUrl, file }
+    this._pendingAudio = null; // { file }
+    this._currentModel = '';
+    this._sending = false;
+  }
+
+  render() {
+    const el = document.createElement('div');
+    el.className = 'border-t border-[var(--c-bd)] bg-[var(--c-bg)]';
+    el.innerHTML = this._template();
+    this.el = el;
+    this._bindEvents();
+    return this.el;
+  }
+
+  _template() {
+    const imageSupported = supportsImage(this._currentModel, store.getModelCapabilities());
+    const videoSupported = supportsVideo(this._currentModel, store.getModelCapabilities());
+    const audioSupported = supportsAudio(this._currentModel, store.getModelCapabilities());
+    const mediaSupported = imageSupported || videoSupported;
+    const mediaAccept = [imageSupported && 'image/*', videoSupported && 'video/*'].filter(Boolean).join(',') || 'image/*,video/*';
+    const mediaTitle = mediaSupported
+      ? `Attach ${[imageSupported && 'image', videoSupported && 'video'].filter(Boolean).join(' / ')} (or paste)`
+      : 'Vision not enabled for this model';
+    return `
+      <div class="px-4 pb-4 pt-3 max-w-4xl mx-auto w-full">
+        <input id="media-file-input" type="file" accept="${mediaAccept}" class="hidden" aria-label="Attach image or video" />
+        <input id="audio-file-input" type="file" accept="audio/*,.mp3,.wav,.m4a,.aac,.ogg,.flac,.webm" class="hidden" aria-label="Attach audio" />
+        <div class="flex flex-col bg-[var(--c-card)] border border-[var(--c-bd)] rounded-2xl focus-within:border-[var(--c-bd-hi)] transition-all duration-200 shadow-lg shadow-black/10">
+
+          <div id="image-preview-area" class="hidden px-3 pt-3 pb-1">
+            <div class="relative inline-block">
+              <img id="image-preview-thumb" src="" alt="Attached image"
+                class="max-h-24 max-w-[200px] rounded-xl border border-[var(--c-bd)] object-cover" />
+              <button id="remove-image-btn"
+                class="absolute -top-1.5 -right-1.5 bg-[var(--c-card)] border border-[var(--c-bd)] rounded-full w-5 h-5 flex items-center justify-center text-[var(--c-tx3)] hover:text-[var(--c-tx)] transition-colors"
+                aria-label="Remove image">
+                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            </div>
+          </div>
+
+          <div id="video-preview-area" class="hidden px-3 pt-3 pb-1">
+            <div class="relative inline-block">
+              <video id="video-preview-player" src="" controls muted playsinline
+                class="max-h-36 max-w-xs rounded-xl border border-[var(--c-bd)] bg-black"></video>
+              <button id="remove-video-btn"
+                class="absolute -top-1.5 -right-1.5 bg-[var(--c-card)] border border-[var(--c-bd)] rounded-full w-5 h-5 flex items-center justify-center text-[var(--c-tx3)] hover:text-[var(--c-tx)] transition-colors"
+                aria-label="Remove video">
+                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            </div>
+          </div>
+
+          <div id="audio-preview-area" class="hidden px-3 pt-3 pb-1">
+            <div class="flex items-center gap-2 rounded-xl border border-[var(--c-bd)] bg-[var(--c-ho)] px-3 py-2">
+              <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--c-hi)] text-[var(--c-tx3)]">
+                ${icon('audio')}
+              </div>
+              <div class="min-w-0 flex-1">
+                <div id="audio-file-name" class="truncate text-[13px] text-[var(--c-tx2)]"></div>
+                <div id="audio-mode-label" class="text-[11px] text-[var(--c-tx3)]">Audio will be transcribed before text processing</div>
+              </div>
+              <button id="remove-audio-btn"
+                class="flex h-7 w-7 items-center justify-center rounded-full border border-[var(--c-bd)] bg-[var(--c-ho)] text-[var(--c-tx3)] transition-colors hover:text-[var(--c-tx2)]"
+                aria-label="Remove audio"
+                type="button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            </div>
+          </div>
+
+          <textarea
+            id="message-input"
+            class="bg-transparent px-4 pt-3 pb-1 text-[13.5px] text-[var(--c-tx)] placeholder-[var(--c-txph)] focus:outline-none leading-relaxed resize-none w-full"
+            placeholder="Type a message…"
+            rows="1"
+            style="max-height: 144px; overflow-y: auto;"
+            aria-label="Message input"
+          ></textarea>
+
+          <div class="flex items-center justify-between px-2 pb-2 pt-1 gap-2">
+            <div class="flex items-center gap-0.5">
+              <button id="media-upload-btn"
+                class="flex items-center justify-center w-8 h-8 rounded-lg transition-all ${mediaSupported ? 'text-[var(--c-tx3)] hover:text-[var(--c-tx2)] hover:bg-[var(--c-hi)]' : 'text-[var(--c-tx3)] opacity-40 cursor-not-allowed'}"
+                ${mediaSupported ? '' : 'disabled'}
+                aria-label="Attach image or video"
+                title="${mediaTitle}">
+                ${icon('image')}
+              </button>
+              <button id="audio-upload-btn"
+                class="flex items-center justify-center w-8 h-8 rounded-lg transition-all ${audioSupported ? 'text-[var(--c-tx3)] hover:text-[var(--c-tx2)] hover:bg-[var(--c-hi)]' : 'text-[var(--c-tx3)] opacity-40 cursor-not-allowed'}"
+                ${audioSupported ? '' : 'disabled'}
+                aria-label="Attach audio"
+                title="${audioSupported ? 'Attach audio for transcription or translation' : 'Audio not enabled for this model'}">
+                ${icon('audio')}
+              </button>
+            </div>
+            <span id="context-info"
+              class="ml-auto text-right text-[11px] font-mono tabular-nums text-[var(--c-tx3)] transition-colors select-none"
+              title="Estimated context tokens / configured window">ctx 0</span>
+            <button id="send-btn"
+              class="flex items-center justify-center w-8 h-8 rounded-xl transition-all hover:bg-[var(--c-hi)]"
+              aria-label="Send message"
+              title="Send (Enter) · Shift+Enter for new line">
+              ${icon('send')}
+            </button>
+          </div>
+
+        </div>
+      </div>
+    `;
+  }
+
+  _bindEvents() {
+    const textarea = this.el.querySelector('#message-input');
+    const sendBtn = this.el.querySelector('#send-btn');
+    const mediaBtn = this.el.querySelector('#media-upload-btn');
+    const audioBtn = this.el.querySelector('#audio-upload-btn');
+    const fileInput = this.el.querySelector('#media-file-input');
+    const audioInput = this.el.querySelector('#audio-file-input');
+    const removeImageBtn = this.el.querySelector('#remove-image-btn');
+    const removeVideoBtn = this.el.querySelector('#remove-video-btn');
+    const removeAudioBtn = this.el.querySelector('#remove-audio-btn');
+
+    // Auto-resize textarea
+    textarea.addEventListener('input', () => this._autoResize(textarea));
+
+    // Enter sends; Shift+Enter inserts newline (default behaviour)
+    textarea.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        this._submit();
+      }
+    });
+
+    sendBtn.addEventListener('click', () => this._submit());
+
+    // Media (image/video) upload
+    mediaBtn?.addEventListener('click', () => {
+      if (!mediaBtn.disabled) fileInput.click();
+    });
+    audioBtn?.addEventListener('click', () => {
+      if (!audioBtn.disabled) audioInput.click();
+    });
+
+    fileInput.addEventListener('change', (e) => {
+      const file = e.target.files?.[0];
+      if (file) this._handleMediaFile(file);
+      fileInput.value = '';
+    });
+    audioInput.addEventListener('change', (e) => {
+      const file = e.target.files?.[0];
+      if (file) this._handleAudioFile(file);
+      audioInput.value = '';
+    });
+
+    removeImageBtn.addEventListener('click', () => this._clearImage());
+    removeVideoBtn?.addEventListener('click', () => this._clearVideo());
+    removeAudioBtn?.addEventListener('click', () => this._clearAudio());
+
+    // Paste media support
+    textarea.addEventListener('paste', (e) => this._handlePaste(e));
+
+    // Model change
+    document.addEventListener('model:changed', (e) => {
+      this.setModel(e.detail.model);
+    });
+    document.addEventListener('caps:changed', () => {
+      this._updateAttachmentButtons();
+    });
+  }
+
+  _autoResize(textarea) {
+    textarea.style.height = 'auto';
+    const scrollH = textarea.scrollHeight;
+    const maxH = 144; // max-height ~6 rows
+    textarea.style.height = Math.min(scrollH, maxH) + 'px';
+  }
+
+  async _handleImageFile(file) {
+    if (!file.type.startsWith('image/')) return;
+    if (this._pendingAudio) this._clearAudio();
+    if (this._pendingVideo) this._clearVideo();
+    const dataUrl = await this._fileToDataUrl(file);
+    this._pendingImage = { dataUrl, file };
+    this._showImagePreview(dataUrl);
+  }
+
+  async _handleVideoFile(file) {
+    if (!file.type.startsWith('video/')) return;
+    const sizeMB = file.size / (1024 * 1024);
+    if (sizeMB > VIDEO_SIZE_LIMIT_MB) {
+      alert(`Video file is too large (${sizeMB.toFixed(1)} MB). Please keep it under ${VIDEO_SIZE_LIMIT_MB} MB.`);
+      return;
+    }
+    if (this._pendingAudio) this._clearAudio();
+    if (this._pendingImage) this._clearImage();
+    const dataUrl = await this._fileToDataUrl(file);
+    this._pendingVideo = { dataUrl, file };
+    this._showVideoPreview(dataUrl);
+  }
+
+  _handleMediaFile(file) {
+    if (file.type.startsWith('image/')) {
+      this._handleImageFile(file);
+    } else if (file.type.startsWith('video/')) {
+      this._handleVideoFile(file);
+    }
+  }
+
+  _handleAudioFile(file) {
+    if (!String(file?.type || '').startsWith('audio/') && !/\.(mp3|wav|m4a|aac|ogg|flac|webm)$/i.test(file?.name || '')) return;
+    if (this._pendingImage) this._clearImage();
+    this._pendingAudio = { file };
+    this._showAudioPreview();
+  }
+
+  _fileToDataUrl(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (e) => resolve(e.target.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+
+  _showImagePreview(dataUrl) {
+    const previewArea = this.el.querySelector('#image-preview-area');
+    const thumb = this.el.querySelector('#image-preview-thumb');
+    thumb.src = dataUrl;
+    previewArea.classList.remove('hidden');
+  }
+
+  _clearImage() {
+    this._pendingImage = null;
+    const previewArea = this.el.querySelector('#image-preview-area');
+    const thumb = this.el.querySelector('#image-preview-thumb');
+    thumb.src = '';
+    previewArea.classList.add('hidden');
+  }
+
+  _showVideoPreview(dataUrl) {
+    const previewArea = this.el.querySelector('#video-preview-area');
+    const player = this.el.querySelector('#video-preview-player');
+    player.src = dataUrl;
+    previewArea.classList.remove('hidden');
+  }
+
+  _clearVideo() {
+    this._pendingVideo = null;
+    const previewArea = this.el.querySelector('#video-preview-area');
+    const player = this.el.querySelector('#video-preview-player');
+    if (player) { player.pause(); player.src = ''; }
+    previewArea?.classList.add('hidden');
+  }
+
+  _showAudioPreview() {
+    const previewArea = this.el.querySelector('#audio-preview-area');
+    const nameEl = this.el.querySelector('#audio-file-name');
+    if (!previewArea || !this._pendingAudio) return;
+    nameEl.textContent = this._pendingAudio.file?.name || 'audio';
+    previewArea.classList.remove('hidden');
+  }
+
+  _clearAudio() {
+    this._pendingAudio = null;
+    const previewArea = this.el.querySelector('#audio-preview-area');
+    const nameEl = this.el.querySelector('#audio-file-name');
+    if (nameEl) nameEl.textContent = '';
+    previewArea?.classList.add('hidden');
+  }
+
+  async _handlePaste(e) {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        const imageSupported = supportsImage(this._currentModel, store.getModelCapabilities());
+        if (!imageSupported) return;
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) await this._handleImageFile(file);
+        break;
+      }
+      if (item.type.startsWith('video/')) {
+        const videoSupported = supportsVideo(this._currentModel, store.getModelCapabilities());
+        if (!videoSupported) return;
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) await this._handleVideoFile(file);
+        break;
+      }
+      if (item.type.startsWith('audio/')) {
+        const audioSupported = supportsAudio(this._currentModel, store.getModelCapabilities());
+        if (!audioSupported) return;
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) this._handleAudioFile(file);
+        break;
+      }
+    }
+  }
+
+  _submit() {
+    if (this._sending) return;
+    const textarea = this.el.querySelector('#message-input');
+    const text = textarea.value.trim();
+    if (!text && !this._pendingImage && !this._pendingVideo && !this._pendingAudio) return;
+
+    const image = this._pendingImage;
+    const video = this._pendingVideo;
+    const audio = this._pendingAudio;
+    this._clearImage();
+    this._clearVideo();
+    this._clearAudio();
+    textarea.value = '';
+    this._autoResize(textarea);
+
+    document.dispatchEvent(new CustomEvent('inputbar:send', {
+      detail: { text, image, video, audio },
+    }));
+  }
+
+  setSending(sending) {
+    this._sending = sending;
+    const sendBtn = this.el.querySelector('#send-btn');
+    const textarea = this.el.querySelector('#message-input');
+    if (sendBtn) {
+      sendBtn.disabled = sending;
+      sendBtn.className = sending
+        ? 'flex items-center justify-center w-8 h-8 rounded-xl text-[var(--c-tx3)] cursor-not-allowed transition-all'
+        : 'flex items-center justify-center w-8 h-8 rounded-xl transition-all hover:bg-[var(--c-hi)]';
+      sendBtn.innerHTML = icon(sending ? 'sendMuted' : 'send');
+    }
+    if (textarea) textarea.disabled = sending;
+  }
+
+  setContextInfo(currentTokens, maxTokens, warnTokens = maxTokens) {
+    const el = this.el.querySelector('#context-info');
+    if (!el) return;
+    el.textContent = `ctx ${formatCompactTokenCount(currentTokens)}/${formatCompactTokenCount(maxTokens)}`;
+    el.title = `Estimated context ${Math.round(currentTokens)} / ${Math.round(maxTokens)} tokens`;
+    const warning = currentTokens >= warnTokens;
+    el.className = warning
+      ? 'ml-auto text-right text-[11px] font-mono tabular-nums text-amber-400 transition-colors select-none'
+      : 'ml-auto text-right text-[11px] font-mono tabular-nums text-[var(--c-tx3)] transition-colors select-none';
+  }
+
+  setKvCount(current, max) {
+    this.setContextInfo(current, max, Math.floor(max * 0.8));
+  }
+
+  setModel(modelId) {
+    this._currentModel = modelId;
+    this._updateAttachmentButtons();
+  }
+
+  _updateAttachmentButtons() {
+    const mediaBtn = this.el.querySelector('#media-upload-btn');
+    const audioBtn = this.el.querySelector('#audio-upload-btn');
+    const fileInput = this.el.querySelector('#media-file-input');
+    if (!mediaBtn || !audioBtn) return;
+    const imageSupported = supportsImage(this._currentModel, store.getModelCapabilities());
+    const videoSupported = supportsVideo(this._currentModel, store.getModelCapabilities());
+    const audioSupported = supportsAudio(this._currentModel, store.getModelCapabilities());
+    const mediaSupported = imageSupported || videoSupported;
+
+    if (mediaSupported) {
+      mediaBtn.disabled = false;
+      mediaBtn.className = 'flex items-center justify-center w-8 h-8 rounded-lg transition-all text-[var(--c-tx3)] hover:text-[var(--c-tx2)] hover:bg-[var(--c-hi)]';
+      const labels = [imageSupported && 'image', videoSupported && 'video'].filter(Boolean).join(' / ');
+      mediaBtn.title = `Attach ${labels} (or paste)`;
+      if (fileInput) {
+        fileInput.accept = [imageSupported && 'image/*', videoSupported && 'video/*'].filter(Boolean).join(',');
+      }
+    } else {
+      mediaBtn.disabled = true;
+      mediaBtn.className = 'flex items-center justify-center w-8 h-8 rounded-lg transition-all text-[var(--c-tx3)] opacity-40 cursor-not-allowed';
+      mediaBtn.title = 'Vision not enabled for this model';
+      if (this._pendingImage) this._clearImage();
+      if (this._pendingVideo) this._clearVideo();
+    }
+
+    if (audioSupported) {
+      audioBtn.disabled = false;
+      audioBtn.className = 'flex items-center justify-center w-8 h-8 rounded-lg transition-all text-[var(--c-tx3)] hover:text-[var(--c-tx2)] hover:bg-[var(--c-hi)]';
+      audioBtn.title = 'Attach audio for transcription or translation';
+    } else {
+      audioBtn.disabled = true;
+      audioBtn.className = 'flex items-center justify-center w-8 h-8 rounded-lg transition-all text-[var(--c-tx3)] opacity-40 cursor-not-allowed';
+      audioBtn.title = 'Audio not enabled for this model';
+      if (this._pendingAudio) this._clearAudio();
+    }
+  }
+
+  focus() {
+    this.el?.querySelector('#message-input')?.focus();
+  }
+}

src/components/model-picker.js

@@ -0,0 +1,176 @@
+import { store } from '../store.js';
+import { getCapabilities } from '../capabilities.js';
+import { icon } from '../icons.js';
+
+export class ModelPicker {
+  constructor() {
+    this.el = null;
+    this.dropdownEl = null;
+    this.open = false;
+    this._models = [];
+    this._currentModel = '';
+  }
+
+  render() {
+    const el = document.createElement('div');
+    el.className = 'relative';
+    el.innerHTML = this._buttonTemplate();
+    this.el = el;
+    this._bindEvents();
+    this._syncFromStore();
+    return this.el;
+  }
+
+  _buttonTemplate() {
+    const label = this._currentModel || 'Select a model';
+    const isPlaceholder = !this._currentModel;
+    const caps = this._currentModel ? getCapabilities(this._currentModel, store.getModelCapabilities()) : null;
+    const badges = caps ? [
+      caps.image ? '<span class="text-xs bg-[var(--c-hi)] text-[var(--c-tx3)] rounded px-1.5 py-0.5">Vision</span>' : '',
+      caps.audio ? '<span class="text-xs bg-[var(--c-hi)] text-[var(--c-tx3)] rounded px-1.5 py-0.5">Audio</span>' : '',
+    ].filter(Boolean).join('') : '';
+
+    return `
+      <button id="model-picker-btn" class="flex items-center gap-2 bg-[var(--c-top-el)] hover:bg-[var(--c-top-el-h)] border border-[var(--c-top-bd)] hover:border-[var(--c-bd-hi)] rounded-xl px-3 py-1.5 text-[13px] transition-all max-w-xs ${isPlaceholder ? 'text-[var(--c-tx3)]' : 'text-[var(--c-tx2)]'}" aria-haspopup="listbox" aria-expanded="false">
+        <span class="truncate model-name">${label}</span>
+        <span class="flex items-center gap-1 model-badges">${badges}</span>
+        <span class="flex-shrink-0 opacity-40">${icon('chevronDown')}</span>
+      </button>
+    `;
+  }
+
+  _buildDropdown() {
+    const div = document.createElement('div');
+    div.className = 'dropdown-enter absolute left-0 top-full mt-1.5 z-30 bg-[var(--c-card)] border border-[var(--c-bd)] rounded-xl shadow-2xl shadow-black/30 overflow-hidden min-w-48 max-w-xs';
+    div.setAttribute('role', 'listbox');
+
+    const allModels = this._getAllModels();
+    if (allModels.length === 0) {
+      div.innerHTML = `<div class="px-4 py-5 text-[12px] text-[var(--c-tx3)] text-center leading-relaxed">No models found.<br>Save Settings, then fetch models.</div>`;
+      return div;
+    }
+
+    const userCaps = store.getModelCapabilities();
+    const items = allModels.map(modelId => {
+      const caps = getCapabilities(modelId, userCaps);
+      const active = modelId === this._currentModel;
+      const badges = [
+        caps.image ? '<span class="text-[11px] bg-[var(--c-hi)] text-[var(--c-tx3)] rounded-md px-1.5 py-0.5">Vision</span>' : '',
+        caps.audio ? '<span class="text-[11px] bg-[var(--c-hi)] text-[var(--c-tx3)] rounded-md px-1.5 py-0.5">Audio</span>' : '',
+      ].filter(Boolean).join('');
+
+      return `
+        <button class="w-full flex items-center justify-between gap-2 px-3 py-2.5 text-[13px] hover:bg-[var(--c-hi)] transition-all text-left ${active ? 'text-[var(--c-tx)] bg-[var(--c-hi)]' : 'text-[var(--c-tx2)]'}" role="option" aria-selected="${active}" data-model="${modelId}">
+          <span class="truncate">${modelId}</span>
+          <span class="flex items-center gap-1 flex-shrink-0">${badges}</span>
+        </button>
+      `;
+    });
+
+    div.innerHTML = `<div class="overflow-y-auto max-h-64 py-1">${items.join('')}</div>`;
+
+    div.querySelectorAll('[data-model]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.setModel(btn.dataset.model);
+        this._closeDropdown();
+      });
+    });
+
+    return div;
+  }
+
+  _getAllModels() {
+    return [...new Set(this._models.filter(Boolean))].sort();
+  }
+
+  _bindEvents() {
+    const btn = this.el.querySelector('#model-picker-btn');
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.open ? this._closeDropdown() : this._openDropdown();
+    });
+
+    document.addEventListener('click', () => {
+      if (this.open) this._closeDropdown();
+    });
+
+    document.addEventListener('caps:changed', () => this._updateButton());
+    document.addEventListener('settings:changed', () => this._syncFromStore());
+    document.addEventListener('models:changed', () => this._syncFromStore());
+  }
+
+  _syncFromStore() {
+    this._models = store.getAvailableModels();
+    const selected = store.getCurrentModel();
+    this._currentModel = this._models.includes(selected) ? selected : '';
+    this._updateButton();
+  }
+
+  _openDropdown() {
+    this._closeDropdown();
+    this.dropdownEl = this._buildDropdown();
+    this.el.appendChild(this.dropdownEl);
+    this.open = true;
+    this.el.querySelector('#model-picker-btn').setAttribute('aria-expanded', 'true');
+  }
+
+  _closeDropdown() {
+    if (this.dropdownEl && this.dropdownEl.parentNode) {
+      this.dropdownEl.parentNode.removeChild(this.dropdownEl);
+    }
+    this.dropdownEl = null;
+    this.open = false;
+    this.el?.querySelector('#model-picker-btn')?.setAttribute('aria-expanded', 'false');
+  }
+
+  _updateButton() {
+    const isPlaceholder = !this._currentModel;
+    const caps = this._currentModel ? getCapabilities(this._currentModel, store.getModelCapabilities()) : null;
+    const badges = caps ? [
+      caps.image ? '<span class="text-xs bg-[var(--c-hi)] text-[var(--c-tx3)] rounded px-1.5 py-0.5">Vision</span>' : '',
+      caps.audio ? '<span class="text-xs bg-[var(--c-hi)] text-[var(--c-tx3)] rounded px-1.5 py-0.5">Audio</span>' : '',
+    ].filter(Boolean).join('') : '';
+
+    const nameEl = this.el?.querySelector('.model-name');
+    const badgesEl = this.el?.querySelector('.model-badges');
+    const btn = this.el?.querySelector('#model-picker-btn');
+    if (nameEl) nameEl.textContent = this._currentModel || 'Select a model';
+    if (badgesEl) badgesEl.innerHTML = badges;
+    if (btn) {
+      btn.classList.remove('text-[var(--c-tx3)]', 'text-[var(--c-tx2)]');
+      btn.classList.add(isPlaceholder ? 'text-[var(--c-tx3)]' : 'text-[var(--c-tx2)]');
+    }
+  }
+
+  setModel(modelId) {
+    this._currentModel = modelId;
+    store.setCurrentModel(store.getSettings().baseUrl, modelId);
+    this._updateButton();
+    document.dispatchEvent(new CustomEvent('model:changed', { detail: { model: modelId } }));
+  }
+
+  getModel() {
+    return this._currentModel;
+  }
+
+  setModels(models) {
+    this._models = [...new Set((models || []).filter(Boolean))].sort();
+    const selected = store.getCurrentModel();
+    if (selected && !this._models.includes(selected)) {
+      this._currentModel = '';
+      store.setCurrentModel(store.getSettings().baseUrl, '');
+      document.dispatchEvent(new CustomEvent('model:changed', { detail: { model: '' } }));
+    } else {
+      this._currentModel = this._models.includes(selected) ? selected : '';
+    }
+    if (this.open) {
+      this._closeDropdown();
+      this._openDropdown();
+    }
+    this._updateButton();
+  }
+
+  syncToConversation(conv) {
+    this._syncFromStore();
+  }
+}

src/components/settings-modal.js

@@ -0,0 +1,243 @@
+import { store } from '../store.js';
+import { DEFAULT_CAPABILITIES } from '../capabilities.js';
+import { fetchModels } from '../api.js';
+import {
+  DEFAULT_CONTEXT_LIMIT_TOKENS,
+  DEFAULT_CONTEXT_RESET_THRESHOLD_PERCENT,
+} from '../context.js';
+import { icon } from '../icons.js';
+
+export class SettingsModal {
+  constructor() {
+    this.el = null;
+    this.visible = false;
+    this._fetchedModels = [];
+  }
+
+  render() {
+    const el = document.createElement('div');
+    el.innerHTML = this._template();
+    this.el = el.firstElementChild;
+    this._bindEvents();
+    return this.el;
+  }
+
+  _template() {
+    return `
+      <div class="modal-backdrop fixed inset-0 z-50 flex items-start justify-center pt-16 px-4 pb-8" style="background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);">
+        <div class="modal-panel bg-[var(--c-card)] border border-[var(--c-bd)] rounded-lg w-full max-w-lg max-h-[80vh] flex flex-col shadow-2xl">
+          <div class="flex items-center justify-between px-5 py-4 border-b border-[var(--c-bd)] flex-shrink-0">
+            <h2 class="text-[var(--c-tx)] font-semibold text-base">Settings</h2>
+            <button id="settings-close" class="text-[var(--c-tx3)] hover:text-[var(--c-tx)] transition-colors p-1 rounded" aria-label="Close settings">
+              ${icon('x')}
+            </button>
+          </div>
+          <div class="overflow-y-auto flex-1 px-5 py-4 space-y-6">
+            <!-- API Config -->
+            <section>
+              <h3 class="text-[var(--c-tx3)] font-medium text-sm mb-3 uppercase tracking-wide">API Configuration</h3>
+              <div class="space-y-3">
+                <div>
+                  <label class="block text-sm text-[var(--c-tx3)] mb-1" for="settings-base-url">API Base URL</label>
+                  <input id="settings-base-url" type="url" class="w-full bg-[var(--c-sf)] border border-[var(--c-bd)] rounded px-3 py-2 text-sm text-[var(--c-tx)] placeholder-[var(--c-txph)] focus:outline-none focus:border-[var(--c-bd-hi)] transition-colors" placeholder="https://api.openai.com" />
+                </div>
+                <div>
+                  <label class="block text-sm text-[var(--c-tx3)] mb-1" for="settings-api-key">API Key</label>
+                  <input id="settings-api-key" type="password" class="w-full bg-[var(--c-sf)] border border-[var(--c-bd)] rounded px-3 py-2 text-sm text-[var(--c-tx)] placeholder-[var(--c-txph)] focus:outline-none focus:border-[var(--c-bd-hi)] transition-colors" placeholder="sk-..." />
+                </div>
+                <div>
+                  <label class="block text-sm text-[var(--c-tx3)] mb-1" for="settings-context-limit">Max Context Tokens</label>
+                  <input id="settings-context-limit" type="number" min="1024" step="1024" class="w-full bg-[var(--c-sf)] border border-[var(--c-bd)] rounded px-3 py-2 text-sm text-[var(--c-tx)] placeholder-[var(--c-txph)] focus:outline-none focus:border-[var(--c-bd-hi)] transition-colors" placeholder="${DEFAULT_CONTEXT_LIMIT_TOKENS}" />
+                  <p class="mt-1 text-xs text-[var(--c-tx3)]">This value is used directly for the context badge and auto-reset logic. For on-device models, set the exact limit here.</p>
+                </div>
+                <div>
+                  <label class="block text-sm text-[var(--c-tx3)] mb-1" for="settings-context-threshold">Auto-reset Threshold (%)</label>
+                  <input id="settings-context-threshold" type="number" min="50" max="95" step="1" class="w-full bg-[var(--c-sf)] border border-[var(--c-bd)] rounded px-3 py-2 text-sm text-[var(--c-tx)] placeholder-[var(--c-txph)] focus:outline-none focus:border-[var(--c-bd-hi)] transition-colors" placeholder="${DEFAULT_CONTEXT_RESET_THRESHOLD_PERCENT}" />
+                  <p class="mt-1 text-xs text-[var(--c-tx3)]">Resets the API context before a send when estimated usage reaches this percentage of the configured window.</p>
+                </div>
+                <button id="settings-save" class="bg-[var(--c-tx)] text-[var(--c-bg)] font-medium text-sm px-4 py-2 rounded hover:opacity-90 transition-opacity">Save Settings</button>
+              </div>
+            </section>
+
+            <!-- Model Capabilities -->
+            <section>
+              <div class="flex items-center justify-between mb-3">
+                <h3 class="text-[var(--c-tx3)] font-medium text-sm uppercase tracking-wide">Model Capabilities</h3>
+                <button id="fetch-models-btn" class="flex items-center gap-1.5 text-xs text-[var(--c-tx3)] hover:text-[var(--c-tx)] border border-[var(--c-bd)] rounded px-3 py-1.5 transition-colors">
+                  ${icon('refresh')} Fetch Models
+                </button>
+              </div>
+              <div id="model-caps-list" class="space-y-1">
+                <!-- Populated dynamically -->
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  _bindEvents() {
+    this.el.querySelector('#settings-close').addEventListener('click', () => this.hide());
+    this.el.addEventListener('mousedown', (e) => {
+      if (e.target === this.el) {
+        this._backdropMouseDown = true;
+      } else {
+        this._backdropMouseDown = false;
+      }
+    });
+    this.el.addEventListener('click', (e) => {
+      if (e.target === this.el && this._backdropMouseDown) this.hide();
+      this._backdropMouseDown = false;
+    });
+
+    this.el.querySelector('#settings-save').addEventListener('click', () => this._saveSettings());
+    this.el.querySelector('#fetch-models-btn').addEventListener('click', () => this._fetchModels());
+
+    // Load current values
+    this._loadValues();
+    this._renderModelCaps();
+  }
+
+  _loadValues() {
+    const settings = store.getSettings();
+    this.el.querySelector('#settings-base-url').value = settings.baseUrl || '';
+    this.el.querySelector('#settings-api-key').value = settings.apiKey || '';
+    this.el.querySelector('#settings-context-limit').value = settings.contextLimitTokens || '';
+    this.el.querySelector('#settings-context-threshold').value =
+      settings.contextResetThresholdPercent || DEFAULT_CONTEXT_RESET_THRESHOLD_PERCENT;
+    this._fetchedModels = store.getAvailableModels(settings.baseUrl);
+  }
+
+  _saveSettings() {
+    const previousBaseUrl = store.getSettings().baseUrl;
+    const baseUrl = this.el.querySelector('#settings-base-url').value.trim() || 'https://api.openai.com';
+    const apiKey = this.el.querySelector('#settings-api-key').value.trim();
+    const rawContextLimit = this.el.querySelector('#settings-context-limit').value.trim();
+    const contextLimitTokens = rawContextLimit
+      ? Math.max(1024, Math.round(Number(rawContextLimit) || DEFAULT_CONTEXT_LIMIT_TOKENS))
+      : DEFAULT_CONTEXT_LIMIT_TOKENS;
+    const rawThreshold = Number(this.el.querySelector('#settings-context-threshold').value);
+    const contextResetThresholdPercent = Number.isFinite(rawThreshold)
+      ? Math.min(95, Math.max(50, Math.round(rawThreshold)))
+      : DEFAULT_CONTEXT_RESET_THRESHOLD_PERCENT;
+
+    store.saveSettings({
+      ...store.getSettings(),
+      baseUrl,
+      apiKey,
+      contextLimitTokens,
+      contextResetThresholdPercent,
+    });
+
+    this._fetchedModels = store.getAvailableModels(baseUrl);
+    const availableModels = store.getAvailableModels(baseUrl);
+    const currentModel = store.getCurrentModel(baseUrl);
+    if (previousBaseUrl !== baseUrl && !availableModels.length) {
+      store.setCurrentModel(baseUrl, '');
+      document.dispatchEvent(new CustomEvent('model:changed', { detail: { model: '' } }));
+    } else if (currentModel && !availableModels.includes(currentModel)) {
+      store.setCurrentModel(baseUrl, '');
+      document.dispatchEvent(new CustomEvent('model:changed', { detail: { model: '' } }));
+    }
+
+    const btn = this.el.querySelector('#settings-save');
+    btn.textContent = 'Saved!';
+    setTimeout(() => { btn.textContent = 'Save Settings'; }, 2000);
+
+    document.dispatchEvent(new CustomEvent('settings:changed'));
+    document.dispatchEvent(new CustomEvent('models:changed'));
+  }
+
+  async _fetchModels() {
+    const btn = this.el.querySelector('#fetch-models-btn');
+    const settings = store.getSettings();
+    btn.disabled = true;
+    btn.innerHTML = `<span class="opacity-60">Fetching...</span>`;
+    try {
+      const models = await fetchModels(settings.baseUrl, settings.apiKey);
+      this._fetchedModels = models;
+       store.saveAvailableModels(settings.baseUrl, models);
+       const currentModel = store.getCurrentModel(settings.baseUrl);
+       if (currentModel && !models.includes(currentModel)) {
+         store.setCurrentModel(settings.baseUrl, '');
+         document.dispatchEvent(new CustomEvent('model:changed', { detail: { model: '' } }));
+       }
+      this._renderModelCaps(models);
+      document.dispatchEvent(new CustomEvent('models:changed'));
+    } catch (err) {
+      this.el.querySelector('#model-caps-list').innerHTML =
+        `<p class="text-sm text-red-400">Failed to fetch: ${err.message}</p>`;
+    } finally {
+      btn.disabled = false;
+      btn.innerHTML = `${icon('refresh')} Fetch Models`;
+    }
+  }
+
+  _renderModelCaps(extraModels = []) {
+    const container = this.el.querySelector('#model-caps-list');
+    const userCaps = store.getModelCapabilities();
+    const allModelIds = new Set(extraModels);
+
+    const rows = [...allModelIds].sort().map(modelId => {
+      const base = DEFAULT_CAPABILITIES[modelId] || { text: true, image: false, audio: false };
+      const override = userCaps[modelId] || {};
+      const caps = { ...base, ...override };
+      return `
+        <div class="flex items-center justify-between py-2 border-b border-[var(--c-bd)] gap-2" data-model="${modelId}">
+          <span class="text-sm text-[var(--c-tx2)] truncate flex-1">${modelId}</span>
+          <div class="flex items-center gap-3 flex-shrink-0">
+            <label class="flex items-center gap-1 text-xs text-[var(--c-tx3)] cursor-pointer">
+              <input type="checkbox" class="cap-check accent-current" data-cap="image" ${caps.image ? 'checked' : ''} />
+              Vision
+            </label>
+            <label class="flex items-center gap-1 text-xs text-[var(--c-tx3)] cursor-pointer">
+              <input type="checkbox" class="cap-check accent-current" data-cap="audio" ${caps.audio ? 'checked' : ''} />
+              Audio
+            </label>
+          </div>
+        </div>
+      `;
+    });
+
+    container.innerHTML = rows.join('') || '<p class="text-sm text-[var(--c-tx3)]">No models found. Fetch models or use defaults.</p>';
+
+    // Bind changes
+    container.querySelectorAll('.cap-check').forEach(cb => {
+      cb.addEventListener('change', () => this._saveCapChange(cb));
+    });
+  }
+
+  _saveCapChange(checkbox) {
+    const row = checkbox.closest('[data-model]');
+    const modelId = row.dataset.model;
+    const cap = checkbox.dataset.cap;
+    const userCaps = store.getModelCapabilities();
+    if (!userCaps[modelId]) {
+      const base = DEFAULT_CAPABILITIES[modelId] || { text: true, image: false, audio: false };
+      userCaps[modelId] = { ...base };
+    }
+    userCaps[modelId][cap] = checkbox.checked;
+    store.saveModelCapabilities(store.getSettings().baseUrl, userCaps);
+    document.dispatchEvent(new CustomEvent('caps:changed'));
+  }
+
+  show() {
+    if (!this.el) return;
+    this._loadValues();
+    this._renderModelCaps(this._fetchedModels);
+    document.body.appendChild(this.el);
+    this.visible = true;
+  }
+
+  hide() {
+    if (this.el && this.el.parentNode) {
+      this.el.parentNode.removeChild(this.el);
+    }
+    this.visible = false;
+  }
+
+  toggle() {
+    this.visible ? this.hide() : this.show();
+  }
+}

src/components/sidebar.js

@@ -0,0 +1,134 @@
+import { store } from '../store.js';
+import { icon } from '../icons.js';
+
+function relativeTime(isoString) {
+  const now = Date.now();
+  const then = new Date(isoString).getTime();
+  const diff = Math.floor((now - then) / 1000);
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
+  return new Date(isoString).toLocaleDateString();
+}
+
+export class Sidebar {
+  constructor() {
+    this.el = null;
+    this._mobileOpen = false;
+  }
+
+  render() {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'relative';
+    wrapper.innerHTML = this._template();
+    this.el = wrapper.firstElementChild;
+    this._bindEvents();
+    return this.el;
+  }
+
+  _template() {
+    const convs = store.getConversations();
+    const currentId = store.getCurrentConversationId();
+
+    const items = convs.map(conv => {
+      const active = conv.id === currentId;
+      return `
+        <div class="group relative flex items-center gap-2 rounded-xl cursor-pointer border px-3 py-2.5 transition-all ${active ? 'border-[var(--c-side-act-bd)] bg-[var(--c-side-act)]' : 'border-transparent hover:border-[var(--c-side-bd)] hover:bg-[var(--c-side-el)]'}" data-conv-id="${conv.id}" role="option" aria-selected="${active}">
+          <div class="flex-1 min-w-0">
+            <div class="text-[13px] truncate ${active ? 'font-medium text-[var(--c-side-tx)]' : 'text-[var(--c-side-tx2)]'}">${escapeHtml(conv.title || 'New Chat')}</div>
+            <div class="mt-0.5 truncate text-[11px] text-[var(--c-side-tx3)]">${relativeTime(conv.updatedAt || conv.createdAt)}</div>
+          </div>
+          <button class="delete-conv flex-shrink-0 p-1 rounded-md text-[var(--c-side-tx3)] opacity-0 transition-all group-hover:opacity-100 hover:bg-[var(--c-side-el-h)] hover:text-[var(--c-side-tx)]" data-conv-id="${conv.id}" aria-label="Delete conversation">
+            ${icon('trash')}
+          </button>
+        </div>
+      `;
+    }).join('');
+
+    return `
+      <aside id="sidebar" class="sidebar-transition flex h-full w-56 flex-col border-r border-[var(--c-side-bd)] bg-[var(--c-side)] flex-shrink-0">
+        <div class="px-3 pt-3 pb-2">
+          <button id="new-chat-btn" class="flex w-full items-center justify-center gap-1.5 rounded-xl border border-[var(--c-side-bd)] bg-[var(--c-side-el)] px-3 py-2.5 text-[12px] text-[var(--c-side-tx2)] transition-all hover:bg-[var(--c-side-el-h)] hover:text-[var(--c-side-tx)] hover:border-[var(--c-side-act-bd)]" aria-label="New chat">
+            ${icon('plus')} <span>New Chat</span>
+          </button>
+        </div>
+        <div id="conv-list" class="flex-1 overflow-y-auto pb-2 px-2 space-y-px" role="listbox" aria-label="Conversations">
+          ${items || '<div class="px-4 py-10 text-center text-[11px] leading-relaxed text-[var(--c-side-tx3)]">No conversations yet.<br>Start a new chat!</div>'}
+        </div>
+        <div class="border-t border-[var(--c-side-bd)] px-3 py-3">
+          <div class="flex items-center gap-2 rounded-xl px-1.5 py-1">
+            <div class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg border border-[var(--c-side-bd)] bg-[var(--c-side-el)]">
+              <img src="/logo.svg" alt="" class="h-4 w-4 object-contain" aria-hidden="true" />
+            </div>
+            <div class="min-w-0">
+              <div class="truncate text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--c-side-tx2)]">AXERA</div>
+              <div class="truncate text-[10px] text-[var(--c-side-tx3)]">Lite WebUI</div>
+            </div>
+          </div>
+        </div>
+      </aside>
+    `;
+  }
+
+  _bindEvents() {
+    this.el.querySelector('#new-chat-btn').addEventListener('click', () => {
+      document.dispatchEvent(new CustomEvent('sidebar:newchat'));
+    });
+
+    this.el.querySelector('#conv-list').addEventListener('click', (e) => {
+      const delBtn = e.target.closest('.delete-conv');
+      if (delBtn) {
+        e.stopPropagation();
+        const convId = delBtn.dataset.convId;
+        if (confirm('Delete this conversation?')) {
+          store.deleteConversation(convId);
+          document.dispatchEvent(new CustomEvent('sidebar:deleted', { detail: { convId } }));
+          this.update();
+        }
+        return;
+      }
+      const item = e.target.closest('[data-conv-id]');
+      if (item && !item.classList.contains('delete-conv')) {
+        const convId = item.dataset.convId;
+        document.dispatchEvent(new CustomEvent('sidebar:select', { detail: { convId } }));
+      }
+    });
+  }
+
+  update() {
+    const list = this.el.querySelector('#conv-list');
+    const convs = store.getConversations();
+    const currentId = store.getCurrentConversationId();
+
+    if (convs.length === 0) {
+      list.innerHTML = '<div class="px-4 py-10 text-center text-[11px] leading-relaxed text-[var(--c-side-tx3)]">No conversations yet.<br>Start a new chat!</div>';
+      return;
+    }
+
+    const items = convs.map(conv => {
+      const active = conv.id === currentId;
+      return `
+        <div class="group relative flex items-center gap-2 rounded-xl cursor-pointer border px-3 py-2.5 transition-all ${active ? 'border-[var(--c-side-act-bd)] bg-[var(--c-side-act)]' : 'border-transparent hover:border-[var(--c-side-bd)] hover:bg-[var(--c-side-el)]'}" data-conv-id="${conv.id}" role="option" aria-selected="${active}">
+          <div class="flex-1 min-w-0">
+            <div class="text-[13px] truncate ${active ? 'font-medium text-[var(--c-side-tx)]' : 'text-[var(--c-side-tx2)]'}">${escapeHtml(conv.title || 'New Chat')}</div>
+            <div class="mt-0.5 truncate text-[11px] text-[var(--c-side-tx3)]">${relativeTime(conv.updatedAt || conv.createdAt)}</div>
+          </div>
+          <button class="delete-conv flex-shrink-0 p-1 rounded-md text-[var(--c-side-tx3)] opacity-0 transition-all group-hover:opacity-100 hover:bg-[var(--c-side-el-h)] hover:text-[var(--c-side-tx)]" data-conv-id="${conv.id}" aria-label="Delete conversation">
+            ${icon('trash')}
+          </button>
+        </div>
+      `;
+    }).join('');
+
+    list.innerHTML = items;
+  }
+}
+
+function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}

src/context.js

@@ -0,0 +1,56 @@
+import { estimateMessageTokens } from './api.js';
+
+export const DEFAULT_CONTEXT_LIMIT_TOKENS = 4096;
+export const DEFAULT_CONTEXT_WARN_PERCENT = 80;
+export const DEFAULT_CONTEXT_RESET_THRESHOLD_PERCENT = 85;
+export const DEFAULT_CONTEXT_RESPONSE_RESERVE = 2048;
+export const DEFAULT_CONTEXT_RESPONSE_RESERVE_RATIO = 0.2;
+
+function toPositiveInteger(value) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) return null;
+  return Math.round(parsed);
+}
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function resolveContextConfig(settings = {}, modelId = '') {
+  const configuredMaxTokens = toPositiveInteger(settings.contextLimitTokens);
+  const maxTokens = configuredMaxTokens || DEFAULT_CONTEXT_LIMIT_TOKENS;
+
+  const resetPercent = clamp(
+    toPositiveInteger(settings.contextResetThresholdPercent) || DEFAULT_CONTEXT_RESET_THRESHOLD_PERCENT,
+    50,
+    95
+  );
+
+  const percentThreshold = Math.max(1, Math.floor(maxTokens * (resetPercent / 100)));
+  const responseReserve = Math.max(128, Math.min(
+    DEFAULT_CONTEXT_RESPONSE_RESERVE,
+    Math.floor(maxTokens * DEFAULT_CONTEXT_RESPONSE_RESERVE_RATIO)
+  ));
+  const reserveThreshold = maxTokens > responseReserve
+    ? maxTokens - responseReserve
+    : maxTokens;
+  const resetTokens = Math.max(1, Math.min(percentThreshold, reserveThreshold));
+  const warnTokens = Math.min(
+    Math.max(1, Math.floor(maxTokens * (DEFAULT_CONTEXT_WARN_PERCENT / 100))),
+    resetTokens
+  );
+
+  return {
+    maxTokens,
+    warnTokens,
+    resetTokens,
+    resetPercent,
+    source: configuredMaxTokens ? 'manual' : 'default',
+  };
+}
+
+export function estimateThreadTokens(messages = [], pendingMessage = null) {
+  const baseMessages = Array.isArray(messages) ? messages : [];
+  const thread = pendingMessage ? [...baseMessages, pendingMessage] : baseMessages;
+  return estimateMessageTokens(thread);
+}

src/icons.js

@@ -0,0 +1,43 @@
+// SVG Icons (Lucide-style inline SVGs)
+export const icons = {
+  plus: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`,
+  
+  settings: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`,
+  
+  trash: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>`,
+  
+  send: `<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><defs><linearGradient id="send-gradient" x1="3" y1="18.5" x2="21" y2="4" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#38bdf8"/><stop offset="0.33" stop-color="#34d399"/><stop offset="0.66" stop-color="#f59e0b"/><stop offset="1" stop-color="#f43f5e"/></linearGradient></defs><path d="M21.5 3.5 2.8 10.7c-.7.3-.7 1.3 0 1.6l5.9 2.2 2.2 5.9c.3.7 1.3.7 1.6 0L21.5 3.5Z" stroke="url(#send-gradient)"/><path d="M8.7 14.5 21.5 3.5" stroke="url(#send-gradient)"/><path d="M11 20.4 14.8 10" stroke="url(#send-gradient)"/></svg>`,
+  
+  sendMuted: `<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.5 3.5 2.8 10.7c-.7.3-.7 1.3 0 1.6l5.9 2.2 2.2 5.9c.3.7 1.3.7 1.6 0L21.5 3.5Z"/><path d="M8.7 14.5 21.5 3.5"/><path d="M11 20.4 14.8 10"/></svg>`,
+  
+  image: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`,
+
+  audio: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v12"/><path d="M8 8v8"/><path d="M16 9v6"/><path d="M4 11v2"/><path d="M20 10v4"/></svg>`,
+
+  video: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>`,
+  
+  x: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
+  
+  chevronDown: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`,
+  
+  menu: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>`,
+
+  bot: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>`,
+
+  user: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+
+  refresh: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>`,
+
+  sun: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>`,
+
+  moon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>`,
+};
+
+export function icon(name, extraClasses = '') {
+  const svg = icons[name];
+  if (!svg) return '';
+  if (extraClasses) {
+    return svg.replace('<svg ', `<svg class="${extraClasses}" `);
+  }
+  return svg;
+}

src/main.js

@@ -0,0 +1,5 @@
+import './style.css';
+import { App } from './components/app.js';
+
+const app = new App(document.getElementById('app'));
+app.init();

src/markdown.js

@@ -0,0 +1,124 @@
+import { marked } from 'marked';
+import hljs from 'highlight.js/lib/core';
+
+// Register common languages only to keep bundle size small
+import langBash from 'highlight.js/lib/languages/bash';
+import langC from 'highlight.js/lib/languages/c';
+import langCpp from 'highlight.js/lib/languages/cpp';
+import langCss from 'highlight.js/lib/languages/css';
+import langDiff from 'highlight.js/lib/languages/diff';
+import langGo from 'highlight.js/lib/languages/go';
+import langGraphql from 'highlight.js/lib/languages/graphql';
+import langIni from 'highlight.js/lib/languages/ini';
+import langJava from 'highlight.js/lib/languages/java';
+import langJs from 'highlight.js/lib/languages/javascript';
+import langJson from 'highlight.js/lib/languages/json';
+import langKotlin from 'highlight.js/lib/languages/kotlin';
+import langMarkdown from 'highlight.js/lib/languages/markdown';
+import langPhp from 'highlight.js/lib/languages/php';
+import langPython from 'highlight.js/lib/languages/python';
+import langRuby from 'highlight.js/lib/languages/ruby';
+import langRust from 'highlight.js/lib/languages/rust';
+import langScss from 'highlight.js/lib/languages/scss';
+import langShell from 'highlight.js/lib/languages/shell';
+import langSql from 'highlight.js/lib/languages/sql';
+import langSwift from 'highlight.js/lib/languages/swift';
+import langTs from 'highlight.js/lib/languages/typescript';
+import langXml from 'highlight.js/lib/languages/xml';
+import langYaml from 'highlight.js/lib/languages/yaml';
+
+hljs.registerLanguage('bash', langBash);
+hljs.registerLanguage('c', langC);
+hljs.registerLanguage('cpp', langCpp);
+hljs.registerLanguage('css', langCss);
+hljs.registerLanguage('diff', langDiff);
+hljs.registerLanguage('go', langGo);
+hljs.registerLanguage('graphql', langGraphql);
+hljs.registerLanguage('ini', langIni);
+hljs.registerLanguage('java', langJava);
+hljs.registerLanguage('javascript', langJs);
+hljs.registerLanguage('js', langJs);
+hljs.registerLanguage('json', langJson);
+hljs.registerLanguage('kotlin', langKotlin);
+hljs.registerLanguage('markdown', langMarkdown);
+hljs.registerLanguage('php', langPhp);
+hljs.registerLanguage('python', langPython);
+hljs.registerLanguage('py', langPython);
+hljs.registerLanguage('ruby', langRuby);
+hljs.registerLanguage('rust', langRust);
+hljs.registerLanguage('scss', langScss);
+hljs.registerLanguage('shell', langShell);
+hljs.registerLanguage('sh', langShell);
+hljs.registerLanguage('sql', langSql);
+hljs.registerLanguage('swift', langSwift);
+hljs.registerLanguage('typescript', langTs);
+hljs.registerLanguage('ts', langTs);
+hljs.registerLanguage('xml', langXml);
+hljs.registerLanguage('html', langXml);
+hljs.registerLanguage('yaml', langYaml);
+hljs.registerLanguage('yml', langYaml);
+
+const renderer = new marked.Renderer();
+
+renderer.code = function (token) {
+  const code = token.text || '';
+  const lang = (token.lang || '').split(/[\s.]/)[0].toLowerCase();
+  let highlighted;
+  try {
+    if (lang && hljs.getLanguage(lang)) {
+      highlighted = hljs.highlight(code, { language: lang, ignoreIllegals: true }).value;
+    } else {
+      highlighted = hljs.highlightAuto(code).value;
+    }
+  } catch {
+    highlighted = escapeHtml(code);
+  }
+  const langLabel = lang ? `<span class="code-lang-label">${lang}</span>` : '';
+  return `<div class="code-block-wrapper">${langLabel}<button class="copy-btn" aria-label="Copy code">Copy</button><pre><code class="hljs language-${lang || 'plaintext'}">${highlighted}</code></pre></div>`;
+};
+
+renderer.codespan = function (token) {
+  const text = token.text || '';
+  return `<code>${escapeHtml(text)}</code>`;
+};
+
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+marked.setOptions({
+  renderer,
+  gfm: true,
+  breaks: true,
+});
+
+export function renderMarkdown(text) {
+  if (!text) return '';
+  try {
+    return marked.parse(String(text));
+  } catch {
+    return escapeHtml(String(text));
+  }
+}
+
+export function attachCopyButtons(container) {
+  container.querySelectorAll('.copy-btn').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const pre = btn.nextElementSibling;
+      const code = pre?.querySelector('code')?.textContent || '';
+      try {
+        await navigator.clipboard.writeText(code);
+        btn.textContent = 'Copied!';
+        setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
+      } catch {
+        btn.textContent = 'Error';
+        setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
+      }
+    });
+  });
+}

src/store.js

@@ -0,0 +1,231 @@
+// LocalStorage keys
+const KEYS = {
+  SETTINGS: 'lw_settings',
+  CONVERSATIONS: 'lw_conversations',
+  CURRENT_CONV: 'lw_current_conv',
+  MODEL_CAPS: 'lw_model_caps',
+  AVAILABLE_MODELS: 'lw_available_models',
+  MODEL_SELECTIONS: 'lw_model_selections',
+};
+
+const DEFAULT_SETTINGS = {
+  apiKey: '',
+  baseUrl: 'http://127.0.0.1:8000',
+  theme: 'dark',
+  contextLimitTokens: 4096,
+  contextResetThresholdPercent: 85,
+};
+
+export function normalizeBaseUrl(baseUrl) {
+  const raw = String(baseUrl || '').trim();
+  if (!raw) return DEFAULT_SETTINGS.baseUrl;
+  return raw.replace(/\/+$/, '');
+}
+
+function isCapabilityRecord(value) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+  return ['text', 'image', 'audio'].some((key) => key in value);
+}
+
+function isLegacyCapabilityMap(value) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+  const entries = Object.values(value);
+  return entries.length > 0 && entries.every(isCapabilityRecord);
+}
+
+function normalizeSettings(settings = {}) {
+  const merged = { ...DEFAULT_SETTINGS, ...settings };
+  const contextLimitTokens = Number(merged.contextLimitTokens);
+  const contextResetThresholdPercent = Number(merged.contextResetThresholdPercent);
+
+  merged.baseUrl = normalizeBaseUrl(merged.baseUrl);
+  merged.contextLimitTokens = Number.isFinite(contextLimitTokens) && contextLimitTokens >= 1024
+    ? Math.round(contextLimitTokens)
+    : DEFAULT_SETTINGS.contextLimitTokens;
+
+  merged.contextResetThresholdPercent = Number.isFinite(contextResetThresholdPercent)
+    ? Math.min(95, Math.max(50, Math.round(contextResetThresholdPercent)))
+    : DEFAULT_SETTINGS.contextResetThresholdPercent;
+
+  return merged;
+}
+
+function load(key, fallback) {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw ? JSON.parse(raw) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function save(key, value) {
+  localStorage.setItem(key, JSON.stringify(value));
+}
+
+function uuid() {
+  return crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+
+export const store = {
+  getSettings() {
+    return normalizeSettings(load(KEYS.SETTINGS, {}));
+  },
+
+  saveSettings(settings) {
+    save(KEYS.SETTINGS, normalizeSettings(settings));
+  },
+
+  getConversations() {
+    return load(KEYS.CONVERSATIONS, []);
+  },
+
+  saveConversations(conversations) {
+    save(KEYS.CONVERSATIONS, conversations);
+  },
+
+  getCurrentConversationId() {
+    return localStorage.getItem(KEYS.CURRENT_CONV) || null;
+  },
+
+  setCurrentConversationId(id) {
+    if (id) {
+      localStorage.setItem(KEYS.CURRENT_CONV, id);
+    } else {
+      localStorage.removeItem(KEYS.CURRENT_CONV);
+    }
+  },
+
+  getCurrentConversation() {
+    const id = this.getCurrentConversationId();
+    if (!id) return null;
+    const convs = this.getConversations();
+    return convs.find(c => c.id === id) || null;
+  },
+
+  getAvailableModels(baseUrl = this.getSettings().baseUrl) {
+    const catalogs = load(KEYS.AVAILABLE_MODELS, {});
+    const list = catalogs[normalizeBaseUrl(baseUrl)];
+    return Array.isArray(list) ? [...new Set(list.filter(Boolean))].sort() : [];
+  },
+
+  saveAvailableModels(baseUrl, models) {
+    const catalogs = load(KEYS.AVAILABLE_MODELS, {});
+    catalogs[normalizeBaseUrl(baseUrl)] = Array.isArray(models)
+      ? [...new Set(models.filter(Boolean))].sort()
+      : [];
+    save(KEYS.AVAILABLE_MODELS, catalogs);
+  },
+
+  getCurrentModel(baseUrl = this.getSettings().baseUrl) {
+    const selections = load(KEYS.MODEL_SELECTIONS, {});
+    const selected = selections[normalizeBaseUrl(baseUrl)];
+    return typeof selected === 'string' ? selected : '';
+  },
+
+  setCurrentModel(baseUrl, modelId) {
+    const selections = load(KEYS.MODEL_SELECTIONS, {});
+    const normalizedUrl = normalizeBaseUrl(baseUrl);
+    if (modelId) {
+      selections[normalizedUrl] = modelId;
+    } else {
+      delete selections[normalizedUrl];
+    }
+    save(KEYS.MODEL_SELECTIONS, selections);
+  },
+
+  getModelCapabilities(baseUrl = this.getSettings().baseUrl) {
+    const raw = load(KEYS.MODEL_CAPS, {});
+    if (isLegacyCapabilityMap(raw)) return raw;
+
+    const caps = raw[normalizeBaseUrl(baseUrl)];
+    return caps && typeof caps === 'object' && !Array.isArray(caps) ? caps : {};
+  },
+
+  saveModelCapabilities(baseUrlOrCaps, maybeCaps) {
+    if (maybeCaps === undefined) {
+      save(KEYS.MODEL_CAPS, baseUrlOrCaps);
+      return;
+    }
+
+    const raw = load(KEYS.MODEL_CAPS, {});
+    const nested = isLegacyCapabilityMap(raw) ? {} : raw;
+    nested[normalizeBaseUrl(baseUrlOrCaps)] = maybeCaps;
+    save(KEYS.MODEL_CAPS, nested);
+  },
+
+  createConversation(model) {
+    const conv = {
+      id: uuid(),
+      title: 'New Chat',
+      model: model || '',
+      messages: [],
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+    const convs = this.getConversations();
+    convs.unshift(conv);
+    this.saveConversations(convs);
+    return conv;
+  },
+
+  addMessage(convId, message) {
+    const convs = this.getConversations();
+    const idx = convs.findIndex(c => c.id === convId);
+    if (idx === -1) return;
+    convs[idx].messages.push(message);
+    convs[idx].updatedAt = new Date().toISOString();
+    this.saveConversations(convs);
+  },
+
+  updateLastAssistantMessage(convId, content) {
+    const convs = this.getConversations();
+    const idx = convs.findIndex(c => c.id === convId);
+    if (idx === -1) return;
+    const msgs = convs[idx].messages;
+    // Find last assistant message
+    for (let i = msgs.length - 1; i >= 0; i--) {
+      if (msgs[i].role === 'assistant') {
+        msgs[i].content = content;
+        msgs[i].timestamp = new Date().toISOString();
+        break;
+      }
+    }
+    convs[idx].updatedAt = new Date().toISOString();
+    this.saveConversations(convs);
+  },
+
+  clearMessages(convId) {
+    const convs = this.getConversations();
+    const idx = convs.findIndex(c => c.id === convId);
+    if (idx === -1) return;
+    convs[idx].messages = [];
+    convs[idx].updatedAt = new Date().toISOString();
+    this.saveConversations(convs);
+  },
+
+  deleteConversation(convId) {
+    let convs = this.getConversations();
+    convs = convs.filter(c => c.id !== convId);
+    this.saveConversations(convs);
+    if (this.getCurrentConversationId() === convId) {
+      this.setCurrentConversationId(convs[0]?.id || null);
+    }
+  },
+
+  updateConversationTitle(convId, title) {
+    const convs = this.getConversations();
+    const idx = convs.findIndex(c => c.id === convId);
+    if (idx === -1) return;
+    convs[idx].title = title;
+    this.saveConversations(convs);
+  },
+
+  updateConversationModel(convId, model) {
+    const convs = this.getConversations();
+    const idx = convs.findIndex(c => c.id === convId);
+    if (idx === -1) return;
+    convs[idx].model = model;
+    this.saveConversations(convs);
+  },
+};

src/style.css

@@ -0,0 +1,310 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ── Color tokens ── */
+:root {
+  /* Light theme (default) */
+  --c-bg:        #f5f6f8;
+  --c-sf:        #ecedf1;
+  --c-card:      #ffffff;
+  --c-top:       #f8fbff;
+  --c-top-bd:    rgba(148,163,184,0.18);
+  --c-top-el:    rgba(255,255,255,0.76);
+  --c-top-el-h:  #ffffff;
+  --c-side:      #f1f5fb;
+  --c-side-bd:   rgba(148,163,184,0.22);
+  --c-side-el:   rgba(255,255,255,0.72);
+  --c-side-el-h: rgba(255,255,255,0.92);
+  --c-side-act:  #ffffff;
+  --c-side-act-bd: rgba(96,165,250,0.22);
+  --c-side-tx:   #334155;
+  --c-side-tx2:  rgba(51,65,85,0.78);
+  --c-side-tx3:  rgba(51,65,85,0.52);
+  --c-bd:        rgba(0,0,0,0.09);
+  --c-bd-hi:     rgba(0,0,0,0.22);
+  --c-tx:        #121212;
+  --c-tx2:       #3d3d3d;
+  --c-tx3:       rgba(0,0,0,0.38);
+  --c-txph:      rgba(0,0,0,0.32);
+  --c-hi:        rgba(0,0,0,0.08);
+  --c-ho:        rgba(0,0,0,0.04);
+  --c-ub:        #dbeafe;
+  --c-ub-bd:     #bfdbfe;
+  --c-utx:       #1d4ed8;
+  --c-code:      rgba(0,0,0,0.06);
+  --c-scrl:      rgba(0,0,0,0.15);
+  --c-scrl-hv:   rgba(0,0,0,0.28);
+  --c-prose:     #2d2d2d;
+  --c-prose-h:   #0f0f0f;
+  --c-prose-a:   #2563eb;
+  --c-prose-ah:  #1d4ed8;
+  --c-prose-cd:  #1a3a72;
+}
+
+.dark {
+  --c-bg:        #0b0b0b;
+  --c-sf:        #0a0a0a;
+  --c-card:      #141414;
+  --c-top:       #10161f;
+  --c-top-bd:    rgba(148,163,184,0.14);
+  --c-top-el:    rgba(255,255,255,0.06);
+  --c-top-el-h:  rgba(255,255,255,0.10);
+  --c-side:      #131922;
+  --c-side-bd:   rgba(148,163,184,0.16);
+  --c-side-el:   rgba(255,255,255,0.05);
+  --c-side-el-h: rgba(255,255,255,0.08);
+  --c-side-act:  rgba(59,130,246,0.16);
+  --c-side-act-bd: rgba(96,165,250,0.24);
+  --c-side-tx:   #e5ecf6;
+  --c-side-tx2:  rgba(226,232,240,0.78);
+  --c-side-tx3:  rgba(226,232,240,0.48);
+  --c-bd:        rgba(255,255,255,0.07);
+  --c-bd-hi:     rgba(255,255,255,0.18);
+  --c-tx:        #e2e2e2;
+  --c-tx2:       rgba(255,255,255,0.75);
+  --c-tx3:       rgba(255,255,255,0.28);
+  --c-txph:      rgba(255,255,255,0.22);
+  --c-hi:        rgba(255,255,255,0.07);
+  --c-ho:        rgba(255,255,255,0.04);
+  --c-ub:        rgba(79,142,247,0.13);
+  --c-ub-bd:     rgba(79,142,247,0.22);
+  --c-utx:       rgba(255,255,255,0.90);
+  --c-code:      #0e0e0e;
+  --c-scrl:      rgba(255,255,255,0.12);
+  --c-scrl-hv:   rgba(255,255,255,0.22);
+  --c-prose:     #d8d8d8;
+  --c-prose-h:   #ffffff;
+  --c-prose-a:   #7dd3fc;
+  --c-prose-ah:  #bae6fd;
+  --c-prose-cd:  #e2e8f0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--c-bg);
+  color: var(--c-tx);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--c-scrl);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--c-scrl-hv);
+}
+
+/* User message bubble */
+.user-bubble {
+  background: var(--c-ub);
+  border: 1px solid var(--c-ub-bd);
+  border-radius: 18px;
+}
+
+/* Prose — markdown content */
+.prose-dark {
+  color: var(--c-prose);
+  line-height: 1.75;
+  word-break: break-word;
+}
+.prose-dark h1,
+.prose-dark h2,
+.prose-dark h3,
+.prose-dark h4 {
+  color: var(--c-prose-h);
+  font-weight: 600;
+  margin: 1em 0 0.5em;
+  line-height: 1.3;
+}
+.prose-dark h1 { font-size: 1.5em; }
+.prose-dark h2 { font-size: 1.25em; }
+.prose-dark h3 { font-size: 1.1em; }
+.prose-dark p {
+  margin: 0.6em 0;
+}
+.prose-dark p:first-child { margin-top: 0; }
+.prose-dark p:last-child { margin-bottom: 0; }
+.prose-dark a {
+  color: var(--c-prose-a);
+  text-decoration: underline;
+}
+.prose-dark a:hover {
+  color: var(--c-prose-ah);
+}
+.prose-dark ul,
+.prose-dark ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+.prose-dark li {
+  margin: 0.2em 0;
+}
+.prose-dark blockquote {
+  border-left: 3px solid var(--c-bd);
+  padding-left: 1em;
+  color: var(--c-tx3);
+  margin: 0.75em 0;
+  font-style: italic;
+}
+.prose-dark hr {
+  border: none;
+  border-top: 1px solid var(--c-bd);
+  margin: 1em 0;
+}
+.prose-dark table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75em 0;
+  font-size: 0.9em;
+}
+.prose-dark th,
+.prose-dark td {
+  border: 1px solid var(--c-bd);
+  padding: 0.4em 0.75em;
+  text-align: left;
+}
+.prose-dark th {
+  background: var(--c-hi);
+  font-weight: 600;
+}
+.prose-dark code:not(pre code) {
+  background: var(--c-code);
+  border: 1px solid var(--c-bd);
+  border-radius: 3px;
+  padding: 0.1em 0.35em;
+  font-size: 0.875em;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  color: var(--c-prose-cd);
+}
+.prose-dark pre {
+  background: var(--c-code);
+  border: 1px solid var(--c-bd);
+  border-radius: 6px;
+  padding: 1em;
+  overflow-x: auto;
+  margin: 0.75em 0;
+  position: relative;
+}
+.prose-dark pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.85em;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  color: var(--c-prose-cd);
+}
+
+/* Code block copy button */
+.code-block-wrapper {
+  position: relative;
+}
+.copy-btn {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  background: var(--c-hi);
+  border: 1px solid var(--c-bd);
+  border-radius: 6px;
+  color: var(--c-tx3);
+  font-size: 0.7em;
+  padding: 2px 8px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.code-block-wrapper:hover .copy-btn {
+  opacity: 1;
+}
+.copy-btn:hover {
+  background: var(--c-ho);
+  color: var(--c-tx);
+}
+
+/* Message fade-in animation */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.message-enter {
+  animation: fadeInUp 0.2s ease forwards;
+}
+
+/* Typing indicator */
+@keyframes typingDot {
+  0%, 60%, 100% { opacity: 0.2; transform: translateY(0); }
+  30% { opacity: 1; transform: translateY(-4px); }
+}
+.typing-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--c-tx3);
+  animation: typingDot 1.2s infinite;
+}
+.typing-dot:nth-child(2) { animation-delay: 0.2s; }
+.typing-dot:nth-child(3) { animation-delay: 0.4s; }
+
+/* Sidebar transition */
+.sidebar-transition {
+  transition: transform 0.25s ease, opacity 0.25s ease;
+}
+
+/* Input textarea auto-resize */
+textarea {
+  resize: none;
+  overflow-y: auto;
+}
+
+/* Dropdown */
+.dropdown-enter {
+  animation: dropdownFade 0.15s ease forwards;
+}
+@keyframes dropdownFade {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Modal */
+.modal-backdrop {
+  animation: modalFadeIn 0.15s ease forwards;
+}
+@keyframes modalFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.modal-panel {
+  animation: modalSlideIn 0.2s ease forwards;
+}
+@keyframes modalSlideIn {
+  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* hljs theme overrides */
+.hljs {
+  background: transparent !important;
+}

tailwind.config.js

@@ -0,0 +1,24 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.js',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        bg:     'var(--c-bg)',
+        surface:'var(--c-sf)',
+        card:   'var(--c-card)',
+        border: 'var(--c-bd)',
+        muted:  'var(--c-tx3)',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+      },
+    },
+  },
+  plugins: [],
+};

tests/api.test.js

@@ -0,0 +1,193 @@
+import { describe, it, expect, vi } from 'vitest';
+import {
+  buildRequestConfig,
+  fetchModels,
+  streamCompletion,
+  transcribeAudio,
+} from '../src/api.js';
+
+// ─── buildRequestConfig ──────────────────────────────────────────────────────
+
+describe('buildRequestConfig – dev mode (isDev=true)', () => {
+  it('uses /lw-proxy as urlBase', () => {
+    const { urlBase } = buildRequestConfig('http://10.168.21.119:8000', '', true);
+    expect(urlBase).toBe('/lw-proxy');
+  });
+
+  it('sets X-LW-Target header to the cleaned baseUrl', () => {
+    const { headers } = buildRequestConfig('http://10.168.21.119:8000/', '', true);
+    expect(headers['X-LW-Target']).toBe('http://10.168.21.119:8000');
+  });
+
+  it('strips trailing slash from X-LW-Target', () => {
+    const { headers } = buildRequestConfig('http://localhost:8000/', '', true);
+    expect(headers['X-LW-Target']).toBe('http://localhost:8000');
+  });
+
+  it('does NOT add Authorization header when apiKey is empty', () => {
+    const { headers } = buildRequestConfig('http://localhost:8000', '', true);
+    expect(headers['Authorization']).toBeUndefined();
+  });
+
+  it('adds Authorization header when apiKey is provided', () => {
+    const { headers } = buildRequestConfig('http://localhost:8000', 'sk-test', true);
+    expect(headers['Authorization']).toBe('Bearer sk-test');
+  });
+});
+
+describe('buildRequestConfig – prod mode (isDev=false)', () => {
+  it('uses cleaned baseUrl as urlBase', () => {
+    const { urlBase } = buildRequestConfig('http://10.168.21.119:8000/', '', false);
+    expect(urlBase).toBe('http://10.168.21.119:8000');
+  });
+
+  it('does NOT set X-LW-Target header', () => {
+    const { headers } = buildRequestConfig('http://localhost:8000', '', false);
+    expect(headers['X-LW-Target']).toBeUndefined();
+  });
+
+  it('does NOT add Authorization header when apiKey is empty', () => {
+    const { headers } = buildRequestConfig('http://localhost:8000', '', false);
+    expect(headers['Authorization']).toBeUndefined();
+  });
+
+  it('adds Authorization header when apiKey is provided', () => {
+    const { headers } = buildRequestConfig('http://localhost:8000', 'sk-key', false);
+    expect(headers['Authorization']).toBe('Bearer sk-key');
+  });
+});
+
+// ─── fetchModels ──────────────────────────────────────────────────────────────
+
+describe('fetchModels (dev mode via buildRequestConfig isDev=true default in Vitest)', () => {
+  it('calls /lw-proxy/v1/models and sets X-LW-Target', async () => {
+    const captured = {};
+    vi.stubGlobal('fetch', vi.fn(async (url, opts) => {
+      captured.url = url;
+      captured.headers = opts?.headers ?? {};
+      return { ok: true, json: async () => ({ data: [{ id: 'model-a' }] }) };
+    }));
+
+    await fetchModels('http://10.168.21.119:8000', '');
+    expect(captured.url).toBe('/lw-proxy/v1/models');
+    expect(captured.headers['X-LW-Target']).toBe('http://10.168.21.119:8000');
+    vi.unstubAllGlobals();
+  });
+
+  it('parses OpenAI-style { data: [{id}] } response', async () => {
+    vi.stubGlobal('fetch', vi.fn(async () => ({
+      ok: true,
+      json: async () => ({ data: [{ id: 'AXERA-TECH/Qwen3-VL-2B-Instruct' }] }),
+    })));
+
+    const models = await fetchModels('http://10.168.21.119:8000', '');
+    expect(models).toContain('AXERA-TECH/Qwen3-VL-2B-Instruct');
+    vi.unstubAllGlobals();
+  });
+
+  it('parses flat string-array response', async () => {
+    vi.stubGlobal('fetch', vi.fn(async () => ({
+      ok: true,
+      json: async () => ['model-x', 'model-y'],
+    })));
+
+    const models = await fetchModels('http://localhost:8000', '');
+    expect(models).toContain('model-x');
+    vi.unstubAllGlobals();
+  });
+
+  it('does NOT add Authorization header when apiKey is empty', async () => {
+    const captured = {};
+    vi.stubGlobal('fetch', vi.fn(async (url, opts) => {
+      captured.headers = opts?.headers ?? {};
+      return { ok: true, json: async () => ({ data: [] }) };
+    }));
+
+    await fetchModels('http://localhost:8000', '');
+    expect(captured.headers['Authorization']).toBeUndefined();
+    vi.unstubAllGlobals();
+  });
+
+  it('adds Authorization header when apiKey is provided', async () => {
+    const captured = {};
+    vi.stubGlobal('fetch', vi.fn(async (url, opts) => {
+      captured.headers = opts?.headers ?? {};
+      return { ok: true, json: async () => ({ data: [] }) };
+    }));
+
+    await fetchModels('http://localhost:8000', 'sk-my-key');
+    expect(captured.headers['Authorization']).toBe('Bearer sk-my-key');
+    vi.unstubAllGlobals();
+  });
+
+  it('throws on non-OK HTTP response', async () => {
+    vi.stubGlobal('fetch', vi.fn(async () => ({
+      ok: false, status: 500, text: async () => 'Internal error',
+    })));
+
+    await expect(fetchModels('http://localhost:8000', '')).rejects.toThrow('500');
+    vi.unstubAllGlobals();
+  });
+});
+
+// ─── streamCompletion ────────────────────────────────────────────────────────
+
+describe('streamCompletion (dev mode)', () => {
+  it('calls /lw-proxy/v1/chat/completions and sets X-LW-Target', async () => {
+    const captured = {};
+    const sseChunks = [
+      'data: {"choices":[{"delta":{"content":"Hi"}}]}\n\n',
+      'data: [DONE]\n\n',
+    ];
+    let idx = 0;
+    const reader = {
+      read: vi.fn(async () =>
+        idx >= sseChunks.length
+          ? { done: true }
+          : { done: false, value: new TextEncoder().encode(sseChunks[idx++]) }
+      ),
+    };
+
+    vi.stubGlobal('fetch', vi.fn(async (url, opts) => {
+      captured.url = url;
+      captured.headers = opts?.headers ?? {};
+      return { ok: true, body: { getReader: () => reader } };
+    }));
+
+    const chunks = [];
+    for await (const chunk of streamCompletion('http://10.168.21.119:8000', '', 'model', [])) {
+      chunks.push(chunk);
+    }
+    expect(captured.url).toBe('/lw-proxy/v1/chat/completions');
+    expect(captured.headers['X-LW-Target']).toBe('http://10.168.21.119:8000');
+    expect(chunks).toContain('Hi');
+    vi.unstubAllGlobals();
+  });
+});
+
+describe('audio uploads', () => {
+  it('transcribeAudio posts multipart form data to /v1/audio/transcriptions', async () => {
+    const captured = {};
+    vi.stubGlobal('fetch', vi.fn(async (url, opts) => {
+      captured.url = url;
+      captured.method = opts?.method;
+      captured.headers = opts?.headers ?? {};
+      captured.body = opts?.body;
+      return { ok: true, json: async () => ({ text: 'hello transcript' }) };
+    }));
+
+    const file = new File(['audio'], 'meeting.wav', { type: 'audio/wav' });
+    const text = await transcribeAudio('http://localhost:8000', 'sk-key', 'audio-model', file);
+
+    expect(captured.url).toBe('/lw-proxy/v1/audio/transcriptions');
+    expect(captured.method).toBe('POST');
+    expect(captured.headers['Content-Type']).toBeUndefined();
+    expect(captured.headers['Authorization']).toBe('Bearer sk-key');
+    expect(captured.body).toBeInstanceOf(FormData);
+    expect(captured.body.get('model')).toBe('audio-model');
+    expect(captured.body.get('file').name).toBe(file.name);
+    expect(captured.body.get('file').type).toBe(file.type);
+    expect(text).toBe('hello transcript');
+    vi.unstubAllGlobals();
+  });
+});

tests/app.test.js

@@ -0,0 +1,215 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { App } from '../src/components/app.js';
+import { store } from '../src/store.js';
+
+function setViewport(width) {
+  Object.defineProperty(window, 'innerWidth', {
+    configurable: true,
+    writable: true,
+    value: width,
+  });
+}
+
+function mountApp() {
+  const root = document.createElement('div');
+  document.body.appendChild(root);
+  const app = new App(root);
+  app._render();
+  app._syncSidebarLayout();
+  app._loadCurrentConversation();
+  app.settingsModal.render();
+  app._updateContextInfo();
+  return { app, root };
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  vi.restoreAllMocks();
+});
+
+describe('App sidebar layout', () => {
+  it('keeps the sidebar visible on desktop when selecting another conversation', () => {
+    setViewport(1280);
+    const first = store.createConversation('model-a');
+    const second = store.createConversation('model-a');
+    store.setCurrentConversationId(first.id);
+
+    const { app, root } = mountApp();
+    const sidebar = root.querySelector('#sidebar');
+
+    expect(sidebar.className).not.toContain('-translate-x-full');
+
+    app._selectConversation(second.id);
+
+    expect(sidebar.className).not.toContain('-translate-x-full');
+    expect(sidebar.className).not.toContain('fixed');
+    expect(root.querySelector('#new-chat-btn')).not.toBeNull();
+  });
+
+  it('does not hide the sidebar on desktop after creating multiple new chats', () => {
+    setViewport(1280);
+    const { app, root } = mountApp();
+
+    app._newChat();
+    app._newChat();
+
+    const sidebar = root.querySelector('#sidebar');
+    expect(sidebar.className).not.toContain('-translate-x-full');
+    expect(root.querySelectorAll('#conv-list [role="option"]').length).toBe(2);
+  });
+
+  it('uses off-canvas sidebar behaviour only on mobile widths', () => {
+    setViewport(640);
+    const first = store.createConversation('model-a');
+    const second = store.createConversation('model-a');
+    store.setCurrentConversationId(first.id);
+
+    const { app, root } = mountApp();
+    const sidebar = root.querySelector('#sidebar');
+
+    expect(sidebar.className).toContain('-translate-x-full');
+    expect(sidebar.className).toContain('fixed');
+
+    app._toggleMobileSidebar();
+    expect(sidebar.className).toContain('translate-x-0');
+    expect(sidebar.className).not.toContain('-translate-x-full');
+
+    app._selectConversation(second.id);
+    expect(sidebar.className).toContain('-translate-x-full');
+  });
+});
+
+describe('App model state', () => {
+  it('uses the globally selected model instead of per-conversation model', () => {
+    setViewport(1280);
+    store.saveSettings({ baseUrl: 'http://a.local' });
+    store.saveAvailableModels('http://a.local', ['model-a']);
+    store.setCurrentModel('http://a.local', 'model-a');
+
+    const first = store.createConversation('legacy-model');
+    store.setCurrentConversationId(first.id);
+
+    const { app } = mountApp();
+
+    expect(app.modelPicker.getModel()).toBe('model-a');
+    expect(app.inputBar._currentModel).toBe('model-a');
+  });
+
+  it('clears the current model after models:changed when current URL no longer provides it', () => {
+    setViewport(1280);
+    store.saveSettings({ baseUrl: 'http://a.local' });
+    store.saveAvailableModels('http://a.local', ['model-a']);
+    store.setCurrentModel('http://a.local', 'model-a');
+
+    const { app } = mountApp();
+    store.saveAvailableModels('http://a.local', ['model-b']);
+    document.dispatchEvent(new CustomEvent('models:changed'));
+
+    expect(app.modelPicker.getModel()).toBe('');
+    expect(app.inputBar._currentModel).toBe('');
+  });
+});
+
+describe('App audio workflows', () => {
+  it('uploads audio and returns transcription text', async () => {
+    setViewport(1280);
+    store.saveSettings({ baseUrl: 'http://a.local' });
+    store.saveAvailableModels('http://a.local', ['audio-model']);
+    store.setCurrentModel('http://a.local', 'audio-model');
+    store.saveModelCapabilities({ 'audio-model': { text: true, image: false, audio: true } });
+
+    globalThis.fetch = vi.fn(async (url) => {
+      if (String(url).includes('/v1/audio/transcriptions')) {
+        return { ok: true, json: async () => ({ text: '会议录音转写文本' }) };
+      }
+      throw new Error(`Unexpected fetch: ${url}`);
+    });
+
+    const { app } = mountApp();
+    const file = new File(['audio'], 'meeting.wav', { type: 'audio/wav' });
+    await app._handleSend('', null, null, { file, mode: 'transcribe' });
+
+    const conv = store.getCurrentConversation();
+    expect(conv.messages.at(-1).content).toBe('会议录音转写文本');
+  });
+
+  it('uploads audio and can return translated text via instruction', async () => {
+    setViewport(1280);
+    store.saveSettings({ baseUrl: 'http://a.local' });
+    store.saveAvailableModels('http://a.local', ['audio-model']);
+    store.setCurrentModel('http://a.local', 'audio-model');
+    store.saveModelCapabilities({ 'audio-model': { text: true, image: false, audio: true } });
+
+    const sseChunks = [
+      'data: {"choices":[{"delta":{"content":"Translated meeting notes"}}]}\n\n',
+      'data: [DONE]\n\n',
+    ];
+    let idx = 0;
+    const reader = {
+      read: vi.fn(async () =>
+        idx >= sseChunks.length
+          ? { done: true }
+          : { done: false, value: new TextEncoder().encode(sseChunks[idx++]) }
+      ),
+    };
+
+    globalThis.fetch = vi.fn(async (url) => {
+      if (String(url).includes('/v1/audio/transcriptions')) {
+        return { ok: true, json: async () => ({ text: 'Bonjour tout le monde' }) };
+      }
+      if (String(url).includes('/v1/chat/completions')) {
+        return { ok: true, body: { getReader: () => reader } };
+      }
+      throw new Error(`Unexpected fetch: ${url}`);
+    });
+
+    const { app } = mountApp();
+    const file = new File(['audio'], 'speech.m4a', { type: 'audio/mp4' });
+    await app._handleSend('Translate this audio to English', null, null, { file });
+
+    const conv = store.getCurrentConversation();
+    expect(conv.messages.at(-1).content).toBe('Translated meeting notes');
+  });
+
+  it('uploads audio with an instruction and returns processed text', async () => {
+    setViewport(1280);
+    store.saveSettings({ baseUrl: 'http://a.local' });
+    store.saveAvailableModels('http://a.local', ['audio-model']);
+    store.setCurrentModel('http://a.local', 'audio-model');
+    store.saveModelCapabilities({ 'audio-model': { text: true, image: false, audio: true } });
+
+    const sseChunks = [
+      'data: {"choices":[{"delta":{"content":"待办事项：整理纪要"}}]}\n\n',
+      'data: [DONE]\n\n',
+    ];
+    let idx = 0;
+    const reader = {
+      read: vi.fn(async () =>
+        idx >= sseChunks.length
+          ? { done: true }
+          : { done: false, value: new TextEncoder().encode(sseChunks[idx++]) }
+      ),
+    };
+
+    let capturedChatBody = '';
+    globalThis.fetch = vi.fn(async (url, opts) => {
+      if (String(url).includes('/v1/audio/transcriptions')) {
+        return { ok: true, json: async () => ({ text: '原始会议录音文本' }) };
+      }
+      if (String(url).includes('/v1/chat/completions')) {
+        capturedChatBody = opts?.body || '';
+        return { ok: true, body: { getReader: () => reader } };
+      }
+      throw new Error(`Unexpected fetch: ${url}`);
+    });
+
+    const { app } = mountApp();
+    const file = new File(['audio'], 'call.wav', { type: 'audio/wav' });
+    await app._handleSend('提取会议待办事项', null, null, { file });
+
+    const conv = store.getCurrentConversation();
+    expect(conv.messages.at(-1).content).toBe('待办事项：整理纪要');
+    expect(capturedChatBody).toContain('提取会议待办事项');
+    expect(capturedChatBody).toContain('原始会议录音文本');
+  });
+});

tests/capabilities.test.js

@@ -0,0 +1,97 @@
+import { describe, it, expect } from 'vitest';
+import { DEFAULT_CAPABILITIES, getCapabilities, supportsImage, supportsAudio, supportsVideo } from '../src/capabilities.js';
+
+describe('DEFAULT_CAPABILITIES', () => {
+  it('gpt-4o supports image', () => {
+    expect(DEFAULT_CAPABILITIES['gpt-4o'].image).toBe(true);
+  });
+
+  it('gpt-4o does not support audio', () => {
+    expect(DEFAULT_CAPABILITIES['gpt-4o'].audio).toBe(false);
+  });
+
+  it('deepseek-v3 does not support image', () => {
+    expect(DEFAULT_CAPABILITIES['deepseek-v3'].image).toBe(false);
+  });
+});
+
+describe('getCapabilities', () => {
+  it('returns default for known model with no overrides', () => {
+    const caps = getCapabilities('gpt-4o', {});
+    expect(caps.text).toBe(true);
+    expect(caps.image).toBe(true);
+  });
+
+  it('unknown model defaults to text-only', () => {
+    const caps = getCapabilities('totally-unknown-model', {});
+    expect(caps.text).toBe(true);
+    expect(caps.image).toBe(false);
+    expect(caps.audio).toBe(false);
+  });
+
+  it('user override takes precedence over defaults', () => {
+    const userCaps = { 'gpt-4': { text: true, image: true, audio: false } };
+    const caps = getCapabilities('gpt-4', userCaps);
+    expect(caps.image).toBe(true); // overridden from false → true
+  });
+
+  it('user override for unknown model is applied', () => {
+    const userCaps = { 'my-local-model': { text: true, image: true, audio: false } };
+    const caps = getCapabilities('my-local-model', userCaps);
+    expect(caps.image).toBe(true);
+  });
+
+  it('partial override preserves unspecified defaults', () => {
+    // Default for gpt-4o: image=true. Override only audio.
+    const userCaps = { 'gpt-4o': { audio: true } };
+    const caps = getCapabilities('gpt-4o', userCaps);
+    expect(caps.image).toBe(true); // preserved from default
+    expect(caps.audio).toBe(true); // from override
+  });
+});
+
+describe('supportsImage', () => {
+  it('returns true for vision model', () => {
+    expect(supportsImage('gpt-4o', {})).toBe(true);
+  });
+
+  it('returns false for text-only model', () => {
+    expect(supportsImage('gpt-3.5-turbo', {})).toBe(false);
+  });
+
+  it('returns false for unknown model', () => {
+    expect(supportsImage('some-new-model', {})).toBe(false);
+  });
+
+  it('respects user override enabling image on text-only model', () => {
+    const userCaps = { 'my-model': { text: true, image: true, audio: false } };
+    expect(supportsImage('my-model', userCaps)).toBe(true);
+  });
+});
+
+describe('supportsAudio', () => {
+  it('returns false for gpt-4o (audio not in MVP)', () => {
+    expect(supportsAudio('gpt-4o', {})).toBe(false);
+  });
+
+  it('respects user override enabling audio', () => {
+    const userCaps = { 'gpt-4o': { text: true, image: true, audio: true } };
+    expect(supportsAudio('gpt-4o', userCaps)).toBe(true);
+  });
+});
+
+describe('supportsVideo', () => {
+  it('returns true when Vision is enabled (same as supportsImage)', () => {
+    expect(supportsVideo('gpt-4o', {})).toBe(true);
+  });
+
+  it('returns false when Vision is disabled', () => {
+    expect(supportsVideo('gpt-3.5-turbo', {})).toBe(false);
+    expect(supportsVideo('some-unknown-model', {})).toBe(false);
+  });
+
+  it('respects user override enabling vision (image=true implies video=true)', () => {
+    const userCaps = { 'my-vl-model': { text: true, image: true, audio: false } };
+    expect(supportsVideo('my-vl-model', userCaps)).toBe(true);
+  });
+});

tests/context.test.js

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest';
+import { formatCompactTokenCount } from '../src/api.js';
+import {
+  DEFAULT_CONTEXT_LIMIT_TOKENS,
+  DEFAULT_CONTEXT_RESET_THRESHOLD_PERCENT,
+  resolveContextConfig,
+  estimateThreadTokens,
+} from '../src/context.js';
+
+describe('context helpers – resolveContextConfig', () => {
+  it('falls back to the default context window when nothing is configured', () => {
+    const config = resolveContextConfig({}, '');
+    expect(config.maxTokens).toBe(DEFAULT_CONTEXT_LIMIT_TOKENS);
+    expect(config.resetPercent).toBe(DEFAULT_CONTEXT_RESET_THRESHOLD_PERCENT);
+    expect(config.source).toBe('default');
+  });
+
+  it('prefers a manually configured context window', () => {
+    const config = resolveContextConfig({ contextLimitTokens: 65536 }, 'qwen-32k');
+    expect(config.maxTokens).toBe(65536);
+    expect(config.source).toBe('manual');
+  });
+
+  it('does not infer context length from model ids anymore', () => {
+    const config = resolveContextConfig({ contextLimitTokens: null }, 'qwen-128k');
+    expect(config.maxTokens).toBe(DEFAULT_CONTEXT_LIMIT_TOKENS);
+    expect(config.source).toBe('default');
+  });
+
+  it('respects thresholds below the default warning band', () => {
+    const config = resolveContextConfig({
+      contextLimitTokens: 4096,
+      contextResetThresholdPercent: 70,
+    }, '');
+
+    expect(config.resetTokens).toBe(Math.floor(4096 * 0.7));
+    expect(config.warnTokens).toBe(config.resetTokens);
+  });
+
+  it('keeps resetTokens below the hard window when threshold percent is too aggressive', () => {
+    const config = resolveContextConfig({
+      contextLimitTokens: 32768,
+      contextResetThresholdPercent: 95,
+    }, '');
+
+    expect(config.warnTokens).toBe(Math.floor(32768 * 0.8));
+    expect(config.resetTokens).toBe(30720);
+  });
+});
+
+describe('context helpers – estimateThreadTokens', () => {
+  it('includes pending messages in the projected estimate', () => {
+    const messages = [{ role: 'user', content: 'hello world' }];
+    const pending = { role: 'assistant', content: 'reply' };
+
+    expect(estimateThreadTokens(messages, pending)).toBeGreaterThan(estimateThreadTokens(messages));
+  });
+});
+
+describe('api helpers – formatCompactTokenCount', () => {
+  it('keeps 4k-class windows readable without rounding them up', () => {
+    expect(formatCompactTokenCount(4096)).toBe('4.1k');
+  });
+});

tests/input-bar.test.js

@@ -0,0 +1,277 @@
+/**
+ * Tests for InputBar component behaviour:
+ *  - Send button visual state (rainbow idle / muted sending) and icon markup
+ *  - Enter key sends, Shift+Enter does not
+ *  - /reset and /clean are passed through as text (command handling lives in App)
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { InputBar } from '../src/components/input-bar.js';
+import { store } from '../src/store.js';
+
+function makeBar() {
+  const bar = new InputBar();
+  document.body.appendChild(bar.render());
+  return bar;
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+function enableAudio(bar) {
+  store.saveModelCapabilities({
+    'audio-model': { text: true, image: false, audio: true },
+  });
+  bar.setModel('audio-model');
+}
+
+// ─── Send button appearance ───────────────────────────────────────────────────
+
+describe('InputBar – send button appearance', () => {
+  it('send button uses the theme hover shell by default', () => {
+    const bar = makeBar();
+    const btn = bar.el.querySelector('#send-btn');
+    expect(btn.className).toContain('hover:bg-[var(--c-hi)]');
+    expect(btn.className).not.toContain('bg-blue-500');
+  });
+
+  it('send button uses a transparent paper airplane svg with fold lines and gradient strokes', () => {
+    const bar = makeBar();
+    const btn = bar.el.querySelector('#send-btn');
+    expect(btn.querySelector('svg')?.getAttribute('fill')).toBe('none');
+    expect(btn.querySelectorAll('path')).toHaveLength(3);
+    expect(btn.querySelector('linearGradient')).not.toBeNull();
+  });
+
+  it('setSending(true) disables the button', () => {
+    const bar = makeBar();
+    bar.setSending(true);
+    expect(bar.el.querySelector('#send-btn').disabled).toBe(true);
+  });
+
+  it('setSending(true) switches to the muted theme state', () => {
+    const bar = makeBar();
+    bar.setSending(true);
+    const btn = bar.el.querySelector('#send-btn');
+    expect(btn.className).toContain('text-[var(--c-tx3)]');
+    expect(btn.className).toContain('cursor-not-allowed');
+    expect(btn.querySelector('linearGradient')).toBeNull();
+  });
+
+  it('setSending(false) re-enables button and restores the idle theme state', () => {
+    const bar = makeBar();
+    bar.setSending(true);
+    bar.setSending(false);
+    const btn = bar.el.querySelector('#send-btn');
+    expect(btn.disabled).toBe(false);
+    expect(btn.className).toContain('hover:bg-[var(--c-hi)]');
+    expect(btn.querySelector('linearGradient')).not.toBeNull();
+  });
+});
+
+// ─── Keyboard shortcuts ───────────────────────────────────────────────────────
+
+describe('InputBar – keyboard shortcuts', () => {
+  it('Enter dispatches inputbar:send with the textarea text', () => {
+    const bar = makeBar();
+    const events = [];
+    const handler = (e) => events.push(e.detail);
+    document.addEventListener('inputbar:send', handler);
+
+    const textarea = bar.el.querySelector('#message-input');
+    textarea.value = 'hello world';
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+
+    expect(events).toHaveLength(1);
+    expect(events[0].text).toBe('hello world');
+    document.removeEventListener('inputbar:send', handler);
+  });
+
+  it('Enter clears the textarea after sending', () => {
+    const bar = makeBar();
+    const textarea = bar.el.querySelector('#message-input');
+    textarea.value = 'test message';
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    expect(textarea.value).toBe('');
+  });
+
+  it('Shift+Enter does NOT dispatch inputbar:send', () => {
+    const bar = makeBar();
+    const events = [];
+    const handler = (e) => events.push(e.detail);
+    document.addEventListener('inputbar:send', handler);
+
+    const textarea = bar.el.querySelector('#message-input');
+    textarea.value = 'hello world';
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', shiftKey: true, bubbles: true }));
+
+    expect(events).toHaveLength(0);
+    document.removeEventListener('inputbar:send', handler);
+  });
+
+  it('Enter does nothing when textarea is blank', () => {
+    const bar = makeBar();
+    const events = [];
+    const handler = (e) => events.push(e.detail);
+    document.addEventListener('inputbar:send', handler);
+
+    const textarea = bar.el.querySelector('#message-input');
+    textarea.value = '   ';
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+
+    expect(events).toHaveLength(0);
+    document.removeEventListener('inputbar:send', handler);
+  });
+
+  it('Enter does NOT send while _sending is true', () => {
+    const bar = makeBar();
+    bar.setSending(true);
+    const events = [];
+    const handler = (e) => events.push(e.detail);
+    document.addEventListener('inputbar:send', handler);
+
+    const textarea = bar.el.querySelector('#message-input');
+    textarea.value = 'hello';
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+
+    expect(events).toHaveLength(0);
+    document.removeEventListener('inputbar:send', handler);
+  });
+});
+
+// ─── Command passthrough ──────────────────────────────────────────────────────
+
+describe('InputBar – command passthrough', () => {
+  it('dispatches inputbar:send with text="/reset" (command parsed by App, not InputBar)', () => {
+    const bar = makeBar();
+    const events = [];
+    const handler = (e) => events.push(e.detail);
+    document.addEventListener('inputbar:send', handler);
+
+    const textarea = bar.el.querySelector('#message-input');
+    textarea.value = '/reset';
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+
+    expect(events).toHaveLength(1);
+    expect(events[0].text).toBe('/reset');
+    document.removeEventListener('inputbar:send', handler);
+  });
+
+  it('dispatches inputbar:send with text="/clean" (command parsed by App, not InputBar)', () => {
+    const bar = makeBar();
+    const events = [];
+    const handler = (e) => events.push(e.detail);
+    document.addEventListener('inputbar:send', handler);
+
+    const textarea = bar.el.querySelector('#message-input');
+    textarea.value = '/clean';
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+
+    expect(events).toHaveLength(1);
+    expect(events[0].text).toBe('/clean');
+    document.removeEventListener('inputbar:send', handler);
+  });
+});
+
+describe('InputBar – audio attachments', () => {
+  it('dispatches audio upload with default transcribe mode', () => {
+    const bar = makeBar();
+    enableAudio(bar);
+    bar._handleAudioFile(new File(['audio'], 'meeting.wav', { type: 'audio/wav' }));
+
+    const events = [];
+    const handler = (e) => events.push(e.detail);
+    document.addEventListener('inputbar:send', handler);
+
+    bar.el.querySelector('#send-btn').click();
+
+    expect(events).toHaveLength(1);
+    expect(events[0].audio.file.name).toBe('meeting.wav');
+    document.removeEventListener('inputbar:send', handler);
+  });
+
+  it('supports pasting audio from the clipboard', async () => {
+    const bar = makeBar();
+    enableAudio(bar);
+    const file = new File(['audio'], 'speech.m4a', { type: 'audio/mp4' });
+    const preventDefault = vi.fn();
+    await bar._handlePaste({
+      preventDefault,
+      clipboardData: {
+        items: [
+          {
+            type: 'audio/mp4',
+            getAsFile: () => file,
+          },
+        ],
+      },
+    });
+
+    expect(preventDefault).toHaveBeenCalled();
+    expect(bar._pendingAudio.file.name).toBe('speech.m4a');
+  });
+
+  it('sends audio together with a text instruction', () => {
+    const bar = makeBar();
+    enableAudio(bar);
+    bar._handleAudioFile(new File(['audio'], 'call.ogg', { type: 'audio/ogg' }));
+    bar.el.querySelector('#message-input').value = '总结这段录音内容';
+
+    const events = [];
+    const handler = (e) => events.push(e.detail);
+    document.addEventListener('inputbar:send', handler);
+
+    bar.el.querySelector('#send-btn').click();
+
+    expect(events).toHaveLength(1);
+    expect(events[0].text).toBe('总结这段录音内容');
+    expect(events[0].audio.file.name).toBe('call.ogg');
+    document.removeEventListener('inputbar:send', handler);
+  });
+});
+
+// ─── Context badge ────────────────────────────────────────────────────────────
+
+describe('InputBar – context display', () => {
+  it('initial badge shows ctx 0', () => {
+    const bar = makeBar();
+    expect(bar.el.querySelector('#context-info').textContent).toBe('ctx 0');
+  });
+
+  it('setContextInfo updates the text with compact token counts', () => {
+    const bar = makeBar();
+    bar.setContextInfo(1536, 4096, 3276);
+    expect(bar.el.querySelector('#context-info').textContent).toBe('ctx 1.5k/4.1k');
+  });
+
+  it('setContextInfo(0, max) shows ctx 0/max', () => {
+    const bar = makeBar();
+    bar.setContextInfo(0, 4096, 3276);
+    expect(bar.el.querySelector('#context-info').textContent).toBe('ctx 0/4.1k');
+  });
+
+  it('setContextInfo below warning threshold uses muted color', () => {
+    const bar = makeBar();
+    bar.setContextInfo(2000, 4096, 3276);
+    expect(bar.el.querySelector('#context-info').className).not.toContain('text-amber-400');
+  });
+
+  it('setContextInfo at warning threshold applies amber warning class', () => {
+    const bar = makeBar();
+    bar.setContextInfo(3276, 4096, 3276);
+    expect(bar.el.querySelector('#context-info').className).toContain('text-amber-400');
+  });
+
+  it('setContextInfo above warning threshold applies amber warning class', () => {
+    const bar = makeBar();
+    bar.setContextInfo(3800, 4096, 3276);
+    expect(bar.el.querySelector('#context-info').className).toContain('text-amber-400');
+  });
+
+  it('setContextInfo back below threshold removes amber class', () => {
+    const bar = makeBar();
+    bar.setContextInfo(3800, 4096, 3276);
+    bar.setContextInfo(500, 4096, 3276);
+    expect(bar.el.querySelector('#context-info').className).not.toContain('text-amber-400');
+  });
+});

tests/model-picker.test.js

@@ -0,0 +1,54 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { ModelPicker } from '../src/components/model-picker.js';
+import { store } from '../src/store.js';
+
+function mountPicker() {
+  const picker = new ModelPicker();
+  document.body.appendChild(picker.render());
+  return picker;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('ModelPicker', () => {
+  it('shows only models fetched for the current baseUrl', () => {
+    store.saveSettings({ baseUrl: 'http://a.local' });
+    store.saveAvailableModels('http://a.local', ['model-a', 'model-b']);
+    store.saveAvailableModels('http://b.local', ['model-c']);
+
+    const picker = mountPicker();
+
+    expect(picker._getAllModels()).toEqual(['model-a', 'model-b']);
+  });
+
+  it('loads the selected model only from the current baseUrl', () => {
+    store.saveSettings({ baseUrl: 'http://a.local' });
+    store.saveAvailableModels('http://a.local', ['model-a']);
+    store.setCurrentModel('http://a.local', 'model-a');
+    store.saveAvailableModels('http://b.local', ['model-b']);
+    store.setCurrentModel('http://b.local', 'model-b');
+
+    const picker = mountPicker();
+
+    expect(picker.getModel()).toBe('model-a');
+  });
+
+  it('clears an invalid selected model when the fetched list changes', () => {
+    store.saveSettings({ baseUrl: 'http://a.local' });
+    store.saveAvailableModels('http://a.local', ['model-a']);
+    store.setCurrentModel('http://a.local', 'model-a');
+
+    const picker = mountPicker();
+    picker.setModels(['model-b']);
+
+    expect(picker.getModel()).toBe('');
+    expect(store.getCurrentModel('http://a.local')).toBe('');
+  });
+
+  it('default current model is empty when nothing is selected', () => {
+    const picker = mountPicker();
+    expect(picker.getModel()).toBe('');
+  });
+});

tests/settings-modal.test.js

@@ -0,0 +1,77 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { SettingsModal } from '../src/components/settings-modal.js';
+import { store } from '../src/store.js';
+
+function mountModal() {
+  const modal = new SettingsModal();
+  modal.render();
+  modal.show();
+  return modal;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+  vi.restoreAllMocks();
+});
+
+describe('SettingsModal', () => {
+  it('shows only fetched models for the current baseUrl', () => {
+    store.saveSettings({ baseUrl: 'http://a.local' });
+    store.saveAvailableModels('http://a.local', ['model-a']);
+    store.saveAvailableModels('http://b.local', ['model-b']);
+
+    const modal = mountModal();
+    const text = modal.el.querySelector('#model-caps-list').textContent;
+
+    expect(text).toContain('model-a');
+    expect(text).not.toContain('model-b');
+  });
+
+  it('saves fetched models under the current baseUrl', async () => {
+    store.saveSettings({ baseUrl: 'http://a.local', apiKey: '' });
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ data: [{ id: 'model-a' }] }),
+    });
+
+    const modal = mountModal();
+    await modal._fetchModels();
+
+    expect(store.getAvailableModels('http://a.local')).toEqual(['model-a']);
+  });
+
+  it('does not close when clicking inside the modal panel while editing inputs', () => {
+    const modal = mountModal();
+    const panel = modal.el.querySelector('.modal-panel');
+    const input = modal.el.querySelector('#settings-base-url');
+
+    panel.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    input.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    expect(document.body.contains(modal.el)).toBe(true);
+    expect(modal.visible).toBe(true);
+  });
+
+  it('closes only when the backdrop itself is clicked', () => {
+    const modal = mountModal();
+
+    modal.el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    modal.el.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    expect(document.body.contains(modal.el)).toBe(false);
+    expect(modal.visible).toBe(false);
+  });
+
+  it('clears selected model when switching to a URL without that model', () => {
+    store.saveAvailableModels('http://a.local', ['model-a']);
+    store.setCurrentModel('http://a.local', 'model-a');
+    store.saveSettings({ baseUrl: 'http://a.local' });
+
+    const modal = mountModal();
+    modal.el.querySelector('#settings-base-url').value = 'http://b.local';
+    modal.el.querySelector('#settings-save').click();
+
+    expect(store.getSettings().baseUrl).toBe('http://b.local');
+    expect(store.getCurrentModel('http://b.local')).toBe('');
+  });
+});

tests/setup.js

@@ -0,0 +1,12 @@
+// Mock localStorage for all tests
+const localStorageData = {};
+const localStorageMock = {
+  getItem: (key) => localStorageData[key] ?? null,
+  setItem: (key, value) => { localStorageData[key] = String(value); },
+  removeItem: (key) => { delete localStorageData[key]; },
+  clear: () => { Object.keys(localStorageData).forEach(k => delete localStorageData[k]); },
+};
+Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, writable: true });
+
+// Clear localStorage before each test
+beforeEach(() => localStorageMock.clear());

tests/store.test.js

@@ -0,0 +1,150 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { store } from '../src/store.js';
+
+describe('store – default settings', () => {
+  it('default apiKey is empty string', () => {
+    expect(store.getSettings().apiKey).toBe('');
+  });
+
+  it('default baseUrl points to localhost:8000', () => {
+    expect(store.getSettings().baseUrl).toBe('http://127.0.0.1:8000');
+  });
+
+  it('default theme is dark', () => {
+    expect(store.getSettings().theme).toBe('dark');
+  });
+
+  it('default contextLimitTokens is 4096', () => {
+    expect(store.getSettings().contextLimitTokens).toBe(4096);
+  });
+
+  it('default contextResetThresholdPercent is 85', () => {
+    expect(store.getSettings().contextResetThresholdPercent).toBe(85);
+  });
+});
+
+describe('store – saveSettings', () => {
+  it('persists and retrieves settings', () => {
+    store.saveSettings({ apiKey: 'sk-abc', baseUrl: 'http://example.com', theme: 'dark' });
+    const s = store.getSettings();
+    expect(s.apiKey).toBe('sk-abc');
+    expect(s.baseUrl).toBe('http://example.com');
+  });
+
+  it('missing keys fall back to defaults', () => {
+    store.saveSettings({ apiKey: 'sk-test' }); // no baseUrl
+    expect(store.getSettings().baseUrl).toBe('http://127.0.0.1:8000');
+  });
+
+  it('invalid context settings are normalized back to safe defaults', () => {
+    store.saveSettings({ contextLimitTokens: null, contextResetThresholdPercent: 999 });
+    const settings = store.getSettings();
+    expect(settings.contextLimitTokens).toBe(4096);
+    expect(settings.contextResetThresholdPercent).toBe(95);
+  });
+});
+
+describe('store – conversations', () => {
+  it('starts with empty conversation list', () => {
+    expect(store.getConversations()).toEqual([]);
+  });
+
+  it('createConversation uses provided model', () => {
+    const conv = store.createConversation('my-model');
+    expect(conv.model).toBe('my-model');
+  });
+
+  it('createConversation defaults to empty string model (not hardcoded gpt-4o)', () => {
+    const conv = store.createConversation();
+    expect(conv.model).toBe('');
+  });
+
+  it('createConversation prepends to list', () => {
+    store.createConversation('a');
+    store.createConversation('b');
+    const convs = store.getConversations();
+    expect(convs[0].model).toBe('b'); // most recent first
+  });
+
+  it('deleteConversation removes correct conversation', () => {
+    const c1 = store.createConversation('m1');
+    const c2 = store.createConversation('m2');
+    store.deleteConversation(c1.id);
+    const ids = store.getConversations().map(c => c.id);
+    expect(ids).not.toContain(c1.id);
+    expect(ids).toContain(c2.id);
+  });
+
+  it('addMessage appends to conversation', () => {
+    const conv = store.createConversation('m');
+    store.addMessage(conv.id, { role: 'user', content: 'hello', timestamp: new Date().toISOString() });
+    const updated = store.getCurrentConversation() ?? store.getConversations().find(c => c.id === conv.id);
+    expect(updated.messages).toHaveLength(1);
+    expect(updated.messages[0].content).toBe('hello');
+  });
+
+  it('updateConversationTitle updates correctly', () => {
+    const conv = store.createConversation('m');
+    store.updateConversationTitle(conv.id, 'My Title');
+    const updated = store.getConversations().find(c => c.id === conv.id);
+    expect(updated.title).toBe('My Title');
+  });
+});
+
+describe('store – clearMessages', () => {
+  it('clears all messages from a conversation', () => {
+    const conv = store.createConversation('m');
+    store.addMessage(conv.id, { role: 'user', content: 'hello', timestamp: 't1' });
+    store.addMessage(conv.id, { role: 'assistant', content: 'hi', timestamp: 't2' });
+    store.clearMessages(conv.id);
+    const updated = store.getConversations().find(c => c.id === conv.id);
+    expect(updated.messages).toHaveLength(0);
+  });
+
+  it('preserves conversation metadata (title, model) after clearMessages', () => {
+    const conv = store.createConversation('my-model');
+    store.updateConversationTitle(conv.id, 'My Chat');
+    store.addMessage(conv.id, { role: 'user', content: 'msg', timestamp: 't1' });
+    store.clearMessages(conv.id);
+    const updated = store.getConversations().find(c => c.id === conv.id);
+    expect(updated.title).toBe('My Chat');
+    expect(updated.model).toBe('my-model');
+    expect(updated.messages).toHaveLength(0);
+  });
+
+  it('does nothing for non-existent conversation id', () => {
+    expect(() => store.clearMessages('no-such-id')).not.toThrow();
+  });
+});
+
+describe('store – model capabilities', () => {
+  it('starts empty', () => {
+    expect(store.getModelCapabilities()).toEqual({});
+  });
+
+  it('saves and retrieves capabilities', () => {
+    store.saveModelCapabilities({ 'my-model': { text: true, image: true, audio: false } });
+    expect(store.getModelCapabilities()['my-model'].image).toBe(true);
+  });
+
+  it('scopes available models by baseUrl', () => {
+    store.saveAvailableModels('http://a.local', ['model-a', 'model-b']);
+    store.saveAvailableModels('http://b.local', ['model-c']);
+    expect(store.getAvailableModels('http://a.local')).toEqual(['model-a', 'model-b']);
+    expect(store.getAvailableModels('http://b.local')).toEqual(['model-c']);
+  });
+
+  it('scopes current model selection by baseUrl', () => {
+    store.setCurrentModel('http://a.local', 'model-a');
+    store.setCurrentModel('http://b.local', 'model-b');
+    expect(store.getCurrentModel('http://a.local')).toBe('model-a');
+    expect(store.getCurrentModel('http://b.local')).toBe('model-b');
+  });
+
+  it('scopes capability overrides by baseUrl', () => {
+    store.saveModelCapabilities('http://a.local', { 'model-a': { text: true, image: true, audio: false } });
+    store.saveModelCapabilities('http://b.local', { 'model-a': { text: true, image: false, audio: false } });
+    expect(store.getModelCapabilities('http://a.local')['model-a'].image).toBe(true);
+    expect(store.getModelCapabilities('http://b.local')['model-a'].image).toBe(false);
+  });
+});

vite.config.js

@@ -0,0 +1,86 @@
+import { defineConfig } from 'vite';
+import http from 'node:http';
+import https from 'node:https';
+
+/**
+ * Dev-only CORS proxy middleware.
+ * Browser fetches /lw-proxy/<path> with X-LW-Target header → Vite server forwards to target (no CORS).
+ */
+const lwProxyPlugin = {
+  name: 'lw-proxy',
+  configureServer(server) {
+    server.middlewares.use('/lw-proxy', (req, res) => {
+      const target = req.headers['x-lw-target'];
+      if (!target) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Missing X-LW-Target header' }));
+        return;
+      }
+
+      let targetUrl;
+      try {
+        // req.url is the path AFTER /lw-proxy (Connect strips the mount point)
+        targetUrl = new URL(req.url ?? '/', target);
+      } catch {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Invalid target URL' }));
+        return;
+      }
+
+      const httpModule = targetUrl.protocol === 'https:' ? https : http;
+
+      // Forward headers, stripping browser/CORS-related ones
+      const fwdHeaders = {};
+      for (const [k, v] of Object.entries(req.headers)) {
+        const kl = k.toLowerCase();
+        if (kl === 'x-lw-target' || kl === 'host' || kl === 'origin' || kl === 'referer') continue;
+        fwdHeaders[k] = v;
+      }
+      fwdHeaders['host'] = targetUrl.host;
+
+      const options = {
+        hostname: targetUrl.hostname,
+        port: targetUrl.port || (targetUrl.protocol === 'https:' ? 443 : 80),
+        path: targetUrl.pathname + (targetUrl.search || ''),
+        method: req.method,
+        headers: fwdHeaders,
+      };
+
+      const proxyReq = httpModule.request(options, (proxyRes) => {
+        res.writeHead(proxyRes.statusCode ?? 200, proxyRes.headers);
+        proxyRes.pipe(res); // stream response directly (supports SSE)
+      });
+
+      proxyReq.on('error', (err) => {
+        if (!res.headersSent) {
+          res.writeHead(502, { 'Content-Type': 'application/json' });
+        }
+        res.end(JSON.stringify({ error: err.message }));
+      });
+
+      req.pipe(proxyReq); // forward request body (needed for POST /v1/chat/completions)
+    });
+  },
+};
+
+export default defineConfig({
+  plugins: [lwProxyPlugin],
+  build: {
+    target: 'esnext',
+    minify: 'esbuild',
+    chunkSizeWarningLimit: 600,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('highlight.js')) return 'hljs';
+          if (id.includes('marked')) return 'marked';
+        },
+      },
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./tests/setup.js'],
+  },
+});