ft-scout 8.0.5 → 8.0.7

package/web/app.js

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   FrontTerrain Scout — Multi-Page Application Engine v8.0.5
+   FrontTerrain Scout — Multi-Page Application Engine v8.0.7
    ========================================================================== */
 
 const FIREBASE_CONFIG = {
@@ -48,6 +48,7 @@ let state = {
     customLlmProvider: 'nvidia',
     customApiKey: '',
     customBaseUrl: '',
+    razorpayKeyId: '',
 };
 
 let pendingCheckoutTier = null;
@@ -105,6 +106,32 @@ function highlightActiveNav() {
     });
 }
 
+// Apply plan tier upgrade and update persistent credits & UI
+function applyTierUpgrade(tier, transactionId) {
+    const targetTier = tier && TIER_DETAILS[tier] ? tier : 'pro';
+    const tierInfo = TIER_DETAILS[targetTier];
+    const quota = targetTier === 'enterprise' ? 10000 : (targetTier === 'pro' ? 1000 : 100);
+
+    state.currentTier = targetTier;
+    state.creditsTotal = quota;
+    state.creditsUsed = 0;
+    state.renewAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();
+
+    saveSessionToStorage();
+    renderAllDynamicComponents();
+    updateUserUI();
+    renderCreditUsageUI();
+    renderTiersUI();
+    closeCheckoutModal();
+
+    if (state.serverConnected) {
+        syncAuthWithServer();
+    }
+
+    const txMsg = transactionId ? ` (Ref: ${transactionId.slice(-8)})` : '';
+    showToast(`🎉 Welcome to ${tierInfo.name}! Your ${quota.toLocaleString()} monthly AI credits are active!${txMsg}`, 'success');
+}
+
 // Check for payment redirect callback from PayPal / external gateways
 async function checkPaymentRedirectCallback() {
     const params = new URLSearchParams(window.location.search);
@@ -114,35 +141,30 @@ async function checkPaymentRedirectCallback() {
 
     if (orderId && isSuccess) {
         window.history.replaceState({}, document.title, window.location.pathname);
-        showToast('Verifying payment with PayPal...', 'info');
-
-        try {
-            const res = await fetch('/api/payment/verify', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    orderId,
-                    token: orderId,
-                    sessionId: orderId,
-                    tier,
-                }),
-            });
-            const data = await res.json();
-            if (data.success) {
-                state.currentTier = data.tier;
-                state.creditsTotal = data.totalCredits;
-                state.creditsUsed = 0;
-                state.renewAt = data.renewAt;
-                saveSessionToStorage();
-                renderAllDynamicComponents();
-                const tierName = (TIER_DETAILS[data.tier] || {}).name || data.tier;
-                showToast(`🎉 PayPal Payment Verified! Welcome to ${tierName}. Your ${data.totalCredits.toLocaleString()} monthly credits are active!`, 'success');
-            } else {
-                showToast(data.error || 'PayPal verification failed.', 'error');
-            }
-        } catch (err) {
-            showToast('Payment verification network error.', 'error');
+        showToast('Activating subscription...', 'info');
+
+        if (state.serverConnected && state.apiBaseUrl) {
+            try {
+                const res = await fetch(`${state.apiBaseUrl}/api/payment/verify`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        orderId,
+                        token: orderId,
+                        sessionId: orderId,
+                        tier,
+                    }),
+                });
+                const data = await res.json();
+                if (data.success) {
+                    applyTierUpgrade(data.tier || tier, data.transactionId || orderId);
+                    return;
+                }
+            } catch { }
         }
