ft-scout 8.0.6 → 8.0.8

package/web/app.js

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   FrontTerrain Scout — Multi-Page Application Engine v8.0.6
+   FrontTerrain Scout — Multi-Page Application Engine v8.0.8
    ========================================================================== */
 
 const FIREBASE_CONFIG = {
@@ -44,6 +44,9 @@ let state = {
     creditsUsed: 0,
     creditsTotal: 100,
     renewAt: null,
+    cancelAtPeriodEnd: false,
+    pendingDowngrade: null,
+    paidTier: null,
     byokEnabled: false,
     customLlmProvider: 'nvidia',
     customApiKey: '',
@@ -52,6 +55,7 @@ let state = {
 };
 
 let pendingCheckoutTier = null;
+let pendingDowngradeTier = null;
 
 // Audio Synthesizer via Web Audio API
 let audioCtx = null;
@@ -113,9 +117,13 @@ function applyTierUpgrade(tier, transactionId) {
     const quota = targetTier === 'enterprise' ? 10000 : (targetTier === 'pro' ? 1000 : 100);
 
     state.currentTier = targetTier;
+    state.paidTier = targetTier;
+    state.cancelAtPeriodEnd = false;
+    state.pendingDowngrade = null;
     state.creditsTotal = quota;
     state.creditsUsed = 0;
-    state.renewAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();
+    const durationDays = state.billingCycle === 'annual' ? 365 : 30;
+    state.renewAt = new Date(Date.now() + durationDays * 24 * 60 * 60 * 1000).toISOString();
 
     saveSessionToStorage();
     renderAllDynamicComponents();
@@ -205,6 +213,59 @@ function timeAgo(dateInput) {
     return `${days}d ago`;
 }
 
+// Date and Expiration Helpers
+function formatRenewDate(isoDateStr) {
+    if (!isoDateStr) return 'End of billing period';
+    try {
+        const d = new Date(isoDateStr);
+        if (isNaN(d.getTime())) return 'End of billing period';
+        return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    } catch {
+        return 'End of billing period';
+    }
+}
+
+function isSubscriptionExpired() {
+    if (!state.renewAt) return true;
+    const renewDate = new Date(state.renewAt);
+    if (isNaN(renewDate.getTime())) return true;
+    return Date.now() >= renewDate.getTime();
+}
+
+function checkSubscriptionExpiration() {
+    if (!state.renewAt) return;
+    const renewDate = new Date(state.renewAt);
+    if (isNaN(renewDate.getTime())) return;
+
+    const now = new Date();
+    if (now >= renewDate) {
+        if (state.cancelAtPeriodEnd) {
+            // Expiration date has arrived! Transition gracefully to pending downgrade tier
+            const targetTier = state.pendingDowngrade || 'free';
+            state.currentTier = targetTier;
+            state.paidTier = targetTier === 'free' ? null : targetTier;
+            state.cancelAtPeriodEnd = false;
+            state.pendingDowngrade = null;
+            state.creditsTotal = targetTier === 'pro' ? 1000 : (targetTier === 'enterprise' ? 10000 : 100);
+            state.creditsUsed = 0;
+            state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
+            saveSessionToStorage();
+            if (state.serverConnected) syncAuthWithServer();
+            showToast(`Your subscription period has ended. Account transitioned to ${TIER_DETAILS[targetTier].name}.`, 'info');
+        } else if (state.currentTier !== 'free') {
+            // Auto-renew monthly credits cycle
+            const nextRenewal = new Date(renewDate);
+            while (nextRenewal <= now) {
+                nextRenewal.setMonth(nextRenewal.getMonth() + 1);
+            }
+            state.renewAt = nextRenewal.toISOString();
+            state.creditsUsed = 0;
+            saveSessionToStorage();
+            if (state.serverConnected) syncAuthWithServer();
+        }
+    }
+}
+
 // Load Subscription Tier & Dynamic Credits from Local Storage
 function loadTierAndCreditsFromStorage() {
     const savedTier = localStorage.getItem('scout_current_tier');
@@ -230,10 +291,17 @@ function loadTierAndCreditsFromStorage() {
         state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
     }
 
+    state.cancelAtPeriodEnd = localStorage.getItem('scout_cancel_at_period_end') === 'true';
+    state.pendingDowngrade = localStorage.getItem('scout_pending_downgrade') || null;
+    const savedPaidTier = localStorage.getItem('scout_paid_tier');
+    state.paidTier = (savedPaidTier && TIER_DETAILS[savedPaidTier]) ? savedPaidTier : (state.currentTier !== 'free' ? state.currentTier : null);
+
     state.byokEnabled = localStorage.getItem('scout_byok_enabled') === 'true';
     state.customLlmProvider = localStorage.getItem('scout_byok_provider') || 'nvidia';
     state.customApiKey = localStorage.getItem('scout_byok_key') || '';
     state.customBaseUrl = localStorage.getItem('scout_byok_endpoint') || '';
+
+    checkSubscriptionExpiration();
 }
 
 // Render All Dynamic Components
@@ -283,6 +351,78 @@ function closeCheckoutModal() {
     if (container) container.innerHTML = '';
 }
 
+// Downgrade & Cancellation Modal Handlers
+function openDowngradeModal(targetTier = 'free') {
+    pendingDowngradeTier = targetTier;
+    const currentInfo = TIER_DETAILS[state.currentTier] || TIER_DETAILS.pro;
+    const renewDateFormatted = formatRenewDate(state.renewAt);
+
+    if (getEl('downgrade-current-plan')) {
+        getEl('downgrade-current-plan').innerText = currentInfo.name;
+    }
+    if (getEl('downgrade-expiration-date')) {
+        getEl('downgrade-expiration-date').innerText = renewDateFormatted;
+    }
+    if (getEl('downgrade-modal-desc')) {
+        getEl('downgrade-modal-desc').innerHTML = `You are currently subscribed to <strong class="text-bright">${escapeHtml(currentInfo.name)}</strong>.`;
+    }
+
+    const modal = getEl('downgrade-modal');
+    if (modal) modal.classList.remove('hidden');
+}
+
+function closeDowngradeModal() {
+    pendingDowngradeTier = null;
+    const modal = getEl('downgrade-modal');
+    if (modal) modal.classList.add('hidden');
+}
+
+function confirmScheduleDowngrade() {
+    const targetTier = pendingDowngradeTier || 'free';
+    state.cancelAtPeriodEnd = true;
+    state.pendingDowngrade = targetTier;
+    saveSessionToStorage();
+    if (state.serverConnected) syncAuthWithServer();
+    closeDowngradeModal();
+    renderAllDynamicComponents();
+    showToast(`Subscription will cancel on ${formatRenewDate(state.renewAt)}. You retain all ${TIER_DETAILS[state.currentTier].name} features until then!`, 'warning');
+}
+
+function confirmImmediateDowngrade() {
+    const targetTier = pendingDowngradeTier || 'free';
+    state.currentTier = targetTier;
+    state.paidTier = targetTier === 'free' ? null : targetTier;
+    state.cancelAtPeriodEnd = false;
+    state.pendingDowngrade = null;
+    state.creditsTotal = targetTier === 'pro' ? 1000 : (targetTier === 'enterprise' ? 10000 : 100);
+    state.creditsUsed = 0;
+    const now = new Date();
+    state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
+    saveSessionToStorage();
+    if (state.serverConnected) syncAuthWithServer();
+    closeDowngradeModal();
+    renderAllDynamicComponents();
+    showToast(`Downgraded to ${TIER_DETAILS[targetTier].name} immediately.`, 'info');
+}
+
+function resumeSubscription() {
+    if (!state.currentTier || state.currentTier === 'free') {
+        if (state.paidTier && state.paidTier !== 'free' && !isSubscriptionExpired()) {
+            state.currentTier = state.paidTier;
+            state.creditsTotal = state.currentTier === 'pro' ? 1000 : 10000;
+        } else {
+            return;
+        }
+    }
+    state.cancelAtPeriodEnd = false;
+    state.pendingDowngrade = null;
+    state.paidTier = state.currentTier;
+    saveSessionToStorage();
+    if (state.serverConnected) syncAuthWithServer();
+    renderAllDynamicComponents();
+    showToast(`🎉 Subscription resumed! Your ${TIER_DETAILS[state.currentTier].name} is active and will auto-renew.`, 'success');
+}
+
 // Render and initialize Razorpay button UI
 function renderRazorpayButton(targetTier) {
     const isAnnual = state.billingCycle === 'annual';
@@ -293,7 +433,7 @@ function renderRazorpayButton(targetTier) {
     btnRzp.disabled = false;
     btnRzp.innerHTML = `
         <i class="fa-solid fa-bolt text-warning" style="font-size: 18px;"></i>
-        <span>Pay ₹${inrAmount.toLocaleString('en-IN')} with UPI / Cards (Razorpay)</span>
+        <span>Pay with Razorpay</span>
     `;
 }
 
@@ -310,13 +450,38 @@ async function handleRazorpayCheckout() {
         btnRzp.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Connecting to Razorpay...';
     }
 
-    const apiBase = state.apiBaseUrl || (window.location.origin.includes('localhost') || window.location.origin.includes('127.0.0.1') ? '' : 'http://localhost:9120');
-
     try {
-        // Fetch public Razorpay key ID from backend if not yet cached
-        if (!state.razorpayKeyId) {
+        // 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(`${apiBase}/api/razorpay/config`, { method: 'GET' });
+                const configRes = await fetch(`${safeApiBase}/api/razorpay/config`, { method: 'GET' });
                 if (configRes.ok) {
                     const cfg = await configRes.json();
                     if (cfg && cfg.key_id) {
@@ -330,72 +495,81 @@ async function handleRazorpayCheckout() {
 
         const keyId = state.razorpayKeyId || (window.RAZORPAY_KEY_ID || 'rzp_live_Tajz48jXVm0H1Y');
 
-        // STEP 1: BACKEND - Call POST /api/create-order
-        const orderRes = await fetch(`${apiBase}/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 || '',
-                },
-            }),
-        });
-
-        if (!orderRes.ok) {
-            const errData = await orderRes.json().catch(() => ({}));
-            throw new Error(errData.error || `Order creation failed: HTTP ${orderRes.status}`);
-        }
+        // 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);
 
-        const order = await orderRes.json();
-        if (!order || !order.order_id) {
-            throw new Error('Invalid order response received from backend.');
+                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);
+            }
         }
 
-        // STEP 2: FRONTEND - Open Razorpay Checkout Modal
         if (typeof window.Razorpay !== 'function') {
             throw new Error('Razorpay SDK not loaded. Please ensure checkout.js is loaded.');
         }
 
         const options = {
             key: keyId,
-            amount: order.amount,
-            currency: order.currency || 'INR',
+            amount: amountInPaise,
+            currency: 'INR',
             name: 'FrontTerrain Scout',
             description: `Scout ${targetTier.toUpperCase()} Plan (${isAnnual ? 'Annual' : 'Monthly'})`,
             image: 'https://tryscout.web.app/ScoutFavicon.png',
-            order_id: order.order_id,
             handler: async function (response) {
-                // STEP 3: BACKEND - Send razorpay_payment_id, razorpay_order_id, razorpay_signature to /api/verify-payment
-                showToast('Verifying payment signature with backend...', 'info');
-                try {
-                    const verifyRes = await fetch(`${apiBase}/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();
+                showToast('Payment successful! Activating subscription...', 'info');
 
-                    if (verifyRes.ok && verifyData.success) {
-                        applyTierUpgrade(targetTier, response.razorpay_payment_id);
-                    } else {
-                        showToast(verifyData.error || 'Payment signature mismatch. Upgrade not applied.', 'error');
+                // 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);
                     }
-                } catch (err) {
-                    console.error('Signature verification network error:', err);
-                    showToast('Verification request failed. Please check your network connection.', 'error');
                 }
+
+                // Direct activation (standalone cloud web mode or client-side checkout)
+                applyTierUpgrade(targetTier, response.razorpay_payment_id);
             },
             prefill: {
                 name: state.user?.name || 'Developer',
@@ -410,12 +584,16 @@ async function handleRazorpayCheckout() {
             },
             modal: {
                 ondismiss: function () {
-                    showToast('Razorpay payment modal closed by user.', 'warning');
+                    showToast('payment canceled.', 'warning');
                     renderRazorpayButton(targetTier);
                 },
             },
         };
 
+        if (orderId) {
+            options.order_id = orderId;
+        }
+
         const rzp = new window.Razorpay(options);
 
         // Handle payment failure event
@@ -552,6 +730,13 @@ function initEventListeners() {
     getEl('btn-cancel-checkout')?.addEventListener('click', closeCheckoutModal);
     getEl('btn-razorpay-checkout')?.addEventListener('click', handleRazorpayCheckout);
 
+    // Downgrade Modal Events
+    getEl('btn-close-downgrade')?.addEventListener('click', closeDowngradeModal);
+    getEl('btn-cancel-downgrade-modal')?.addEventListener('click', closeDowngradeModal);
+    getEl('btn-confirm-schedule-downgrade')?.addEventListener('click', confirmScheduleDowngrade);
+    getEl('btn-confirm-immediate-downgrade')?.addEventListener('click', confirmImmediateDowngrade);
+    getEl('btn-banner-resume-plan')?.addEventListener('click', resumeSubscription);
+
     getEl('btn-confirm-checkout')?.addEventListener('click', async () => {
         if (!pendingCheckoutTier) return;
 
@@ -689,18 +874,28 @@ function initEventListeners() {
             const targetTier = btn.getAttribute('data-tier');
             if (!targetTier || !TIER_DETAILS[targetTier]) return;
 
-            if (targetTier === 'free') {
-                state.currentTier = 'free';
-                state.creditsTotal = 100;
-                saveSessionToStorage();
-                syncAuthWithServer();
-                renderCreditUsageUI();
-                renderTiersUI();
-                updateUserUI();
-                showToast('Switched to Developer Free Tier.', 'info');
-            } else {
-                openCheckoutModal(targetTier);
+            // 1. Clicked Current Active Tier
+            if (targetTier === state.currentTier) {
+                if (state.cancelAtPeriodEnd) {
+                    resumeSubscription();
+                }
+                return;
+            }
+
+            // 2. Clicked to Downgrade (from Pro/Enterprise to Free, or Enterprise to Pro)
+            if (state.currentTier !== 'free' && (targetTier === 'free' || (state.currentTier === 'enterprise' && targetTier === 'pro'))) {
+                openDowngradeModal(targetTier);
+                return;
             }
+
+            // 3. User already has an active, unexpired paid subscription for this tier
+            if (state.paidTier === targetTier && !isSubscriptionExpired()) {
+                resumeSubscription();
+                return;
+            }
+
+            // 4. Regular Upgrade via Checkout Modal
+            openCheckoutModal(targetTier);
         });
     });
 }
@@ -785,7 +980,7 @@ function initTerminalSimulator() {
 `;
         } else if (lower.includes('status')) {
             response.innerHTML = `
-<span class="term-green">✔ Scout CLI Engine: v8.0.6 Online</span><br>
+<span class="term-green">✔ Scout CLI Engine: v8.0.8 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>
@@ -844,6 +1039,21 @@ function saveSessionsToStorage() {
 
 function renderSessionsTable() {
     const tbody = getEl('session-table-body');
+    const slotCounter = getEl('session-slot-counter');
+
+    const tier = (state.currentTier || 'free').toLowerCase();
+    const maxSlots = tier === 'enterprise' ? 'Unlimited' : (tier === 'pro' ? 5 : 1);
+    const sessionCount = state.sessions && state.sessions.length > 0 ? state.sessions.length : 1;
+
+    if (slotCounter) {
+        slotCounter.innerText = `${sessionCount} / ${maxSlots} Slots Used`;
+        if (typeof maxSlots === 'number' && sessionCount >= maxSlots) {
+            slotCounter.className = 'badge badge-warning';
+        } else {
+            slotCounter.className = 'badge badge-primary';
+        }
+    }
+
     if (!tbody) return;
 
     if (!state.sessions || state.sessions.length === 0) {
@@ -967,18 +1177,52 @@ function renderCreditUsageUI() {
         renewDateStr = `${nextMonth.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} at 00:00:00 UTC`;
     }
 
-    if (valRenew) valRenew.innerText = renewDateStr;
+    if (valRenew) {
+        if (state.cancelAtPeriodEnd && state.currentTier !== 'free') {
+            valRenew.innerHTML = `${renewDateStr} <span style="color: #eab308; font-weight: 600; margin-left: 6px;">(Cancels at period end)</span>`;
+        } else {
+            valRenew.innerText = renewDateStr;
+        }
+    }
 }
 
 // Render Paid Tiers UI
 function renderTiersUI() {
     const current = TIER_DETAILS[state.currentTier] || TIER_DETAILS.free;
+    const isScheduledCancel = Boolean(state.cancelAtPeriodEnd && state.currentTier !== 'free');
+    const formattedDate = formatRenewDate(state.renewAt);
 
     if (getEl('current-plan-title')) getEl('current-plan-title').innerText = current.name;
-    if (getEl('current-plan-badge')) getEl('current-plan-badge').innerText = current.badge;
-    if (getEl('current-plan-desc')) getEl('current-plan-desc').innerText = current.desc;
     if (getEl('tier-active-icon')) getEl('tier-active-icon').innerHTML = current.icon;
 
+    if (getEl('current-plan-badge')) {
+        if (isScheduledCancel) {
+            getEl('current-plan-badge').innerText = `CANCELS ON ${formattedDate.toUpperCase()}`;
+            getEl('current-plan-badge').className = 'badge badge-warning';
+        } else {
+            getEl('current-plan-badge').innerText = current.badge;
+            getEl('current-plan-badge').className = 'badge badge-success';
+        }
+    }
+
+    if (getEl('current-plan-desc')) {
+        if (isScheduledCancel) {
+            const targetTierName = TIER_DETAILS[state.pendingDowngrade || 'free']?.name || 'Developer Free Tier';
+            getEl('current-plan-desc').innerText = `Your plan is active until ${formattedDate}. It will automatically switch to ${targetTierName} on this date. You retain all features and credits until then.`;
+        } else {
+            getEl('current-plan-desc').innerText = current.desc;
+        }
+    }
+
+    const bannerResumeBtn = getEl('btn-banner-resume-plan');
+    if (bannerResumeBtn) {
+        if (isScheduledCancel) {
+            bannerResumeBtn.classList.remove('hidden');
+        } else {
+            bannerResumeBtn.classList.add('hidden');
+        }
+    }
+
     const isAnnual = state.billingCycle === 'annual';
     if (getEl('price-pro-val')) getEl('price-pro-val').innerText = isAnnual ? '15' : '19';
     if (getEl('price-pro-period')) getEl('price-pro-period').innerText = isAnnual ? '/ month (billed annually)' : '/ month';
@@ -993,18 +1237,57 @@ function renderTiersUI() {
 
         if (t === state.currentTier) {
             card.classList.add('active-tier-card');
-            btn.className = 'btn btn-success btn-block btn-select-tier';
-            btn.innerText = 'Current Plan';
-            btn.disabled = true;
-        } else {
-            card.classList.remove('active-tier-card');
-            btn.disabled = false;
-            if (t === 'pro') {
+            if (isScheduledCancel) {
                 btn.className = 'btn btn-primary btn-block btn-select-tier';
-                btn.innerText = 'Upgrade to Pro';
+                btn.innerHTML = `<i class="fa-solid fa-rotate-left"></i> Resume ${current.name.split(' ')[0]}`;
+                btn.disabled = false;
             } else {
-                btn.className = 'btn btn-outline btn-block btn-select-tier';
-                btn.innerText = t === 'enterprise' ? 'Upgrade to Enterprise' : 'Switch to Free';
+                btn.className = 'btn btn-success btn-block btn-select-tier';
+                btn.innerText = 'Current Plan';
+                btn.disabled = true;
+            }
+        } else {
+            card.classList.remove('active-tier-card');
+            if (t === 'free') {
+                if (isScheduledCancel && (state.pendingDowngrade === 'free' || !state.pendingDowngrade)) {
+                    btn.className = 'btn btn-outline btn-block btn-select-tier';
+                    btn.innerText = `Downgrade Scheduled (${formattedDate})`;
+                    btn.disabled = true;
+                } else {
+                    btn.disabled = false;
+                    btn.className = 'btn btn-outline btn-block btn-select-tier';
+                    btn.innerText = state.currentTier !== 'free' ? 'Switch to Free' : 'Current Plan';
+                }
+            } else if (t === 'pro') {
+                if (state.paidTier === 'pro' && !isSubscriptionExpired()) {
+                    btn.className = 'btn btn-primary btn-block btn-select-tier';
+                    btn.innerHTML = `<i class="fa-solid fa-rotate-left"></i> Reactivate Pro (Active until ${formattedDate})`;
+                    btn.disabled = false;
+                } else if (state.currentTier === 'enterprise') {
+                    if (isScheduledCancel && state.pendingDowngrade === 'pro') {
+                        btn.className = 'btn btn-outline btn-block btn-select-tier';
+                        btn.innerText = `Downgrade Scheduled (${formattedDate})`;
+                        btn.disabled = true;
+                    } else {
+                        btn.className = 'btn btn-outline btn-block btn-select-tier';
+                        btn.innerText = 'Downgrade to Pro';
+                        btn.disabled = false;
+                    }
+                } else {
+                    btn.className = 'btn btn-primary btn-block btn-select-tier';
+                    btn.innerText = 'Upgrade to Pro';
+                    btn.disabled = false;
+                }
+            } else if (t === 'enterprise') {
+                if (state.paidTier === 'enterprise' && !isSubscriptionExpired()) {
+                    btn.className = 'btn btn-warning btn-block btn-select-tier';
+                    btn.innerHTML = `<i class="fa-solid fa-rotate-left"></i> Reactivate Enterprise (Active until ${formattedDate})`;
+                    btn.disabled = false;
+                } else {
+                    btn.className = 'btn btn-outline btn-block btn-select-tier';
+                    btn.innerText = 'Upgrade to Enterprise';
+                    btn.disabled = false;
+                }
             }
         }
     });
@@ -1056,6 +1339,9 @@ async function checkServerStatusAndSession() {
             if (typeof data.auth.creditsTotal === 'number') state.creditsTotal = data.auth.creditsTotal;
             if (data.auth.currentTier) state.currentTier = data.auth.currentTier;
             if (data.auth.renewAt) state.renewAt = data.auth.renewAt;
+            if (typeof data.auth.cancelAtPeriodEnd === 'boolean') state.cancelAtPeriodEnd = data.auth.cancelAtPeriodEnd;
+            if (data.auth.pendingDowngrade !== undefined) state.pendingDowngrade = data.auth.pendingDowngrade;
+            if (data.auth.paidTier !== undefined) state.paidTier = data.auth.paidTier;
             if (typeof data.auth.byokEnabled === 'boolean') state.byokEnabled = data.auth.byokEnabled;
             if (data.auth.customLlmProvider) state.customLlmProvider = data.auth.customLlmProvider;
             if (typeof data.auth.customApiKey === 'string') state.customApiKey = data.auth.customApiKey;
@@ -1394,6 +1680,15 @@ function updateUserUI() {
     if (getEl('input-byok-endpoint')) getEl('input-byok-endpoint').value = state.customBaseUrl || '';
     if (getEl('input-byok-key')) getEl('input-byok-key').value = state.customApiKey || '';
     if (getEl('checkbox-enable-byok')) getEl('checkbox-enable-byok').checked = Boolean(state.byokEnabled);
+
+    const inceptionBadge = getEl('nvidia-inception-badge');
+    if (inceptionBadge) {
+        if (state.currentTier === 'pro' || state.currentTier === 'enterprise') {
+            inceptionBadge.style.display = 'inline-flex';
+        } else {
+            inceptionBadge.style.display = 'none';
+        }
+    }
 }
 
 async function handleLogout() {
@@ -1423,6 +1718,9 @@ function saveSessionToStorage() {
     localStorage.setItem('scout_credits_used', String(state.creditsUsed));
     localStorage.setItem('scout_credits_total', String(state.creditsTotal));
     if (state.renewAt) localStorage.setItem('scout_renew_at', state.renewAt);
+    localStorage.setItem('scout_cancel_at_period_end', String(Boolean(state.cancelAtPeriodEnd)));
+    localStorage.setItem('scout_pending_downgrade', state.pendingDowngrade || '');
+    localStorage.setItem('scout_paid_tier', state.paidTier || '');
     localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
     localStorage.setItem('scout_byok_provider', state.customLlmProvider);
     localStorage.setItem('scout_byok_key', state.customApiKey);
@@ -1443,6 +1741,9 @@ async function syncAuthWithServer() {
                     creditsTotal: state.creditsTotal,
                     currentTier: state.currentTier,
                     renewAt: state.renewAt,
+                    cancelAtPeriodEnd: state.cancelAtPeriodEnd,
+                    pendingDowngrade: state.pendingDowngrade,
+                    paidTier: state.paidTier,
                     byokEnabled: state.byokEnabled,
                     customLlmProvider: state.customLlmProvider,
                     customApiKey: state.customApiKey,

package/web/styles.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   FrontTerrain Scout — Design System & Visual Engine v8.0.6
+   FrontTerrain Scout — Design System & Visual Engine v8.0.8
    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.6
+   Visual Perception & Live Screen Sharing Engine v8.0.8
    ========================================================================== */
 .vision-banner {
   margin-bottom: 28px;