@mooncompany/uplink-chat 0.5.0

package/public/js/ui.js

@@ -0,0 +1,267 @@
+// ============================================
+// UI MODULE
+// Starfield, mode switching, common UI utilities
+// ============================================
+
+import { UplinkCore } from './core.js';
+import { UplinkStorage } from './storage.js';
+
+// DOM elements
+let starsContainer;
+let textModeTab, voiceModeTab;
+let textInputRow, voiceInputRow;
+let encryptionBadge;
+
+// Session timeout
+const SESSION_TIMEOUT = 4 * 60 * 60 * 1000; // 4 hours
+let sessionTimeoutId = null;
+
+// AbortController for event listeners cleanup
+let eventsAbortController = null;
+
+function init() {
+  // Abort previous event listeners to prevent stacking if init called multiple times
+  if (eventsAbortController) {
+    eventsAbortController.abort();
+  }
+  eventsAbortController = new AbortController();
+
+  starsContainer = document.getElementById('stars');
+  textModeTab = document.getElementById('textModeTab');
+  voiceModeTab = document.getElementById('voiceModeTab');
+  textInputRow = document.getElementById('textInputRow');
+  voiceInputRow = document.getElementById('voiceInputRow');
+  encryptionBadge = document.getElementById('encryptionBadge');
+
+  // Generate starfield
+  if (starsContainer) generateStars();
+
+  // Mode switching
+  if (textModeTab && voiceModeTab) setupModeTabs();
+
+  // Visibility change handling
+  setupVisibilityHandling();
+
+  // Session timeout
+  setupSessionTimeout();
+
+  // Audio pre-warming
+  setupAudioPrewarm();
+
+  // Listen for unlocked event
+  window.addEventListener('uplink:unlocked', updateUI, { signal: eventsAbortController.signal });
+
+  // Dynamic bottom padding for messages
+  setupPaddingObserver();
+
+  console.log('UI: Initialized');
+}
+
+function generateStars() {
+  for (let i = 0; i < 150; i++) {
+    const star = document.createElement('div');
+    star.className = 'star';
+    star.style.left = Math.random() * 100 + '%';
+    star.style.top = Math.random() * 100 + '%';
+    star.style.width = star.style.height = (Math.random() * 2 + 0.5) + 'px';
+    star.style.setProperty('--opacity', Math.random() * 0.7 + 0.3);
+    star.style.setProperty('--duration', (Math.random() * 4 + 2) + 's');
+    star.style.animationDelay = -(Math.random() * 10) + 's';
+    starsContainer.appendChild(star);
+  }
+}
+
+function setupModeTabs() {
+  textModeTab.addEventListener('click', () => setMode('text'));
+  voiceModeTab.addEventListener('click', () => setMode('voice'));
+
+  // Desktop header mode toggle buttons
+  const headerTextMode = document.getElementById('headerTextMode');
+  const headerVoiceMode = document.getElementById('headerVoiceMode');
+  headerTextMode?.addEventListener('click', () => setMode('text'));
+  headerVoiceMode?.addEventListener('click', () => setMode('voice'));
+}
+
+function setMode(mode) {
+  UplinkCore.mode = mode;
+
+  textModeTab?.classList.toggle('active', mode === 'text');
+  voiceModeTab?.classList.toggle('active', mode === 'voice');
+
+  // Sync desktop header mode buttons
+  const headerTextMode = document.getElementById('headerTextMode');
+  const headerVoiceMode = document.getElementById('headerVoiceMode');
+  headerTextMode?.classList.toggle('active', mode === 'text');
+  headerVoiceMode?.classList.toggle('active', mode === 'voice');
+  textInputRow?.classList.toggle('active', mode === 'text');
+  voiceInputRow?.classList.toggle('active', mode === 'voice');
+
+  // Start moon animation when switching to voice mode
+  if (mode === 'voice' && window.UplinkVoice?.startMoonAnimation) {
+    window.UplinkVoice.startMoonAnimation();
+  }
+
+  // Recalculate messages padding for new input area height
+  setTimeout(updateMessagesPadding, 50);
+
+  // Save preference
+  UplinkStorage.saveSettings({ mode });
+}
+
+function updateUI() {
+  // Update encryption badge
+  updateEncryptionBadge();
+
+  // Apply saved mode
+  const settings = UplinkStorage.loadSettings();
+  if (settings.mode) setMode(settings.mode);
+}
+
+function updateEncryptionBadge() {
+  if (!encryptionBadge) return;
+
+  if (UplinkCore.encryptionEnabled) {
+    encryptionBadge.style.display = 'flex';
+    if (UplinkCore.state.currentPassword) {
+      encryptionBadge.classList.remove('warning');
+      encryptionBadge.innerHTML = '<span>🔒</span><span>Encrypted</span>';
+    } else {
+      encryptionBadge.classList.add('warning');
+      encryptionBadge.innerHTML = '<span>🔓</span><span>Locked</span>';
+    }
+  } else {
+    encryptionBadge.style.display = 'none';
+  }
+}
+
+function setupVisibilityHandling() {
+  document.addEventListener('visibilitychange', () => {
+    const paused = document.hidden;
+    
+    // Pause star animations
+    document.querySelectorAll('.star').forEach(star => {
+      star.style.animationPlayState = paused ? 'paused' : 'running';
+    });
+  }, { signal: eventsAbortController.signal });
+}
+
+function setupSessionTimeout() {
+  function resetTimeout() {
+    if (!UplinkCore.encryptionEnabled || !UplinkCore.state.currentPassword) return;
+
+    if (sessionTimeoutId) clearTimeout(sessionTimeoutId);
+    
+    sessionTimeoutId = setTimeout(() => {
+      console.log('Session timeout - clearing password');
+      UplinkCore.state.currentPassword = null;
+      updateEncryptionBadge();
+      
+      // Show unlock screen
+      const onboarding = window.UplinkOnboarding;
+      if (onboarding) onboarding.showUnlock();
+    }, SESSION_TIMEOUT);
+  }
+
+  // Reset on activity (using signal to prevent stacking)
+  const signal = eventsAbortController.signal;
+  document.addEventListener('click', resetTimeout, { signal });
+  document.addEventListener('keypress', resetTimeout, { signal });
+  document.addEventListener('touchstart', resetTimeout, { signal });
+}
+
+function setupAudioPrewarm() {
+  let prewarmed = false;
+  
+  function prewarm() {
+    if (prewarmed) return;
+    prewarmed = true;
+    
+    const ctx = new (window.AudioContext || window.webkitAudioContext)();
+    ctx.resume().catch(err => console.error('UI: AudioContext resume failed:', err));
+    
+    const audio = document.getElementById('audio');
+    if (audio) audio.load();
+  }
+
+  document.addEventListener('click', prewarm, { once: true });
+  document.addEventListener('touchstart', prewarm, { once: true });
+  document.addEventListener('keydown', prewarm, { once: true });
+}
+
+// Dynamic padding for messages area to clear fixed input + audio player
+function updateMessagesPadding() {
+  const messages = document.getElementById('messages');
+  if (!messages) return;
+  
+  const inputArea = document.querySelector('.input-area');
+  const modeTabs = document.querySelector('.mode-tabs');
+  const audioBar = document.getElementById('audioPlayerBar');
+  
+  let bottomHeight = 0;
+  if (inputArea) bottomHeight += inputArea.offsetHeight;
+  if (modeTabs) bottomHeight += modeTabs.offsetHeight;
+  if (audioBar && audioBar.style.display !== 'none') bottomHeight += audioBar.offsetHeight;
+  
+  // Add a small buffer
+  bottomHeight += 16;
+  
+  messages.style.paddingBottom = bottomHeight + 'px';
+}
+
+// Observe input area size changes (textarea growing, mode switching)
+function setupPaddingObserver() {
+  const inputArea = document.querySelector('.input-area');
+  if (!inputArea) return;
+  
+  // ResizeObserver for when textarea grows/shrinks
+  if (window.ResizeObserver) {
+    const ro = new ResizeObserver(() => updateMessagesPadding());
+    ro.observe(inputArea);
+    // Also observe voice input row
+    const voiceRow = document.getElementById('voiceInputRow');
+    if (voiceRow) ro.observe(voiceRow);
+  }
+  
+  // Listen for audio player show/hide
+  const audioBar = document.getElementById('audioPlayerBar');
+  if (audioBar && window.MutationObserver) {
+    const mo = new MutationObserver(() => updateMessagesPadding());
+    mo.observe(audioBar, { attributes: true, attributeFilter: ['style'] });
+  }
+  
+  // Recalc on resize and mode switch
+  // Debounced to avoid excessive padding calculations during resize
+  window.addEventListener('resize', UplinkCore.debounce(updateMessagesPadding, 150));
+  
+  // Initial calculation
+  updateMessagesPadding();
+}
+
+// Cleanup function
+function destroy() {
+  if (eventsAbortController) {
+    eventsAbortController.abort();
+    eventsAbortController = null;
+  }
+  if (sessionTimeoutId) {
+    clearTimeout(sessionTimeoutId);
+    sessionTimeoutId = null;
+  }
+}
+
+// Export API
+export const UplinkUI = {
+  setMode,
+  updateEncryptionBadge,
+  updateMessagesPadding,
+  generateStars,
+  destroy
+};
+
+export { setMode, updateEncryptionBadge, updateMessagesPadding, generateStars, destroy };
+
+// Backward compat: assign to window
+window.UplinkUI = UplinkUI;
+
+// Register and init
+UplinkCore.registerModule('ui', init);

