ft-scout 6.0.3 → 6.0.5

package/web/app.js

@@ -1,1063 +1,1063 @@
 /* ==========================================================================
-   FrontTerrain Scout — Account & Paid Tiers Dashboard Controller
-   ========================================================================== */
+ FrontTerrain Scout — Account & Paid Tiers Dashboard Controller
+ ========================================================================== */
 
 const FIREBASE_CONFIG = {
-  apiKey: 'AIzaSyCMVNDgR8EejfXofUy87L7hsKxi3E_C3lg',
-  projectId: 'frontterrain',
-  tenantId: 'ft-scout-auth-gc2v5',
-  baseAuthUrl: 'https://identitytoolkit.googleapis.com/v1/accounts',
+ apiKey: 'AIzaSyCMVNDgR8EejfXofUy87L7hsKxi3E_C3lg',
+ projectId: 'frontterrain',
+ tenantId: 'ft-scout-auth-gc2v5',
+ baseAuthUrl: 'https://identitytoolkit.googleapis.com/v1/accounts',
 };
 
 // Tier Configuration Details
 const TIER_DETAILS = {
-  free: {
-    name: 'Developer Free Tier',
-    badge: 'ACTIVE',
-    desc: 'Standard access to Scout CLI features & local execution.',
-    icon: '<i class="fa-solid fa-star text-warning" style="font-size: 24px;"></i>',
-  },
-  pro: {
-    name: 'Pro Developer Tier',
-    badge: 'PRO ACTIVE',
-    desc: 'High-power AI co-pilot capabilities, priority quota & 5 active CLI sessions.',
-    icon: '<i class="fa-solid fa-bolt text-primary" style="font-size: 24px;"></i>',
-  },
-  enterprise: {
-    name: 'Team & Enterprise Tier',
-    badge: 'ENTERPRISE ACTIVE',
-    desc: 'Organization controls, security policies & dedicated scale.',
-    icon: '<i class="fa-solid fa-building text-warning" style="font-size: 24px;"></i>',
-  },
+ free: {
+ name: 'Developer Free Tier',
+ badge: 'ACTIVE',
+ desc: 'Standard access to Scout CLI features & local execution.',
+ icon: '<i class="fa-solid fa-star text-warning" style="font-size: 24px;"></i>',
+ },
+ pro: {
+ name: 'Pro Developer Tier',
+ badge: 'PRO ACTIVE',
+ desc: 'High-power AI co-pilot capabilities, priority quota & 5 active CLI sessions.',
+ icon: '<i class="fa-solid fa-bolt text-primary" style="font-size: 24px;"></i>',
+ },
+ enterprise: {
+ name: 'Team & Enterprise Tier',
+ badge: 'ENTERPRISE ACTIVE',
+ desc: 'Organization controls, security policies & dedicated scale.',
+ icon: '<i class="fa-solid fa-building text-warning" style="font-size: 24px;"></i>',
+ },
 };
 
 // Global Application State
 let state = {
-  user: null,
-  token: null,
-  refreshToken: null,
-  activeTab: 'account',
-  serverConnected: false,
-  apiBaseUrl: '',
-  sessions: [],
-  currentTier: 'free',
-  billingCycle: 'monthly',
-  creditsUsed: 0,
-  creditsTotal: 100,
-  renewAt: null,
-  byokEnabled: false,
-  customLlmProvider: 'gemini',
-  customApiKey: '',
-  customBaseUrl: '',
+ user: null,
+ token: null,
+ refreshToken: null,
+ activeTab: 'account',
+ serverConnected: false,
+ apiBaseUrl: '',
+ sessions: [],
+ currentTier: 'free',
+ billingCycle: 'monthly',
+ creditsUsed: 0,
+ creditsTotal: 100,
+ renewAt: null,
+ byokEnabled: false,
+ customLlmProvider: 'gemini',
+ customApiKey: '',
+ customBaseUrl: '',
 };
 
 let pendingCheckoutTier = null;
 
 // DOM Elements Reference
 const elements = {
-  // Views
-  authSection: document.getElementById('auth-section'),
-  dashboardSection: document.getElementById('dashboard-section'),
-  
-  // Auth Controls
-  tabLoginBtn: document.getElementById('tab-login-btn'),
-  tabSignupBtn: document.getElementById('tab-signup-btn'),
-  loginForm: document.getElementById('login-form'),
-  signupForm: document.getElementById('signup-form'),
-  btnOpenAuth: document.getElementById('btn-open-auth'),
-  btnDemoMode: document.getElementById('btn-demo-mode'),
-  btnForgotPwd: document.getElementById('btn-forgot-pwd'),
-  
-  // Navigation & User Menu
-  mainNav: document.getElementById('main-nav'),
-  userMenu: document.getElementById('user-menu'),
-  userMenuToggle: document.getElementById('user-menu-toggle'),
-  userDropdown: document.getElementById('user-dropdown'),
-  navAvatar: document.getElementById('nav-avatar'),
-  navUserName: document.getElementById('nav-user-name'),
-  dropdownName: document.getElementById('dropdown-name'),
-  dropdownEmail: document.getElementById('dropdown-email'),
-  btnDropdownLogout: document.getElementById('btn-dropdown-logout'),
-  btnDropdownProfile: document.getElementById('btn-dropdown-profile'),
-  btnDropdownTiers: document.getElementById('btn-dropdown-tiers'),
-  navTenantTag: document.getElementById('nav-tenant-tag'),
-  navTenantName: document.getElementById('nav-tenant-name'),
-  
-  // Account & Header Controls
-  userDisplayName: document.getElementById('user-display-name'),
-  btnNavTiersHero: document.getElementById('btn-nav-tiers-hero'),
-  sessionTableBody: document.getElementById('session-table-body'),
-
-  // Credit Quota & Usage Controls
-  valCreditsUsed: document.getElementById('val-credits-used'),
-  valCreditsRemaining: document.getElementById('val-credits-remaining'),
-  valCreditsTotal: document.getElementById('val-credits-total'),
-  valCreditsPct: document.getElementById('val-credits-pct'),
-  creditProgressFill: document.getElementById('credit-progress-fill'),
-  valRenewDatetime: document.getElementById('val-renew-datetime'),
-  btnUpgradeCreditsHero: document.getElementById('btn-upgrade-credits-hero'),
-  creditStatusBadge: document.getElementById('credit-status-badge'),
-  labelCreditConsumption: document.getElementById('label-credit-consumption'),
-  byokBannerNote: document.getElementById('byok-banner-note'),
-  
-  // BYOK & Custom Proxy Endpoint Inputs
-  byokForm: document.getElementById('byok-form'),
-  selectByokProvider: document.getElementById('select-byok-provider'),
-  inputByokEndpoint: document.getElementById('input-byok-endpoint'),
-  inputByokKey: document.getElementById('input-byok-key'),
-  checkboxEnableByok: document.getElementById('checkbox-enable-byok'),
-  byokStatusBadge: document.getElementById('byok-status-badge'),
-  
-  // Profile Settings Inputs
-  settingsDisplayName: document.getElementById('settings-display-name'),
-  settingsEmail: document.getElementById('settings-email'),
-  settingsUid: document.getElementById('settings-uid'),
-  settingsActiveTier: document.getElementById('settings-active-tier'),
-  profileForm: document.getElementById('profile-form'),
-  btnAccountLogout: document.getElementById('btn-account-logout'),
-
-  // Paid Tiers UI
-  currentPlanTitle: document.getElementById('current-plan-title'),
-  currentPlanBadge: document.getElementById('current-plan-badge'),
-  currentPlanDesc: document.getElementById('current-plan-desc'),
-  tierActiveIcon: document.getElementById('tier-active-icon'),
-  toggleBillingCycle: document.getElementById('toggle-billing-cycle'),
-  priceProVal: document.getElementById('price-pro-val'),
-  priceProPeriod: document.getElementById('price-pro-period'),
-  priceEntVal: document.getElementById('price-ent-val'),
-  priceEntPeriod: document.getElementById('price-ent-period'),
-
-  // Checkout Modal Controls
-  checkoutModal: document.getElementById('checkout-modal'),
-  checkoutModalTitle: document.getElementById('checkout-modal-title'),
-  checkoutPlanName: document.getElementById('checkout-plan-name'),
-  checkoutBillingCycle: document.getElementById('checkout-billing-cycle'),
-  checkoutPlanPrice: document.getElementById('checkout-plan-price'),
-  checkoutPricePeriod: document.getElementById('checkout-price-period'),
-  checkoutQuotaVal: document.getElementById('checkout-quota-val'),
-  btnCloseCheckout: document.getElementById('btn-close-checkout'),
-  btnCancelCheckout: document.getElementById('btn-cancel-checkout'),
-  btnConfirmCheckout: document.getElementById('btn-confirm-checkout'),
-
-  // Toast Container
-  toastContainer: document.getElementById('toast-container'),
+ // Views
+ authSection: document.getElementById('auth-section'),
+ dashboardSection: document.getElementById('dashboard-section'),
+ 
+ // Auth Controls
+ tabLoginBtn: document.getElementById('tab-login-btn'),
+ tabSignupBtn: document.getElementById('tab-signup-btn'),
+ loginForm: document.getElementById('login-form'),
+ signupForm: document.getElementById('signup-form'),
+ btnOpenAuth: document.getElementById('btn-open-auth'),
+ btnDemoMode: document.getElementById('btn-demo-mode'),
+ btnForgotPwd: document.getElementById('btn-forgot-pwd'),
+ 
+ // Navigation & User Menu
+ mainNav: document.getElementById('main-nav'),
+ userMenu: document.getElementById('user-menu'),
+ userMenuToggle: document.getElementById('user-menu-toggle'),
+ userDropdown: document.getElementById('user-dropdown'),
+ navAvatar: document.getElementById('nav-avatar'),
+ navUserName: document.getElementById('nav-user-name'),
+ dropdownName: document.getElementById('dropdown-name'),
+ dropdownEmail: document.getElementById('dropdown-email'),
+ btnDropdownLogout: document.getElementById('btn-dropdown-logout'),
+ btnDropdownProfile: document.getElementById('btn-dropdown-profile'),
+ btnDropdownTiers: document.getElementById('btn-dropdown-tiers'),
+ navTenantTag: document.getElementById('nav-tenant-tag'),
+ navTenantName: document.getElementById('nav-tenant-name'),
+ 
+ // Account & Header Controls
+ userDisplayName: document.getElementById('user-display-name'),
+ btnNavTiersHero: document.getElementById('btn-nav-tiers-hero'),
+ sessionTableBody: document.getElementById('session-table-body'),
+
+ // Credit Quota & Usage Controls
+ valCreditsUsed: document.getElementById('val-credits-used'),
+ valCreditsRemaining: document.getElementById('val-credits-remaining'),
+ valCreditsTotal: document.getElementById('val-credits-total'),
+ valCreditsPct: document.getElementById('val-credits-pct'),
+ creditProgressFill: document.getElementById('credit-progress-fill'),
+ valRenewDatetime: document.getElementById('val-renew-datetime'),
+ btnUpgradeCreditsHero: document.getElementById('btn-upgrade-credits-hero'),
+ creditStatusBadge: document.getElementById('credit-status-badge'),
+ labelCreditConsumption: document.getElementById('label-credit-consumption'),
+ byokBannerNote: document.getElementById('byok-banner-note'),
+ 
+ // BYOK & Custom Proxy Endpoint Inputs
+ byokForm: document.getElementById('byok-form'),
+ selectByokProvider: document.getElementById('select-byok-provider'),
+ inputByokEndpoint: document.getElementById('input-byok-endpoint'),
+ inputByokKey: document.getElementById('input-byok-key'),
+ checkboxEnableByok: document.getElementById('checkbox-enable-byok'),
+ byokStatusBadge: document.getElementById('byok-status-badge'),
+ 
+ // Profile Settings Inputs
+ settingsDisplayName: document.getElementById('settings-display-name'),
+ settingsEmail: document.getElementById('settings-email'),
+ settingsUid: document.getElementById('settings-uid'),
+ settingsActiveTier: document.getElementById('settings-active-tier'),
+ profileForm: document.getElementById('profile-form'),
+ btnAccountLogout: document.getElementById('btn-account-logout'),
+
+ // Paid Tiers UI
+ currentPlanTitle: document.getElementById('current-plan-title'),
+ currentPlanBadge: document.getElementById('current-plan-badge'),
+ currentPlanDesc: document.getElementById('current-plan-desc'),
+ tierActiveIcon: document.getElementById('tier-active-icon'),
+ toggleBillingCycle: document.getElementById('toggle-billing-cycle'),
+ priceProVal: document.getElementById('price-pro-val'),
+ priceProPeriod: document.getElementById('price-pro-period'),
+ priceEntVal: document.getElementById('price-ent-val'),
+ priceEntPeriod: document.getElementById('price-ent-period'),
+
+ // Checkout Modal Controls
+ checkoutModal: document.getElementById('checkout-modal'),
+ checkoutModalTitle: document.getElementById('checkout-modal-title'),
+ checkoutPlanName: document.getElementById('checkout-plan-name'),
+ checkoutBillingCycle: document.getElementById('checkout-billing-cycle'),
+ checkoutPlanPrice: document.getElementById('checkout-plan-price'),
+ checkoutPricePeriod: document.getElementById('checkout-price-period'),
+ checkoutQuotaVal: document.getElementById('checkout-quota-val'),
+ btnCloseCheckout: document.getElementById('btn-close-checkout'),
+ btnCancelCheckout: document.getElementById('btn-cancel-checkout'),
+ btnConfirmCheckout: document.getElementById('btn-confirm-checkout'),
+
+ // Toast Container
+ toastContainer: document.getElementById('toast-container'),
 };
 
 // Initialize Application
 document.addEventListener('DOMContentLoaded', async () => {
-  loadTierAndCreditsFromStorage();
-  loadSessionsFromStorage();
-  initEventListeners();
-  renderAllDynamicComponents();
-  await checkServerStatusAndSession();
+ loadTierAndCreditsFromStorage();
+ loadSessionsFromStorage();
+ initEventListeners();
+ renderAllDynamicComponents();
+ await checkServerStatusAndSession();
 });
 
 // Time Helper Function for Dynamic Relative Timestamps
 function timeAgo(dateInput) {
-  if (!dateInput) return 'Just now';
-  const date = new Date(dateInput);
-  if (isNaN(date.getTime())) return String(dateInput);
-  
-  const now = new Date();
-  const seconds = Math.floor((now - date) / 1000);
-  if (seconds < 45) return 'Just now';
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  return `${days}d ago`;
+ if (!dateInput) return 'Just now';
+ const date = new Date(dateInput);
+ if (isNaN(date.getTime())) return String(dateInput);
+ 
+ const now = new Date();
+ const seconds = Math.floor((now - date) / 1000);
+ if (seconds < 45) return 'Just now';
+ const minutes = Math.floor(seconds / 60);
+ if (minutes < 60) return `${minutes}m ago`;
+ const hours = Math.floor(minutes / 60);
+ if (hours < 24) return `${hours}h ago`;
+ const days = Math.floor(hours / 24);
+ return `${days}d ago`;
 }
 
 // Load Subscription Tier & Dynamic Credits from Local Storage / Config
 function loadTierAndCreditsFromStorage() {
-  const savedTier = localStorage.getItem('scout_current_tier');
-  if (savedTier && TIER_DETAILS[savedTier]) {
-    state.currentTier = savedTier;
-  }
-  
-  const savedUsed = localStorage.getItem('scout_credits_used');
-  if (savedUsed !== null) {
-    state.creditsUsed = parseInt(savedUsed, 10) || 0;
-  } else {
-    state.creditsUsed = 0;
-  }
-
-  const savedTotal = localStorage.getItem('scout_credits_total');
-  if (savedTotal !== null) {
-    state.creditsTotal = parseInt(savedTotal, 10) || 100;
-  } else {
-    state.creditsTotal = state.currentTier === 'pro' ? 1000 : state.currentTier === 'enterprise' ? 10000 : 100;
-  }
-
-  const savedRenew = localStorage.getItem('scout_renew_at');
-  if (savedRenew) {
-    state.renewAt = savedRenew;
-  } else {
-    const now = new Date();
-    state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
-  }
-
-  state.byokEnabled = localStorage.getItem('scout_byok_enabled') === 'true';
-  state.customLlmProvider = localStorage.getItem('scout_byok_provider') || 'gemini';
-  state.customApiKey = localStorage.getItem('scout_byok_key') || '';
-  state.customBaseUrl = localStorage.getItem('scout_byok_endpoint') || '';
+ const savedTier = localStorage.getItem('scout_current_tier');
+ if (savedTier && TIER_DETAILS[savedTier]) {
+ state.currentTier = savedTier;
+ }
+ 
+ const savedUsed = localStorage.getItem('scout_credits_used');
+ if (savedUsed !== null) {
+ state.creditsUsed = parseInt(savedUsed, 10) || 0;
+ } else {
+ state.creditsUsed = 0;
+ }
+
+ const savedTotal = localStorage.getItem('scout_credits_total');
+ if (savedTotal !== null) {
+ state.creditsTotal = parseInt(savedTotal, 10) || 100;
+ } else {
+ state.creditsTotal = state.currentTier === 'pro' ? 1000 : state.currentTier === 'enterprise' ? 10000 : 100;
+ }
+
+ const savedRenew = localStorage.getItem('scout_renew_at');
+ if (savedRenew) {
+ state.renewAt = savedRenew;
+ } else {
+ const now = new Date();
+ state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
+ }
+
+ state.byokEnabled = localStorage.getItem('scout_byok_enabled') === 'true';
+ state.customLlmProvider = localStorage.getItem('scout_byok_provider') || 'gemini';
+ state.customApiKey = localStorage.getItem('scout_byok_key') || '';
+ state.customBaseUrl = localStorage.getItem('scout_byok_endpoint') || '';
 }
 
 // Render All Dynamic Components
 function renderAllDynamicComponents() {
-  renderSessionsTable();
-  renderCreditUsageUI();
-  renderTiersUI();
+ renderSessionsTable();
+ renderCreditUsageUI();
+ renderTiersUI();
 }
 
 // Open / Close Checkout Modal
 function openCheckoutModal(targetTier) {
-  pendingCheckoutTier = targetTier;
-  const isAnnual = state.billingCycle === 'annual';
-  const tierInfo = TIER_DETAILS[targetTier] || TIER_DETAILS.pro;
-  
-  let price = '0';
-  let quota = '100 Credits / mo';
-  
-  if (targetTier === 'pro') {
-    price = isAnnual ? '15' : '19';
-    quota = '1,000 Credits / mo';
-  } else if (targetTier === 'enterprise') {
-    price = isAnnual ? '39' : '49';
-    quota = '10,000 Credits / mo';
-  }
-
-  if (elements.checkoutPlanName) elements.checkoutPlanName.innerText = tierInfo.name;
-  if (elements.checkoutBillingCycle) elements.checkoutBillingCycle.innerText = isAnnual ? 'Billed Annually (20% Off)' : 'Billed Monthly';
-  if (elements.checkoutPlanPrice) elements.checkoutPlanPrice.innerText = price;
-  if (elements.checkoutPricePeriod) elements.checkoutPricePeriod.innerText = isAnnual ? '/ mo (annual)' : '/ mo';
-  if (elements.checkoutQuotaVal) elements.checkoutQuotaVal.innerText = quota;
-
-  if (elements.checkoutModal) elements.checkoutModal.classList.remove('hidden');
+ pendingCheckoutTier = targetTier;
+ const isAnnual = state.billingCycle === 'annual';
+ const tierInfo = TIER_DETAILS[targetTier] || TIER_DETAILS.pro;
+ 
+ let price = '0';
+ let quota = '100 Credits / mo';
+ 
+ if (targetTier === 'pro') {
+ price = isAnnual ? '15' : '19';
+ quota = '1,000 Credits / mo';
+ } else if (targetTier === 'enterprise') {
+ price = isAnnual ? '39' : '49';
+ quota = '10,000 Credits / mo';
+ }
+
+ if (elements.checkoutPlanName) elements.checkoutPlanName.innerText = tierInfo.name;
+ if (elements.checkoutBillingCycle) elements.checkoutBillingCycle.innerText = isAnnual ? 'Billed Annually (20% Off)' : 'Billed Monthly';
+ if (elements.checkoutPlanPrice) elements.checkoutPlanPrice.innerText = price;
+ if (elements.checkoutPricePeriod) elements.checkoutPricePeriod.innerText = isAnnual ? '/ mo (annual)' : '/ mo';
+ if (elements.checkoutQuotaVal) elements.checkoutQuotaVal.innerText = quota;
+
+ if (elements.checkoutModal) elements.checkoutModal.classList.remove('hidden');
 }
 
 function closeCheckoutModal() {
-  pendingCheckoutTier = null;
-  if (elements.checkoutModal) elements.checkoutModal.classList.add('hidden');
+ pendingCheckoutTier = null;
+ if (elements.checkoutModal) elements.checkoutModal.classList.add('hidden');
 }
 
 // Setup Event Handlers
 function initEventListeners() {
-  // Auth Form Tabs Switcher
-  elements.tabLoginBtn?.addEventListener('click', () => switchAuthForm('login'));
-  elements.tabSignupBtn?.addEventListener('click', () => switchAuthForm('signup'));
-  
-  // Form Submissions
-  elements.loginForm?.addEventListener('submit', handleSignIn);
-  elements.signupForm?.addEventListener('submit', handleSignUp);
-  elements.btnDemoMode?.addEventListener('click', launchDemoSession);
-  
-  elements.btnForgotPwd?.addEventListener('click', (e) => {
-    e.preventDefault();
-    handleForgotPassword();
-  });
-  
-  // Navigation Tabs Switcher
-  document.querySelectorAll('.nav-btn').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      const targetTab = btn.getAttribute('data-tab');
-      if (targetTab) switchDashboardTab(targetTab);
-    });
-  });
-  
-  // User Dropdown Menu
-  elements.userMenuToggle?.addEventListener('click', (e) => {
-    e.stopPropagation();
-    elements.userDropdown?.classList.toggle('show');
-  });
-  
-  document.addEventListener('click', () => {
-    elements.userDropdown?.classList.remove('show');
-  });
-  
-  elements.btnDropdownLogout?.addEventListener('click', handleLogout);
-  elements.btnAccountLogout?.addEventListener('click', handleLogout);
-  elements.btnDropdownProfile?.addEventListener('click', () => switchDashboardTab('account'));
-  elements.btnDropdownTiers?.addEventListener('click', () => switchDashboardTab('tiers'));
-  elements.btnNavTiersHero?.addEventListener('click', () => switchDashboardTab('tiers'));
-  elements.btnUpgradeCreditsHero?.addEventListener('click', () => switchDashboardTab('tiers'));
-  elements.btnOpenAuth?.addEventListener('click', showAuthSection);
-  
-  // Checkout Modal Events
-  elements.btnCloseCheckout?.addEventListener('click', closeCheckoutModal);
-  elements.btnCancelCheckout?.addEventListener('click', closeCheckoutModal);
-  
-  elements.btnConfirmCheckout?.addEventListener('click', () => {
-    if (!pendingCheckoutTier) return;
-    
-    const targetTier = pendingCheckoutTier;
-    const tierInfo = TIER_DETAILS[targetTier];
-    if (!tierInfo) return;
-
-    state.currentTier = targetTier;
-    state.creditsTotal = targetTier === 'pro' ? 1000 : targetTier === 'enterprise' ? 10000 : 100;
-    
-    const now = new Date();
-    state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
-
-    saveSessionToStorage();
-    syncAuthWithServer();
-    closeCheckoutModal();
-    renderCreditUsageUI();
-    renderTiersUI();
-    updateUserUI();
-    showToast(`Subscription activated! Welcome to ${tierInfo.name}. Quota upgraded to ${state.creditsTotal.toLocaleString()} credits.`, 'success');
-  });
-
-  // Password Visibility Toggle Buttons
-  document.querySelectorAll('.btn-toggle-pwd').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      const targetId = btn.getAttribute('data-target');
-      const input = document.getElementById(targetId);
-      if (input) {
-        const isPwd = input.type === 'password';
-        input.type = isPwd ? 'text' : 'password';
-        btn.innerHTML = isPwd ? '<i class="fa-solid fa-eye-slash"></i>' : '<i class="fa-solid fa-eye"></i>';
-      }
-    });
-  });
-  
-  // Profile Form Submission
-  elements.profileForm?.addEventListener('submit', (e) => {
-    e.preventDefault();
-    const newName = elements.settingsDisplayName.value.trim();
-    if (newName && state.user) {
-      state.user.name = newName;
-      saveSessionToStorage();
-      syncAuthWithServer();
-      updateUserUI();
-      showToast('Profile display name updated successfully!', 'success');
-    }
-  });
-
-  // BYOK & Custom Proxy Form Submission
-  elements.byokForm?.addEventListener('submit', (e) => {
-    e.preventDefault();
-    state.customLlmProvider = elements.selectByokProvider?.value || 'gemini';
-    state.customBaseUrl = elements.inputByokEndpoint?.value.trim() || '';
-    state.customApiKey = elements.inputByokKey?.value.trim() || '';
-    state.byokEnabled = elements.checkboxEnableByok?.checked || false;
-
-    localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
-    localStorage.setItem('scout_byok_provider', state.customLlmProvider);
-    localStorage.setItem('scout_byok_key', state.customApiKey);
-    localStorage.setItem('scout_byok_endpoint', state.customBaseUrl);
-
-    syncAuthWithServer();
-    renderCreditUsageUI();
-    updateUserUI();
-
-    if (state.byokEnabled) {
-      showToast('BYOK Mode Active! Requests now route through your custom API key/proxy endpoint (Scout credits bypassed).', 'success');
-    } else {
-      showToast('Endpoint configuration saved. Using standard Scout key.', 'info');
-    }
-  });
-
-  elements.checkboxEnableByok?.addEventListener('change', (e) => {
-    state.byokEnabled = e.target.checked;
-    localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
-    syncAuthWithServer();
-    renderCreditUsageUI();
-  });
-
-  // Billing Cycle Toggle Switcher
-  elements.toggleBillingCycle?.addEventListener('change', (e) => {
-    state.billingCycle = e.target.checked ? 'annual' : 'monthly';
-    renderTiersUI();
-  });
-
-  // Tier Selection Buttons
-  document.querySelectorAll('.btn-select-tier').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      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);
-      }
-    });
-  });
+ // Auth Form Tabs Switcher
+ elements.tabLoginBtn?.addEventListener('click', () => switchAuthForm('login'));
+ elements.tabSignupBtn?.addEventListener('click', () => switchAuthForm('signup'));
+ 
+ // Form Submissions
+ elements.loginForm?.addEventListener('submit', handleSignIn);
+ elements.signupForm?.addEventListener('submit', handleSignUp);
+ elements.btnDemoMode?.addEventListener('click', launchDemoSession);
+ 
+ elements.btnForgotPwd?.addEventListener('click', (e) => {
+ e.preventDefault();
+ handleForgotPassword();
+ });
+ 
+ // Navigation Tabs Switcher
+ document.querySelectorAll('.nav-btn').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ const targetTab = btn.getAttribute('data-tab');
+ if (targetTab) switchDashboardTab(targetTab);
+ });
+ });
+ 
+ // User Dropdown Menu
+ elements.userMenuToggle?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ elements.userDropdown?.classList.toggle('show');
+ });
+ 
+ document.addEventListener('click', () => {
+ elements.userDropdown?.classList.remove('show');
+ });
+ 
+ elements.btnDropdownLogout?.addEventListener('click', handleLogout);
+ elements.btnAccountLogout?.addEventListener('click', handleLogout);
+ elements.btnDropdownProfile?.addEventListener('click', () => switchDashboardTab('account'));
+ elements.btnDropdownTiers?.addEventListener('click', () => switchDashboardTab('tiers'));
+ elements.btnNavTiersHero?.addEventListener('click', () => switchDashboardTab('tiers'));
+ elements.btnUpgradeCreditsHero?.addEventListener('click', () => switchDashboardTab('tiers'));
+ elements.btnOpenAuth?.addEventListener('click', showAuthSection);
+ 
+ // Checkout Modal Events
+ elements.btnCloseCheckout?.addEventListener('click', closeCheckoutModal);
+ elements.btnCancelCheckout?.addEventListener('click', closeCheckoutModal);
+ 
+ elements.btnConfirmCheckout?.addEventListener('click', () => {
+ if (!pendingCheckoutTier) return;
+ 
+ const targetTier = pendingCheckoutTier;
+ const tierInfo = TIER_DETAILS[targetTier];
+ if (!tierInfo) return;
+
+ state.currentTier = targetTier;
+ state.creditsTotal = targetTier === 'pro' ? 1000 : targetTier === 'enterprise' ? 10000 : 100;
+ 
+ const now = new Date();
+ state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
+
+ saveSessionToStorage();
+ syncAuthWithServer();
+ closeCheckoutModal();
+ renderCreditUsageUI();
+ renderTiersUI();
+ updateUserUI();
+ showToast(`Subscription activated! Welcome to ${tierInfo.name}. Quota upgraded to ${state.creditsTotal.toLocaleString()} credits.`, 'success');
+ });
+
+ // Password Visibility Toggle Buttons
+ document.querySelectorAll('.btn-toggle-pwd').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ const targetId = btn.getAttribute('data-target');
+ const input = document.getElementById(targetId);
+ if (input) {
+ const isPwd = input.type === 'password';
+ input.type = isPwd ? 'text' : 'password';
+ btn.innerHTML = isPwd ? '<i class="fa-solid fa-eye-slash"></i>' : '<i class="fa-solid fa-eye"></i>';
+ }
+ });
+ });
+ 
+ // Profile Form Submission
+ elements.profileForm?.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const newName = elements.settingsDisplayName.value.trim();
+ if (newName && state.user) {
+ state.user.name = newName;
+ saveSessionToStorage();
+ syncAuthWithServer();
+ updateUserUI();
+ showToast('Profile display name updated successfully!', 'success');
+ }
+ });
+
+ // BYOK & Custom Proxy Form Submission
+ elements.byokForm?.addEventListener('submit', (e) => {
+ e.preventDefault();
+ state.customLlmProvider = elements.selectByokProvider?.value || 'gemini';
+ state.customBaseUrl = elements.inputByokEndpoint?.value.trim() || '';
+ state.customApiKey = elements.inputByokKey?.value.trim() || '';
+ state.byokEnabled = elements.checkboxEnableByok?.checked || false;
+
+ localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
+ localStorage.setItem('scout_byok_provider', state.customLlmProvider);
+ localStorage.setItem('scout_byok_key', state.customApiKey);
+ localStorage.setItem('scout_byok_endpoint', state.customBaseUrl);
+
+ syncAuthWithServer();
+ renderCreditUsageUI();
+ updateUserUI();
+
+ if (state.byokEnabled) {
+ showToast('BYOK Mode Active! Requests now route through your custom API key/proxy endpoint (Scout credits bypassed).', 'success');
+ } else {
+ showToast('Endpoint configuration saved. Using standard Scout key.', 'info');
+ }
+ });
+
+ elements.checkboxEnableByok?.addEventListener('change', (e) => {
+ state.byokEnabled = e.target.checked;
+ localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
+ syncAuthWithServer();
+ renderCreditUsageUI();
+ });
+
+ // Billing Cycle Toggle Switcher
+ elements.toggleBillingCycle?.addEventListener('change', (e) => {
+ state.billingCycle = e.target.checked ? 'annual' : 'monthly';
+ renderTiersUI();
+ });
+
+ // Tier Selection Buttons
+ document.querySelectorAll('.btn-select-tier').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ 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);
+ }
+ });
+ });
 }
 
 // Data Storage & Session Loaders
 function loadSessionsFromStorage() {
-  try {
-    const stored = localStorage.getItem('scout_cli_sessions');
-    if (stored) {
-      state.sessions = JSON.parse(stored);
-    } else {
-      state.sessions = [
-        {
-          id: 'sess_local_1',
-          host: 'Local Workstation (FT-CLI)',
-          platform: 'Windows x64 Node.js',
-          lastActive: new Date().toISOString(),
-          ip: '127.0.0.1',
-          active: true,
-        },
-      ];
-      saveSessionsToStorage();
-    }
-  } catch {
-    state.sessions = [];
-  }
+ try {
+ const stored = localStorage.getItem('scout_cli_sessions');
+ if (stored) {
+ state.sessions = JSON.parse(stored);
+ } else {
+ state.sessions = [
+ {
+ id: 'sess_local_1',
+ host: 'Local Workstation (FT-CLI)',
+ platform: 'Windows x64 Node.js',
+ lastActive: new Date().toISOString(),
+ ip: '127.0.0.1',
+ active: true,
+ },
+ ];
+ saveSessionsToStorage();
+ }
+ } catch {
+ state.sessions = [];
+ }
 }
 
 function saveSessionsToStorage() {
-  try {
-    localStorage.setItem('scout_cli_sessions', JSON.stringify(state.sessions));
-  } catch {}
+ try {
+ localStorage.setItem('scout_cli_sessions', JSON.stringify(state.sessions));
+ } catch {}
 }
 
 function renderSessionsTable() {
-  if (!elements.sessionTableBody) return;
-  
-  if (!state.sessions || state.sessions.length === 0) {
-    elements.sessionTableBody.innerHTML = `
-      <tr>
-        <td colspan="4" class="empty-table-notice">No active CLI authorization sessions found.</td>
-      </tr>
-    `;
-    return;
-  }
-
-  elements.sessionTableBody.innerHTML = state.sessions
-    .map((sess) => {
-      return `
-        <tr data-id="${escapeHtml(sess.id)}">
-          <td>
-            <div class="flex-center-gap">
-              <i class="fa-solid fa-terminal text-primary"></i>
-              <div>
-                <strong>${escapeHtml(sess.host)}</strong>
-                <small class="block text-muted">${escapeHtml(sess.platform)}</small>
-              </div>
-            </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>
-      `;
-    })
-    .join('');
+ if (!elements.sessionTableBody) return;
+ 
+ if (!state.sessions || state.sessions.length === 0) {
+ elements.sessionTableBody.innerHTML = `
+ <tr>
+ <td colspan="4" class="empty-table-notice">No active CLI authorization sessions found.</td>
+ </tr>
+ `;
+ return;
+ }
+
+ elements.sessionTableBody.innerHTML = state.sessions
+ .map((sess) => {
+ return `
+ <tr data-id="${escapeHtml(sess.id)}">
+ <td>
+ <div class="flex-center-gap">
+ <i class="fa-solid fa-terminal text-primary"></i>
+ <div>
+ <strong>${escapeHtml(sess.host)}</strong>
+ <small class="block text-muted">${escapeHtml(sess.platform)}</small>
+ </div>
+ </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>
+ `;
+ })
+ .join('');
 }
 
 function revokeSession(sessionId) {
-  state.sessions = state.sessions.filter(s => s.id !== sessionId);
-  saveSessionsToStorage();
-  renderSessionsTable();
-  showToast('CLI access session revoked.', 'info');
+ state.sessions = state.sessions.filter(s => s.id !== sessionId);
+ saveSessionsToStorage();
+ renderSessionsTable();
+ showToast('CLI access session revoked.', 'info');
 }
 
 // Render Dynamic Credit Usage & BYOK Status UI
 function renderCreditUsageUI() {
-  if (state.byokEnabled) {
-    if (elements.byokStatusBadge) {
-      elements.byokStatusBadge.innerText = 'BYOK Mode Active';
-      elements.byokStatusBadge.className = 'badge badge-accent';
-    }
-    if (elements.creditStatusBadge) {
-      elements.creditStatusBadge.innerText = 'Custom Endpoint Active';
-      elements.creditStatusBadge.className = 'badge badge-accent';
-    }
-    if (elements.valCreditsUsed) elements.valCreditsUsed.innerText = 'Unmonitored';
-    if (elements.valCreditsRemaining) elements.valCreditsRemaining.innerText = 'Unlimited (BYOK)';
-    if (elements.valCreditsTotal) elements.valCreditsTotal.innerText = 'Custom Provider';
-    if (elements.valCreditsPct) elements.valCreditsPct.innerText = 'BYOK';
-
-    if (elements.creditProgressFill) {
-      elements.creditProgressFill.style.width = '100%';
-      elements.creditProgressFill.style.background = 'linear-gradient(90deg, #a855f7 0%, #ec4899 100%)';
-    }
-
-    if (elements.labelCreditConsumption) {
-      elements.labelCreditConsumption.innerText = 'Direct Custom Endpoint Routing (Scout Credits Bypassed)';
-    }
-
-    if (elements.byokBannerNote) {
-      elements.byokBannerNote.classList.remove('hidden');
-    }
-  } else {
-    if (elements.byokStatusBadge) {
-      elements.byokStatusBadge.innerText = 'Scout Default';
-      elements.byokStatusBadge.className = 'badge';
-    }
-    if (elements.creditStatusBadge) {
-      elements.creditStatusBadge.innerText = 'Quota Active';
-      elements.creditStatusBadge.className = 'badge badge-success';
-    }
-
-    const defaultTotal = state.currentTier === 'pro' ? 1000 : state.currentTier === 'enterprise' ? 10000 : 100;
-    const total = state.creditsTotal || defaultTotal;
-    const used = state.creditsUsed || 0;
-    const remaining = Math.max(0, total - used);
-    const pct = Math.min(100, Math.round((used / total) * 100));
-
-    if (elements.valCreditsUsed) elements.valCreditsUsed.innerText = used.toLocaleString();
-    if (elements.valCreditsRemaining) elements.valCreditsRemaining.innerText = remaining.toLocaleString();
-    if (elements.valCreditsTotal) elements.valCreditsTotal.innerText = total.toLocaleString();
-    if (elements.valCreditsPct) elements.valCreditsPct.innerText = `${pct}%`;
-
-    if (elements.creditProgressFill) {
-      elements.creditProgressFill.style.width = `${pct}%`;
-      elements.creditProgressFill.style.background = 'linear-gradient(90deg, #6366f1 0%, #38bdf8 60%, #34d399 100%)';
-    }
-
-    if (elements.labelCreditConsumption) {
-      elements.labelCreditConsumption.innerText = 'Monthly Credit Consumption';
-    }
-
-    if (elements.byokBannerNote) {
-      elements.byokBannerNote.classList.add('hidden');
-    }
-  }
-
-  let renewDateStr = '';
-  if (state.renewAt) {
-    const d = new Date(state.renewAt);
-    if (!isNaN(d.getTime())) {
-      renewDateStr = `${d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} at 00:00:00 UTC`;
-    }
-  }
-  if (!renewDateStr) {
-    const now = new Date();
-    const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
-    renewDateStr = `${nextMonth.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} at 00:00:00 UTC`;
-  }
-
-  if (elements.valRenewDatetime) {
-    elements.valRenewDatetime.innerText = renewDateStr;
-  }
+ if (state.byokEnabled) {
+ if (elements.byokStatusBadge) {
+ elements.byokStatusBadge.innerText = 'BYOK Mode Active';
+ elements.byokStatusBadge.className = 'badge badge-accent';
+ }
+ if (elements.creditStatusBadge) {
+ elements.creditStatusBadge.innerText = 'Custom Endpoint Active';
+ elements.creditStatusBadge.className = 'badge badge-accent';
+ }
+ if (elements.valCreditsUsed) elements.valCreditsUsed.innerText = 'Unmonitored';
+ if (elements.valCreditsRemaining) elements.valCreditsRemaining.innerText = 'Unlimited (BYOK)';
+ if (elements.valCreditsTotal) elements.valCreditsTotal.innerText = 'Custom Provider';
+ if (elements.valCreditsPct) elements.valCreditsPct.innerText = 'BYOK';
+
+ if (elements.creditProgressFill) {
+ elements.creditProgressFill.style.width = '100%';
+ elements.creditProgressFill.style.background = 'linear-gradient(90deg, #a855f7 0%, #ec4899 100%)';
+ }
+
+ if (elements.labelCreditConsumption) {
+ elements.labelCreditConsumption.innerText = 'Direct Custom Endpoint Routing (Scout Credits Bypassed)';
+ }
+
+ if (elements.byokBannerNote) {
+ elements.byokBannerNote.classList.remove('hidden');
+ }
+ } else {
+ if (elements.byokStatusBadge) {
+ elements.byokStatusBadge.innerText = 'Scout Default';
+ elements.byokStatusBadge.className = 'badge';
+ }
+ if (elements.creditStatusBadge) {
+ elements.creditStatusBadge.innerText = 'Quota Active';
+ elements.creditStatusBadge.className = 'badge badge-success';
+ }
+
+ const defaultTotal = state.currentTier === 'pro' ? 1000 : state.currentTier === 'enterprise' ? 10000 : 100;
+ const total = state.creditsTotal || defaultTotal;
+ const used = state.creditsUsed || 0;
+ const remaining = Math.max(0, total - used);
+ const pct = Math.min(100, Math.round((used / total) * 100));
+
+ if (elements.valCreditsUsed) elements.valCreditsUsed.innerText = used.toLocaleString();
+ if (elements.valCreditsRemaining) elements.valCreditsRemaining.innerText = remaining.toLocaleString();
+ if (elements.valCreditsTotal) elements.valCreditsTotal.innerText = total.toLocaleString();
+ if (elements.valCreditsPct) elements.valCreditsPct.innerText = `${pct}%`;
+
+ if (elements.creditProgressFill) {
+ elements.creditProgressFill.style.width = `${pct}%`;
+ elements.creditProgressFill.style.background = 'linear-gradient(90deg, #6366f1 0%, #38bdf8 60%, #34d399 100%)';
+ }
+
+ if (elements.labelCreditConsumption) {
+ elements.labelCreditConsumption.innerText = 'Monthly Credit Consumption';
+ }
+
+ if (elements.byokBannerNote) {
+ elements.byokBannerNote.classList.add('hidden');
+ }
+ }
+
+ let renewDateStr = '';
+ if (state.renewAt) {
+ const d = new Date(state.renewAt);
+ if (!isNaN(d.getTime())) {
+ renewDateStr = `${d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} at 00:00:00 UTC`;
+ }
+ }
+ if (!renewDateStr) {
+ const now = new Date();
+ const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
+ renewDateStr = `${nextMonth.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} at 00:00:00 UTC`;
+ }
+
+ if (elements.valRenewDatetime) {
+ elements.valRenewDatetime.innerText = renewDateStr;
+ }
 }
 
 // Render Paid Tiers UI
 function renderTiersUI() {
-  const current = TIER_DETAILS[state.currentTier] || TIER_DETAILS.free;
-
-  if (elements.currentPlanTitle) elements.currentPlanTitle.innerText = current.name;
-  if (elements.currentPlanBadge) elements.currentPlanBadge.innerText = current.badge;
-  if (elements.currentPlanDesc) elements.currentPlanDesc.innerText = current.desc;
-  if (elements.tierActiveIcon) elements.tierActiveIcon.innerHTML = current.icon;
-
-  // Billing Cycle Pricing Adjustments
-  const isAnnual = state.billingCycle === 'annual';
-  if (elements.priceProVal) elements.priceProVal.innerText = isAnnual ? '15' : '19';
-  if (elements.priceProPeriod) elements.priceProPeriod.innerText = isAnnual ? '/ month (billed annually)' : '/ month';
-  
-  if (elements.priceEntVal) elements.priceEntVal.innerText = isAnnual ? '39' : '49';
-  if (elements.priceEntPeriod) elements.priceEntPeriod.innerText = isAnnual ? '/ month (billed annually)' : '/ month';
-
-  // Highlight Active Tier Card
-  ['free', 'pro', 'enterprise'].forEach((t) => {
-    const card = document.getElementById(`tier-card-${t}`);
-    const btn = document.getElementById(`btn-tier-${t}`);
-    if (!card || !btn) return;
-
-    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') {
-        btn.className = 'btn btn-primary btn-block btn-select-tier';
-        btn.innerText = 'Upgrade to Pro';
-      } else {
-        btn.className = 'btn btn-outline btn-block btn-select-tier';
-        btn.innerText = t === 'enterprise' ? 'Upgrade to Enterprise' : 'Switch to Free';
-      }
-    }
-  });
+ const current = TIER_DETAILS[state.currentTier] || TIER_DETAILS.free;
+
+ if (elements.currentPlanTitle) elements.currentPlanTitle.innerText = current.name;
+ if (elements.currentPlanBadge) elements.currentPlanBadge.innerText = current.badge;
+ if (elements.currentPlanDesc) elements.currentPlanDesc.innerText = current.desc;
+ if (elements.tierActiveIcon) elements.tierActiveIcon.innerHTML = current.icon;
+
+ // Billing Cycle Pricing Adjustments
+ const isAnnual = state.billingCycle === 'annual';
+ if (elements.priceProVal) elements.priceProVal.innerText = isAnnual ? '15' : '19';
+ if (elements.priceProPeriod) elements.priceProPeriod.innerText = isAnnual ? '/ month (billed annually)' : '/ month';
+ 
+ if (elements.priceEntVal) elements.priceEntVal.innerText = isAnnual ? '39' : '49';
+ if (elements.priceEntPeriod) elements.priceEntPeriod.innerText = isAnnual ? '/ month (billed annually)' : '/ month';
+
+ // Highlight Active Tier Card
+ ['free', 'pro', 'enterprise'].forEach((t) => {
+ const card = document.getElementById(`tier-card-${t}`);
+ const btn = document.getElementById(`btn-tier-${t}`);
+ if (!card || !btn) return;
+
+ 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') {
+ btn.className = 'btn btn-primary btn-block btn-select-tier';
+ btn.innerText = 'Upgrade to Pro';
+ } else {
+ btn.className = 'btn btn-outline btn-block btn-select-tier';
+ btn.innerText = t === 'enterprise' ? 'Upgrade to Enterprise' : 'Switch to Free';
+ }
+ }
+ });
 }
 
 // Sync with Local Server CLI Session
 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 {}
