@mooncompany/uplink-chat 0.5.0

package/public/js/context-tracker.js

@@ -0,0 +1,271 @@
+// ============================================
+// CONTEXT TRACKER MODULE
+// Shows context window usage in the header
+// Fetches real context data from gateway session store
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+// Default context window size (tokens)
+const DEFAULT_CONTEXT_WINDOW = 200000;
+
+// Poll interval (fetch after each message, plus periodic refresh)
+const REFRESH_INTERVAL_MS = 60000; // 1 minute periodic refresh
+
+// State
+let contextUsed = 0;
+let contextMax = DEFAULT_CONTEXT_WINDOW;
+let displayedTokens = 0; // Animated display value
+let animationFrame = null;
+let refreshTimer = null;
+let currentSatelliteId = 'main';
+
+/**
+ * Format token count to human-readable string
+ * @param {number} tokens - Token count
+ * @returns {string} - Formatted string (e.g., "22k", "1.2k", "200k")
+ */
+function formatTokens(tokens) {
+  if (tokens >= 1000000) {
+    return (tokens / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+  }
+  if (tokens >= 1000) {
+    return (tokens / 1000).toFixed(tokens >= 10000 ? 0 : 1).replace(/\.0$/, '') + 'k';
+  }
+  return String(tokens);
+}
+
+/**
+ * Get color based on usage percentage
+ * @param {number} pct - Usage percentage (0-100)
+ * @returns {string} - CSS color value
+ */
+function getUsageColor(pct) {
+  if (pct >= 90) return 'var(--error)';       // Red — critical
+  if (pct >= 75) return 'var(--warning)';      // Yellow — getting full
+  return 'var(--success)';                      // Green — healthy
+}
+
+/**
+ * Animate the token count text smoothly toward a target value
+ * Uses eased lerp over ~600ms to match the CSS bar transition
+ */
+function animateTokenCount(target, max, textEl) {
+  if (animationFrame) cancelAnimationFrame(animationFrame);
+
+  const start = displayedTokens;
+  const diff = target - start;
+  if (diff === 0) return;
+
+  const duration = 600; // ms, matches CSS transition
+  const startTime = performance.now();
+
+  function tick(now) {
+    const elapsed = now - startTime;
+    const progress = Math.min(elapsed / duration, 1);
+    // Ease-out cubic
+    const eased = 1 - Math.pow(1 - progress, 3);
+    
+    displayedTokens = Math.round(start + diff * eased);
+    const isMobile = window.innerWidth <= 768;
+    const pct = Math.min(100, Math.round((displayedTokens / max) * 100));
+    textEl.textContent = isMobile ? `${pct}%` : `${formatTokens(displayedTokens)}/${formatTokens(max)}`;
+
+    if (progress < 1) {
+      animationFrame = requestAnimationFrame(tick);
+    } else {
+      displayedTokens = target;
+      animationFrame = null;
+    }
+  }
+
+  animationFrame = requestAnimationFrame(tick);
+}
+
+/**
+ * Update the context tracker display
+ */
+function updateDisplay() {
+  const badge = document.getElementById('contextBadge');
+  const barFill = document.getElementById('contextBarFill');
+  const text = document.getElementById('contextText');
+  
+  if (!badge) return;
+
+  if (contextUsed <= 0) {
+    badge.style.display = 'none';
+    return;
+  }
+
+  badge.style.display = 'flex';
+
+  const pct = Math.min(100, Math.round((contextUsed / contextMax) * 100));
+  const color = getUsageColor(pct);
+
+  // Update bar fill
+  if (barFill) {
+    barFill.style.width = pct + '%';
+    barFill.style.background = color;
+  }
+
+  // Animate text — smooth count toward target value
+  if (text) {
+    animateTokenCount(contextUsed, contextMax, text);
+  }
+
+  // Update tooltip — full details on hover
+  badge.title = `Context: ${contextUsed.toLocaleString()} / ${contextMax.toLocaleString()} tokens (${pct}%)`;
+
+  // Update ARIA
+  badge.setAttribute('aria-label', `Context window usage: ${pct}% — ${formatTokens(contextUsed)} of ${formatTokens(contextMax)} tokens used`);
+}
+
+/**
+ * Fetch context data from the server
+ */
+async function fetchContext() {
+  try {
+    const satelliteId = window.UplinkSatellites?.getCurrentSatellite() || 'main';
+    currentSatelliteId = satelliteId;
+    
+    const agentId = window.UplinkSatellites?.getCurrentAgentId?.() || 'main';
+    const response = await fetch(`/api/session/context?satelliteId=${encodeURIComponent(satelliteId)}&agentId=${encodeURIComponent(agentId)}`);
+    if (!response.ok) return;
+    
+    const data = await response.json();
+    if (!data.ok && data.error) {
+      if (window.logger) logger.warn('ContextTracker: Fetch error', data.error);
+      return;
+    }
+
+    contextUsed = data.totalTokens || 0;
+    contextMax = data.contextTokens || DEFAULT_CONTEXT_WINDOW;
+    updateDisplay();
+  } catch (e) {
+    if (window.logger) logger.warn('ContextTracker: Fetch failed', e.message);
+  }
+}
+
+/**
+ * Called after a message completes — refresh context data
+ * Multiple reads: immediate-ish for responsiveness, then again after
+ * pruning has had time to settle the token count
+ */
+function refresh() {
+  setTimeout(fetchContext, 2000);   // Quick read
+  setTimeout(fetchContext, 8000);   // Post-pruning settle
+  setTimeout(fetchContext, 20000);  // Final settle (catches slower prune cycles)
+}
+
+/**
+ * Reset the tracker (e.g., on clear chat)
+ */
+function reset() {
+  contextUsed = 0;
+  displayedTokens = 0;
+  updateDisplay();
+  // Fetch fresh data after reset
+  setTimeout(fetchContext, 2000);
+}
+
+/**
+ * Get current state
+ * @returns {Object} - Current context tracker state
+ */
+function getState() {
+  return {
+    contextUsed,
+    contextMax,
+    percentage: contextMax > 0 ? Math.round((contextUsed / contextMax) * 100) : 0,
+  };
+}
+
+/**
+ * Initialize the module
+ */
+function init() {
+  // Initial fetch
+  fetchContext();
+
+  // Periodic refresh
+  refreshTimer = setInterval(fetchContext, REFRESH_INTERVAL_MS);
+
+  // Re-render on resize (switches between token count and percentage)
+  // Debounced to avoid excessive reflows during resize
+  window.addEventListener('resize', UplinkCore.debounce(updateDisplay, 150));
+
+  // Refresh on tab resume — but only if already connected (avoid fetch errors during reconnect)
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible' && window.UplinkConnection?.isConnected?.()) {
+      fetchContext();
+    }
+  });
+
+  // Refresh on reconnect (session may have changed while disconnected)
+  if (window.UplinkConnection?.onConnection) {
+    window.UplinkConnection.onConnection((event) => {
+      if (event === 'connected') {
+        setTimeout(fetchContext, 1000);
+      }
+    });
+  }
+
+  // Watch for system messages mentioning compaction
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        // Check if it's a system message about compaction
+        const text = node.textContent || '';
+        if (node.classList?.contains('system') && /compact/i.test(text)) {
+          setTimeout(fetchContext, 3000); // Delay for store to update
+        }
+      }
+    }
+  });
+  const messagesEl = document.getElementById('messages');
+  if (messagesEl) {
+    observer.observe(messagesEl, { childList: true });
+  }
+
+  // Listen for chat clear events to reset
+  const settingsClearBtn = document.getElementById('settingsClearBtn');
+  if (settingsClearBtn) {
+    settingsClearBtn.addEventListener('click', () => {
+      setTimeout(reset, 500);
+    });
+  }
+
+  if (window.logger) {
+    logger.debug('ContextTracker: Initialized');
+  }
+}
+
+/**
+ * Cleanup function - stop timers
+ */
+function cleanup() {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+    refreshTimer = null;
+  }
+}
+
+// Expose API
+export const UplinkContextTracker = {
+  init,
+  refresh,       // Call after message completes
+  fetchContext,   // Manual fetch
+  reset,
+  getState,
+  cleanup,
+};
+
+// Backward compat: assign to window
+window.UplinkContextTracker = UplinkContextTracker;
+
+// Register with core for coordinated initialization
+UplinkCore.registerModule('context-tracker', init);
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', cleanup);