package/public/js/update-notifier.js

@@ -0,0 +1,143 @@
+// ============================================
+// UPDATE NOTIFIER MODULE
+// Shows a banner when a new version is available
+// ============================================
+
+/**
+ * Check if this version's update was already dismissed
+ */
+function isDismissed(version) {
+  try {
+    return localStorage.getItem('dismissed-update-' + version) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Mark this version's update as dismissed
+ */
+function dismissVersion(version) {
+  try {
+    localStorage.setItem('dismissed-update-' + version, 'true');
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+/**
+ * Remove existing update banner if present
+ */
+function removeBanner() {
+  const existing = document.querySelector('.update-banner');
+  if (existing) {
+    existing.classList.add('update-banner-hiding');
+    setTimeout(() => {
+      if (existing.parentNode) {
+        existing.parentNode.removeChild(existing);
+      }
+    }, 300);
+  }
+}
+
+/**
+ * Pre-fill the chat input with an update prompt for the bot
+ */
+function prefillBotPrompt(latest) {
+  const input = document.getElementById('userInput');
+  if (input) {
+    input.value = 'Update Uplink to the latest version (v' + latest + ') and restart the server.';
+    input.focus();
+    // Trigger input event so auto-resize works
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+  removeBanner();
+}
+
+/**
+ * Show the update banner
+ */
+function showBanner(current, latest) {
+  if (isDismissed(latest)) return;
+
+  removeBanner();
+
+  const banner = document.createElement('div');
+  banner.className = 'update-banner';
+
+  // Banner text
+  const text = document.createElement('span');
+  text.className = 'update-banner-text';
+  text.textContent = '\u2B21 Uplink v' + latest + ' is available \u2014 you\'re on v' + current;
+
+  // "Let my bot handle it" button
+  const botBtn = document.createElement('button');
+  botBtn.className = 'update-banner-bot-btn';
+  botBtn.textContent = 'Let my bot handle it';
+  botBtn.addEventListener('click', function(e) {
+    e.preventDefault();
+    prefillBotPrompt(latest);
+  });
+
+  // Dismiss button
+  const dismissBtn = document.createElement('button');
+  dismissBtn.className = 'update-banner-dismiss';
+  dismissBtn.textContent = '\u2715';
+  dismissBtn.setAttribute('aria-label', 'Dismiss update notification');
+  dismissBtn.addEventListener('click', function() {
+    dismissVersion(latest);
+    removeBanner();
+  });
+
+  banner.appendChild(text);
+  banner.appendChild(botBtn);
+  banner.appendChild(dismissBtn);
+
+  // Insert at the top of the chat area
+  const chatMessages = document.getElementById('chatMessages');
+  if (chatMessages) {
+    chatMessages.insertBefore(banner, chatMessages.firstChild);
+  } else {
+    document.body.insertBefore(banner, document.body.firstChild);
+  }
+}
+
+/**
+ * Handle incoming WebSocket messages
+ */
+function handleWsMessage(data) {
+  if (!data || data.type !== 'update_available') return;
+  if (!data.current || !data.latest) return;
+
+  showBanner(data.current, data.latest);
+}
+
+/**
+ * Initialize the update notifier
+ */
+function init() {
+  // Listen for WebSocket messages via custom event
+  window.addEventListener('uplink:ws-message', function(e) {
+    if (e.detail) {
+      handleWsMessage(e.detail);
+    }
+  });
+
+  if (window.UplinkLogger && window.UplinkLogger.debug) {
+    window.UplinkLogger.debug('[UpdateNotifier] Initialized');
+  }
+}
+
+// Register with UplinkCore if available
+UplinkCore.registerModule('update-notifier', init);
+
+// Expose for testing
+export const UplinkUpdateNotifier = {
+  showBanner: showBanner,
+  handleWsMessage: handleWsMessage,
+};
+
+import { UplinkCore } from './core.js';
+
+// Backward compat: assign to window
+window.UplinkUpdateNotifier = UplinkUpdateNotifier;

package/public/js/utils/constants.js

@@ -0,0 +1,165 @@
+// ============================================
+// CONSTANTS UTILITY
+// Centralized magic numbers and configuration
+// ============================================
+
+// ===========================================
+// File Size Limits
+// ===========================================
+export const FILE_LIMITS = {
+  // Audio upload limit (25MB)
+  AUDIO_MAX_SIZE: 25 * 1024 * 1024,
+  
+  // Image upload limit (10MB)
+  IMAGE_MAX_SIZE: 10 * 1024 * 1024,
+  
+  // Video upload limit (50MB)
+  VIDEO_MAX_SIZE: 50 * 1024 * 1024,
+  
+  // Generic file upload limit
+  DEFAULT_MAX_SIZE: 10 * 1024 * 1024,
+};
+
+// ===========================================
+// Timeout Values (milliseconds)
+// ===========================================
+export const TIMEOUTS = {
+  // Default fetch timeout
+  FETCH_DEFAULT: 45000,
+  
+  // Extended timeout for AI chat operations
+  CHAT_REQUEST: 300000,
+  
+  // Timeout for TTS generation
+  TTS_GENERATION: 60000,
+  
+  // Timeout for transcription
+  TRANSCRIPTION: 45000,
+  
+  // WebSocket ping interval
+  WS_PING_INTERVAL: 30000,
+  
+  // WebSocket connection timeout
+  WS_CONNECTION: 10000,
+  
+  // Reconnection delay (base)
+  RECONNECT_BASE: 1000,
+  
+  // Maximum reconnection delay
+  RECONNECT_MAX: 30000,
+  
+  // Typing indicator timeout
+  TYPING_INDICATOR: 60000,
+  
+  // Request tracking cleanup
+  REQUEST_CLEANUP: 300000,
+};
+
+// ===========================================
+// Rate Limits
+// ===========================================
+export const RATE_LIMITS = {
+  // WebSocket messages per minute
+  WS_MESSAGES_PER_MINUTE: 30,
+  
+  // WebSocket rate limit window (ms)
+  WS_WINDOW_MS: 60000,
+  
+  // General API rate limit (requests per window)
+  API_REQUESTS_PER_WINDOW: 100,
+  
+  // Strict rate limit (for sensitive endpoints)
+  STRICT_REQUESTS_PER_WINDOW: 10,
+  
+  // Rate limit window (15 minutes)
+  API_WINDOW_MS: 15 * 60 * 1000,
+};
+
+// ===========================================
+// Retry Configuration
+// ===========================================
+export const RETRY = {
+  // Maximum retry attempts
+  MAX_ATTEMPTS: 3,
+  
+  // Base delay between retries (ms)
+  BASE_DELAY: 1000,
+  
+  // Maximum delay between retries (ms)
+  MAX_DELAY: 10000,
+  
+  // Exponential backoff multiplier
+  BACKOFF_MULTIPLIER: 2,
+};
+
+// ===========================================
+// Message Limits
+// ===========================================
+export const MESSAGE_LIMITS = {
+  // Maximum message length
+  MAX_LENGTH: 50000,
+  
+  // Maximum messages in sync storage
+  MAX_SYNC_MESSAGES: 100,
+  
+  // Maximum activity items to keep
+  MAX_ACTIVITY_ITEMS: 50,
+  
+  // Truncation length for previews
+  PREVIEW_LENGTH: 100,
+};
+
+// ===========================================
+// UI Constants
+// ===========================================
+export const UI = {
+  // Maximum textarea height
+  TEXTAREA_MAX_HEIGHT: 150,
+  
+  // Scroll threshold for auto-scroll
+  SCROLL_THRESHOLD: 100,
+  
+  // Animation durations
+  ANIMATION_FAST: 150,
+  ANIMATION_NORMAL: 300,
+  ANIMATION_SLOW: 500,
+  
+  // Mobile breakpoint
+  MOBILE_BREAKPOINT: 768,
+  
+  // Button feedback animation (copy, etc.)
+  BUTTON_FEEDBACK_DURATION: 1500,
+  
+  // Text truncation lengths (L-07: magic numbers)
+  TEXT_TRUNCATE_REPLY: 150,
+  TEXT_TRUNCATE_FORK: 500,
+  TEXT_TRUNCATE_EDIT: 200,
+  
+  // Form constraints
+  SATELLITE_NAME_MAX_LENGTH: 32,
+};
+
+// ===========================================
+// Validation Patterns
+// ===========================================
+export const PATTERNS = {
+  // Satellite ID pattern
+  SATELLITE_ID: /^[a-zA-Z0-9_-]{1,32}$/,
+  
+  // Share ID pattern
+  SHARE_ID: /^[a-zA-Z0-9]{1,12}$/,
+  
+  // URL pattern (basic)
+  URL: /^https?:\/\/.+/i,
+};
+
+// Default export for convenience
+export default {
+  FILE_LIMITS,
+  TIMEOUTS,
+  RATE_LIMITS,
+  RETRY,
+  MESSAGE_LIMITS,
+  UI,
+  PATTERNS,
+};

package/public/js/utils/sanitize.js

@@ -0,0 +1,93 @@
+// ============================================
+// SANITIZE UTILITY
+// DOMPurify wrapper for HTML sanitization
+// ============================================
+
+/**
+ * Sanitize HTML content using DOMPurify (if available) or basic escaping
+ * 
+ * @param {string} html - The HTML string to sanitize
+ * @param {Object} options - DOMPurify configuration options
+ * @returns {string} - Sanitized HTML string
+ */
+export function sanitizeHTML(html, options = {}) {
+  if (typeof html !== 'string') {
+    return '';
+  }
+  
+  // Use DOMPurify if available (should be loaded via CDN or npm)
+  if (typeof DOMPurify !== 'undefined') {
+    const defaultOptions = {
+      ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'ol', 'li', 'code', 'pre', 'blockquote', 'span', 'img', 'h2', 'h3', 'h4', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'del', 'hr'],
+      ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'src', 'alt'],
+      ALLOW_DATA_ATTR: false,
+      ADD_ATTR: ['target'],
+      ...options
+    };
+    
+    // Force safe link behavior
+    DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+      if (node.tagName === 'A') {
+        node.setAttribute('target', '_blank');
+        node.setAttribute('rel', 'noopener noreferrer');
+      }
+    });
+    
+    return DOMPurify.sanitize(html, defaultOptions);
+  }
+  
+  // Fallback: basic HTML escaping if DOMPurify not available
+  if (typeof window !== 'undefined' && window.UplinkLogger?.warn) {
+    window.UplinkLogger.warn('DOMPurify not loaded, falling back to basic escaping');
+  }
+  return escapeHTML(html);
+}
+
+/**
+ * Basic HTML escaping - converts special characters to HTML entities
+ * Use sanitizeHTML for untrusted content that may contain markup
+ * 
+ * @param {string} str - The string to escape
+ * @returns {string} - Escaped string safe for HTML insertion
+ */
+export function escapeHTML(str) {
+  if (typeof str !== 'string') {
+    return '';
+  }
+  
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+/**
+ * Escape HTML and convert newlines to <br> tags
+ * Useful for displaying multi-line text content
+ * 
+ * @param {string} str - The string to escape
+ * @returns {string} - Escaped string with line breaks
+ */
+export function escapeHTMLWithBreaks(str) {
+  return escapeHTML(str).replace(/\n/g, '<br>');
+}
+
+/**
+ * Sanitize a string for use in CSS class names
+ * 
+ * @param {string} str - The string to sanitize
+ * @returns {string} - Safe CSS class name
+ */
+export function sanitizeClassName(str) {
+  if (typeof str !== 'string') {
+    return '';
+  }
+  return str.replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 50);
+}
+
+// Default export for convenience
+export default {
+  sanitizeHTML,
+  escapeHTML,
+  escapeHTMLWithBreaks,
+  sanitizeClassName
+};