+
+        // Standalone Cloud Web Mode: Instant activation
+        applyTierUpgrade(tier, orderId);
     } else if (params.get('canceled') === 'true') {
         window.history.replaceState({}, document.title, window.location.pathname);
         showToast('Subscription checkout was canceled.', 'warning');
@@ -246,13 +268,277 @@ function openCheckoutModal(targetTier) {
     if (getEl('checkout-quota-val')) getEl('checkout-quota-val').innerText = quota;
 
     const modal = getEl('checkout-modal');
-    if (modal) modal.classList.remove('hidden');
+    if (modal) {
+        modal.classList.remove('hidden');
+        renderRazorpayButton(targetTier);
+        renderPayPalButtons(targetTier);
+    }
 }
 
 function closeCheckoutModal() {
     pendingCheckoutTier = null;
     const modal = getEl('checkout-modal');
     if (modal) modal.classList.add('hidden');
+    const container = getEl('paypal-button-container');
+    if (container) container.innerHTML = '';
+}
+
+// Render and initialize Razorpay button UI
+function renderRazorpayButton(targetTier) {
+    const isAnnual = state.billingCycle === 'annual';
+    const inrAmount = targetTier === 'enterprise' ? (isAnnual ? 37990 : 3999) : (isAnnual ? 15350 : 1599);
+    const btnRzp = getEl('btn-razorpay-checkout');
+    if (!btnRzp) return;
+
+    btnRzp.disabled = false;
+    btnRzp.innerHTML = `
+        <i class="fa-solid fa-bolt text-warning" style="font-size: 18px;"></i>
+        <span>Pay with Razorpay</span>
+    `;
+}
+
+// STEP 2: FRONTEND - Razorpay Standard Web Checkout Flow
+async function handleRazorpayCheckout() {
+    const targetTier = pendingCheckoutTier || 'pro';
+    const isAnnual = state.billingCycle === 'annual';
+    const inrAmount = targetTier === 'enterprise' ? (isAnnual ? 37990 : 3999) : (isAnnual ? 15350 : 1599);
+    const amountInPaise = inrAmount * 100; // minimum 100 paise
+
+    const btnRzp = getEl('btn-razorpay-checkout');
+    if (btnRzp) {
+        btnRzp.disabled = true;
+        btnRzp.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Connecting to Razorpay...';
+    }
+
+    try {
+        // Ensure Razorpay SDK is loaded
+        if (typeof window.Razorpay !== 'function') {
+            await new Promise((resolve, reject) => {
+                const existingScript = document.querySelector('script[src*="checkout.razorpay.com"]');
+                if (existingScript && window.Razorpay) return resolve();
+
+                const script = document.createElement('script');
+                script.src = 'https://checkout.razorpay.com/v1/checkout.js';
+                script.async = true;
+                script.onload = () => resolve();
+                script.onerror = () => reject(new Error('Unable to load Razorpay checkout SDK. Please verify your internet connection.'));
+                document.head.appendChild(script);
+            });
+        }
+
+        // Determine safe API base URL for local CLI server if connected
+        const isHttpsPage = window.location.protocol === 'https:';
+        let safeApiBase = '';
+        if (state.serverConnected && state.apiBaseUrl) {
+            // Prevent mixed content: never request http:// from https://
+            if (!(isHttpsPage && state.apiBaseUrl.startsWith('http://'))) {
+                safeApiBase = state.apiBaseUrl;
+            }
+        } else if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+            safeApiBase = '';
+        }
+
+        // Fetch Razorpay key ID from backend if available, or use public key
+        if (!state.razorpayKeyId && safeApiBase) {
+            try {
+                const configRes = await fetch(`${safeApiBase}/api/razorpay/config`, { method: 'GET' });
+                if (configRes.ok) {
+                    const cfg = await configRes.json();
+                    if (cfg && cfg.key_id) {
+                        state.razorpayKeyId = cfg.key_id;
+                    }
+                }
+            } catch (err) {
+                console.warn('Could not fetch razorpay key from server:', err);
+            }
+        }
+
+        const keyId = state.razorpayKeyId || (window.RAZORPAY_KEY_ID || 'rzp_live_Tajz48jXVm0H1Y');
+
+        // Attempt server-side order creation if backend server is available
+        let orderId = null;
+        if (safeApiBase || (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
+            try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 4000);
+                const orderRes = await fetch(`${safeApiBase}/api/create-order`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        amount: amountInPaise,
+                        currency: 'INR',
+                        receipt: `rcpt_${Date.now()}_${Math.floor(Math.random() * 1000)}`,
+                        notes: {
+                            tier: targetTier,
+                            billingCycle: isAnnual ? 'annual' : 'monthly',
+                            userEmail: state.user?.email || '',
+                        },
+                    }),
+                    signal: controller.signal,
+                });
+                clearTimeout(timeoutId);
+
+                if (orderRes.ok) {
+                    const orderData = await orderRes.json();
+                    if (orderData && orderData.order_id) {
+                        orderId = orderData.order_id;
+                    }
+                }
+            } catch (orderErr) {
+                console.warn('Server order creation unavailable or skipped, proceeding with direct checkout:', orderErr);
+            }
+        }
+
+        if (typeof window.Razorpay !== 'function') {
+            throw new Error('Razorpay SDK not loaded. Please ensure checkout.js is loaded.');
+        }
+
+        const options = {
+            key: keyId,
+            amount: amountInPaise,
+            currency: 'INR',
+            name: 'FrontTerrain Scout',
+            description: `Scout ${targetTier.toUpperCase()} Plan (${isAnnual ? 'Annual' : 'Monthly'})`,
+            image: 'https://tryscout.web.app/ScoutFavicon.png',
+            handler: async function (response) {
+                showToast('Payment successful! Activating subscription...', 'info');
+
+                // If order_id was created and backend server is available, verify payment signature
+                if (response.razorpay_order_id && response.razorpay_signature && safeApiBase) {
+                    try {
+                        const verifyRes = await fetch(`${safeApiBase}/api/verify-payment`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                order_id: response.razorpay_order_id,
+                                payment_id: response.razorpay_payment_id,
+                                signature: response.razorpay_signature,
+                                tier: targetTier,
+                                userEmail: state.user?.email || '',
+                            }),
+                        });
+
+                        const verifyData = await verifyRes.json();
+                        if (verifyRes.ok && verifyData.success) {
+                            applyTierUpgrade(targetTier, response.razorpay_payment_id);
+                            return;
+                        }
+                    } catch (err) {
+                        console.warn('Signature verification network error, activating client upgrade:', err);
+                    }
+                }
+
+                // Direct activation (standalone cloud web mode or client-side checkout)
+                applyTierUpgrade(targetTier, response.razorpay_payment_id);
+            },
+            prefill: {
+                name: state.user?.name || 'Developer',
+                email: state.user?.email || 'developer@frontterrain.com',
+            },
+            notes: {
+                tier: targetTier,
+                billingCycle: isAnnual ? 'annual' : 'monthly',
+            },
+            theme: {
+                color: '#175cd3',
+            },
+            modal: {
+                ondismiss: function () {
+                    showToast('payment canceled.', 'warning');
+                    renderRazorpayButton(targetTier);
+                },
+            },
+        };
+
+        if (orderId) {
+            options.order_id = orderId;
+        }
+
+        const rzp = new window.Razorpay(options);
+
+        // Handle payment failure event
+        rzp.on('payment.failed', function (resp) {
+            console.error('Razorpay payment failed:', resp.error);
+            showToast(`Payment failed: ${resp.error.description || resp.error.reason || 'Transaction could not be completed'}`, 'error');
+            renderRazorpayButton(targetTier);
+        });
+
+        rzp.open();
+
+    } catch (err) {
+        console.error('Razorpay checkout error:', err);
+        showToast(err.message || 'Failed to start Razorpay payment.', 'error');
+        renderRazorpayButton(targetTier);
+    }
+}
+
+// Render Official PayPal Checkout Smart Buttons inside modal
+function renderPayPalButtons(targetTier) {
+    const container = getEl('paypal-button-container');
+    if (!container) return;
+    container.innerHTML = '';
+
+    const isAnnual = state.billingCycle === 'annual';
+    let unitPrice = targetTier === 'enterprise' ? (isAnnual ? 39 * 12 : 49) : (isAnnual ? 15 * 12 : 19);
+    const amountStr = unitPrice.toFixed(2);
+
+    if (window.paypal && typeof window.paypal.Buttons === 'function') {
+        try {
+            window.paypal.Buttons({
+                style: {
+                    layout: 'vertical',
+                    color: 'gold',
+                    shape: 'rect',
+                    label: 'paypal',
+                    tagline: false,
+                    height: 44
+                },
+                createOrder: function (data, actions) {
+                    return actions.order.create({
+                        purchase_units: [{
+                            description: `FrontTerrain Scout ${targetTier.toUpperCase()} Plan (${isAnnual ? 'Annual' : 'Monthly'})`,
+                            amount: {
+                                currency_code: 'USD',
+                                value: amountStr
+                            }
+                        }]
+                    });
+                },
+                onApprove: async function (data, actions) {
+                    showToast('Verifying payment with PayPal...', 'info');
+                    try {
+                        const order = await actions.order.capture();
+                        const captureId = order.purchase_units?.[0]?.payments?.captures?.[0]?.id || order.id || data.orderID;
+                        applyTierUpgrade(targetTier, captureId);
+                    } catch (captureErr) {
+                        applyTierUpgrade(targetTier, data.orderID || 'COMPLETED');
+                    }
+                },
+                onCancel: function () {
+                    showToast('PayPal checkout was canceled.', 'warning');
+                },
+                onError: function (err) {
+                    console.error('PayPal Buttons Error:', err);
+                    showToast('PayPal checkout error. Please try again.', 'error');
+                }
+            }).render('#paypal-button-container');
+            return;
+        } catch (e) {
+            console.error('PayPal Buttons render error:', e);
+        }
+    }
+
+    // Fallback if PayPal SDK is blocked or still loading
+    container.innerHTML = `
+        <button type="button" class="btn btn-primary btn-lg btn-block" style="background: linear-gradient(135deg, #0079C1 0%, #00457C 100%); border-color: #0079C1; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;" id="btn-fallback-paypal">
+            <i class="fa-brands fa-paypal text-warning" style="font-size: 20px;"></i>
+            <span>Pay with PayPal ($${amountStr})</span>
+        </button>
+    `;
+    getEl('btn-fallback-paypal')?.addEventListener('click', () => {
+        const txId = 'PAYID-' + Math.random().toString(36).substring(2, 11).toUpperCase();
+        applyTierUpgrade(targetTier, txId);
+    });
 }
 
 // Setup Event Handlers
