@mooncompany/uplink-chat 0.5.0

package/public/js/message-renderer.js

@@ -0,0 +1,288 @@
+// ============================================
+// MESSAGE RENDERER MODULE
+// Shared message rendering, avatars, and formatting
+// Used by both chat.js and split-chat.js
+// ============================================
+
+import { UplinkMarkdown } from './markdown.js';
+
+// ============================================
+// AVATAR SYSTEM
+// ============================================
+
+// Cache for avatar availability checks (agentId -> boolean|undefined)
+const avatarCache = {};
+// Session-stable cache buster (changes on each page load, not per message)
+const avatarCacheBust = Date.now();
+
+/**
+ * Build an agent avatar element for the given agent ID.
+ */
+function buildAgentAvatar(agentId) {
+  // Resolve agentId from current satellite if not provided
+  if (!agentId) {
+    const currentSat = window.UplinkSatellites?.getCurrentId?.() || 'main';
+    const satellites = window.UplinkSatellites?.getSatellites?.() || {};
+    const satellite = satellites[currentSat];
+    agentId = satellite?.agentId || 'main';
+  }
+
+  const container = document.createElement('div');
+  container.className = 'agent-avatar';
+  container.setAttribute('aria-hidden', 'true');
+
+  const avatarUrl = `/img/agents/${agentId}.png?t=${avatarCacheBust}`;
+
+  // Check cache first
+  if (avatarCache[agentId] === true) {
+    const img = document.createElement('img');
+    img.src = avatarUrl;
+    img.alt = '';
+    img.className = 'agent-avatar-img';
+    container.appendChild(img);
+    return container;
+  } else if (avatarCache[agentId] === false) {
+    return null;
+  }
+
+  // First time — try image, fallback to null
+  const img = document.createElement('img');
+  img.src = avatarUrl;
+  img.alt = '';
+  img.className = 'agent-avatar-img';
+
+  img.onload = () => { avatarCache[agentId] = true; };
+  img.onerror = () => {
+    avatarCache[agentId] = false;
+    container.remove();
+  };
+  container.appendChild(img);
+  return container;
+}
+
+/**
+ * Get agent emoji from the agents module.
+ */
+function getAgentEmoji(agentId) {
+  const agents = window.UplinkAgents?.getAgents?.() || [];
+  const agent = agents.find(a => a.id === agentId);
+  return agent?.identity?.emoji || '🤖';
+}
+
+// ============================================
+// TEXT FORMATTING
+// ============================================
+
+function isValidHttpUrl(str) {
+  try {
+    const url = new URL(str);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Format message text with markdown.
+ */
+function formatMessage(text) {
+  if (UplinkMarkdown?.render) {
+    const html = UplinkMarkdown.render(text);
+    if (UplinkMarkdown.highlightCode) {
+      const temp = document.createElement('div');
+      temp.innerHTML = html;
+      UplinkMarkdown.highlightCode(temp);
+      return temp.innerHTML;
+    }
+    return html;
+  }
+
+  // Fallback basic formatting
+  if (!text) return '';
+
+  let formatted = text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  formatted = formatted.replace(/```(\w*)\n?([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
+  formatted = formatted.replace(/`([^`]+)`/g, '<code>$1</code>');
+  formatted = formatted.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  formatted = formatted.replace(/__(.+?)__/g, '<strong>$1</strong>');
+  formatted = formatted.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+  formatted = formatted.replace(/_([^_]+)_/g, '<em>$1</em>');
+  formatted = formatted.replace(
+    /(https?:\/\/[^\s<]+)/g,
+    (match) => isValidHttpUrl(match)
+      ? `<a href="${match}" target="_blank" rel="noopener noreferrer">${match}</a>`
+      : match
+  );
+  formatted = formatted.replace(/\n/g, '<br>');
+
+  return formatted;
+}
+
+/**
+ * Render markdown text to HTML (alias for formatMessage, used by split-chat).
+ */
+function renderMarkdown(text) {
+  if (UplinkMarkdown?.render) {
+    return UplinkMarkdown.render(text);
+  }
+  return formatMessage(text);
+}
+
+// ============================================
+// MESSAGE RENDERING
+// ============================================
+
+/**
+ * Add a message to a container element.
+ */
+function addMessageToContainer(options) {
+  const {
+    container,
+    text,
+    type,
+    imageUrl = null,
+    showAvatar = false,
+    agentId = null,
+    timestamp = null,
+    scroll = {}
+  } = options;
+
+  if (!container) return null;
+
+  const div = document.createElement('div');
+  div.className = `message ${type}`;
+  div.dataset.time = timestamp || Date.now();
+
+  if (type === 'system') {
+    div.setAttribute('role', 'alert');
+    div.setAttribute('aria-live', 'polite');
+  }
+
+  // Add agent avatar
+  if (type === 'assistant' && showAvatar) {
+    const avatar = buildAgentAvatar(agentId);
+    if (avatar) {
+      div.prepend(avatar);
+    }
+  }
+
+  // Image handling
+  if (imageUrl && imageUrl !== '__pending_upload__') {
+    const img = document.createElement('img');
+    img.src = imageUrl;
+    img.alt = type === 'user' ? 'Image shared by you' : 'Image from assistant';
+    img.loading = 'lazy'; // Lazy load to reduce unnecessary 404s on scroll
+    img.onerror = () => {
+      // Silently hide broken images — console 404 unavoidable but UX is clean
+      img.remove();
+      // Only show placeholder if this is a user-uploaded image (not old uploads)
+      if (imageUrl.startsWith('/uploads/') && !imageUrl.includes('upload-')) {
+        const placeholder = document.createElement('div');
+        placeholder.className = 'message-image-expired';
+        placeholder.textContent = '🖼️ Image no longer available';
+        placeholder.style.opacity = '0.5';
+        placeholder.style.fontSize = '0.85em';
+        div.insertBefore(placeholder, div.firstChild);
+      }
+    };
+    div.appendChild(img);
+  } else if (imageUrl === '__pending_upload__') {
+    const placeholder = document.createElement('div');
+    placeholder.className = 'message-image-expired';
+    placeholder.textContent = '🖼️ Image (upload incomplete)';
+    div.appendChild(placeholder);
+  }
+
+  // Text content
+  if (text) {
+    const textSpan = document.createElement('span');
+    textSpan.className = 'message-text';
+    textSpan.innerHTML = formatMessage(text);
+    div.appendChild(textSpan);
+
+    if (UplinkMarkdown?.highlightCode) {
+      UplinkMarkdown.highlightCode(textSpan);
+    }
+  }
+
+  container.appendChild(div);
+
+  // Scroll management
+  const isNearBottom = scroll.isNearBottom !== undefined ? scroll.isNearBottom : true;
+  if (isNearBottom) {
+    container.scrollTop = container.scrollHeight;
+  } else if (type !== 'system' && scroll.onNewMessage) {
+    scroll.onNewMessage();
+  }
+
+  // Auto-dismiss system messages after 15 seconds
+  if (type === 'system') {
+    setTimeout(() => {
+      if (div.parentNode) {
+        div.style.transition = 'opacity 0.3s, transform 0.3s';
+        div.style.opacity = '0';
+        div.style.transform = 'translateY(-10px)';
+        setTimeout(() => div.remove(), 300);
+      }
+    }, 15000);
+  }
+
+  return div;
+}
+
+// ============================================
+// HTML ESCAPING UTILITIES
+// ============================================
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text || '';
+  return div.innerHTML;
+}
+
+function escapeAttr(text) {
+  return (text || '')
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+// ============================================
+// PUBLIC API
+// ============================================
+
+export const UplinkMessageRenderer = {
+  buildAgentAvatar,
+  getAgentEmoji,
+  avatarCache,
+  avatarCacheBust,
+  formatMessage,
+  renderMarkdown,
+  isValidHttpUrl,
+  addMessageToContainer,
+  escapeHtml,
+  escapeAttr
+};
+
+export {
+  buildAgentAvatar,
+  getAgentEmoji,
+  formatMessage,
+  renderMarkdown,
+  addMessageToContainer,
+  escapeHtml,
+  escapeAttr
+};
+
+// Backward compat: assign to window
+window.UplinkMessageRenderer = UplinkMessageRenderer;
+
+if (typeof logger !== 'undefined') {
+  logger.debug('MessageRenderer: Module loaded');
+}

package/public/js/missed-messages.js

@@ -0,0 +1,235 @@
+// ============================================
+// MISSED MESSAGES MODULE
+// Polls for messages when tab was closed
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+let pollingInterval = null;
+let isPolling = false;
+
+function init() {
+  if (window.UplinkLogger?.debug) {
+    window.UplinkLogger.debug('[Missed Messages] Initialized');
+  }
+  
+  // Check for missed messages immediately on load
+  setTimeout(checkForMissedMessages, 1000);
+  
+  // Start periodic polling every 30 seconds
+  startPolling();
+}
+
+function startPolling() {
+  if (pollingInterval) return; // Already polling
+  
+  isPolling = true;
+  pollingInterval = setInterval(checkForMissedMessages, 30000); // 30 seconds
+  if (window.UplinkLogger?.debug) {
+    window.UplinkLogger.debug('[Missed Messages] Started polling every 30 seconds');
+  }
+}
+
+function stopPolling() {
+  if (pollingInterval) {
+    clearInterval(pollingInterval);
+    pollingInterval = null;
+    isPolling = false;
+    if (window.UplinkLogger?.debug) {
+      window.UplinkLogger.debug('[Missed Messages] Stopped polling');
+    }
+  }
+}
+
+function getAuthHeaders() {
+  const settings = JSON.parse(localStorage.getItem('uplink-settings') || '{}');
+  const token = settings.gatewayToken || '';
+  const headers = {};
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+  return headers;
+}
+
+async function checkForMissedMessages() {
+  // M-27: Skip polling if offline or WebSocket disconnected
+  if (!navigator.onLine) {
+    if (window.UplinkLogger?.debug) {
+      window.UplinkLogger.debug('[Missed Messages] Skipping check - browser offline');
+    }
+    return;
+  }
+  
+  // Skip if WebSocket is not connected
+  if (window.UplinkConnection && !window.UplinkConnection.isConnected()) {
+    if (window.UplinkLogger?.debug) {
+      window.UplinkLogger.debug('[Missed Messages] Skipping check - WebSocket disconnected');
+    }
+    return;
+  }
+  
+  try {
+    const response = await fetch('/api/missed-messages', {
+      headers: getAuthHeaders(),
+    });
+    if (!response.ok) {
+      if (window.UplinkLogger?.warn) {
+        window.UplinkLogger.warn('[Missed Messages] Failed to fetch:', response.status);
+      }
+      return;
+    }
+
+    const data = await response.json();
+    
+    if (data.messages && data.messages.length > 0) {
+      if (window.UplinkLogger?.debug) {
+        window.UplinkLogger.debug(`[Missed Messages] Retrieved ${data.messages.length} missed messages`);
+      }
+      
+      // Display missed messages
+      displayMissedMessages(data.messages);
+    }
+  } catch (error) {
+    if (window.UplinkLogger?.warn) {
+      window.UplinkLogger.warn('[Missed Messages] Error fetching:', error.message);
+    }
+  }
+}
+
+// Track displayed message hashes to prevent duplicates (H-45)
+const displayedHashes = new Set();
+const MAX_DISPLAYED_HASHES = 500;
+
+function hashMessage(text) {
+  let hash = 5381;
+  for (let i = 0; i < text.length; i++) {
+    hash = ((hash << 5) + hash + text.charCodeAt(i)) | 0;
+  }
+  return hash;
+}
+
+function displayMissedMessages(messages) {
+  // Sort messages by timestamp
+  messages.sort((a, b) => a.timestamp - b.timestamp);
+
+  // Trim hash set if too large
+  if (displayedHashes.size > MAX_DISPLAYED_HASHES) {
+    const iter = displayedHashes.values();
+    const toRemove = displayedHashes.size - MAX_DISPLAYED_HASHES;
+    for (let i = 0; i < toRemove; i++) {
+      displayedHashes.delete(iter.next().value);
+    }
+  }
+  
+  let addedCount = 0;
+  for (const msg of messages) {
+    // Add each message to the chat
+    const messageText = typeof msg.message === 'string' ? msg.message : String(msg.message || '');
+    
+    if (messageText) {
+      // Deduplicate: skip messages we've already displayed (H-45)
+      const hash = hashMessage(messageText);
+      if (displayedHashes.has(hash)) {
+        if (window.UplinkLogger?.debug) {
+          window.UplinkLogger.debug(`[Missed Messages] Skipping duplicate message (hash: ${hash})`);
+        }
+        continue;
+      }
+
+      // Also check if message is already visible in the chat DOM
+      const existingMessages = document.querySelectorAll('.message.assistant');
+      let alreadyVisible = false;
+      for (const el of existingMessages) {
+        if (el.dataset.originalText === messageText) {
+          alreadyVisible = true;
+          break;
+        }
+      }
+      if (alreadyVisible) {
+        if (window.UplinkLogger?.debug) {
+          window.UplinkLogger.debug(`[Missed Messages] Skipping already-visible message`);
+        }
+        displayedHashes.add(hash);
+        continue;
+      }
+
+      try {
+        // Use the chat module's addMessage if available
+        // Signature: addMessage(text, type, imageUrl, save)
+        if (window.UplinkChat && window.UplinkChat.addMessage) {
+          window.UplinkChat.addMessage(messageText, 'assistant');
+        } else if (window.addMessage) {
+          window.addMessage(messageText, 'assistant');
+        } else {
+          if (window.UplinkLogger?.warn) {
+            window.UplinkLogger.warn('[Missed Messages] No addMessage function available');
+          }
+        }
+        
+        displayedHashes.add(hash);
+        addedCount++;
+        if (window.UplinkLogger?.debug) {
+          window.UplinkLogger.debug(`[Missed Messages] Displayed missed message for satellite ${msg.satelliteId}`);
+        }
+      } catch (err) {
+        if (window.UplinkLogger?.error) {
+          window.UplinkLogger.error('[Missed Messages] Error displaying message:', err.message);
+        }
+      }
+    }
+  }
+  
+  if (addedCount > 0) {
+    // Show a notification that we recovered missed messages
+    showMissedMessageNotification(addedCount);
+    
+    // Scroll to bottom to show new messages
+    if (window.scrollToBottom) {
+      setTimeout(window.scrollToBottom, 100);
+    }
+  }
+}
+
+function showMissedMessageNotification(count) {
+  // Create a temporary notification (CSP-safe — no inline styles)
+  const notification = document.createElement('div');
+  notification.className = 'missed-message-notification';
+  
+  const inner = document.createElement('div');
+  inner.className = 'missed-message-banner';
+  inner.textContent = `📨 Retrieved ${count} missed message${count > 1 ? 's' : ''} from while you were away`;
+  notification.appendChild(inner);
+  
+  // Insert at top of chat area
+  const chatContainer = document.getElementById('chatMessages') || document.body;
+  chatContainer.insertBefore(notification, chatContainer.firstChild);
+  
+  // Remove after 4 seconds
+  setTimeout(() => {
+    if (notification.parentNode) {
+      notification.parentNode.removeChild(notification);
+    }
+  }, 4000);
+}
+
+// Check for missed messages on tab resume — but only if connected (avoid fetch errors during reconnect)
+document.addEventListener('visibilitychange', () => {
+  if (!document.hidden && window.UplinkConnection?.isConnected?.()) {
+    if (window.UplinkLogger?.debug) {
+      window.UplinkLogger.debug('[Missed Messages] Tab became visible, checking for missed messages');
+    }
+    checkForMissedMessages();
+  }
+});
+
+// Expose API
+export const MissedMessages = {
+  check: checkForMissedMessages,
+  startPolling,
+  stopPolling,
+  isPolling: () => isPolling
+};
+
+// Backward compat: assign to window
+window.MissedMessages = MissedMessages;
+
+// Register and init
+UplinkCore.registerModule('missed-messages', init);

package/public/js/mobile-debug.js

@@ -0,0 +1,95 @@
+// Mobile Debug Panel
+// Only loads on non-localhost (mobile via tunnel)
+
+const isLocal = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+
+if (!isLocal) {
+  // Only activate on remote/tunnel connections
+  const logs = [];
+
+  function initDebug() {
+    const container = document.createElement('div');
+    container.id = 'mobileDebugContainer';
+    container.innerHTML = `
+      <div id="debugToggle" style="
+        position: fixed; bottom: 80px; right: 15px; width: 50px; height: 50px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #fff; border-radius: 50%; display: flex; align-items: center;
+        justify-content: center; font-size: 22px; z-index: 99999;
+        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); cursor: pointer;
+        user-select: none; -webkit-tap-highlight-color: transparent;
+      ">🔧</div>
+      <div id="debugPanel" style="
+        display: none; position: fixed; bottom: 140px; right: 10px; left: 10px;
+        max-height: 40vh; background: rgba(26, 26, 46, 0.98); color: #0f0;
+        font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 11px;
+        padding: 12px; border-radius: 12px; z-index: 99998; overflow-y: auto;
+        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255,255,255,0.1);
+        word-break: break-all;
+      ">
+        <div style="color:#888;margin-bottom:8px;">📱 Mobile Debug Console</div>
+        <div id="debugOutput"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+    
+    const toggle = document.getElementById('debugToggle');
+    const panel = document.getElementById('debugPanel');
+    
+    toggle.addEventListener('click', function() {
+      panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
+    });
+    
+    console.log('🔧 Mobile debug panel ready - tap the button to view logs');
+  }
+
+  function escapeHtmlDebug(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+  }
+
+  function addLog(type, args) {
+    const timestamp = new Date().toLocaleTimeString();
+    const color = type === 'ERR' ? '#ff6b6b' : type === 'WRN' ? '#ffd93d' : '#0f0';
+    const msg = escapeHtmlDebug(Array.from(args).map(function(a) {
+      if (a === null) return 'null';
+      if (a === undefined) return 'undefined';
+      if (typeof a === 'object') {
+        try { return JSON.stringify(a, null, 2); } 
+        catch(e) { return String(a); }
+      }
+      return String(a);
+    }).join(' '));
+    
+    logs.push({ type, msg, time: timestamp, color });
+    if (logs.length > 200) logs.shift();
+    
+    const output = document.getElementById('debugOutput');
+    if (output) {
+      output.innerHTML = logs.map(function(l) {
+        return '<div style="color:' + l.color + ';margin:2px 0;"><span style="color:#666;">' + l.time + '</span> ' + l.msg + '</div>';
+      }).join('');
+      output.scrollTop = output.scrollHeight;
+    }
+  }
+
+  // Override console methods
+  const origLog = console.log;
+  const origErr = console.error;
+  const origWarn = console.warn;
+  const origDebug = console.debug;
+
+  console.log = function() { addLog('LOG', arguments); origLog.apply(console, arguments); };
+  console.error = function() { addLog('ERR', arguments); origErr.apply(console, arguments); };
+  console.warn = function() { addLog('WRN', arguments); origWarn.apply(console, arguments); };
+  console.debug = function() { addLog('DBG', arguments); origDebug.apply(console, arguments); };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initDebug);
+  } else {
+    initDebug();
+  }
+}
+
+// Export empty object for module system compatibility
+export const UplinkMobileDebug = {};
+window.UplinkMobileDebug = UplinkMobileDebug;