ft-scout 5.0.0 → 5.0.2

package/web/app.js

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   FrontTerrain Scout — Dashboard & Firebase Auth Controller (Full Stack)
+   FrontTerrain Scout — Account & Paid Tiers Dashboard Controller
    ========================================================================== */
 
 const FIREBASE_CONFIG = {
@@ -9,19 +9,50 @@ const FIREBASE_CONFIG = {
   baseAuthUrl: 'https://identitytoolkit.googleapis.com/v1/accounts',
 };
 
-// Global State
+// 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>',
+  },
+};
+
+// Global Application State
 let state = {
   user: null,
   token: null,
   refreshToken: null,
-  activeTab: 'overview',
+  activeTab: 'account',
   serverConnected: false,
-  scanReport: null,
-  repoPath: '',
-  activities: [],
-  healthBreakdown: [],
+  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
@@ -48,64 +79,169 @@ const elements = {
   dropdownEmail: document.getElementById('dropdown-email'),
   btnDropdownLogout: document.getElementById('btn-dropdown-logout'),
   btnDropdownProfile: document.getElementById('btn-dropdown-profile'),
-  btnDropdownTokens: document.getElementById('btn-dropdown-tokens'),
+  btnDropdownTiers: document.getElementById('btn-dropdown-tiers'),
   navTenantTag: document.getElementById('nav-tenant-tag'),
+  navTenantName: document.getElementById('nav-tenant-name'),
   
-  // Dashboard Metrics & Headers
+  // Account & Header Controls
   userDisplayName: document.getElementById('user-display-name'),
-  inputAuthToken: document.getElementById('input-auth-token'),
-  cliCommandPreview: document.getElementById('cli-command-preview'),
-  btnCopyToken: document.getElementById('btn-copy-token'),
-  btnCopyCliSnippet: document.getElementById('btn-copy-cli-snippet'),
-  btnCopyCliCommand: document.getElementById('btn-copy-cli-command'),
-  btnGenerateToken: document.getElementById('btn-generate-token'),
-  btnRefreshStats: document.getElementById('btn-refresh-stats'),
-  btnRunAudit: document.getElementById('btn-run-audit'),
-  btnClearActivity: document.getElementById('btn-clear-activity'),
-  activityList: document.getElementById('activity-list'),
+  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'),
   
-  // Settings Inputs
+  // 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'),
-  btnSaveEngineSettings: document.getElementById('btn-save-engine-settings'),
-  selectLlmProvider: document.getElementById('select-llm-provider'),
-  selectLanguage: document.getElementById('select-language'),
-  inputCustomApiKey: document.getElementById('input-custom-api-key'),
-  
-  // Mobile Gate Overlay
-  mobileGateOverlay: document.getElementById('mobile-gate-overlay'),
-  btnDismissMobileGate: document.getElementById('btn-dismiss-mobile-gate'),
-
-  // Embedded CLI Terminal
-  terminalForm: document.getElementById('terminal-form'),
-  terminalInput: document.getElementById('terminal-input'),
-  terminalOutput: document.getElementById('terminal-output'),
-  btnClearTerminal: document.getElementById('btn-clear-terminal'),
-  btnCopyTermOutput: document.getElementById('btn-copy-term-output'),
-  termRepoPath: document.getElementById('term-repo-path'),
-  termConnectionStatus: document.getElementById('term-connection-status'),
+  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'),
 };
 
-// Global Terminal State
-let terminalHistory = [];
-let historyIndex = -1;
-
 // Initialize Application
 document.addEventListener('DOMContentLoaded', async () => {
-  checkMobileDevice();
+  loadTierAndCreditsFromStorage();
+  loadSessionsFromStorage();
   initEventListeners();
-  loadActivitiesFromStorage();
-  loadHealthBreakdownFromStorage();
-  renderActivityList();
-  renderHealthBreakdown();
+  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`;
+}
+
+// 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') || '';
+}
+
+// Render All Dynamic Components
+function renderAllDynamicComponents() {
+  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');
+}
+
+function closeCheckoutModal() {
+  pendingCheckoutTier = null;
+  if (elements.checkoutModal) elements.checkoutModal.classList.add('hidden');
+}
+
 // Setup Event Handlers
 function initEventListeners() {
   // Auth Form Tabs Switcher
@@ -141,10 +277,39 @@ function initEventListeners() {
   });
   
   elements.btnDropdownLogout?.addEventListener('click', handleLogout);
-  elements.btnDropdownProfile?.addEventListener('click', () => switchDashboardTab('settings'));
-  elements.btnDropdownTokens?.addEventListener('click', () => switchDashboardTab('tokens'));
+  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', () => {
@@ -158,196 +323,349 @@ function initEventListeners() {
     });
   });
   
-  // Copy Actions
-  elements.btnCopyToken?.addEventListener('click', () => {
-    if (state.token) copyText(state.token, 'Scout Auth Token copied to clipboard!');
+  // 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');
+    }
   });
-  
-  elements.btnCopyCliSnippet?.addEventListener('click', () => {
-    const emailArg = state.user?.email ? ` --email ${state.user.email}` : '';
-    const cmd = `scout login --token ${state.token || '<YOUR_TOKEN>'}${emailArg}`;
-    copyText(cmd, 'CLI Login Command copied to clipboard!');
+
+  // 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.btnCopyCliCommand?.addEventListener('click', () => {
-    const emailArg = state.user?.email ? ` --email ${state.user.email}` : '';
-    const cmd = `scout login --token ${state.token || '<YOUR_TOKEN>'}${emailArg}`;
-    copyText(cmd, 'CLI Auth Command copied!');
+
+  elements.checkboxEnableByok?.addEventListener('change', (e) => {
+    state.byokEnabled = e.target.checked;
+    localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
+    syncAuthWithServer();
+    renderCreditUsageUI();
   });
-  
-  elements.btnGenerateToken?.addEventListener('click', generateNewToken);
-  
-  elements.btnRefreshStats?.addEventListener('click', async () => {
-    showToast('Refreshing telemetry with Scout CLI engine...', 'info');
-    await checkServerStatusAndSession();
-    animateStats();
+
+  // Billing Cycle Toggle Switcher
+  elements.toggleBillingCycle?.addEventListener('change', (e) => {
+    state.billingCycle = e.target.checked ? 'annual' : 'monthly';
+    renderTiersUI();
   });
-  
-  elements.btnRunAudit?.addEventListener('click', () => {
-    state.healthBreakdown = state.healthBreakdown.map((item) => {
-      const newScore = Math.min(100, Math.max(70, item.score + Math.floor(Math.random() * 7) - 3));
-      let badgeClass = 'score-high';
-      let status = 'High Health';
-      let fillClass = 'bg-success';
-      if (newScore < 80) {
-        badgeClass = 'score-warn';
-        status = 'Warning';
-        fillClass = 'bg-warning';
-      } else if (newScore < 90) {
-        badgeClass = 'score-med';
-        status = 'Optimal';
-        fillClass = 'bg-info';
+
+  // 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);
       }
-      return { ...item, score: newScore, status, badgeClass, fillClass };
     });
-    saveHealthBreakdownToStorage();
-    renderHealthBreakdown();
-    showToast('Triggered architecture & fragility scan!', 'success');
-    addActivityLog('Codebase Fragility Scan Executed', 'Scanned high-churn files, risk ratings, and test coverage across modules.', 'warning', 'fa-solid fa-shield-halved');
-    animateStats();
   });
+}
+
+// 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 = [];
+  }
+}
+
+function saveSessionsToStorage() {
+  try {
+    localStorage.setItem('scout_cli_sessions', JSON.stringify(state.sessions));
+  } catch {}
+}
+
+function renderSessionsTable() {
+  if (!elements.sessionTableBody) return;
   
-  elements.btnClearActivity?.addEventListener('click', () => {
-    state.activities = [];
-    localStorage.removeItem('scout_activity_logs');
-    renderActivityList();
-    showToast('Activity log cleared.', 'info');
-  });
+  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;
+  }
 
-  document.querySelectorAll('.btn-revoke-session').forEach((btn) => {
-    btn.addEventListener('click', (e) => {
-      const row = e.target.closest('tr');
-      if (row) {
-        row.style.opacity = '0.3';
-        row.style.pointerEvents = 'none';
-        showToast('Session revoked.', 'info');
-      }
-    });
-  });
+  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('');
+}
 
-  // Mobile Gate Dismissal Handler
-  elements.btnDismissMobileGate?.addEventListener('click', () => {
-    elements.mobileGateOverlay?.classList.add('hidden');
-    sessionStorage.setItem('scout_mobile_dismissed', 'true');
-    showToast('Dismissed mobile gate. Displaying desktop preview layout.', 'info');
-  });
+function revokeSession(sessionId) {
+  state.sessions = state.sessions.filter(s => s.id !== sessionId);
+  saveSessionsToStorage();
+  renderSessionsTable();
+  showToast('CLI access session revoked.', 'info');
+}
 
-  window.addEventListener('resize', checkMobileDevice);
+// 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%)';
+    }
 
-  // Terminal Quick Command Chips
-  document.querySelectorAll('.btn-chip').forEach((chip) => {
-    chip.addEventListener('click', () => {
-      const cmd = chip.getAttribute('data-cmd');
-      if (cmd && elements.terminalInput) {
-        elements.terminalInput.value = cmd;
-        elements.terminalForm?.dispatchEvent(new Event('submit'));
-      }
-    });
-  });
+    if (elements.labelCreditConsumption) {
+      elements.labelCreditConsumption.innerText = 'Direct Custom Endpoint Routing (Scout Credits Bypassed)';
+    }
 
-  // Terminal Form Submit
-  elements.terminalForm?.addEventListener('submit', (e) => {
-    e.preventDefault();
-    const cmd = elements.terminalInput?.value.trim();
-    if (cmd) {
-      runWebTerminalCommand(cmd);
-      elements.terminalInput.value = '';
+    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';
     }
-  });
 
-  // Terminal History Navigation (Up / Down Keys)
-  elements.terminalInput?.addEventListener('keydown', (e) => {
-    if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      if (terminalHistory.length > 0) {
-        if (historyIndex < terminalHistory.length - 1) {
-          historyIndex++;
-          elements.terminalInput.value = terminalHistory[terminalHistory.length - 1 - historyIndex];
-        }
-      }
-    } else if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      if (historyIndex > 0) {
-        historyIndex--;
-        elements.terminalInput.value = terminalHistory[terminalHistory.length - 1 - historyIndex];
-      } else if (historyIndex === 0) {
-        historyIndex = -1;
-        elements.terminalInput.value = '';
-      }
+    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%)';
     }
-  });
 
-  // Terminal Actions: Clear & Copy
-  elements.btnClearTerminal?.addEventListener('click', () => {
-    if (elements.terminalOutput) {
-      elements.terminalOutput.innerHTML = `
-        <div class="term-line term-welcome"><span class="term-brand">FrontTerrain Scout AI Engine v5.0.0</span> — Onboarding Co-Pilot Shell</div>
-        <div class="term-line term-info">Terminal cleared. Type <code class="term-code">scout help</code> for available commands.</div>
-        <div class="term-line term-dim">--------------------------------------------------------------------------------</div>
-      `;
-      showToast('Terminal cleared.', 'info');
+    if (elements.labelCreditConsumption) {
+      elements.labelCreditConsumption.innerText = 'Monthly Credit Consumption';
     }
-  });
 
-  elements.btnCopyTermOutput?.addEventListener('click', () => {
-    if (elements.terminalOutput) {
-      copyText(elements.terminalOutput.innerText, 'Terminal output copied to clipboard!');
+    if (elements.byokBannerNote) {
+      elements.byokBannerNote.classList.add('hidden');
     }
-  });
-  
-  // Settings Form Submissions
-  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');
+  }
+
+  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;
 
-  elements.btnSaveEngineSettings?.addEventListener('click', () => {
-    const provider = elements.selectLlmProvider?.value;
-    const lang = elements.selectLanguage?.value;
-    localStorage.setItem('scout_provider', provider || 'gemini');
-    localStorage.setItem('scout_lang', lang || 'english');
-    showToast(`Scout Engine updated (${provider}, ${lang})`, 'success');
+  // 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) {
-      const data = await res.json();
-      state.serverConnected = true;
-      state.scanReport = data.scanReport;
-      state.repoPath = data.repoPath;
-      
-      // Update tenant tag to show server connected
-      if (elements.navTenantTag) {
-        elements.navTenantTag.innerHTML = `<span class="pulse-dot"></span> <span class="tenant-name">CLI Local Sync Active</span>`;
+      data = await res.json();
+      if (data && data.status === 'ok') {
+        state.apiBaseUrl = '';
+        connected = true;
       }
-      
-      if (data.isLoggedIn && data.auth?.user) {
-        state.user = data.auth.user;
-        state.token = data.auth.token;
-        state.refreshToken = data.auth.refreshToken;
-        
-        saveSessionToStorage();
-        showDashboard();
-        updateUserUI();
-        return;
+    }
+  } 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;
     }
-  } catch (err) {
-    state.serverConnected = false;
+  }
+
+  state.serverConnected = false;
+  if (elements.navTenantName) {
+    elements.navTenantName.innerText = FIREBASE_CONFIG.tenantId;
   }
   
-  // Fallback to LocalStorage
   checkLocalStorageSession();
 }
 
@@ -375,15 +693,15 @@ function checkLocalStorageSession() {
 // 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');
+    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');
+    elements.tabSignupBtn?.classList.add('active');
+    elements.tabLoginBtn?.classList.remove('active');
+    elements.signupForm?.classList.remove('hidden');
+    elements.loginForm?.classList.add('hidden');
   }
 }
 
@@ -400,7 +718,7 @@ async function handleSignIn(e) {
   try {
     let authRes;
     if (state.serverConnected) {
-      const res = await fetch('/api/login', {
+      const res = await fetch(`${state.apiBaseUrl}/api/login`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ email, password }),
@@ -417,17 +735,17 @@ async function handleSignIn(e) {
     state.token = authRes.token || authRes.idToken;
     state.refreshToken = authRes.refreshToken;
     state.user = authRes.user || {
-      id: authRes.localId,
+      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');
-    addActivityLog('User Account Authenticated', `Signed in as ${state.user.name} (${state.user.email})`, 'success', 'fa-solid fa-user-check');
   } catch (error) {
     showToast(error.message || 'Login failed.', 'error');
   } finally {
@@ -456,7 +774,7 @@ async function handleSignUp(e) {
   try {
     let authRes;
     if (state.serverConnected) {
-      const res = await fetch('/api/signup', {
+      const res = await fetch(`${state.apiBaseUrl}/api/signup`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ name, email, password }),
@@ -473,17 +791,17 @@ async function handleSignUp(e) {
     state.token = authRes.token || authRes.idToken;
     state.refreshToken = authRes.refreshToken;
     state.user = authRes.user || {
-      id: authRes.localId,
+      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');
-    addActivityLog('Account Registration Completed', `Created new Scout developer account for ${name}`, 'success', 'fa-solid fa-user-plus');
   } catch (error) {
     showToast(error.message || 'Registration failed.', 'error');
   } finally {
@@ -506,7 +824,7 @@ function handleForgotPassword() {
 function launchDemoSession() {
   state.token = 'ft_demo_token_' + Date.now().toString(36);
   state.user = {
-    id: 'usr_demo_7749',
+    id: 'usr_demo_' + Math.floor(1000 + Math.random() * 9000),
     email: 'developer@frontterrain.com',
     name: 'FrontTerrain Developer',
     createdAt: new Date().toISOString(),
@@ -558,7 +876,6 @@ async function apiFirebaseSignUp(name, email, password) {
     throw new Error(parseFirebaseError(data, 'Firebase sign up failed'));
   }
   
-  // Set Display Name
   try {
     const updateUrl = `${FIREBASE_CONFIG.baseAuthUrl}:update?key=${FIREBASE_CONFIG.apiKey}`;
     await fetch(updateUrl, {
@@ -601,9 +918,7 @@ function showDashboard() {
   elements.userMenu?.classList.remove('hidden');
   elements.btnOpenAuth?.classList.add('hidden');
   
-  renderActivityList();
-  renderHealthBreakdown();
-  animateStats();
+  renderAllDynamicComponents();
 }
 
 function updateUserUI() {
@@ -622,9 +937,13 @@ function updateUserUI() {
   if (elements.settingsEmail) elements.settingsEmail.value = state.user.email;
   if (elements.settingsUid) elements.settingsUid.value = state.user.id;
   
-  if (elements.inputAuthToken) elements.inputAuthToken.value = state.token || 'No token active';
-  const emailArg = state.user?.email ? ` --email ${state.user.email}` : '';
-  if (elements.cliCommandPreview) elements.cliCommandPreview.innerText = `scout login --token ${state.token || '<YOUR_TOKEN>'}${emailArg}`;
+  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) {
@@ -647,19 +966,10 @@ function switchDashboardTab(tabId) {
   });
 }
 
-function generateNewToken() {
-  state.token = 'ft_scout_tk_' + Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
-  saveSessionToStorage();
-  syncAuthWithServer();
-  updateUserUI();
-  showToast('Generated new single-use CLI access token!', 'success');
-  addActivityLog('Generated CLI Access Token', `Token issued: ${state.token.substring(0, 15)}...`);
-}
-
 async function handleLogout() {
   if (state.serverConnected) {
     try {
-      await fetch('/api/logout', { method: 'POST' });
+      await fetch(`${state.apiBaseUrl}/api/logout`, { method: 'POST' });
     } catch {}
   }
   
@@ -679,200 +989,40 @@ 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);
 }
 
 async function syncAuthWithServer() {
-  if (state.serverConnected && state.user && state.token) {
+  if (state.user) {
     try {
-      await fetch('/api/save-auth', {
+      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 {}
   }
 }
 
-// Activity Logs & Health Breakdown Helper Functions
-function loadActivitiesFromStorage() {
-  try {
-    const stored = localStorage.getItem('scout_activity_logs');
-    if (stored) {
-      state.activities = JSON.parse(stored);
-    } else {
-      state.activities = [
-        {
-          id: 'act_init_1',
-          title: 'FrontTerrain Scout Co-Pilot Active',
-          description: 'Telemetry sync active and awaiting repository commands.',
-          timeAgo: 'Just now',
-          type: 'success',
-          icon: 'fa-solid fa-shield-check',
-        },
-        {
-          id: 'act_init_2',
-          title: 'Repository Scan Completed',
-          description: 'Indexed source files across TypeScript modules.',
-          timeAgo: '15 minutes ago',
-          type: 'info',
-          icon: 'fa-solid fa-wand-magic-sparkles',
-        },
-        {
-          id: 'act_init_3',
-          title: 'Codebase Fragility Check',
-          description: 'Evaluated module risk ratings and high-churn dependencies.',
-          timeAgo: '1 hour ago',
-          type: 'warning',
-          icon: 'fa-solid fa-triangle-exclamation',
-        },
-      ];
-      saveActivitiesToStorage();
-    }
-  } catch {
-    state.activities = [];
-  }
-}
-
-function saveActivitiesToStorage() {
-  try {
-    localStorage.setItem('scout_activity_logs', JSON.stringify(state.activities));
-  } catch {}
-}
-
-function addActivityLog(title, description, type = 'success', icon = 'fa-solid fa-circle-check') {
-  const newLog = {
-    id: `act_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 6)}`,
-    title,
-    description,
-    timeAgo: 'Just now',
-    type,
-    icon,
-  };
-  state.activities.unshift(newLog);
-  if (state.activities.length > 25) {
-    state.activities = state.activities.slice(0, 25);
-  }
-  saveActivitiesToStorage();
-  renderActivityList();
-}
-
-function renderActivityList() {
-  if (!elements.activityList) return;
-  if (!state.activities || state.activities.length === 0) {
-    elements.activityList.innerHTML = `
-      <li class="timeline-item">
-        <div class="timeline-content">
-          <p class="text-muted" style="margin:0;">No recent co-pilot activity. Run Scout commands to log events.</p>
-        </div>
-      </li>
-    `;
-    return;
-  }
-
-  elements.activityList.innerHTML = state.activities
-    .map((item) => {
-      let dotBg = 'bg-info';
-      if (item.type === 'success') dotBg = 'bg-success';
-      if (item.type === 'warning') dotBg = 'bg-warning';
-      if (item.type === 'error') dotBg = 'bg-danger';
-
-      return `
-        <li class="timeline-item">
-          <div class="timeline-dot ${dotBg}"><i class="${escapeHtml(item.icon)}"></i></div>
-          <div class="timeline-content">
-            <strong>${escapeHtml(item.title)}</strong>
-            <p>${escapeHtml(item.description)}</p>
-            <span class="time-ago">${escapeHtml(item.timeAgo)}</span>
-          </div>
-        </li>
-      `;
-    })
-    .join('');
-}
-
-function loadHealthBreakdownFromStorage() {
-  try {
-    const stored = localStorage.getItem('scout_health_breakdown');
-    if (stored) {
-      state.healthBreakdown = JSON.parse(stored);
-    } else {
-      state.healthBreakdown = [
-        {
-          id: 'h_1',
-          name: 'FT-Check / Scout CLI Core',
-          score: 96,
-          status: 'High Health',
-          badgeClass: 'score-high',
-          fillClass: 'bg-success',
-        },
-        {
-          id: 'h_2',
-          name: 'LLM & Agent Subsystems',
-          score: 88,
-          status: 'Optimal',
-          badgeClass: 'score-med',
-          fillClass: 'bg-info',
-        },
-        {
-          id: 'h_3',
-          name: 'Web Portal & Auth Services',
-          score: 94,
-          status: 'High Health',
-          badgeClass: 'score-high',
-          fillClass: 'bg-success',
-        },
-      ];
-      saveHealthBreakdownToStorage();
-    }
-  } catch {
-    state.healthBreakdown = [];
-  }
-}
-
-function saveHealthBreakdownToStorage() {
-  try {
-    localStorage.setItem('scout_health_breakdown', JSON.stringify(state.healthBreakdown));
-  } catch {}
-}
-
-function renderHealthBreakdown() {
-  const container = document.getElementById('health-breakdown-list');
-  if (!container) return;
-
-  if (!state.healthBreakdown || state.healthBreakdown.length === 0) {
-    container.innerHTML = `<p class="text-muted">No health breakdown data available.</p>`;
-    return;
-  }
-
-  container.innerHTML = state.healthBreakdown
-    .map((item) => {
-      return `
-        <div class="health-item">
-          <div class="health-meta">
-            <span class="repo-name">${escapeHtml(item.name)}</span>
-            <span class="health-score ${item.badgeClass}">${item.score}% ${escapeHtml(item.status)}</span>
-          </div>
-          <div class="progress-bar">
-            <div class="progress-fill ${item.fillClass}" style="width: ${item.score}%;"></div>
-          </div>
-        </div>
-      `;
-    })
-    .join('');
-
-  // Calculate dynamic overall health score average
-  const totalScore = state.healthBreakdown.reduce((sum, item) => sum + item.score, 0);
-  const avgHealth = Math.round(totalScore / state.healthBreakdown.length);
-  const healthEl = document.getElementById('val-health');
-  if (healthEl) {
-    healthEl.innerText = `${avgHealth}%`;
-  }
-}
-
 // Copy Utility
 function copyText(text, successMsg = 'Copied to clipboard!') {
   navigator.clipboard.writeText(text).then(
@@ -903,201 +1053,6 @@ function showToast(message, type = 'info') {
   }, 3500);
 }
 
-// Animated Stat Counters
-function animateStats() {
-  const avgHealth = (state.healthBreakdown && state.healthBreakdown.length > 0)
-    ? Math.round(state.healthBreakdown.reduce((sum, h) => sum + h.score, 0) / state.healthBreakdown.length)
-    : 94;
-  animateCounter('val-health', avgHealth, '%');
-  animateCounter('val-repos', 12, '');
-  animateCounter('val-risky', 3, '');
-  animateCounter('val-queries', 154, '');
-}
-
-function animateCounter(elementId, targetValue, suffix = '') {
-  const el = document.getElementById(elementId);
-  if (!el) return;
-  
-  let current = 0;
-  const duration = 750;
-  const stepTime = 25;
-  const steps = duration / stepTime;
-  const increment = targetValue / steps;
-  
-  const timer = setInterval(() => {
-    current += increment;
-    if (current >= targetValue) {
-      current = targetValue;
-      clearInterval(timer);
-    }
-    el.innerText = Math.round(current) + suffix;
-  }, stepTime);
-}
-
-// Mobile Device Gate Detector
-function checkMobileDevice() {
-  const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Phone/i.test(navigator.userAgent);
-  const isSmallScreen = window.innerWidth < 768;
-  const userDismissed = sessionStorage.getItem('scout_mobile_dismissed');
-  
-  if ((isMobileUA || isSmallScreen) && !userDismissed) {
-    elements.mobileGateOverlay?.classList.remove('hidden');
-  } else {
-    elements.mobileGateOverlay?.classList.add('hidden');
-  }
-}
-
-// Embedded CLI Terminal Controller
-async function runWebTerminalCommand(cmd) {
-  if (!elements.terminalOutput) return;
-
-  // Save to History
-  terminalHistory.push(cmd);
-  historyIndex = -1;
-
-  // Render Prompt Command Line
-  const entryDiv = document.createElement('div');
-  entryDiv.className = 'term-line term-cmd-entry';
-  entryDiv.innerHTML = `<span class="terminal-prompt-symbol">scout &gt;</span> ${escapeHtml(cmd)}`;
-  elements.terminalOutput.appendChild(entryDiv);
-
-  if (cmd.toLowerCase() === 'clear' || cmd.toLowerCase() === 'scout clear') {
-    elements.btnClearTerminal?.click();
-    return;
-  }
-
-  // Loading Indicator
-  const loadingDiv = document.createElement('div');
-  loadingDiv.className = 'term-line term-info';
-  loadingDiv.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i> Executing \`${escapeHtml(cmd)}\`...`;
-  elements.terminalOutput.appendChild(loadingDiv);
-  elements.terminalOutput.scrollTop = elements.terminalOutput.scrollHeight;
-
-  try {
-    let outputText = '';
-    if (state.serverConnected) {
-      const res = await fetch('/api/cli/exec', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ command: cmd }),
-      });
-      const data = await res.json();
-      if (data.output) {
-        outputText = data.output;
-      } else if (!res.ok || data.error) {
-        outputText = `Error: ${data.error || 'Server failed to execute command.'}`;
-      }
-    } else {
-      // Client-side execution fallback
-      await new Promise((resolve) => setTimeout(resolve, 400));
-      outputText = simulateCliOutput(cmd);
-    }
-
-    loadingDiv.remove();
-
-    const outputDiv = document.createElement('div');
-    outputDiv.className = 'term-line term-output-text';
-    outputDiv.innerHTML = formatTerminalOutput(outputText);
-    elements.terminalOutput.appendChild(outputDiv);
-    addActivityLog(`Ran CLI Command: ${cmd}`, outputText.substring(0, 80) + '...');
-  } catch (err) {
-    loadingDiv.remove();
-    const errorDiv = document.createElement('div');
-    errorDiv.className = 'term-line term-output-text';
-    errorDiv.style.color = '#f87171';
-    errorDiv.innerText = `Execution Error: ${err.message || 'Failed to communicate with Scout CLI server.'}`;
-    elements.terminalOutput.appendChild(errorDiv);
-  }
-
-  elements.terminalOutput.scrollTop = elements.terminalOutput.scrollHeight;
-}
-
-// Client-side Standalone CLI Output Simulation
-function simulateCliOutput(cmd) {
-  const lower = cmd.toLowerCase().trim().replace(/^(scout|ft)\s*/i, '');
-  
-  if (lower.startsWith('brief')) {
-    return `[FrontTerrain Scout Brief]
-Repository: FT-Check / FT-CLI (v5.0.0)
-Architecture: TypeScript / Node.js CLI with Firebase Auth & Web Telemetry Portal.
-Key Modules:
- • bin/src/engine/agentEngine.ts (Core AI agent reasoning engine)
- • bin/src/commands/ (CLI command router & handlers)
- • web/ (Full-stack developer dashboard & auth portal)
-Summary: Week-one onboarding overview ready. FrontTerrain Scout is watching 48 source modules.`;
-  }
-  
-  if (lower.startsWith('risky')) {
-    return `[FrontTerrain Fragility Scan]
-Found 3 High-Churn Hotspots:
- 1. bin/src/engine/agentEngine.ts (34k lines, high change velocity)
- 2. bin/src/commands/setup.ts (16k lines, interactive prompt logic)
- 3. bin/src/utils/firebaseAuth.ts (Security & token sync logic)
-Recommendation: Split agentEngine into sub-parsers for better maintainability.`;
-  }
-
-  if (lower.startsWith('agent') || lower.startsWith('task') || lower.startsWith('goal')) {
-    return `[FrontTerrain Scout Autonomous Agent]
-Goal: ${cmd}
-Analyzing repository context...
-[1/3] Scanning codebase structure... OK
-[2/3] Verifying dependencies & imports... OK
-[3/3] Task execution plan formulated.
-Result: Scout agent executed target workflow with high confidence score (96%).`;
-  }
-
-  if (lower.startsWith('audit')) {
-    return `[FrontTerrain Security & Dependency Audit]
-Packages Scanned: 14 dependencies
-Vulnerabilities Found: 0 Critical, 0 High, 1 Low (npm update recommended)
-Code Health Score: 94/100
-Status: Repository meets FrontTerrain security compliance rules.`;
-  }
-
-  if (lower.startsWith('recommend')) {
-    return `[FrontTerrain Architectural Recommendations]
- 1. Modularization: Decouple CLI router from agent execution engine.
- 2. Performance: Cache repository AST tree in .ft/context.json for faster re-scans.
- 3. Auth: Extend single-use tokens to support OAuth webhooks.`;
-  }
-
-  if (lower.startsWith('setup')) {
-    return `[FrontTerrain Environment Setup Diagnostic]
-Node.js Version: v20.x (Pass)
-Git CLI Integration: Available (Pass)
-Firebase Auth Connection: Tenant ft-scout-auth-gc2v5 verified (Pass)
-Status: Environment ready for Scout CLI co-pilot execution.`;
-  }
-
-  if (lower.startsWith('history')) {
-    return `[FrontTerrain Session History]
- [2026-08-07 18:20] scout init --repo FT-CLI
- [2026-08-07 18:21] scout risky
- [2026-08-07 18:22] scout brief
- [2026-08-07 18:23] scout agent --scan`;
-  }
-
-  if (lower.startsWith('help')) {
-    return `FrontTerrain Scout CLI v5.0.0 — Available Commands:
-  scout init [repoUrl]     Clone & build local repository map
-  scout brief              Generate week-one onboarding summary
-  scout risky              Identify high-churn & fragile codebase hotspots
-  scout agent [goal...]    Run autonomous AI task agent on codebase
-  scout audit              Run security & dependency supply-chain audit
-  scout recommend          Get DSA & architectural suggestions
-  scout setup              Diagnose local dev environment & fix run failures
-  scout search <query>     Search internet for live docs & solutions
-  scout owners <path>      Check git ownership history for file
-  scout history            View log of Scout actions in repo
-  scout dashboard          Launch this web dashboard & auth portal`;
-  }
-
-  return `[Scout CLI Output]
-Executed: scout ${lower}
-Status: Command completed.
-(Tip: Type 'scout help' to view all available commands)`;
-}
-
 function escapeHtml(str) {
   if (!str) return '';
   return String(str)
@@ -1106,10 +1061,3 @@ function escapeHtml(str) {
     .replace(/>/g, '&gt;')
     .replace(/"/g, '&quot;');
 }
-
-function formatTerminalOutput(text) {
-  if (!text) return '';
-  let cleanText = text.replace(/\u001b\[[0-9;]*m/g, '');
-  return escapeHtml(cleanText);
-}
-