lobstakit-cloud 1.0.0

package/public/js/setup.js

@@ -0,0 +1,755 @@
+/**
+ * LobstaKit Cloud — Setup Wizard
+ */
+
+let currentStep = 1;
+let selectedChannel = 'web';
+let provisionData = null; // Set from /api/provision if available
+
+// ─── Provider Definitions ────────────────────────────────────
+
+const ANTHROPIC_KEY_TYPES = {
+    subscription: {
+        placeholder: 'sk-ant-...',
+        consoleUrl: 'https://claude.ai/settings',
+        consoleName: 'claude.ai/settings',
+    },
+    api: {
+        placeholder: 'sk-ant-api03-...',
+        consoleUrl: 'https://console.anthropic.com/settings/keys',
+        consoleName: 'console.anthropic.com',
+    }
+};
+
+const PROVIDERS = {
+    anthropic: {
+        label: 'Anthropic',
+        placeholder: 'sk-ant-...',
+        consoleUrl: 'https://claude.ai/settings',
+        consoleName: 'claude.ai/settings',
+        keyPrefix: 'sk-ant-',
+        keyError: 'Anthropic keys start with sk-ant-',
+        hint: 'Sonnet is the best balance of speed, capability, and cost.',
+        hasKeyType: true,
+        models: [
+            { value: 'anthropic/claude-sonnet-4-5', label: 'Claude Sonnet 4.5 — Recommended' },
+            { value: 'anthropic/claude-opus-4-5', label: 'Claude Opus 4.5 — Most powerful' },
+            { value: 'anthropic/claude-haiku-3-5', label: 'Claude Haiku 3.5 — Budget' },
+        ]
+    },
+    openai: {
+        label: 'OpenAI',
+        placeholder: 'sk-...',
+        consoleUrl: 'https://platform.openai.com/api-keys',
+        consoleName: 'platform.openai.com',
+        keyPrefix: 'sk-',
+        keyError: 'OpenAI keys start with sk-',
+        hint: 'GPT-4o is the best balance of speed, capability, and cost.',
+        models: [
+            { value: 'openai/gpt-4o', label: 'GPT-4o — Recommended' },
+            { value: 'openai/gpt-4o-mini', label: 'GPT-4o Mini — Budget' },
+            { value: 'openai/o3', label: 'o3 — Reasoning' },
+            { value: 'openai/o4-mini', label: 'o4-mini — Fast reasoning' },
+        ]
+    },
+    google: {
+        label: 'Google (Gemini)',
+        placeholder: 'AIza...',
+        consoleUrl: 'https://aistudio.google.com/apikey',
+        consoleName: 'aistudio.google.com',
+        keyPrefix: null,
+        keyError: null,
+        hint: 'Gemini 2.5 Pro is the most capable Google model.',
+        models: [
+            { value: 'google/gemini-2.5-pro', label: 'Gemini 2.5 Pro — Recommended' },
+            { value: 'google/gemini-2.5-flash', label: 'Gemini 2.5 Flash — Fast' },
+            { value: 'google/gemini-2.0-flash', label: 'Gemini 2.0 Flash — Budget' },
+        ]
+    },
+    xai: {
+        label: 'xAI (Grok)',
+        placeholder: 'xai-...',
+        consoleUrl: 'https://console.x.ai/',
+        consoleName: 'console.x.ai',
+        keyPrefix: 'xai-',
+        keyError: 'xAI keys start with xai-',
+        hint: 'Grok 3 is xAI\'s most capable model.',
+        models: [
+            { value: 'xai/grok-3', label: 'Grok 3 — Recommended' },
+            { value: 'xai/grok-3-mini', label: 'Grok 3 Mini — Budget' },
+        ]
+    },
+    deepseek: {
+        label: 'DeepSeek',
+        placeholder: 'sk-...',
+        consoleUrl: 'https://platform.deepseek.com/api_keys',
+        consoleName: 'platform.deepseek.com',
+        keyPrefix: 'sk-',
+        keyError: 'DeepSeek keys start with sk-',
+        hint: 'DeepSeek V3 is fast and cost-effective.',
+        models: [
+            { value: 'deepseek/deepseek-chat', label: 'DeepSeek V3 — Recommended' },
+            { value: 'deepseek/deepseek-reasoner', label: 'DeepSeek R1 — Reasoning' },
+        ]
+    },
+    mistral: {
+        label: 'Mistral',
+        placeholder: 'sk-...',
+        consoleUrl: 'https://console.mistral.ai/api-keys/',
+        consoleName: 'console.mistral.ai',
+        keyPrefix: null,
+        keyError: null,
+        hint: 'Mistral Large is a strong all-round model.',
+        models: [
+            { value: 'mistral/mistral-large-latest', label: 'Mistral Large — Recommended' },
+            { value: 'mistral/mistral-small-latest', label: 'Mistral Small — Budget' },
+        ]
+    },
+    openrouter: {
+        label: 'OpenRouter',
+        placeholder: 'sk-or-...',
+        consoleUrl: 'https://openrouter.ai/keys',
+        consoleName: 'openrouter.ai',
+        keyPrefix: 'sk-or-',
+        keyError: 'OpenRouter keys start with sk-or-',
+        hint: 'OpenRouter gives access to all models — see openrouter.ai/models for the full list.',
+        models: [
+            { value: 'openrouter/claude-opus-4-5', label: 'Claude Opus 4.5 — Default' },
+            { value: 'openrouter/gpt-4o', label: 'GPT-4o' },
+            { value: 'openrouter/gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
+        ]
+    }
+};
+
+// ─── Init ────────────────────────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', async () => {
+    // Check if setup is already complete — redirect to login or manage
+    try {
+        const authStatus = await fetch('/api/auth/status').then(r => r.json());
+        if (authStatus.setupComplete) {
+            // Setup already done — check if authenticated
+            const token = localStorage.getItem('lobstakit_token');
+            if (token) {
+                const tokenCheck = await fetch('/api/auth/status', {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                }).then(r => r.json());
+                if (tokenCheck.authenticated) {
+                    // Allow reconfiguration if explicitly on /setup
+                    if (window.location.pathname !== '/setup') {
+                        window.location.href = '/manage.html';
+                        return;
+                    }
+                    // On /setup — user is authenticated, allow reconfigure
+                    // Hide password setup section (already set)
+                    const pwSection = document.getElementById('password-setup-section');
+                    if (pwSection) pwSection.classList.add('hidden');
+                } else {
+                    window.location.href = '/login.html';
+                    return;
+                }
+            } else {
+                window.location.href = '/login.html';
+                return;
+            }
+        }
+    } catch (err) {
+        console.error('Failed to check auth status:', err);
+    }
+
+    try {
+        const res = await fetch('/api/status');
+        const data = await res.json();
+
+        // Show subdomain in header
+        if (data.subdomain) {
+            document.getElementById('subdomain-display').textContent = data.subdomain;
+        }
+
+        // If already configured and not explicitly on /setup, redirect to manage
+        if (data.configured && window.location.pathname !== '/setup') {
+            window.location.href = '/manage';
+        }
+    } catch (err) {
+        console.error('Failed to fetch status:', err);
+    }
+
+    // Fetch provisioning data (email from Stripe checkout via cloud-init)
+    try {
+        const provRes = await fetch('/api/provision');
+        const provData = await provRes.json();
+        if (provData.provisioned && provData.email) {
+            provisionData = provData;
+            const emailEl = document.getElementById('dashboard-email');
+            const hintEl = document.getElementById('dashboard-email-hint');
+            if (emailEl) {
+                emailEl.value = provData.email;
+                emailEl.readOnly = true;
+                emailEl.classList.add('opacity-70', 'cursor-not-allowed');
+            }
+            if (hintEl) {
+                hintEl.innerHTML = '✓ Email from your LobstaKit account — <span class="text-lobsta-accent cursor-pointer hover:underline" onclick="unlockEmail()">change</span>';
+            }
+        }
+    } catch (err) {
+        // No provision data — email field stays editable
+    }
+});
+
+// ─── Provider Change Handler ─────────────────────────────────
+
+function onProviderChange() {
+    const providerKey = document.getElementById('provider').value;
+    const provider = PROVIDERS[providerKey];
+    if (!provider) return;
+
+    // Show/hide Anthropic key type toggle
+    const keyTypeSection = document.getElementById('anthropic-key-type-section');
+    if (provider.hasKeyType) {
+        keyTypeSection.classList.remove('hidden');
+        // Apply current key type settings
+        applyKeyType();
+    } else {
+        keyTypeSection.classList.add('hidden');
+        // Use provider defaults
+        document.getElementById('api-key').placeholder = provider.placeholder;
+        const link = document.getElementById('provider-console-link');
+        link.href = provider.consoleUrl;
+        link.textContent = provider.consoleName;
+    }
+
+    // Update model dropdown
+    const modelSelect = document.getElementById('model');
+    modelSelect.innerHTML = '';
+    provider.models.forEach(m => {
+        const opt = document.createElement('option');
+        opt.value = m.value;
+        opt.textContent = m.label;
+        modelSelect.appendChild(opt);
+    });
+
+    // Update model hint
+    document.getElementById('model-hint').textContent = provider.hint;
+
+    // Clear any validation errors
+    clearError('api-key-error');
+}
+
+function onKeyTypeChange() {
+    // Update selected styling
+    const radios = document.querySelectorAll('input[name="anthropic-key-type"]');
+    radios.forEach(radio => {
+        const label = radio.closest('.key-type-option');
+        label.classList.toggle('selected', radio.checked);
+    });
+
+    // Toggle instructions
+    const keyType = document.querySelector('input[name="anthropic-key-type"]:checked').value;
+    document.getElementById('instructions-subscription').classList.toggle('hidden', keyType !== 'subscription');
+    document.getElementById('instructions-api').classList.toggle('hidden', keyType !== 'api');
+
+    // Update placeholder and link
+    applyKeyType();
+
+    // Clear validation errors
+    clearError('api-key-error');
+}
+
+function applyKeyType() {
+    const keyType = document.querySelector('input[name="anthropic-key-type"]:checked').value;
+    const config = ANTHROPIC_KEY_TYPES[keyType];
+
+    document.getElementById('api-key').placeholder = config.placeholder;
+    const link = document.getElementById('provider-console-link');
+    link.href = config.consoleUrl;
+    link.textContent = config.consoleName;
+}
+
+// ─── Channel Selection ───────────────────────────────────────
+
+function selectChannel(channel) {
+    selectedChannel = channel;
+
+    // Update card selection styling
+    document.querySelectorAll('.channel-card[data-channel]').forEach(card => {
+        card.classList.toggle('selected', card.dataset.channel === channel);
+    });
+
+    // Hide all config sections
+    document.querySelectorAll('.channel-config').forEach(el => el.classList.add('hidden'));
+
+    // Show the relevant config section
+    const configEl = document.getElementById(`channel-config-${channel}`);
+    if (configEl) {
+        configEl.classList.remove('hidden');
+    }
+
+    // Clear any validation errors
+    clearError('bot-token-error');
+    clearError('user-id-error');
+    clearError('discord-bot-token-error');
+    clearError('discord-server-id-error');
+}
+
+// ─── Email Unlock (for provisioned email override) ───────────
+
+function unlockEmail() {
+    const emailEl = document.getElementById('dashboard-email');
+    const hintEl = document.getElementById('dashboard-email-hint');
+    if (emailEl) {
+        emailEl.readOnly = false;
+        emailEl.classList.remove('opacity-70', 'cursor-not-allowed');
+        emailEl.focus();
+    }
+    if (hintEl) {
+        hintEl.textContent = 'Enter the email you want to use for login';
+    }
+}
+
+// ─── Step Navigation ─────────────────────────────────────────
+
+function showStep(step) {
+    // Hide all steps
+    document.querySelectorAll('.step-content').forEach(el => el.classList.add('hidden'));
+    
+    // Update step indicators
+    document.querySelectorAll('.step-indicator').forEach(el => {
+        el.classList.remove('active', 'completed');
+    });
+    
+    // Mark completed steps
+    for (let i = 1; i < step; i++) {
+        const indicator = document.getElementById(`step-${i}-indicator`);
+        if (indicator) {
+            indicator.classList.add('completed');
+            const numEl = indicator.querySelector('.step-number');
+            if (numEl) numEl.textContent = '✓';
+        }
+    }
+    
+    // Mark current step active
+    const currentIndicator = document.getElementById(`step-${step}-indicator`);
+    if (currentIndicator) {
+        currentIndicator.classList.add('active');
+        const numEl = currentIndicator.querySelector('.step-number');
+        if (numEl) numEl.textContent = step;
+    }
+    
+    // Reset future step numbers
+    for (let i = step + 1; i <= 4; i++) {
+        const indicator = document.getElementById(`step-${i}-indicator`);
+        if (indicator) {
+            const numEl = indicator.querySelector('.step-number');
+            if (numEl) numEl.textContent = i;
+        }
+    }
+    
+    // Update connector lines
+    for (let i = 1; i <= 3; i++) {
+        const line = document.getElementById(`line-${i}`);
+        if (line) {
+            line.classList.toggle('active', i < step);
+        }
+    }
+    
+    // Show selected step
+    const stepEl = document.getElementById(`step-${step}`);
+    if (stepEl) stepEl.classList.remove('hidden');
+    
+    currentStep = step;
+    
+    // Populate summary on step 4
+    if (step === 4) {
+        populateSummary();
+        // Reset launch panels
+        document.getElementById('review-panel').classList.remove('hidden');
+        document.getElementById('launch-progress').classList.add('hidden');
+        document.getElementById('launch-success').classList.add('hidden');
+        document.getElementById('launch-error').classList.add('hidden');
+    }
+    
+    // Scroll to top
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+// ─── Validation ──────────────────────────────────────────────
+
+function showError(id, message) {
+    const el = document.getElementById(id);
+    if (el) {
+        el.textContent = message;
+        el.classList.remove('hidden');
+    }
+}
+
+function clearError(id) {
+    const el = document.getElementById(id);
+    if (el) {
+        el.textContent = '';
+        el.classList.add('hidden');
+    }
+}
+
+function validateStep2() {
+    const apiKey = document.getElementById('api-key').value.trim();
+    const providerKey = document.getElementById('provider').value;
+    const provider = PROVIDERS[providerKey];
+    let valid = true;
+
+    clearError('api-key-error');
+
+    if (!apiKey) {
+        showError('api-key-error', 'API key is required');
+        valid = false;
+    } else if (provider && provider.keyPrefix && !apiKey.startsWith(provider.keyPrefix)) {
+        showError('api-key-error', `Invalid key — ${provider.keyError}`);
+        valid = false;
+    }
+
+    if (valid) showStep(3);
+}
+
+function validateStep3() {
+    let valid = true;
+
+    // Clear all channel errors
+    clearError('bot-token-error');
+    clearError('user-id-error');
+    clearError('discord-bot-token-error');
+    clearError('discord-server-id-error');
+
+    if (selectedChannel === 'web') {
+        // Web chat: always valid, no fields needed
+        valid = true;
+    } else if (selectedChannel === 'telegram') {
+        const botToken = document.getElementById('bot-token').value.trim();
+        const userId = document.getElementById('user-id').value.trim();
+
+        if (!botToken) {
+            showError('bot-token-error', 'Bot token is required');
+            valid = false;
+        } else if (!/^\d+:[A-Za-z0-9_-]+$/.test(botToken)) {
+            showError('bot-token-error', 'Invalid format — should look like 123456789:ABCdef...');
+            valid = false;
+        }
+
+        if (!userId) {
+            showError('user-id-error', 'User ID is required');
+            valid = false;
+        } else if (!/^\d+$/.test(userId)) {
+            showError('user-id-error', 'User ID should be a number');
+            valid = false;
+        }
+    } else if (selectedChannel === 'discord') {
+        const discordToken = document.getElementById('discord-bot-token').value.trim();
+        const serverId = document.getElementById('discord-server-id').value.trim();
+
+        if (!discordToken) {
+            showError('discord-bot-token-error', 'Bot token is required');
+            valid = false;
+        }
+
+        if (!serverId) {
+            showError('discord-server-id-error', 'Server ID is required');
+            valid = false;
+        } else if (!/^\d+$/.test(serverId)) {
+            showError('discord-server-id-error', 'Server ID should be a number');
+            valid = false;
+        }
+    }
+
+    if (valid) showStep(4);
+}
+
+// ─── Summary ─────────────────────────────────────────────────
+
+function maskKey(key) {
+    if (!key || key.length < 12) return '••••••••';
+    return key.substring(0, 7) + '•••' + key.substring(key.length - 4);
+}
+
+function getModelLabel(value) {
+    for (const pKey of Object.keys(PROVIDERS)) {
+        for (const m of PROVIDERS[pKey].models) {
+            if (m.value === value) {
+                // Strip the suffix like " — Recommended"
+                return m.label.split(' — ')[0];
+            }
+        }
+    }
+    return value;
+}
+
+function getProviderLabel(providerKey) {
+    const provider = PROVIDERS[providerKey];
+    return provider ? provider.label : providerKey;
+}
+
+function getChannelLabel(channel) {
+    const labels = {
+        web: '🌐 Web Chat',
+        telegram: '📱 Telegram',
+        discord: '🎮 Discord'
+    };
+    return labels[channel] || channel;
+}
+
+function populateSummary() {
+    const providerKey = document.getElementById('provider').value;
+    const apiKey = document.getElementById('api-key').value.trim();
+    const model = document.getElementById('model').value;
+    const privateMemory = document.getElementById('private-memory-toggle')?.checked ?? true;
+
+    document.getElementById('summary-provider').textContent = getProviderLabel(providerKey);
+    document.getElementById('summary-api-key').textContent = maskKey(apiKey);
+    document.getElementById('summary-model').textContent = getModelLabel(model);
+    document.getElementById('summary-channel').textContent = getChannelLabel(selectedChannel);
+
+    const memoryEl = document.getElementById('summary-memory');
+    if (memoryEl) {
+        memoryEl.textContent = privateMemory ? '🔒 Private (local)' : '☁️ Cloud';
+    }
+
+    // Channel-specific detail row
+    const detailRow = document.getElementById('summary-channel-detail-row');
+    const detailLabel = document.getElementById('summary-channel-detail-label');
+    const detailValue = document.getElementById('summary-channel-detail-value');
+
+    if (selectedChannel === 'telegram') {
+        const botToken = document.getElementById('bot-token').value.trim();
+        const userId = document.getElementById('user-id').value.trim();
+        detailRow.classList.remove('hidden');
+        detailLabel.textContent = 'Bot Token / User ID';
+        detailValue.textContent = maskKey(botToken) + ' / ' + userId;
+    } else if (selectedChannel === 'discord') {
+        const discordToken = document.getElementById('discord-bot-token').value.trim();
+        const serverId = document.getElementById('discord-server-id').value.trim();
+        detailRow.classList.remove('hidden');
+        detailLabel.textContent = 'Bot Token / Server ID';
+        detailValue.textContent = maskKey(discordToken) + ' / ' + serverId;
+    } else {
+        detailRow.classList.add('hidden');
+    }
+
+    // Email summary row
+    const emailRow = document.getElementById('summary-email-row');
+    const emailEl = document.getElementById('dashboard-email');
+    if (emailRow && emailEl && emailEl.value.trim()) {
+        document.getElementById('summary-email').textContent = emailEl.value.trim();
+        emailRow.classList.remove('hidden');
+    } else if (emailRow) {
+        emailRow.classList.add('hidden');
+    }
+}
+
+// ─── Launch ──────────────────────────────────────────────────
+
+function setProgressStep(step, status, icon) {
+    const iconEl = document.getElementById(`progress-${step}-icon`);
+    const statusEl = document.getElementById(`progress-${step}-status`);
+    
+    if (iconEl) {
+        const iconMap = {
+            pending: '○',
+            running: '⏳',
+            success: '✓',
+            error: '✗'
+        };
+        const colorMap = {
+            pending: 'text-lobsta-muted',
+            running: 'text-lobsta-warning',
+            success: 'text-green-400',
+            error: 'text-red-400'
+        };
+        iconEl.textContent = iconMap[icon] || icon;
+        iconEl.className = colorMap[icon] || '';
+    }
+    if (statusEl) {
+        statusEl.textContent = status;
+        const colorMap = {
+            pending: 'text-sm text-lobsta-muted',
+            running: 'text-sm text-lobsta-warning',
+            success: 'text-sm text-green-400',
+            error: 'text-sm text-red-400'
+        };
+        statusEl.className = colorMap[icon] || 'text-sm text-lobsta-muted';
+    }
+}
+
+async function launchBot() {
+    const launchBtn = document.getElementById('launch-btn');
+    
+    // Validate dashboard account (only on first setup — password fields exist)
+    const emailEl = document.getElementById('dashboard-email');
+    const passwordEl = document.getElementById('dashboard-password');
+    const confirmEl = document.getElementById('dashboard-password-confirm');
+    const passwordErrorEl = document.getElementById('password-error');
+    
+    if (passwordEl && confirmEl && !passwordEl.closest('#password-setup-section')?.classList.contains('hidden')) {
+        const email = emailEl ? emailEl.value.trim() : '';
+        const password = passwordEl.value;
+        const confirm = confirmEl.value;
+        
+        if (passwordErrorEl) passwordErrorEl.classList.add('hidden');
+
+        if (!email || !email.includes('@')) {
+            if (passwordErrorEl) {
+                passwordErrorEl.textContent = 'Please enter a valid email address';
+                passwordErrorEl.classList.remove('hidden');
+            }
+            return;
+        }
+        
+        if (!password || password.length < 6) {
+            if (passwordErrorEl) {
+                passwordErrorEl.textContent = 'Password must be at least 6 characters';
+                passwordErrorEl.classList.remove('hidden');
+            }
+            return;
+        }
+        if (password !== confirm) {
+            if (passwordErrorEl) {
+                passwordErrorEl.textContent = 'Passwords do not match';
+                passwordErrorEl.classList.remove('hidden');
+            }
+            return;
+        }
+    }
+
+    // Gather data
+    const privateMemory = document.getElementById('private-memory-toggle')?.checked ?? true;
+    const payload = {
+        provider: document.getElementById('provider').value,
+        apiKey: document.getElementById('api-key').value.trim(),
+        model: document.getElementById('model').value,
+        channel: selectedChannel,
+        privateMemory: privateMemory
+    };
+
+    // Add channel-specific fields
+    if (selectedChannel === 'telegram') {
+        payload.telegramBotToken = document.getElementById('bot-token').value.trim();
+        payload.telegramUserId = document.getElementById('user-id').value.trim();
+    } else if (selectedChannel === 'discord') {
+        payload.discordBotToken = document.getElementById('discord-bot-token').value.trim();
+        payload.discordServerId = document.getElementById('discord-server-id').value.trim();
+    }
+
+    // Show progress, hide review
+    document.getElementById('review-panel').classList.add('hidden');
+    document.getElementById('launch-progress').classList.remove('hidden');
+    document.getElementById('launch-success').classList.add('hidden');
+    document.getElementById('launch-error').classList.add('hidden');
+
+    // Step 0: Set dashboard account (if password fields exist — first setup)
+    if (passwordEl && passwordEl.value) {
+        try {
+            const email = emailEl ? emailEl.value.trim() : '';
+            const authRes = await fetch('/api/auth/setup', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email, password: passwordEl.value })
+            });
+            const authData = await authRes.json();
+            if (authData.status === 'ok') {
+                localStorage.setItem('lobstakit_token', authData.token);
+            }
+            // If password was already set (reconfigure), that's fine — continue
+        } catch (e) {
+            console.error('Auth setup error:', e);
+            // Non-fatal — continue with gateway setup
+        }
+    }
+
+    // Build auth headers for subsequent calls
+    const token = localStorage.getItem('lobstakit_token');
+    const authH = token ? { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' } : { 'Content-Type': 'application/json' };
+
+    // Step 1: Write Config
+    setProgressStep('config', 'Writing...', 'running');
+    
+    try {
+        const res = await fetch('/api/setup', {
+            method: 'POST',
+            headers: authH,
+            body: JSON.stringify(payload)
+        });
+
+        const data = await res.json();
+
+        if (!res.ok) {
+            throw new Error(data.error || 'Setup failed');
+        }
+
+        setProgressStep('config', 'Done', 'success');
+
+        // Step 2: Start Gateway
+        setProgressStep('gateway', 'Starting...', 'running');
+        
+        // The API already restarts the gateway, so we just wait a moment
+        await sleep(2000);
+        
+        setProgressStep('gateway', 'Done', 'success');
+
+        // Step 3: Health Check
+        setProgressStep('health', 'Checking...', 'running');
+        
+        await sleep(1000);
+        
+        try {
+            const gwHeaders = localStorage.getItem('lobstakit_token') ? { 'Authorization': `Bearer ${localStorage.getItem('lobstakit_token')}` } : {};
+            const statusRes = await fetch('/api/gateway-status', { headers: gwHeaders });
+            const statusData = await statusRes.json();
+            
+            if (statusData.running) {
+                setProgressStep('health', 'Healthy', 'success');
+            } else {
+                setProgressStep('health', 'Starting up...', 'running');
+            }
+        } catch (e) {
+            setProgressStep('health', 'Pending', 'running');
+        }
+
+        // Show success
+        await sleep(500);
+        document.getElementById('launch-progress').classList.add('hidden');
+        document.getElementById('launch-success').classList.remove('hidden');
+
+        // Update success panel based on channel
+        const successMsg = document.getElementById('success-message');
+        const successLink = document.getElementById('success-channel-link');
+        if (selectedChannel === 'telegram') {
+            successMsg.textContent = 'Open Telegram and send a message to your bot. It\'s ready to chat.';
+            successLink.href = 'https://t.me/';
+            successLink.textContent = 'Open Telegram ↗';
+            successLink.classList.remove('hidden');
+        } else if (selectedChannel === 'discord') {
+            successMsg.textContent = 'Your Discord bot is online! Send a message in your server.';
+            successLink.href = 'https://discord.com/channels/@me';
+            successLink.textContent = 'Open Discord ↗';
+            successLink.classList.remove('hidden');
+        } else {
+            successMsg.textContent = 'Your gateway is configured and running. Chat from your dashboard!';
+            successLink.classList.add('hidden');
+        }
+
+    } catch (err) {
+        setProgressStep('config', 'Failed', 'error');
+        
+        // Show error
+        document.getElementById('launch-progress').classList.add('hidden');
+        document.getElementById('launch-error').classList.remove('hidden');
+        document.getElementById('launch-error-message').textContent = err.message;
+    }
+}
+
+function retryLaunch() {
+    // Reset and show review panel
+    document.getElementById('launch-error').classList.add('hidden');
+    document.getElementById('review-panel').classList.remove('hidden');
+    
+    // Reset progress indicators
+    setProgressStep('config', 'Pending', 'pending');
+    setProgressStep('gateway', 'Pending', 'pending');
+    setProgressStep('health', 'Pending', 'pending');
+}