@mooncompany/uplink-chat 0.5.0

package/public/js/developer.js

@@ -0,0 +1,432 @@
+// ============================================
+// ACTIVITY PANEL MODULE
+// Token usage, raw API responses, error logs, tool visibility
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+// ========== CONSTANTS ==========
+const MAX_LOGS = 50;
+const INIT_RETRY_DELAY_MS = 100;
+const ERROR_FLASH_DURATION_MS = 2000;
+const TOOL_FLASH_DURATION_MS = 1000;
+const RESPONSE_TRUNCATE_LENGTH = 500;
+
+// State
+let panelVisible = false;
+let tokenUsage = { prompt: 0, completion: 0, total: 0 };
+let apiLogs = [];
+let errorLogs = [];
+let toolCalls = [];
+
+// Create activity panel
+const panel = document.createElement('div');
+panel.className = 'dev-panel';
+panel.innerHTML = `
+  <div class="dev-panel-header">
+    <span class="dev-panel-title">Activity</span>
+    <button class="dev-panel-close" title="Close">&times;</button>
+  </div>
+  <div class="dev-panel-tabs">
+    <button class="dev-tab active" data-tab="tokens">Tokens</button>
+    <button class="dev-tab" data-tab="api">API</button>
+    <button class="dev-tab" data-tab="tools">Tools</button>
+    <button class="dev-tab" data-tab="errors">Errors</button>
+  </div>
+  <div class="dev-panel-content">
+    <div class="dev-tab-content active" id="devTokens">
+      <div class="token-stats">
+        <div class="token-stat">
+          <span class="token-label">Prompt</span>
+          <span class="token-value" id="tokenPrompt">0</span>
+        </div>
+        <div class="token-stat">
+          <span class="token-label">Completion</span>
+          <span class="token-value" id="tokenCompletion">0</span>
+        </div>
+        <div class="token-stat total">
+          <span class="token-label">Total</span>
+          <span class="token-value" id="tokenTotal">0</span>
+        </div>
+      </div>
+      <div class="token-session">
+        <span class="token-label">Session Total</span>
+        <span class="token-value" id="tokenSession">0</span>
+      </div>
+      <button class="dev-btn" id="resetTokens">Reset Session</button>
+    </div>
+    <div class="dev-tab-content" id="devApi">
+      <div class="api-log-list" id="apiLogList">
+        <div class="empty-log">No API calls yet</div>
+      </div>
+    </div>
+    <div class="dev-tab-content" id="devTools">
+      <div class="tool-list" id="toolList">
+        <div class="empty-log">No tool calls yet</div>
+      </div>
+    </div>
+    <div class="dev-tab-content" id="devErrors">
+      <div class="error-list" id="errorList">
+        <div class="empty-log">No errors 🎉</div>
+      </div>
+      <button class="dev-btn" id="clearErrors">Clear Errors</button>
+    </div>
+  </div>
+`;
+
+// Session token tracking
+let sessionTokens = 0;
+
+function init() {
+  const app = document.querySelector('.app');
+  if (!app) {
+    setTimeout(init, 100);
+    return;
+  }
+
+  // Add panel to DOM
+  document.body.appendChild(panel);
+  
+  // Listen for activity button click (in header)
+  const activityBtn = document.getElementById('activityBtn');
+  if (activityBtn) {
+    activityBtn.addEventListener('click', togglePanel);
+  }
+
+  // Close button
+  panel.querySelector('.dev-panel-close').addEventListener('click', () => {
+    if (window.UplinkPanels) {
+      window.UplinkPanels.close('activity');
+    } else {
+      panelVisible = false;
+      panel.classList.remove('visible');
+    }
+  });
+
+  // Tab switching
+  panel.querySelectorAll('.dev-tab').forEach(tab => {
+    tab.addEventListener('click', () => switchTab(tab.dataset.tab));
+  });
+
+  // Reset tokens button
+  document.getElementById('resetTokens').addEventListener('click', () => {
+    sessionTokens = 0;
+    updateTokenDisplay();
+  });
+
+  // Clear errors button
+  document.getElementById('clearErrors').addEventListener('click', () => {
+    errorLogs = [];
+    updateErrorDisplay();
+  });
+
+  // Intercept fetch to capture API calls
+  interceptFetch();
+
+  // Register with panel manager
+  if (window.UplinkPanels) {
+    window.UplinkPanels.register('activity', {
+      element: panel,
+      isOpen: () => panelVisible,
+      open: () => {
+        panelVisible = true;
+        panel.classList.add('visible');
+      },
+      close: () => {
+        panelVisible = false;
+        panel.classList.remove('visible');
+      }
+    });
+  }
+
+  if (window.UplinkLogger?.debug) {
+    window.UplinkLogger.debug('Developer: Initialized');
+  }
+}
+
+function togglePanel() {
+  if (window.UplinkPanels) {
+    panelVisible = window.UplinkPanels.toggle('activity');
+  } else {
+    panelVisible = !panelVisible;
+    panel.classList.toggle('visible', panelVisible);
+  }
+}
+
+function switchTab(tabName) {
+  panel.querySelectorAll('.dev-tab').forEach(t => {
+    t.classList.toggle('active', t.dataset.tab === tabName);
+  });
+  panel.querySelectorAll('.dev-tab-content').forEach(c => {
+    c.classList.toggle('active', c.id === 'dev' + tabName.charAt(0).toUpperCase() + tabName.slice(1));
+  });
+}
+
+function interceptFetch() {
+  // Use FetchUtils hook system instead of monkey-patching window.fetch (H-25)
+  // This avoids double-wrapping when both fetch-utils.js and developer.js run
+  if (window.UplinkFetch) {
+    window.UplinkFetch.registerHook('afterResponse', async (url, options, response, duration) => {
+      if (url.startsWith('/api/')) {
+        try {
+          const data = await response.json();
+          logApiCall(url, options, data, duration, response.status);
+          if (data.usage) updateTokens(data.usage);
+          if (data.toolCalls) logToolCalls(data.toolCalls);
+        } catch (e) {
+          logApiCall(url, options, null, duration, response.status);
+        }
+      }
+    });
+    window.UplinkFetch.registerHook('onError', async (url, options, error) => {
+      logError(error, url);
+    });
+    return;
+  }
+
+  // Fallback: direct monkey-patch if FetchUtils not available
+  const originalFetch = window.fetch;
+  window.fetch = async function(...args) {
+    const url = typeof args[0] === 'string' ? args[0] : args[0].url;
+    const startTime = Date.now();
+    
+    try {
+      const response = await originalFetch.apply(this, args);
+      
+      // Clone response to read body without consuming it
+      const cloned = response.clone();
+      
+      // Log API calls to our endpoints
+      if (url.startsWith('/api/')) {
+        const duration = Date.now() - startTime;
+        
+        try {
+          const data = await cloned.json();
+          logApiCall(url, args[1], data, duration, response.status);
+          
+          // Extract token usage if present
+          if (data.usage) {
+            updateTokens(data.usage);
+          }
+          
+          // Extract tool calls if present
+          if (data.toolCalls) {
+            logToolCalls(data.toolCalls);
+          }
+        } catch (e) {
+          // Not JSON, just log basic info
+          logApiCall(url, args[1], null, duration, response.status);
+        }
+      }
+      
+      return response;
+    } catch (error) {
+      logError(error, url);
+      throw error;
+    }
+  };
+}
+
+function logApiCall(url, options, response, duration, status) {
+  const entry = {
+    timestamp: new Date().toISOString(),
+    url,
+    method: options?.method || 'GET',
+    status,
+    duration,
+    response: response ? JSON.stringify(response, null, 2) : null
+  };
+  
+  apiLogs.unshift(entry);
+  if (apiLogs.length > MAX_LOGS) apiLogs.pop();
+  
+  updateApiDisplay();
+}
+
+function logToolCalls(tools) {
+  tools.forEach(tool => {
+    toolCalls.unshift({
+      timestamp: new Date().toISOString(),
+      name: tool.name || tool.function?.name || 'unknown',
+      args: tool.arguments || tool.function?.arguments || {},
+      result: tool.result
+    });
+  });
+  
+  if (toolCalls.length > MAX_LOGS) {
+    toolCalls = toolCalls.slice(0, MAX_LOGS);
+  }
+  
+  updateToolDisplay();
+}
+
+function logError(error, context = '') {
+  const msg = error.message || String(error);
+  
+  // "Failed to fetch" = browser-level network error (offline, tab resume, tunnel flaky).
+  // Log to console for debugging but don't surface in error panel — not actionable for user.
+  // Real server errors (4xx/5xx) still show in the panel.
+  if (msg === 'Failed to fetch') {
+    console.warn('[Network]', context || 'fetch failed');
+    return;
+  }
+
+  errorLogs.unshift({
+    timestamp: new Date().toISOString(),
+    message: msg,
+    context,
+    stack: error.stack
+  });
+  
+  if (errorLogs.length > MAX_LOGS) errorLogs.pop();
+  
+  updateErrorDisplay();
+  
+  // Flash the activity button to indicate error
+  const activityBtn = document.getElementById('activityBtn');
+  if (activityBtn) {
+    activityBtn.classList.add('has-error');
+    setTimeout(() => activityBtn.classList.remove('has-error'), 2000);
+  }
+}
+
+function updateTokens(usage) {
+  tokenUsage = {
+    prompt: usage.prompt_tokens || usage.promptTokens || 0,
+    completion: usage.completion_tokens || usage.completionTokens || 0,
+    total: usage.total_tokens || usage.totalTokens || 0
+  };
+  
+  sessionTokens += tokenUsage.total;
+  updateTokenDisplay();
+}
+
+function updateTokenDisplay() {
+  document.getElementById('tokenPrompt').textContent = tokenUsage.prompt.toLocaleString();
+  document.getElementById('tokenCompletion').textContent = tokenUsage.completion.toLocaleString();
+  document.getElementById('tokenTotal').textContent = tokenUsage.total.toLocaleString();
+  document.getElementById('tokenSession').textContent = sessionTokens.toLocaleString();
+}
+
+function updateApiDisplay() {
+  const list = document.getElementById('apiLogList');
+  if (apiLogs.length === 0) {
+    list.innerHTML = '<div class="empty-log">No API calls yet</div>';
+    return;
+  }
+  
+  list.innerHTML = apiLogs.map(log => `
+    <div class="api-log-entry">
+      <div class="api-log-header">
+        <span class="api-method ${escapeHtml(log.method)}">${escapeHtml(log.method)}</span>
+        <span class="api-url">${escapeHtml(log.url)}</span>
+        <span class="api-status status-${Math.floor(log.status/100)}">${log.status}</span>
+        <span class="api-duration">${log.duration}ms</span>
+      </div>
+      ${log.response ? `
+        <details class="api-response">
+          <summary>Response</summary>
+          <pre>${escapeHtml(truncate(log.response, 500))}</pre>
+        </details>
+      ` : ''}
+    </div>
+  `).join('');
+}
+
+function updateToolDisplay() {
+  const list = document.getElementById('toolList');
+  if (toolCalls.length === 0) {
+    list.innerHTML = '<div class="empty-log">No tool calls yet</div>';
+    return;
+  }
+  
+  list.innerHTML = toolCalls.map(tool => `
+    <div class="tool-entry">
+      <div class="tool-header">
+        <span class="tool-name">🔧 ${escapeHtml(tool.name)}</span>
+        <span class="tool-time">${formatTime(tool.timestamp)}</span>
+      </div>
+      ${tool.args ? `
+        <details class="tool-args">
+          <summary>Arguments</summary>
+          <pre>${escapeHtml(JSON.stringify(tool.args, null, 2))}</pre>
+        </details>
+      ` : ''}
+    </div>
+  `).join('');
+}
+
+function updateErrorDisplay() {
+  const list = document.getElementById('errorList');
+  if (errorLogs.length === 0) {
+    list.innerHTML = '<div class="empty-log">No errors 🎉</div>';
+    return;
+  }
+  
+  list.innerHTML = errorLogs.map(err => `
+    <div class="error-entry">
+      <div class="error-header">
+        <span class="error-message">${escapeHtml(err.message)}</span>
+        <span class="error-time">${formatTime(err.timestamp)}</span>
+      </div>
+      ${err.context ? `<div class="error-context">${escapeHtml(err.context)}</div>` : ''}
+    </div>
+  `).join('');
+}
+
+// Utilities
+function escapeHtml(str) {
+  if (!str) return '';
+  return str.replace(/[&<>"']/g, m => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+  })[m]);
+}
+
+function truncate(str, len) {
+  if (str.length <= len) return str;
+  return str.slice(0, len) + '...\n[truncated]';
+}
+
+function formatTime(iso) {
+  return new Date(iso).toLocaleTimeString();
+}
+
+// Log a simple tool name (from streaming indicator)
+function logTool(toolName) {
+  toolCalls.unshift({
+    timestamp: new Date().toISOString(),
+    name: toolName,
+    args: null,
+    result: null,
+    streaming: true
+  });
+  
+  if (toolCalls.length > MAX_LOGS) {
+    toolCalls = toolCalls.slice(0, MAX_LOGS);
+  }
+  
+  updateToolDisplay();
+  
+  // Flash the activity button to indicate tool usage
+  const activityBtn = document.getElementById('activityBtn');
+  if (activityBtn) {
+    activityBtn.classList.add('has-tool');
+    setTimeout(() => activityBtn.classList.remove('has-tool'), 1000);
+  }
+}
+
+// Expose for external use
+export const UplinkDeveloper = {
+  show: () => { panelVisible = true; panel.classList.add('visible'); },
+  hide: () => { panelVisible = false; panel.classList.remove('visible'); },
+  logError,
+  logTool,
+  logToolCall: (name, args, result) => logToolCalls([{ name, arguments: args, result }]),
+  updateTokens
+};
+
+// Backward compat: assign to window
+window.UplinkDeveloper = UplinkDeveloper;
+
+// Register with core for coordinated initialization
+UplinkCore.registerModule('developer', init);

package/public/js/encryption.js

@@ -0,0 +1,124 @@
+// ============================================
+// ENCRYPTION MODULE
+// Web Crypto API utilities for encrypted storage
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+const SALT_KEY = 'uplink-salt';
+const CRYPTO_ALGO = 'AES-GCM';
+const PBKDF2_ITERATIONS = 600000; // OWASP 2023 recommendation for SHA-256
+const PBKDF2_ITERATIONS_LEGACY = 100000; // Legacy iteration count for migration
+
+// Derive encryption key from password
+async function deriveKey(password, salt, iterations = PBKDF2_ITERATIONS) {
+  const encoder = new TextEncoder();
+  const keyMaterial = await crypto.subtle.importKey(
+    'raw',
+    encoder.encode(password),
+    'PBKDF2',
+    false,
+    ['deriveKey']
+  );
+
+  return crypto.subtle.deriveKey(
+    {
+      name: 'PBKDF2',
+      salt: salt,
+      iterations: iterations,
+      hash: 'SHA-256'
+    },
+    keyMaterial,
+    { name: CRYPTO_ALGO, length: 256 },
+    false,
+    ['encrypt', 'decrypt']
+  );
+}
+
+// Encrypt data
+async function encrypt(data, password) {
+  let salt = localStorage.getItem(SALT_KEY);
+  if (!salt) {
+    const newSalt = crypto.getRandomValues(new Uint8Array(16));
+    salt = btoa(String.fromCharCode(...newSalt));
+    localStorage.setItem(SALT_KEY, salt);
+  }
+  const saltBytes = Uint8Array.from(atob(salt), c => c.charCodeAt(0));
+
+  const key = await deriveKey(password, saltBytes);
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const encoder = new TextEncoder();
+
+  const encrypted = await crypto.subtle.encrypt(
+    { name: CRYPTO_ALGO, iv: iv },
+    key,
+    encoder.encode(JSON.stringify(data))
+  );
+
+  return {
+    v: 1, // Version flag for PBKDF2 iteration count
+    iv: btoa(String.fromCharCode(...iv)),
+    data: btoa(String.fromCharCode(...new Uint8Array(encrypted)))
+  };
+}
+
+// Decrypt data
+async function decrypt(encryptedObj, password) {
+  const salt = localStorage.getItem(SALT_KEY);
+  if (!salt) throw new Error('No salt found');
+
+  const saltBytes = Uint8Array.from(atob(salt), c => c.charCodeAt(0));
+
+  // Determine iteration count based on version (v1 = 600k, undefined = legacy 100k)
+  const version = encryptedObj.v;
+  const iterations = version === 1 ? PBKDF2_ITERATIONS : PBKDF2_ITERATIONS_LEGACY;
+
+  const key = await deriveKey(password, saltBytes, iterations);
+  const iv = Uint8Array.from(atob(encryptedObj.iv), c => c.charCodeAt(0));
+  const data = Uint8Array.from(atob(encryptedObj.data), c => c.charCodeAt(0));
+
+  const decrypted = await crypto.subtle.decrypt(
+    { name: CRYPTO_ALGO, iv: iv },
+    key,
+    data
+  );
+
+  const decoder = new TextDecoder();
+  return JSON.parse(decoder.decode(decrypted));
+}
+
+// Verify password by attempting decryption
+async function verifyPassword(password) {
+  try {
+    const encrypted = localStorage.getItem('uplink-history-encrypted');
+    if (encrypted) {
+      await decrypt(JSON.parse(encrypted), password);
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Clear encryption data
+function clearEncryption() {
+  localStorage.removeItem('uplink-history-encrypted');
+  localStorage.removeItem(SALT_KEY);
+}
+
+// Export API
+export const UplinkEncryption = {
+  encrypt,
+  decrypt,
+  verifyPassword,
+  clearEncryption,
+  SALT_KEY
+};
+
+export { encrypt, decrypt, verifyPassword, clearEncryption, SALT_KEY };
+
+// Backward compat: assign to window
+window.UplinkEncryption = UplinkEncryption;
+
+// Register with core if available
+UplinkCore.registerModule('encryption');

package/public/js/errors.js

@@ -0,0 +1,122 @@
+// ============================================
+// ERROR MESSAGES MODULE
+// User-friendly error messages
+// ============================================
+
+/**
+ * Map technical errors to user-friendly messages
+ */
+const errorMessages = {
+  // Network errors
+  'Failed to fetch': 'Unable to connect to the server. Check your internet connection.',
+  'NetworkError': 'Network error. Please check your connection and try again.',
+  'net::ERR_CONNECTION_REFUSED': 'Server is not responding. Is Uplink running?',
+  'ECONNREFUSED': 'Cannot connect to the AI gateway. Check your gateway settings.',
+  
+  // Gateway errors
+  'Gateway error: 401': 'Authentication failed. Check your gateway token in settings.',
+  'Gateway error: 403': 'Access denied. Your gateway token may be invalid.',
+  'Gateway error: 404': 'Gateway endpoint not found. Check your gateway URL.',
+  'Gateway error: 429': 'Too many requests. Please wait a moment and try again.',
+  'Gateway error: 500': 'The AI service encountered an error. Try again in a moment.',
+  'Gateway error: 502': 'Gateway is temporarily unavailable. Try again shortly.',
+  'Gateway error: 503': 'AI service is overloaded. Please try again later.',
+  
+  // Timeout errors
+  'Stream read timed out': 'Response took too long. The AI might be busy with a complex task.',
+  'timeout': 'Request timed out. Try a shorter message or try again.',
+  'AbortError': 'Request was cancelled.',
+  
+  // TTS errors
+  'ElevenLabs error: 401': 'Voice API key is invalid. Check your ElevenLabs settings.',
+  'ElevenLabs error: 429': 'Voice quota exceeded. Try again later or check your plan.',
+  'No text to speak': 'Nothing to read aloud.',
+  
+  // Whisper/transcription errors
+  'Whisper API error': 'Speech recognition failed. Try speaking again.',
+  
+  // WebSocket errors
+  'WebSocket': 'Real-time connection lost. Reconnecting...',
+  
+  // Generic
+  'Unknown error': 'Something went wrong. Please try again.'
+};
+
+/**
+ * Get user-friendly error message
+ * @param {Error|string} error - The error object or message
+ * @returns {string} User-friendly message
+ */
+export function getFriendlyMessage(error) {
+  const message = error?.message || String(error);
+  
+  // Check for exact matches first
+  if (errorMessages[message]) {
+    return errorMessages[message];
+  }
+  
+  // Check for partial matches
+  for (const [key, friendly] of Object.entries(errorMessages)) {
+    if (message.includes(key)) {
+      return friendly;
+    }
+  }
+  
+  // Check for HTTP status codes
+  const statusMatch = message.match(/(\d{3})/);
+  if (statusMatch) {
+    const status = statusMatch[1];
+    switch (status) {
+      case '400': return 'Invalid request. Please try again.';
+      case '401': return 'Authentication required. Check your settings.';
+      case '403': return 'Access denied.';
+      case '404': return 'Service not found. Check your configuration.';
+      case '429': return 'Too many requests. Please wait and try again.';
+      case '500': return 'Server error. Please try again later.';
+      case '502': return 'Service temporarily unavailable.';
+      case '503': return 'Service overloaded. Please try again later.';
+    }
+  }
+  
+  // If message is already user-friendly (no technical jargon), return it
+  if (!message.includes('Error:') && 
+      !message.includes('::') && 
+      !message.includes('ECONNREFUSED') &&
+      message.length < 100) {
+    return message;
+  }
+  
+  // Fallback
+  return 'Something went wrong. Please try again.';
+}
+
+/**
+ * Get error with action suggestion
+ * @param {Error|string} error - The error
+ * @returns {{ message: string, action?: string }}
+ */
+export function getErrorWithAction(error) {
+  const message = getFriendlyMessage(error);
+  const errorStr = error?.message || String(error);
+  
+  let action = null;
+  
+  if (errorStr.includes('401') || errorStr.includes('403')) {
+    action = 'Check Settings';
+  } else if (errorStr.includes('ECONNREFUSED') || errorStr.includes('Failed to fetch')) {
+    action = 'Check Connection';
+  } else if (errorStr.includes('429')) {
+    action = 'Wait & Retry';
+  }
+  
+  return { message, action };
+}
+
+// Export API
+export const UplinkErrors = {
+  getFriendlyMessage,
+  getErrorWithAction
+};
+
+// Backward compat: assign to window
+window.UplinkErrors = UplinkErrors;