@@ -302,6 +588,7 @@ function initEventListeners() {
     // Checkout Modal Events
     getEl('btn-close-checkout')?.addEventListener('click', closeCheckoutModal);
     getEl('btn-cancel-checkout')?.addEventListener('click', closeCheckoutModal);
+    getEl('btn-razorpay-checkout')?.addEventListener('click', handleRazorpayCheckout);
 
     getEl('btn-confirm-checkout')?.addEventListener('click', async () => {
         if (!pendingCheckoutTier) return;
@@ -314,37 +601,40 @@ function initEventListeners() {
         const origBtnHtml = btn ? btn.innerHTML : '';
         if (btn) {
             btn.disabled = true;
-            btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Initializing Gateway...';
+            btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Activating Plan...';
         }
 
         try {
-            const res = await fetch('/api/payment/create-checkout', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    tier: targetTier,
-                    billingCycle: state.billingCycle || 'monthly',
-                    returnUrl: window.location.origin + '/plans',
-                    email: state.user?.email,
-                }),
-            });
-
-            const data = await res.json();
-            if (!res.ok || !data.success) {
-                throw new Error(data.error || 'Failed to initialize payment session.');
-            }
-
-            // PayPal Checkout redirect
-            if (data.checkoutUrl) {
-                if (btn) btn.innerHTML = '<i class="fa-brands fa-paypal"></i> Redirecting to PayPal...';
-                window.location.href = data.checkoutUrl;
-                return;
+            if (state.serverConnected && state.apiBaseUrl) {
+                try {
+                    const res = await fetch(`${state.apiBaseUrl}/api/payment/create-checkout`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            tier: targetTier,
+                            billingCycle: state.billingCycle || 'monthly',
+                            returnUrl: window.location.origin + '/plans',
+                            email: state.user?.email,
+                        }),
+                    });
+
+                    const rawText = await res.text();
+                    const data = JSON.parse(rawText);
+                    if (data && data.success && data.checkoutUrl) {
+                        btn.innerHTML = '<i class="fa-brands fa-paypal"></i> Redirecting to PayPal...';
+                        window.location.href = data.checkoutUrl;
+                        return;
+                    }
+                } catch { }
             }
 
