@mooncompany/uplink-chat 0.5.0

package/public/js/onboarding.js

@@ -0,0 +1,543 @@
+// ============================================
+// ONBOARDING MODULE
+// Setup flow, unlock screen
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+// ========== CONSTANTS ==========
+// Init retry
+const INIT_RETRY_DELAY_MS = 100;
+const MAX_INIT_RETRIES = 50;
+
+// URL validation debounce
+const URL_VALIDATE_DEBOUNCE_MS = 1500; // Longer debounce to avoid rate limiting
+
+// Unlock rate limiting
+const MAX_UNLOCK_ATTEMPTS = 5;
+const LOCKOUT_DURATION_MS = 60000;
+
+// DOM elements
+let onboardingScreen, unlockScreen;
+let onboardUserName, onboardBotName, onboardGatewayUrl, onboardGatewayToken;
+let urlStatus, urlError;
+let onboardVoiceToggle, onboardEncryptToggle, onboardPasswordFields;
+let onboardPassword, onboardPasswordConfirm, passwordError, onboardSubmit;
+let unlockBotName, unlockPassword, unlockError, unlockSubmit;
+let forgotLink, forgotConfirm, forgotCancel, forgotReset;
+
+// Validation state
+let urlValidateTimeout = null;
+let urlValidState = null;
+
+// Unlock rate limiting
+let unlockAttempts = 0;
+let unlockLockoutUntil = 0;
+
+// Init retry tracking
+let initRetryCount = 0;
+
+function init() {
+  // Get DOM elements
+  onboardingScreen = document.getElementById('onboardingScreen');
+  unlockScreen = document.getElementById('unlockScreen');
+
+  if (!onboardingScreen || !unlockScreen) {
+    initRetryCount++;
+    if (initRetryCount >= MAX_INIT_RETRIES) {
+      console.error('Onboarding: Max retries reached, required DOM elements not found');
+      return;
+    }
+    console.warn(`Onboarding: Elements not found, retrying... (${initRetryCount}/${MAX_INIT_RETRIES})`);
+    setTimeout(init, INIT_RETRY_DELAY_MS);
+    return;
+  }
+
+  // Onboarding elements
+  onboardUserName = document.getElementById('onboardUserName');
+  onboardBotName = document.getElementById('onboardBotName');
+  onboardGatewayUrl = document.getElementById('onboardGatewayUrl');
+  onboardGatewayToken = document.getElementById('onboardGatewayToken');
+  urlStatus = document.getElementById('urlStatus');
+  urlError = document.getElementById('urlError');
+  onboardVoiceToggle = document.getElementById('onboardVoiceToggle');
+  onboardEncryptToggle = document.getElementById('onboardEncryptToggle');
+  onboardPasswordFields = document.getElementById('onboardPasswordFields');
+  onboardPassword = document.getElementById('onboardPassword');
+  onboardPasswordConfirm = document.getElementById('onboardPasswordConfirm');
+  passwordError = document.getElementById('passwordError');
+  onboardSubmit = document.getElementById('onboardSubmit');
+
+  // Unlock elements
+  unlockBotName = document.getElementById('unlockBotName');
+  unlockPassword = document.getElementById('unlockPassword');
+  unlockError = document.getElementById('unlockError');
+  unlockSubmit = document.getElementById('unlockSubmit');
+  forgotLink = document.getElementById('forgotLink');
+  forgotConfirm = document.getElementById('forgotConfirm');
+  forgotCancel = document.getElementById('forgotCancel');
+  forgotReset = document.getElementById('forgotReset');
+
+  // Set up event listeners
+  setupOnboardingEvents();
+  setupUnlockEvents();
+
+  // Check initial state (async)
+  checkState();
+
+  console.log('Onboarding: Initialized');
+}
+
+async function checkState() {
+  // First check server config
+  try {
+    const serverRes = await fetch('/api/config/needs-onboarding');
+    const serverData = await serverRes.json();
+    
+    if (serverData.needsOnboarding) {
+      // Load any existing server config to prefill
+      const configRes = await fetch('/api/config');
+      const config = await configRes.json();
+      
+      if (onboardBotName && config.assistantName) {
+        onboardBotName.value = config.assistantName;
+      }
+      if (onboardGatewayUrl && config.gatewayUrl) {
+        onboardGatewayUrl.value = config.gatewayUrl;
+      }
+      if (onboardUserName && config.userName) {
+        onboardUserName.value = config.userName;
+      }
+      
+      // Show token status if already configured
+      if (config.hasGatewayToken && onboardGatewayToken) {
+        onboardGatewayToken.placeholder = 'Token already configured ✓ (leave blank to keep)';
+      }
+      
+      showOnboarding();
+      return;
+    }
+  } catch (e) {
+    console.warn('Onboarding: Could not reach server');
+    const errorEl = document.querySelector('.onboarding-error') || document.createElement('div');
+    errorEl.className = 'onboarding-error';
+    errorEl.textContent = 'Cannot reach Uplink server. Is it still running?';
+    const screen = document.getElementById('onboardingScreen');
+    if (screen && !screen.querySelector('.onboarding-error')) {
+      screen.querySelector('.overlay-card')?.prepend(errorEl);
+    }
+    showOnboarding();
+    return;
+  }
+  
+  // Fall back to local config
+  const core = window.UplinkCore;
+  const config = core?.loadConfig();
+
+  if (!config || !config.gatewayUrl) {
+    // First visit - show onboarding
+    showOnboarding();
+    return;
+  }
+
+  if (config.encryptionEnabled) {
+    // Need to unlock
+    if (unlockBotName) unlockBotName.textContent = config.agentName || 'Assistant';
+    showUnlock();
+    return;
+  }
+
+  // Ready to go
+  hideAll();
+  window.dispatchEvent(new CustomEvent('uplink:unlocked'));
+}
+
+function showOnboarding() {
+  if (onboardingScreen) onboardingScreen.classList.add('visible');
+  // Auto-detect OpenClaw gateway
+  autoDetectGateway();
+}
+
+/**
+ * Auto-detect OpenClaw gateway at common locations
+ * If found, auto-fill URL and focus token field
+ */
+async function autoDetectGateway() {
+  // Skip if URL already filled
+  if (onboardGatewayUrl?.value.trim()) return;
+
+  const commonLocations = [
+    'http://localhost:18789',
+    'http://127.0.0.1:18789'
+  ];
+
+  if (urlStatus) urlStatus.className = 'url-status checking';
+  
+  for (const url of commonLocations) {
+    try {
+      const res = await fetch('/api/gateway/validate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url })
+      });
+      const data = await res.json();
+
+      if (data.valid) {
+        // Found OpenClaw!
+        if (onboardGatewayUrl) {
+          onboardGatewayUrl.value = url;
+          onboardGatewayUrl.classList.add('success');
+          onboardGatewayUrl.classList.remove('error');
+        }
+        if (urlStatus) urlStatus.className = 'url-status valid';
+        if (urlError) {
+          urlError.textContent = '✓ OpenClaw detected! Enter your token below.';
+          urlError.classList.add('visible');
+          urlError.style.color = 'var(--success-color, #4ade80)';
+        }
+        urlValidState = true;
+        
+        // Focus token field
+        onboardGatewayToken?.focus();
+        console.log('Onboarding: Auto-detected OpenClaw at', url);
+        return;
+      }
+    } catch (e) {
+      // Continue to next location
+    }
+  }
+
+  // Not found - clear status and let user enter manually
+  if (urlStatus) urlStatus.className = 'url-status';
+  console.log('Onboarding: OpenClaw not detected, manual entry required');
+}
+
+function showUnlock() {
+  if (unlockScreen) {
+    unlockScreen.classList.add('visible');
+    unlockPassword?.focus();
+  }
+}
+
+function hideAll() {
+  onboardingScreen?.classList.remove('visible');
+  unlockScreen?.classList.remove('visible');
+}
+
+// ========== Onboarding Events ==========
+
+function setupOnboardingEvents() {
+  // URL validation
+  onboardGatewayUrl?.addEventListener('input', () => {
+    clearTimeout(urlValidateTimeout);
+    urlValidateTimeout = setTimeout(() => {
+      validateGatewayUrl(onboardGatewayUrl.value.trim());
+    }, URL_VALIDATE_DEBOUNCE_MS);
+  });
+
+  // Voice toggle
+  onboardVoiceToggle?.addEventListener('click', () => {
+    onboardVoiceToggle.classList.toggle('on');
+    const enabled = onboardVoiceToggle.classList.contains('on');
+    onboardVoiceToggle.setAttribute('aria-checked', enabled ? 'true' : 'false');
+  });
+
+  // Voice toggle keyboard handler
+  onboardVoiceToggle?.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onboardVoiceToggle.click();
+    }
+  });
+
+  // Encryption toggle
+  onboardEncryptToggle?.addEventListener('click', () => {
+    onboardEncryptToggle.classList.toggle('on');
+    const enabled = onboardEncryptToggle.classList.contains('on');
+    onboardEncryptToggle.setAttribute('aria-checked', enabled ? 'true' : 'false');
+    onboardPasswordFields?.classList.toggle('visible', enabled);
+    if (enabled) onboardPassword?.focus();
+  });
+
+  // Encryption toggle keyboard handler
+  onboardEncryptToggle?.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onboardEncryptToggle.click();
+    }
+  });
+
+  // Submit
+  onboardSubmit?.addEventListener('click', submitOnboarding);
+}
+
+async function validateGatewayUrl(url) {
+  if (!url) {
+    if (urlStatus) urlStatus.className = 'url-status';
+    urlValidState = null;
+    return false;
+  }
+
+  // Mobile keyboard fixes: trim whitespace, fix common autocorrect issues
+  url = url.trim().toLowerCase();
+  url = url.replace(/\s+/g, ''); // Remove any spaces mobile keyboards might add
+  url = url.replace(/local\s*host/gi, 'localhost'); // Fix "local host" autocorrect
+  
+  // Auto-convert ws:// to http://
+  url = url.replace(/^ws:\/\//, 'http://').replace(/^wss:\/\//, 'https://');
+  
+  // Add http:// if no protocol specified
+  if (!/^https?:\/\//i.test(url)) {
+    url = 'http://' + url;
+  }
+  
+  if (onboardGatewayUrl) onboardGatewayUrl.value = url;
+
+  if (urlStatus) urlStatus.className = 'url-status checking';
+
+  try {
+    const res = await fetch('/api/gateway/validate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url })
+    });
+    const data = await res.json();
+
+    if (data.valid) {
+      if (urlStatus) urlStatus.className = 'url-status valid';
+      urlError?.classList.remove('visible');
+      onboardGatewayUrl?.classList.remove('error');
+      onboardGatewayUrl?.classList.add('success');
+      urlValidState = true;
+      return true;
+    } else {
+      if (urlStatus) urlStatus.className = 'url-status invalid';
+      if (urlError) {
+        urlError.textContent = data.error || 'Could not connect to gateway';
+        urlError.classList.add('visible');
+        urlError.style.color = ''; // Reset to default error color
+      }
+      onboardGatewayUrl?.classList.add('error');
+      onboardGatewayUrl?.classList.remove('success');
+      urlValidState = false;
+      return false;
+    }
+  } catch (e) {
+    if (urlStatus) urlStatus.className = 'url-status invalid';
+    if (urlError) {
+      urlError.textContent = 'Validation failed';
+      urlError.classList.add('visible');
+      urlError.style.color = ''; // Reset to default error color
+    }
+    urlValidState = false;
+    return false;
+  }
+}
+
+async function submitOnboarding() {
+  const userName = onboardUserName?.value.trim() || '';
+  const botName = onboardBotName?.value.trim() || 'Assistant';
+  const url = onboardGatewayUrl?.value.trim();
+  const token = onboardGatewayToken?.value.trim();
+  const voiceEnabled = onboardVoiceToggle?.classList.contains('on');
+  const encrypt = onboardEncryptToggle?.classList.contains('on');
+  const pass = onboardPassword?.value;
+  const passConfirm = onboardPasswordConfirm?.value;
+
+  // Validate URL
+  if (!url) {
+    if (urlError) {
+      urlError.textContent = 'Gateway URL is required';
+      urlError.classList.add('visible');
+    }
+    onboardGatewayUrl?.focus();
+    return;
+  }
+
+  if (urlValidState === null) {
+    const valid = await validateGatewayUrl(url);
+    if (!valid) return;
+  } else if (!urlValidState) {
+    return;
+  }
+
+  // Validate password if encryption enabled
+  if (encrypt) {
+    if (!pass) {
+      if (passwordError) {
+        passwordError.textContent = 'Password is required';
+        passwordError.classList.add('visible');
+      }
+      onboardPassword?.focus();
+      return;
+    }
+    if (pass !== passConfirm) {
+      if (passwordError) {
+        passwordError.textContent = 'Passwords do not match';
+        passwordError.classList.add('visible');
+      }
+      onboardPasswordConfirm?.focus();
+      return;
+    }
+    if (pass.length < 8) {
+      if (passwordError) {
+        passwordError.textContent = 'Password must be at least 8 characters';
+        passwordError.classList.add('visible');
+      }
+      onboardPassword?.focus();
+      return;
+    }
+    passwordError?.classList.remove('visible');
+  }
+
+  // Save to server config
+  try {
+    const serverConfig = {
+      userName,
+      assistantName: botName,
+      gatewayUrl: url,
+      encryptHistory: encrypt,
+      onboardingComplete: true,
+    };
+    
+    // Only include token if provided (server may have it from .env)
+    if (token) {
+      serverConfig.gatewayToken = token;
+    }
+    
+    const res = await fetch('/api/config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(serverConfig)
+    });
+    
+    if (!res.ok) {
+      const data = await res.json();
+      if (urlError) {
+        urlError.textContent = data.error || 'Failed to save configuration';
+        urlError.classList.add('visible');
+      }
+      return;
+    }
+  } catch (e) {
+    console.warn('Onboarding: Could not save to server, continuing with local config');
+  }
+
+  // Save local config (for client-side features)
+  const core = window.UplinkCore;
+  if (core) {
+    core.state.agentName = botName;
+    core.state.gatewayUrl = url;
+    core.state.audioResponses = voiceEnabled;
+    core.state.encryptionEnabled = encrypt;
+    if (encrypt) core.state.currentPassword = pass;
+    core.saveConfig();
+  }
+
+  // Hide onboarding
+  hideAll();
+  window.dispatchEvent(new CustomEvent('uplink:unlocked'));
+}
+
+// ========== Unlock Events ==========
+
+function setupUnlockEvents() {
+  unlockSubmit?.addEventListener('click', tryUnlock);
+  unlockPassword?.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') tryUnlock();
+  });
+
+  forgotLink?.addEventListener('click', () => {
+    forgotConfirm?.classList.add('visible');
+  });
+
+  forgotCancel?.addEventListener('click', () => {
+    forgotConfirm?.classList.remove('visible');
+  });
+
+  forgotReset?.addEventListener('click', resetEncryption);
+}
+
+async function tryUnlock() {
+  // Check lockout
+  if (Date.now() < unlockLockoutUntil) {
+    const remaining = Math.ceil((unlockLockoutUntil - Date.now()) / 1000);
+    if (unlockError) {
+      unlockError.textContent = `Too many attempts. Try again in ${remaining}s`;
+      unlockError.classList.add('visible');
+    }
+    return;
+  }
+
+  const pass = unlockPassword?.value;
+  if (!pass) {
+    if (unlockError) {
+      unlockError.textContent = 'Enter your password';
+      unlockError.classList.add('visible');
+    }
+    return;
+  }
+
+  // Try to verify password
+  const crypto = window.UplinkEncryption;
+  if (crypto) {
+    const valid = await crypto.verifyPassword(pass);
+    if (!valid) {
+      unlockAttempts++;
+      if (unlockAttempts >= MAX_UNLOCK_ATTEMPTS) {
+        unlockLockoutUntil = Date.now() + LOCKOUT_DURATION_MS;
+        if (unlockError) unlockError.textContent = `Too many attempts. Try again in ${LOCKOUT_DURATION_MS / 1000}s`;
+      } else {
+        if (unlockError) {
+          unlockError.textContent = `Incorrect password (${MAX_UNLOCK_ATTEMPTS - unlockAttempts} attempts remaining)`;
+        }
+      }
+      unlockError?.classList.add('visible');
+      unlockPassword?.select();
+      return;
+    }
+  }
+
+  // Success
+  unlockAttempts = 0;
+  const core = window.UplinkCore;
+  if (core) core.state.currentPassword = pass;
+  
+  hideAll();
+  unlockError?.classList.remove('visible');
+  window.dispatchEvent(new CustomEvent('uplink:unlocked'));
+}
+
+function resetEncryption() {
+  // Clear encrypted data
+  localStorage.removeItem('uplink-history-encrypted');
+  localStorage.removeItem('uplink-history');
+  
+  const crypto = window.UplinkEncryption;
+  if (crypto) crypto.clearEncryption();
+
+  // Disable encryption in config
+  const core = window.UplinkCore;
+  if (core) {
+    core.state.encryptionEnabled = false;
+    core.state.currentPassword = null;
+    core.saveConfig();
+  }
+
+  hideAll();
+  window.dispatchEvent(new CustomEvent('uplink:unlocked'));
+}
+
+// Export API
+export const UplinkOnboarding = {
+show: showOnboarding,
+showUnlock,
+hide: hideAll,
+checkState
+};
+
+// Backward compat: assign to window
+window.UplinkOnboarding = UplinkOnboarding;
+
+// Register and init
+UplinkCore.registerModule('onboarding', init);

