lobstakit-cloud 1.0.0

package/public/js/manage.js

@@ -0,0 +1,1274 @@
+/**
+ * LobstaKit Cloud — Management Dashboard
+ */
+
+// ─── Auth Helpers ────────────────────────────────────────────
+
+function authHeaders(extra) {
+    const token = localStorage.getItem('lobstakit_token');
+    const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+    return extra ? Object.assign(headers, extra) : headers;
+}
+
+function authFetchOpts(opts) {
+    opts = opts || {};
+    opts.headers = authHeaders(opts.headers);
+    return opts;
+}
+
+async function logout() {
+    const token = localStorage.getItem('lobstakit_token');
+    if (token) {
+        try {
+            await fetch('/api/auth/logout', {
+                method: 'POST',
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+        } catch (e) { /* ignore */ }
+    }
+    localStorage.removeItem('lobstakit_token');
+    window.location.href = '/login.html';
+}
+
+async function loadAccountEmail() {
+    try {
+        const res = await fetch('/api/auth/status', { headers: authHeaders() });
+        const data = await res.json();
+        const emailEl = document.getElementById('account-email');
+        if (emailEl && data.email) {
+            emailEl.value = data.email;
+        }
+    } catch (e) { /* ignore */ }
+}
+
+async function changePassword() {
+    const currentPw = document.getElementById('current-password').value;
+    const newEmail = document.getElementById('new-email').value.trim();
+    const newPw = document.getElementById('new-password').value;
+    const confirmPw = document.getElementById('confirm-new-password').value;
+    const errorEl = document.getElementById('password-change-error');
+    const successEl = document.getElementById('password-change-success');
+    const btn = document.getElementById('btn-change-password');
+
+    errorEl.classList.add('hidden');
+    successEl.classList.add('hidden');
+
+    if (!currentPw) { errorEl.textContent = 'Current password is required'; errorEl.classList.remove('hidden'); return; }
+    
+    // Must change at least something
+    if (!newPw && !newEmail) { errorEl.textContent = 'Enter a new email or new password to update'; errorEl.classList.remove('hidden'); return; }
+    
+    // Validate new email if provided
+    if (newEmail && !newEmail.includes('@')) { errorEl.textContent = 'Please enter a valid email address'; errorEl.classList.remove('hidden'); return; }
+    
+    // Validate new password if provided
+    if (newPw && newPw.length < 6) { errorEl.textContent = 'New password must be at least 6 characters'; errorEl.classList.remove('hidden'); return; }
+    if (newPw && newPw !== confirmPw) { errorEl.textContent = 'Passwords do not match'; errorEl.classList.remove('hidden'); return; }
+
+    btn.disabled = true;
+    btn.textContent = 'Updating...';
+
+    const body = { currentPassword: currentPw };
+    if (newPw) body.newPassword = newPw;
+    if (newEmail) body.newEmail = newEmail;
+
+    try {
+        const res = await fetch('/api/auth/change', {
+            method: 'POST',
+            headers: authHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify(body)
+        });
+        const data = await res.json();
+
+        if (res.ok && data.status === 'ok') {
+            if (newPw) {
+                successEl.textContent = 'Account updated! Please log in again.';
+                successEl.classList.remove('hidden');
+                // Sessions invalidated — redirect to login after a moment
+                setTimeout(() => {
+                    localStorage.removeItem('lobstakit_token');
+                    window.location.href = '/login.html';
+                }, 2000);
+            } else {
+                successEl.textContent = 'Email updated successfully!';
+                successEl.classList.remove('hidden');
+                // Reload account email display
+                loadAccountEmail();
+            }
+            document.getElementById('current-password').value = '';
+            document.getElementById('new-email').value = '';
+            document.getElementById('new-password').value = '';
+            document.getElementById('confirm-new-password').value = '';
+        } else {
+            errorEl.textContent = data.error || 'Failed to update account';
+            errorEl.classList.remove('hidden');
+        }
+    } catch (e) {
+        errorEl.textContent = 'Connection error';
+        errorEl.classList.remove('hidden');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Update Account';
+    }
+}
+
+// ─── Init ────────────────────────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', async () => {
+    // Auth check
+    const token = localStorage.getItem('lobstakit_token');
+    if (!token) {
+        window.location.href = '/login.html';
+        return;
+    }
+    try {
+        const authRes = await fetch('/api/auth/status', {
+            headers: { 'Authorization': `Bearer ${token}` }
+        });
+        const authData = await authRes.json();
+        if (!authData.authenticated) {
+            localStorage.removeItem('lobstakit_token');
+            window.location.href = '/login.html';
+            return;
+        }
+    } catch (e) {
+        // If we can't reach the server, still try to load
+    }
+
+    fetchStatus();
+    refreshLogs();
+    refreshSecurityStatus();
+    refreshTailscaleStatus();
+    refreshChannels();
+    refreshMemoryStatus();
+    refreshGatewayInfo();
+    loadAccountEmail();
+
+    // Auto-refresh
+    setInterval(fetchStatus, 10000);
+    setInterval(refreshLogs, 15000);
+    setInterval(refreshSecurityStatus, 30000);
+    setInterval(refreshTailscaleStatus, 30000);
+    setInterval(refreshChannels, 30000);
+    setInterval(refreshMemoryStatus, 30000);
+    setInterval(refreshGatewayInfo, 30000);
+});
+
+// ─── Gateway Status ──────────────────────────────────────────
+
+async function fetchStatus() {
+    try {
+        const statusRes = await fetch('/api/status', { headers: authHeaders() });
+        const statusData = await statusRes.json();
+
+        let gatewayRunning = statusData.gatewayRunning;
+        try {
+            const gwRes = await fetch('/api/gateway-status', { headers: authHeaders() });
+            const gwData = await gwRes.json();
+            gatewayRunning = gwData.running;
+        } catch (e) {
+            // Use status data fallback
+        }
+
+        updateDashboard(statusData, gatewayRunning);
+    } catch (err) {
+        console.error('Failed to fetch status:', err);
+    }
+}
+
+function updateDashboard(data, gatewayRunning) {
+    // Gateway status
+    const gatewayEl = document.getElementById('gateway-status');
+    if (gatewayRunning) {
+        gatewayEl.textContent = 'Running';
+        gatewayEl.className = 'font-semibold text-lg text-green-400';
+    } else {
+        gatewayEl.textContent = 'Stopped';
+        gatewayEl.className = 'font-semibold text-lg text-red-400';
+    }
+
+    // Config status
+    const configEl = document.getElementById('config-status');
+    if (data.configured) {
+        configEl.textContent = 'Ready';
+        configEl.className = 'font-semibold text-lg text-green-400';
+    } else {
+        configEl.textContent = 'Not Set';
+        configEl.className = 'font-semibold text-lg text-yellow-400';
+    }
+
+    // Domain
+    const domainEl = document.getElementById('domain-status');
+    if (data.subdomain) {
+        domainEl.textContent = data.subdomain;
+        domainEl.className = 'font-semibold text-lg text-lobsta-light truncate max-w-[160px]';
+    } else {
+        domainEl.textContent = 'Not set';
+        domainEl.className = 'font-semibold text-lg text-gray-400';
+    }
+
+    // Health status
+    const healthEl = document.getElementById('health-status');
+    if (gatewayRunning && data.configured) {
+        healthEl.textContent = 'Healthy';
+        healthEl.className = 'font-semibold text-lg text-green-400';
+    } else if (data.configured && !gatewayRunning) {
+        healthEl.textContent = 'Degraded';
+        healthEl.className = 'font-semibold text-lg text-yellow-400';
+    } else {
+        healthEl.textContent = 'Offline';
+        healthEl.className = 'font-semibold text-lg text-gray-400';
+    }
+
+    // Config sidebar info
+    document.getElementById('info-model').textContent = formatModel(data.model) || '—';
+    document.getElementById('info-channel').textContent = data.channel ? capitalize(data.channel) : '—';
+    document.getElementById('info-domain').textContent = data.subdomain || '—';
+}
+
+// ─── Logs ────────────────────────────────────────────────────
+
+async function refreshLogs() {
+    try {
+        const res = await fetch('/api/logs?lines=50', { headers: authHeaders() });
+        const data = await res.json();
+        const logViewer = document.getElementById('log-viewer');
+        logViewer.textContent = data.logs || 'No logs available';
+        logViewer.scrollTop = logViewer.scrollHeight;
+    } catch (err) {
+        console.error('Failed to fetch logs:', err);
+        document.getElementById('log-viewer').textContent = 'Failed to load logs';
+    }
+}
+
+// ─── Actions ─────────────────────────────────────────────────
+
+async function restartGateway() {
+    const btn = document.getElementById('btn-restart');
+    btn.disabled = true;
+    btn.textContent = '🔄 Restarting...';
+    showToast('Restarting gateway...', 'info');
+
+    try {
+        const res = await fetch('/api/restart', authFetchOpts({ method: 'POST' }));
+        const data = await res.json();
+
+        if (data.success) {
+            showToast('Gateway restarted successfully', 'success');
+            btn.textContent = '✓ Restarted';
+            setTimeout(() => {
+                btn.textContent = '🔄 Restart Gateway';
+                btn.disabled = false;
+                fetchStatus();
+                refreshLogs();
+            }, 2000);
+        } else {
+            showToast(data.error || 'Restart failed', 'error');
+            btn.textContent = '✗ Failed';
+            setTimeout(() => {
+                btn.textContent = '🔄 Restart Gateway';
+                btn.disabled = false;
+            }, 2000);
+        }
+    } catch (err) {
+        showToast('Network error', 'error');
+        btn.textContent = '✗ Error';
+        setTimeout(() => {
+            btn.textContent = '🔄 Restart Gateway';
+            btn.disabled = false;
+        }, 2000);
+    }
+}
+
+function refreshAll() {
+    showToast('Refreshing...', 'info');
+    fetchStatus();
+    refreshLogs();
+    refreshSecurityStatus();
+    refreshTailscaleStatus();
+    refreshChannels();
+    refreshMemoryStatus();
+    refreshGatewayInfo();
+    setTimeout(() => showToast('Dashboard updated', 'success'), 500);
+}
+
+// ─── Security Status ─────────────────────────────────────────
+
+async function refreshSecurityStatus() {
+    try {
+        const res = await fetch('/api/security/status', { headers: authHeaders() });
+        const data = await res.json();
+        updateSecurityUI(data);
+    } catch (err) {
+        console.error('Failed to fetch security status:', err);
+    }
+}
+
+function updateSecurityUI(data) {
+    // Update each checklist item
+    setSecurityItem('firewall', data.firewall?.active, data.firewall?.installed);
+    setSecurityItem('fail2ban', data.fail2ban?.active, data.fail2ban?.installed);
+    setSecurityItem('ssh', data.ssh?.hardened, data.ssh?.hardened);
+    setSecurityItem('kernel', data.kernel?.hardened, data.kernel?.hardened);
+    setSecurityItem('updates', data.autoUpdates?.installed, data.autoUpdates?.installed);
+    setSecurityItem('tailscale', data.tailscale?.installed, data.tailscale?.installed);
+
+    // Update score badge
+    const score = data.score || { passed: 0, total: 6 };
+    const badge = document.getElementById('security-badge');
+    const quickStatus = document.getElementById('security-quick-status');
+
+    if (score.passed === score.total) {
+        badge.textContent = score.passed + '/' + score.total + ' ✓';
+        badge.className = 'card-header-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-400';
+        if (quickStatus) {
+            quickStatus.textContent = score.passed + '/' + score.total;
+            quickStatus.className = 'font-semibold text-lg text-green-400';
+        }
+    } else if (score.passed >= Math.ceil(score.total / 2)) {
+        badge.textContent = score.passed + '/' + score.total;
+        badge.className = 'card-header-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-500/20 text-yellow-400';
+        if (quickStatus) {
+            quickStatus.textContent = score.passed + '/' + score.total;
+            quickStatus.className = 'font-semibold text-lg text-yellow-400';
+        }
+    } else {
+        badge.textContent = score.passed + '/' + score.total;
+        badge.className = 'card-header-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-500/20 text-red-400';
+        if (quickStatus) {
+            quickStatus.textContent = score.passed + '/' + score.total;
+            quickStatus.className = 'font-semibold text-lg text-red-400';
+        }
+    }
+
+    // Show/hide harden button
+    const hardenSection = document.getElementById('security-harden-section');
+    const resultSection = document.getElementById('security-harden-result');
+    if (score.passed < score.total) {
+        hardenSection.classList.remove('hidden');
+    } else {
+        hardenSection.classList.add('hidden');
+        resultSection.classList.add('hidden');
+    }
+}
+
+function setSecurityItem(name, active, installed) {
+    const icon = document.getElementById('sec-' + name + '-icon');
+    const badge = document.getElementById('sec-' + name + '-badge');
+    if (!icon || !badge) return;
+
+    if (active) {
+        icon.textContent = '✓';
+        icon.className = 'text-lg text-green-400';
+        badge.textContent = 'Active';
+        badge.className = 'text-xs font-medium px-2 py-0.5 rounded bg-green-500/20 text-green-400';
+    } else if (installed) {
+        icon.textContent = '⚠';
+        icon.className = 'text-lg text-yellow-400';
+        badge.textContent = 'Inactive';
+        badge.className = 'text-xs font-medium px-2 py-0.5 rounded bg-yellow-500/20 text-yellow-400';
+    } else {
+        icon.textContent = '✗';
+        icon.className = 'text-lg text-red-400';
+        badge.textContent = 'Missing';
+        badge.className = 'text-xs font-medium px-2 py-0.5 rounded bg-red-500/20 text-red-400';
+    }
+}
+
+// ─── Harden Server ───────────────────────────────────────────
+
+async function hardenServer() {
+    const btn = document.getElementById('btn-harden');
+    const hardenSection = document.getElementById('security-harden-section');
+    const progressSection = document.getElementById('security-harden-progress');
+    const resultSection = document.getElementById('security-harden-result');
+
+    btn.disabled = true;
+    hardenSection.classList.add('hidden');
+    progressSection.classList.remove('hidden');
+    resultSection.classList.add('hidden');
+
+    try {
+        const res = await fetch('/api/security/harden', {
+            method: 'POST',
+            headers: authHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify({ installTailscale: true })
+        });
+        const data = await res.json();
+
+        progressSection.classList.add('hidden');
+        resultSection.classList.remove('hidden');
+
+        const resultBox = document.getElementById('harden-result-box');
+        const resultTitle = document.getElementById('harden-result-title');
+        const resultText = document.getElementById('harden-result-text');
+
+        if (data.success) {
+            resultBox.className = 'rounded-lg p-4 bg-green-500/10 border border-green-500/20';
+            resultTitle.textContent = '✓ Server hardened successfully';
+            resultTitle.className = 'text-sm font-medium text-green-400';
+            resultText.textContent = data.summary;
+            resultText.className = 'text-xs mt-1 text-lobsta-muted';
+            showToast('Server hardened!', 'success');
+        } else {
+            const failedSteps = (data.results || []).filter(function(r) { return !r.success; });
+            resultBox.className = 'rounded-lg p-4 bg-yellow-500/10 border border-yellow-500/20';
+            resultTitle.textContent = '⚠ Partially hardened';
+            resultTitle.className = 'text-sm font-medium text-yellow-400';
+            var detail = data.summary || '';
+            if (failedSteps.length > 0) {
+                detail += ' — Failed: ' + failedSteps.map(function(s) { return s.step; }).join(', ');
+            }
+            resultText.textContent = detail;
+            resultText.className = 'text-xs mt-1 text-lobsta-muted';
+            showToast(data.summary, 'warning');
+        }
+
+        // Refresh both
+        await refreshSecurityStatus();
+        await refreshTailscaleStatus();
+    } catch (err) {
+        progressSection.classList.add('hidden');
+        hardenSection.classList.remove('hidden');
+        btn.disabled = false;
+        showToast(err.message || 'Hardening failed', 'error');
+    }
+}
+
+// ─── Tailscale ───────────────────────────────────────────────
+
+async function refreshTailscaleStatus() {
+    try {
+        const res = await fetch('/api/tailscale/status', { headers: authHeaders() });
+        const data = await res.json();
+        updateTailscaleUI(data);
+        // Also refresh gateway info when tailscale status changes
+        refreshGatewayInfo();
+    } catch (err) {
+        console.error('Failed to fetch Tailscale status:', err);
+        updateTailscaleUI({ installed: false, connected: false, status: 'error', message: 'Failed to check' });
+    }
+}
+
+var _tailscaleData = null;
+
+function updateTailscaleUI(data) {
+    var statusText = document.getElementById('tailscale-status-text');
+    var statusDetail = document.getElementById('tailscale-status-detail');
+    var connectedSection = document.getElementById('tailscale-connected');
+    var connectForm = document.getElementById('tailscale-connect-form');
+    var notInstalledSection = document.getElementById('tailscale-not-installed');
+
+    // Store tailscale data globally for webchat section
+    _tailscaleData = data;
+
+    if (data.connected) {
+        statusText.textContent = 'Tailscale VPN is active';
+        statusDetail.textContent = data.message || '';
+        connectedSection.classList.remove('hidden');
+        connectForm.classList.add('hidden');
+        notInstalledSection.classList.add('hidden');
+        document.getElementById('tailscale-hostname').textContent = data.hostname || '—';
+        document.getElementById('tailscale-ip').textContent = (data.tailscaleIPs && data.tailscaleIPs[0]) || '—';
+    } else if (data.installed) {
+        statusText.textContent = 'Tailscale installed — not connected';
+        statusDetail.textContent = 'Enter an auth key below to connect';
+        connectedSection.classList.add('hidden');
+        connectForm.classList.remove('hidden');
+        notInstalledSection.classList.add('hidden');
+    } else {
+        statusText.textContent = 'Tailscale is not installed';
+        statusDetail.textContent = data.status === 'error' ? 'Could not check status' : 'Install below or use Harden Server';
+        connectedSection.classList.add('hidden');
+        connectForm.classList.add('hidden');
+        notInstalledSection.classList.remove('hidden');
+    }
+
+    // Update webchat section based on tailscale + serve state
+    updateWebchatSection();
+}
+
+async function installTailscale() {
+    var btn = document.getElementById('btn-ts-install');
+    btn.disabled = true;
+    btn.textContent = '📦 Installing...';
+
+    try {
+        var res = await fetch('/api/tailscale/install', authFetchOpts({ method: 'POST' }));
+        var data = await res.json();
+
+        if (!res.ok) {
+            throw new Error(data.error || 'Install failed');
+        }
+
+        showToast(data.message || 'Tailscale installed!', 'success');
+        await refreshTailscaleStatus();
+        await refreshSecurityStatus();
+    } catch (err) {
+        showToast(err.message || 'Install failed', 'error');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = '📦 Install Tailscale';
+    }
+}
+
+async function connectTailscale() {
+    var keyInput = document.getElementById('tailscale-auth-key');
+    var errorEl = document.getElementById('tailscale-key-error');
+    var btn = document.getElementById('btn-ts-connect');
+    var authKey = keyInput.value.trim();
+
+    // Clear previous errors
+    errorEl.classList.add('hidden');
+    errorEl.textContent = '';
+
+    if (!authKey) {
+        errorEl.textContent = 'Auth key is required';
+        errorEl.classList.remove('hidden');
+        return;
+    }
+
+    if (!authKey.startsWith('tskey-')) {
+        errorEl.textContent = 'Invalid key — Tailscale auth keys start with tskey-auth-';
+        errorEl.classList.remove('hidden');
+        return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = '🔗 Connecting...';
+
+    try {
+        var res = await fetch('/api/tailscale/connect', {
+            method: 'POST',
+            headers: authHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify({ authKey: authKey })
+        });
+
+        var data = await res.json();
+
+        if (!res.ok) {
+            throw new Error(data.error || 'Connection failed');
+        }
+
+        showToast(data.message || 'Connected to Tailscale!', 'success');
+        keyInput.value = '';
+
+        // If the response includes serve data, update webchat immediately
+        if (data.serve) {
+            _tailscaleData = {
+                connected: data.connected,
+                hostname: data.hostname,
+                tailscaleIPs: data.tailscaleIPs,
+                serve: {
+                    active: data.serve.enabled,
+                    dnsName: data.dnsName,
+                    url: data.serve.url,
+                    webchatUrl: data.serve.webchatUrl,
+                    enableUrl: data.serve.enableUrl
+                }
+            };
+            updateWebchatSection();
+
+            if (data.serve.enabled) {
+                showToast('Tailscale Serve configured — Web Chat is ready!', 'success');
+            } else if (data.serve.enableUrl) {
+                showToast('Tailscale Serve needs to be enabled on your tailnet', 'warning');
+            }
+        }
+
+        await refreshTailscaleStatus();
+        await refreshSecurityStatus();
+    } catch (err) {
+        showToast(err.message || 'Failed to connect', 'error');
+        errorEl.textContent = err.message;
+        errorEl.classList.remove('hidden');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = '🔗 Connect to Tailscale';
+    }
+}
+
+async function disconnectTailscale() {
+    var btn = document.getElementById('btn-ts-disconnect');
+    btn.disabled = true;
+    btn.textContent = 'Disconnecting...';
+
+    try {
+        var res = await fetch('/api/tailscale/disconnect', authFetchOpts({ method: 'POST' }));
+        var data = await res.json();
+
+        if (!res.ok) {
+            throw new Error(data.error || 'Disconnect failed');
+        }
+
+        showToast('Tailscale disconnected', 'success');
+        await refreshTailscaleStatus();
+        await refreshSecurityStatus();
+    } catch (err) {
+        showToast(err.message || 'Failed to disconnect', 'error');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Disconnect Tailscale';
+    }
+}
+
+// ─── Channels Management ─────────────────────────────────────
+
+async function refreshChannels() {
+    try {
+        const res = await fetch('/api/channels', { headers: authHeaders() });
+        const data = await res.json();
+        renderChannels(data.channels || []);
+    } catch (err) {
+        console.error('Failed to fetch channels:', err);
+        const list = document.getElementById('channels-list');
+        if (list) list.innerHTML = '<p class="text-sm text-lobsta-muted">Failed to load channels</p>';
+    }
+}
+
+function renderChannels(channels) {
+    const list = document.getElementById('channels-list');
+    if (!list) return;
+
+    let html = '';
+    channels.forEach(ch => {
+        const statusClass = ch.configured ? 'connected' : 'not-configured';
+        const statusText = ch.configured ? '✅ Connected' : '⚪ Not configured';
+        const detail = ch.details && ch.details.summary ? ch.details.summary : '';
+
+        html += '<div class="channel-row">';
+        html += '  <div class="channel-row-info">';
+        html += '    <span class="channel-row-icon">' + escapeHtml(ch.icon) + '</span>';
+        html += '    <div>';
+        html += '      <div class="channel-row-name">' + escapeHtml(ch.name) + '</div>';
+        if (detail) {
+            html += '      <div class="channel-row-detail">' + escapeHtml(detail) + '</div>';
+        }
+        html += '    </div>';
+        html += '  </div>';
+        html += '  <div class="channel-row-status">';
+        html += '    <span class="channel-status-badge ' + statusClass + '">' + statusText + '</span>';
+        html += '  </div>';
+        html += '  <div class="channel-row-actions">';
+        if (ch.id === 'web') {
+            // Web is always active, no actions
+        } else if (ch.configured) {
+            html += '    <button onclick="removeChannel(\'' + ch.id + '\')" class="btn btn-sm btn-secondary text-xs">Remove</button>';
+        } else {
+            html += '    <button onclick="addChannel(\'' + ch.id + '\')" class="btn btn-sm btn-primary text-xs">Add</button>';
+        }
+        html += '  </div>';
+        html += '</div>';
+    });
+
+    list.innerHTML = html || '<p class="text-sm text-lobsta-muted">No channels found</p>';
+}
+
+function addChannel(type) {
+    // Hide all forms first
+    document.querySelectorAll('.channel-inline-form').forEach(el => el.classList.add('hidden'));
+    // Show the relevant form
+    const form = document.getElementById('channel-form-' + type);
+    if (form) form.classList.remove('hidden');
+}
+
+function cancelChannelForm(type) {
+    const form = document.getElementById('channel-form-' + type);
+    if (form) form.classList.add('hidden');
+}
+
+async function saveChannel(type) {
+    let payload = {};
+    let valid = true;
+
+    if (type === 'telegram') {
+        const botToken = document.getElementById('manage-tg-bot-token').value.trim();
+        const userId = document.getElementById('manage-tg-user-id').value.trim();
+        const tokenErr = document.getElementById('manage-tg-token-error');
+        const userErr = document.getElementById('manage-tg-userid-error');
+        tokenErr.classList.add('hidden');
+        userErr.classList.add('hidden');
+
+        if (!botToken) {
+            tokenErr.textContent = 'Bot token is required';
+            tokenErr.classList.remove('hidden');
+            valid = false;
+        } else if (!/^\d+:[A-Za-z0-9_-]+$/.test(botToken)) {
+            tokenErr.textContent = 'Invalid format — should look like 123456789:ABCdef...';
+            tokenErr.classList.remove('hidden');
+            valid = false;
+        }
+        if (!userId) {
+            userErr.textContent = 'User ID is required';
+            userErr.classList.remove('hidden');
+            valid = false;
+        } else if (!/^\d+$/.test(userId)) {
+            userErr.textContent = 'User ID should be a number';
+            userErr.classList.remove('hidden');
+            valid = false;
+        }
+        payload = { botToken, userId };
+    } else if (type === 'discord') {
+        const botToken = document.getElementById('manage-dc-bot-token').value.trim();
+        const serverId = document.getElementById('manage-dc-server-id').value.trim();
+        const tokenErr = document.getElementById('manage-dc-token-error');
+        const serverErr = document.getElementById('manage-dc-serverid-error');
+        tokenErr.classList.add('hidden');
+        serverErr.classList.add('hidden');
+
+        if (!botToken) {
+            tokenErr.textContent = 'Bot token is required';
+            tokenErr.classList.remove('hidden');
+            valid = false;
+        }
+        if (!serverId) {
+            serverErr.textContent = 'Server ID is required';
+            serverErr.classList.remove('hidden');
+            valid = false;
+        } else if (!/^\d+$/.test(serverId)) {
+            serverErr.textContent = 'Server ID should be a number';
+            serverErr.classList.remove('hidden');
+            valid = false;
+        }
+        payload = { botToken, serverId };
+    }
+
+    if (!valid) return;
+
+    const btn = document.getElementById('btn-save-' + type);
+    btn.disabled = true;
+    btn.textContent = 'Saving...';
+
+    try {
+        const res = await fetch('/api/channels/' + type, {
+            method: 'POST',
+            headers: authHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify(payload)
+        });
+        const data = await res.json();
+
+        if (!res.ok) {
+            throw new Error(data.error || 'Failed to save channel');
+        }
+
+        showToast(data.message || type + ' channel configured!', 'success');
+        cancelChannelForm(type);
+        await refreshChannels();
+    } catch (err) {
+        showToast(err.message || 'Failed to save', 'error');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Save & Connect';
+    }
+}
+
+async function removeChannel(type) {
+    if (!confirm('Remove ' + capitalize(type) + ' channel? The gateway will restart.')) return;
+
+    try {
+        const res = await fetch('/api/channels/' + type, authFetchOpts({ method: 'DELETE' }));
+        const data = await res.json();
+
+        if (!res.ok) {
+            throw new Error(data.error || 'Failed to remove channel');
+        }
+
+        showToast(data.message || type + ' channel removed', 'success');
+        await refreshChannels();
+    } catch (err) {
+        showToast(err.message || 'Failed to remove', 'error');
+    }
+}
+
+// ─── Private Memory ──────────────────────────────────────────
+
+async function refreshMemoryStatus() {
+    try {
+        const res = await fetch('/api/memory/status', { headers: authHeaders() });
+        const data = await res.json();
+        updateMemoryUI(data);
+    } catch (err) {
+        console.error('Failed to fetch memory status:', err);
+    }
+}
+
+function updateMemoryUI(data) {
+    var toggle = document.getElementById('memory-toggle');
+    var badge = document.getElementById('memory-badge');
+    var providerText = document.getElementById('memory-provider-text');
+    var modelText = document.getElementById('memory-model-text');
+    var downloadText = document.getElementById('memory-download-text');
+    var modelRow = document.getElementById('memory-model-row');
+    var downloadRow = document.getElementById('memory-download-row');
+    var noteEl = document.getElementById('memory-note');
+    var downloadAction = document.getElementById('memory-download-action');
+
+    if (!toggle) return;
+
+    // Set toggle state (avoid triggering onchange)
+    toggle.checked = data.isPrivate;
+
+    if (data.isPrivate) {
+        // Private / local mode
+        badge.textContent = '🔒 Private';
+        badge.className = 'card-header-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-400';
+
+        providerText.textContent = 'Local (on-device)';
+        modelText.textContent = data.modelName + ' (' + data.modelSize + ')';
+        modelRow.classList.remove('hidden');
+
+        if (data.modelDownloaded) {
+            downloadText.textContent = '✅ Downloaded (' + data.modelSize + ')';
+            downloadText.className = 'text-green-400';
+            noteEl.innerHTML = '<p class="text-xs text-green-400/80">🔒 All memory data stays on your server. Zero external API calls.</p>';
+            if (downloadAction) downloadAction.classList.add('hidden');
+        } else {
+            downloadText.textContent = '⏳ Not yet downloaded';
+            downloadText.className = 'text-yellow-400';
+            noteEl.innerHTML = '<p class="text-xs text-lobsta-muted">💡 Model (~313MB) downloads on first use, or download now. Requires ~512MB RAM.</p>';
+            if (downloadAction && !_downloadPolling) {
+                downloadAction.classList.remove('hidden');
+                var idleEl = document.getElementById('memory-download-idle');
+                var progressEl = document.getElementById('memory-download-progress');
+                var completeEl = document.getElementById('memory-download-complete');
+                var errorEl = document.getElementById('memory-download-error');
+                if (idleEl) idleEl.classList.remove('hidden');
+                if (progressEl) progressEl.classList.add('hidden');
+                if (completeEl) completeEl.classList.add('hidden');
+                if (errorEl) errorEl.classList.add('hidden');
+            }
+        }
+        downloadRow.classList.remove('hidden');
+    } else {
+        // Cloud / remote mode
+        badge.textContent = '☁️ Cloud';
+        badge.className = 'card-header-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-500/20 text-yellow-400';
+
+        var providerLabel = data.provider === 'openai' ? 'OpenAI' : data.provider === 'auto' ? 'Auto-detect (cloud)' : capitalize(data.provider);
+        providerText.textContent = providerLabel;
+        modelRow.classList.add('hidden');
+        downloadRow.classList.add('hidden');
+        if (downloadAction) downloadAction.classList.add('hidden');
+        noteEl.innerHTML = '<p class="text-xs text-lobsta-muted">☁️ Memory embeddings are sent to cloud APIs. Enable Private Memory to keep data on-device.</p>';
+    }
+}
+
+var _memoryToggling = false;
+
+async function handleMemoryToggle(checked) {
+    if (_memoryToggling) return;
+    _memoryToggling = true;
+
+    var toggle = document.getElementById('memory-toggle');
+    var mode = checked ? 'local' : 'remote';
+
+    toggle.disabled = true;
+    showToast('Switching to ' + (checked ? 'private' : 'cloud') + ' memory...', 'info');
+
+    try {
+        var res = await fetch('/api/memory/toggle', {
+            method: 'POST',
+            headers: authHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify({ mode: mode })
+        });
+        var data = await res.json();
+
+        if (!res.ok) {
+            throw new Error(data.error || 'Failed to toggle memory');
+        }
+
+        showToast(data.message || 'Memory mode updated', 'success');
+        await refreshMemoryStatus();
+    } catch (err) {
+        showToast(err.message || 'Failed to toggle memory', 'error');
+        // Revert toggle
+        toggle.checked = !checked;
+    } finally {
+        toggle.disabled = false;
+        _memoryToggling = false;
+    }
+}
+
+// ─── Model Download ──────────────────────────────────────────
+
+var _downloadPolling = false;
+
+async function downloadModel() {
+    var idleEl = document.getElementById('memory-download-idle');
+    var progressEl = document.getElementById('memory-download-progress');
+    var completeEl = document.getElementById('memory-download-complete');
+    var errorEl = document.getElementById('memory-download-error');
+    var actionEl = document.getElementById('memory-download-action');
+
+    // Show progress, hide others
+    if (actionEl) actionEl.classList.remove('hidden');
+    if (idleEl) idleEl.classList.add('hidden');
+    if (completeEl) completeEl.classList.add('hidden');
+    if (errorEl) errorEl.classList.add('hidden');
+    if (progressEl) progressEl.classList.remove('hidden');
+
+    // Reset progress bar
+    var progressFill = document.getElementById('memory-download-progress-fill');
+    if (progressFill) progressFill.style.width = '0%';
+    var progressText = document.getElementById('memory-download-progress-text');
+    if (progressText) progressText.textContent = 'Starting download...';
+
+    try {
+        var res = await fetch('/api/memory/download', authFetchOpts({ method: 'POST' }));
+        var data = await res.json();
+
+        if (data.status === 'already_downloaded') {
+            showDownloadComplete(data.size);
+            refreshMemoryStatus();
+            return;
+        }
+
+        // Start polling for progress
+        pollDownloadStatus();
+    } catch (err) {
+        showDownloadError(err.message || 'Failed to start download');
+    }
+}
+
+function pollDownloadStatus() {
+    if (_downloadPolling) return;
+    _downloadPolling = true;
+
+    var interval = setInterval(async function() {
+        try {
+            var res = await fetch('/api/memory/download/status', { headers: authHeaders() });
+            var data = await res.json();
+
+            if (data.status === 'downloaded') {
+                clearInterval(interval);
+                _downloadPolling = false;
+                showDownloadComplete(data.size);
+                refreshMemoryStatus();
+                return;
+            }
+
+            if (data.status === 'downloading') {
+                updateDownloadProgress(data.progress || 0, data.downloaded, data.total);
+                return;
+            }
+
+            // not_downloaded — download hasn't started writing yet, keep waiting
+            if (data.status === 'not_downloaded') {
+                updateDownloadProgress(0, 0, 0);
+                return;
+            }
+        } catch (err) {
+            // Network error — keep trying
+        }
+    }, 2000);
+
+    // Timeout after 10 minutes
+    setTimeout(function() {
+        if (_downloadPolling) {
+            clearInterval(interval);
+            _downloadPolling = false;
+            showDownloadError('Download timed out. Try again.');
+        }
+    }, 600000);
+}
+
+function updateDownloadProgress(percent, downloaded, total) {
+    var progressText = document.getElementById('memory-download-progress-text');
+    var progressFill = document.getElementById('memory-download-progress-fill');
+
+    if (progressFill) progressFill.style.width = Math.min(percent, 99) + '%';
+
+    if (progressText) {
+        if (downloaded && total) {
+            var dlMB = (downloaded / 1024 / 1024).toFixed(0);
+            var totalMB = (total / 1024 / 1024).toFixed(0);
+            progressText.textContent = dlMB + 'MB / ' + totalMB + 'MB (' + percent + '%)';
+        } else if (percent > 0) {
+            progressText.textContent = percent + '% complete';
+        } else {
+            progressText.textContent = 'Starting download...';
+        }
+    }
+}
+
+function showDownloadComplete(size) {
+    var idleEl = document.getElementById('memory-download-idle');
+    var progressEl = document.getElementById('memory-download-progress');
+    var completeEl = document.getElementById('memory-download-complete');
+    var errorEl = document.getElementById('memory-download-error');
+    var sizeText = document.getElementById('memory-download-size-text');
+
+    if (idleEl) idleEl.classList.add('hidden');
+    if (progressEl) progressEl.classList.add('hidden');
+    if (errorEl) errorEl.classList.add('hidden');
+    if (completeEl) completeEl.classList.remove('hidden');
+
+    if (sizeText && size) {
+        sizeText.textContent = (size / 1024 / 1024).toFixed(0) + 'MB on disk';
+    }
+
+    showToast('Model downloaded successfully!', 'success');
+}
+
+function showDownloadError(msg) {
+    var idleEl = document.getElementById('memory-download-idle');
+    var progressEl = document.getElementById('memory-download-progress');
+    var completeEl = document.getElementById('memory-download-complete');
+    var errorEl = document.getElementById('memory-download-error');
+    var errorText = document.getElementById('memory-download-error-text');
+
+    if (idleEl) idleEl.classList.add('hidden');
+    if (progressEl) progressEl.classList.add('hidden');
+    if (completeEl) completeEl.classList.add('hidden');
+    if (errorEl) errorEl.classList.remove('hidden');
+
+    if (errorText) errorText.textContent = '❌ ' + msg;
+
+    showToast(msg, 'error');
+}
+
+// ─── Gateway Info / Web Chat ─────────────────────────────────
+
+var _gatewayInfo = null;
+var _gatewayTokenVisible = false;
+
+async function refreshGatewayInfo() {
+    try {
+        var res = await fetch('/api/gateway/info', { headers: authHeaders() });
+        var data = await res.json();
+        _gatewayInfo = data;
+        updateWebChatUI(data);
+    } catch (err) {
+        console.error('Failed to fetch gateway info:', err);
+        _gatewayInfo = null;
+        updateWebChatUI(null);
+    }
+}
+
+function updateWebChatUI(data) {
+    // Gateway info loaded — trigger webchat section update
+    updateWebchatSection();
+}
+
+function updateWebchatSection() {
+    var loadingEl = document.getElementById('webchat-loading');
+    var readyEl = document.getElementById('webchat-ready');
+    var setupEl = document.getElementById('webchat-setup-needed');
+    var needsTsEl = document.getElementById('webchat-needs-tailscale');
+
+    if (!loadingEl) return;
+
+    // Hide all states
+    loadingEl.classList.add('hidden');
+    if (readyEl) readyEl.classList.add('hidden');
+    if (setupEl) setupEl.classList.add('hidden');
+    if (needsTsEl) needsTsEl.classList.add('hidden');
+
+    var tsData = _tailscaleData;
+
+    if (!tsData || !tsData.connected) {
+        // Tailscale not connected
+        if (needsTsEl) needsTsEl.classList.remove('hidden');
+        return;
+    }
+
+    var serve = tsData.serve;
+
+    if (serve && serve.active) {
+        // Serve is active — show ready state
+        if (readyEl) readyEl.classList.remove('hidden');
+
+        var urlEl = document.getElementById('webchat-url');
+        var linkEl = document.getElementById('webchat-open-link');
+        var tokenSection = document.getElementById('webchat-token-section');
+
+        var webchatUrl = serve.webchatUrl || serve.url || '';
+        var displayUrl = serve.url || '';
+
+        if (urlEl) urlEl.textContent = displayUrl;
+        if (linkEl) linkEl.href = webchatUrl;
+
+        // Show token section if we have gateway info with token
+        if (_gatewayInfo && _gatewayInfo.token && tokenSection) {
+            tokenSection.classList.remove('hidden');
+            updateTokenDisplay();
+        } else if (tokenSection) {
+            tokenSection.classList.add('hidden');
+        }
+    } else {
+        // Serve not active — show setup needed
+        if (setupEl) setupEl.classList.remove('hidden');
+
+        var enableLinkEl = document.getElementById('webchat-serve-enable-link');
+        if (enableLinkEl && serve && serve.enableUrl) {
+            enableLinkEl.href = serve.enableUrl;
+        }
+    }
+}
+
+function updateTokenDisplay() {
+    var displayEl = document.getElementById('webchat-token-display');
+    if (!displayEl || !_gatewayInfo || !_gatewayInfo.token) return;
+
+    if (_gatewayTokenVisible) {
+        displayEl.textContent = _gatewayInfo.token;
+    } else {
+        var token = _gatewayInfo.token;
+        var lastChars = token.slice(-8);
+        displayEl.textContent = '••••••••' + lastChars;
+    }
+}
+
+function toggleGatewayToken() {
+    _gatewayTokenVisible = !_gatewayTokenVisible;
+    updateTokenDisplay();
+    var btn = document.getElementById('btn-toggle-token');
+    if (btn) btn.textContent = _gatewayTokenVisible ? '🙈' : '👁️';
+}
+
+function copyGatewayToken() {
+    if (!_gatewayInfo || !_gatewayInfo.token) {
+        showToast('No token available', 'error');
+        return;
+    }
+    navigator.clipboard.writeText(_gatewayInfo.token).then(function() {
+        showToast('Gateway token copied!', 'success');
+        var btn = document.getElementById('btn-copy-token');
+        if (btn) {
+            btn.textContent = '✅';
+            setTimeout(function() { btn.textContent = '📋'; }, 1500);
+        }
+    }).catch(function() {
+        // Fallback for non-HTTPS
+        var textarea = document.createElement('textarea');
+        textarea.value = _gatewayInfo.token;
+        textarea.style.position = 'fixed';
+        textarea.style.opacity = '0';
+        document.body.appendChild(textarea);
+        textarea.select();
+        try {
+            document.execCommand('copy');
+            showToast('Gateway token copied!', 'success');
+        } catch (e) {
+            showToast('Copy failed — select and copy manually', 'error');
+        }
+        document.body.removeChild(textarea);
+    });
+}
+
+function openWebChat() {
+    // Prefer HTTPS serve URL from tailscale data
+    if (_tailscaleData && _tailscaleData.serve && _tailscaleData.serve.webchatUrl) {
+        window.open(_tailscaleData.serve.webchatUrl, '_blank');
+    } else if (_tailscaleData && _tailscaleData.serve && _tailscaleData.serve.url) {
+        window.open(_tailscaleData.serve.url, '_blank');
+    } else if (_gatewayInfo && _gatewayInfo.tailscaleUrl) {
+        window.open(_gatewayInfo.tailscaleUrl, '_blank');
+    } else if (_gatewayInfo && _gatewayInfo.localUrl) {
+        window.open(_gatewayInfo.localUrl, '_blank');
+    } else {
+        window.open('http://localhost:18789/', '_blank');
+    }
+}
+
+// ─── Web Chat: Retry Serve Setup ─────────────────────────────
+
+async function retryServeSetup() {
+    var btn = document.getElementById('btn-retry-serve');
+    if (!btn) return;
+    btn.disabled = true;
+    btn.textContent = 'Setting up...';
+
+    try {
+        var res = await fetch('/api/tailscale/setup-serve', authFetchOpts({ method: 'POST' }));
+        var data = await res.json();
+
+        if (data.status === 'ok') {
+            // Update tailscale data with serve info
+            if (_tailscaleData) {
+                _tailscaleData.serve = {
+                    active: true,
+                    dnsName: _tailscaleData.serve ? _tailscaleData.serve.dnsName : null,
+                    url: data.url,
+                    webchatUrl: data.webchatUrl
+                };
+            }
+            updateWebchatSection();
+            showToast('Tailscale Serve configured — Web Chat is ready!', 'success');
+        } else if (data.status === 'not_enabled') {
+            showToast('Tailscale Serve is still not enabled. Please enable it on your tailnet first, then retry.', 'warning');
+            // Update enable link if provided
+            if (data.enableUrl) {
+                var enableLinkEl = document.getElementById('webchat-serve-enable-link');
+                if (enableLinkEl) enableLinkEl.href = data.enableUrl;
+            }
+        } else {
+            showToast(data.error || 'Serve setup failed', 'error');
+        }
+    } catch (e) {
+        console.error('Serve setup failed:', e);
+        showToast('Failed to set up Tailscale Serve', 'error');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = '↻ Retry Setup';
+    }
+}
+
+function copyWebchatUrl() {
+    var url = document.getElementById('webchat-url')?.textContent;
+    if (!url || url === '—') {
+        showToast('No URL available', 'error');
+        return;
+    }
+    navigator.clipboard.writeText(url).then(function() {
+        showToast('Web Chat URL copied!', 'success');
+    }).catch(function() {
+        // Fallback for non-HTTPS context
+        var ta = document.createElement('textarea');
+        ta.value = url;
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        try {
+            document.execCommand('copy');
+            showToast('Web Chat URL copied!', 'success');
+        } catch (e) {
+            showToast('Copy failed — select and copy manually', 'error');
+        }
+        document.body.removeChild(ta);
+    });
+}
+
+// ─── Why Tailscale? Toggle ───────────────────────────────────
+
+function toggleWhyTailscale() {
+    var content = document.getElementById('why-tailscale-content');
+    var chevron = document.getElementById('why-ts-chevron');
+    if (!content) return;
+
+    if (content.classList.contains('hidden')) {
+        content.classList.remove('hidden');
+        if (chevron) chevron.classList.add('rotate-180');
+    } else {
+        content.classList.add('hidden');
+        if (chevron) chevron.classList.remove('rotate-180');
+    }
+}
+
+// ─── Helpers ─────────────────────────────────────────────────
+
+function formatModel(model) {
+    if (!model) return null;
+    var labels = {
+        'anthropic/claude-sonnet-4': 'Claude Sonnet 4',
+        'anthropic/claude-sonnet-4-5': 'Claude Sonnet 4.5',
+        'anthropic/claude-opus-4-5': 'Claude Opus 4.5',
+        'anthropic/claude-haiku-3-5': 'Claude Haiku 3.5'
+    };
+    return labels[model] || model;
+}
+
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}