opc-agent 4.0.35 → 4.0.37

package/tmp-sc.js

@@ -0,0 +1,1716 @@
+
+    // === Debug: catch all JS errors ===
+    window.onerror = function(msg, url, line, col, err) {
+      console.error('JS ERROR:', msg, 'at line', line, ':', col);
+      const d = document.createElement('div');
+      d.style.cssText = 'position:fixed;bottom:0;left:0;right:0;background:red;color:white;padding:8px;z-index:9999;font-size:12px;';
+      d.textContent = 'JS Error: ' + msg + ' (line ' + line + ')';
+      document.body.appendChild(d);
+    };
+    // === State ===
+    let templates = [];
+    let industries = [];
+    let agents = [];
+    let selectedTemplate = null;
+    let currentAgent = null;
+    let chatMessages = [];
+    let wizardStep = 1;
+    let selectedIndustry = '';
+    let deleteTargetId = null;
+
+    const API = '';
+
+    // === Init ===
+    async function init() {
+      await Promise.all([loadTemplates(), loadAgents()]);
+      loadSidebarGroups();
+      handleRoute();
+      window.addEventListener('popstate', handleRoute);
+      checkFirstRun();
+    }
+
+    function handleRoute() {
+      const path = location.hash.slice(1) || '/dashboard';
+      const parts = path.split('/').filter(Boolean);
+      if (parts[0] === 'chat' && parts[1]) {
+        openChat(parts[1]);
+      } else if (parts[0] === 'agent' && parts[1]) {
+        loadSidebarAgents().then(() => navigateToAgent(parts[1]));
+      } else if (parts[0] === 'settings') {
+        if (parts[1]) currentSettingsTab = parts[1];
+        navigate('settings');
+      } else if (parts[0] === 'memory' && parts[1]) {
+        openMemoryPage(parts[1]);
+      } else if (parts[0] === 'create') {
+        if (parts[1]) {
+          // pre-select template
+          selectedTemplate = templates.find(t => t.id === parts[1]) || null;
+          if (selectedTemplate) {
+            wizardStep = 2;
+          }
+        }
+        showPage('create');
+        renderWizard();
+      } else {
+        navigate(parts[0] || 'dashboard');
+      }
+    }
+
+    // === API ===
+    async function loadTemplates() {
+      try {
+        const res = await fetch(`${API}/api/templates`);
+        const data = await res.json();
+        templates = data.templates || [];
+        industries = data.industries || [];
+        renderIndustryChips();
+        renderTemplates();
+      } catch(e) { console.error('Failed to load templates:', e); }
+    }
+
+    async function loadAgents() {
+      try {
+        const res = await fetch(`${API}/api/agents`);
+        const data = await res.json();
+        agents = data.agents || [];
+        renderAgents();
+      } catch(e) { console.error('Failed to load agents:', e); }
+    }
+
+    // === Sidebar Agents ===
+    let selectedAgentId = null;
+
+    async function loadSidebarAgents() {
+      try {
+        const res = await fetch('/api/agents');
+        const data = await res.json();
+        const agents = data.agents || data || [];
+        window._sidebarAgents = agents;
+        const container = document.getElementById('sidebar-agent-list');
+        if (!agents.length) {
+          container.innerHTML = '<div style="padding: 12px 16px; color: var(--text-dim); font-size: 13px;">暂无 Agent</div>';
+          return;
+        }
+        container.innerHTML = agents.map(a => {
+          const status = (a.status || 'offline').toLowerCase();
+          const icon = a.emoji || a.icon || '🤖';
+          const name = a.name || a.id;
+          return `<div class="agent-list-item${selectedAgentId === a.id ? ' active' : ''}" data-agent-id="${a.id}" onclick="navigateToAgent('${a.id}')">
+            <span class="agent-icon">${icon}</span>
+            <span class="agent-name">${name}</span>
+            <span class="status-dot ${status}"></span>
+          </div>`;
+        }).join('');
+      } catch(e) {
+        console.error('Failed to load sidebar agents:', e);
+        const container = document.getElementById('sidebar-agent-list');
+        if (container) container.innerHTML = '<div style="padding: 12px 16px; color: var(--text-dim); font-size: 13px;">加载失败</div>';
+      }
+    }
+
+    // --- Collaboration Groups ---
+    let selectedPattern = 'debate';
+    function selectPattern(pat) {
+      selectedPattern = pat;
+      document.querySelectorAll('.pattern-card').forEach(c => c.classList.remove('active'));
+      const el = document.getElementById('pat-' + pat);
+      if (el) el.classList.add('active');
+    }
+    async function loadGroupAgentSelect() {
+      try {
+        const res = await fetch('/api/agents');
+        const data = await res.json();
+        const agents = data.agents || data || [];
+        const container = document.getElementById('group-agent-select');
+        if (!agents.length) {
+          container.innerHTML = '<p style="color:var(--text-muted);font-size:13px;">请先创建 Agent，再拉入群组</p>';
+          return;
+        }
+        container.innerHTML = agents.map(a => `<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" class="group-agent-cb" value="${a.id}"> <span>${a.templateIcon || a.icon || '🤖'}</span> <span style="font-size:14px;">${a.name}</span></label>`).join('');
+      } catch(e) { console.error('loadGroupAgentSelect error', e); }
+    }
+    async function createGroup() {
+      const name = document.getElementById('group-name').value.trim();
+      if (!name) { alert('请输入群组名称'); return; }
+      const members = [...document.querySelectorAll('.group-agent-cb:checked')].map(cb => cb.value);
+      if (members.length < 2) { alert('至少选择 2 个 Agent'); return; }
+      // TODO: POST to /api/groups
+      alert('群组 "' + name + '" 创建成功！模式: ' + selectedPattern + ', 成员: ' + members.length + ' 个 Agent');
+      navigate('dashboard');
+    }
+    async function loadSidebarGroups() {
+      // TODO: fetch /api/groups and render
+      const container = document.getElementById('groups-list');
+      if (container) container.innerHTML = '<div style="padding:6px 16px;color:var(--text-dim);font-size:12px;">暂无群组</div>';
+    }
+
+    function navigateToAgent(agentId) {
+      selectedAgentId = agentId;
+      // Update sidebar active state
+      document.querySelectorAll('.agent-list-item').forEach(el => el.classList.remove('active'));
+      document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+      const item = document.querySelector(`.agent-list-item[data-agent-id="${agentId}"]`);
+      if (item) item.classList.add('active');
+
+      // Find agent data
+      const agent = (window._sidebarAgents || []).find(a => a.id === agentId) || { id: agentId, name: agentId };
+      document.getElementById('agent-detail-icon').textContent = agent.emoji || agent.icon || '🤖';
+      document.getElementById('agent-detail-name').textContent = agent.name || agentId;
+      const statusDot = document.getElementById('agent-detail-status');
+      const status = (agent.status || 'offline').toLowerCase();
+      statusDot.className = 'status-dot ' + status;
+
+      // Reset to chat view
+      document.getElementById('agent-chat-view').style.display = '';
+      document.getElementById('agent-settings-view').style.display = 'none';
+      document.getElementById('agent-detail-toggle').classList.remove('active');
+      document.getElementById('agent-chat-messages').innerHTML = document.querySelector('.agent-chat-welcome').outerHTML || '<div class="agent-chat-welcome"><div style="font-size:48px;margin-bottom:16px">💬</div><div style="font-size:18px;font-weight:600;margin-bottom:8px">开始对话</div><div style="color:var(--text-muted);font-size:14px">向你的 Agent 发送第一条消息</div></div>';
+      document.getElementById('agent-chat-input').value = '';
+
+      // Show agent detail page
+      document.querySelectorAll('.page, .chat-container').forEach(p => { p.classList.remove('active'); p.style.display = ''; });
+      document.getElementById('page-agent-detail').classList.add('active');
+      location.hash = `/agent/${agentId}`;
+      toggleSidebar(false);
+    }
+
+    function toggleAgentSettings() {
+      const chatView = document.getElementById('agent-chat-view');
+      const settingsView = document.getElementById('agent-settings-view');
+      const toggleBtn = document.getElementById('agent-detail-toggle');
+      const showSettings = chatView.style.display !== 'none';
+      chatView.style.display = showSettings ? 'none' : '';
+      settingsView.style.display = showSettings ? '' : 'none';
+      toggleBtn.classList.toggle('active', showSettings);
+    }
+
+    function switchAgentTab(tab) {
+      document.querySelectorAll('.agent-tab').forEach(t => t.classList.remove('active'));
+      document.querySelector(`.agent-tab[data-atab="${tab}"]`)?.classList.add('active');
+      document.querySelectorAll('.agent-tab-panel').forEach(p => p.classList.remove('active'));
+      document.getElementById(`atab-${tab}`)?.classList.add('active');
+    }
+
+    let agentChatHistory = [];
+
+    async function sendAgentChat() {
+      const input = document.getElementById('agent-chat-input');
+      const msg = input.value.trim();
+      if (!msg || !selectedAgentId) return;
+      input.value = '';
+      input.style.height = 'auto';
+
+      const messagesEl = document.getElementById('agent-chat-messages');
+      // Remove welcome screen
+      const welcome = messagesEl.querySelector('.agent-chat-welcome');
+      if (welcome) welcome.remove();
+
+      // Add user message
+      const userDiv = document.createElement('div');
+      userDiv.className = 'agent-chat-msg user';
+      userDiv.textContent = msg;
+      messagesEl.appendChild(userDiv);
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+
+      agentChatHistory.push({ role: 'user', content: msg });
+
+      // Send to API
+      try {
+        const res = await fetch(`/api/agents/${selectedAgentId}/chat`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ message: msg, history: agentChatHistory })
+        });
+        const data = await res.json();
+        const reply = data.reply || data.message || data.content || JSON.stringify(data);
+        const assistantDiv = document.createElement('div');
+        assistantDiv.className = 'agent-chat-msg assistant';
+        assistantDiv.textContent = reply;
+        messagesEl.appendChild(assistantDiv);
+        agentChatHistory.push({ role: 'assistant', content: reply });
+      } catch(e) {
+        const errDiv = document.createElement('div');
+        errDiv.className = 'agent-chat-msg assistant';
+        errDiv.style.borderColor = 'var(--red)';
+        errDiv.textContent = `⚠️ 发送失败: ${e.message}`;
+        messagesEl.appendChild(errDiv);
+      }
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+
+    function handleAgentChatKey(e) {
+      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendAgentChat(); }
+      // Auto-resize textarea
+      e.target.style.height = 'auto';
+      e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px';
+    }
+
+        // === Navigation ===
+    function navigate(page) {
+      document.querySelectorAll('.page, .chat-container').forEach(p => { p.classList.remove('active'); p.style.display = ''; });
+      document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+      const navItem = document.querySelector(`.nav-item[data-page="${page}"]`);
+      if (navItem) navItem.classList.add('active');
+
+      if (page === 'dashboard') { loadAgents(); loadHealthDashboard(); loadSidebarAgents(); }
+      if (page === 'create') { renderWizard(); renderWizardTemplates(); }
+      if (page === 'settings') { showSettings(currentSettingsTab || 'models'); }
+      if (page === 'global-runtime') { currentSettingsTab='status'; showSettings('status'); showPage('settings'); return; }
+      if (page === 'global-models') { currentSettingsTab='models'; showSettings('models'); showPage('settings'); return; }
+      if (page === 'global-memory') { currentSettingsTab='memory'; showSettings('memory'); showPage('settings'); return; }
+      if (page === 'global-templates') { navigate('templates'); return; }
+      if (page === 'create-group') { loadGroupAgentSelect(); }
+      if (page === 'schedules') { loadSchedules(); }
+      if (page === 'skills') { loadSkillsMarketplace(); }
+
+      showPage(page);
+      location.hash = `/${page}`;
+      toggleSidebar(false);
+    }
+
+    function showPage(page) {
+      document.querySelectorAll('.page, .chat-container').forEach(p => { p.classList.remove('active'); });
+      const el = document.getElementById(`page-${page}`);
+      if (el) el.classList.add('active');
+    }
+
+    function toggleSidebar(open) {
+      document.querySelector('.sidebar').classList.toggle('open', open);
+      document.querySelector('.sidebar-overlay').classList.toggle('show', open);
+    }
+
+    // === Templates Rendering ===
+    function renderIndustryChips() {
+      const html = `<span class="chip active" onclick="filterByIndustry('')">All</span>` +
+        industries.map(i => `<span class="chip" onclick="filterByIndustry('${i.id}')">${i.nameZh} ${i.name}</span>`).join('');
+      document.getElementById('industry-chips').innerHTML = html;
+      document.getElementById('wizard-industry-chips').innerHTML = html.replace(/filterByIndustry/g, 'filterWizardByIndustry');
+    }
+
+    function filterByIndustry(id) {
+      selectedIndustry = id;
+      document.querySelectorAll('#industry-chips .chip').forEach(c => c.classList.remove('active'));
+      event.target.classList.add('active');
+      renderTemplates();
+    }
+
+    function filterWizardByIndustry(id) {
+      selectedIndustry = id;
+      document.querySelectorAll('#wizard-industry-chips .chip').forEach(c => c.classList.remove('active'));
+      event.target.classList.add('active');
+      renderWizardTemplates();
+    }
+
+    function filterTemplates() {
+      renderTemplates();
+    }
+
+    // === Skills Marketplace ===
+    let allSkills = [];
+    let selectedSkillCategory = '';
+    const SKILL_CATEGORIES = [
+      { id: '', label: 'All', labelZh: '全部' },
+      { id: 'productivity', label: 'Productivity', labelZh: '效率' },
+      { id: 'knowledge', label: 'Knowledge', labelZh: '知识' },
+      { id: 'creative', label: 'Creative', labelZh: '创作' },
+      { id: 'developer', label: 'Developer', labelZh: '开发' },
+      { id: 'lifestyle', label: 'Lifestyle', labelZh: '生活' },
+      { id: 'business', label: 'Business', labelZh: '业务' },
+    ];
+
+    async function loadSkillsMarketplace() {
+      try {
+        const res = await fetch('/api/skills/marketplace');
+        allSkills = await res.json();
+      } catch(e) { console.error('Failed to load skills:', e); allSkills = []; }
+      renderSkillCategoryChips();
+      renderSkills();
+    }
+
+    function renderSkillCategoryChips() {
+      const el = document.getElementById('skill-category-chips');
+      if (!el) return;
+      el.innerHTML = SKILL_CATEGORIES.map(c =>
+        `<span class="chip ${selectedSkillCategory === c.id ? 'active' : ''}" onclick="selectSkillCategory('${c.id}')">${c.labelZh}</span>`
+      ).join('');
+    }
+
+    function selectSkillCategory(cat) {
+      selectedSkillCategory = cat;
+      renderSkillCategoryChips();
+      renderSkills();
+    }
+
+    function filterSkills() {
+      renderSkills();
+    }
+
+    function renderSkills() {
+      const q = (document.getElementById('skills-search')?.value || '').toLowerCase();
+      let filtered = allSkills;
+      if (selectedSkillCategory) {
+        filtered = filtered.filter(s => s.category === selectedSkillCategory);
+      }
+      if (q) {
+        filtered = filtered.filter(s =>
+          s.name.toLowerCase().includes(q) || s.nameZh.includes(q) ||
+          s.description.toLowerCase().includes(q) || s.descriptionZh.includes(q)
+        );
+      }
+      const grid = document.getElementById('skills-grid');
+      if (!grid) return;
+      grid.innerHTML = filtered.map(s => `
+        <div class="card" style="cursor:default;position:relative;">
+          <div style="font-size:36px;margin-bottom:8px;">${s.icon}</div>
+          <div style="font-weight:600;font-size:15px;">${s.nameZh}</div>
+          <div style="font-size:12px;color:var(--text-dim);margin-bottom:4px;">${s.name}</div>
+          <div style="font-size:13px;color:var(--text-muted);margin-bottom:12px;line-height:1.4;">${s.descriptionZh}</div>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;">
+            ${s.tools.slice(0,3).map(t => `<span style="font-size:11px;padding:2px 6px;background:var(--bg-hover);border-radius:4px;color:var(--text-dim);">${t}</span>`).join('')}
+            ${s.tools.length > 3 ? `<span style="font-size:11px;color:var(--text-dim);">+${s.tools.length-3}</span>` : ''}
+          </div>
+          ${s.installed
+            ? `<button class="btn" style="width:100%;background:var(--bg-hover);color:var(--text-muted);cursor:pointer;" onclick="uninstallSkill('${s.id}',this)">✓ Installed</button>`
+            : `<button class="btn btn-primary" style="width:100%;" onclick="installSkill('${s.id}',this)">Install</button>`
+          }
+        </div>
+      `).join('');
+    }
+
+    async function installSkill(id, btn) {
+      btn.disabled = true; btn.textContent = 'Installing...';
+      try {
+        const res = await fetch(`/api/skills/marketplace/${id}/install`, { method: 'POST' });
+        const data = await res.json();
+        if (data.success) {
+          const skill = allSkills.find(s => s.id === id);
+          if (skill) skill.installed = true;
+          renderSkills();
+        }
+      } catch(e) { console.error(e); btn.disabled = false; btn.textContent = 'Install'; }
+    }
+
+    async function uninstallSkill(id, btn) {
+      btn.disabled = true; btn.textContent = 'Removing...';
+      try {
+        const res = await fetch(`/api/skills/marketplace/${id}/uninstall`, { method: 'DELETE' });
+        const data = await res.json();
+        if (data.success) {
+          const skill = allSkills.find(s => s.id === id);
+          if (skill) skill.installed = false;
+          renderSkills();
+        }
+      } catch(e) { console.error(e); btn.disabled = false; btn.textContent = '✓ Installed'; }
+    }
+
+    function filterWizardTemplates() {
+      renderWizardTemplates();
+    }
+
+    function getFilteredTemplates(searchId) {
+      const q = (document.getElementById(searchId)?.value || '').toLowerCase();
+      return templates.filter(t => {
+        if (selectedIndustry && t.industry !== selectedIndustry) return false;
+        if (q && !t.name.toLowerCase().includes(q) && !t.nameZh.includes(q) && !t.description.toLowerCase().includes(q)) return false;
+        return true;
+      });
+    }
+
+    function renderTemplates() {
+      const filtered = getFilteredTemplates('tpl-search');
+      document.getElementById('templates-grid').innerHTML = filtered.map(t => `
+        <div class="card tpl-card" onclick="selectTemplateAndCreate('${t.id}')">
+          <div class="tpl-icon">${t.icon}</div>
+          <div class="tpl-name">${t.name}</div>
+          <div style="font-size:13px;color:var(--text-dim);margin-bottom:6px;">${t.nameZh}</div>
+          <div class="tpl-desc">${t.description}</div>
+          <div class="tpl-tags">
+            <span class="tpl-tag">${t.industryZh}</span>
+            ${t.tags.map(tag => `<span class="tpl-tag">${tag}</span>`).join('')}
+          </div>
+        </div>
+      `).join('');
+    }
+
+    function renderWizardTemplates() {
+      const filtered = getFilteredTemplates('wizard-tpl-search');
+      document.getElementById('wizard-tpl-grid').innerHTML = filtered.map(t => `
+        <div class="card tpl-card ${selectedTemplate?.id === t.id ? 'selected' : ''}" onclick="selectWizardTemplate('${t.id}')"
+             style="${selectedTemplate?.id === t.id ? 'border-color:var(--accent);background:var(--accent-light);' : ''}">
+          <div class="tpl-icon">${t.icon}</div>
+          <div class="tpl-name">${t.name}</div>
+          <div style="font-size:12px;color:var(--text-dim);">${t.nameZh} · ${t.industryZh}</div>
+        </div>
+      `).join('');
+    }
+
+    function selectTemplateAndCreate(id) {
+      selectedTemplate = templates.find(t => t.id === id);
+      wizardStep = 2;
+      navigate('create');
+    }
+
+    function selectWizardTemplate(id) {
+      selectedTemplate = templates.find(t => t.id === id);
+      renderWizardTemplates();
+      // Auto-advance after selection
+      setTimeout(() => wizardNext(), 300);
+    }
+
+    // === Wizard ===
+    function renderWizard() {
+      for (let i = 1; i <= 3; i++) {
+        const ws = document.getElementById(`ws-${i}`);
+        const wp = document.getElementById(`wp-${i}`);
+        ws.className = 'wizard-step' + (i < wizardStep ? ' done' : i === wizardStep ? ' active' : '');
+        wp.className = 'wizard-panel' + (i === wizardStep ? ' active' : '');
+      }
+      if (wizardStep === 2 && selectedTemplate) {
+        document.getElementById('agent-name').placeholder = selectedTemplate.name;
+        document.getElementById('agent-model').value = selectedTemplate.suggestedModel;
+      }
+      if (wizardStep === 3) {
+        renderConfirmCard();
+      }
+    }
+
+    function wizardNext() {
+      if (wizardStep === 1 && !selectedTemplate) { alert('Please select a template first'); return; }
+      if (wizardStep < 3) { wizardStep++; renderWizard(); }
+    }
+
+    function wizardBack() {
+      if (wizardStep > 1) { wizardStep--; renderWizard(); }
+    }
+
+    function renderConfirmCard() {
+      const name = document.getElementById('agent-name').value || selectedTemplate?.name || 'My Agent';
+      const model = document.getElementById('agent-model').value;
+      const lang = document.getElementById('agent-lang').selectedOptions[0]?.text || 'English';
+      document.getElementById('confirm-card').innerHTML = `
+        <div style="display:flex;align-items:center;gap:16px;margin-bottom:16px;">
+          <span style="font-size:48px;">${selectedTemplate?.icon || '🤖'}</span>
+          <div>
+            <div style="font-size:20px;font-weight:700;">${name}</div>
+            <div style="color:var(--text-muted);font-size:14px;">Based on: ${selectedTemplate?.name || 'Custom'} (${selectedTemplate?.nameZh || ''})</div>
+          </div>
+        </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px;">
+          <div><span style="color:var(--text-dim);">Model:</span> ${model}</div>
+          <div><span style="color:var(--text-dim);">Language:</span> ${lang}</div>
+          <div style="grid-column:span 2;"><span style="color:var(--text-dim);">Industry:</span> ${selectedTemplate?.industryZh || ''} (${selectedTemplate?.industry || ''})</div>
+        </div>
+      `;
+    }
+
+    async function createAgent() {
+      const btn = document.getElementById('create-btn');
+      btn.textContent = '⏳ Creating...';
+      btn.disabled = true;
+      try {
+        const res = await fetch(`${API}/api/agents`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name: document.getElementById('agent-name').value || selectedTemplate?.name,
+            templateId: selectedTemplate?.id,
+            description: document.getElementById('agent-desc').value,
+            model: document.getElementById('agent-model').value,
+            language: document.getElementById('agent-lang').value,
+          }),
+        });
+        const agent = await res.json();
+        // Reset wizard
+        wizardStep = 1;
+        selectedTemplate = null;
+        document.getElementById('agent-name').value = '';
+        document.getElementById('agent-desc').value = '';
+        // Navigate to chat
+        openChat(agent.id);
+      } catch(e) {
+        alert('Failed to create agent: ' + e.message);
+      }
+      btn.textContent = '🚀 Create Agent';
+      btn.disabled = false;
+    }
+
+    // === Dashboard ===
+    function renderAgents() {
+      if (agents.length === 0) {
+        document.getElementById('agents-list').style.display = 'none';
+        document.getElementById('agents-empty').style.display = 'block';
+        return;
+      }
+      document.getElementById('agents-list').style.display = '';
+      document.getElementById('agents-empty').style.display = 'none';
+      document.getElementById('agents-list').innerHTML = agents.map(a => {
+        const timeAgo = getTimeAgo(a.lastActive || a.created);
+        return `
+          <div class="card agent-card" onclick="openChat('${a.id}')">
+            <div class="agent-actions">
+              <button onclick="event.stopPropagation();openDeleteDialog('${a.id}')">🗑️</button>
+            </div>
+            <div class="agent-icon">${a.templateIcon || '🤖'}</div>
+            <div class="agent-name">${a.name}</div>
+            <div class="agent-template">${a.templateName || 'Custom'}</div>
+            <div class="agent-stats">
+              <span>💬 ${a.messageCount || 0} messages</span>
+              <span>⏰ ${timeAgo}</span>
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+
+    function getTimeAgo(dateStr) {
+      const diff = Date.now() - new Date(dateStr).getTime();
+      const mins = Math.floor(diff / 60000);
+      if (mins < 1) return 'just now';
+      if (mins < 60) return `${mins}m ago`;
+      const hours = Math.floor(mins / 60);
+      if (hours < 24) return `${hours}h ago`;
+      const days = Math.floor(hours / 24);
+      return `${days}d ago`;
+    }
+
+    // === Delete ===
+    function openDeleteDialog(id) { deleteTargetId = id; document.getElementById('delete-dialog').classList.add('show'); }
+    function closeDeleteDialog() { deleteTargetId = null; document.getElementById('delete-dialog').classList.remove('show'); }
+    async function confirmDelete() {
+      if (!deleteTargetId) return;
+      await fetch(`${API}/api/agents/${deleteTargetId}`, { method: 'DELETE' });
+      closeDeleteDialog();
+      loadAgents();
+    }
+
+    // === Chat ===
+    async function openLastChat() {
+      if (currentAgent) { openChat(currentAgent.id); return; }
+      const agentsRes = await fetch(`${API}/api/agents`).catch(() => null);
+      if (agentsRes) {
+        const data = await agentsRes.json().catch(() => ({}));
+        const list = data.agents || [];
+        if (list.length > 0) { openChat(list[0].id); return; }
+      }
+      navigate('dashboard');
+    }
+
+    async function switchChatAgent(agentId) {
+      if (agentId && agentId !== currentAgent?.id) openChat(agentId);
+    }
+
+    async function openChat(agentId) {
+      try {
+        const res = await fetch(`${API}/api/agents/${agentId}`);
+        currentAgent = await res.json();
+        if (currentAgent.error) { navigate('dashboard'); return; }
+      } catch { navigate('dashboard'); return; }
+
+      // Load history from localStorage, fallback to empty
+      const stored = localStorage.getItem(`opc-chat-${agentId}`);
+      chatMessages = stored ? JSON.parse(stored) : [];
+
+      document.getElementById('chat-agent-icon').textContent = currentAgent.templateIcon || '🤖';
+      document.getElementById('chat-agent-name').textContent = currentAgent.name;
+      document.getElementById('chat-agent-status').textContent = `${currentAgent.templateName || 'Custom'} · ${currentAgent.model}`;
+
+      // Populate agent selector
+      const sel = document.getElementById('chat-agent-select');
+      sel.innerHTML = agents.map(a => `<option value="${a.id}" ${a.id === agentId ? 'selected' : ''}>${a.templateIcon || '🤖'} ${a.name}</option>`).join('');
+
+      // Render messages
+      const msgEl = document.getElementById('chat-messages');
+      if (chatMessages.length > 0) {
+        msgEl.innerHTML = chatMessages.map(m => `
+          <div class="msg ${m.role}">
+            <div class="msg-bubble">${m.content.replace(/</g,'&lt;')}</div>
+          </div>
+        `).join('');
+      } else {
+        msgEl.innerHTML = `
+          <div class="msg assistant">
+            <div class="msg-bubble">Hello! I'm ${currentAgent.name}. ${currentAgent.description ? 'I specialize in: ' + currentAgent.description : 'How can I help you today?'}</div>
+          </div>
+        `;
+      }
+      document.getElementById('chat-input').value = '';
+
+      showPage('chat');
+      location.hash = `/chat/${agentId}`;
+      document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+      const chatNav = document.querySelector('.nav-item[data-page="chat"]');
+      if (chatNav) chatNav.classList.add('active');
+      msgEl.scrollTop = msgEl.scrollHeight;
+      document.getElementById('chat-input').focus();
+    }
+
+    function clearChat() {
+      if (!currentAgent) return;
+      chatMessages = [];
+      localStorage.removeItem(`opc-chat-${currentAgent.id}`);
+      document.getElementById('chat-messages').innerHTML = `
+        <div class="msg assistant">
+          <div class="msg-bubble">Hello! I'm ${currentAgent.name}. How can I help you today?</div>
+        </div>
+      `;
+    }
+
+    async function handleDocUpload(input) {
+      const file = input.files[0];
+      if (!file || !currentAgent) return;
+      input.value = '';
+
+      // Show uploading status in chat
+      appendMessage('user', `📎 Uploading: ${file.name}`);
+      const statusEl = appendMessage('assistant', '⏳ Processing document...');
+
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const res = await fetch(`${API}/api/agents/${currentAgent.id}/upload`, {
+          method: 'POST',
+          body: formData,
+        });
+
+        const data = await res.json();
+        if (data.error) {
+          statusEl.textContent = `❌ ${data.error}`;
+        } else {
+          statusEl.textContent = `✅ Learned ${data.learnedCount} knowledge chunks from "${file.name}"`;
+        }
+      } catch (e) {
+        statusEl.textContent = `❌ Upload failed: ${e.message}`;
+      }
+    }
+
+    async function sendMessage() {
+      const input = document.getElementById('chat-input');
+      const text = input.value.trim();
+      if (!text || !currentAgent) return;
+
+      input.value = '';
+      chatMessages.push({ role: 'user', content: text });
+
+      // Render user message
+      appendMessage('user', text);
+
+      // Show typing + streaming indicator
+      document.getElementById('typing-indicator').classList.add('show');
+      document.getElementById('streaming-indicator').style.display = 'inline';
+      const msgContainer = document.getElementById('chat-messages');
+      msgContainer.scrollTop = msgContainer.scrollHeight;
+
+      try {
+        const res = await fetch(`${API}/api/agents/${currentAgent.id}/chat`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ messages: chatMessages }),
+        });
+
+        document.getElementById('typing-indicator').classList.remove('show');
+
+        if (res.headers.get('content-type')?.includes('text/event-stream')) {
+          // SSE streaming
+          const reader = res.body.getReader();
+          const decoder = new TextDecoder();
+          let assistantText = '';
+          const bubbleEl = appendMessage('assistant', '');
+
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            const chunk = decoder.decode(value);
+            const lines = chunk.split('\n');
+            for (const line of lines) {
+              if (line.startsWith('data: ')) {
+                const data = line.slice(6);
+                if (data === '[DONE]') break;
+                try {
+                  const parsed = JSON.parse(data);
+                  const content = parsed.choices?.[0]?.delta?.content || parsed.content || '';
+                  assistantText += content;
+                  bubbleEl.textContent = assistantText;
+                  msgContainer.scrollTop = msgContainer.scrollHeight;
+                } catch {}
+              }
+            }
+          }
+          chatMessages.push({ role: 'assistant', content: assistantText });
+        } else {
+          const data = await res.json();
+          const reply = data.response || data.error || 'No response';
+          appendMessage('assistant', reply);
+          chatMessages.push({ role: 'assistant', content: reply });
+        }
+        // Persist to localStorage
+        if (currentAgent) {
+          try { localStorage.setItem(`opc-chat-${currentAgent.id}`, JSON.stringify(chatMessages.slice(-100))); } catch {}
+        }
+      } catch(e) {
+        document.getElementById('typing-indicator').classList.remove('show');
+        appendMessage('assistant', `Error: ${e.message}`);
+      } finally {
+        document.getElementById('streaming-indicator').style.display = 'none';
+      }
+      msgContainer.scrollTop = msgContainer.scrollHeight;
+    }
+
+    function appendMessage(role, text) {
+      const msgContainer = document.getElementById('chat-messages');
+      const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      const div = document.createElement('div');
+      div.className = `msg ${role}`;
+      const bubble = document.createElement('div');
+      bubble.className = 'msg-bubble';
+      bubble.textContent = text;
+      div.appendChild(bubble);
+      const timeEl = document.createElement('div');
+      timeEl.className = 'msg-time';
+      timeEl.textContent = time;
+      div.appendChild(timeEl);
+      msgContainer.appendChild(div);
+      msgContainer.scrollTop = msgContainer.scrollHeight;
+      return bubble;
+    }
+
+    // === Memory ===
+    function openMemory() {
+      if (currentAgent) openMemoryPage(currentAgent.id);
+    }
+
+    async function openMemoryPage(agentId) {
+      showPage('memory');
+      location.hash = `/memory/${agentId}`;
+      try {
+        const res = await fetch(`${API}/api/agents/${agentId}/memory`);
+        const data = await res.json();
+        if (data.entries && data.entries.length > 0) {
+          document.getElementById('memory-empty').style.display = 'none';
+          document.getElementById('memory-timeline').innerHTML = `
+            <div class="timeline">
+              ${data.entries.map(e => `
+                <div class="timeline-item">
+                  <div class="timeline-date">${new Date(e.timestamp).toLocaleDateString()} ${new Date(e.timestamp).toLocaleTimeString()}</div>
+                  <div class="timeline-content">${e.summary || e.content || 'Learned something new'}</div>
+                </div>
+              `).join('')}
+            </div>
+          `;
+        } else {
+          document.getElementById('memory-empty').style.display = 'block';
+          document.getElementById('memory-timeline').innerHTML = '';
+        }
+      } catch {
+        document.getElementById('memory-empty').style.display = 'block';
+      }
+    }
+
+    function navigateToChat() {
+      if (currentAgent) openChat(currentAgent.id);
+      else navigate('dashboard');
+    }
+
+    // === Settings ===
+    let currentSettingsTab = 'models';
+    let currentProvider = null;
+    let currentChannel = null;
+    let modelConfig = {};
+    let statusRefreshTimer = null;
+
+    function showSettings(tab) {
+      currentSettingsTab = tab;
+      document.querySelectorAll('.settings-nav-item').forEach(n => n.classList.remove('active'));
+      document.querySelector(`.settings-nav-item[data-settings="${tab}"]`)?.classList.add('active');
+      document.querySelectorAll('.settings-panel').forEach(p => p.classList.remove('active'));
+      document.getElementById(`sp-${tab}`)?.classList.add('active');
+
+      if (tab === 'models') initModelsPanel();
+      if (tab === 'channels') initChannelsPanel();
+      if (tab === 'memory') initMemoryPanel();
+      if (tab === 'role') initRolePanel();
+      if (tab === 'status') refreshStatus();
+      if (tab === 'usage') refreshUsage();
+      if (tab === 'search') initSearchPanel();
+    }
+
+    function switchModelTab(tab) {
+      document.querySelectorAll('#sp-models .tab').forEach(t => t.classList.remove('active'));
+      document.querySelectorAll('#sp-models .tab-panel').forEach(p => p.classList.remove('active'));
+      if (tab === 'local') {
+        document.querySelector('#sp-models .tab:first-child').classList.add('active');
+        document.getElementById('mt-local').classList.add('active');
+      } else {
+        document.querySelector('#sp-models .tab:last-child').classList.add('active');
+        document.getElementById('mt-cloud').classList.add('active');
+      }
+    }
+
+    // --- Models Panel ---
+    async function initModelsPanel() {
+      try {
+        const res = await fetch(`${API}/api/settings/models`);
+        modelConfig = await res.json();
+      } catch { modelConfig = {}; }
+      detectOllama();
+      updateProviderStatuses();
+      updateModelDropdowns();
+    }
+
+    async function detectOllama() {
+      const statusEl = document.getElementById('ollama-status');
+      const modelsEl = document.getElementById('ollama-models');
+      const tutorialEl = document.getElementById('ollama-tutorial');
+      statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot yellow"></span> 正在检测本地 Ollama...</div>';
+      try {
+        const res = await fetch(`${API}/api/settings/models/local`);
+        const data = await res.json();
+        if (data.running) {
+          statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot green"></span> <b>Ollama 运行中</b> — 本地模型可用，完全免费</div>';
+          tutorialEl.style.display = 'none';
+          if (data.models && data.models.length > 0) {
+            modelsEl.innerHTML = '<div class="card"><h3 style="font-size:15px;margin-bottom:12px;">已安装的模型</h3>' +
+              data.models.map(m => {
+                const size = m.size ? `${(m.size / 1e9).toFixed(1)}GB` : '';
+                const isChat = modelConfig.chatModel === m.name;
+                const isEmbed = modelConfig.embeddingModel === m.name;
+                const badge = isChat ? ' <span style="color:var(--accent);font-size:11px;">● 聊天</span>' : isEmbed ? ' <span style="color:var(--green);font-size:11px;">● 记忆</span>' : '';
+                return `<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);">
+                  <div><span style="font-weight:500;">${m.name}</span>${badge}</div>
+                  <span style="font-size:12px;color:var(--text-dim);">${size}</span>
+                </div>`;
+              }).join('') + '</div>';
+            // Update dropdowns with local models
+            updateModelDropdowns(data.models);
+          } else {
+            modelsEl.innerHTML = '<div class="card"><p style="color:var(--text-muted);font-size:14px;">Ollama 已运行但没有安装任何模型。请在终端运行：<br><code style="background:var(--bg-hover);padding:2px 8px;border-radius:4px;font-family:var(--mono);">ollama pull qwen2.5:7b</code></p></div>';
+          }
+        } else {
+          statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot red"></span> <b>Ollama 未运行</b> — 按照下面的教程安装</div>';
+          modelsEl.innerHTML = '';
+          tutorialEl.style.display = 'block';
+        }
+      } catch {
+        statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot red"></span> 无法检测 Ollama</div>';
+        tutorialEl.style.display = 'block';
+      }
+    }
+
+    function updateModelDropdowns(localModels) {
+      const chatSel = document.getElementById('cfg-chat-model');
+      const embedSel = document.getElementById('cfg-embed-model');
+      if (localModels && localModels.length > 0) {
+        const chatOpts = localModels.map(m => `<option value="${m.name}" ${modelConfig.chatModel === m.name ? 'selected' : ''}>${m.name}${m.name === 'qwen2.5:7b' ? ' ⭐ 推荐' : ''}</option>`).join('');
+        const embedOpts = localModels.map(m => `<option value="${m.name}" ${modelConfig.embeddingModel === m.name ? 'selected' : ''}>${m.name}${m.name === 'nomic-embed-text' ? ' ⭐ 推荐' : ''}</option>`).join('');
+        chatSel.innerHTML = chatOpts;
+        embedSel.innerHTML = embedOpts;
+      }
+      // Add cloud models if configured
+      const providers = modelConfig.providers || {};
+      const cloudModels = [];
+      if (providers.openai?.apiKey) cloudModels.push({name:'gpt-4o',label:'GPT-4o (OpenAI)'},{name:'gpt-4o-mini',label:'GPT-4o Mini (OpenAI)'});
+      if (providers.deepseek?.apiKey) cloudModels.push({name:'deepseek-chat',label:'DeepSeek V3'},{name:'deepseek-reasoner',label:'DeepSeek R1'});
+      if (providers.anthropic?.apiKey) cloudModels.push({name:'claude-sonnet-4-20250514',label:'Claude Sonnet (Anthropic)'});
+      if (providers.openrouter?.apiKey) cloudModels.push({name:'openrouter/auto',label:'OpenRouter Auto'});
+      cloudModels.forEach(m => {
+        chatSel.innerHTML += `<option value="${m.name}" ${modelConfig.chatModel === m.name ? 'selected' : ''}>${m.label}</option>`;
+      });
+    }
+
+    function updateProviderStatuses() {
+      const providers = modelConfig.providers || {};
+      ['openai','deepseek','qwen','anthropic','openrouter'].forEach(p => {
+        const el = document.getElementById(`pv-${p}`);
+        if (!el) return;
+        if (providers[p]?.apiKey) {
+          el.innerHTML = '<span style="color:var(--green);">✅ 已配置</span>';
+          el.closest('.provider-card')?.classList.add('configured');
+        } else {
+          el.innerHTML = '未配置';
+          el.closest('.provider-card')?.classList.remove('configured');
+        }
+      });
+    }
+
+    async function saveModelAssignment() {
+      const chatModel = document.getElementById('cfg-chat-model').value;
+      const embeddingModel = document.getElementById('cfg-embed-model').value;
+      try {
+        await fetch(`${API}/api/settings/models`, {
+          method: 'PUT', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({ chatModel, embeddingModel })
+        });
+        modelConfig.chatModel = chatModel;
+        modelConfig.embeddingModel = embeddingModel;
+      } catch {}
+    }
+
+    // --- Provider Dialog ---
+    const PROVIDER_INFO = {
+      openai: { name: 'OpenAI', desc: '需要 OpenAI 账号。获取 Key: platform.openai.com/api-keys', placeholder: 'sk-...' },
+      deepseek: { name: 'DeepSeek', desc: '国产大模型，性价比极高。获取 Key: platform.deepseek.com', placeholder: 'sk-...' },
+      qwen: { name: '通义千问', desc: '阿里云大模型。获取 Key: dashscope.console.aliyun.com', placeholder: 'sk-...' },
+      anthropic: { name: 'Anthropic', desc: 'Claude 系列模型。获取 Key: console.anthropic.com', placeholder: 'sk-ant-...' },
+      openrouter: { name: 'OpenRouter', desc: '100+ 模型聚合平台。获取 Key: openrouter.ai/keys', placeholder: 'sk-or-...' },
+    };
+
+    function configureProvider(provider) {
+      currentProvider = provider;
+      const info = PROVIDER_INFO[provider] || {};
+      document.getElementById('pd-title').textContent = `配置 ${info.name || provider}`;
+      document.getElementById('pd-desc').textContent = info.desc || '';
+      document.getElementById('pd-apikey').placeholder = info.placeholder || 'API Key';
+      document.getElementById('pd-apikey').value = modelConfig.providers?.[provider]?.apiKey || '';
+      document.getElementById('pd-baseurl').value = modelConfig.providers?.[provider]?.baseUrl || '';
+      document.getElementById('pd-test-result').innerHTML = '';
+      document.getElementById('pd-baseurl-group').style.display = (provider === 'qwen' || provider === 'openrouter') ? 'block' : 'none';
+      document.getElementById('provider-dialog').classList.add('show');
+    }
+    function closeProviderDialog() { document.getElementById('provider-dialog').classList.remove('show'); currentProvider = null; }
+
+    async function testProvider() {
+      const apiKey = document.getElementById('pd-apikey').value.trim();
+      const baseUrl = document.getElementById('pd-baseurl').value.trim();
+      const resultEl = document.getElementById('pd-test-result');
+      if (!apiKey) { resultEl.innerHTML = '<span style="color:var(--yellow);">请先填入 API Key</span>'; return; }
+      resultEl.innerHTML = '<span style="color:var(--text-muted);">⏳ 测试中...</span>';
+      try {
+        const res = await fetch(`${API}/api/settings/models/test`, {
+          method: 'POST', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({ provider: currentProvider, apiKey, baseUrl: baseUrl || undefined })
+        });
+        const data = await res.json();
+        resultEl.innerHTML = data.success ? '<span style="color:var(--green);">✅ 连接成功！</span>' : `<span style="color:var(--red);">❌ 连接失败 (${data.error || data.statusCode})</span>`;
+      } catch(e) {
+        resultEl.innerHTML = `<span style="color:var(--red);">❌ 网络错误</span>`;
+      }
+    }
+
+    async function saveProvider() {
+      const apiKey = document.getElementById('pd-apikey').value.trim();
+      const baseUrl = document.getElementById('pd-baseurl').value.trim();
+      if (!modelConfig.providers) modelConfig.providers = {};
+      modelConfig.providers[currentProvider] = { apiKey, baseUrl: baseUrl || undefined };
+      try {
+        await fetch(`${API}/api/settings/models`, {
+          method: 'PUT', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({ providers: modelConfig.providers })
+        });
+      } catch {}
+      updateProviderStatuses();
+      updateModelDropdowns();
+      closeProviderDialog();
+    }
+
+    // --- Channels Panel ---
+    const CHANNELS = [
+      { id: 'telegram', name: 'Telegram', icon: '✈️', fields: [{key:'botToken',label:'Bot Token',placeholder:'123456:ABC-DEF...',help:'从 @BotFather 获取。<a href="https://t.me/botfather" target="_blank">打开 BotFather →</a>'}] },
+      { id: 'wechat', name: '微信', icon: '💬', fields: [], comingSoon: true },
+      { id: 'feishu', name: '飞书', icon: '🐦', fields: [{key:'appId',label:'App ID',placeholder:'cli_...'},{key:'appSecret',label:'App Secret',placeholder:'',type:'password'}] },
+      { id: 'discord', name: 'Discord', icon: '🎮', fields: [{key:'botToken',label:'Bot Token',placeholder:'',type:'password'}] },
+      { id: 'slack', name: 'Slack', icon: '💼', fields: [{key:'botToken',label:'Bot Token',placeholder:'xoxb-...',type:'password'}] },
+      { id: 'email', name: 'Email', icon: '📧', fields: [{key:'imapHost',label:'IMAP Host',placeholder:'imap.gmail.com'},{key:'smtpHost',label:'SMTP Host',placeholder:'smtp.gmail.com'},{key:'email',label:'Email',placeholder:'agent@example.com'},{key:'password',label:'Password',placeholder:'',type:'password'}] },
+      { id: 'web', name: 'Web', icon: '🌐', fields: [], alwaysOn: true },
+      { id: 'whatsapp', name: 'WhatsApp', icon: '📱', fields: [{key:'phoneId',label:'Phone Number ID',placeholder:''},{key:'accessToken',label:'Access Token',placeholder:'',type:'password'}] },
+    ];
+
+    let channelConfigs = {};
+
+    async function initChannelsPanel() {
+      try {
+        const res = await fetch(`${API}/api/settings/channels`);
+        channelConfigs = await res.json();
+      } catch { channelConfigs = {}; }
+      renderChannels();
+    }
+
+    function renderChannels() {
+      document.getElementById('channels-grid').innerHTML = CHANNELS.map(ch => {
+        const cfg = channelConfigs[ch.id] || {};
+        const connected = ch.alwaysOn || (cfg && Object.keys(cfg).some(k => k !== 'updated' && cfg[k]));
+        const statusDot = ch.comingSoon ? 'yellow' : connected ? 'green' : 'red';
+        const statusText = ch.comingSoon ? '即将支持' : connected ? '已连接' : '未配置';
+        return `<div class="card channel-card" onclick="${ch.comingSoon ? '' : `configureChannel('${ch.id}')`}" style="${ch.comingSoon ? 'opacity:0.6;cursor:default;' : ''}">
+          <div class="ch-icon">${ch.icon}</div>
+          <div class="ch-info">
+            <div class="ch-name">${ch.name}</div>
+            <div class="ch-status"><span class="status-dot ${statusDot}"></span> ${statusText}</div>
+          </div>
+          ${!ch.comingSoon && !ch.alwaysOn ? '<span style="color:var(--text-dim);font-size:18px;">›</span>' : ''}
+          ${ch.alwaysOn ? '<span style="font-size:12px;color:var(--green);">默认开启</span>' : ''}
+        </div>`;
+      }).join('');
+    }
+
+    function configureChannel(chId) {
+      const ch = CHANNELS.find(c => c.id === chId);
+      if (!ch || ch.comingSoon) return;
+      if (ch.alwaysOn) return;
+      currentChannel = chId;
+      const cfg = channelConfigs[chId] || {};
+      document.getElementById('cd-title').textContent = `配置 ${ch.name}`;
+      document.getElementById('cd-desc').textContent = '';
+      document.getElementById('cd-fields').innerHTML = ch.fields.map(f =>
+        `<div class="form-group">
+          <label class="label">${f.label}</label>
+          <input class="input" id="cf-${f.key}" type="${f.type || 'text'}" placeholder="${f.placeholder || ''}" value="${cfg[f.key] || ''}">
+          ${f.help ? `<p style="font-size:12px;color:var(--text-dim);margin-top:4px;">${f.help}</p>` : ''}
+        </div>`
+      ).join('');
+      document.getElementById('channel-dialog').classList.add('show');
+    }
+    function closeChannelDialog() { document.getElementById('channel-dialog').classList.remove('show'); currentChannel = null; }
+
+    async function saveChannel() {
+      const ch = CHANNELS.find(c => c.id === currentChannel);
+      if (!ch) return;
+      const cfg = {};
+      ch.fields.forEach(f => { cfg[f.key] = document.getElementById(`cf-${f.key}`)?.value?.trim() || ''; });
+      try {
+        await fetch(`${API}/api/settings/channels/${currentChannel}`, {
+          method: 'PUT', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify(cfg)
+        });
+        channelConfigs[currentChannel] = cfg;
+      } catch {}
+      renderChannels();
+      closeChannelDialog();
+    }
+
+    // --- Memory Panel (DeepBrain iframe) ---
+    async function initMemoryPanel() {
+      const container = document.getElementById('memory-module-frame');
+      const running = await checkModulePort(4001);
+      if (running) {
+        container.innerHTML = `<div class="module-frame-container"><iframe src="http://localhost:4001" title="DeepBrain 记忆管理"></iframe></div>`;
+      } else {
+        container.innerHTML = `<div class="card module-frame-fallback">
+          <div class="mf-icon">🧠</div>
+          <h3 style="margin-bottom:8px;">DeepBrain 未运行</h3>
+          <p style="color:var(--text-muted);font-size:14px;margin-bottom:16px;">记忆管理由 DeepBrain 模块提供（端口 4001）</p>
+          <a href="http://localhost:4001" target="_blank" class="btn btn-primary">🔗 打开记忆管理</a>
+          <p style="color:var(--text-dim);font-size:12px;margin-top:12px;">如果按钮无法打开，请先启动 DeepBrain 服务</p>
+        </div>`;
+      }
+    }
+
+    // --- Role Panel (Workstation iframe) ---
+    async function initRolePanel() {
+      const container = document.getElementById('role-module-frame');
+      const running = await checkModulePort(4003);
+      if (running) {
+        container.innerHTML = `<div class="module-frame-container"><iframe src="http://localhost:4003" title="Workstation 角色编辑"></iframe></div>`;
+      } else {
+        container.innerHTML = `<div class="card module-frame-fallback">
+          <div class="mf-icon">👤</div>
+          <h3 style="margin-bottom:8px;">Workstation 未运行</h3>
+          <p style="color:var(--text-muted);font-size:14px;margin-bottom:16px;">角色编辑由 Workstation 模块提供（端口 4003）</p>
+          <a href="http://localhost:4003" target="_blank" class="btn btn-primary">🔗 打开角色编辑</a>
+          <p style="color:var(--text-dim);font-size:12px;margin-top:12px;">如果按钮无法打开，请先启动 Workstation 服务</p>
+        </div>`;
+      }
+    }
+
+    async function checkModulePort(port) {
+      try {
+        const res = await fetch(`${API}/api/modules`);
+        const data = await res.json();
+        const mod = (data.modules || []).find(m => m.port === port);
+        return mod?.running || false;
+      } catch { return false; }
+    }
+
+    // --- Status Panel ---
+    async function refreshStatus() {
+      try {
+        const res = await fetch(`${API}/api/settings/status`);
+        const data = await res.json();
+
+        // Overview cards
+        const upHrs = Math.floor(data.uptime / 3600);
+        const upMins = Math.floor((data.uptime % 3600) / 60);
+        const memMB = Math.round((data.memory?.rss || 0) / 1048576);
+
+        document.getElementById('status-overview').innerHTML = `
+          <div class="card-grid" style="margin-bottom:16px;">
+            <div class="card stat-card">
+              <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;">
+                <span class="status-dot green"></span><span style="font-size:14px;font-weight:600;">运行中</span>
+              </div>
+              <div class="stat-value">${upHrs}h ${upMins}m</div>
+              <div class="stat-label">运行时间</div>
+            </div>
+            <div class="card stat-card">
+              <div class="stat-value">${memMB} MB</div>
+              <div class="stat-label">内存占用</div>
+            </div>
+            <div class="card stat-card">
+              <div class="stat-value">${(data.modules || []).filter(m => m.running).length}/${(data.modules || []).length}</div>
+              <div class="stat-label">模块在线</div>
+            </div>
+          </div>
+          <div class="card" style="margin-bottom:16px;">
+            <h3 style="font-size:15px;margin-bottom:12px;">模块状态</h3>
+            ${(data.modules || []).map(m => `<div style="display:flex;align-items:center;gap:10px;padding:6px 0;">
+              <span class="status-dot ${m.running ? 'green' : 'red'}"></span>
+              <span>${m.icon} ${m.name}</span>
+              <span style="color:var(--text-dim);font-size:12px;margin-left:auto;">:${m.port}</span>
+            </div>`).join('')}
+          </div>
+        `;
+
+        // Logs
+        const logsEl = document.getElementById('status-logs');
+        if (data.logs && data.logs.length > 0) {
+          logsEl.textContent = data.logs.join('\n');
+          logsEl.scrollTop = logsEl.scrollHeight;
+        } else {
+          logsEl.textContent = '暂无日志。Agent 运行后日志会显示在这里。';
+        }
+      } catch {
+        document.getElementById('status-overview').innerHTML = '<div class="card"><p style="color:var(--text-muted);">无法获取状态信息</p></div>';
+      }
+    }
+
+    // --- Usage Panel ---
+    async function refreshUsage() {
+      try {
+        const res = await fetch(`${API}/api/settings/usage`);
+        const data = await res.json();
+        const totalTokens = data.totalTokens || 0;
+        const totalCost = data.totalCost || 0;
+        const byModel = data.byModel || {};
+        const daily = data.daily || [];
+
+        document.getElementById('usage-stats').innerHTML = `
+          <div class="card-grid" style="margin-bottom:24px;">
+            <div class="card stat-card">
+              <div class="stat-value">${totalTokens > 1000 ? (totalTokens/1000).toFixed(1) + 'K' : totalTokens}</div>
+              <div class="stat-label">总 Token 消耗</div>
+            </div>
+            <div class="card stat-card">
+              <div class="stat-value">$${totalCost.toFixed(4)}</div>
+              <div class="stat-label">估算费用</div>
+            </div>
+            <div class="card stat-card">
+              <div class="stat-value">${Object.keys(byModel).length || 0}</div>
+              <div class="stat-label">使用模型数</div>
+            </div>
+          </div>
+          ${Object.keys(byModel).length > 0 ? `
+            <div class="card" style="margin-bottom:16px;">
+              <h3 style="font-size:15px;margin-bottom:12px;">按模型分布</h3>
+              ${Object.entries(byModel).map(([m, v]) => `<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);">
+                <span style="font-size:14px;">${m}</span>
+                <span style="font-size:13px;color:var(--text-muted);">${v.tokens || 0} tokens · $${(v.cost || 0).toFixed(4)}</span>
+              </div>`).join('')}
+            </div>
+          ` : ''}
+          ${totalTokens === 0 ? `
+            <div class="card" style="text-align:center;padding:40px;">
+              <div style="font-size:36px;margin-bottom:12px;">📊</div>
+              <p style="color:var(--text-muted);">还没有使用记录。开始和 Agent 聊天后，用量数据会自动记录在这里。</p>
+              ${modelConfig.mode === 'local' || !modelConfig.mode ? '<p style="color:var(--green);font-size:13px;margin-top:8px;">💡 使用本地模型完全免费，不产生费用</p>' : ''}
+            </div>
+          ` : ''}
+        `;
+      } catch {
+        document.getElementById('usage-stats').innerHTML = '<div class="card"><p style="color:var(--text-muted);">无法获取用量数据</p></div>';
+      }
+    }
+
+    // === Web Search Settings ===
+    async function initSearchPanel() {
+      try {
+        const res = await fetch(`${API}/api/settings/search`);
+        const cfg = await res.json();
+        document.getElementById('search-enabled').checked = cfg.enabled !== false;
+        document.getElementById('search-engine').value = cfg.defaultEngine || 'duckduckgo';
+        updateSearchEngineUI(cfg.defaultEngine || 'duckduckgo');
+        if (cfg.engines) {
+          const eng = cfg.engines[cfg.defaultEngine];
+          if (eng?.apiKey) document.getElementById('search-apikey').value = eng.apiKey;
+          if (eng?.baseUrl) document.getElementById('search-baseurl').value = eng.baseUrl;
+        }
+      } catch { /* defaults are fine */ }
+    }
+
+    function updateSearchEngineUI(engine) {
+      const needsKey = ['brave', 'google'].includes(engine);
+      const needsUrl = engine === 'searxng';
+      document.getElementById('search-apikey-group').style.display = needsKey ? '' : 'none';
+      document.getElementById('search-baseurl-group').style.display = needsUrl ? '' : 'none';
+      if (engine === 'brave') document.getElementById('search-apikey-label').textContent = 'Brave Search API Key';
+      if (engine === 'google') document.getElementById('search-apikey-label').textContent = 'Google API Key:CX';
+    }
+
+    async function updateSearchConfig() {
+      const engine = document.getElementById('search-engine').value;
+      updateSearchEngineUI(engine);
+      const cfg = {
+        enabled: document.getElementById('search-enabled').checked,
+        defaultEngine: engine,
+        engines: {}
+      };
+      cfg.engines[engine] = { enabled: true };
+      const apiKey = document.getElementById('search-apikey').value;
+      const baseUrl = document.getElementById('search-baseurl').value;
+      if (apiKey) cfg.engines[engine].apiKey = apiKey;
+      if (baseUrl) cfg.engines[engine].baseUrl = baseUrl;
+      cfg.engines.duckduckgo = { enabled: true };
+      try {
+        await fetch(`${API}/api/settings/search`, {
+          method: 'PUT', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(cfg)
+        });
+      } catch { /* silent */ }
+    }
+
+    async function testSearch() {
+      const el = document.getElementById('search-test-result');
+      el.innerHTML = '<span style="color:var(--yellow);">🔍 正在搜索...</span>';
+      try {
+        const res = await fetch(`${API}/api/settings/search/test`, {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ query: 'hello world test' })
+        });
+        const data = await res.json();
+        if (data.success && data.results?.length) {
+          el.innerHTML = `<span style="color:var(--green);">✅ 搜索成功！找到 ${data.results.length} 条结果</span><br>` +
+            data.results.map(r => `<div style="margin-top:8px;font-size:12px;"><a href="${r.url}" target="_blank">${r.title}</a><br><span style="color:var(--text-muted);">${r.snippet?.slice(0,100)}</span></div>`).join('');
+        } else {
+          el.innerHTML = `<span style="color:var(--red);">❌ ${data.error || '未找到结果'}</span>`;
+        }
+      } catch (e) {
+        el.innerHTML = `<span style="color:var(--red);">❌ 测试失败: ${e.message}</span>`;
+      }
+    }
+
+    // === Health Dashboard ===
+    async function loadHealthDashboard() {
+      const el = document.getElementById('health-section');
+      if (!el) return;
+      try {
+        const [modRes, ollamaRes] = await Promise.all([
+          fetch(`${API}/api/modules`),
+          fetch(`${API}/api/settings/models/local`),
+        ]);
+        const modData = await modRes.json();
+        const ollamaData = await ollamaRes.json();
+        const modules = modData.modules || [];
+        const runningCount = modules.filter(m => m.running).length;
+        el.innerHTML = `
+          <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
+            ${modules.map(m => `
+              <div class="card" style="flex:1;min-width:140px;display:flex;align-items:center;gap:10px;padding:12px 14px;">
+                <span class="status-dot ${m.running ? 'green' : 'red'}"></span>
+                <span style="font-size:13px;">${m.icon} ${m.name}</span>
+                <span style="font-size:11px;color:var(--text-dim);margin-left:auto;">:${m.port}</span>
+              </div>
+            `).join('')}
+            <div class="card" style="flex:1;min-width:140px;display:flex;align-items:center;gap:10px;padding:12px 14px;">
+              <span class="status-dot ${ollamaData.running ? 'green' : 'red'}"></span>
+              <span style="font-size:13px;">🦙 Ollama</span>
+              <span style="font-size:11px;color:var(--text-dim);margin-left:auto;">${ollamaData.running ? (ollamaData.models?.length || 0) + ' models' : 'offline'}</span>
+            </div>
+          </div>
+        `;
+      } catch {
+        el.innerHTML = '';
+      }
+    }
+
+    // === First Run Wizard ===
+    let frStep = 1;
+    let frSelectedTemplate = null;
+    let frCreatedAgentId = null;
+
+    async function checkFirstRun() {
+      // Skip first-run wizard — agents are configured via init
+      return;
+    }
+
+    function showFirstRunWizard(data) {
+      frStep = 1;
+      const overlay = document.getElementById('first-run-overlay');
+      overlay.style.display = 'flex';
+      frRenderStep();
+      if (data?.ollamaDetected) {
+        const statusEl = document.getElementById('fr-ollama-status');
+        if (statusEl) {
+          statusEl.innerHTML = `<div style="display:flex;align-items:center;gap:8px;color:var(--green);"><span class="status-dot green"></span> <b>Ollama detected!</b> ${data.ollamaModels?.length ? data.ollamaModels.length + ' models available.' : ''} Local AI is free.</div>`;
+          const choiceEl = document.getElementById('fr-model-choice');
+          if (choiceEl) choiceEl.style.display = 'block';
+          const sel = document.getElementById('fr-model-select');
+          if (sel && data.ollamaModels?.length) {
+            sel.innerHTML = data.ollamaModels.map(m => `<option value="${m.name}">${m.name} (local)</option>`).join('') + '<option value="gpt-4o-mini">GPT-4o Mini (cloud)</option>';
+          }
+        }
+      } else {
+        detectFrOllama();
+      }
+    }
+
+    async function detectFrOllama() {
+      try {
+        const res = await fetch(`${API}/api/settings/models/local`);
+        const data = await res.json();
+        const statusEl = document.getElementById('fr-ollama-status');
+        const choiceEl = document.getElementById('fr-model-choice');
+        if (!statusEl) return;
+        if (data.running) {
+          statusEl.innerHTML = `<div style="display:flex;align-items:center;gap:8px;color:var(--green);"><span class="status-dot green"></span> <b>Ollama running</b> — free local models available!</div>`;
+          if (choiceEl) choiceEl.style.display = 'block';
+          const sel = document.getElementById('fr-model-select');
+          if (sel && data.models?.length) {
+            sel.innerHTML = data.models.map(m => `<option value="${m.name}">${m.name} (local)</option>`).join('') + '<option value="gpt-4o-mini">GPT-4o Mini (cloud)</option>';
+          }
+        } else {
+          statusEl.innerHTML = `<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot red"></span> Ollama not detected — you can use cloud models or <a href="https://ollama.com" target="_blank">install Ollama</a> for free local AI.</div>`;
+          if (choiceEl) choiceEl.style.display = 'block';
+        }
+      } catch {}
+    }
+
+    function frRenderStep() {
+      for (let i = 1; i <= 4; i++) {
+        const stepEl = document.getElementById(`fr-step-${i}`);
+        const panelEl = document.getElementById(`fr-panel-${i}`);
+        if (stepEl) stepEl.className = 'wizard-step' + (i < frStep ? ' done' : i === frStep ? ' active' : '');
+        if (panelEl) panelEl.className = 'wizard-panel' + (i === frStep ? ' active' : '');
+      }
+    }
+
+    function frNext() {
+      if (frStep === 3 && !frSelectedTemplate) {
+        frSelectedTemplate = 'customer-service';
+      }
+      if (frStep === 3) {
+        frStep = 4;
+        frRenderStep();
+        frCreateAgent();
+        return;
+      }
+      if (frStep < 4) { frStep++; frRenderStep(); }
+    }
+
+    function frBack() {
+      if (frStep > 1) { frStep--; frRenderStep(); }
+    }
+
+    function frSelectTemplate(id) {
+      frSelectedTemplate = id;
+      document.querySelectorAll('#fr-template-list .card').forEach(c => {
+        c.style.borderColor = '';
+        c.style.background = '';
+      });
+      const el = document.getElementById(`fr-tpl-${id}`);
+      if (el) { el.style.borderColor = 'var(--accent)'; el.style.background = 'var(--accent-light)'; }
+    }
+
+    async function frCreateAgent() {
+      const model = document.getElementById('fr-model-select')?.value || 'qwen2.5:7b';
+      try {
+        // Save first-run complete
+        await fetch(`${API}/api/first-run/complete`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ templateId: frSelectedTemplate, model }),
+        });
+        // Create the agent
+        const res = await fetch(`${API}/api/agents`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name: '', templateId: frSelectedTemplate || 'customer-service', model }),
+        });
+        const agent = await res.json();
+        frCreatedAgentId = agent.id;
+        document.getElementById('fr-creating').style.display = 'none';
+        document.getElementById('fr-done').style.display = 'block';
+        await loadAgents();
+      } catch(e) {
+        document.getElementById('fr-creating').innerHTML = `<div style="color:var(--red);">Error: ${e.message}</div>`;
+      }
+    }
+
+    function frFinish() {
+      document.getElementById('first-run-overlay').style.display = 'none';
+      if (frCreatedAgentId) openChat(frCreatedAgentId);
+      else navigate('dashboard');
+    }
+
+    // === Drag & drop document upload ===
+    const chatArea = document.getElementById('chat-messages');
+    if (chatArea) {
+      chatArea.addEventListener('dragover', (e) => { e.preventDefault(); chatArea.style.outline = '2px dashed var(--primary)'; });
+      chatArea.addEventListener('dragleave', () => { chatArea.style.outline = ''; });
+      chatArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        chatArea.style.outline = '';
+        const file = e.dataTransfer?.files?.[0];
+        if (file) {
+          const dt = new DataTransfer();
+          dt.items.add(file);
+          const inp = document.getElementById('doc-upload-input');
+          inp.files = dt.files;
+          handleDocUpload(inp);
+        }
+      });
+    }
+
+    // === Start ===
+    init();
+
+    // =============================================
+    // === Schedules Management ===
+    // =============================================
+    let editingScheduleId = null;
+
+    async function loadSchedules() {
+      try {
+        const res = await fetch('/api/schedules');
+        const tasks = await res.json();
+        const list = Array.isArray(tasks) ? tasks : [];
+        renderSchedules(list);
+      } catch(e) {
+        console.error('Failed to load schedules:', e);
+        renderSchedules([]);
+      }
+    }
+
+    function renderSchedules(tasks) {
+      const listEl = document.getElementById('schedules-list');
+      const emptyEl = document.getElementById('schedules-empty');
+      if (!tasks.length) {
+        listEl.innerHTML = '';
+        emptyEl.style.display = '';
+        return;
+      }
+      emptyEl.style.display = 'none';
+      listEl.innerHTML = tasks.map(t => `
+        <div class="card" style="margin-bottom:12px;display:flex;align-items:center;gap:16px;">
+          <div style="font-size:28px;">⏰</div>
+          <div style="flex:1;">
+            <div style="font-size:15px;font-weight:600;">${esc(t.name)}</div>
+            <div style="font-size:12px;color:var(--text-muted);">${esc(t.description || '')}</div>
+            <div style="font-size:11px;color:var(--text-dim);margin-top:4px;">
+              ${esc(t.schedule)} · ${t.outputChannel || 'web'} · Next: ${t.nextRun ? new Date(t.nextRun).toLocaleString() : 'N/A'}
+            </div>
+          </div>
+          <div style="display:flex;gap:8px;align-items:center;">
+            <label style="position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;">
+              <input type="checkbox" ${t.enabled ? 'checked' : ''} onchange="toggleSchedule('${t.id}', this.checked)" style="opacity:0;width:0;height:0;">
+              <span style="position:absolute;inset:0;border-radius:11px;background:${t.enabled ? 'var(--green)' : 'var(--border)'};transition:0.3s;"></span>
+              <span style="position:absolute;top:2px;left:${t.enabled ? '20px' : '2px'};width:18px;height:18px;border-radius:50%;background:white;transition:0.3s;"></span>
+            </label>
+            <button class="btn btn-sm btn-secondary" onclick="runScheduleNow('${t.id}')" title="Run now">▶️</button>
+            <button class="btn btn-sm btn-secondary" onclick="editSchedule('${t.id}')" title="Edit">✏️</button>
+            <button class="btn btn-sm btn-danger" onclick="deleteSchedule('${t.id}')" title="Delete">🗑</button>
+          </div>
+        </div>
+      `).join('');
+    }
+
+    function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+    function showScheduleForm(task) {
+      editingScheduleId = task ? task.id : null;
+      document.getElementById('schedule-form').style.display = '';
+      document.getElementById('schedule-form-title').textContent = task ? 'Edit Task' : 'New Scheduled Task';
+      document.getElementById('sched-name').value = task ? task.name : '';
+      document.getElementById('sched-frequency').value = task ? task.frequency : 'daily';
+      document.getElementById('sched-time').value = task ? (task.time || '09:00') : '09:00';
+      document.getElementById('sched-cron').value = task ? task.schedule : '';
+      document.getElementById('sched-desc').value = task ? task.description : '';
+      document.getElementById('sched-channel').value = task ? task.outputChannel : 'web';
+      onSchedFreqChange();
+    }
+
+    function hideScheduleForm() {
+      document.getElementById('schedule-form').style.display = 'none';
+      editingScheduleId = null;
+    }
+
+    function onSchedFreqChange() {
+      const freq = document.getElementById('sched-frequency').value;
+      document.getElementById('sched-time-group').style.display = freq === 'custom' ? 'none' : '';
+      document.getElementById('sched-cron-group').style.display = freq === 'custom' ? '' : 'none';
+    }
+
+    async function saveSchedule() {
+      const data = {
+        name: document.getElementById('sched-name').value.trim(),
+        frequency: document.getElementById('sched-frequency').value,
+        time: document.getElementById('sched-time').value,
+        schedule: document.getElementById('sched-frequency').value === 'custom' ? document.getElementById('sched-cron').value.trim() : '',
+        description: document.getElementById('sched-desc').value.trim(),
+        outputChannel: document.getElementById('sched-channel').value,
+        enabled: true,
+      };
+      if (!data.name) { alert('Task name is required'); return; }
+      try {
+        if (editingScheduleId) {
+          await fetch(`/api/schedules/${editingScheduleId}`, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
+        } else {
+          await fetch('/api/schedules', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
+        }
+        hideScheduleForm();
+        loadSchedules();
+      } catch(e) { alert('Failed to save: ' + e.message); }
+    }
+
+    async function toggleSchedule(id, enabled) {
+      await fetch(`/api/schedules/${id}`, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ enabled }) });
+      loadSchedules();
+    }
+
+    async function deleteSchedule(id) {
+      if (!confirm('Delete this task?')) return;
+      await fetch(`/api/schedules/${id}`, { method: 'DELETE' });
+      loadSchedules();
+    }
+
+    async function runScheduleNow(id) {
+      await fetch(`/api/schedules/${id}/run`, { method: 'POST' });
+      alert('Task executed!');
+      loadSchedules();
+    }
+
+    async function editSchedule(id) {
+      const res = await fetch('/api/schedules');
+      const tasks = await res.json();
+      const list = Array.isArray(tasks) ? tasks : [];
+      const task = list.find(t => t.id === id);
+      if (task) showScheduleForm(task);
+    }
+
+    // =============================================
+    // === Voice Interaction ===
+    // =============================================
+    let voiceRecognition = null;
+    let isRecording = false;
+
+    function toggleVoiceInput() {
+      if (isRecording) {
+        stopVoiceInput();
+      } else {
+        startVoiceInput();
+      }
+    }
+
+    function startVoiceInput() {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (!SpeechRecognition) {
+        alert('Speech recognition is not supported in this browser. Try Chrome.');
+        return;
+      }
+      voiceRecognition = new SpeechRecognition();
+      voiceRecognition.continuous = false;
+      voiceRecognition.interimResults = true;
+      voiceRecognition.lang = navigator.language || 'en-US';
+
+      voiceRecognition.onstart = () => {
+        isRecording = true;
+        const btn = document.getElementById('voice-btn');
+        btn.style.background = 'var(--red)';
+        btn.style.color = 'white';
+        btn.style.borderColor = 'var(--red)';
+        btn.textContent = '⏹';
+      };
+
+      voiceRecognition.onresult = (event) => {
+        let transcript = '';
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          transcript += event.results[i][0].transcript;
+        }
+        document.getElementById('chat-input').value = transcript;
+      };
+
+      voiceRecognition.onend = () => {
+        isRecording = false;
+        const btn = document.getElementById('voice-btn');
+        btn.style.background = 'transparent';
+        btn.style.color = '';
+        btn.style.borderColor = 'var(--border)';
+        btn.textContent = '🎤';
+        // Auto-send if we got text
+        const input = document.getElementById('chat-input');
+        if (input.value.trim()) {
+          sendMessage();
+        }
+      };
+
+      voiceRecognition.onerror = (event) => {
+        console.error('Speech recognition error:', event.error);
+        isRecording = false;
+        const btn = document.getElementById('voice-btn');
+        btn.style.background = 'transparent';
+        btn.style.color = '';
+        btn.style.borderColor = 'var(--border)';
+        btn.textContent = '🎤';
+      };
+
+      voiceRecognition.start();
+    }
+
+    function stopVoiceInput() {
+      if (voiceRecognition) {
+        voiceRecognition.stop();
+      }
+    }
+
+    function speakText(text) {
+      if (!window.speechSynthesis) return;
+      window.speechSynthesis.cancel();
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = navigator.language || 'en-US';
+      utterance.rate = 1.0;
+      window.speechSynthesis.speak(utterance);
+    }
+
+    // Patch message rendering to add TTS button to assistant messages
+    const _origAppendMsg = typeof appendMessage === 'function' ? appendMessage : null;
+    if (typeof window._patchedMsgRender === 'undefined') {
+      window._patchedMsgRender = true;
+      const observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of m.addedNodes) {
+            if (node.nodeType === 1 && node.classList?.contains('msg') && node.classList?.contains('assistant')) {
+              const bubble = node.querySelector('.msg-bubble');
+              if (bubble && !node.querySelector('.tts-btn')) {
+                const btn = document.createElement('button');
+                btn.className = 'tts-btn';
+                btn.textContent = '🔊';
+                btn.title = 'Read aloud';
+                btn.style.cssText = 'background:none;border:1px solid var(--border);border-radius:50%;padding:4px 6px;cursor:pointer;font-size:14px;margin-top:4px;color:var(--text-muted);';
+                btn.onclick = () => speakText(bubble.textContent);
+                node.appendChild(btn);
+              }
+            }
+          }
+        }
+      });
+      const chatMsgs = document.getElementById('chat-messages');
+      if (chatMsgs) observer.observe(chatMsgs, { childList: true });
+    }
+
+    // =============================================
+    // === Image Generation Config ===
+    // =============================================
+    async function saveImageGenConfig() {
+      const data = {
+        openaiApiKey: document.getElementById('ig-openai-key').value.trim(),
+        sdApiUrl: document.getElementById('ig-sd-url').value.trim(),
+        replicateApiKey: document.getElementById('ig-replicate-key').value.trim(),
+      };
+      try {
+        await fetch('/api/image-gen/config', { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
+        document.getElementById('ig-status').textContent = '✅ Configuration saved!';
+        document.getElementById('ig-status').style.color = 'var(--green)';
+      } catch(e) {
+        document.getElementById('ig-status').textContent = '❌ Failed: ' + e.message;
+        document.getElementById('ig-status').style.color = 'var(--red)';
+      }
+    }
+
+