package/public/js/panels.js

@@ -0,0 +1,156 @@
+// ============================================
+// PANELS MODULE
+// Central panel management with mutual exclusivity
+// ============================================
+
+// Registered panels: { name: { element, isOpen(), open(), close() } }
+const panels = {};
+let currentPanel = null;
+let backdrop = null;
+
+// Create backdrop element
+function createBackdrop() {
+  if (backdrop) return;
+  
+  backdrop = document.createElement('div');
+  backdrop.className = 'panel-backdrop';
+  backdrop.addEventListener('click', () => closeAll());
+  document.body.appendChild(backdrop);
+}
+
+// Show/hide backdrop
+function showBackdrop() {
+  if (!backdrop) createBackdrop();
+  backdrop.classList.add('visible');
+}
+
+function hideBackdrop() {
+  if (backdrop) backdrop.classList.remove('visible');
+}
+
+/**
+ * Register a panel with the manager
+ * @param {string} name - Unique panel identifier
+ * @param {object} config - { element, isOpen, open, close }
+ */
+export function register(name, config) {
+  panels[name] = {
+    element: config.element,
+    isOpen: config.isOpen || (() => config.element?.classList.contains('visible')),
+    open: config.open || (() => config.element?.classList.add('visible')),
+    close: config.close || (() => config.element?.classList.remove('visible'))
+  };
+  console.log(`Panels: Registered "${name}"`);
+}
+
+/**
+ * Open a panel (closes any currently open panel first)
+ * @param {string} name - Panel to open
+ * @returns {boolean} - Success
+ */
+export function open(name) {
+  if (!panels[name]) {
+    console.warn(`Panels: Unknown panel "${name}"`);
+    return false;
+  }
+
+  // Close current panel if different
+  if (currentPanel && currentPanel !== name) {
+    close(currentPanel, true); // Skip hiding backdrop
+  }
+
+  // Open requested panel
+  panels[name].open();
+  currentPanel = name;
+  
+  // Show backdrop
+  showBackdrop();
+  
+  // Dispatch event for other components to react
+  window.dispatchEvent(new CustomEvent('panelOpened', { detail: { name } }));
+  
+  return true;
+}
+
+/**
+ * Close a specific panel
+ * @param {string} name - Panel to close
+ * @param {boolean} keepBackdrop - Don't hide backdrop (used when switching panels)
+ */
+export function close(name, keepBackdrop = false) {
+  if (!panels[name]) return;
+  
+  panels[name].close();
+  if (currentPanel === name) {
+    currentPanel = null;
+  }
+  
+  // Hide backdrop unless we're switching panels
+  if (!keepBackdrop && !currentPanel) {
+    hideBackdrop();
+  }
+  
+  window.dispatchEvent(new CustomEvent('panelClosed', { detail: { name } }));
+}
+
+/**
+ * Close all panels
+ */
+export function closeAll() {
+  Object.keys(panels).forEach(name => close(name, true));
+  hideBackdrop();
+  currentPanel = null;
+}
+
+/**
+ * Toggle a panel (open if closed, close if open)
+ * @param {string} name - Panel to toggle
+ * @returns {boolean} - New state (true = open)
+ */
+export function toggle(name) {
+  if (!panels[name]) {
+    console.warn(`Panels: Unknown panel "${name}"`);
+    return false;
+  }
+
+  if (panels[name].isOpen()) {
+    close(name);
+    return false;
+  } else {
+    open(name);
+    return true;
+  }
+}
+
+/**
+ * Check if a panel is currently open
+ * @param {string} name - Panel to check
+ * @returns {boolean}
+ */
+export function isOpen(name) {
+  return panels[name]?.isOpen() || false;
+}
+
+/**
+ * Get currently open panel name
+ * @returns {string|null}
+ */
+export function getCurrent() {
+  return currentPanel;
+}
+
+// Export API
+export const UplinkPanels = {
+  register,
+  open,
+  close,
+  closeAll,
+  toggle,
+  isOpen,
+  getCurrent
+};
+
+// Backward compat: assign to window
+window.UplinkPanels = UplinkPanels;
+
+console.log('Panels: Module loaded');