-
-  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) {
-    state.serverConnected = true;
-    
-    if (elements.navTenantName) {
-      elements.navTenantName.innerText = `CLI Local Sync Active (${data.repoName || 'Workspace'})`;
-    }
-    
-    if (data.isLoggedIn && data.auth?.user) {
-      state.user = data.auth.user;
-      state.token = data.auth.token;
-      state.refreshToken = data.auth.refreshToken;
-      
-      if (typeof data.auth.creditsUsed === 'number') state.creditsUsed = data.auth.creditsUsed;
-      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.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;
-      if (typeof data.auth.customBaseUrl === 'string') state.customBaseUrl = data.auth.customBaseUrl;
-      
-      const localCliSession = {
-        id: 'sess_cli_local',
-        host: `Local Workstation (${data.repoName || 'FT-CLI'})`,
-        platform: `Node.js CLI (~/.ft/auth.json)`,
-        lastActive: data.auth.loggedInAt || new Date().toISOString(),
-        ip: '127.0.0.1 (Local Sync)',
-        active: true,
-      };
-      
-      const otherSessions = state.sessions.filter(s => s.id !== 'sess_cli_local');
-      state.sessions = [localCliSession, ...otherSessions];
-      saveSessionsToStorage();
-      
-      saveSessionToStorage();
-      showDashboard();
-      updateUserUI();
-      renderCreditUsageUI();
-      renderSessionsTable();
-      return;
-    }
-  }
-
-  state.serverConnected = false;
-  if (elements.navTenantName) {
-    elements.navTenantName.innerText = FIREBASE_CONFIG.tenantId;
-  }
-  
-  checkLocalStorageSession();
+ 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 {}
+
+ 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) {
+ state.serverConnected = true;
+ 
+ if (elements.navTenantName) {
+ elements.navTenantName.innerText = `CLI Local Sync Active (${data.repoName || 'Workspace'})`;
+ }
+ 
+ if (data.isLoggedIn && data.auth?.user) {
+ state.user = data.auth.user;
+ state.token = data.auth.token;
+ state.refreshToken = data.auth.refreshToken;
+ 
+ if (typeof data.auth.creditsUsed === 'number') state.creditsUsed = data.auth.creditsUsed;
+ 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.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;
+ if (typeof data.auth.customBaseUrl === 'string') state.customBaseUrl = data.auth.customBaseUrl;
+ 
+ const localCliSession = {
+ id: 'sess_cli_local',
+ host: `Local Workstation (${data.repoName || 'FT-CLI'})`,
+ platform: `Node.js CLI (~/.ft/auth.json)`,
+ lastActive: data.auth.loggedInAt || new Date().toISOString(),
+ ip: '127.0.0.1 (Local Sync)',
+ active: true,
+ };
+ 
+ const otherSessions = state.sessions.filter(s => s.id !== 'sess_cli_local');
+ state.sessions = [localCliSession, ...otherSessions];
+ saveSessionsToStorage();
+ 
+ saveSessionToStorage();
+ showDashboard();
+ updateUserUI();
+ renderCreditUsageUI();
+ renderSessionsTable();
+ return;
+ }
+ }
+
+ state.serverConnected = false;
+ if (elements.navTenantName) {
+ elements.navTenantName.innerText = FIREBASE_CONFIG.tenantId;
+ }
+ 
+ checkLocalStorageSession();
 }
 
 function checkLocalStorageSession() {
-  try {
-    const storedUser = localStorage.getItem('scout_auth_user');
-    const storedToken = localStorage.getItem('scout_auth_token');
-    
-    if (storedUser && storedToken) {
-      state.user = JSON.parse(storedUser);
-      state.token = storedToken;
-      state.refreshToken = localStorage.getItem('scout_refresh_token') || '';
-      
-      showDashboard();
-      updateUserUI();
-      return;
-    }
-  } catch (err) {
-    console.error('Saved session parse error:', err);
-  }
-  
-  showAuthSection();
+ try {
+ const storedUser = localStorage.getItem('scout_auth_user');
+ const storedToken = localStorage.getItem('scout_auth_token');
+ 
+ if (storedUser && storedToken) {
+ state.user = JSON.parse(storedUser);
+ state.token = storedToken;
+ state.refreshToken = localStorage.getItem('scout_refresh_token') || '';
+ 
+ showDashboard();
+ updateUserUI();
+ return;
+ }
+ } catch (err) {
+ console.error('Saved session parse error:', err);
+ }
+ 
+ showAuthSection();
 }
 
 // Switch Auth View Forms
 function switchAuthForm(mode) {
-  if (mode === 'login') {
-    elements.tabLoginBtn?.classList.add('active');
-    elements.tabSignupBtn?.classList.remove('active');
-    elements.loginForm?.classList.remove('hidden');
-    elements.signupForm?.classList.add('hidden');
-  } else {
-    elements.tabSignupBtn?.classList.add('active');
-    elements.tabLoginBtn?.classList.remove('active');
-    elements.signupForm?.classList.remove('hidden');
-    elements.loginForm?.classList.add('hidden');
-  }
+ if (mode === 'login') {
+ elements.tabLoginBtn?.classList.add('active');
+ elements.tabSignupBtn?.classList.remove('active');
+ elements.loginForm?.classList.remove('hidden');
+ elements.signupForm?.classList.add('hidden');
+ } else {
+ elements.tabSignupBtn?.classList.add('active');
+ elements.tabLoginBtn?.classList.remove('active');
+ elements.signupForm?.classList.remove('hidden');
+ elements.loginForm?.classList.add('hidden');
+ }
 }
 
 // Handle Sign In Submission
 async function handleSignIn(e) {
-  e.preventDefault();
-  const email = document.getElementById('login-email').value.trim();
-  const password = document.getElementById('login-password').value;
-  const btnSubmit = document.getElementById('btn-submit-login');
-  
-  btnSubmit.disabled = true;
-  btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Authenticating...';
-  
-  try {
-    let authRes;
-    if (state.serverConnected) {
-      const res = await fetch(`${state.apiBaseUrl}/api/login`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, password }),
-      });
-      const data = await res.json();
-      if (!res.ok || !data.success) {
-        throw new Error(data.error || 'Server authentication failed.');
-      }
-      authRes = data.auth;
-    } else {
-      authRes = await apiFirebaseSignIn(email, password);
-    }
-    
-    state.token = authRes.token || authRes.idToken;
-    state.refreshToken = authRes.refreshToken;
-    state.user = authRes.user || {
-      id: authRes.localId || 'usr_' + Date.now().toString(36),
-      email: authRes.email || email,
-      name: authRes.displayName || email.split('@')[0],
-      createdAt: new Date().toISOString(),
-    };
-    
-    saveSessionToStorage();
-    syncAuthWithServer();
-    showDashboard();
-    updateUserUI();
-    showToast(`Signed in successfully as ${state.user.name}!`, 'success');
-  } catch (error) {
-    showToast(error.message || 'Login failed.', 'error');
-  } finally {
-    btnSubmit.disabled = false;
-    btnSubmit.innerHTML = '<span>Sign In to Scout</span><i class="fa-solid fa-arrow-right"></i>';
-  }
+ e.preventDefault();
+ const email = document.getElementById('login-email').value.trim();
+ const password = document.getElementById('login-password').value;
+ const btnSubmit = document.getElementById('btn-submit-login');
+ 
+ btnSubmit.disabled = true;
+ btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Authenticating...';
+ 
+ try {
+ let authRes;
+ if (state.serverConnected) {
+ const res = await fetch(`${state.apiBaseUrl}/api/login`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ email, password }),
+ });
+ const data = await res.json();
+ if (!res.ok || !data.success) {
+ throw new Error(data.error || 'Server authentication failed.');
+ }
+ authRes = data.auth;
+ } else {
+ authRes = await apiFirebaseSignIn(email, password);
+ }
+ 
+ state.token = authRes.token || authRes.idToken;
+ state.refreshToken = authRes.refreshToken;
+ state.user = authRes.user || {
+ id: authRes.localId || 'usr_' + Date.now().toString(36),
+ email: authRes.email || email,
+ name: authRes.displayName || email.split('@')[0],
+ createdAt: new Date().toISOString(),
+ };
+ 
+ saveSessionToStorage();
+ syncAuthWithServer();
+ showDashboard();
+ updateUserUI();
+ showToast(`Signed in successfully as ${state.user.name}!`, 'success');
+ } catch (error) {
+ showToast(error.message || 'Login failed.', 'error');
+ } finally {
+ btnSubmit.disabled = false;
+ btnSubmit.innerHTML = '<span>Sign In to Scout</span><i class="fa-solid fa-arrow-right"></i>';
+ }
 }
 
 // Handle Sign Up Submission
 async function handleSignUp(e) {
-  e.preventDefault();
-  const name = document.getElementById('signup-name').value.trim();
-  const email = document.getElementById('signup-email').value.trim();
-  const password = document.getElementById('signup-password').value;
-  const confirmPassword = document.getElementById('signup-confirm-password').value;
-  const btnSubmit = document.getElementById('btn-submit-signup');
-  
-  if (password !== confirmPassword) {
-    showToast('Passwords do not match.', 'error');
-    return;
-  }
-  
-  btnSubmit.disabled = true;
-  btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Creating Account...';
-  
-  try {
-    let authRes;
-    if (state.serverConnected) {
-      const res = await fetch(`${state.apiBaseUrl}/api/signup`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name, email, password }),
-      });
-      const data = await res.json();
-      if (!res.ok || !data.success) {
-        throw new Error(data.error || 'Server registration failed.');
-      }
-      authRes = data.auth;
-    } else {
-      authRes = await apiFirebaseSignUp(name, email, password);
-    }
-    
-    state.token = authRes.token || authRes.idToken;
-    state.refreshToken = authRes.refreshToken;
-    state.user = authRes.user || {
-      id: authRes.localId || 'usr_' + Date.now().toString(36),
-      email: authRes.email || email,
-      name: name,
-      createdAt: new Date().toISOString(),
-    };
-    
-    saveSessionToStorage();
-    syncAuthWithServer();
-    showDashboard();
-    updateUserUI();
-    showToast(`Account created! Welcome to FrontTerrain, ${name}.`, 'success');
-  } catch (error) {
-    showToast(error.message || 'Registration failed.', 'error');
-  } finally {
-    btnSubmit.disabled = false;
-    btnSubmit.innerHTML = '<span>Create Scout Account</span><i class="fa-solid fa-user-check"></i>';
-  }
+ e.preventDefault();
+ const name = document.getElementById('signup-name').value.trim();
+ const email = document.getElementById('signup-email').value.trim();
+ const password = document.getElementById('signup-password').value;
+ const confirmPassword = document.getElementById('signup-confirm-password').value;
+ const btnSubmit = document.getElementById('btn-submit-signup');
+ 
+ if (password !== confirmPassword) {
+ showToast('Passwords do not match.', 'error');
+ return;
+ }
+ 
+ btnSubmit.disabled = true;
+ btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Creating Account...';
+ 
+ try {
+ let authRes;
+ if (state.serverConnected) {
+ const res = await fetch(`${state.apiBaseUrl}/api/signup`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ name, email, password }),
+ });
+ const data = await res.json();
+ if (!res.ok || !data.success) {
+ throw new Error(data.error || 'Server registration failed.');
+ }
+ authRes = data.auth;
+ } else {
+ authRes = await apiFirebaseSignUp(name, email, password);
+ }
+ 
+ state.token = authRes.token || authRes.idToken;
+ state.refreshToken = authRes.refreshToken;
+ state.user = authRes.user || {
+ id: authRes.localId || 'usr_' + Date.now().toString(36),
+ email: authRes.email || email,
+ name: name,
+ createdAt: new Date().toISOString(),
+ };
+ 
+ saveSessionToStorage();
+ syncAuthWithServer();
+ showDashboard();
+ updateUserUI();
+ showToast(`Account created! Welcome to FrontTerrain, ${name}.`, 'success');
+ } catch (error) {
+ showToast(error.message || 'Registration failed.', 'error');
+ } finally {
+ btnSubmit.disabled = false;
+ btnSubmit.innerHTML = '<span>Create Scout Account</span><i class="fa-solid fa-user-check"></i>';
+ }
 }
 
 // Forgot Password Flow
 function handleForgotPassword() {
-  const email = prompt('Enter your registered email address for password reset:');
-  if (email && email.includes('@')) {
-    showToast(`Password reset link dispatched to ${email}`, 'success');
-  } else if (email) {
-    showToast('Please enter a valid email address.', 'error');
-  }
+ const email = prompt('Enter your registered email address for password reset:');
+ if (email && email.includes('@')) {
+ showToast(`Password reset link dispatched to ${email}`, 'success');
+ } else if (email) {
+ showToast('Please enter a valid email address.', 'error');
+ }
 }
 
 // Demo Mode Session Launcher
 function launchDemoSession() {
-  state.token = 'ft_demo_token_' + Date.now().toString(36);
-  state.user = {
-    id: 'usr_demo_' + Math.floor(1000 + Math.random() * 9000),
-    email: 'developer@frontterrain.com',
-    name: 'FrontTerrain Developer',
-    createdAt: new Date().toISOString(),
-  };
-  
-  saveSessionToStorage();
-  syncAuthWithServer();
-  showDashboard();
-  updateUserUI();
-  showToast('Demo Developer Session Active!', 'info');
+ state.token = 'ft_demo_token_' + Date.now().toString(36);
+ state.user = {
+ id: 'usr_demo_' + Math.floor(1000 + Math.random() * 9000),
+ email: 'developer@frontterrain.com',
+ name: 'FrontTerrain Developer',
+ createdAt: new Date().toISOString(),
+ };
+ 
+ saveSessionToStorage();
+ syncAuthWithServer();
+ showDashboard();
+ updateUserUI();
+ showToast('Demo Developer Session Active!', 'info');
 }
 
 // Firebase Direct REST API
 async function apiFirebaseSignIn(email, password) {
-  const url = `${FIREBASE_CONFIG.baseAuthUrl}:signInWithPassword?key=${FIREBASE_CONFIG.apiKey}`;
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      email,
-      password,
-      returnSecureToken: true,
-      tenantId: FIREBASE_CONFIG.tenantId,
-    }),
-  });
-  
-  const data = await response.json();
-  if (!response.ok) {
-    throw new Error(parseFirebaseError(data, 'Firebase sign in failed'));
-  }
-  return data;
+ const url = `${FIREBASE_CONFIG.baseAuthUrl}:signInWithPassword?key=${FIREBASE_CONFIG.apiKey}`;
+ const response = await fetch(url, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ email,
+ password,
+ returnSecureToken: true,
+ tenantId: FIREBASE_CONFIG.tenantId,
+ }),
+ });
+ 
+ const data = await response.json();
+ if (!response.ok) {
+ throw new Error(parseFirebaseError(data, 'Firebase sign in failed'));
+ }
+ return data;
 }
 
 async function apiFirebaseSignUp(name, email, password) {
-  const url = `${FIREBASE_CONFIG.baseAuthUrl}:signUp?key=${FIREBASE_CONFIG.apiKey}`;
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      email,
-      password,
-      returnSecureToken: true,
-      tenantId: FIREBASE_CONFIG.tenantId,
-    }),
-  });
-  
-  const data = await response.json();
-  if (!response.ok) {
-    throw new Error(parseFirebaseError(data, 'Firebase sign up failed'));
-  }
-  
-  try {
-    const updateUrl = `${FIREBASE_CONFIG.baseAuthUrl}:update?key=${FIREBASE_CONFIG.apiKey}`;
-    await fetch(updateUrl, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        idToken: data.idToken,
-        displayName: name,
-        tenantId: FIREBASE_CONFIG.tenantId,
-      }),
-    });
-    data.displayName = name;
-  } catch {}
-  
-  return data;
+ const url = `${FIREBASE_CONFIG.baseAuthUrl}:signUp?key=${FIREBASE_CONFIG.apiKey}`;
+ const response = await fetch(url, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ email,
+ password,
+ returnSecureToken: true,
+ tenantId: FIREBASE_CONFIG.tenantId,
+ }),
+ });
+ 
+ const data = await response.json();
+ if (!response.ok) {
+ throw new Error(parseFirebaseError(data, 'Firebase sign up failed'));
+ }
+ 
+ try {
+ const updateUrl = `${FIREBASE_CONFIG.baseAuthUrl}:update?key=${FIREBASE_CONFIG.apiKey}`;
+ await fetch(updateUrl, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ idToken: data.idToken,
+ displayName: name,
+ tenantId: FIREBASE_CONFIG.tenantId,
+ }),
+ });
+ data.displayName = name;
+ } catch {}
+ 
+ return data;
 }
 
 function parseFirebaseError(errData, defaultMsg) {
-  const code = errData?.error?.message || errData?.message || '';
-  if (code.includes('EMAIL_NOT_FOUND')) return 'No account found with this email.';
-  if (code.includes('INVALID_PASSWORD') || code.includes('INVALID_LOGIN_CREDENTIALS')) return 'Invalid password entered.';
-  if (code.includes('EMAIL_EXISTS')) return 'An account already exists with this email.';
-  if (code.includes('WEAK_PASSWORD')) return 'Password is too weak (min 6 chars).';
-  if (code.includes('INVALID_EMAIL')) return 'Invalid email address format.';
-  if (code.includes('TOO_MANY_ATTEMPTS_TRY_LATER')) return 'Too many login attempts. Try later.';
-  return `${defaultMsg}: ${code || 'Unknown error'}`;
+ const code = errData?.error?.message || errData?.message || '';
+ if (code.includes('EMAIL_NOT_FOUND')) return 'No account found with this email.';
+ if (code.includes('INVALID_PASSWORD') || code.includes('INVALID_LOGIN_CREDENTIALS')) return 'Invalid password entered.';
+ if (code.includes('EMAIL_EXISTS')) return 'An account already exists with this email.';
+ if (code.includes('WEAK_PASSWORD')) return 'Password is too weak (min 6 chars).';
+ if (code.includes('INVALID_EMAIL')) return 'Invalid email address format.';
+ if (code.includes('TOO_MANY_ATTEMPTS_TRY_LATER')) return 'Too many login attempts. Try later.';
+ return `${defaultMsg}: ${code || 'Unknown error'}`;
 }
 
 // UI State Renderers
 function showAuthSection() {
-  elements.authSection?.classList.remove('hidden');
-  elements.dashboardSection?.classList.add('hidden');
-  elements.userMenu?.classList.add('hidden');
-  elements.btnOpenAuth?.classList.remove('hidden');
+ elements.authSection?.classList.remove('hidden');
+ elements.dashboardSection?.classList.add('hidden');
+ elements.userMenu?.classList.add('hidden');
+ elements.btnOpenAuth?.classList.remove('hidden');
 }
 
 function showDashboard() {
-  elements.authSection?.classList.add('hidden');
-  elements.dashboardSection?.classList.remove('hidden');
-  elements.userMenu?.classList.remove('hidden');
-  elements.btnOpenAuth?.classList.add('hidden');
-  
-  renderAllDynamicComponents();
+ elements.authSection?.classList.add('hidden');
+ elements.dashboardSection?.classList.remove('hidden');
+ elements.userMenu?.classList.remove('hidden');
+ elements.btnOpenAuth?.classList.add('hidden');
+ 
+ renderAllDynamicComponents();
 }
 
 function updateUserUI() {
-  if (!state.user) return;
-  
-  const name = state.user.name || 'Developer';
-  const initial = name.charAt(0).toUpperCase();
-  
-  if (elements.navAvatar) elements.navAvatar.innerText = initial;
-  if (elements.navUserName) elements.navUserName.innerText = name;
-  if (elements.userDisplayName) elements.userDisplayName.innerText = name;
-  if (elements.dropdownName) elements.dropdownName.innerText = name;
-  if (elements.dropdownEmail) elements.dropdownEmail.innerText = state.user.email;
-  
-  if (elements.settingsDisplayName) elements.settingsDisplayName.value = name;
-  if (elements.settingsEmail) elements.settingsEmail.value = state.user.email;
-  if (elements.settingsUid) elements.settingsUid.value = state.user.id;
-  
-  const tierInfo = TIER_DETAILS[state.currentTier] || TIER_DETAILS.free;
-  if (elements.settingsActiveTier) elements.settingsActiveTier.value = tierInfo.name;
-
-  if (elements.selectByokProvider) elements.selectByokProvider.value = state.customLlmProvider || 'gemini';
-  if (elements.inputByokEndpoint) elements.inputByokEndpoint.value = state.customBaseUrl || '';
-  if (elements.inputByokKey) elements.inputByokKey.value = state.customApiKey || '';
-  if (elements.checkboxEnableByok) elements.checkboxEnableByok.checked = Boolean(state.byokEnabled);
+ if (!state.user) return;
+ 
+ const name = state.user.name || 'Developer';
+ const initial = name.charAt(0).toUpperCase();
+ 
+ if (elements.navAvatar) elements.navAvatar.innerText = initial;
+ if (elements.navUserName) elements.navUserName.innerText = name;
+ if (elements.userDisplayName) elements.userDisplayName.innerText = name;
+ if (elements.dropdownName) elements.dropdownName.innerText = name;
+ if (elements.dropdownEmail) elements.dropdownEmail.innerText = state.user.email;
+ 
+ if (elements.settingsDisplayName) elements.settingsDisplayName.value = name;
+ if (elements.settingsEmail) elements.settingsEmail.value = state.user.email;
+ if (elements.settingsUid) elements.settingsUid.value = state.user.id;
+ 
+ const tierInfo = TIER_DETAILS[state.currentTier] || TIER_DETAILS.free;
+ if (elements.settingsActiveTier) elements.settingsActiveTier.value = tierInfo.name;
+
+ if (elements.selectByokProvider) elements.selectByokProvider.value = state.customLlmProvider || 'gemini';
+ if (elements.inputByokEndpoint) elements.inputByokEndpoint.value = state.customBaseUrl || '';
+ if (elements.inputByokKey) elements.inputByokKey.value = state.customApiKey || '';
+ if (elements.checkboxEnableByok) elements.checkboxEnableByok.checked = Boolean(state.byokEnabled);
 }
 
 function switchDashboardTab(tabId) {
-  state.activeTab = tabId;
-  
-  document.querySelectorAll('.nav-btn').forEach((btn) => {
-    if (btn.getAttribute('data-tab') === tabId) {
-      btn.classList.add('active');
-    } else {
-      btn.classList.remove('active');
-    }
-  });
-  
-  document.querySelectorAll('.tab-pane').forEach((pane) => {
-    if (pane.id === `tab-${tabId}`) {
-      pane.classList.add('active');
-    } else {
-      pane.classList.remove('active');
-    }
-  });
+ state.activeTab = tabId;
+ 
+ document.querySelectorAll('.nav-btn').forEach((btn) => {
+ if (btn.getAttribute('data-tab') === tabId) {
+ btn.classList.add('active');
+ } else {
+ btn.classList.remove('active');
+ }
+ });
+ 
+ document.querySelectorAll('.tab-pane').forEach((pane) => {
+ if (pane.id === `tab-${tabId}`) {
+ pane.classList.add('active');
+ } else {
+ pane.classList.remove('active');
+ }
+ });
 }
 
 async function handleLogout() {
-  if (state.serverConnected) {
-    try {
-      await fetch(`${state.apiBaseUrl}/api/logout`, { method: 'POST' });
-    } catch {}
-  }
-  
-  state.user = null;
-  state.token = null;
-  state.refreshToken = null;
-  
-  localStorage.removeItem('scout_auth_user');
-  localStorage.removeItem('scout_auth_token');
-  localStorage.removeItem('scout_refresh_token');
-  
-  showAuthSection();
-  showToast('Signed out of Scout session.', 'info');
+ if (state.serverConnected) {
+ try {
+ await fetch(`${state.apiBaseUrl}/api/logout`, { method: 'POST' });
+ } catch {}
+ }
+ 
+ state.user = null;
+ state.token = null;
+ state.refreshToken = null;
+ 
+ localStorage.removeItem('scout_auth_user');
+ localStorage.removeItem('scout_auth_token');
+ localStorage.removeItem('scout_refresh_token');
+ 
+ showAuthSection();
+ showToast('Signed out of Scout session.', 'info');
 }
 
 function saveSessionToStorage() {
-  if (state.user) localStorage.setItem('scout_auth_user', JSON.stringify(state.user));
-  if (state.token) localStorage.setItem('scout_auth_token', state.token);
-  if (state.refreshToken) localStorage.setItem('scout_refresh_token', state.refreshToken);
-  localStorage.setItem('scout_current_tier', state.currentTier);
-  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_byok_enabled', String(state.byokEnabled));
-  localStorage.setItem('scout_byok_provider', state.customLlmProvider);
-  localStorage.setItem('scout_byok_key', state.customApiKey);
-  localStorage.setItem('scout_byok_endpoint', state.customBaseUrl);
+ if (state.user) localStorage.setItem('scout_auth_user', JSON.stringify(state.user));
+ if (state.token) localStorage.setItem('scout_auth_token', state.token);
+ if (state.refreshToken) localStorage.setItem('scout_refresh_token', state.refreshToken);
+ localStorage.setItem('scout_current_tier', state.currentTier);
+ 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_byok_enabled', String(state.byokEnabled));
+ localStorage.setItem('scout_byok_provider', state.customLlmProvider);
+ localStorage.setItem('scout_byok_key', state.customApiKey);
+ localStorage.setItem('scout_byok_endpoint', state.customBaseUrl);
 }
 
 async function syncAuthWithServer() {
-  if (state.user) {
-    try {
-      await fetch(`${state.apiBaseUrl}/api/save-auth`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          user: state.user,
-          token: state.token,
-          refreshToken: state.refreshToken,
-          creditsUsed: state.creditsUsed,
-          creditsTotal: state.creditsTotal,
-          currentTier: state.currentTier,
-          renewAt: state.renewAt,
-          byokEnabled: state.byokEnabled,
-          customLlmProvider: state.customLlmProvider,
-          customApiKey: state.customApiKey,
-          customBaseUrl: state.customBaseUrl,
-        }),
-      });
-    } catch {}
-  }
+ if (state.user) {
+ try {
+ await fetch(`${state.apiBaseUrl}/api/save-auth`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ user: state.user,
+ token: state.token,
+ refreshToken: state.refreshToken,
+ creditsUsed: state.creditsUsed,
+ creditsTotal: state.creditsTotal,
+ currentTier: state.currentTier,
+ renewAt: state.renewAt,
+ byokEnabled: state.byokEnabled,
+ customLlmProvider: state.customLlmProvider,
+ customApiKey: state.customApiKey,
+ customBaseUrl: state.customBaseUrl,
+ }),
+ });
+ } catch {}
+ }
 }
 
 // Copy Utility
 function copyText(text, successMsg = 'Copied to clipboard!') {
-  navigator.clipboard.writeText(text).then(
-    () => showToast(successMsg, 'success'),
-    () => showToast('Failed to copy to clipboard', 'error')
-  );
+ navigator.clipboard.writeText(text).then(
+ () => showToast(successMsg, 'success'),
+ () => showToast('Failed to copy to clipboard', 'error')
+ );
 }
 
 // Toast System
 function showToast(message, type = 'info') {
-  if (!elements.toastContainer) return;
-  
-  const toast = document.createElement('div');
-  toast.className = `toast toast-${type}`;
-  
-  let iconClass = 'fa-circle-info';
-  if (type === 'success') iconClass = 'fa-circle-check';
-  if (type === 'error') iconClass = 'fa-circle-exclamation';
-  
-  toast.innerHTML = `<i class="fa-solid ${iconClass}"></i> <span>${message}</span>`;
-  elements.toastContainer.appendChild(toast);
-  
-  setTimeout(() => {
-    toast.style.opacity = '0';
-    toast.style.transform = 'translateX(100%)';
-    toast.style.transition = 'all 0.3s ease-out';
-    setTimeout(() => toast.remove(), 300);
-  }, 3500);
+ if (!elements.toastContainer) return;
+ 
+ const toast = document.createElement('div');
+ toast.className = `toast toast-${type}`;
+ 
+ let iconClass = 'fa-circle-info';
+ if (type === 'success') iconClass = 'fa-circle-check';
+ if (type === 'error') iconClass = 'fa-circle-exclamation';
+ 
+ toast.innerHTML = `<i class="fa-solid ${iconClass}"></i> <span>${message}</span>`;
+ elements.toastContainer.appendChild(toast);
+ 
+ setTimeout(() => {
+ toast.style.opacity = '0';
+ toast.style.transform = 'translateX(100%)';
+ toast.style.transition = 'all 0.3s ease-out';
+ setTimeout(() => toast.remove(), 300);
+ }, 3500);
 }
 
 function escapeHtml(str) {
-  if (!str) return '';
-  return String(str)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
+ if (!str) return '';
+ return String(str)
+ .replace(/&/g, '&amp;')
+ .replace(/</g, '&lt;')
+ .replace(/>/g, '&gt;')
+ .replace(/"/g, '&quot;');
 }