package/public/js/core.js

@@ -0,0 +1,172 @@
+// ============================================
+// CORE MODULE
+// Shared state, config, initialization coordinator
+// ============================================
+
+import { UplinkLogger } from './logger.js';
+
+// Global state - other modules read/write via UplinkCore
+const state = {
+  agentName: 'Assistant',
+  gatewayUrl: '',
+  audioResponses: true,
+  encryptionEnabled: false,
+  currentPassword: null,
+  mode: 'text',      // 'text' or 'voice'
+  chatState: 'idle'  // 'idle', 'processing', 'recording'
+};
+
+// Module registry - tracks which modules are loaded
+const modules = {};
+
+// Initialization queue - modules register init functions
+const initQueue = [];
+let initialized = false;
+
+// Load config from localStorage
+function loadConfig() {
+  try {
+    const config = JSON.parse(localStorage.getItem('uplink-config') || 'null');
+    if (config) {
+      state.agentName = config.agentName || 'Assistant';
+      state.gatewayUrl = config.gatewayUrl || '';
+      state.audioResponses = config.audioResponses !== undefined ? config.audioResponses : true;
+      state.encryptionEnabled = config.encryptionEnabled || false;
+    }
+    return config;
+  } catch (e) {
+    UplinkLogger.error('Core: Failed to load config', e);
+    return null;
+  }
+}
+
+// Save config to localStorage
+function saveConfig() {
+  try {
+    localStorage.setItem('uplink-config', JSON.stringify({
+      agentName: state.agentName,
+      gatewayUrl: state.gatewayUrl,
+      audioResponses: state.audioResponses,
+      encryptionEnabled: state.encryptionEnabled
+    }));
+  } catch (e) {
+    UplinkLogger.error('Core: Failed to save config', e);
+  }
+}
+
+// Register a module
+function registerModule(name, initFn) {
+  modules[name] = { loaded: true, initialized: false };
+  if (initFn) {
+    if (initialized) {
+      // Already initialized, run immediately
+      try {
+        initFn();
+        modules[name].initialized = true;
+      } catch (e) {
+        console.error(`Core: Module ${name} failed to initialize`, e);
+      }
+    } else {
+      initQueue.push({ name, fn: initFn });
+    }
+  }
+}
+
+// Run initialization
+function init() {
+  if (initialized) return;
+  
+  UplinkLogger.debug('Core: Initializing...');
+  loadConfig();
+
+  // Run all queued init functions
+  initQueue.forEach(({ name, fn }) => {
+    try {
+      fn();
+      modules[name].initialized = true;
+      UplinkLogger.debug(`Core: Module ${name} initialized`);
+    } catch (e) {
+      UplinkLogger.error(`Core: Module ${name} failed to initialize`, e);
+    }
+  });
+
+  initialized = true;
+  UplinkLogger.debug('Core: Ready');
+
+  // Register service worker for PWA + force update if stale
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js')
+      .then(reg => {
+        UplinkLogger.debug('Core: Service Worker registered', reg.scope);
+        // Check for updates immediately, then every 5 minutes
+        reg.update();
+        setInterval(() => reg.update(), 5 * 60 * 1000);
+      })
+      .catch(err => {
+        UplinkLogger.warn('Core: Service Worker registration failed', err);
+      });
+  }
+
+  // Dispatch ready event
+  window.dispatchEvent(new CustomEvent('uplink:ready'));
+}
+
+// Check if a module is available
+function hasModule(name) {
+  return modules[name]?.initialized === true;
+}
+
+// Utility: Debounce function for performance optimization
+function debounce(fn, delay) {
+  let timeoutId;
+  return function debounced(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), delay);
+  };
+}
+
+// Expose API
+export const UplinkCore = {
+  state,
+  loadConfig,
+  saveConfig,
+  registerModule,
+  hasModule,
+  init,
+  debounce,
+  
+  // State shortcuts
+  get agentName() { return state.agentName; },
+  set agentName(v) { state.agentName = v; saveConfig(); },
+  get gatewayUrl() { return state.gatewayUrl; },
+  set gatewayUrl(v) { state.gatewayUrl = v; saveConfig(); },
+  get audioResponses() { return state.audioResponses; },
+  set audioResponses(v) { state.audioResponses = v; saveConfig(); },
+  get encryptionEnabled() { return state.encryptionEnabled; },
+  set encryptionEnabled(v) { state.encryptionEnabled = v; saveConfig(); },
+  get mode() { return state.mode; },
+  set mode(v) { state.mode = v; },
+  get chatState() { return state.chatState; },
+  set chatState(v) { state.chatState = v; }
+};
+
+export {
+  state,
+  loadConfig,
+  saveConfig,
+  registerModule,
+  hasModule,
+  init,
+  debounce
+};
+
+// Backward compat: assign to window
+window.UplinkCore = UplinkCore;
+
+// Auto-init when DOM ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  // Small delay to let other modules register
+  setTimeout(init, 10);
+}