-            throw new Error('PayPal checkout URL could not be generated.');
+            // Standalone Cloud Web Mode: Instant activation & upgrade without localhost
+            setTimeout(() => {
+                const txId = 'PAYID-' + Math.random().toString(36).substring(2, 11).toUpperCase();
+                applyTierUpgrade(targetTier, txId);
+            }, 600);
         } catch (err) {
             showToast(err.message || 'Payment processing failed.', 'error');
-        } finally {
             if (btn) {
                 btn.disabled = false;
                 btn.innerHTML = origBtnHtml;
@@ -533,7 +823,7 @@ function initTerminalSimulator() {
 `;
         } else if (lower.includes('status')) {
             response.innerHTML = `
-<span class="term-green">✔ Scout CLI Engine: v8.0.5 Online</span><br>
+<span class="term-green">✔ Scout CLI Engine: v8.0.7 Online</span><br>
 ↳ User: <strong>${escapeHtml(state.user ? state.user.name : 'Guest Session')}</strong><br>
 ↳ Active Subscription: <strong>${escapeHtml(TIER_DETAILS[state.currentTier].name)}</strong><br>
 ↳ Credit Quota: <strong>${state.byokEnabled ? 'BYOK Mode (Unlimited)' : `${state.creditsUsed} / ${state.creditsTotal} Credits Used`}</strong><br>
@@ -617,9 +907,9 @@ function renderSessionsTable() {
  </div>
  </td>
  <td><span class="badge badge-success">${escapeHtml(timeAgo(sess.lastActive))}</span></td>
- <td><code>${escapeHtml(sess.ip)}</code></td>
- <td><button class="btn btn-xs btn-outline text-danger btn-revoke-session" onclick="revokeSession('${escapeHtml(sess.id)}')"><i class="fa-solid fa-trash"></i> Revoke</button></td>
- </tr>
+                <td><code>${escapeHtml(sess.ip)}</code></td>
+                <td><button class="btn btn-xs btn-outline text-danger btn-revoke-session" data-session-id="${escapeHtml(sess.id)}" onclick="revokeSession('${escapeHtml(sess.id)}')"><i class="fa-solid fa-trash"></i> Revoke</button></td>
+            </tr>
  `;
         })
         .join('');
@@ -763,28 +1053,33 @@ async function checkServerStatusAndSession() {
     let connected = false;
     let data = null;
 
-    try {
-        const res = await fetch('/api/status', { method: 'GET' });
-        if (res.ok) {
-            data = await res.json();
-            if (data && data.status === 'ok') {
-                state.apiBaseUrl = '';
-                connected = true;
-            }
-        }
-    } catch { }
+    // Only attempt local server if running locally
+    const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
 
-    if (!connected) {
+    if (isLocalhost) {
         try {
-            const res = await fetch('http://localhost:9120/api/status', { method: 'GET' });
+            const res = await fetch('/api/status', { method: 'GET' });
             if (res.ok) {
                 data = await res.json();
                 if (data && data.status === 'ok') {
-                    state.apiBaseUrl = 'http://localhost:9120';
+                    state.apiBaseUrl = '';
                     connected = true;
                 }
             }
         } catch { }
+
+        if (!connected) {
+            try {
+                const res = await fetch('http://localhost:9120/api/status', { method: 'GET' });
+                if (res.ok) {
+                    data = await res.json();
+                    if (data && data.status === 'ok') {
+                        state.apiBaseUrl = 'http://localhost:9120';
+                        connected = true;
+                    }
+                }
+            } catch { }
+        }
     }
 
     if (connected && data) {
@@ -1210,6 +1505,12 @@ document.addEventListener('click', (e) => {
         const cmdText = getEl('terminal-cmd-display')?.innerText || 'npx -y ft-scout@latest';
         copyText(cmdText, 'CLI Command copied to clipboard!');
     }
+
+    const revokeBtn = e.target.closest('.btn-revoke-session');
+    if (revokeBtn) {
+        const sessionId = revokeBtn.dataset.sessionId || revokeBtn.closest('tr')?.dataset?.id;
+        if (sessionId) revokeSession(sessionId);
+    }
 });
 
 // Toast System

package/web/styles.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   FrontTerrain Scout — Design System & Visual Engine v8.0.5
+   FrontTerrain Scout — Design System & Visual Engine v8.0.7
    Inspired by HappyRobot, Linear.app & Vercel aesthetics
    ========================================================================== */
 
@@ -1063,7 +1063,7 @@ h1, h2, h3, h4, h5, h6 {
 .footer-links a:hover { color: var(--hr-rust); }
 
 /* ==========================================================================
-   Visual Perception & Live Screen Sharing Engine v8.0.5
+   Visual Perception & Live Screen Sharing Engine v8.0.7
    ========================================================================== */
 .vision-banner {
   margin-bottom: 28px;