@mooncompany/uplink-chat 0.5.0

package/public/js/premium.js

@@ -0,0 +1,412 @@
+// ============================================
+// PREMIUM MODULE
+// Client-side premium status & UI gating
+// ============================================
+
+let premiumStatus = { active: false, features: {}, themes: ['midnight'], comingSoon: false };
+
+// ── Fetch premium status from server ──
+
+async function fetchStatus() {
+  try {
+    const res = await fetch('/api/premium/status');
+    if (res.ok) {
+      premiumStatus = await res.json();
+    }
+  } catch (e) {
+    console.warn('Premium: Failed to fetch status', e);
+  }
+  return premiumStatus;
+}
+
+// ── UI Updates ──
+
+function updateUI() {
+  const isActive = premiumStatus.active;
+
+  // Premium section in settings
+  const freeState = document.getElementById('premiumFreeState');
+  const activeState = document.getElementById('premiumActiveState');
+  const activeBadge = document.getElementById('premiumActiveBadge');
+
+  if (freeState) freeState.classList.toggle('setting-hidden', isActive);
+  if (activeState) activeState.classList.toggle('setting-hidden', !isActive);
+  if (activeBadge) activeBadge.classList.toggle('setting-hidden', !isActive);
+
+  // Voice lock icon
+  const voiceLock = document.getElementById('voicePremiumLock');
+  if (voiceLock) voiceLock.classList.toggle('setting-hidden', isActive);
+
+  // Voice section overlay
+  const voiceSection = document.querySelector('[data-section="voice"] .settings-section-body');
+  if (voiceSection) {
+    if (!isActive) {
+      voiceSection.classList.add('premium-locked');
+      // Add overlay if not already present
+      if (!voiceSection.querySelector('.premium-overlay')) {
+        const overlay = document.createElement('div');
+        overlay.className = 'premium-overlay';
+        if (premiumStatus.comingSoon) {
+          overlay.innerHTML = '<div class="premium-overlay-content">' +
+            '<span class="premium-overlay-icon">🔒</span>' +
+            '<span class="premium-overlay-text">Premium · Coming Soon</span>' +
+            '</div>';
+        } else {
+          overlay.innerHTML = '<div class="premium-overlay-content">' +
+            '<span class="premium-overlay-icon">🔒</span>' +
+            '<span class="premium-overlay-text">Requires Uplink Premium</span>' +
+            '<button class="setting-btn setting-btn-primary premium-overlay-btn" data-premium-show-modal="Voice chat">Upgrade to Premium</button>' +
+            '</div>';
+          overlay.querySelector('[data-premium-show-modal]').addEventListener('click', function() {
+            showUpgradeModal('Voice chat');
+          });
+        }
+        voiceSection.appendChild(overlay);
+      }
+    } else {
+      voiceSection.classList.remove('premium-locked');
+      const overlay = voiceSection.querySelector('.premium-overlay');
+      if (overlay) overlay.remove();
+    }
+  }
+
+  // Theme select - restrict options for free users
+  const themeSelect = document.getElementById('themeSelect');
+  if (themeSelect) {
+    const allowedThemes = premiumStatus.themes || ['midnight'];
+    Array.from(themeSelect.options).forEach(function(opt) {
+      if (!allowedThemes.includes(opt.value)) {
+        opt.disabled = true;
+        opt.textContent = opt.textContent.replace(' 🔒', '') + ' 🔒';
+      } else {
+        opt.disabled = false;
+        opt.textContent = opt.textContent.replace(' 🔒', '');
+      }
+    });
+
+    // If current theme is not allowed, revert to midnight
+    if (!isActive && !allowedThemes.includes(themeSelect.value)) {
+      themeSelect.value = 'midnight';
+      if (window.UplinkThemes) {
+        window.UplinkThemes.apply('midnight');
+      }
+    }
+  }
+
+  // Agents tab gate is handled in satellites.js switchTab()
+
+  // Dispatch event for other modules
+  window.dispatchEvent(new CustomEvent('uplink:premiumChange', {
+    detail: premiumStatus
+  }));
+}
+
+// ── Activation ──
+
+async function activate(key) {
+  try {
+    const res = await fetch('/api/premium/activate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key: key })
+    });
+    const data = await res.json();
+
+    if (data.success) {
+      premiumStatus = {
+        active: data.active,
+        features: data.features,
+        themes: data.themes,
+        activatedAt: data.activatedAt
+      };
+      updateUI();
+      return { success: true };
+    }
+    return { success: false, error: data.message || 'Invalid key' };
+  } catch (e) {
+    return { success: false, error: 'Connection error' };
+  }
+}
+
+async function deactivate() {
+  try {
+    const res = await fetch('/api/premium/deactivate', { method: 'POST' });
+    const data = await res.json();
+    if (data.success) {
+      premiumStatus = {
+        active: false,
+        features: data.features,
+        themes: data.themes
+      };
+      updateUI();
+    }
+    return data;
+  } catch (e) {
+    return { success: false, error: 'Connection error' };
+  }
+}
+
+// ── Event Handlers ──
+
+function setupEvents() {
+  // "Enter Key" button toggles key input
+  const enterKeyBtn = document.getElementById('premiumEnterKeyBtn');
+  const keyEntry = document.getElementById('premiumKeyEntry');
+  if (enterKeyBtn && keyEntry) {
+    enterKeyBtn.addEventListener('click', function() {
+      keyEntry.classList.toggle('setting-hidden');
+      const input = document.getElementById('premiumKeyInput');
+      if (input && !keyEntry.classList.contains('setting-hidden')) {
+        input.focus();
+      }
+    });
+  }
+
+  // Activate button
+  const activateBtn = document.getElementById('premiumActivateBtn');
+  if (activateBtn) {
+    activateBtn.addEventListener('click', async function() {
+      var input = document.getElementById('premiumKeyInput');
+      var status = document.getElementById('premiumKeyStatus');
+      var key = input ? input.value.trim() : '';
+
+      if (!key) {
+        if (status) status.textContent = 'Please enter a license key';
+        return;
+      }
+
+      activateBtn.disabled = true;
+      activateBtn.textContent = 'Activating...';
+
+      var result = await activate(key);
+
+      if (result.success) {
+        if (status) {
+          status.textContent = '✓ Premium activated!';
+          status.classList.add('premium-success');
+        }
+        // Clear input
+        if (input) input.value = '';
+      } else {
+        if (status) {
+          status.textContent = result.error || 'Invalid license key';
+          status.classList.add('premium-error');
+        }
+      }
+
+      activateBtn.disabled = false;
+      activateBtn.textContent = 'Activate';
+    });
+  }
+
+  // Enter key in input triggers activate
+  var keyInput = document.getElementById('premiumKeyInput');
+  if (keyInput) {
+    keyInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        var btn = document.getElementById('premiumActivateBtn');
+        if (btn) btn.click();
+      }
+    });
+  }
+
+  // Deactivate button
+  var deactivateBtn = document.getElementById('premiumDeactivateBtn');
+  if (deactivateBtn) {
+    deactivateBtn.addEventListener('click', async function() {
+      if (!confirm('Deactivate Premium? You can re-enter your key anytime.')) return;
+      await deactivate();
+    });
+  }
+
+  // Upgrade buttons (anywhere in the UI) - open modal
+  document.addEventListener('click', function(e) {
+    if (e.target.matches('[data-premium-upgrade]')) {
+      e.preventDefault();
+      showUpgradeModal();
+    }
+  });
+
+  // Note: agents tab gate is handled in satellites.js switchTab()
+  // The old agentsBtn intercept was removed - there is no standalone agents button
+}
+
+// ── Feature descriptions for upgrade modal ──
+
+var featureInfo = {
+  'Voice chat': {
+    icon: '🎙️',
+    title: 'Voice Chat',
+    desc: 'Talk to your AI with push-to-talk or hands-free mode. Responses are spoken back with natural TTS.',
+  },
+  'Agent management': {
+    icon: '🤖',
+    title: 'Agent Management',
+    desc: 'Create, configure, and switch between multiple AI agents - each with their own personality and settings.',
+  },
+  'Premium themes': {
+    icon: '🎨',
+    title: 'All Themes',
+    desc: 'Unlock every built-in theme plus the custom theme generator. Make Uplink look exactly how you want.',
+  },
+  'Early access': {
+    icon: '🚀',
+    title: 'Early Access',
+    desc: 'Get new features first - including upcoming split view, custom themes, and more.',
+  }
+};
+
+var defaultFeatureInfo = {
+  icon: '✨',
+  title: 'Premium Feature',
+  desc: 'This feature is part of Uplink Premium.',
+};
+
+var allFeatures = [
+  { check: '✓', text: 'Voice chat with TTS', highlight: false },
+  { check: '✓', text: 'All themes + custom generator', highlight: false },
+  { check: '✓', text: 'Agent management', highlight: false },
+  { check: '✓', text: 'Early access to new features', highlight: false },
+];
+
+// ── Upgrade modal ──
+
+function showUpgradeModal(featureName) {
+  // Remove existing modal if any
+  var existing = document.querySelector('.premium-modal');
+  if (existing) existing.remove();
+
+  var info = featureInfo[featureName] || defaultFeatureInfo;
+
+  // Build feature list - highlight the relevant one
+  var featureListHTML = allFeatures.map(function(f) {
+    var isHighlight = featureName && f.text.toLowerCase().indexOf(featureName.toLowerCase().replace(/^premium\s*/i, '')) !== -1;
+    return '<li>' +
+      '<span class="feature-check">' + f.check + '</span>' +
+      '<span' + (isHighlight ? ' class="feature-highlight"' : '') + '>' + f.text + '</span>' +
+      '</li>';
+  }).join('');
+
+  var modal = document.createElement('div');
+  modal.className = 'premium-modal entering';
+  modal.innerHTML =
+    '<div class="premium-modal-card">' +
+      '<div class="premium-modal-header">' +
+        '<button class="premium-modal-close" aria-label="Close"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="1" y1="1" x2="13" y2="13"/><line x1="13" y1="1" x2="1" y2="13"/></svg></button>' +
+        '<span class="premium-modal-icon">' + info.icon + '</span>' +
+        '<h3 class="premium-modal-title">' + info.title + '</h3>' +
+        '<p class="premium-modal-desc">' + info.desc + '</p>' +
+      '</div>' +
+      '<div class="premium-modal-body">' +
+        '<ul class="premium-modal-features">' + featureListHTML + '</ul>' +
+      '</div>' +
+      '<div class="premium-modal-footer">' +
+        (premiumStatus.comingSoon
+          ? '<div class="premium-modal-price">Premium is coming soon</div>' +
+            '<div class="premium-modal-coming-soon">We\'re putting the finishing touches on Premium features. Stay tuned!</div>'
+          : '<div class="premium-modal-price">One-time purchase — yours forever</div>' +
+            '<a class="premium-modal-buy" href="https://store.moonco.pro" target="_blank" rel="noopener">Get Uplink Premium</a>' +
+            '<button class="premium-modal-key" data-premium-has-key>I already have a key</button>'
+        ) +
+      '</div>' +
+    '</div>';
+
+  document.body.appendChild(modal);
+
+  // Animate in
+  requestAnimationFrame(() => {
+    modal.classList.remove('entering');
+    modal.classList.add('visible');
+  });
+
+  // Close handlers
+  var closeModal = function() {
+    modal.classList.remove('visible');
+    setTimeout(function() { modal.remove(); }, 250);
+  };
+
+  // Close on backdrop click
+  modal.addEventListener('click', function(e) {
+    if (e.target === modal) closeModal();
+  });
+
+  // Close button
+  modal.querySelector('.premium-modal-close').addEventListener('click', function(e) {
+    e.stopPropagation();
+    closeModal();
+  });
+
+  // Escape key
+  var escHandler = function(e) {
+    if (e.key === 'Escape') {
+      closeModal();
+      document.removeEventListener('keydown', escHandler);
+    }
+  };
+  document.addEventListener('keydown', escHandler);
+
+  // "I have a key" → open settings to premium section
+  var hasKeyBtn = modal.querySelector('[data-premium-has-key]');
+  if (hasKeyBtn) hasKeyBtn.addEventListener('click', function() {
+    closeModal();
+    // Open settings panel
+    var settingsPanel = document.getElementById('settingsPanel');
+    if (settingsPanel && !settingsPanel.classList.contains('visible')) {
+      if (window.UplinkPanels) {
+        window.UplinkPanels.open('settings');
+      } else {
+        settingsPanel.classList.add('visible');
+      }
+    }
+    // Expand premium section
+    setTimeout(function() {
+      var premiumHeader = document.querySelector('[data-section="premium"] .settings-section-header');
+      var premiumBody = document.getElementById('section-premium');
+      if (premiumHeader && premiumBody && premiumBody.classList.contains('collapsed')) {
+        premiumHeader.click();
+      }
+      // Show key entry
+      var keyEntry = document.getElementById('premiumKeyEntry');
+      if (keyEntry) {
+        keyEntry.classList.remove('setting-hidden');
+        var input = document.getElementById('premiumKeyInput');
+        if (input) input.focus();
+      }
+    }, 300);
+  });
+}
+
+// ── Toast (kept as fallback for edge cases) ──
+
+function showUpgradeToast(featureName) {
+  // Use modal instead of toast for primary gates
+  showUpgradeModal(featureName);
+}
+
+// ── Init ──
+
+async function init() {
+  await fetchStatus();
+  updateUI();
+  setupEvents();
+  console.log('Premium: Initialized (' + (premiumStatus.active ? 'active' : 'free') + ')');
+}
+
+// Expose API
+export const UplinkPremium = {
+  isActive: function() { return premiumStatus.active; },
+  hasFeature: function(f) { return premiumStatus.active || !(premiumStatus.features && premiumStatus.features[f] === false); },
+  getStatus: function() { return premiumStatus; },
+  refresh: async function() { await fetchStatus(); updateUI(); },
+  showUpgradeToast: showUpgradeToast,
+  showUpgradeModal: showUpgradeModal
+};
+
+import { UplinkCore } from './core.js';
+
+// Backward compat: assign to window
+window.UplinkPremium = UplinkPremium;
+
+// Register and init
+UplinkCore.registerModule('premium', init);