@agentunion/kite 1.0.7 → 1.3.0

package/extensions/services/web/static/js/app.js

@@ -0,0 +1,4671 @@
+// ============================================================
+// API Client
+// ============================================================
+const API = {
+    async get(url) {
+        const resp = await fetch(url);
+        if (!resp.ok) {
+            const err = await resp.json().catch(() => ({ detail: resp.statusText }));
+            throw new Error(err.detail || resp.statusText);
+        }
+        return resp.json();
+    },
+
+    async post(url, body) {
+        const resp = await fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: body != null ? JSON.stringify(body) : undefined,
+        });
+        if (!resp.ok) {
+            const err = await resp.json().catch(() => ({ detail: resp.statusText }));
+            throw new Error(err.detail || resp.statusText);
+        }
+        return resp.json();
+    },
+
+    async put(url, body) {
+        const resp = await fetch(url, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+        });
+        if (!resp.ok) {
+            const err = await resp.json().catch(() => ({ detail: resp.statusText }));
+            throw new Error(err.detail || resp.statusText);
+        }
+        return resp.json();
+    },
+
+    async del(url) {
+        const resp = await fetch(url, { method: 'DELETE' });
+        if (!resp.ok) {
+            const err = await resp.json().catch(() => ({ detail: resp.statusText }));
+            throw new Error(err.detail || resp.statusText);
+        }
+        return resp.json();
+    },
+};
+
+// ============================================================
+// Toast Notifications
+// ============================================================
+let _toastContainer = null;
+
+function _ensureToastContainer() {
+    if (!_toastContainer) {
+        _toastContainer = document.getElementById('toast-container');
+    }
+    if (!_toastContainer) {
+        _toastContainer = document.createElement('div');
+        _toastContainer.id = 'toast-container';
+        _toastContainer.style.cssText =
+            'position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:8px;';
+        document.body.appendChild(_toastContainer);
+    }
+    return _toastContainer;
+}
+
+function showToast(message, type = 'info') {
+    const container = _ensureToastContainer();
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.textContent = message;
+
+    const colors = { info: '#3b82f6', success: '#10b981', error: '#ef4444' };
+    toast.style.cssText =
+        `padding:12px 20px;border-radius:8px;color:#fff;font-size:14px;` +
+        `background:${colors[type] || colors.info};box-shadow:0 4px 12px rgba(0,0,0,.15);` +
+        `opacity:0;transform:translateX(40px);transition:all .3s ease;max-width:360px;word-break:break-word;`;
+
+    container.appendChild(toast);
+
+    // Animate in
+    requestAnimationFrame(() => {
+        toast.style.opacity = '1';
+        toast.style.transform = 'translateX(0)';
+    });
+
+    // Auto dismiss
+    setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateX(40px)';
+        setTimeout(() => toast.remove(), 300);
+    }, 3500);
+}
+
+// ============================================================
+// Navigation / Router
+// ============================================================
+const pages = ['dashboard', 'calls', 'sms', 'contacts', 'config', 'bluetooth', 'voicechat', 'devlog'];
+let currentPage = '';
+
+function navigate(page) {
+    if (!pages.includes(page)) page = 'dashboard';
+
+    // Toggle .active class on page sections (CSS: .page { display:none } .page.active { display:block })
+    pages.forEach((p) => {
+        const el = document.getElementById(`page-${p}`);
+        if (el) {
+            el.style.display = '';  // clear any inline override
+            el.classList.toggle('active', p === page);
+        }
+    });
+
+    // Update nav active state
+    document.querySelectorAll('.nav-item').forEach((item) => {
+        item.classList.toggle('active', item.dataset.page === page);
+    });
+
+    currentPage = page;
+    localStorage.setItem('activePage', page);
+
+    // Load data for the page
+    switch (page) {
+        case 'dashboard':  loadDashboard(); break;
+        case 'calls':      loadCalls(); break;
+        case 'sms':        loadSMS(); break;
+        case 'contacts':   loadContacts(); break;
+        case 'config':     loadConfig(); break;
+        case 'bluetooth':  loadBluetooth(); break;
+        case 'voicechat': loadVoiceChatConfig(); break;
+        case 'devlog':    loadDevLog(); break;
+    }
+}
+
+// ============================================================
+// Dashboard Page
+// ============================================================
+async function loadDashboard() {
+    try {
+        const [stats, callsData] = await Promise.all([
+            API.get('/api/stats'),
+            API.get('/api/calls?page=1&page_size=5'),
+        ]);
+
+        // Stat cards
+        _setText('stat-total-calls', stats.total_calls);
+        _setText('stat-calls-today', stats.calls_today);
+        _setText('stat-avg-duration', formatDuration(stats.avg_duration_seconds || 0));
+        _setText('stat-total-contacts', stats.total_contacts);
+
+        // Calls by result breakdown
+        renderCallsByResult(stats.calls_by_result || {});
+
+        // Calls by direction breakdown
+        renderCallsByDirection(stats.calls_by_direction || {});
+
+        // Recent calls table
+        renderRecentCallsTable(callsData.items || []);
+    } catch (err) {
+        showToast('加载仪表盘失败: ' + err.message, 'error');
+    }
+}
+
+function renderCallsByResult(data) {
+    const container = document.getElementById('calls-by-result');
+    if (!container) return;
+
+    const labels = {
+        success: '成功', no_answer: '未接', busy: '忙碌',
+        rejected: '拒接', error: '错误', timeout: '超时', unknown: '未知',
+    };
+    const colors = {
+        success: '#10b981', no_answer: '#f59e0b', busy: '#8b5cf6',
+        rejected: '#ef4444', error: '#dc2626', timeout: '#6b7280', unknown: '#9ca3af',
+    };
+
+    const entries = Object.entries(data);
+    if (entries.length === 0) {
+        container.innerHTML = '<span class="text-muted">暂无数据</span>';
+        return;
+    }
+
+    const total = entries.reduce((s, [, v]) => s + v, 0);
+    container.innerHTML = entries
+        .map(([key, val]) => {
+            const pct = total > 0 ? Math.round((val / total) * 100) : 0;
+            const color = colors[key] || '#9ca3af';
+            const label = labels[key] || key;
+            return `<div class="result-bar">
+                <span class="result-label">${escapeHtml(label)}</span>
+                <div class="result-track"><div class="result-fill" style="width:${pct}%;background:${color}"></div></div>
+                <span class="result-value">${val} (${pct}%)</span>
+            </div>`;
+        })
+        .join('');
+}
+
+function renderCallsByDirection(data) {
+    const container = document.getElementById('calls-by-direction');
+    if (!container) return;
+
+    const labels = { outgoing: '拨出', incoming: '接入' };
+    const entries = Object.entries(data);
+    if (entries.length === 0) {
+        container.innerHTML = '<span class="text-muted">暂无数据</span>';
+        return;
+    }
+    container.innerHTML = entries
+        .map(([key, val]) => `<span class="badge badge-${key}">${labels[key] || key}: ${val}</span>`)
+        .join(' ');
+}
+
+function renderRecentCallsTable(items) {
+    const tbody = document.getElementById('recent-calls-body');
+    if (!tbody) return;
+
+    if (items.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">暂无通话记录</td></tr>';
+        return;
+    }
+
+    tbody.innerHTML = items
+        .map(
+            (c) => `<tr>
+            <td>${escapeHtml(formatTime(c.started_at))}</td>
+            <td>${escapeHtml(c.contact_name || c.phone_number || '-')}</td>
+            <td><span class="badge badge-${c.direction || 'unknown'}">${c.direction === 'outgoing' ? '拨出' : '接入'}</span></td>
+            <td>${formatDuration(c.duration_seconds || 0)}</td>
+            <td><span class="badge badge-result-${c.result || 'unknown'}">${escapeHtml(resultLabel(c.result))}</span></td>
+            <td><button class="btn btn-sm btn-link" onclick="viewCallDetail('${escapeHtml(c.task_id)}')">详情</button></td>
+        </tr>`
+        )
+        .join('');
+}
+
+// ============================================================
+// Calls Page
+// ============================================================
+let callsPage = 1;
+const CALLS_PAGE_SIZE = 15;
+
+async function loadCalls() {
+    const tbody = document.getElementById('calls-table-body');
+    if (tbody) tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">加载中...</td></tr>';
+
+    try {
+        const data = await API.get(`/api/calls?page=${callsPage}&page_size=${CALLS_PAGE_SIZE}`);
+        const items = data.items || [];
+        const total = data.total || 0;
+
+        if (!tbody) return;
+
+        if (items.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">暂无通话记录</td></tr>';
+        } else {
+            tbody.innerHTML = items
+                .map(
+                    (c) => `<tr>
+                    <td>${escapeHtml(formatTime(c.started_at))}</td>
+                    <td>${escapeHtml(c.contact_name || '-')}</td>
+                    <td>${escapeHtml(c.phone_number || '-')}</td>
+                    <td><span class="badge badge-${c.direction || 'unknown'}">${c.direction === 'outgoing' ? '拨出' : '接入'}</span></td>
+                    <td>${formatDuration(c.duration_seconds || 0)}</td>
+                    <td><span class="badge badge-result-${c.result || 'unknown'}">${escapeHtml(resultLabel(c.result))}</span></td>
+                    <td>
+                        <button class="btn btn-sm btn-link" onclick="viewCallDetail('${escapeHtml(c.task_id)}')">详情</button>
+                        ${c.status === 'active' ? `<button class="btn btn-sm btn-danger" onclick="hangupCall('${escapeHtml(c.task_id)}')">挂断</button>` : ''}
+                    </td>
+                </tr>`
+                )
+                .join('');
+        }
+
+        renderPagination('calls-pagination', total, callsPage, CALLS_PAGE_SIZE, (p) => {
+            callsPage = p;
+            loadCalls();
+        });
+    } catch (err) {
+        showToast('加载通话记录失败: ' + err.message, 'error');
+    }
+}
+
+function showNewCallForm() {
+    openModal('new-call-modal');
+}
+
+async function submitNewCall() {
+    const phone = _val('call-phone');
+    const purpose = _val('call-purpose');
+    const systemPrompt = _val('call-system-prompt');
+    const playText = _val('call-play-text');
+    const maxDuration = parseInt(_val('call-max-duration')) || 300;
+    const language = _val('call-language') || 'zh';
+
+    if (!purpose) {
+        showToast('请填写通话目的', 'error');
+        return;
+    }
+
+    const body = { purpose, max_duration_seconds: maxDuration, language };
+    if (phone) body.phone_number = phone;
+    if (systemPrompt) body.system_prompt = systemPrompt;
+    if (playText) body.play_text = playText;
+
+    try {
+        const res = await API.post('/api/call', body);
+        showToast(`通话任务已创建: ${res.task_id}`, 'success');
+        closeModal('new-call-modal');
+        _clearForm('new-call-form');
+        callsPage = 1;
+        loadCalls();
+    } catch (err) {
+        showToast('创建通话失败: ' + err.message, 'error');
+    }
+}
+
+async function viewCallDetail(taskId) {
+    // Show the detail view
+    const listView = document.getElementById('calls-list-view');
+    const detailView = document.getElementById('calls-detail-view');
+    if (listView) listView.style.display = 'none';
+    if (detailView) detailView.style.display = '';
+
+    // Load call info, transcript, and summary in parallel
+    try {
+        const [callInfo, transcriptData, summaryData] = await Promise.allSettled([
+            API.get(`/api/call/${taskId}`),
+            API.get(`/api/calls/${taskId}/transcript`),
+            API.get(`/api/calls/${taskId}/summary`),
+        ]);
+
+        const info = callInfo.status === 'fulfilled' ? callInfo.value : {};
+        const transcript = transcriptData.status === 'fulfilled' ? (transcriptData.value.transcript || []) : [];
+        const summary = summaryData.status === 'fulfilled' ? (summaryData.value.summary || '') : '';
+
+        // Header info
+        _setText('detail-task-id', info.task_id || taskId);
+        _setText('detail-phone', info.phone_number || '-');
+        _setText('detail-contact', info.contact_name || '-');
+        _setText('detail-direction', info.direction === 'outgoing' ? '拨出' : '接入');
+        _setText('detail-status', statusLabel(info.status));
+        _setText('detail-result', resultLabel(info.result));
+        _setText('detail-duration', formatDuration(info.duration_seconds || 0));
+        _setText('detail-started', formatTime(info.started_at));
+        _setText('detail-ended', formatTime(info.ended_at));
+
+        // Hangup button visibility
+        const hangupBtn = document.getElementById('detail-hangup-btn');
+        if (hangupBtn) {
+            hangupBtn.style.display = (info.status === 'active' || info.status === 'dialing') ? '' : 'none';
+            hangupBtn.onclick = () => hangupCall(taskId);
+        }
+
+        // Transcript (chat-style)
+        renderTranscript(transcript);
+
+        // Summary
+        const summaryEl = document.getElementById('detail-summary');
+        if (summaryEl) {
+            summaryEl.textContent = summary || '暂无摘要';
+        }
+
+        // Audio player
+        const audioEl = document.getElementById('detail-audio');
+        if (audioEl) {
+            if (info.has_recording) {
+                audioEl.src = `/api/calls/${taskId}/recording`;
+                audioEl.style.display = '';
+            } else {
+                audioEl.style.display = 'none';
+                audioEl.src = '';
+            }
+        }
+    } catch (err) {
+        showToast('加载通话详情失败: ' + err.message, 'error');
+    }
+}
+
+function renderTranscript(transcript) {
+    const container = document.getElementById('detail-transcript');
+    if (!container) return;
+
+    if (!transcript || transcript.length === 0) {
+        container.innerHTML = '<div class="text-muted text-center" style="padding:20px">暂无对话记录</div>';
+        return;
+    }
+
+    container.innerHTML = transcript
+        .map((entry) => {
+            const role = entry.role || 'system';
+            const elapsed = entry.elapsed != null ? formatDuration(entry.elapsed) : '';
+
+            if (role === 'ai') {
+                return `<div class="chat-bubble chat-ai">
+                    <div class="chat-role">AI <span class="chat-time">${escapeHtml(elapsed)}</span></div>
+                    <div class="chat-text">${escapeHtml(entry.text || '')}</div>
+                </div>`;
+            } else if (role === 'human') {
+                return `<div class="chat-bubble chat-human">
+                    <div class="chat-role">对方 <span class="chat-time">${escapeHtml(elapsed)}</span></div>
+                    <div class="chat-text">${escapeHtml(entry.text || '')}</div>
+                </div>`;
+            } else if (role === 'mcp_request') {
+                const tool = entry.tool || '';
+                const args = entry.args ? JSON.stringify(entry.args, null, 2) : '';
+                return `<div class="chat-bubble chat-mcp-request">
+                    <div class="chat-role">MCP 工具调用 <span class="chat-time">${escapeHtml(elapsed)}</span></div>
+                    <div class="chat-tool">${escapeHtml(tool)}</div>
+                    <pre class="chat-args">${escapeHtml(args)}</pre>
+                </div>`;
+            } else if (role === 'mcp_response') {
+                const result = entry.result ? JSON.stringify(entry.result, null, 2) : '';
+                return `<div class="chat-bubble chat-mcp-response">
+                    <div class="chat-role">MCP 响应 <span class="chat-time">${escapeHtml(elapsed)}</span></div>
+                    <pre class="chat-args">${escapeHtml(result)}</pre>
+                </div>`;
+            } else {
+                // system or unknown
+                return `<div class="chat-bubble chat-system">
+                    <div class="chat-text">${escapeHtml(entry.text || '')}</div>
+                </div>`;
+            }
+        })
+        .join('');
+
+    // Scroll to bottom
+    container.scrollTop = container.scrollHeight;
+}
+
+function closeCallDetail() {
+    const listView = document.getElementById('calls-list-view');
+    const detailView = document.getElementById('calls-detail-view');
+    if (listView) listView.style.display = '';
+    if (detailView) detailView.style.display = 'none';
+}
+
+async function hangupCall(taskId) {
+    try {
+        await API.post(`/api/call/${taskId}/hangup`);
+        showToast('挂断请求已发送', 'success');
+        if (document.getElementById('calls-detail-view')?.style.display !== 'none') {
+            // Refresh detail view
+            viewCallDetail(taskId);
+        }
+        loadCalls();
+    } catch (err) {
+        showToast('挂断失败: ' + err.message, 'error');
+    }
+}
+
+// ============================================================
+// SMS Page
+// ============================================================
+let smsPage = 1;
+const SMS_PAGE_SIZE = 20;
+
+async function loadSMS() {
+    const tbody = document.getElementById('sms-table-body');
+    if (tbody) tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">加载中...</td></tr>';
+
+    try {
+        const data = await API.get(`/api/sms?page=${smsPage}&page_size=${SMS_PAGE_SIZE}`);
+        const items = data.items || [];
+        const total = data.total || 0;
+
+        if (!tbody) return;
+
+        if (items.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">暂无短信记录</td></tr>';
+        } else {
+            tbody.innerHTML = items
+                .map(
+                    (s) => `<tr>
+                    <td>${escapeHtml(formatTime(s.timestamp))}</td>
+                    <td>${escapeHtml(s.contact_name || s.phone_number || '-')}</td>
+                    <td><span class="badge badge-${s.direction || 'unknown'}">${s.direction === 'outgoing' ? '发送' : '接收'}</span></td>
+                    <td class="sms-content-cell">${escapeHtml(s.content || '')}</td>
+                    <td><span class="badge badge-sms-${s.status || 'unknown'}">${escapeHtml(s.status || '-')}</span></td>
+                </tr>`
+                )
+                .join('');
+        }
+
+        renderPagination('sms-pagination', total, smsPage, SMS_PAGE_SIZE, (p) => {
+            smsPage = p;
+            loadSMS();
+        });
+    } catch (err) {
+        showToast('加载短信记录失败: ' + err.message, 'error');
+    }
+}
+
+function showNewSMSForm() {
+    openModal('new-sms-modal');
+}
+
+async function submitNewSMS() {
+    const phone = _val('sms-phone');
+    const content = _val('sms-content');
+
+    if (!phone || !content) {
+        showToast('请填写手机号和短信内容', 'error');
+        return;
+    }
+
+    try {
+        await API.post('/api/sms', { phone_number: phone, content });
+        showToast('短信发送成功', 'success');
+        closeModal('new-sms-modal');
+        _clearForm('new-sms-form');
+        smsPage = 1;
+        loadSMS();
+    } catch (err) {
+        showToast('发送短信失败: ' + err.message, 'error');
+    }
+}
+
+// ============================================================
+// Contacts Page
+// ============================================================
+let contactsPage = 1;
+let contactsQuery = '';
+const CONTACTS_PAGE_SIZE = 20;
+let _contactSearchTimer = null;
+
+async function loadContacts() {
+    const tbody = document.getElementById('contacts-table-body');
+    if (tbody) tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">加载中...</td></tr>';
+
+    try {
+        let url = `/api/contacts?page=${contactsPage}&page_size=${CONTACTS_PAGE_SIZE}`;
+        if (contactsQuery) url += `&query=${encodeURIComponent(contactsQuery)}`;
+
+        const data = await API.get(url);
+        const items = data.items || [];
+        const total = data.total || 0;
+
+        if (!tbody) return;
+
+        if (items.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">暂无联系人</td></tr>';
+        } else {
+            tbody.innerHTML = items
+                .map(
+                    (c) => `<tr>
+                    <td>${escapeHtml(c.name || '-')}</td>
+                    <td>${escapeHtml(c.phone || '-')}</td>
+                    <td>${escapeHtml(c.company || '-')}</td>
+                    <td>${escapeHtml(c.title || '-')}</td>
+                    <td>${(c.tags || []).map((t) => `<span class="tag">${escapeHtml(t)}</span>`).join(' ')}</td>
+                    <td>
+                        <button class="btn btn-sm btn-link" onclick="editContact('${escapeHtml(c.id)}')">编辑</button>
+                        <button class="btn btn-sm btn-danger-link" onclick="deleteContact('${escapeHtml(c.id)}')">删除</button>
+                    </td>
+                </tr>`
+                )
+                .join('');
+        }
+
+        renderPagination('contacts-pagination', total, contactsPage, CONTACTS_PAGE_SIZE, (p) => {
+            contactsPage = p;
+            loadContacts();
+        });
+    } catch (err) {
+        showToast('加载联系人失败: ' + err.message, 'error');
+    }
+}
+
+function onContactSearch(value) {
+    clearTimeout(_contactSearchTimer);
+    _contactSearchTimer = setTimeout(() => {
+        contactsQuery = value.trim();
+        contactsPage = 1;
+        loadContacts();
+    }, 300);
+}
+
+function showNewContactForm() {
+    openModal('new-contact-modal');
+}
+
+async function submitNewContact() {
+    const name = _val('contact-name');
+    const phone = _val('contact-phone');
+    const company = _val('contact-company');
+    const title = _val('contact-title');
+    const notes = _val('contact-notes');
+    const tagsStr = _val('contact-tags');
+
+    if (!name || !phone) {
+        showToast('请填写姓名和手机号', 'error');
+        return;
+    }
+
+    const body = { name, phone };
+    if (company) body.company = company;
+    if (title) body.title = title;
+    if (notes) body.notes = notes;
+    if (tagsStr) body.tags = tagsStr.split(',').map((t) => t.trim()).filter(Boolean);
+
+    try {
+        await API.post('/api/contacts', body);
+        showToast('联系人已添加', 'success');
+        closeModal('new-contact-modal');
+        _clearForm('new-contact-form');
+        loadContacts();
+    } catch (err) {
+        showToast('添加联系人失败: ' + err.message, 'error');
+    }
+}
+
+async function editContact(contactId) {
+    try {
+        const c = await API.get(`/api/contacts/${contactId}`);
+
+        _setVal('edit-contact-id', c.id);
+        _setVal('edit-contact-name', c.name || '');
+        _setVal('edit-contact-phone', c.phone || '');
+        _setVal('edit-contact-company', c.company || '');
+        _setVal('edit-contact-title', c.title || '');
+        _setVal('edit-contact-notes', c.notes || '');
+        _setVal('edit-contact-tags', (c.tags || []).join(', '));
+
+        openModal('edit-contact-modal');
+    } catch (err) {
+        showToast('加载联系人信息失败: ' + err.message, 'error');
+    }
+}
+
+async function updateContact() {
+    const contactId = _val('edit-contact-id');
+    if (!contactId) return;
+
+    const name = _val('edit-contact-name');
+    const phone = _val('edit-contact-phone');
+    const company = _val('edit-contact-company');
+    const title = _val('edit-contact-title');
+    const notes = _val('edit-contact-notes');
+    const tagsStr = _val('edit-contact-tags');
+
+    const body = {};
+    if (name) body.name = name;
+    if (phone) body.phone = phone;
+    if (company !== undefined) body.company = company;
+    if (title !== undefined) body.title = title;
+    if (notes !== undefined) body.notes = notes;
+    if (tagsStr !== undefined) body.tags = tagsStr.split(',').map((t) => t.trim()).filter(Boolean);
+
+    try {
+        await API.put(`/api/contacts/${contactId}`, body);
+        showToast('联系人已更新', 'success');
+        closeModal('edit-contact-modal');
+        loadContacts();
+    } catch (err) {
+        showToast('更新联系人失败: ' + err.message, 'error');
+    }
+}
+
+async function deleteContact(contactId) {
+    if (!confirm('确定删除此联系人？')) return;
+
+    try {
+        await API.del(`/api/contacts/${contactId}`);
+        showToast('联系人已删除', 'success');
+        loadContacts();
+    } catch (err) {
+        showToast('删除联系人失败: ' + err.message, 'error');
+    }
+}
+
+async function syncContacts() {
+    const btn = document.getElementById('btn-sync-contacts');
+    if (btn) {
+        btn.disabled = true;
+        btn.textContent = '同步中...';
+    }
+
+    try {
+        const res = await API.post('/api/contacts/sync');
+        showToast(`同步完成: 新增 ${res.added}, 更新 ${res.updated}, 共 ${res.total}`, 'success');
+        loadContacts();
+    } catch (err) {
+        showToast('同步联系人失败: ' + err.message, 'error');
+    } finally {
+        if (btn) {
+            btn.disabled = false;
+            btn.textContent = '从手机同步';
+        }
+    }
+}
+
+// ============================================================
+// Config Page
+// ============================================================
+let currentConfig = null;
+let _configSaveTimer = null;
+const CONFIG_SAVE_DEBOUNCE_MS = 1000;
+
+// --- Basic Info: AI phones & Owners ---
+let _aiPhones = [];       // ["13800138000", ...]
+let _currentAiPhone = ""; // the active phone
+let _owners = [];          // [{phone, name, note}, ...]
+
+function _renderAiPhones() {
+    const container = document.getElementById('ai-phone-list');
+    if (!container) return;
+    container.innerHTML = '';
+    _aiPhones.forEach((phone) => {
+        const tag = document.createElement('span');
+        tag.className = 'tag-item' + (phone === _currentAiPhone ? ' active' : '');
+        tag.innerHTML = phone +
+            (phone === _currentAiPhone ? ' <span class="badge badge-primary">当前</span>' : '') +
+            ' <button type="button" class="tag-remove" data-phone="' + phone + '">&times;</button>';
+        tag.addEventListener('click', (e) => {
+            if (e.target.classList.contains('tag-remove')) return;
+            _currentAiPhone = phone;
+            _renderAiPhones();
+            _debouncedSaveConfig();
+        });
+        tag.querySelector('.tag-remove').addEventListener('click', (e) => {
+            e.stopPropagation();
+            _aiPhones = _aiPhones.filter(p => p !== phone);
+            if (_currentAiPhone === phone) _currentAiPhone = _aiPhones[0] || '';
+            _renderAiPhones();
+            _debouncedSaveConfig();
+        });
+        container.appendChild(tag);
+    });
+}
+
+function _addAiPhone() {
+    const input = document.getElementById('ai-phone-input');
+    const phone = (input.value || '').trim();
+    if (!phone) return;
+    if (_aiPhones.includes(phone)) { showToast('号码已存在', 'warning'); return; }
+    _aiPhones.push(phone);
+    if (!_currentAiPhone) _currentAiPhone = phone;
+    input.value = '';
+    _renderAiPhones();
+    _debouncedSaveConfig();
+}
+
+function _renderOwners() {
+    const container = document.getElementById('owner-list');
+    if (!container) return;
+    container.innerHTML = '';
+    _owners.forEach((owner, idx) => {
+        const row = document.createElement('div');
+        row.className = 'owner-item';
+        row.innerHTML =
+            '<span class="owner-phone">' + (owner.phone || '') + '</span>' +
+            '<span class="owner-name">' + (owner.name || '') + '</span>' +
+            '<span class="owner-note">' + (owner.note || '') + '</span>' +
+            '<button type="button" class="tag-remove" data-idx="' + idx + '">&times;</button>';
+        row.querySelector('.tag-remove').addEventListener('click', () => {
+            _owners.splice(idx, 1);
+            _renderOwners();
+            _debouncedSaveConfig();
+        });
+        container.appendChild(row);
+    });
+}
+
+function _addOwner() {
+    const phoneEl = document.getElementById('owner-phone-input');
+    const nameEl = document.getElementById('owner-name-input');
+    const noteEl = document.getElementById('owner-note-input');
+    const phone = (phoneEl.value || '').trim();
+    const name = (nameEl.value || '').trim();
+    const note = (noteEl.value || '').trim();
+    if (!phone) { showToast('请输入号码', 'warning'); return; }
+    if (_owners.some(o => o.phone === phone)) { showToast('号码已存在', 'warning'); return; }
+    const entry = { phone };
+    if (name) entry.name = name;
+    if (note) entry.note = note;
+    _owners.push(entry);
+    phoneEl.value = ''; nameEl.value = ''; noteEl.value = '';
+    _renderOwners();
+    _debouncedSaveConfig();
+}
+
+function _fillBasicInfo(c) {
+    // AI phones: user.phone_numbers (list) + user.phone_number (current)
+    _aiPhones = (c.user && c.user.phone_numbers) || [];
+    _currentAiPhone = (c.user && c.user.phone_number) || '';
+    // Backwards compat: if phone_numbers is empty but phone_number is set, seed it
+    if (_aiPhones.length === 0 && _currentAiPhone) {
+        _aiPhones = [_currentAiPhone];
+    }
+    _renderAiPhones();
+
+    // Owners
+    const rawOwners = (c.user && c.user.owners) || [];
+    _owners = rawOwners.map(o => typeof o === 'string' ? { phone: o } : { ...o });
+    _renderOwners();
+}
+
+function _buildBasicInfoConfig() {
+    return {
+        user: {
+            phone_number: _currentAiPhone,
+            phone_numbers: _aiPhones,
+            owners: _owners,
+        }
+    };
+}
+
+async function loadConfig() {
+    try {
+        const data = await API.get('/api/config');
+        currentConfig = data;
+        fillConfigForm(data);
+    } catch (err) {
+        showToast('加载配置失败: ' + err.message, 'error');
+    }
+}
+
+function fillConfigForm(c) {
+    // Basic info (AI phones & owners)
+    _fillBasicInfo(c);
+
+    // LLM provider tabs
+    const activeProvider = _getNestedVal(c, 'llm.active_provider') || 'openai';
+    switchProviderTab(activeProvider);
+
+    // Restore cached model lists before setting values
+    _restoreCachedModels();
+
+    // LLM provider configs — HTML ids: openai-base-url, openai-api-key, openai-model, etc.
+    const providers = ['openai', 'claude', 'gemini'];
+    providers.forEach((p) => {
+        _setVal(`${p}-base-url`, _getNestedVal(c, `llm.providers.${p}.base_url`) || '');
+        _setVal(`${p}-api-key`, _getNestedVal(c, `llm.providers.${p}.api_key`) || '');
+        _setSelectVal(`${p}-model`, _getNestedVal(c, `llm.providers.${p}.model`) || '');
+    });
+
+    // Common LLM settings (use first active provider's values as defaults)
+    _setVal('llm-temperature', _getNestedVal(c, `llm.providers.${activeProvider}.temperature`) || '0.7');
+    _setVal('llm-max-tokens', _getNestedVal(c, `llm.providers.${activeProvider}.max_tokens`) || '1024');
+    const tempSpan = document.getElementById('llm-temperature-value');
+    if (tempSpan) tempSpan.textContent = _getNestedVal(c, `llm.providers.${activeProvider}.temperature`) || '0.7';
+
+    // ASR
+    const asrProvider = _getNestedVal(c, 'asr.provider') || 'whisper';
+    _setVal('asr-provider', asrProvider);
+    _setVal('asr-language', _getNestedVal(c, 'asr.whisper.language') || 'zh');
+    // Whisper fields
+    _setVal('asr-whisper-base-url', _getNestedVal(c, 'asr.whisper.base_url') || '');
+    _setVal('asr-whisper-api-key', _getNestedVal(c, 'asr.whisper.api_key') || '');
+    _setVal('asr-whisper-model', _getNestedVal(c, 'asr.whisper.model') || 'whisper-1');
+    // Volcengine fields
+    _setVal('asr-volc-app-id', _getNestedVal(c, 'asr.volcengine.app_id') || '');
+    _setVal('asr-volc-access-token', _getNestedVal(c, 'asr.volcengine.access_token') || '');
+    _setVal('asr-volc-resource-id', _getNestedVal(c, 'asr.volcengine.resource_id') || 'volc.bigasr.sauc.duration');
+    // Tencent fields
+    _setVal('asr-tencent-app-id', _getNestedVal(c, 'asr.tencent.app_id') || '');
+    _setVal('asr-tencent-secret-id', _getNestedVal(c, 'asr.tencent.secret_id') || '');
+    _setVal('asr-tencent-secret-key', _getNestedVal(c, 'asr.tencent.secret_key') || '');
+    _setVal('asr-tencent-engine', _getNestedVal(c, 'asr.tencent.engine_model_type') || '16k_zh_large');
+    // Xunfei fields
+    _setVal('asr-xunfei-app-id', _getNestedVal(c, 'asr.xunfei.app_id') || '');
+    _setVal('asr-xunfei-api-key', _getNestedVal(c, 'asr.xunfei.api_key') || '');
+    _setVal('asr-xunfei-api-secret', _getNestedVal(c, 'asr.xunfei.api_secret') || '');
+    switchAsrProvider(asrProvider);
+
+    // TTS
+    const ttsProvider = _getNestedVal(c, 'tts.provider') || 'edge-tts';
+    _setVal('tts-provider', ttsProvider);
+    switchTtsProvider(ttsProvider);
+    // Edge TTS
+    _setVal('tts-edge-voice', _getNestedVal(c, 'tts.edge_tts.voice') || 'zh-CN-XiaoxiaoNeural');
+    // Volcengine TTS
+    _setVal('tts-volc-voice', _getNestedVal(c, 'tts.volcengine.voice_type') || 'BV001_streaming');
+    _setVal('tts-volc-speed', _getNestedVal(c, 'tts.volcengine.speed_ratio') || '1.0');
+    _setVal('tts-volc-volume', _getNestedVal(c, 'tts.volcengine.volume_ratio') || '1.0');
+    const volcSpeedEl = document.getElementById('tts-volc-speed');
+    if (volcSpeedEl) document.getElementById('tts-volc-speed-val').textContent = volcSpeedEl.value;
+    const volcVolEl = document.getElementById('tts-volc-volume');
+    if (volcVolEl) document.getElementById('tts-volc-volume-val').textContent = volcVolEl.value;
+    // Tencent TTS
+    _setVal('tts-tc-voice', String(_getNestedVal(c, 'tts.tencent.voice_type') || '101001'));
+    _setVal('tts-tc-speed', String(_getNestedVal(c, 'tts.tencent.speed') || '0'));
+    _setVal('tts-tc-volume', String(_getNestedVal(c, 'tts.tencent.volume') || '0'));
+    const tcSpeedEl = document.getElementById('tts-tc-speed');
+    if (tcSpeedEl) document.getElementById('tts-tc-speed-val').textContent = tcSpeedEl.value;
+    const tcVolEl = document.getElementById('tts-tc-volume');
+    if (tcVolEl) document.getElementById('tts-tc-volume-val').textContent = tcVolEl.value;
+    // Azure TTS
+    _setVal('tts-azure-key', _getNestedVal(c, 'tts.azure.api_key') || '');
+    _setVal('tts-azure-region', _getNestedVal(c, 'tts.azure.region') || 'eastasia');
+    _setVal('tts-azure-voice', _getNestedVal(c, 'tts.azure.voice') || 'zh-CN-XiaoxiaoNeural');
+    // OpenAI TTS
+    _setVal('tts-openai-key', _getNestedVal(c, 'tts.openai.api_key') || '');
+    _setVal('tts-openai-voice', _getNestedVal(c, 'tts.openai.voice') || 'alloy');
+    // Aliyun TTS
+    _setVal('tts-ali-akid', _getNestedVal(c, 'tts.aliyun.access_key_id') || '');
+    _setVal('tts-ali-aksecret', _getNestedVal(c, 'tts.aliyun.access_key_secret') || '');
+    _setVal('tts-ali-appkey', _getNestedVal(c, 'tts.aliyun.app_key') || '');
+    // Local TTS
+    _setVal('tts-local-engine', _getNestedVal(c, 'tts.local.engine') || 'sherpa-onnx');
+    _setVal('tts-local-model', _getNestedVal(c, 'tts.local.model_path') || '');
+
+    // VAD
+    _setVal('vad-energy-threshold', _getNestedVal(c, 'vad.energy_threshold') || '300');
+    _setVal('vad-silence-ms', _getNestedVal(c, 'vad.silence_threshold_ms') || '800');
+    _setVal('vad-min-speech-ms', _getNestedVal(c, 'vad.min_speech_ms') || '250');
+
+    // Call
+    _setVal('default-max-duration', _getNestedVal(c, 'call.max_duration_seconds') || '300');
+    _setVal('default-timeout', _getNestedVal(c, 'call.no_response_timeout') || '15');
+    _setVal('incoming-action', _getNestedVal(c, 'call.incoming_default_action') || 'reject');
+
+    // Webhook
+    _setVal('webhook-default-url', _getNestedVal(c, 'webhook.default_url') || '');
+    _setVal('webhook-retry-count', _getNestedVal(c, 'webhook.retry_count') || '3');
+    _setVal('webhook-retry-interval', _getNestedVal(c, 'webhook.timeout') || '10');
+}
+
+function _buildConfigObject() {
+    const activeProvider = document.querySelector('.provider-tab.active')?.dataset?.provider || 'openai';
+    const temp = parseFloat(_val('llm-temperature')) || 0.7;
+    const maxTokens = parseInt(_val('llm-max-tokens')) || 1024;
+
+    const config = {
+        llm: {
+            active_provider: activeProvider,
+            providers: {},
+        },
+        asr: {
+            provider: _val('asr-provider') || 'whisper',
+            whisper: {
+                base_url: _val('asr-whisper-base-url'),
+                api_key: _val('asr-whisper-api-key'),
+                model: _val('asr-whisper-model') || 'whisper-1',
+                language: _val('asr-language') || 'zh',
+            },
+            volcengine: {
+                app_id: _val('asr-volc-app-id'),
+                access_token: _val('asr-volc-access-token'),
+                resource_id: _val('asr-volc-resource-id') || 'volc.bigasr.sauc.duration',
+            },
+            tencent: {
+                app_id: _val('asr-tencent-app-id'),
+                secret_id: _val('asr-tencent-secret-id'),
+                secret_key: _val('asr-tencent-secret-key'),
+                engine_model_type: _val('asr-tencent-engine') || '16k_zh_large',
+            },
+            xunfei: {
+                app_id: _val('asr-xunfei-app-id'),
+                api_key: _val('asr-xunfei-api-key'),
+                api_secret: _val('asr-xunfei-api-secret'),
+            },
+        },
+        tts: {
+            provider: _val('tts-provider') || 'edge-tts',
+            edge_tts: {
+                voice: _val('tts-edge-voice') || 'zh-CN-XiaoxiaoNeural',
+            },
+            volcengine: {
+                voice_type: _val('tts-volc-voice') || 'BV001_streaming',
+                speed_ratio: parseFloat(_val('tts-volc-speed')) || 1.0,
+                volume_ratio: parseFloat(_val('tts-volc-volume')) || 1.0,
+            },
+            tencent: {
+                voice_type: parseInt(_val('tts-tc-voice')) || 101001,
+                speed: parseFloat(_val('tts-tc-speed')) || 0,
+                volume: parseFloat(_val('tts-tc-volume')) || 0,
+            },
+            azure: {
+                api_key: _val('tts-azure-key') || '',
+                region: _val('tts-azure-region') || 'eastasia',
+                voice: _val('tts-azure-voice') || 'zh-CN-XiaoxiaoNeural',
+            },
+            openai: {
+                api_key: _val('tts-openai-key') || '',
+                voice: _val('tts-openai-voice') || 'alloy',
+            },
+            aliyun: {
+                access_key_id: _val('tts-ali-akid') || '',
+                access_key_secret: _val('tts-ali-aksecret') || '',
+                app_key: _val('tts-ali-appkey') || '',
+            },
+            local: {
+                engine: _val('tts-local-engine') || 'sherpa-onnx',
+                model_path: _val('tts-local-model') || '',
+            },
+        },
+        vad: {
+            energy_threshold: parseInt(_val('vad-energy-threshold')) || 300,
+            silence_threshold_ms: parseInt(_val('vad-silence-ms')) || 800,
+            min_speech_ms: parseInt(_val('vad-min-speech-ms')) || 250,
+        },
+        call: {
+            max_duration_seconds: parseInt(_val('default-max-duration')) || 300,
+            no_response_timeout: parseInt(_val('default-timeout')) || 15,
+            incoming_default_action: _val('incoming-action') || 'reject',
+        },
+        webhook: {
+            default_url: _val('webhook-default-url'),
+            retry_count: parseInt(_val('webhook-retry-count')) || 3,
+            timeout: parseInt(_val('webhook-retry-interval')) || 10,
+        },
+    };
+
+    const providers = ['openai', 'claude', 'gemini'];
+    providers.forEach((p) => {
+        config.llm.providers[p] = {
+            base_url: _val(`${p}-base-url`),
+            api_key: _val(`${p}-api-key`),
+            model: _val(`${p}-model`),
+            temperature: temp,
+            max_tokens: maxTokens,
+        };
+    });
+
+    // Merge basic info
+    Object.assign(config, _buildBasicInfoConfig());
+
+    return config;
+}
+
+function _showConfigSaveStatus(status) {
+    const el = document.getElementById('config-save-status');
+    if (!el) return;
+    el.classList.remove('saving', 'saved', 'error', 'fade-out');
+    if (status === 'saving') {
+        el.textContent = '保存中...';
+        el.classList.add('saving');
+    } else if (status === 'saved') {
+        el.textContent = '已保存';
+        el.classList.add('saved');
+        setTimeout(() => {
+            el.classList.add('fade-out');
+            setTimeout(() => { el.textContent = ''; el.classList.remove('saved', 'fade-out'); }, 300);
+        }, 2000);
+    } else if (status === 'error') {
+        el.textContent = '保存失败';
+        el.classList.add('error');
+        setTimeout(() => {
+            el.classList.add('fade-out');
+            setTimeout(() => { el.textContent = ''; el.classList.remove('error', 'fade-out'); }, 300);
+        }, 3000);
+    }
+}
+
+function _debouncedSaveConfig() {
+    clearTimeout(_configSaveTimer);
+    _configSaveTimer = setTimeout(async () => {
+        _showConfigSaveStatus('saving');
+        try {
+            const config = _buildConfigObject();
+            const updated = await API.put('/api/config', config);
+            currentConfig = updated;
+            _showConfigSaveStatus('saved');
+        } catch (err) {
+            _showConfigSaveStatus('error');
+            showToast('保存配置失败: ' + err.message, 'error');
+        }
+    }, CONFIG_SAVE_DEBOUNCE_MS);
+}
+
+async function refreshModels(provider) {
+    const selectId = `${provider}-model`;
+    const selectEl = document.getElementById(selectId);
+
+    try {
+        showToast(`正在获取 ${provider} 模型列表...`, 'info');
+        const models = await API.get(`/api/models?provider=${provider}`);
+
+        if (selectEl && Array.isArray(models)) {
+            const currentVal = selectEl.value;
+            _populateModelSelect(selectEl, models, currentVal);
+            // Persist model list to localStorage
+            try { localStorage.setItem(`models-${provider}`, JSON.stringify(models)); } catch (_) {}
+            showToast(`已获取 ${models.length} 个模型`, 'success');
+        }
+    } catch (err) {
+        showToast(`获取模型列表失败: ${err.message}`, 'error');
+    }
+}
+
+/** Populate a model <select> with a list of {id, name} and restore selection. */
+function _populateModelSelect(selectEl, models, selectedValue) {
+    if (selectEl.tagName === 'SELECT') {
+        selectEl.innerHTML = models
+            .map((m) => `<option value="${escapeHtml(m.id)}">${escapeHtml(m.name || m.id)}</option>`)
+            .join('');
+        if (selectedValue) {
+            if (models.some((m) => m.id === selectedValue)) {
+                selectEl.value = selectedValue;
+            } else {
+                // Saved model not in list — add it so the value is preserved
+                const opt = document.createElement('option');
+                opt.value = selectedValue;
+                opt.textContent = selectedValue;
+                selectEl.appendChild(opt);
+                selectEl.value = selectedValue;
+            }
+        }
+    }
+}
+
+/** Restore cached model lists from localStorage for all LLM providers. */
+function _restoreCachedModels() {
+    const providers = ['openai', 'claude', 'gemini'];
+    providers.forEach((p) => {
+        const selectEl = document.getElementById(`${p}-model`);
+        if (!selectEl) return;
+        try {
+            const raw = localStorage.getItem(`models-${p}`);
+            if (raw) {
+                const models = JSON.parse(raw);
+                if (Array.isArray(models) && models.length > 0) {
+                    const currentVal = selectEl.value;
+                    _populateModelSelect(selectEl, models, currentVal);
+                }
+            }
+        } catch (_) {}
+    });
+}
+
+function switchAsrProvider(provider) {
+    const configs = ['whisper', 'volcengine', 'tencent', 'xunfei'];
+    configs.forEach((p) => {
+        const el = document.getElementById(`asr-config-${p}`);
+        if (el) el.classList.toggle('hidden', p !== provider);
+    });
+}
+
+function switchTtsProvider(provider) {
+    const cfgs = ['edge-tts', 'volcengine', 'tencent', 'azure', 'openai', 'aliyun', 'local'];
+    cfgs.forEach((p) => {
+        const el = document.getElementById(`tts-cfg-${p}`);
+        if (el) el.style.display = (p === provider) ? '' : 'none';
+    });
+    // Show common sliders only for edge-tts
+    const common = document.getElementById('tts-common-sliders');
+    if (common) common.style.display = (provider === 'edge-tts') ? '' : 'none';
+}
+
+// ============================================================
+// TTS Test Dialog
+// ============================================================
+const TTS_VOICES = {
+    'edge-tts': [
+        { id: 'zh-CN-XiaoxiaoNeural', name: '晓晓 (女声)' },
+        { id: 'zh-CN-YunxiNeural', name: '云希 (男声)' },
+        { id: 'zh-CN-XiaoyiNeural', name: '晓伊 (女声)' },
+        { id: 'zh-CN-YunjianNeural', name: '云健 (男声)' },
+    ],
+    volcengine: [
+        { id: 'BV001_streaming', name: '通用女声' },
+        { id: 'BV002_streaming', name: '通用男声' },
+        { id: 'BV007_streaming', name: '亲切女声' },
+        { id: 'BV700_streaming', name: '灿灿' },
+        { id: 'BV701_streaming', name: '擎苍' },
+        { id: 'BV705_streaming', name: '炀炀' },
+        { id: 'BV113_streaming', name: '甜宠少御' },
+        { id: 'BV056_streaming', name: '阳光男声' },
+        { id: 'BV033_streaming', name: '温柔小哥' },
+    ],
+    tencent: [
+        { id: '101001', name: '智瑜 (情感女声)' },
+        { id: '101002', name: '智聆 (通用女声)' },
+        { id: '101004', name: '智云 (通用男声)' },
+        { id: '101005', name: '智莉 (通用女声)' },
+        { id: '101010', name: '智华 (通用男声)' },
+        { id: '101018', name: '智靖 (情感男声)' },
+        { id: '501001', name: '智兰 (新闻女声)' },
+        { id: '501004', name: '月华 (聊天女声)' },
+        { id: '501005', name: '飞镜 (聊天男声)' },
+    ],
+    azure: [
+        { id: 'zh-CN-XiaoxiaoNeural', name: 'Xiaoxiao (女声)' },
+        { id: 'zh-CN-YunxiNeural', name: 'Yunxi (男声)' },
+    ],
+    openai: [
+        { id: 'alloy', name: 'Alloy' },
+        { id: 'echo', name: 'Echo' },
+        { id: 'fable', name: 'Fable' },
+        { id: 'onyx', name: 'Onyx' },
+        { id: 'nova', name: 'Nova' },
+        { id: 'shimmer', name: 'Shimmer' },
+    ],
+    aliyun: [
+        { id: 'zhixiaobai', name: '知小白' },
+        { id: 'zhiyan', name: '知燕' },
+    ],
+    local: [
+        { id: 'default', name: '默认' },
+    ],
+};
+
+let ttsTestAudio = null;
+let ttsTestGeneration = 0;  // prevent stale responses from playing
+
+function _ttsLog(msg) {
+    const el = document.getElementById('tts-test-log');
+    if (!el) return;
+    if (msg === 'clear') {
+        el.textContent = '';
+        el.style.display = 'none';
+        return;
+    }
+    el.style.display = '';
+    const ts = new Date().toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    el.textContent += `[${ts}] ${msg}\n`;
+    el.scrollTop = el.scrollHeight;
+}
+
+function _ttsReportDiag(provider, error) {
+    const el = document.getElementById('tts-test-log');
+    const log = el ? el.textContent : '';
+    fetch('/api/tts-diag', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            log,
+            provider,
+            error: error || '',
+            timestamp: new Date().toISOString(),
+        }),
+    }).catch(() => {});  // fire-and-forget
+}
+
+function openTtsTest() {
+    const overlay = document.getElementById('tts-test-overlay');
+    if (!overlay) return;
+    overlay.classList.remove('hidden');
+
+    // Sync provider from config page
+    const cfgProvider = document.getElementById('tts-provider');
+    const testProvider = document.getElementById('tts-test-provider');
+    if (cfgProvider && testProvider) {
+        testProvider.value = cfgProvider.value;
+    }
+    _updateTtsTestVoices();
+    _ttsLog('clear');
+
+    document.getElementById('tts-test-status').textContent = '点击"合成并播放"开始测试';
+}
+
+function closeTtsTest() {
+    const overlay = document.getElementById('tts-test-overlay');
+    if (overlay) overlay.classList.add('hidden');
+    _stopTtsTestAudio();
+}
+
+function _stopTtsTestAudio() {
+    if (ttsTestAudio) {
+        ttsTestAudio.pause();
+        ttsTestAudio.src = '';
+        ttsTestAudio = null;
+    }
+    const playBtn = document.getElementById('tts-test-play');
+    const stopBtn = document.getElementById('tts-test-stop');
+    if (playBtn) playBtn.style.display = '';
+    if (stopBtn) stopBtn.style.display = 'none';
+}
+
+function _updateTtsTestVoices() {
+    const providerSel = document.getElementById('tts-test-provider');
+    const voiceSel = document.getElementById('tts-test-voice');
+    if (!providerSel || !voiceSel) return;
+
+    const provider = providerSel.value;
+    const voices = TTS_VOICES[provider] || [];
+    voiceSel.innerHTML = voices.map(v =>
+        `<option value="${v.id}">${v.name}</option>`
+    ).join('');
+
+    // Sync voice from config page if same provider
+    const cfgProvider = document.getElementById('tts-provider');
+    if (cfgProvider && cfgProvider.value === provider) {
+        _syncTtsTestVoiceFromConfig(provider);
+    }
+}
+
+function _syncTtsTestVoiceFromConfig(provider) {
+    const voiceSel = document.getElementById('tts-test-voice');
+    if (!voiceSel) return;
+    let cfgVoice = '';
+    if (provider === 'edge-tts') cfgVoice = _val('tts-edge-voice');
+    else if (provider === 'volcengine') cfgVoice = _val('tts-volc-voice');
+    else if (provider === 'tencent') cfgVoice = _val('tts-tc-voice');
+    else if (provider === 'azure') cfgVoice = _val('tts-azure-voice');
+    else if (provider === 'openai') cfgVoice = _val('tts-openai-voice');
+    if (cfgVoice) voiceSel.value = cfgVoice;
+}
+
+async function runTtsTest() {
+    const text = _val('tts-test-text');
+    if (!text || !text.trim()) {
+        showToast('请输入要合成的文本', 'error');
+        return;
+    }
+
+    const provider = _val('tts-test-provider');
+    const voice = _val('tts-test-voice');
+    const speed = parseFloat(document.getElementById('tts-test-speed')?.value || '1.0');
+
+    const statusEl = document.getElementById('tts-test-status');
+    const playBtn = document.getElementById('tts-test-play');
+    const stopBtn = document.getElementById('tts-test-stop');
+
+    // Bump generation to invalidate any in-flight request
+    const gen = ++ttsTestGeneration;
+    _stopTtsTestAudio();
+    _ttsLog('clear');
+    _ttsLog('引擎: ' + provider + ', 音色: ' + voice + ', 语速: ' + speed);
+    _ttsLog('文本: ' + text.substring(0, 50) + (text.length > 50 ? '...' : ''));
+    if (statusEl) statusEl.textContent = '正在合成...';
+    if (playBtn) playBtn.disabled = true;
+
+    const MAX_RETRIES = 2;
+    let lastErr = null;
+
+    for (let attempt = 1; attempt <= MAX_RETRIES + 1; attempt++) {
+        if (gen !== ttsTestGeneration) return;
+
+        if (attempt > 1) {
+            _ttsLog('第' + (attempt - 1) + '次重试...');
+            if (statusEl) statusEl.textContent = `第${attempt - 1}次重试中...`;
+            await new Promise(r => setTimeout(r, 800 * attempt));
+            if (gen !== ttsTestGeneration) return;
+        }
+
+        try {
+            _ttsLog('发送合成请求 (attempt ' + attempt + ')...');
+            const t0 = performance.now();
+
+            const resp = await fetch('/api/tts-test', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ provider, voice, speed, volume: 1.0, text }),
+            });
+
+            const elapsed = ((performance.now() - t0) / 1000).toFixed(2);
+            const body = await resp.json();
+
+            if (!resp.ok) {
+                const detail = body.detail || resp.statusText;
+                _ttsLog('HTTP ' + resp.status + ' (' + elapsed + 's): ' + detail);
+                throw new Error(detail);
+            }
+
+            if (gen !== ttsTestGeneration) return;
+
+            if (!body.audio) {
+                _ttsLog('错误: 服务器返回空音频');
+                throw new Error('服务器返回空音频');
+            }
+
+            _ttsLog('合成成功 (' + elapsed + 's), 大小: ' + (body.size / 1024).toFixed(1) + ' KB, 格式: ' + body.content_type);
+            if (statusEl) statusEl.textContent = `合成完成 (${(body.size / 1024).toFixed(1)} KB)，正在播放...`;
+
+            _stopTtsTestAudio();
+
+            if (body.content_type === 'audio/pcm') {
+                const pcmBytes = Uint8Array.from(atob(body.audio), c => c.charCodeAt(0));
+                const wavBlob = _pcmToWavBlob(pcmBytes, 16000, 1, 16);
+                ttsTestAudio = new Audio(URL.createObjectURL(wavBlob));
+            } else {
+                ttsTestAudio = new Audio('data:audio/mpeg;base64,' + body.audio);
+            }
+
+            if (playBtn) playBtn.style.display = 'none';
+            if (stopBtn) stopBtn.style.display = '';
+
+            ttsTestAudio.onended = () => {
+                _ttsLog('播放完成');
+                if (statusEl) statusEl.textContent = '播放完成';
+                if (playBtn) { playBtn.style.display = ''; playBtn.disabled = false; }
+                if (stopBtn) stopBtn.style.display = 'none';
+            };
+            ttsTestAudio.onerror = (e) => {
+                _ttsLog('播放失败: ' + (e.message || 'Audio element error'));
+                if (statusEl) statusEl.textContent = '播放失败';
+                if (playBtn) { playBtn.style.display = ''; playBtn.disabled = false; }
+                if (stopBtn) stopBtn.style.display = 'none';
+            };
+            ttsTestAudio.play();
+            return;
+
+        } catch (err) {
+            lastErr = err;
+            if (attempt <= MAX_RETRIES) {
+                _ttsLog('失败: ' + err.message + ', 准备重试...');
+                if (statusEl) statusEl.textContent = `合成失败，准备重试 (${attempt}/${MAX_RETRIES})...`;
+            }
+        }
+    }
+
+    // All retries exhausted
+    if (gen === ttsTestGeneration) {
+        _ttsLog('全部重试失败: ' + (lastErr?.message || '未知错误'));
+        _ttsReportDiag(provider, lastErr?.message || '未知错误');
+        if (statusEl) statusEl.textContent = '合成失败: ' + (lastErr?.message || '未知错误');
+        showToast('TTS 测试失败: ' + (lastErr?.message || '未知错误'), 'error');
+        if (playBtn) playBtn.disabled = false;
+    }
+}
+
+function _pcmToWavBlob(pcmData, sampleRate, channels, bitsPerSample) {
+    const byteRate = sampleRate * channels * (bitsPerSample / 8);
+    const blockAlign = channels * (bitsPerSample / 8);
+    const dataSize = pcmData.length;
+    const buffer = new ArrayBuffer(44 + dataSize);
+    const view = new DataView(buffer);
+
+    // RIFF header
+    _writeString(view, 0, 'RIFF');
+    view.setUint32(4, 36 + dataSize, true);
+    _writeString(view, 8, 'WAVE');
+    // fmt chunk
+    _writeString(view, 12, 'fmt ');
+    view.setUint32(16, 16, true);
+    view.setUint16(20, 1, true);
+    view.setUint16(22, channels, true);
+    view.setUint32(24, sampleRate, true);
+    view.setUint32(28, byteRate, true);
+    view.setUint16(32, blockAlign, true);
+    view.setUint16(34, bitsPerSample, true);
+    // data chunk
+    _writeString(view, 36, 'data');
+    view.setUint32(40, dataSize, true);
+    new Uint8Array(buffer, 44).set(pcmData);
+
+    return new Blob([buffer], { type: 'audio/wav' });
+}
+
+function _writeString(view, offset, str) {
+    for (let i = 0; i < str.length; i++) {
+        view.setUint8(offset + i, str.charCodeAt(i));
+    }
+}
+
+function switchProviderTab(provider) {
+    // Update tab active state
+    document.querySelectorAll('.provider-tab').forEach((tab) => {
+        tab.classList.toggle('active', tab.dataset.provider === provider);
+    });
+
+    // Show/hide provider sections — HTML ids: provider-openai, provider-claude, provider-gemini
+    const providers = ['openai', 'claude', 'gemini'];
+    providers.forEach((p) => {
+        const section = document.getElementById(`provider-${p}`);
+        if (section) {
+            section.classList.toggle('active', p === provider);
+        }
+    });
+}
+
+// ============================================================
+// Chat Test Dialog
+// ============================================================
+let chatTestMessages = [];
+let chatTestBusy = false;
+
+function openChatTest() {
+    const overlay = document.getElementById('chat-test-overlay');
+    if (!overlay) return;
+    overlay.classList.remove('hidden');
+
+    // Sync provider from config page
+    const activeProvider = document.querySelector('.provider-tab.active')?.dataset?.provider || 'openai';
+    const providerSelect = document.getElementById('chat-test-provider');
+    if (providerSelect) providerSelect.value = activeProvider;
+
+    // Load models for the selected provider
+    refreshChatTestModels();
+}
+
+function closeChatTest() {
+    const overlay = document.getElementById('chat-test-overlay');
+    if (overlay) overlay.classList.add('hidden');
+    chatTestMessages = [];
+    chatTestBusy = false;
+    const container = document.getElementById('chat-test-messages');
+    if (container) container.innerHTML = '<div class="chat-test-empty">选择模型后开始对话</div>';
+}
+
+function _getChatTestConfig() {
+    const provider = _val('chat-test-provider') || 'openai';
+    return {
+        provider,
+        base_url: _val(`${provider}-base-url`) || '',
+        api_key: _val(`${provider}-api-key`) || '',
+        model: _val('chat-test-model') || '',
+        temperature: parseFloat(_val('llm-temperature')) || 0.7,
+        max_tokens: parseInt(_val('llm-max-tokens')) || 1024,
+    };
+}
+
+async function refreshChatTestModels() {
+    const cfg = _getChatTestConfig();
+    const select = document.getElementById('chat-test-model');
+    if (!select) return;
+
+    if (!cfg.api_key) {
+        select.innerHTML = '<option value="">请先在配置中填入 API Key</option>';
+        return;
+    }
+
+    select.innerHTML = '<option value="">加载中...</option>';
+    try {
+        const models = await API.get(`/api/models?provider=${cfg.provider}`);
+        if (Array.isArray(models) && models.length > 0) {
+            select.innerHTML = models
+                .map((m) => `<option value="${escapeHtml(m.id)}">${escapeHtml(m.name)}</option>`)
+                .join('');
+            // Try to select the model configured on the config page
+            const configModel = _val(`${cfg.provider}-model`);
+            if (configModel && models.some((m) => m.id === configModel)) {
+                select.value = configModel;
+            }
+        } else {
+            select.innerHTML = '<option value="">无可用模型</option>';
+        }
+    } catch (err) {
+        select.innerHTML = '<option value="">获取失败</option>';
+        showToast('获取模型列表失败: ' + err.message, 'error');
+    }
+}
+
+function appendChatTestBubble(role, text) {
+    const container = document.getElementById('chat-test-messages');
+    if (!container) return;
+    // Remove empty placeholder
+    const empty = container.querySelector('.chat-test-empty');
+    if (empty) empty.remove();
+
+    const bubble = document.createElement('div');
+    bubble.className = `chat-test-bubble ${role}`;
+    bubble.textContent = text;
+    container.appendChild(bubble);
+    container.scrollTop = container.scrollHeight;
+    return bubble;
+}
+
+async function sendChatTestMessage() {
+    if (chatTestBusy) return;
+
+    const input = document.getElementById('chat-test-input');
+    if (!input) return;
+    const text = input.value.trim();
+    if (!text) return;
+
+    const cfg = _getChatTestConfig();
+    if (!cfg.api_key) {
+        showToast('请先在配置页填入 API Key', 'error');
+        return;
+    }
+    if (!cfg.model) {
+        showToast('请选择模型', 'error');
+        return;
+    }
+
+    // Clear input & show user bubble
+    input.value = '';
+    input.style.height = 'auto';
+    appendChatTestBubble('user', text);
+
+    // Add to message history
+    chatTestMessages.push({ role: 'user', content: text });
+
+    // Show thinking indicator
+    const thinking = appendChatTestBubble('thinking', '思考中...');
+    chatTestBusy = true;
+    const sendBtn = document.getElementById('chat-test-send');
+    if (sendBtn) sendBtn.disabled = true;
+
+    try {
+        const result = await API.post('/api/chat', {
+            provider: cfg.provider,
+            base_url: cfg.base_url,
+            api_key: cfg.api_key,
+            model: cfg.model,
+            temperature: cfg.temperature,
+            max_tokens: cfg.max_tokens,
+            messages: chatTestMessages,
+        });
+
+        // Remove thinking bubble
+        if (thinking) thinking.remove();
+
+        const content = result.content || '(空回复)';
+        chatTestMessages.push({ role: 'assistant', content });
+        appendChatTestBubble('assistant', content);
+    } catch (err) {
+        if (thinking) thinking.remove();
+        appendChatTestBubble('error', '错误: ' + err.message);
+    } finally {
+        chatTestBusy = false;
+        if (sendBtn) sendBtn.disabled = false;
+        input.focus();
+    }
+}
+
+// ============================================================
+// Shared Audio Pipeline (used by both ASR Test and Voice Chat)
+// ============================================================
+
+// Shared mic constraints — single source of truth for getUserMedia
+function _getMicConstraints(deviceId) {
+    const c = { channelCount: 1, echoCancellation: true, noiseSuppression: true };
+    if (deviceId && deviceId !== 'default') c.deviceId = { exact: deviceId };
+    return c;
+}
+
+// Shared audio processing pipeline: native-SR capture → resample → gain → AGC → Int16 PCM
+// Both ASR test and voicechat call this — same code path, same parameters.
+//
+// options:
+//   stream       — MediaStream from getUserMedia
+//   targetSR     — target sample rate (default 16000)
+//   onPcmData(Int16Array) — callback per processed frame
+//   agcEnabled() — function returning bool (default: check #asr-agc-toggle, fallback true)
+//   log(msg)     — log function (default: no-op)
+//
+// returns: { audioContext, source, gainNode, analyser, processor, nativeSR, targetSR, getAgcGain }
+function _createAudioPipeline(options) {
+    const stream = options.stream;
+    const targetSR = options.targetSR || 16000;
+    const onPcmData = options.onPcmData;
+    const log = options.log || (() => {});
+    const agcEnabledFn = options.agcEnabled || (() => {
+        const toggle = document.getElementById('asr-agc-toggle');
+        return toggle ? toggle.checked : true;
+    });
+
+    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    const nativeSR = audioContext.sampleRate;
+    log('AudioContext: ' + nativeSR + ' Hz → ' + targetSR + ' Hz');
+
+    const source = audioContext.createMediaStreamSource(stream);
+
+    // Gain — reads from the shared asr-mic-gain control (same slider controls both ASR test & voicechat)
+    const gainNode = audioContext.createGain();
+    const gainSlider = document.getElementById('asr-mic-gain');
+    const savedGain = localStorage.getItem('asr-mic-gain');
+    gainNode.gain.value = gainSlider ? parseInt(gainSlider.value) / 100 : (savedGain ? parseInt(savedGain) / 100 : 1.0);
+
+    // Analyser for waveform visualization
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = 2048;
+    analyser.smoothingTimeConstant = 0.5;
+
+    // ScriptProcessor
+    const bufferSize = 4096;
+    const processor = audioContext.createScriptProcessor(bufferSize, 1, 1);
+
+    // Chain: source → gainNode → analyser → processor → destination
+    source.connect(gainNode);
+    gainNode.connect(analyser);
+    analyser.connect(processor);
+    processor.connect(audioContext.destination);
+
+    // Resample state
+    let resampleOffset = 0;
+    // AGC state — same parameters everywhere
+    let agcGain = 1.0;
+    const AGC_TARGET = 0.5;
+    const AGC_ATTACK = 0.1;
+    const AGC_RELEASE = 0.05;
+    const AGC_MAX_GAIN = 30;
+
+    processor.onaudioprocess = (e) => {
+        const inputData = e.inputBuffer.getChannelData(0);
+
+        // Resample from nativeSR to targetSR using linear interpolation
+        let pcmFloat;
+        if (nativeSR === targetSR) {
+            pcmFloat = new Float32Array(inputData);
+        } else {
+            const outSamples = [];
+            let srcPos = resampleOffset;
+            const step = nativeSR / targetSR;
+            while (srcPos < inputData.length) {
+                const idx = Math.floor(srcPos);
+                const frac = srcPos - idx;
+                const s0 = inputData[idx];
+                const s1 = idx + 1 < inputData.length ? inputData[idx + 1] : s0;
+                outSamples.push(s0 + (s1 - s0) * frac);
+                srcPos += step;
+            }
+            resampleOffset = srcPos - inputData.length;
+            pcmFloat = new Float32Array(outSamples);
+        }
+
+        // Compute pre-AGC RMS on the resampled (but un-amplified) signal.
+        // This is the "true" energy of the audio, unaffected by AGC.
+        // VoiceChat sends this to the backend so VAD can use it instead of
+        // computing RMS on the AGC-amplified PCM (which inflates silence).
+        let preAgcRms = 0;
+        for (let i = 0; i < pcmFloat.length; i++) {
+            preAgcRms += pcmFloat[i] * pcmFloat[i];
+        }
+        preAgcRms = Math.sqrt(preAgcRms / (pcmFloat.length || 1)) * 0x7FFF;
+
+        // AGC
+        if (agcEnabledFn()) {
+            let peak = 0;
+            for (let i = 0; i < pcmFloat.length; i++) {
+                const abs = Math.abs(pcmFloat[i]);
+                if (abs > peak) peak = abs;
+            }
+            if (peak * agcGain > AGC_TARGET) {
+                agcGain = Math.max(1.0, agcGain * (1 - AGC_RELEASE));
+            } else if (peak > 0.0001 && peak * agcGain < AGC_TARGET) {
+                const desiredGain = AGC_TARGET / peak;
+                agcGain += (Math.min(desiredGain, AGC_MAX_GAIN) - agcGain) * AGC_ATTACK;
+            }
+        } else {
+            agcGain = 1.0;
+        }
+
+        // Apply AGC and convert Float32 [-1, 1] → Int16 S16LE
+        const pcm16 = new Int16Array(pcmFloat.length);
+        for (let i = 0; i < pcmFloat.length; i++) {
+            const s = Math.max(-1, Math.min(1, pcmFloat[i] * agcGain));
+            pcm16[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
+        }
+
+        onPcmData(pcm16, preAgcRms);
+    };
+
+    log('增益: ' + (gainNode.gain.value * 100).toFixed(0) + '%, AGC 最大 ' + AGC_MAX_GAIN + 'x');
+
+    return { audioContext, source, gainNode, analyser, processor, nativeSR, targetSR, getAgcGain: () => agcGain };
+}
+
+// ============================================================
+// ASR Test Dialog
+// ============================================================
+let asrTestWs = null;
+let asrTestMediaStream = null;
+let asrTestAudioContext = null;
+let asrTestRecording = false;
+let asrTestPcmChunks = [];
+let asrTestPlaybackCtx = null;
+let asrTestAnimId = null;
+let asrTestTimerId = null;
+let asrTestStartTime = 0;
+let asrTestAnalyser = null;
+let asrTestWaveHistory = [];
+let asrTestMuted = false;
+let asrTestUserGainNode = null;
+let asrTestTargetSR = 16000; // target sample rate for current recording
+
+function openAsrTest() {
+    const overlay = document.getElementById('asr-test-overlay');
+    if (!overlay) return;
+    overlay.classList.remove('hidden');
+    _setAsrTestText('');
+    _setAsrTestStatus('idle');
+    _asrLog('clear');
+    _asrStatsShow(false);
+    _asrPlaybackShow(false);
+    _stopWaveform();
+    _stopRecordingTimer();
+    asrTestWaveHistory = [];
+    const timerEl = document.getElementById('asr-test-timer');
+    if (timerEl) timerEl.textContent = '';
+    // Restore gain slider
+    const gainSlider = document.getElementById('asr-mic-gain');
+    const gainVal = document.getElementById('asr-mic-gain-val');
+    const savedGain = localStorage.getItem('asr-mic-gain') || '100';
+    if (gainSlider) gainSlider.value = savedGain;
+    if (gainVal) gainVal.textContent = savedGain + '%';
+    // Restore mute state
+    asrTestMuted = false;
+    const muteBtn = document.getElementById('asr-mute-btn');
+    if (muteBtn) { muteBtn.classList.remove('muted'); }
+    // Restore resource_id from config
+    _loadAsrProvider();
+    // Enumerate microphones
+    _enumMicrophones();
+}
+
+// Engine options per ASR provider
+const ASR_ENGINE_OPTIONS = {
+    volcengine: [
+        { value: 'volc.seedasr.sauc.duration', label: 'seedasr (推荐)' },
+        { value: 'volc.bigasr.sauc.duration', label: 'bigasr' },
+        { value: 'volc.asr.sauc.duration', label: '标准 asr' },
+    ],
+    tencent: [
+        { value: '16k_zh_large', label: '普方英大模型 (推荐)' },
+        { value: '16k_zh_en', label: '中英粤+方言大模型' },
+        { value: '16k_zh', label: '中文通用' },
+        { value: '16k_en', label: '英文通用' },
+        { value: '8k_zh_large', label: '电话大模型 (8k)' },
+        { value: '16k_multi_lang', label: '多语种大模型' },
+    ],
+    xunfei: [
+        { value: 'iat', label: '讯飞听写' },
+    ],
+    whisper: [
+        { value: 'whisper-1', label: 'Whisper' },
+    ],
+};
+
+function _updateEngineOptions(provider) {
+    const sel = document.getElementById('asr-test-resid');
+    if (!sel) return;
+    const options = ASR_ENGINE_OPTIONS[provider] || [];
+    sel.innerHTML = '';
+    for (const opt of options) {
+        const el = document.createElement('option');
+        el.value = opt.value;
+        el.textContent = opt.label;
+        sel.appendChild(el);
+    }
+}
+
+async function _loadAsrProvider() {
+    const provSel = document.getElementById('asr-test-provider');
+    const resSel = document.getElementById('asr-test-resid');
+    if (!provSel || !resSel) return;
+
+    try {
+        const cfgData = await API.get('/api/config');
+        const provider = cfgData?.asr?.provider || 'whisper';
+
+        // Select current provider
+        for (const opt of provSel.options) {
+            if (opt.value === provider) { opt.selected = true; break; }
+        }
+
+        // Populate engine list for this provider
+        _updateEngineOptions(provider);
+
+        // Select the configured engine value
+        let currentVal = '';
+        if (provider === 'volcengine') {
+            currentVal = cfgData?.asr?.volcengine?.resource_id || '';
+        } else if (provider === 'tencent') {
+            currentVal = cfgData?.asr?.tencent?.engine_model_type || '';
+        }
+        if (currentVal) {
+            for (const opt of resSel.options) {
+                if (opt.value === currentVal) { opt.selected = true; break; }
+            }
+        }
+    } catch (e) { /* ignore */ }
+}
+
+async function _enumMicrophones() {
+    const select = document.getElementById('asr-test-mic');
+    if (!select) return;
+    select.innerHTML = '<option value="">检测麦克风中...</option>';
+    try {
+        // Need a temporary getUserMedia to get device labels (browser requires permission first)
+        let tempStream = null;
+        try {
+            tempStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        } catch (e) {
+            // Permission denied - try enumerating anyway (labels may be empty)
+        }
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        let mics = devices.filter(d => d.kind === 'audioinput');
+        if (tempStream) tempStream.getTracks().forEach(t => t.stop());
+
+        // Filter out Windows aliases
+        mics = mics.filter(d => d.deviceId !== 'default' && d.deviceId !== 'communications');
+
+        select.innerHTML = '';
+        if (mics.length === 0) {
+            select.innerHTML = '<option value="">未找到麦克风</option>';
+            return;
+        }
+        const savedMic = localStorage.getItem('asr-mic-deviceId') || '';
+        let realMicIdx = -1;
+        let savedIdx = -1;
+        mics.forEach((d, i) => {
+            const opt = document.createElement('option');
+            opt.value = d.deviceId;
+            const label = d.label || ('麦克风 ' + (i + 1));
+            const isVirtual = /virtual|远程|remote|todesk/i.test(label);
+            opt.textContent = label + (isVirtual ? ' (虚拟)' : '');
+            if (d.deviceId === savedMic) savedIdx = i;
+            if (!isVirtual && realMicIdx === -1) realMicIdx = i;
+            select.appendChild(opt);
+        });
+        // Priority: saved > first real > first
+        select.selectedIndex = savedIdx >= 0 ? savedIdx : (realMicIdx >= 0 ? realMicIdx : 0);
+    } catch (err) {
+        select.innerHTML = '<option value="">枚举设备失败</option>';
+    }
+}
+
+function closeAsrTest() {
+    stopAsrRecording();
+    const overlay = document.getElementById('asr-test-overlay');
+    if (overlay) overlay.classList.add('hidden');
+}
+
+function _setAsrTestStatus(status) {
+    const startBtn = document.getElementById('asr-test-start');
+    const stopBtn = document.getElementById('asr-test-stop');
+    const statusEl = document.getElementById('asr-test-status');
+
+    if (status === 'idle') {
+        if (startBtn) { startBtn.disabled = false; startBtn.style.display = ''; }
+        if (stopBtn) stopBtn.style.display = 'none';
+        if (statusEl) { statusEl.textContent = '点击"开始录音"后对麦克风说话'; statusEl.classList.remove('recording'); }
+    } else if (status === 'connecting') {
+        if (startBtn) startBtn.disabled = true;
+        if (statusEl) statusEl.textContent = '正在连接...';
+    } else if (status === 'recording') {
+        if (startBtn) startBtn.style.display = 'none';
+        if (stopBtn) { stopBtn.style.display = ''; stopBtn.disabled = false; }
+        if (statusEl) { statusEl.textContent = '录音中...'; statusEl.classList.add('recording'); }
+    } else if (status === 'processing') {
+        if (stopBtn) stopBtn.disabled = true;
+        if (statusEl) { statusEl.textContent = '等待识别结果...'; statusEl.classList.remove('recording'); }
+    } else if (status === 'error') {
+        if (startBtn) { startBtn.disabled = false; startBtn.style.display = ''; }
+        if (stopBtn) stopBtn.style.display = 'none';
+        if (statusEl) statusEl.classList.remove('recording');
+    }
+}
+
+function _setAsrTestText(text) {
+    const el = document.getElementById('asr-test-result');
+    if (el) {
+        el.textContent = text || '';
+        // Auto-scroll the result area to show latest content
+        const area = el.closest('.asr-test-result-area');
+        if (area) area.scrollTop = area.scrollHeight;
+    }
+}
+
+// --- Stats display ---
+function _asrStatsShow(show) {
+    const el = document.getElementById('asr-test-stats');
+    if (el) el.style.display = show ? 'flex' : 'none';
+}
+function _asrStatsUpdate(data) {
+    const durEl = document.getElementById('asr-stat-duration');
+    const bytesEl = document.getElementById('asr-stat-bytes');
+    const pktsEl = document.getElementById('asr-stat-packets');
+    const bwEl = document.getElementById('asr-stat-bw');
+    const dur = data.audio_duration || 0;
+    const bytes = data.audio_bytes || 0;
+    if (durEl) durEl.textContent = dur + 's';
+    if (bytesEl) bytesEl.textContent = (bytes / 1024).toFixed(0) + ' KB';
+    if (pktsEl) pktsEl.textContent = (data.asr_packets_sent || 0) + ' 包';
+    if (bwEl) bwEl.textContent = dur > 0 ? ((bytes * 8 / dur / 1000).toFixed(0) + ' kbps') : '0 kbps';
+}
+
+// --- Log area ---
+function _asrLog(msg) {
+    const el = document.getElementById('asr-test-log');
+    if (!el) return;
+    if (msg === 'clear') {
+        el.textContent = '';
+        el.style.display = 'none';
+        return;
+    }
+    el.style.display = '';
+    const ts = new Date().toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    el.textContent += `[${ts}] ${msg}\n`;
+    el.scrollTop = el.scrollHeight;
+}
+
+// --- Playback ---
+function _asrPlaybackShow(show) {
+    const el = document.getElementById('asr-test-playback');
+    if (el) el.style.display = show ? 'flex' : 'none';
+}
+
+function _playPcmChunks(chunks, btn, label) {
+    if (!chunks.length) {
+        showToast('没有录音数据', 'error');
+        return;
+    }
+    let totalLen = 0;
+    for (const c of chunks) totalLen += c.length;
+    const merged = new Int16Array(totalLen);
+    let off = 0;
+    for (const c of chunks) { merged.set(c, off); off += c.length; }
+    const float32 = new Float32Array(merged.length);
+    for (let i = 0; i < merged.length; i++) float32[i] = merged[i] / 32768.0;
+    let maxAbs = 0;
+    for (let i = 0; i < float32.length; i++) {
+        const abs = Math.abs(float32[i]);
+        if (abs > maxAbs) maxAbs = abs;
+    }
+    if (maxAbs > 0.0001 && maxAbs < 0.5) {
+        const gain = 0.9 / maxAbs;
+        for (let i = 0; i < float32.length; i++) {
+            float32[i] = Math.max(-1, Math.min(1, float32[i] * gain));
+        }
+    }
+    try {
+        if (asrTestPlaybackCtx) { try { asrTestPlaybackCtx.close(); } catch(e){} }
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        asrTestPlaybackCtx = ctx;
+        const buf = ctx.createBuffer(1, float32.length, asrTestTargetSR);
+        buf.copyToChannel(float32, 0);
+        const src = ctx.createBufferSource();
+        src.buffer = buf;
+        src.connect(ctx.destination);
+        src.start();
+        const durSec = (float32.length / asrTestTargetSR).toFixed(1);
+        if (btn) { btn.textContent = '播放中...'; btn.disabled = true; }
+        src.onended = () => {
+            if (btn) { btn.textContent = label; btn.disabled = false; }
+        };
+    } catch (err) {
+        showToast('回放失败: ' + err.message, 'error');
+        if (btn) { btn.textContent = label; btn.disabled = false; }
+    }
+}
+
+function playAsrRecording() {
+    _playPcmChunks(asrTestPcmChunks, document.getElementById('asr-test-play'), '回放录音');
+}
+
+// --- Waveform visualization (scrolling timeline) ---
+function _drawWaveform() {
+    if (!asrTestAnalyser) return;
+    asrTestAnimId = requestAnimationFrame(_drawWaveform);
+
+    const canvas = document.getElementById('asr-test-canvas');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const W = canvas.width;
+    const H = canvas.height;
+
+    // Sample current RMS from time-domain data
+    const bufLen = asrTestAnalyser.frequencyBinCount;
+    const timeData = new Uint8Array(bufLen);
+    asrTestAnalyser.getByteTimeDomainData(timeData);
+    let sumSq = 0;
+    for (let i = 0; i < timeData.length; i++) {
+        const v = (timeData[i] - 128) / 128.0;
+        sumSq += v * v;
+    }
+    const rms = Math.sqrt(sumSq / timeData.length);
+
+    // Push to history (keep enough columns to fill canvas width)
+    const barW = 4;
+    const gap = 1;
+    const maxBars = Math.ceil(W / (barW + gap));
+    asrTestWaveHistory.push(rms);
+    if (asrTestWaveHistory.length > maxBars) {
+        asrTestWaveHistory.shift();
+    }
+
+    // Clear
+    ctx.fillStyle = '#0f172a';
+    ctx.fillRect(0, 0, W, H);
+
+    // Draw scrolling bars from right to left (newest on the right)
+    const len = asrTestWaveHistory.length;
+    for (let i = 0; i < len; i++) {
+        const val = asrTestWaveHistory[i];
+        // Map RMS 0..0.5 → 0..H (clamp)
+        const norm = Math.min(1.0, val / 0.35);
+        const barH = Math.max(2, norm * H);
+        const x = W - (len - i) * (barW + gap);
+        if (x < -barW) continue;
+
+        // Color: green when quiet, yellow mid, red loud
+        let r, g, b;
+        if (norm < 0.4) {
+            r = Math.floor(norm / 0.4 * 180);
+            g = 200;
+            b = 80;
+        } else if (norm < 0.75) {
+            const t = (norm - 0.4) / 0.35;
+            r = 180 + Math.floor(t * 75);
+            g = 200 - Math.floor(t * 80);
+            b = 80 - Math.floor(t * 40);
+        } else {
+            r = 255;
+            g = Math.floor((1 - (norm - 0.75) / 0.25) * 120);
+            b = 40;
+        }
+        ctx.fillStyle = `rgb(${r},${g},${b})`;
+        ctx.fillRect(x, (H - barH) / 2, barW, barH);
+    }
+
+    // Center line (subtle)
+    ctx.strokeStyle = 'rgba(100,116,139,0.3)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, H / 2);
+    ctx.lineTo(W, H / 2);
+    ctx.stroke();
+
+    // Update volume bar + dB
+    const dB = rms > 0 ? 20 * Math.log10(rms) : -100;
+    const pct = Math.min(100, Math.max(0, (dB + 60) / 60 * 100));
+
+    const volBar = document.getElementById('asr-test-vol-bar');
+    const volDb = document.getElementById('asr-test-vol-db');
+    if (volBar) volBar.style.width = pct + '%';
+    if (volDb) volDb.textContent = (dB > -100 ? dB.toFixed(0) : '--') + ' dB';
+}
+
+function _stopWaveform() {
+    if (asrTestAnimId) {
+        cancelAnimationFrame(asrTestAnimId);
+        asrTestAnimId = null;
+    }
+    const canvas = document.getElementById('asr-test-canvas');
+    if (canvas) {
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = '#0f172a';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.strokeStyle = '#334155';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(0, canvas.height / 2);
+        ctx.lineTo(canvas.width, canvas.height / 2);
+        ctx.stroke();
+    }
+    const volBar = document.getElementById('asr-test-vol-bar');
+    const volDb = document.getElementById('asr-test-vol-db');
+    if (volBar) volBar.style.width = '0%';
+    if (volDb) volDb.textContent = '-- dB';
+    asrTestAnalyser = null;
+}
+
+// --- Recording timer ---
+function _startRecordingTimer() {
+    asrTestStartTime = Date.now();
+    const timerEl = document.getElementById('asr-test-timer');
+    if (timerEl) timerEl.textContent = '00:00';
+    asrTestTimerId = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - asrTestStartTime) / 1000);
+        const mins = String(Math.floor(elapsed / 60)).padStart(2, '0');
+        const secs = String(elapsed % 60).padStart(2, '0');
+        if (timerEl) timerEl.textContent = mins + ':' + secs;
+    }, 500);
+}
+
+function _stopRecordingTimer() {
+    if (asrTestTimerId) {
+        clearInterval(asrTestTimerId);
+        asrTestTimerId = null;
+    }
+}
+
+async function startAsrRecording() {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        showToast('浏览器不支持麦克风访问，请使用 localhost 或 HTTPS 访问', 'error');
+        _setAsrTestStatus('error');
+        _setAsrTestText('麦克风 API 不可用。\n请用 localhost 或 HTTPS 访问。');
+        return;
+    }
+
+    // Reset state
+    asrTestPcmChunks = [];
+    _asrLog('clear');
+    _asrStatsShow(false);
+    _asrPlaybackShow(false);
+    _setAsrTestText('');
+
+    // Read controls
+    const micSelect = document.getElementById('asr-test-mic');
+    const selectedDeviceId = micSelect ? micSelect.value : '';
+    // Save mic selection
+    if (selectedDeviceId) localStorage.setItem('asr-mic-deviceId', selectedDeviceId);
+
+    // Read ASR test params
+    const providerSel = document.getElementById('asr-test-provider');
+    const resIdSel = document.getElementById('asr-test-resid');
+    const srSel = document.getElementById('asr-test-samplerate');
+    const testProvider = providerSel ? providerSel.value : '';
+    const testResId = resIdSel ? resIdSel.value : '';
+    const testSampleRate = srSel ? parseInt(srSel.value) : 16000;
+
+    try {
+        asrTestMediaStream = await navigator.mediaDevices.getUserMedia({ audio: _getMicConstraints(selectedDeviceId) });
+        const track = asrTestMediaStream.getAudioTracks()[0];
+        _asrLog('麦克风: ' + (track.label || '未知设备'));
+    } catch (err) {
+        showToast('无法访问麦克风: ' + err.message, 'error');
+        _setAsrTestStatus('error');
+        _setAsrTestText('麦克风权限被拒绝或不可用');
+        return;
+    }
+
+    _setAsrTestStatus('connecting');
+
+    // Open WebSocket
+    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${location.host}/api/ws/asr-test`;
+    const providerNames = { volcengine: '火山引擎', tencent: '腾讯云', xunfei: '讯飞', whisper: 'Whisper' };
+    _asrLog('引擎: ' + (providerNames[testProvider] || testProvider) + ' / ' + testResId + ', 采样率: ' + testSampleRate + ' Hz');
+
+    try {
+        asrTestWs = new WebSocket(wsUrl);
+    } catch (err) {
+        showToast('WebSocket 连接失败: ' + err.message, 'error');
+        _stopAsrMediaStream();
+        _setAsrTestStatus('error');
+        return;
+    }
+
+    // Send config right after WebSocket opens
+    asrTestWs.onopen = () => {
+        asrTestWs.send(JSON.stringify({
+            type: 'config',
+            provider: testProvider,
+            resource_id: testResId,
+            sample_rate: testSampleRate,
+        }));
+    };
+
+    asrTestWs.onmessage = (event) => {
+        try {
+            const data = JSON.parse(event.data);
+            if (data.type === 'ready') {
+                _asrLog('服务端就绪, ASR: ' + (data.provider || '?') + ', sr: ' + (data.sample_rate || '?'));
+                _asrStatsShow(true);
+                _setAsrTestStatus('recording');
+                _startAudioCapture(data.sample_rate || 16000);
+            } else if (data.type === 'stats') {
+                _asrStatsUpdate(data);
+                if (data.getting_final) {
+                    _asrLog('正在获取最终识别结果...');
+                }
+            } else if (data.type === 'interim') {
+                _setAsrTestText(data.text);
+            } else if (data.type === 'final') {
+                _setAsrTestText(data.text || '(未识别到内容)');
+                _setAsrTestStatus('idle');
+                _cleanupAsrTest(true); // keep PCM for playback
+            } else if (data.type === 'error') {
+                _setAsrTestText('错误: ' + (data.message || '未知错误'));
+                _asrLog('错误: ' + (data.message || '未知错误'));
+                _setAsrTestStatus('error');
+                _cleanupAsrTest(true);
+            }
+        } catch (e) { /* ignore parse errors */ }
+    };
+
+    asrTestWs.onerror = () => {
+        showToast('ASR WebSocket 连接错误', 'error');
+        _asrLog('WebSocket 连接错误');
+        _setAsrTestStatus('error');
+        _cleanupAsrTest(false);
+    };
+
+    asrTestWs.onclose = () => {
+        if (asrTestRecording) {
+            _asrLog('WebSocket 连接关闭');
+            _setAsrTestStatus('idle');
+            _cleanupAsrTest(true);
+        }
+    };
+}
+
+function _startAudioCapture(targetSR) {
+    if (!asrTestMediaStream) return;
+    targetSR = targetSR || 16000;
+    asrTestTargetSR = targetSR;
+
+    _setAsrTestStatus('recording');
+    asrTestRecording = true;
+    asrTestWaveHistory = [];
+    _startRecordingTimer();
+
+    let sendCount = 0;
+    let totalSamples = 0;
+
+    const pipeline = _createAudioPipeline({
+        stream: asrTestMediaStream,
+        targetSR,
+        log: _asrLog,
+        onPcmData: (pcm16) => {
+            if (!asrTestRecording || !asrTestWs || asrTestWs.readyState !== WebSocket.OPEN) return;
+            asrTestPcmChunks.push(new Int16Array(pcm16));
+            asrTestWs.send(pcm16.buffer);
+            sendCount++;
+            totalSamples += pcm16.length;
+        },
+    });
+
+    asrTestAudioContext = pipeline.audioContext;
+    asrTestUserGainNode = pipeline.gainNode;
+    asrTestAnalyser = pipeline.analyser;
+    asrTestAudioContext._processor = pipeline.processor;
+    asrTestAudioContext._source = pipeline.source;
+    asrTestAudioContext._agcGain = pipeline.getAgcGain;
+    asrTestAudioContext._targetSR = targetSR;
+    _drawWaveform();
+}
+
+async function stopAsrRecording() {
+    if (!asrTestRecording) return;
+    asrTestRecording = false;
+    _setAsrTestStatus('processing');
+    _stopRecordingTimer();
+    _stopWaveform();
+
+    const targetSR = (asrTestAudioContext && asrTestAudioContext._targetSR) || 16000;
+    const totalSamples = asrTestPcmChunks.reduce((sum, c) => sum + c.length, 0);
+    const durSec = (totalSamples / targetSR).toFixed(1);
+    const finalGain = asrTestAudioContext && asrTestAudioContext._agcGain ? asrTestAudioContext._agcGain().toFixed(1) : '?';
+    _asrLog('停止录音, 共 ' + durSec + 's (' + (totalSamples * 2 / 1024).toFixed(0) + ' KB), AGC: ' + finalGain + 'x');
+
+    if (asrTestWs && asrTestWs.readyState === WebSocket.OPEN) {
+        asrTestWs.send(JSON.stringify({ type: 'stop' }));
+    } else {
+        _setAsrTestStatus('idle');
+        _cleanupAsrTest(true);
+    }
+}
+
+function _stopAsrMediaStream() {
+    if (asrTestMediaStream) {
+        asrTestMediaStream.getTracks().forEach((t) => t.stop());
+        asrTestMediaStream = null;
+    }
+}
+
+function _cleanupAsrTest(keepPcm) {
+    asrTestRecording = false;
+    _stopRecordingTimer();
+    _stopWaveform();
+    if (asrTestAudioContext) {
+        try {
+            if (asrTestAudioContext._processor) asrTestAudioContext._processor.disconnect();
+            if (asrTestAudioContext._source) asrTestAudioContext._source.disconnect();
+            asrTestAudioContext.close();
+        } catch (e) { /* ignore */ }
+        asrTestAudioContext = null;
+    }
+    _stopAsrMediaStream();
+    if (asrTestWs) {
+        try { asrTestWs.close(); } catch (e) { /* ignore */ }
+        asrTestWs = null;
+    }
+    // Show playback button if we have recorded data
+    if (keepPcm && asrTestPcmChunks.length > 0) {
+        _asrPlaybackShow(true);
+        const totalSamples = asrTestPcmChunks.reduce((s, c) => s + c.length, 0);
+        const durEl = document.getElementById('asr-test-play-dur');
+        if (durEl) durEl.textContent = '(' + (totalSamples / asrTestTargetSR).toFixed(1) + '秒)';
+    }
+}
+
+async function _restartAsrSession() {
+    if (!asrTestRecording) return;
+    // Silently tear down current session (don't keep PCM, don't show playback)
+    asrTestRecording = false;
+    _stopRecordingTimer();
+    _stopWaveform();
+    if (asrTestAudioContext) {
+        try {
+            if (asrTestAudioContext._processor) asrTestAudioContext._processor.disconnect();
+            if (asrTestAudioContext._source) asrTestAudioContext._source.disconnect();
+            asrTestAudioContext.close();
+        } catch (e) { /* ignore */ }
+        asrTestAudioContext = null;
+    }
+    _stopAsrMediaStream();
+    if (asrTestWs) {
+        try { asrTestWs.close(); } catch (e) { /* ignore */ }
+        asrTestWs = null;
+    }
+    // Immediately start a new session with current UI settings
+    _asrLog('--- 切换参数，重新连接 ---');
+    await startAsrRecording();
+}
+
+
+
+// ============================================================
+// Audio Diagnostic Tool
+// ============================================================
+let _diagState = { running: false, stream: null, audioCtx: null, mediaRec: null, spChunks: [], mrBlob: null };
+
+function openAudioDiag() {
+    const overlay = document.getElementById('audio-diag-overlay');
+    if (overlay) overlay.classList.remove('hidden');
+    _diagLog('clear');
+    _diagLog('=== 音频采集诊断工具 ===');
+    _diagLog('点击"开始诊断"自动测试各个音频 API');
+}
+
+function closeAudioDiag() {
+    stopAudioDiag();
+    const overlay = document.getElementById('audio-diag-overlay');
+    if (overlay) overlay.classList.add('hidden');
+}
+
+function _diagLog(msg) {
+    const el = document.getElementById('audio-diag-log');
+    if (!el) return;
+    if (msg === 'clear') { el.textContent = ''; return; }
+    const ts = new Date().toLocaleTimeString('zh-CN', { hour12: false });
+    el.textContent += '[' + ts + '] ' + msg + '\n';
+    el.scrollTop = el.scrollHeight;
+}
+
+function _diagShowBtn(id, show) {
+    const el = document.getElementById(id);
+    if (el) el.style.display = show ? '' : 'none';
+}
+
+async function runAudioDiag() {
+    if (_diagState.running) return;
+    _diagState.running = true;
+    _diagState.spChunks = [];
+    _diagState.mrBlob = null;
+    _diagShowBtn('audio-diag-run', false);
+    _diagShowBtn('audio-diag-stop', true);
+    _diagShowBtn('audio-diag-play-sp', false);
+    _diagShowBtn('audio-diag-play-mr', false);
+    _diagLog('clear');
+    _diagLog('=== 开始音频诊断 ===');
+    _diagLog('UserAgent: ' + navigator.userAgent);
+
+    // ---- Step 0: Enumerate devices ----
+    _diagLog('');
+    _diagLog('【步骤0】枚举音频设备...');
+    try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const audioInputs = devices.filter(d => d.kind === 'audioinput');
+        const audioOutputs = devices.filter(d => d.kind === 'audiooutput');
+        _diagLog('  音频输入设备 (' + audioInputs.length + '):');
+        audioInputs.forEach((d, i) => {
+            _diagLog('    [' + i + '] ' + (d.label || '(无名称-需先授权)') + ' id=' + d.deviceId.substring(0, 12) + '...');
+        });
+        _diagLog('  音频输出设备 (' + audioOutputs.length + '):');
+        audioOutputs.forEach((d, i) => {
+            _diagLog('    [' + i + '] ' + (d.label || '(无名称)') + ' id=' + d.deviceId.substring(0, 12) + '...');
+        });
+        if (audioInputs.length === 0) {
+            _diagLog('  ✗ 未找到任何音频输入设备!');
+            _diagLog('  请检查系统是否有麦克风, 或远程桌面是否已启用音频重定向');
+        }
+    } catch (err) {
+        _diagLog('  枚举设备失败: ' + err.message);
+    }
+
+    // ---- Step 1: Play test tone (verify speaker works) ----
+    _diagLog('');
+    _diagLog('【步骤1】播放测试音 (验证音频输出)...');
+    try {
+        const toneCtx = new (window.AudioContext || window.webkitAudioContext)();
+        if (toneCtx.state === 'suspended') await toneCtx.resume();
+        const osc = toneCtx.createOscillator();
+        const gain = toneCtx.createGain();
+        osc.frequency.value = 440;
+        gain.gain.value = 0.3;
+        osc.connect(gain);
+        gain.connect(toneCtx.destination);
+        osc.start();
+        _diagLog('  正在播放 440Hz 测试音 1 秒... 你应该能听到"嘟"的一声');
+        await new Promise(r => setTimeout(r, 1000));
+        osc.stop();
+        toneCtx.close();
+        _diagLog('  测试音播放完毕');
+    } catch (err) {
+        _diagLog('  播放测试音失败: ' + err.message);
+    }
+
+    if (!_diagState.running) return;
+
+    // ---- Step 2: getUserMedia ----
+    _diagLog('');
+    _diagLog('【步骤2】获取麦克风 (getUserMedia)...');
+    _diagLog('  isSecureContext: ' + window.isSecureContext);
+    _diagLog('  protocol: ' + location.protocol);
+
+    let stream;
+    try {
+        // Try to use the non-virtual mic if available
+        const allDevices = await navigator.mediaDevices.enumerateDevices();
+        const mics = allDevices.filter(d => d.kind === 'audioinput');
+        let preferredId = '';
+        for (const m of mics) {
+            if (!/virtual|todesk|远程|remote/i.test(m.label) && m.deviceId !== 'default' && m.deviceId !== 'communications') {
+                preferredId = m.deviceId;
+                _diagLog('  优先使用真实麦克风: ' + m.label);
+                break;
+            }
+        }
+        const audioOpts = { channelCount: 1, echoCancellation: true, noiseSuppression: true };
+        if (preferredId) audioOpts.deviceId = { exact: preferredId };
+        stream = await navigator.mediaDevices.getUserMedia({ audio: audioOpts });
+        _diagState.stream = stream;
+        const track = stream.getAudioTracks()[0];
+        const settings = track.getSettings();
+        const caps = track.getCapabilities ? track.getCapabilities() : {};
+        _diagLog('  ✓ 成功! Track: ' + track.label);
+        _diagLog('  readyState: ' + track.readyState + ', enabled: ' + track.enabled + ', muted: ' + track.muted);
+        _diagLog('  Settings: sampleRate=' + (settings.sampleRate || '?') + ', channelCount=' + (settings.channelCount || '?'));
+        _diagLog('  deviceId: ' + (settings.deviceId || '?'));
+        if (caps.sampleRate) _diagLog('  Capabilities sampleRate: ' + caps.sampleRate.min + '-' + caps.sampleRate.max);
+    } catch (err) {
+        _diagLog('  ✗ 失败: ' + err.name + ': ' + err.message);
+        if (err.name === 'NotAllowedError') {
+            _diagLog('  用户拒绝了麦克风权限, 或浏览器策略阻止');
+        } else if (err.name === 'NotFoundError') {
+            _diagLog('  找不到麦克风设备');
+        } else if (err.name === 'NotReadableError') {
+            _diagLog('  麦克风设备被占用或无法读取');
+        }
+        _diagState.running = false;
+        _diagShowBtn('audio-diag-run', true);
+        _diagShowBtn('audio-diag-stop', false);
+        return;
+    }
+
+    // ---- Step 3: AudioContext + AnalyserNode ----
+    _diagLog('');
+    _diagLog('【步骤3】创建 AudioContext + AnalyserNode...');
+    let audioCtx;
+    try {
+        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        _diagState.audioCtx = audioCtx;
+        _diagLog('  AudioContext 状态: ' + audioCtx.state + ', 采样率: ' + audioCtx.sampleRate + ' Hz');
+        _diagLog('  baseLatency: ' + (audioCtx.baseLatency || '?') + 's, outputLatency: ' + (audioCtx.outputLatency || '?') + 's');
+        if (audioCtx.state === 'suspended') {
+            _diagLog('  AudioContext 被挂起，尝试 resume...');
+            await audioCtx.resume();
+            _diagLog('  resume 后状态: ' + audioCtx.state);
+        }
+    } catch (err) {
+        _diagLog('  ✗ 创建 AudioContext 失败: ' + err.message);
+        _diagState.running = false;
+        return;
+    }
+
+    const source = audioCtx.createMediaStreamSource(stream);
+    const analyser = audioCtx.createAnalyser();
+    analyser.fftSize = 2048;
+    source.connect(analyser);
+
+    // Read analyser for 2 seconds, print raw data samples
+    _diagLog('  对着麦克风说话! 读取 AnalyserNode 2秒...');
+    let analyserMaxRms = 0;
+    let analyserSamples = 0;
+    const analyserStart = Date.now();
+    while (Date.now() - analyserStart < 2000 && _diagState.running) {
+        const buf = new Uint8Array(analyser.frequencyBinCount);
+        analyser.getByteTimeDomainData(buf);
+        let sumSq = 0;
+        let minVal = 255, maxVal = 0;
+        for (let i = 0; i < buf.length; i++) {
+            if (buf[i] < minVal) minVal = buf[i];
+            if (buf[i] > maxVal) maxVal = buf[i];
+            const v = (buf[i] - 128) / 128.0;
+            sumSq += v * v;
+        }
+        const rms = Math.sqrt(sumSq / buf.length);
+        if (rms > analyserMaxRms) analyserMaxRms = rms;
+        analyserSamples++;
+        // Print every ~500ms
+        if (analyserSamples % 10 === 1) {
+            _diagLog('    采样#' + analyserSamples + ': min=' + minVal + ' max=' + maxVal + ' RMS=' + rms.toFixed(6) + ' 前8字节=[' + Array.from(buf.slice(0, 8)).join(',') + ']');
+        }
+        await new Promise(r => setTimeout(r, 50));
+    }
+    // Check track state after reading
+    const trackAfter = stream.getAudioTracks()[0];
+    _diagLog('  Track 采集后状态: readyState=' + trackAfter.readyState + ', enabled=' + trackAfter.enabled + ', muted=' + trackAfter.muted);
+    _diagLog('  AnalyserNode 采样 ' + analyserSamples + ' 次, 最大 RMS: ' + analyserMaxRms.toFixed(6));
+    if (analyserMaxRms > 0.01) {
+        _diagLog('  ✓ AnalyserNode 可以读到音频数据');
+    } else if (analyserMaxRms > 0.001) {
+        _diagLog('  △ AnalyserNode 读到非常微弱的信号 (可能是底噪)');
+    } else {
+        _diagLog('  ✗ AnalyserNode 读到的数据接近静音!');
+    }
+
+    if (!_diagState.running) return;
+
+    // ---- Step 4: ScriptProcessorNode ----
+    _diagLog('');
+    _diagLog('【步骤4】ScriptProcessorNode 采集测试 (3秒)...');
+    _diagLog('  连接方式: source → analyser → processor → destination');
+    _diagLog('  对着麦克风说话!');
+
+    const processor = audioCtx.createScriptProcessor(4096, 1, 1);
+    let spFrames = 0;
+    let spNonZeroFrames = 0;
+    let spMaxAbs = 0;
+    let spTotalSamples = 0;
+    const spChunks = [];
+
+    processor.onaudioprocess = (e) => {
+        const data = e.inputBuffer.getChannelData(0);
+        spFrames++;
+        spTotalSamples += data.length;
+        let maxInFrame = 0;
+        let hasNonZero = false;
+        for (let i = 0; i < data.length; i++) {
+            const abs = Math.abs(data[i]);
+            if (abs > maxInFrame) maxInFrame = abs;
+            if (abs > 0.0001) hasNonZero = true;
+        }
+        if (hasNonZero) spNonZeroFrames++;
+        if (maxInFrame > spMaxAbs) spMaxAbs = maxInFrame;
+        // Print first few frames
+        if (spFrames <= 3 || spFrames % 10 === 0) {
+            _diagLog('    帧#' + spFrames + ': len=' + data.length + ' max=' + maxInFrame.toFixed(6) + ' 前4值=[' + data[0].toFixed(6) + ',' + data[1].toFixed(6) + ',' + data[2].toFixed(6) + ',' + data[3].toFixed(6) + ']');
+        }
+        // Save raw float for playback (at native sample rate)
+        const pcm16 = new Int16Array(data.length);
+        for (let i = 0; i < data.length; i++) {
+            const s = Math.max(-1, Math.min(1, data[i]));
+            pcm16[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
+        }
+        spChunks.push(pcm16);
+    };
+
+    analyser.connect(processor);
+    processor.connect(audioCtx.destination);
+
+    // Wait 3 seconds
+    const spStart = Date.now();
+    while (Date.now() - spStart < 3000 && _diagState.running) {
+        await new Promise(r => setTimeout(r, 200));
+    }
+
+    processor.disconnect();
+    _diagLog('  ScriptProcessor 总帧数: ' + spFrames + ', 非零帧: ' + spNonZeroFrames + ', 总样本: ' + spTotalSamples);
+    _diagLog('  最大绝对值: ' + spMaxAbs.toFixed(6));
+    if (spMaxAbs > 0.01) {
+        _diagLog('  ✓ ScriptProcessorNode 采集到音频!');
+    } else if (spFrames === 0) {
+        _diagLog('  ✗ onaudioprocess 从未触发!');
+    } else {
+        _diagLog('  ✗ 采集到的数据全部为零/近零!');
+    }
+    _diagState.spChunks = spChunks;
+    _diagState.spSampleRate = audioCtx.sampleRate;
+    if (spChunks.length > 0) _diagShowBtn('audio-diag-play-sp', true);
+
+    if (!_diagState.running) return;
+
+    // ---- Step 5: MediaRecorder (baseline) ----
+    _diagLog('');
+    _diagLog('【步骤5】MediaRecorder 采集测试 (3秒)...');
+    _diagLog('  对着麦克风说话!');
+    let mrBlob = null;
+    try {
+        const mrChunks = [];
+        const mimeTypes = ['audio/webm;codecs=opus', 'audio/webm', 'audio/ogg;codecs=opus', 'audio/mp4', ''];
+        let selectedMime = '';
+        for (const mt of mimeTypes) {
+            if (!mt || MediaRecorder.isTypeSupported(mt)) {
+                selectedMime = mt;
+                break;
+            }
+        }
+        _diagLog('  MIME: ' + (selectedMime || '(默认)'));
+        const mrOptions = selectedMime ? { mimeType: selectedMime } : {};
+        const mr = new MediaRecorder(stream, mrOptions);
+        _diagState.mediaRec = mr;
+        mr.ondataavailable = (e) => {
+            if (e.data && e.data.size > 0) {
+                mrChunks.push(e.data);
+                _diagLog('    chunk: ' + e.data.size + ' bytes');
+            }
+        };
+        const mrDone = new Promise(resolve => { mr.onstop = () => resolve(); });
+        mr.start(500);
+        _diagLog('  录音中...');
+        await new Promise(r => setTimeout(r, 3000));
+        if (mr.state === 'recording') mr.stop();
+        await mrDone;
+        mrBlob = new Blob(mrChunks, { type: mrChunks[0]?.type || selectedMime });
+        _diagState.mrBlob = mrBlob;
+        _diagLog('  MediaRecorder: ' + mrChunks.length + ' chunks, 总大小: ' + mrBlob.size + ' bytes');
+        if (mrBlob.size > 1000) {
+            _diagLog('  ✓ MediaRecorder 录制成功!');
+            _diagShowBtn('audio-diag-play-mr', true);
+        } else {
+            _diagLog('  ✗ 录制数据过小');
+        }
+    } catch (err) {
+        _diagLog('  MediaRecorder 失败: ' + err.message);
+    }
+
+    // ---- Summary ----
+    _diagLog('');
+    _diagLog('=== 诊断总结 ===');
+    _diagLog('  getUserMedia: ✓');
+    _diagLog('  AnalyserNode 有信号: ' + (analyserMaxRms > 0.01 ? '✓' : '✗') + ' (RMS=' + analyserMaxRms.toFixed(6) + ')');
+    _diagLog('  ScriptProcessor 有数据: ' + (spMaxAbs > 0.01 ? '✓' : '✗') + ' (max=' + spMaxAbs.toFixed(6) + ', frames=' + spFrames + ')');
+    _diagLog('  MediaRecorder 有数据: ' + (mrBlob && mrBlob.size > 1000 ? '✓ (' + mrBlob.size + 'B)' : '✗'));
+    _diagLog('');
+
+    if (analyserMaxRms > 0.01 && spMaxAbs < 0.001) {
+        _diagLog('⚠ AnalyserNode 有信号但 ScriptProcessor 全零');
+        _diagLog('  → Chrome 的 ScriptProcessorNode bug');
+        _diagLog('  → 建议改用 MediaRecorder 方案采集');
+    } else if (analyserMaxRms < 0.001 && mrBlob && mrBlob.size > 1000) {
+        _diagLog('⚠ Web Audio API 无信号但 MediaRecorder 正常');
+        _diagLog('  → Web Audio API 可能有问题, 建议用 MediaRecorder 方案');
+    } else if (analyserMaxRms < 0.001 && (!mrBlob || mrBlob.size < 1000)) {
+        _diagLog('⚠ 所有方式均无有效音频!');
+        _diagLog('  → 麦克风可能被系统静音、未正确连接、或远程桌面未启用音频重定向');
+        _diagLog('  → 请检查: 系统声音设置 > 输入设备 > 确认麦克风音量非零');
+        _diagLog('  → 如果是远程桌面(RDP/VNC), 请确认音频重定向已启用');
+    }
+
+    _diagLog('');
+    _diagLog('诊断完成。点击回放按钮试听。');
+
+    source.disconnect();
+    _diagState.running = false;
+    _diagShowBtn('audio-diag-run', true);
+    _diagShowBtn('audio-diag-stop', false);
+
+    // Auto-upload diagnostic log to server
+    try {
+        const logEl = document.getElementById('audio-diag-log');
+        const logText = logEl ? logEl.textContent : '';
+        await fetch('/api/audio-diag', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ log: logText, timestamp: new Date().toISOString() })
+        });
+        _diagLog('(诊断日志已自动上传到服务端)');
+    } catch (e) {
+        // silently ignore
+    }
+}
+
+function stopAudioDiag() {
+    _diagState.running = false;
+    if (_diagState.mediaRec && _diagState.mediaRec.state === 'recording') {
+        try { _diagState.mediaRec.stop(); } catch (e) {}
+    }
+    if (_diagState.audioCtx) {
+        try { _diagState.audioCtx.close(); } catch (e) {}
+        _diagState.audioCtx = null;
+    }
+    if (_diagState.stream) {
+        _diagState.stream.getTracks().forEach(t => t.stop());
+        _diagState.stream = null;
+    }
+    _diagShowBtn('audio-diag-run', true);
+    _diagShowBtn('audio-diag-stop', false);
+}
+
+function playDiagSP() {
+    const chunks = _diagState.spChunks;
+    if (!chunks.length) { showToast('无 ScriptProcessor 数据', 'error'); return; }
+    let totalLen = 0;
+    for (const c of chunks) totalLen += c.length;
+    const merged = new Int16Array(totalLen);
+    let off = 0;
+    for (const c of chunks) { merged.set(c, off); off += c.length; }
+    const float32 = new Float32Array(merged.length);
+    for (let i = 0; i < merged.length; i++) float32[i] = merged[i] / 32768.0;
+    let maxAbs = 0;
+    for (let i = 0; i < float32.length; i++) { if (Math.abs(float32[i]) > maxAbs) maxAbs = Math.abs(float32[i]); }
+    const sampleRate = _diagState.spSampleRate || 48000;
+    _diagLog('回放 ScriptProcessor: ' + totalLen + ' 样本, SR=' + sampleRate + ', max=' + maxAbs.toFixed(6));
+    const ctx = new (window.AudioContext || window.webkitAudioContext)();
+    const buf = ctx.createBuffer(1, float32.length, sampleRate);
+    buf.copyToChannel(float32, 0);
+    const src = ctx.createBufferSource();
+    src.buffer = buf;
+    src.connect(ctx.destination);
+    src.start();
+    src.onended = () => { _diagLog('ScriptProcessor 回放结束'); ctx.close(); };
+}
+
+function playDiagMR() {
+    if (!_diagState.mrBlob) { showToast('无 MediaRecorder 数据', 'error'); return; }
+    _diagLog('回放 MediaRecorder: ' + _diagState.mrBlob.size + ' bytes');
+    const url = URL.createObjectURL(_diagState.mrBlob);
+    const audio = new Audio(url);
+    audio.onended = () => { URL.revokeObjectURL(url); _diagLog('MediaRecorder 回放结束'); };
+    audio.onerror = (e) => { _diagLog('MediaRecorder 回放错误: ' + (e.message || '未知')); };
+    audio.play().catch(err => _diagLog('播放失败: ' + err.message));
+}
+
+
+// ============================================================
+// Bluetooth Page
+// ============================================================
+async function loadBluetooth() {
+    try {
+        const status = await API.get('/api/phone/status');
+        renderBluetoothStatus(status);
+    } catch (err) {
+        showToast('加载蓝牙状态失败: ' + err.message, 'error');
+    }
+}
+
+function renderBluetoothStatus(status) {
+    const connected = status.bluetooth_connected;
+    _setText('bt-connection-status', connected ? '已连接' : '未连接');
+
+    const indicator = document.getElementById('bt-connection-indicator');
+    if (indicator) {
+        indicator.className = 'status-dot ' + (connected ? 'status-connected' : 'status-disconnected');
+    }
+
+    _setText('bt-device-name', status.device_name || '-');
+    _setText('bt-device-address', status.device_address || '-');
+    _setText('bt-battery', status.battery_level != null ? `${status.battery_level}%` : '-');
+    _setText('bt-signal', status.signal_strength != null ? `${status.signal_strength}/5` : '-');
+    _setText('bt-operator', status.operator || '-');
+    _setText('bt-in-call', status.in_call ? '通话中' : '空闲');
+
+    // Show/hide connect/disconnect buttons
+    const connectBtn = document.getElementById('btn-bt-connect');
+    const disconnectBtn = document.getElementById('btn-bt-disconnect');
+    if (connectBtn) connectBtn.style.display = connected ? 'none' : '';
+    if (disconnectBtn) disconnectBtn.style.display = connected ? '' : 'none';
+}
+
+async function scanDevices() {
+    const container = document.getElementById('bt-devices-list');
+    const btn = document.getElementById('btn-bt-scan');
+
+    if (btn) {
+        btn.disabled = true;
+        btn.textContent = '扫描中...';
+    }
+    if (container) {
+        container.innerHTML = '<div class="text-muted">正在扫描附近蓝牙设备...</div>';
+    }
+
+    try {
+        const data = await API.get('/api/phone/devices');
+        const devices = data.devices || [];
+
+        if (!container) return;
+
+        if (devices.length === 0) {
+            container.innerHTML = '<div class="text-muted">未发现蓝牙设备</div>';
+        } else {
+            container.innerHTML = devices
+                .map(
+                    (d) => `<div class="device-item">
+                    <div class="device-info">
+                        <span class="device-name">${escapeHtml(d.name || '未知设备')}</span>
+                        <span class="device-address">${escapeHtml(d.address || '')}</span>
+                    </div>
+                    <div class="device-actions">
+                        ${d.paired
+                            ? `<button class="btn btn-sm btn-primary" onclick="connectDevice('${escapeHtml(d.address)}')">连接</button>`
+                            : `<button class="btn btn-sm btn-outline" onclick="pairDevice('${escapeHtml(d.address)}')">配对</button>`
+                        }
+                    </div>
+                </div>`
+                )
+                .join('');
+        }
+    } catch (err) {
+        showToast('扫描设备失败: ' + err.message, 'error');
+        if (container) container.innerHTML = '<div class="text-muted">扫描失败</div>';
+    } finally {
+        if (btn) {
+            btn.disabled = false;
+            btn.textContent = '扫描设备';
+        }
+    }
+}
+
+async function pairDevice(address) {
+    try {
+        await API.post(`/api/phone/pair?address=${encodeURIComponent(address)}`);
+        showToast('配对成功', 'success');
+        loadBluetooth();
+        scanDevices();
+    } catch (err) {
+        showToast('配对失败: ' + err.message, 'error');
+    }
+}
+
+async function connectDevice(address) {
+    try {
+        await API.post(`/api/phone/connect?address=${encodeURIComponent(address)}`);
+        showToast('连接成功', 'success');
+        loadBluetooth();
+    } catch (err) {
+        showToast('连接失败: ' + err.message, 'error');
+    }
+}
+
+async function disconnectDevice() {
+    try {
+        await API.post('/api/phone/disconnect');
+        showToast('已断开连接', 'success');
+        loadBluetooth();
+    } catch (err) {
+        showToast('断开失败: ' + err.message, 'error');
+    }
+}
+
+// ============================================================
+// Status Bar Polling
+// ============================================================
+async function updateStatusBar() {
+    try {
+        const status = await API.get('/api/phone/status');
+
+        // Bottom status bar
+        _setText('statusbar-connection', status.bluetooth_connected ? '蓝牙已连接' : '蓝牙未连接');
+        _setText('statusbar-battery', status.battery_level != null ? `电量 ${status.battery_level}%` : '电量 -');
+        _setText('statusbar-signal', status.signal_strength != null ? `信号 ${status.signal_strength}/5` : '信号 -');
+        _setText('statusbar-operator', status.operator || '-');
+
+        // Header connection indicator
+        const headerDot = document.getElementById('header-connection-dot');
+        if (headerDot) {
+            headerDot.className = 'status-dot ' + (status.bluetooth_connected ? 'status-connected' : 'status-disconnected');
+        }
+        _setText('header-connection-text', status.bluetooth_connected ? '已连接' : '未连接');
+    } catch {
+        // Silent fail for status polling — avoid spamming the user
+        _setText('statusbar-connection', '蓝牙状态未知');
+    }
+}
+
+// Poll every 10 seconds
+setInterval(updateStatusBar, 10000);
+
+// ============================================================
+// Pagination Renderer
+// ============================================================
+function renderPagination(containerId, total, currentPage, pageSize, onPageChange) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+    if (totalPages <= 1) {
+        container.innerHTML = '';
+        return;
+    }
+
+    let html = '<div class="pagination">';
+
+    // Previous
+    html += `<button class="btn btn-sm btn-outline page-btn" ${currentPage <= 1 ? 'disabled' : ''} data-page="${currentPage - 1}">&laquo; 上一页</button>`;
+
+    // Page numbers — show a window of up to 7 pages around the current page
+    const maxVisible = 7;
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+    let endPage = Math.min(totalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) {
+        startPage = Math.max(1, endPage - maxVisible + 1);
+    }
+
+    if (startPage > 1) {
+        html += `<button class="btn btn-sm btn-outline page-btn" data-page="1">1</button>`;
+        if (startPage > 2) html += '<span class="page-ellipsis">...</span>';
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+        html += `<button class="btn btn-sm ${i === currentPage ? 'btn-primary' : 'btn-outline'} page-btn" data-page="${i}">${i}</button>`;
+    }
+
+    if (endPage < totalPages) {
+        if (endPage < totalPages - 1) html += '<span class="page-ellipsis">...</span>';
+        html += `<button class="btn btn-sm btn-outline page-btn" data-page="${totalPages}">${totalPages}</button>`;
+    }
+
+    // Next
+    html += `<button class="btn btn-sm btn-outline page-btn" ${currentPage >= totalPages ? 'disabled' : ''} data-page="${currentPage + 1}">下一页 &raquo;</button>`;
+
+    html += `<span class="page-info">共 ${total} 条</span>`;
+    html += '</div>';
+
+    container.innerHTML = html;
+
+    // Attach click handlers
+    container.querySelectorAll('.page-btn:not([disabled])').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            const page = parseInt(btn.dataset.page);
+            if (page && page !== currentPage) {
+                onPageChange(page);
+            }
+        });
+    });
+}
+
+// ============================================================
+// Modal Helpers
+// ============================================================
+function openModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.style.display = 'flex';
+        modal.classList.add('modal-open');
+    }
+}
+
+function closeModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.style.display = 'none';
+        modal.classList.remove('modal-open');
+    }
+}
+
+// ============================================================
+// Utility Functions
+// ============================================================
+function formatDuration(seconds) {
+    if (seconds == null || isNaN(seconds)) return '-';
+    seconds = Math.round(seconds);
+    if (seconds < 0) seconds = 0;
+
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+
+    if (h > 0) {
+        return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+    }
+    return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+}
+
+function formatTime(isoString) {
+    if (!isoString) return '-';
+    try {
+        const d = new Date(isoString);
+        if (isNaN(d.getTime())) return isoString;
+        return d.toLocaleString('zh-CN', {
+            year: 'numeric', month: '2-digit', day: '2-digit',
+            hour: '2-digit', minute: '2-digit', second: '2-digit',
+        });
+    } catch {
+        return isoString;
+    }
+}
+
+function escapeHtml(text) {
+    if (text == null) return '';
+    const str = String(text);
+    const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+    return str.replace(/[&<>"']/g, (c) => map[c]);
+}
+
+function resultLabel(result) {
+    const labels = {
+        success: '成功', no_answer: '未接', busy: '忙碌',
+        rejected: '拒接', error: '错误', timeout: '超时',
+    };
+    return labels[result] || result || '-';
+}
+
+function statusLabel(status) {
+    const labels = {
+        created: '已创建', queued: '排队中', dialing: '拨号中',
+        ringing: '响铃中', active: '通话中', completed: '已完成',
+        failed: '失败', cancelled: '已取消', incoming: '来电',
+    };
+    return labels[status] || status || '-';
+}
+
+/** Get value from a nested object using dot notation, e.g. 'llm.active_provider'. */
+function _getNestedVal(obj, path) {
+    return path.split('.').reduce((o, k) => (o && o[k] !== undefined ? o[k] : undefined), obj);
+}
+
+/** Shortcut: set .textContent of element by id. */
+function _setText(id, text) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = text != null ? String(text) : '';
+}
+
+/** Shortcut: get .value of element by id. */
+function _val(id) {
+    const el = document.getElementById(id);
+    return el ? el.value : '';
+}
+
+/** Shortcut: set .value of element by id. */
+function _setVal(id, value) {
+    const el = document.getElementById(id);
+    if (el) el.value = value != null ? String(value) : '';
+}
+
+/** Set a <select> value, adding the option dynamically if it doesn't exist. */
+function _setSelectVal(id, value) {
+    const el = document.getElementById(id);
+    if (!el || !value) return;
+    const str = String(value);
+    // Check if the option already exists
+    let found = false;
+    for (const opt of el.options) {
+        if (opt.value === str) { found = true; break; }
+    }
+    if (!found) {
+        const opt = document.createElement('option');
+        opt.value = str;
+        opt.textContent = str;
+        el.appendChild(opt);
+    }
+    el.value = str;
+}
+
+/** Shortcut: reset a form by id. */
+function _clearForm(formId) {
+    const form = document.getElementById(formId);
+    if (form) form.reset();
+}
+
+// ============================================================
+// Voice Chat Module
+// ============================================================
+
+const TTS_PROVIDER_NAMES = {
+    'edge-tts': 'Edge TTS', volcengine: '火山引擎', tencent: '腾讯云',
+    azure: 'Azure', openai: 'OpenAI', aliyun: '阿里云', local: '本地',
+};
+const ASR_PROVIDER_NAMES = {
+    whisper: 'Whisper', volcengine: '火山引擎', tencent: '腾讯云', xunfei: '讯飞',
+};
+
+async function loadVoiceChatConfig() {
+    try {
+        const c = currentConfig || await API.get('/api/config');
+        // LLM
+        const llmProvider = _getNestedVal(c, 'llm.active_provider') || 'openai';
+        const llmModel = _getNestedVal(c, `llm.providers.${llmProvider}.model`) || '--';
+        const llmEl = document.getElementById('vc-cfg-llm');
+        if (llmEl) llmEl.textContent = `${llmProvider} / ${llmModel}`;
+
+        // ASR
+        const asrProvider = _getNestedVal(c, 'asr.provider') || 'whisper';
+        const asrName = ASR_PROVIDER_NAMES[asrProvider] || asrProvider;
+        let asrDetail = '';
+        if (asrProvider === 'volcengine') {
+            asrDetail = _getNestedVal(c, 'asr.volcengine.resource_id') || '';
+        } else if (asrProvider === 'tencent') {
+            asrDetail = _getNestedVal(c, 'asr.tencent.engine_model_type') || '';
+        } else if (asrProvider === 'whisper') {
+            asrDetail = _getNestedVal(c, 'asr.whisper.model') || 'whisper-1';
+        }
+        const asrEl = document.getElementById('vc-cfg-asr');
+        if (asrEl) asrEl.textContent = asrDetail ? `${asrName} (${asrDetail})` : asrName;
+
+        // TTS
+        const ttsProvider = _getNestedVal(c, 'tts.provider') || 'edge-tts';
+        const ttsName = TTS_PROVIDER_NAMES[ttsProvider] || ttsProvider;
+        let ttsVoice = '';
+        if (ttsProvider === 'edge-tts') {
+            ttsVoice = _getNestedVal(c, 'tts.edge_tts.voice') || '';
+        } else if (ttsProvider === 'volcengine') {
+            ttsVoice = _getNestedVal(c, 'tts.volcengine.voice_type') || '';
+        } else if (ttsProvider === 'tencent') {
+            ttsVoice = String(_getNestedVal(c, 'tts.tencent.voice_type') || '');
+        }
+        const ttsEl = document.getElementById('vc-cfg-tts');
+        if (ttsEl) ttsEl.textContent = ttsVoice ? `${ttsName} / ${ttsVoice}` : ttsName;
+
+        // VAD — populate inline inputs (localStorage overrides config)
+        const vadFields = [
+            { id: 'vc-vad-threshold', key: 'vad.energy_threshold', def: 300 },
+            { id: 'vc-vad-silence', key: 'vad.silence_threshold_ms', def: 800 },
+            { id: 'vc-vad-min-speech', key: 'vad.min_speech_ms', def: 250 },
+        ];
+        vadFields.forEach(f => {
+            const el = document.getElementById(f.id);
+            if (!el) return;
+            const saved = localStorage.getItem(f.id);
+            el.value = saved !== null ? saved : (_getNestedVal(c, f.key) || f.def);
+        });
+    } catch (_) {}
+}
+
+let vcState = 'idle'; // idle | listening | recognizing | thinking | speaking
+let vcWs = null;
+let vcAudioCtx = null;
+let vcStream = null;
+let vcProcessor = null;
+let vcGainNode = null;
+let vcAnalyser = null;
+let vcWaveHistory = [];
+let vcAnimId = null;
+let vcAudioChunks = [];
+let vcInterimBubble = null;
+let vcCurrentAudio = null;   // currently playing TTS Audio element
+let vcCallStartTime = 0;     // Date.now() when call started
+let vcCallTimerId = null;    // setInterval id for call timer
+let vcDebugTurnCount = 0;    // debug turn counter
+let vcAudioQueue = [];       // queued audio blobs for sequential playback
+let vcIsPlaying = false;     // whether audio is currently playing from queue
+let vcAllSegmentsDone = false; // flag: backend finished all TTS segments
+
+function vcSetState(state) {
+    vcState = state;
+    const indicator = document.getElementById('vc-status-indicator');
+    const text = document.getElementById('vc-status-text');
+    if (!indicator || !text) return;
+
+    indicator.className = 'vc-status-indicator';
+    const labels = {
+        idle: '等待开始',
+        listening: '正在听...',
+        recognizing: '正在识别...',
+        thinking: '正在思考...',
+        speaking: '正在说...',
+    };
+    text.textContent = labels[state] || state;
+    if (state !== 'idle') indicator.classList.add(state === 'listening' || state === 'recognizing' ? 'listening' : state);
+}
+
+function _vcFormatTime(date) {
+    return date.toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function _vcElapsedStr() {
+    if (!vcCallStartTime) return '';
+    const sec = Math.floor((Date.now() - vcCallStartTime) / 1000);
+    return String(Math.floor(sec / 60)).padStart(2, '0') + ':' + String(sec % 60).padStart(2, '0');
+}
+
+function _vcStartTimer() {
+    vcCallStartTime = Date.now();
+    const el = document.getElementById('vc-call-timer');
+    if (el) el.textContent = '00:00';
+    vcCallTimerId = setInterval(() => {
+        if (el) el.textContent = _vcElapsedStr();
+    }, 500);
+}
+
+function _vcStopTimer() {
+    if (vcCallTimerId) { clearInterval(vcCallTimerId); vcCallTimerId = null; }
+    const el = document.getElementById('vc-call-timer');
+    if (el) el.textContent = '';
+}
+
+// --- Status Log ---
+function vcLog(msg, cls) {
+    const el = document.getElementById('vc-log');
+    if (!el) return;
+    const ts = new Date().toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    const entry = document.createElement('div');
+    entry.className = 'vc-log-entry' + (cls ? ' ' + cls : '');
+    entry.innerHTML = `<span class="vc-log-time">[${ts}]</span> ${msg}`;
+    el.appendChild(entry);
+    el.scrollTop = el.scrollHeight;
+}
+
+function vcLogClear() {
+    const el = document.getElementById('vc-log');
+    if (el) el.innerHTML = '';
+}
+
+function _vcDumpLog() {
+    const el = document.getElementById('vc-log');
+    if (!el) return;
+    const lines = [];
+    el.querySelectorAll('.vc-log-entry').forEach(e => lines.push(e.textContent));
+    if (!lines.length) return;
+    fetch('/api/voicechat/dump-log', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ log: lines.join('\n') }),
+    }).catch(() => {});
+}
+
+function vcDebugClear() {
+    const el = document.getElementById('vc-debug');
+    if (el) el.innerHTML = '';
+    vcDebugTurnCount = 0;
+    const cnt = document.getElementById('vc-debug-count');
+    if (cnt) cnt.textContent = '';
+}
+
+function vcAddDebugRecord(messages) {
+    vcDebugTurnCount++;
+    const el = document.getElementById('vc-debug');
+    if (!el) return;
+    const ts = new Date().toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    const detail = document.createElement('details');
+    detail.className = 'vc-debug-item';
+    const summary = document.createElement('summary');
+    summary.innerHTML = `<span class="vc-dbg-turn">#${vcDebugTurnCount}</span> ${messages.length} 条消息 <span class="vc-dbg-time">${ts}</span>`;
+    detail.appendChild(summary);
+    const pre = document.createElement('pre');
+    pre.textContent = JSON.stringify(messages, null, 2);
+    detail.appendChild(pre);
+    el.appendChild(detail);
+    el.scrollTop = el.scrollHeight;
+    const cnt = document.getElementById('vc-debug-count');
+    if (cnt) cnt.textContent = `(${vcDebugTurnCount})`;
+}
+
+// --- Waveform (reuses ASR test drawing pattern) ---
+function _vcDrawWaveform() {
+    if (!vcAnalyser) return;
+    vcAnimId = requestAnimationFrame(_vcDrawWaveform);
+
+    const canvas = document.getElementById('vc-canvas');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const W = canvas.width;
+    const H = canvas.height;
+
+    const bufLen = vcAnalyser.frequencyBinCount;
+    const timeData = new Uint8Array(bufLen);
+    vcAnalyser.getByteTimeDomainData(timeData);
+    let sumSq = 0;
+    for (let i = 0; i < timeData.length; i++) {
+        const v = (timeData[i] - 128) / 128.0;
+        sumSq += v * v;
+    }
+    const rms = Math.sqrt(sumSq / timeData.length);
+
+    const barW = 3, gap = 1;
+    const maxBars = Math.ceil(W / (barW + gap));
+    vcWaveHistory.push(rms);
+    if (vcWaveHistory.length > maxBars) vcWaveHistory.shift();
+
+    ctx.fillStyle = '#0f172a';
+    ctx.fillRect(0, 0, W, H);
+
+    const len = vcWaveHistory.length;
+    for (let i = 0; i < len; i++) {
+        const val = vcWaveHistory[i];
+        const norm = Math.min(1.0, val / 0.35);
+        const barH = Math.max(2, norm * H);
+        const x = W - (len - i) * (barW + gap);
+        if (x < -barW) continue;
+        let r, g, b;
+        if (norm < 0.4) { r = Math.floor(norm / 0.4 * 180); g = 200; b = 80; }
+        else if (norm < 0.75) { const t = (norm - 0.4) / 0.35; r = 180 + Math.floor(t * 75); g = 200 - Math.floor(t * 80); b = 80 - Math.floor(t * 40); }
+        else { r = 255; g = Math.floor((1 - (norm - 0.75) / 0.25) * 120); b = 40; }
+        ctx.fillStyle = `rgb(${r},${g},${b})`;
+        ctx.fillRect(x, (H - barH) / 2, barW, barH);
+    }
+
+    ctx.strokeStyle = 'rgba(100,116,139,0.3)';
+    ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(0, H / 2); ctx.lineTo(W, H / 2); ctx.stroke();
+
+    const dB = rms > 0 ? 20 * Math.log10(rms) : -100;
+    const pct = Math.min(100, Math.max(0, (dB + 60) / 60 * 100));
+    const volBar = document.getElementById('vc-vol-bar');
+    const volDb = document.getElementById('vc-vol-db');
+    if (volBar) volBar.style.width = pct + '%';
+    if (volDb) volDb.textContent = (dB > -100 ? dB.toFixed(0) : '--') + ' dB';
+}
+
+function _vcStopWaveform() {
+    if (vcAnimId) { cancelAnimationFrame(vcAnimId); vcAnimId = null; }
+    vcAnalyser = null;
+    vcWaveHistory = [];
+}
+
+function vcAddBubble(role, text) {
+    const container = document.getElementById('vc-messages');
+    const hint = document.getElementById('vc-empty-hint');
+    if (hint) hint.style.display = 'none';
+
+    const bubble = document.createElement('div');
+    bubble.className = `vc-bubble ${role}`;
+
+    const label = document.createElement('div');
+    label.className = 'vc-bubble-label';
+    const roleName = role === 'user' ? '你' : 'AI';
+    const timeStr = _vcFormatTime(new Date());
+    const elapsed = _vcElapsedStr();
+    label.innerHTML = `<span>${roleName}</span><span class="vc-bubble-time">${timeStr}${elapsed ? ' (' + elapsed + ')' : ''}</span>`;
+    bubble.appendChild(label);
+
+    const content = document.createElement('div');
+    content.textContent = text;
+    bubble.appendChild(content);
+
+    container.appendChild(bubble);
+    container.scrollTop = container.scrollHeight;
+    return bubble;
+}
+
+// Tool call cards: maps tool_call_id → { card DOM element, startTime, name, args }
+const _vcToolCards = {};
+
+function _vcToolCardSvgIcon() {
+    return '<svg class="vc-tool-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>';
+}
+
+function _vcFormatDateTime(date) {
+    const y = date.getFullYear();
+    const mo = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    const h = String(date.getHours()).padStart(2, '0');
+    const mi = String(date.getMinutes()).padStart(2, '0');
+    const s = String(date.getSeconds()).padStart(2, '0');
+    return `${y}/${mo}/${d} ${h}:${mi}:${s}`;
+}
+
+function vcAddToolCallCard(id, name, args) {
+    const container = document.getElementById('vc-messages');
+    const hint = document.getElementById('vc-empty-hint');
+    if (hint) hint.style.display = 'none';
+
+    const argsStr = typeof args === 'object' ? JSON.stringify(args, null, 2) : String(args || '');
+    const inputSize = new Blob([argsStr]).size;
+    const startTime = new Date();
+
+    // Outer wrapper
+    const card = document.createElement('div');
+    card.className = 'vc-tool-card';
+    card.dataset.toolId = id || name;
+
+    // Collapsed header (clickable)
+    const header = document.createElement('div');
+    header.className = 'vc-tool-card-header';
+    header.innerHTML = `${_vcToolCardSvgIcon()}
+        <span class="vc-tool-card-name">${escapeHtml(name)}</span>
+        <span class="vc-tool-card-metrics">
+            <span class="up">&uarr; ${inputSize}</span>
+            <span class="down">&darr; 0</span>
+        </span>
+        <span class="vc-tool-card-status"><span class="spinner"></span></span>`;
+
+    header.addEventListener('click', function () {
+        card.classList.toggle('expanded');
+        const msgEl = document.getElementById('vc-messages');
+        if (msgEl) msgEl.scrollTop = msgEl.scrollHeight;
+    });
+    card.appendChild(header);
+
+    // Expanded detail panel
+    const detail = document.createElement('div');
+    detail.className = 'vc-tool-detail';
+    detail.innerHTML = `
+        <div class="vc-tool-detail-header">
+            <span class="title">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+                工具调用详情
+            </span>
+            <button class="vc-tool-detail-copy" title="复制全部">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            </button>
+        </div>
+        <div class="vc-tool-detail-info">
+            <div><span class="label">工具名称：</span>${escapeHtml(name)}</div>
+            <div><span class="label">开始时间：</span>${_vcFormatDateTime(startTime)}</div>
+            <div class="detail-end-time"><span class="label">结束时间：</span>--</div>
+            <div class="detail-duration"><span class="label">耗时：</span>--</div>
+        </div>
+        <div class="vc-tool-detail-sep"></div>
+        <div class="vc-tool-detail-section">
+            <div class="section-title"><span class="arrow-up">&uarr;</span> 参数</div>
+            <pre>${escapeHtml(argsStr)}</pre>
+        </div>
+        <div class="vc-tool-detail-sep"></div>
+        <div class="vc-tool-detail-section detail-response-section">
+            <div class="section-title"><span class="arrow-down">&darr;</span> 响应数据</div>
+            <pre class="detail-response-pre">等待响应...</pre>
+        </div>`;
+
+    // Copy button handler
+    detail.querySelector('.vc-tool-detail-copy').addEventListener('click', function (e) {
+        e.stopPropagation();
+        const info = `工具: ${name}\n参数: ${argsStr}`;
+        const respPre = detail.querySelector('.detail-response-pre');
+        const full = info + '\n响应: ' + (respPre ? respPre.textContent : '');
+        navigator.clipboard.writeText(full).catch(() => {});
+    });
+
+    card.appendChild(detail);
+    container.appendChild(card);
+    container.scrollTop = container.scrollHeight;
+
+    _vcToolCards[id || name] = { card, startTime, name, argsStr, inputSize };
+    return card;
+}
+
+function vcUpdateToolResult(id, name, result) {
+    const key = id || name;
+    const entry = _vcToolCards[key];
+    if (!entry) return;
+
+    const { card, startTime, inputSize } = entry;
+    const endTime = new Date();
+    const duration = endTime - startTime;
+    const resultStr = String(result || '');
+    const outputSize = new Blob([resultStr]).size;
+    const isError = resultStr.startsWith('Error:');
+
+    // Update metrics in header
+    const metricsEl = card.querySelector('.vc-tool-card-metrics .down');
+    if (metricsEl) metricsEl.innerHTML = `&darr; ${outputSize}`;
+
+    // Replace spinner with checkmark or error mark
+    const statusEl = card.querySelector('.vc-tool-card-status');
+    if (statusEl) {
+        statusEl.innerHTML = isError
+            ? '<span class="error-mark">&#10060;</span>'
+            : '<span class="checkmark">&#10004;</span>';
+    }
+
+    // Update detail panel
+    const detail = card.querySelector('.vc-tool-detail');
+    if (detail) {
+        const endEl = detail.querySelector('.detail-end-time');
+        if (endEl) endEl.innerHTML = `<span class="label">结束时间：</span>${_vcFormatDateTime(endTime)}`;
+        const durEl = detail.querySelector('.detail-duration');
+        if (durEl) durEl.innerHTML = `<span class="label">耗时：</span>${duration}ms`;
+        const respPre = detail.querySelector('.detail-response-pre');
+        if (respPre) respPre.textContent = resultStr;
+    }
+
+    const container = document.getElementById('vc-messages');
+    if (container) container.scrollTop = container.scrollHeight;
+}
+
+function vcSetInterim(text) {
+    if (!text) {
+        if (vcInterimBubble) { vcInterimBubble.remove(); vcInterimBubble = null; }
+        return;
+    }
+    const container = document.getElementById('vc-messages');
+    if (!vcInterimBubble) {
+        const hint = document.getElementById('vc-empty-hint');
+        if (hint) hint.style.display = 'none';
+        vcInterimBubble = document.createElement('div');
+        vcInterimBubble.className = 'vc-bubble interim';
+        container.appendChild(vcInterimBubble);
+    }
+    vcInterimBubble.textContent = text;
+    if (container) container.scrollTop = container.scrollHeight;
+}
+
+function _vcStopCurrentAudio() {
+    if (vcCurrentAudio) {
+        vcCurrentAudio.pause();
+        if (vcCurrentAudio._blobUrl) {
+            URL.revokeObjectURL(vcCurrentAudio._blobUrl);
+        }
+        vcCurrentAudio = null;
+    }
+}
+
+async function startVoiceChat() {
+    if (vcState !== 'idle') return;
+
+    const startBtn = document.getElementById('vc-btn-start');
+    const stopBtn = document.getElementById('vc-btn-stop');
+    if (startBtn) startBtn.style.display = 'none';
+    if (stopBtn) stopBtn.style.display = '';
+
+    vcSetState('listening');
+    vcAudioChunks = [];
+    _vcStartTimer();
+    vcLogClear();
+    vcDebugClear();
+
+    // Clear previous conversation messages
+    const msgContainer = document.getElementById('vc-messages');
+    if (msgContainer) {
+        msgContainer.innerHTML = '<div class="vc-empty-hint" id="vc-empty-hint">通话中...</div>';
+    }
+    vcInterimBubble = null;
+
+    vcLog('正在初始化通话...', 'info');
+
+    // Read system prompt & determine ai_first
+    const promptEl = document.getElementById('vc-system-prompt');
+    const userPrompt = promptEl ? promptEl.value.trim() : '';
+
+    // Read phone simulation fields
+    const phoneDir = document.getElementById('vc-phone-direction')?.value || 'incoming';
+    const phoneNum = document.getElementById('vc-phone-number')?.value.trim() || '';
+    const phoneName = document.getElementById('vc-phone-name')?.value.trim() || '';
+
+    // Build full system prompt with phone context prepended
+    const phoneParts = [];
+    phoneParts.push('通话方向: ' + (phoneDir === 'outgoing' ? '拨出' : '接入'));
+    if (phoneNum) phoneParts.push('对方号码: ' + phoneNum);
+    if (phoneName) phoneParts.push('对方姓名: ' + phoneName);
+    const phoneContext = phoneParts.join('\n');
+    const systemPrompt = userPrompt
+        ? phoneContext + '\n\n' + userPrompt
+        : phoneContext;
+    const aiFirst = !!userPrompt;
+
+    if (phoneNum) vcLog(`模拟${phoneDir === 'outgoing' ? '拨出' : '来电'}: ${phoneNum}${phoneName ? ' (' + phoneName + ')' : ''}`);
+    if (userPrompt) vcLog('已设置系统提示词，AI 将主动发起对话', 'info');
+
+    try {
+        // Get microphone (shared constraints with ASR test)
+        const savedMic = localStorage.getItem('asr-mic-deviceId') || '';
+        vcStream = await navigator.mediaDevices.getUserMedia({ audio: _getMicConstraints(savedMic) });
+        vcLog('麦克风已连接');
+
+        // Shared audio pipeline (same code path as ASR test)
+        const pipeline = _createAudioPipeline({
+            stream: vcStream,
+            targetSR: 16000,
+            log: vcLog,
+            onPcmData: (pcm16, preAgcRms) => {
+                if (!vcWs || vcWs.readyState !== WebSocket.OPEN) return;
+                // Prepend 4-byte float32 LE pre-AGC RMS so backend VAD can use
+                // the original (un-amplified) energy level.
+                const header = new Float32Array([preAgcRms]);
+                const frame = new Uint8Array(4 + pcm16.byteLength);
+                frame.set(new Uint8Array(header.buffer), 0);
+                frame.set(new Uint8Array(pcm16.buffer), 4);
+                vcWs.send(frame.buffer);
+            },
+        });
+
+        vcAudioCtx = pipeline.audioContext;
+        vcGainNode = pipeline.gainNode;
+        vcAnalyser = pipeline.analyser;
+        vcProcessor = pipeline.processor;
+
+        // Show waveform visualization
+        const vizEl = document.getElementById('vc-viz');
+        if (vizEl) vizEl.style.display = '';
+        vcWaveHistory = [];
+        _vcDrawWaveform();
+
+        // Open WebSocket
+        const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        vcWs = new WebSocket(`${proto}//${location.host}/ws/voice-chat`);
+        vcWs.binaryType = 'arraybuffer';
+        vcLog('正在连接 WebSocket...');
+
+        vcWs.onopen = () => {
+            vcLog('WebSocket 已连接', 'info');
+            vcWs.send(JSON.stringify({ type: 'start', system_prompt: systemPrompt, ai_first: aiFirst, phone_number: phoneNum }));
+        };
+
+        vcWs.onmessage = vcHandleMessage;
+
+        vcWs.onclose = () => {
+            vcLog('WebSocket 已断开', 'warn');
+            if (vcState !== 'idle') stopVoiceChat();
+        };
+
+        vcWs.onerror = () => {
+            vcLog('WebSocket 连接失败', 'error');
+            showToast('语音连接失败', 'error');
+            stopVoiceChat();
+        };
+
+    } catch (err) {
+        vcLog('麦克风访问失败: ' + err.message, 'error');
+        showToast('麦克风访问失败: ' + err.message, 'error');
+        stopVoiceChat();
+    }
+}
+
+function stopVoiceChat() {
+    vcLog('正在结束通话...');
+
+    // Send stop command
+    if (vcWs && vcWs.readyState === WebSocket.OPEN) {
+        try { vcWs.send(JSON.stringify({ type: 'stop' })); } catch (_) {}
+        try { vcWs.close(); } catch (_) {}
+    }
+    vcWs = null;
+
+    // Stop any playing audio
+    _vcStopCurrentAudio();
+
+    // Stop waveform visualization
+    _vcStopWaveform();
+    const vizEl = document.getElementById('vc-viz');
+    if (vizEl) vizEl.style.display = 'none';
+
+    // Stop audio capture
+    if (vcProcessor) {
+        vcProcessor.onaudioprocess = null;
+        try { vcProcessor.disconnect(); } catch (_) {}
+        vcProcessor = null;
+    }
+    if (vcGainNode) {
+        try { vcGainNode.disconnect(); } catch (_) {}
+        vcGainNode = null;
+    }
+    if (vcAudioCtx) {
+        try { vcAudioCtx.close(); } catch (_) {}
+        vcAudioCtx = null;
+    }
+    if (vcStream) {
+        vcStream.getTracks().forEach(t => t.stop());
+        vcStream = null;
+    }
+
+    vcAudioChunks = [];
+    vcAudioQueue = [];
+    vcIsPlaying = false;
+    vcAllSegmentsDone = false;
+    vcInterimBubble = null;
+    _vcStopTimer();
+    vcSetState('idle');
+    vcLog('通话已结束', 'info');
+
+    // Auto-dump status log to server for diagnostics
+    _vcDumpLog();
+
+    const startBtn = document.getElementById('vc-btn-start');
+    const stopBtn = document.getElementById('vc-btn-stop');
+    if (startBtn) startBtn.style.display = '';
+    if (stopBtn) stopBtn.style.display = 'none';
+}
+
+function vcHandleMessage(event) {
+    // Binary frame = TTS audio data
+    if (event.data instanceof ArrayBuffer) {
+        vcAudioChunks.push(new Uint8Array(event.data));
+        return;
+    }
+
+    let msg;
+    try { msg = JSON.parse(event.data); } catch (_) { return; }
+
+    switch (msg.type) {
+        case 'ready':
+            vcLog('服务端已就绪', 'info');
+            vcSetState('listening');
+            break;
+
+        case 'listening':
+            vcLog('等待语音输入...');
+            vcSetState('listening');
+            break;
+
+        case 'speech_start':
+            vcLog('检测到语音');
+            vcSetState('recognizing');
+            vcSetInterim('正在识别...');
+            break;
+
+        case 'speech_end':
+            vcLog('语音结束，正在识别...');
+            vcSetInterim('正在识别...');
+            break;
+
+        case 'interim':
+            vcSetInterim(msg.text || '正在识别...');
+            vcLog('识别中: ' + msg.text, 'debug');
+            break;
+
+        case 'user_text':
+            vcLog('识别结果: ' + msg.text);
+            vcSetInterim(null);
+            vcAddBubble('user', msg.text);
+            break;
+
+        case 'thinking':
+            vcLog('AI 正在思考...');
+            vcSetState('thinking');
+            break;
+
+        case 'ai_text':
+            vcLog('AI 回复: ' + (msg.text.length > 30 ? msg.text.substring(0, 30) + '...' : msg.text));
+            vcAddBubble('ai', msg.text);
+            break;
+
+        case 'tool_call':
+            vcLog('🔧 调用工具: ' + msg.name);
+            vcAddToolCallCard(msg.id || '', msg.name, msg.arguments || {});
+            break;
+
+        case 'tool_result':
+            vcLog('📋 工具结果: ' + msg.name + ' → ' + (msg.result || '').substring(0, 50));
+            vcUpdateToolResult(msg.id || '', msg.name, msg.result || '');
+            break;
+
+        case 'debug_messages':
+            vcAddDebugRecord(msg.messages || []);
+            vcLog(`调试: 第${vcDebugTurnCount}次 LLM 调用 (${(msg.messages || []).length} 条消息)`);
+            break;
+
+        case 'speaking':
+            vcLog('正在合成语音...');
+            vcSetState('speaking');
+            _vcStopCurrentAudio();
+            vcAudioQueue = [];
+            vcAudioChunks = [];
+            vcIsPlaying = false;
+            vcAllSegmentsDone = false;
+            break;
+
+        case 'segment_end': {
+            // One sentence's TTS audio is ready — queue it
+            if (vcAudioChunks.length > 0) {
+                const totalLen = vcAudioChunks.reduce((s, c) => s + c.length, 0);
+                const merged = new Uint8Array(totalLen);
+                let off = 0;
+                for (const chunk of vcAudioChunks) { merged.set(chunk, off); off += chunk.length; }
+                vcAudioQueue.push(merged);
+                vcAudioChunks = [];
+                vcLog(`语音片段 ${vcAudioQueue.length} 就绪`);
+                _vcPlayNextSegment();
+            }
+            break;
+        }
+
+        case 'audio_done':
+            // All TTS segments have been sent
+            vcAllSegmentsDone = true;
+            if (vcAudioChunks.length > 0) {
+                // Flush remaining chunks as last segment
+                const totalLen = vcAudioChunks.reduce((s, c) => s + c.length, 0);
+                const merged = new Uint8Array(totalLen);
+                let off = 0;
+                for (const chunk of vcAudioChunks) { merged.set(chunk, off); off += chunk.length; }
+                vcAudioQueue.push(merged);
+                vcAudioChunks = [];
+                _vcPlayNextSegment();
+            }
+            vcLog('所有语音片段已接收');
+            // If nothing to play, transition directly
+            if (vcAudioQueue.length === 0 && !vcIsPlaying) {
+                vcSetState('listening');
+            }
+            break;
+
+        case 'vad_info': {
+            const rms = msg.rms || 0;
+            const thr = msg.threshold || 0;
+            const nf = msg.noise_floor || 0;
+            const sc = msg.silence_count || 0;
+            const st = msg.silence_target || 0;
+            const isSpeech = msg.in_speech ? '🔊' : '🔇';
+            vcLog(`VAD ${isSpeech} rms=${rms} thr=${thr} noise=${nf} silence=${sc}/${st}`);
+            break;
+        }
+
+        case 'error':
+            vcLog('错误: ' + (msg.message || ''), 'error');
+            showToast('语音错误: ' + (msg.message || ''), 'error');
+            break;
+    }
+}
+
+function _vcPlayNextSegment() {
+    if (vcIsPlaying || vcAudioQueue.length === 0) return;
+    vcIsPlaying = true;
+
+    _vcStopCurrentAudio();
+
+    const data = vcAudioQueue.shift();
+    const blob = new Blob([data], { type: 'audio/mp3' });
+    const url = URL.createObjectURL(blob);
+    const audio = new Audio(url);
+    audio._blobUrl = url;
+    vcCurrentAudio = audio;
+
+    const onFinish = () => {
+        URL.revokeObjectURL(url);
+        if (vcCurrentAudio === audio) vcCurrentAudio = null;
+        vcIsPlaying = false;
+        if (vcAudioQueue.length > 0) {
+            _vcPlayNextSegment();
+        } else if (vcAllSegmentsDone) {
+            if (vcState === 'speaking') vcSetState('listening');
+        }
+    };
+
+    audio.onended = onFinish;
+    audio.onerror = onFinish;
+    audio.play().catch(onFinish);
+}
+
+// ============================================================
+// Dev Log Page
+// ============================================================
+let devlogPage = 1;
+let devlogCurrentId = null;
+let _devlogEditingId = null; // ID of record being edited (null = new)
+
+async function loadDevLog() {
+    const status = document.getElementById('devlog-filter-status')?.value || '';
+    const params = new URLSearchParams({ page: devlogPage, page_size: 20 });
+    if (status) params.set('status', status);
+
+    try {
+        const data = await API.get('/api/devlog?' + params);
+        renderDevLogTable(data.items || [], data.total, data.page, data.page_size);
+    } catch (err) {
+        showToast('加载开发记录失败: ' + err.message, 'error');
+    }
+}
+
+function renderDevLogTable(items, total, page, pageSize) {
+    const tbody = document.getElementById('devlog-tbody');
+    if (!tbody) return;
+
+    const statusLabels = { pending: '待处理', in_progress: '进行中', done: '已完成' };
+    const statusBadges = { pending: 'badge-gray', in_progress: 'badge-info', done: 'badge-success' };
+    const typeBadgeColors = { '需求': '#3b82f6', 'BUG': '#ef4444', '优化': '#10b981', '重构': '#8b5cf6', '澄清': '#f59e0b', '文档': '#6b7280' };
+
+    if (items.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="5" class="text-muted" style="text-align:center;padding:24px;">暂无开发记录</td></tr>';
+    } else {
+        tbody.innerHTML = items.map(r => {
+            const preview = (r.content || '').length > 60 ? r.content.substring(0, 60) + '...' : (r.content || '');
+            const tags = [];
+            if (r.important) tags.push('<span class="badge badge-error">重要</span>');
+            if (r.urgent) tags.push('<span class="badge badge-warning">优先</span>');
+            const typeLabel = r.type || '需求';
+            const typeColor = typeBadgeColors[typeLabel] || '#6b7280';
+            const typeTag = `<span style="display:inline-block;padding:1px 5px;border-radius:3px;font-size:11px;font-weight:500;color:#fff;background:${typeColor};margin-right:4px;vertical-align:baseline;">${escapeHtml(typeLabel)}</span>`;
+            return `<tr>
+            <td><a href="#" class="devlog-view-link" data-id="${escapeHtml(r.id)}" style="color:var(--primary);text-decoration:none;font-weight:500;">${typeTag}${escapeHtml(preview)}</a></td>
+            <td>${tags.length ? tags.join(' ') : '<span class="text-muted">-</span>'}</td>
+            <td><span class="badge ${statusBadges[r.status] || 'badge-gray'}">${escapeHtml(statusLabels[r.status] || r.status)}</span></td>
+            <td>${formatTime(r.created_at)}</td>
+            <td><a href="#" class="devlog-edit-link" data-id="${escapeHtml(r.id)}" data-content="${escapeHtml(r.content)}" data-important="${r.important ? '1' : ''}" data-urgent="${r.urgent ? '1' : ''}" data-type="${escapeHtml(r.type || '需求')}" style="color:var(--primary);font-size:13px;">编辑</a></td>
+        </tr>`;
+        }).join('');
+    }
+
+    // Pagination
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const pagEl = document.getElementById('devlog-pagination');
+    if (pagEl) {
+        pagEl.innerHTML = `
+            <button class="btn btn-secondary btn-sm" id="devlog-prev" ${page <= 1 ? 'disabled' : ''}>上一页</button>
+            <span class="pagination-info">${page} / ${totalPages}（共 ${total} 条）</span>
+            <button class="btn btn-secondary btn-sm" id="devlog-next" ${page >= totalPages ? 'disabled' : ''}>下一页</button>
+        `;
+        const prev = document.getElementById('devlog-prev');
+        const next = document.getElementById('devlog-next');
+        if (prev) prev.onclick = () => { devlogPage = Math.max(1, devlogPage - 1); loadDevLog(); };
+        if (next) next.onclick = () => { devlogPage = Math.min(totalPages, devlogPage + 1); loadDevLog(); };
+    }
+}
+
+async function submitDevLog(e) {
+    e.preventDefault();
+    const content = document.getElementById('devlog-content')?.value?.trim();
+    const important = document.getElementById('devlog-important')?.checked || false;
+    const urgent = document.getElementById('devlog-urgent')?.checked || false;
+    const type = document.getElementById('devlog-type')?.value || '需求';
+
+    if (!content) {
+        showToast('请填写开发需求', 'error');
+        return;
+    }
+
+    try {
+        // If editing, delete old record first
+        if (_devlogEditingId) {
+            await API.del('/api/devlog/' + _devlogEditingId);
+            _devlogEditingId = null;
+            _devlogClearEditHint();
+        }
+        await API.post('/api/devlog', { content, important, urgent, type });
+        showToast('已提交', 'success');
+        document.getElementById('form-new-devlog')?.reset();
+        devlogPage = 1;
+        loadDevLog();
+    } catch (err) {
+        showToast('提交失败: ' + err.message, 'error');
+    }
+}
+
+function _devlogStartEdit(id, content, important, urgent, type) {
+    _devlogEditingId = id;
+    const el = document.getElementById('devlog-content');
+    if (el) { el.value = content; el.focus(); }
+    const impEl = document.getElementById('devlog-important');
+    if (impEl) impEl.checked = !!important;
+    const urgEl = document.getElementById('devlog-urgent');
+    if (urgEl) urgEl.checked = !!urgent;
+    const typeEl = document.getElementById('devlog-type');
+    if (typeEl) typeEl.value = type || '需求';
+    // Show edit hint
+    let hint = document.getElementById('devlog-edit-hint');
+    if (!hint) {
+        hint = document.createElement('div');
+        hint.id = 'devlog-edit-hint';
+        hint.style.cssText = 'margin-top:6px;font-size:12px;color:var(--primary);display:flex;align-items:center;gap:8px;';
+        const form = document.getElementById('form-new-devlog');
+        if (form) form.appendChild(hint);
+    }
+    hint.innerHTML = '正在编辑需求，提交后将替换原记录 <a href="#" id="devlog-cancel-edit" style="color:var(--gray-400);">取消编辑</a>';
+    document.getElementById('devlog-cancel-edit')?.addEventListener('click', (e) => {
+        e.preventDefault();
+        _devlogEditingId = null;
+        document.getElementById('form-new-devlog')?.reset();
+        _devlogClearEditHint();
+    });
+    // Scroll to form
+    document.getElementById('form-new-devlog')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+}
+
+function _devlogClearEditHint() {
+    const hint = document.getElementById('devlog-edit-hint');
+    if (hint) hint.remove();
+}
+
+async function openDevLogDetail(id) {
+    try {
+        const r = await API.get('/api/devlog/' + id);
+        devlogCurrentId = r.id;
+
+        document.getElementById('devlog-detail-content').textContent = r.content;
+        document.getElementById('devlog-detail-type').value = r.type || '需求';
+        document.getElementById('devlog-detail-important').checked = !!r.important;
+        document.getElementById('devlog-detail-urgent').checked = !!r.urgent;
+        document.getElementById('devlog-detail-status').value = r.status || 'pending';
+        _setText('devlog-detail-created', formatTime(r.created_at));
+
+        // Completed time
+        const completedGroup = document.getElementById('devlog-detail-completed-group');
+        if (r.completed_at) {
+            _setText('devlog-detail-completed', formatTime(r.completed_at));
+            if (completedGroup) completedGroup.style.display = '';
+        } else {
+            if (completedGroup) completedGroup.style.display = 'none';
+        }
+
+        document.getElementById('devlog-detail-modal')?.classList.remove('hidden');
+    } catch (err) {
+        showToast('加载详情失败: ' + err.message, 'error');
+    }
+}
+
+function closeDevLogDetail() {
+    document.getElementById('devlog-detail-modal')?.classList.add('hidden');
+    devlogCurrentId = null;
+}
+
+async function saveDevLogStatus() {
+    if (!devlogCurrentId) return;
+    const status = document.getElementById('devlog-detail-status')?.value;
+    const important = document.getElementById('devlog-detail-important')?.checked || false;
+    const urgent = document.getElementById('devlog-detail-urgent')?.checked || false;
+    const type = document.getElementById('devlog-detail-type')?.value || '需求';
+    try {
+        await API.put('/api/devlog/' + devlogCurrentId, { status, important, urgent, type });
+        showToast('已保存', 'success');
+        closeDevLogDetail();
+        loadDevLog();
+    } catch (err) {
+        showToast('更新失败: ' + err.message, 'error');
+    }
+}
+
+async function deleteDevLog(id) {
+    if (!confirm('确定要删除这条开发记录吗？')) return;
+    try {
+        await API.del('/api/devlog/' + id);
+        showToast('已删除', 'success');
+        closeDevLogDetail();
+        loadDevLog();
+    } catch (err) {
+        showToast('删除失败: ' + err.message, 'error');
+    }
+}
+
+// --- Dev Log Archive ---
+
+async function openArchiveCutoffModal() {
+    const modal = document.getElementById('devlog-archive-cutoff-modal');
+    const input = document.getElementById('devlog-archive-cutoff-input');
+    const hint = document.getElementById('devlog-archive-cutoff-hint');
+    if (!modal || !input) return;
+
+    // Fetch last cutoff, fallback to end of day before yesterday
+    let defaultDate = null;
+    let hintText = '';
+    try {
+        const data = await API.get('/api/devlog/archive/last-cutoff');
+        if (data.last_cutoff) {
+            defaultDate = new Date(data.last_cutoff);
+            if (!isNaN(defaultDate.getTime())) {
+                hintText = '默认为上次归档截止时间';
+            } else {
+                defaultDate = null;
+            }
+        }
+    } catch (_) { /* ignore */ }
+
+    if (!defaultDate) {
+        defaultDate = new Date();
+        defaultDate.setDate(defaultDate.getDate() - 2);
+        defaultDate.setHours(23, 59, 0, 0);
+        hintText = '默认为前天 23:59（首次归档）';
+    }
+
+    if (hint) hint.textContent = hintText;
+
+    // Format for datetime-local input: YYYY-MM-DDTHH:MM
+    const pad = n => String(n).padStart(2, '0');
+    input.value = `${defaultDate.getFullYear()}-${pad(defaultDate.getMonth()+1)}-${pad(defaultDate.getDate())}T${pad(defaultDate.getHours())}:${pad(defaultDate.getMinutes())}`;
+    modal.classList.remove('hidden');
+}
+
+function closeArchiveCutoffModal() {
+    document.getElementById('devlog-archive-cutoff-modal')?.classList.add('hidden');
+}
+
+async function confirmArchiveDevLog() {
+    const input = document.getElementById('devlog-archive-cutoff-input');
+    if (!input || !input.value) {
+        showToast('请选择截止时间', 'error');
+        return;
+    }
+    // Convert local datetime-local value to ISO string with timezone
+    const localDate = new Date(input.value);
+    const cutoff = localDate.toISOString();
+
+    closeArchiveCutoffModal();
+    try {
+        const result = await API.post('/api/devlog/archive', { cutoff });
+        if (result.archived_count > 0) {
+            showToast(`已归档 ${result.archived_count} 条记录`, 'success');
+            loadDevLog();
+        } else {
+            // Format cutoff as local time for display
+            let msg = result.message || '没有需要归档的记录';
+            if (result.cutoff) {
+                const localCutoff = new Date(result.cutoff);
+                const cutoffStr = localCutoff.toLocaleString('zh-CN', { year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' });
+                msg = `没有符合条件的记录（共 ${result.total_done || 0} 条已完成，截止时间 ${cutoffStr}）`;
+            }
+            showToast(msg, 'info');
+        }
+    } catch (err) {
+        showToast('归档失败: ' + err.message, 'error');
+    }
+}
+
+async function loadDevLogArchives() {
+    const modal = document.getElementById('devlog-archive-modal');
+    const body = document.getElementById('devlog-archive-body');
+    if (!modal || !body) return;
+
+    body.innerHTML = '<p class="text-muted" style="text-align:center;padding:24px;">加载中...</p>';
+    modal.classList.remove('hidden');
+
+    try {
+        const data = await API.get('/api/devlog/archives');
+        const dates = data.dates || [];
+        if (dates.length === 0) {
+            body.innerHTML = '<p class="text-muted" style="text-align:center;padding:24px;">暂无归档记录</p>';
+            return;
+        }
+        body.innerHTML = dates.map(d => {
+            const formatted = d.length === 8
+                ? `${d.substring(0,4)}-${d.substring(4,6)}-${d.substring(6,8)}`
+                : d;
+            return `<div class="devlog-archive-date" data-date="${escapeHtml(d)}" style="padding:10px 12px;border-bottom:1px solid var(--gray-200);cursor:pointer;display:flex;align-items:center;gap:8px;">
+                <span style="font-size:14px;color:var(--gray-500);">&#9654;</span>
+                <span style="font-weight:500;">${escapeHtml(formatted)}</span>
+            </div>
+            <div class="devlog-archive-records hidden" id="devlog-archive-records-${escapeHtml(d)}" style="padding:0 12px;background:var(--gray-50);"></div>`;
+        }).join('');
+    } catch (err) {
+        body.innerHTML = `<p class="text-muted" style="text-align:center;padding:24px;">加载失败: ${escapeHtml(err.message)}</p>`;
+    }
+}
+
+async function loadDevLogArchiveDetail(dateStr) {
+    const container = document.getElementById('devlog-archive-records-' + dateStr);
+    if (!container) return;
+
+    // Toggle: if already visible, hide it
+    if (!container.classList.contains('hidden')) {
+        container.classList.add('hidden');
+        return;
+    }
+
+    container.innerHTML = '<p class="text-muted" style="padding:12px;">加载中...</p>';
+    container.classList.remove('hidden');
+
+    try {
+        const data = await API.get('/api/devlog/archives/' + dateStr);
+        const records = data.records || [];
+        if (records.length === 0) {
+            container.innerHTML = '<p class="text-muted" style="padding:12px;">无记录</p>';
+            return;
+        }
+        const statusLabels = { pending: '待处理', in_progress: '进行中', done: '已完成' };
+        container.innerHTML = records.map(r => {
+            const tags = [];
+            if (r.important) tags.push('<span class="badge badge-error">重要</span>');
+            if (r.urgent) tags.push('<span class="badge badge-warning">优先</span>');
+            const tagStr = tags.length ? ' ' + tags.join(' ') : '';
+            return `<div style="padding:8px 0;border-bottom:1px solid var(--gray-200);font-size:13px;line-height:1.5;">
+                <div style="white-space:pre-wrap;color:var(--gray-700);">${escapeHtml(r.content)}</div>
+                <div style="margin-top:4px;color:var(--gray-400);font-size:12px;">
+                    ${escapeHtml(statusLabels[r.status] || r.status)}${tagStr}
+                    &nbsp;&middot;&nbsp;完成于 ${formatTime(r.completed_at)}
+                </div>
+            </div>`;
+        }).join('');
+    } catch (err) {
+        container.innerHTML = `<p class="text-muted" style="padding:12px;">加载失败: ${escapeHtml(err.message)}</p>`;
+    }
+}
+
+function closeDevLogArchiveModal() {
+    document.getElementById('devlog-archive-modal')?.classList.add('hidden');
+}
+
+// ============================================================
+// Initialization
+// ============================================================
+document.addEventListener('DOMContentLoaded', () => {
+    // Navigation click handlers
+    document.querySelectorAll('.nav-item').forEach((item) => {
+        item.addEventListener('click', (e) => {
+            e.preventDefault();
+            const page = item.dataset.page;
+            if (page) navigate(page);
+        });
+    });
+
+    // New call form
+    const newCallForm = document.getElementById('new-call-form');
+    if (newCallForm) {
+        newCallForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            submitNewCall();
+        });
+    }
+
+    // New call button
+    const newCallBtn = document.getElementById('btn-new-call');
+    if (newCallBtn) newCallBtn.addEventListener('click', showNewCallForm);
+
+    // New SMS form
+    const newSMSForm = document.getElementById('new-sms-form');
+    if (newSMSForm) {
+        newSMSForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            submitNewSMS();
+        });
+    }
+
+    // New SMS button
+    const newSMSBtn = document.getElementById('btn-new-sms');
+    if (newSMSBtn) newSMSBtn.addEventListener('click', showNewSMSForm);
+
+    // New contact form
+    const newContactForm = document.getElementById('new-contact-form');
+    if (newContactForm) {
+        newContactForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            submitNewContact();
+        });
+    }
+
+    // Edit contact form
+    const editContactForm = document.getElementById('edit-contact-form');
+    if (editContactForm) {
+        editContactForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            updateContact();
+        });
+    }
+
+    // New contact button
+    const newContactBtn = document.getElementById('btn-new-contact');
+    if (newContactBtn) newContactBtn.addEventListener('click', showNewContactForm);
+
+    // Sync contacts button
+    const syncBtn = document.getElementById('btn-sync-contacts');
+    if (syncBtn) syncBtn.addEventListener('click', syncContacts);
+
+    // Contact search input
+    const contactSearch = document.getElementById('contact-search-input');
+    if (contactSearch) {
+        contactSearch.addEventListener('input', (e) => {
+            onContactSearch(e.target.value);
+        });
+    }
+
+    // Config auto-save: listen for changes on all form fields
+    const configForm = document.getElementById('form-config');
+    if (configForm) {
+        configForm.addEventListener('submit', (e) => e.preventDefault());
+        configForm.querySelectorAll('input, select, textarea').forEach((field) => {
+            if (field.type === 'range') {
+                field.addEventListener('change', _debouncedSaveConfig);
+            } else if (field.tagName === 'SELECT') {
+                field.addEventListener('change', _debouncedSaveConfig);
+            } else {
+                field.addEventListener('input', _debouncedSaveConfig);
+            }
+        });
+    }
+
+    // Provider tabs — also trigger auto-save on tab switch
+    document.querySelectorAll('.provider-tab').forEach((tab) => {
+        tab.addEventListener('click', () => {
+            switchProviderTab(tab.dataset.provider);
+            _debouncedSaveConfig();
+        });
+    });
+
+    // Basic Info: AI phone & owner add buttons
+    const btnAddAiPhone = document.getElementById('btn-add-ai-phone');
+    if (btnAddAiPhone) btnAddAiPhone.addEventListener('click', _addAiPhone);
+    const aiPhoneInput = document.getElementById('ai-phone-input');
+    if (aiPhoneInput) aiPhoneInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); _addAiPhone(); }
+    });
+    const btnAddOwner = document.getElementById('btn-add-owner');
+    if (btnAddOwner) btnAddOwner.addEventListener('click', _addOwner);
+    const ownerPhoneInput = document.getElementById('owner-phone-input');
+    if (ownerPhoneInput) ownerPhoneInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); _addOwner(); }
+    });
+
+    // Refresh models buttons (HTML uses data-action="refresh-models")
+    document.querySelectorAll('[data-action="refresh-models"]').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            const provider = btn.dataset.provider;
+            if (provider) refreshModels(provider);
+        });
+    });
+
+    // Temperature slider live display
+    const tempSlider = document.getElementById('llm-temperature');
+    if (tempSlider) {
+        tempSlider.addEventListener('input', () => {
+            const span = document.getElementById('llm-temperature-value');
+            if (span) span.textContent = tempSlider.value;
+        });
+    }
+
+    // Chat test dialog
+    const testModelBtn = document.getElementById('btn-test-model');
+    if (testModelBtn) testModelBtn.addEventListener('click', openChatTest);
+
+    const chatTestCloseBtn = document.getElementById('chat-test-close');
+    if (chatTestCloseBtn) chatTestCloseBtn.addEventListener('click', closeChatTest);
+
+    const chatTestOverlay = document.getElementById('chat-test-overlay');
+    if (chatTestOverlay) {
+        chatTestOverlay.addEventListener('click', (e) => {
+            if (e.target === chatTestOverlay) closeChatTest();
+        });
+    }
+
+    const chatTestSendBtn = document.getElementById('chat-test-send');
+    if (chatTestSendBtn) chatTestSendBtn.addEventListener('click', sendChatTestMessage);
+
+    const chatTestInput = document.getElementById('chat-test-input');
+    if (chatTestInput) {
+        chatTestInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendChatTestMessage();
+            }
+        });
+        // Auto-resize textarea
+        chatTestInput.addEventListener('input', () => {
+            chatTestInput.style.height = 'auto';
+            chatTestInput.style.height = Math.min(chatTestInput.scrollHeight, 120) + 'px';
+        });
+    }
+
+    const chatTestRefreshBtn = document.getElementById('chat-test-refresh');
+    if (chatTestRefreshBtn) chatTestRefreshBtn.addEventListener('click', refreshChatTestModels);
+
+    const chatTestClearBtn = document.getElementById('chat-test-clear');
+    if (chatTestClearBtn) chatTestClearBtn.addEventListener('click', () => {
+        chatTestMessages = [];
+        const container = document.getElementById('chat-test-messages');
+        if (container) container.innerHTML = '<div class="chat-test-empty">选择模型后开始对话</div>';
+    });
+
+    const chatTestProviderSelect = document.getElementById('chat-test-provider');
+    if (chatTestProviderSelect) {
+        chatTestProviderSelect.addEventListener('change', refreshChatTestModels);
+    }
+
+    // ASR provider switching
+    const asrProviderSelect = document.getElementById('asr-provider');
+    if (asrProviderSelect) {
+        asrProviderSelect.addEventListener('change', () => switchAsrProvider(asrProviderSelect.value));
+    }
+
+    // TTS provider switching
+    const ttsProviderSelect = document.getElementById('tts-provider');
+    if (ttsProviderSelect) {
+        ttsProviderSelect.addEventListener('change', () => switchTtsProvider(ttsProviderSelect.value));
+    }
+    // TTS slider value displays
+    ['tts-volc-speed', 'tts-volc-volume'].forEach(id => {
+        const el = document.getElementById(id);
+        if (el) el.addEventListener('input', () => {
+            const valEl = document.getElementById(id + '-val');
+            if (valEl) valEl.textContent = el.value;
+        });
+    });
+    ['tts-tc-speed', 'tts-tc-volume'].forEach(id => {
+        const el = document.getElementById(id);
+        if (el) el.addEventListener('input', () => {
+            const valEl = document.getElementById(id + '-val');
+            if (valEl) valEl.textContent = el.value;
+        });
+    });
+
+    // TTS Test dialog
+    const btnTestTts = document.getElementById('btn-test-tts');
+    if (btnTestTts) btnTestTts.addEventListener('click', openTtsTest);
+
+    const ttsTestCloseBtn = document.getElementById('tts-test-close');
+    if (ttsTestCloseBtn) ttsTestCloseBtn.addEventListener('click', closeTtsTest);
+
+    const ttsTestOverlay = document.getElementById('tts-test-overlay');
+    if (ttsTestOverlay) {
+        ttsTestOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsTestOverlay) closeTtsTest();
+        });
+    }
+
+    const ttsTestPlayBtn = document.getElementById('tts-test-play');
+    if (ttsTestPlayBtn) ttsTestPlayBtn.addEventListener('click', runTtsTest);
+
+    const ttsTestStopBtn = document.getElementById('tts-test-stop');
+    if (ttsTestStopBtn) ttsTestStopBtn.addEventListener('click', _stopTtsTestAudio);
+
+    const ttsTestProviderSel = document.getElementById('tts-test-provider');
+    if (ttsTestProviderSel) {
+        ttsTestProviderSel.addEventListener('change', _updateTtsTestVoices);
+    }
+
+    const ttsTestSpeedSlider = document.getElementById('tts-test-speed');
+    if (ttsTestSpeedSlider) {
+        ttsTestSpeedSlider.addEventListener('input', () => {
+            const valEl = document.getElementById('tts-test-speed-val');
+            if (valEl) valEl.textContent = ttsTestSpeedSlider.value + 'x';
+        });
+    }
+
+    // ASR Test dialog
+    const btnTestAsr = document.getElementById('btn-test-asr');
+    if (btnTestAsr) btnTestAsr.addEventListener('click', openAsrTest);
+
+    const asrTestCloseBtn = document.getElementById('asr-test-close');
+    if (asrTestCloseBtn) asrTestCloseBtn.addEventListener('click', closeAsrTest);
+
+    const asrTestOverlay = document.getElementById('asr-test-overlay');
+    if (asrTestOverlay) {
+        asrTestOverlay.addEventListener('click', (e) => {
+            if (e.target === asrTestOverlay) closeAsrTest();
+        });
+    }
+
+    const asrTestStartBtn = document.getElementById('asr-test-start');
+    if (asrTestStartBtn) asrTestStartBtn.addEventListener('click', startAsrRecording);
+
+    const asrTestStopBtn = document.getElementById('asr-test-stop');
+    if (asrTestStopBtn) asrTestStopBtn.addEventListener('click', stopAsrRecording);
+
+    const asrTestPlayBtn = document.getElementById('asr-test-play');
+    if (asrTestPlayBtn) asrTestPlayBtn.addEventListener('click', playAsrRecording);
+
+    // Real-time restart when ASR test params change during recording
+    const asrProviderSel = document.getElementById('asr-test-provider');
+    if (asrProviderSel) {
+        asrProviderSel.addEventListener('change', () => {
+            _updateEngineOptions(asrProviderSel.value);
+            _restartAsrSession();
+        });
+    }
+    ['asr-test-resid', 'asr-test-samplerate', 'asr-test-mic'].forEach(id => {
+        const el = document.getElementById(id);
+        if (el) el.addEventListener('change', () => _restartAsrSession());
+    });
+
+    // Audio diagnostic dialog
+    const btnAudioDiag = document.getElementById('btn-audio-diag');
+    if (btnAudioDiag) btnAudioDiag.addEventListener('click', openAudioDiag);
+    const audioDiagClose = document.getElementById('audio-diag-close');
+    if (audioDiagClose) audioDiagClose.addEventListener('click', closeAudioDiag);
+    const audioDiagOverlay = document.getElementById('audio-diag-overlay');
+    if (audioDiagOverlay) audioDiagOverlay.addEventListener('click', (e) => { if (e.target === audioDiagOverlay) closeAudioDiag(); });
+    const audioDiagRun = document.getElementById('audio-diag-run');
+    if (audioDiagRun) audioDiagRun.addEventListener('click', runAudioDiag);
+    const audioDiagStop = document.getElementById('audio-diag-stop');
+    if (audioDiagStop) audioDiagStop.addEventListener('click', stopAudioDiag);
+    const audioDiagPlaySP = document.getElementById('audio-diag-play-sp');
+    if (audioDiagPlaySP) audioDiagPlaySP.addEventListener('click', playDiagSP);
+    const audioDiagPlayMR = document.getElementById('audio-diag-play-mr');
+    if (audioDiagPlayMR) audioDiagPlayMR.addEventListener('click', playDiagMR);
+
+    // Mic gain slider
+    const micGainSlider = document.getElementById('asr-mic-gain');
+    if (micGainSlider) {
+        micGainSlider.addEventListener('input', () => {
+            const val = parseInt(micGainSlider.value);
+            const label = document.getElementById('asr-mic-gain-val');
+            if (label) label.textContent = val + '%';
+            localStorage.setItem('asr-mic-gain', val);
+            // Update whichever pipeline is active (shared gain control)
+            if (asrTestUserGainNode) asrTestUserGainNode.gain.value = val / 100;
+            if (vcGainNode) vcGainNode.gain.value = val / 100;
+        });
+    }
+    // Mute toggle
+    const muteBtn = document.getElementById('asr-mute-btn');
+    if (muteBtn) {
+        muteBtn.addEventListener('click', () => {
+            asrTestMuted = !asrTestMuted;
+            muteBtn.classList.toggle('muted', asrTestMuted);
+            // Mute/unmute the media stream track
+            if (asrTestMediaStream) {
+                asrTestMediaStream.getAudioTracks().forEach(t => { t.enabled = !asrTestMuted; });
+            }
+        });
+    }
+
+    // Bluetooth buttons
+    const scanBtn = document.getElementById('btn-bt-scan');
+    if (scanBtn) scanBtn.addEventListener('click', scanDevices);
+
+    const btConnectBtn = document.getElementById('btn-bt-connect');
+    if (btConnectBtn) {
+        btConnectBtn.addEventListener('click', () => {
+            const address = _val('cfg-bt-device-address') || prompt('请输入设备地址 (MAC)');
+            if (address) connectDevice(address);
+        });
+    }
+
+    const btDisconnectBtn = document.getElementById('btn-bt-disconnect');
+    if (btDisconnectBtn) btDisconnectBtn.addEventListener('click', disconnectDevice);
+
+    // Call detail back button
+    const backBtn = document.getElementById('btn-call-detail-back');
+    if (backBtn) backBtn.addEventListener('click', closeCallDetail);
+
+    // Modal close handlers — close when clicking backdrop or close button
+    document.querySelectorAll('.modal-backdrop, .modal-close').forEach((el) => {
+        el.addEventListener('click', (e) => {
+            const modal = e.target.closest('.modal');
+            if (modal) closeModal(modal.id);
+        });
+    });
+
+    // Close modals with Escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            document.querySelectorAll('.modal.modal-open').forEach((modal) => {
+                closeModal(modal.id);
+            });
+        }
+    });
+
+    // Voice chat buttons
+    const vcStartBtn = document.getElementById('vc-btn-start');
+    if (vcStartBtn) vcStartBtn.addEventListener('click', startVoiceChat);
+
+    const vcStopBtn = document.getElementById('vc-btn-stop');
+    if (vcStopBtn) vcStopBtn.addEventListener('click', stopVoiceChat);
+
+    // Voice chat system prompt auto-save
+    const vcPromptEl = document.getElementById('vc-system-prompt');
+    if (vcPromptEl) {
+        const saved = localStorage.getItem('vc-system-prompt');
+        if (saved) vcPromptEl.value = saved;
+        vcPromptEl.addEventListener('input', () => {
+            localStorage.setItem('vc-system-prompt', vcPromptEl.value);
+            // Send live update to backend if connected
+            if (vcWs && vcWs.readyState === WebSocket.OPEN) {
+                vcWs.send(JSON.stringify({ type: 'update_system_prompt', system_prompt: vcPromptEl.value.trim() }));
+                vcLog('系统提示词已更新（下次 LLM 调用生效）');
+            }
+        });
+    }
+
+    // Voice chat VAD params — live update + auto-save
+    function _vcSendVadUpdate() {
+        const threshold = parseInt(document.getElementById('vc-vad-threshold')?.value) || 300;
+        const silence = parseInt(document.getElementById('vc-vad-silence')?.value) || 800;
+        const minSpeech = parseInt(document.getElementById('vc-vad-min-speech')?.value) || 250;
+        // Save to localStorage
+        localStorage.setItem('vc-vad-threshold', threshold);
+        localStorage.setItem('vc-vad-silence', silence);
+        localStorage.setItem('vc-vad-min-speech', minSpeech);
+        // Save to backend config
+        API.post('/api/config', {
+            vad: { energy_threshold: threshold, silence_threshold_ms: silence, min_speech_ms: minSpeech }
+        }).catch(() => {});
+        // Send live update via WebSocket if connected
+        if (vcWs && vcWs.readyState === WebSocket.OPEN) {
+            vcWs.send(JSON.stringify({
+                type: 'update_vad',
+                energy_threshold: threshold,
+                silence_threshold_ms: silence,
+                min_speech_ms: minSpeech,
+            }));
+            vcLog(`VAD 参数已更新: 阈值=${threshold} 静音=${silence}ms 最短=${minSpeech}ms`, 'info');
+        }
+    }
+    ['vc-vad-threshold', 'vc-vad-silence', 'vc-vad-min-speech'].forEach(id => {
+        const el = document.getElementById(id);
+        if (el) el.addEventListener('change', _vcSendVadUpdate);
+    });
+
+    // Voice chat phone simulation — auto-save
+    ['vc-phone-direction', 'vc-phone-number', 'vc-phone-name'].forEach(id => {
+        const el = document.getElementById(id);
+        if (!el) return;
+        const saved = localStorage.getItem(id);
+        if (saved !== null) el.value = saved;
+        el.addEventListener('change', () => localStorage.setItem(id, el.value));
+        if (el.tagName === 'INPUT') el.addEventListener('input', () => localStorage.setItem(id, el.value));
+    });
+
+    // Dev Log
+    const devlogForm = document.getElementById('form-new-devlog');
+    if (devlogForm) devlogForm.addEventListener('submit', submitDevLog);
+
+    const devlogFilterStatus = document.getElementById('devlog-filter-status');
+    if (devlogFilterStatus) devlogFilterStatus.addEventListener('change', () => { devlogPage = 1; loadDevLog(); });
+
+    document.getElementById('devlog-detail-close')?.addEventListener('click', closeDevLogDetail);
+    document.getElementById('devlog-detail-save')?.addEventListener('click', saveDevLogStatus);
+    document.getElementById('devlog-detail-delete')?.addEventListener('click', () => deleteDevLog(devlogCurrentId));
+
+    // Delegated click handlers for devlog table
+    document.getElementById('devlog-tbody')?.addEventListener('click', (e) => {
+        const viewLink = e.target.closest('.devlog-view-link');
+        if (viewLink) { e.preventDefault(); openDevLogDetail(viewLink.dataset.id); return; }
+        const editLink = e.target.closest('.devlog-edit-link');
+        if (editLink) {
+            e.preventDefault();
+            _devlogStartEdit(
+                editLink.dataset.id,
+                editLink.dataset.content,
+                editLink.dataset.important === '1',
+                editLink.dataset.urgent === '1',
+                editLink.dataset.type,
+            );
+        }
+    });
+
+    // Close devlog modal on overlay click
+    document.getElementById('devlog-detail-modal')?.addEventListener('click', (e) => {
+        if (e.target.id === 'devlog-detail-modal') closeDevLogDetail();
+    });
+
+    // Dev Log Archive
+    document.getElementById('devlog-btn-archive')?.addEventListener('click', openArchiveCutoffModal);
+    document.getElementById('devlog-btn-view-archives')?.addEventListener('click', loadDevLogArchives);
+    document.getElementById('devlog-archive-close')?.addEventListener('click', closeDevLogArchiveModal);
+    document.getElementById('devlog-archive-modal')?.addEventListener('click', (e) => {
+        if (e.target.id === 'devlog-archive-modal') closeDevLogArchiveModal();
+    });
+    document.getElementById('devlog-archive-cutoff-close')?.addEventListener('click', closeArchiveCutoffModal);
+    document.getElementById('devlog-archive-cutoff-cancel')?.addEventListener('click', closeArchiveCutoffModal);
+    document.getElementById('devlog-archive-cutoff-confirm')?.addEventListener('click', confirmArchiveDevLog);
+    document.getElementById('devlog-archive-cutoff-modal')?.addEventListener('click', (e) => {
+        if (e.target.id === 'devlog-archive-cutoff-modal') closeArchiveCutoffModal();
+    });
+    // Delegated click for archive date items
+    document.getElementById('devlog-archive-body')?.addEventListener('click', (e) => {
+        const dateEl = e.target.closest('.devlog-archive-date');
+        if (dateEl) loadDevLogArchiveDetail(dateEl.dataset.date);
+    });
+
+    // Navigate to last active page (or dashboard)
+    navigate(localStorage.getItem('activePage') || 'dashboard');
+
+    // Initial status bar update
+    updateStatusBar();
+});