@mooncompany/uplink-chat 0.5.0

package/public/js/satellite-sync.js

@@ -0,0 +1,256 @@
+// ============================================
+// SATELLITE SYNC MODULE
+// Gateway communication and session management
+// ============================================
+//
+// This module handles all server/gateway communication for satellites:
+// - Fetching remote sessions from the gateway
+// - Syncing satellite lists across devices
+// - Fetching and merging chat history from gateway
+// - Session retirement (deletion)
+// - Session status checks
+//
+// Exposed as window.UplinkSatelliteSync
+// ============================================
+
+// ============================================
+// DEPENDENCY HELPERS
+// ============================================
+
+function getLogger() {
+  return window.logger || console;
+}
+
+// ============================================
+// SYNC FUNCTIONS
+// ============================================
+
+/**
+ * Fetch sessions from the gateway (via server) and merge any Uplink
+ * satellites that don't already exist in localStorage.
+ * This is the cross-device sync mechanism — satellites created on
+ * another Uplink instance show up here after their first message.
+ * 
+ * @param {Object} satellites - Current satellites object (will be mutated)
+ * @param {string} PRIMARY_SATELLITE - ID of the primary satellite
+ * @param {string} currentSatellite - Currently active satellite ID
+ * @returns {Promise<{added: number, removed: number, satellites: Object, currentSatellite: string}>}
+ */
+async function syncRemoteSessions(satellites, PRIMARY_SATELLITE, currentSatellite) {
+  try {
+    const res = await fetch('/api/satellite/sessions');
+    if (!res.ok) {
+      return { added: 0, removed: 0, satellites, currentSatellite };
+    }
+
+    const data = await res.json();
+    if (!data.ok || !Array.isArray(data.sessions)) {
+      return { added: 0, removed: 0, satellites, currentSatellite };
+    }
+
+    let added = 0;
+    let removed = 0;
+
+    // Build set of remote satellite IDs for pruning
+    const remoteIds = new Set(data.sessions.map(s => s.satelliteId));
+
+    // Add new remote sessions
+    for (const session of data.sessions) {
+      const { satelliteId, agentId, updatedAt } = session;
+
+      // Skip if we already have this satellite locally
+      if (satellites[satelliteId]) continue;
+
+      // Skip test/manual satellites
+      if (satelliteId.startsWith('test-')) continue;
+
+      // Derive a display name from the agentId
+      const agentName = deriveAgentName(agentId);
+
+      satellites[satelliteId] = {
+        id: satelliteId,
+        name: agentName,
+        agentId: agentId || 'main',
+        createdAt: updatedAt || Date.now(),
+        synced: true,   // Mark as remotely synced (not created locally)
+        messages: []
+      };
+      added++;
+    }
+
+    // Prune: remove synced satellites that no longer exist on the gateway
+    // (deleted from another device). Only prune satellites we synced, not
+    // locally-created ones or the primary.
+    for (const [satId, sat] of Object.entries(satellites)) {
+      if (satId === PRIMARY_SATELLITE) continue;
+      if (!sat.synced) continue;
+      if (!remoteIds.has(satId)) {
+        // Don't delete if it's the current satellite — switch away first
+        if (satId === currentSatellite) {
+          currentSatellite = PRIMARY_SATELLITE;
+        }
+        delete satellites[satId];
+        removed++;
+      }
+    }
+
+    if (added > 0 || removed > 0) {
+      getLogger().debug('SatelliteSync: Synced — added', added, ', removed', removed, 'session(s)');
+    }
+
+    return { added, removed, satellites, currentSatellite };
+  } catch (e) {
+    // Non-fatal — local satellites still work
+    getLogger().debug('SatelliteSync: Remote sync failed (non-fatal)', e.message);
+    return { added: 0, removed: 0, satellites, currentSatellite };
+  }
+}
+
+/**
+ * Derive a human-readable name from an agentId.
+ * E.g. "top-flight-security" → "Top Flight Security"
+ */
+function deriveAgentName(agentId) {
+  if (!agentId || agentId === 'main') return 'Primary';
+
+  // Check if we have agent metadata available
+  const agents = window.UplinkAgents?.getAgents?.() || [];
+  const agent = agents.find(a => a.id === agentId);
+  if (agent?.name) return agent.name;
+  if (agent?.identity?.name) return agent.identity.name;
+
+  // Fallback: humanize the ID
+  return agentId
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+/**
+ * Fetch history from Gateway and merge with local satellite messages
+ * 
+ * @param {string} satelliteId - ID of the satellite to fetch history for
+ * @param {Object} satellite - Satellite object (will be mutated with merged messages)
+ * @returns {Promise<void>}
+ */
+async function fetchAndMergeGatewayHistory(satelliteId, satellite) {
+  try {
+    getLogger().debug('SatelliteSync: Fetching Gateway history for', satelliteId);
+    const currentAgentId = satellite?.agentId || 'main';
+    const response = await fetch(`/api/gateway/history?satelliteId=${satelliteId}&agentId=${currentAgentId}&limit=100`);
+    
+    if (!response.ok) {
+      getLogger().warn('SatelliteSync: Gateway history fetch failed:', response.status);
+      return;
+    }
+    
+    const data = await response.json();
+    if (!data.ok || !data.messages || data.messages.length === 0) {
+      getLogger().debug('SatelliteSync: No Gateway messages to merge');
+      return;
+    }
+    
+    getLogger().debug('SatelliteSync: Got', data.messages.length, 'messages from Gateway');
+    
+    if (!satellite) return;
+    
+    // Gateway is source of truth for text messages.
+    // Preserve any local image messages since the Gateway transcript
+    // doesn't include image attachments.
+    const localImages = (satellite.messages || []).filter(m => m.imageUrl);
+    satellite.messages = mergeMessagesByTimestamp(localImages, data.messages);
+    
+    getLogger().debug('SatelliteSync: Loaded', data.messages.length, 'messages from Gateway, preserved', localImages.length, 'local image messages');
+    
+  } catch (err) {
+    getLogger().error('SatelliteSync: Gateway history error:', err.message);
+  }
+}
+
+/**
+ * Merge local and Gateway messages by timestamp, avoiding duplicates
+ */
+function mergeMessagesByTimestamp(localMessages, gatewayMessages) {
+  // Create a map of existing local messages by timestamp+type
+  const localSet = new Set(
+    localMessages.map(m => `${m.timestamp || 0}-${m.type}-${(m.text || '').substring(0, 50)}`)
+  );
+  
+  // Add Gateway messages that don't exist locally
+  const newMessages = gatewayMessages.filter(gm => {
+    const key = `${gm.timestamp || 0}-${gm.type}-${(gm.text || '').substring(0, 50)}`;
+    return !localSet.has(key);
+  });
+  
+  // Combine and sort by timestamp
+  const combined = [...localMessages, ...newMessages];
+  combined.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));
+  
+  return combined;
+}
+
+/**
+ * Call the backend to retire a satellite's OpenClaw session
+ * This deletes both the session entry and transcript from OpenClaw
+ * 
+ * @param {string} satId - Satellite ID to retire
+ * @param {string} agentId - Agent ID for the satellite
+ * @returns {Promise<Object|null>} Result object or null on error
+ */
+async function retireSatelliteSession(satId, agentId) {
+  try {
+    const response = await fetch('/api/satellite/retire', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ satelliteId: satId, agentId: agentId || 'main' })
+    });
+    
+    if (!response.ok) {
+      getLogger().warn('SatelliteSync: Failed to retire session', response.status);
+      return null;
+    }
+    
+    const result = await response.json();
+    getLogger().debug('SatelliteSync: Session retired', result);
+    
+    return result;
+  } catch (err) {
+    getLogger().error('SatelliteSync: Error retiring session', err);
+    return null;
+  }
+}
+
+/**
+ * Fetch session status from OpenClaw
+ * 
+ * @param {string} satId - Satellite ID
+ * @param {string} satAgentId - Agent ID for the satellite
+ * @returns {Promise<Object|null>} Status object with {gatewayConnected, sessionKey} or null on error
+ */
+async function fetchSessionStatus(satId, satAgentId) {
+  try {
+    const response = await fetch(`/api/session/status?satelliteId=${encodeURIComponent(satId)}&agentId=${encodeURIComponent(satAgentId)}`);
+    if (!response.ok) {
+      throw new Error(`Status check failed: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (err) {
+    getLogger().error('SatelliteSync: Session status check failed', err);
+    return null;
+  }
+}
+
+// ============================================
+// PUBLIC API
+// ============================================
+
+export const UplinkSatelliteSync = {
+  syncRemoteSessions,
+  fetchAndMergeGatewayHistory,
+  retireSatelliteSession,
+  fetchSessionStatus
+};
+
+// Backward compat: assign to window
+window.UplinkSatelliteSync = UplinkSatelliteSync;
+

package/public/js/satellite-ui.js

@@ -0,0 +1,175 @@
+// ============================================
+// SATELLITE UI MODULE
+// List rendering, DOM manipulation, panel UI
+// ============================================
+
+// This module contains UI rendering and event handling for satellites panel
+
+/**
+ * Show notification toast
+ */
+export function showNotification(message, type = 'success') {
+  const notif = window.UplinkNotifications;
+  if (notif && notif.show) {
+    notif.show(message, type);
+    return;
+  }
+
+  // Fallback toast
+  const toast = document.createElement('div');
+  toast.className = `satellite-toast satellite-toast-${type}`;
+  toast.textContent = message;
+  toast.style.cssText = `
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 12px 20px;
+    background: ${type === 'error' ? '#ef4444' : type === 'warning' ? '#f59e0b' : '#10b981'};
+    color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    z-index: 100000;
+    animation: slideIn 0.3s ease-out;
+  `;
+  document.body.appendChild(toast);
+  setTimeout(() => {
+    toast.style.opacity = '0';
+    toast.style.transition = 'opacity 0.3s';
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+}
+
+/**
+ * Build satellite list HTML
+ */
+export function buildSatelliteList(satellites, currentSatellite, defaultSatellite) {
+  const sortedIds = Object.keys(satellites).sort((a, b) => {
+    if (a === defaultSatellite) return -1;
+    if (b === defaultSatellite) return 1;
+    const aTime = satellites[a].createdAt || 0;
+    const bTime = satellites[b].createdAt || 0;
+    return bTime - aTime;
+  });
+
+  return sortedIds.map(id => {
+    const sat = satellites[id];
+    const isActive = id === currentSatellite;
+    const isDefault = id === defaultSatellite;
+    const msgCount = (sat.messages || []).length;
+    const lastMsg = sat.messages?.[sat.messages.length - 1];
+    const preview = lastMsg ? (lastMsg.text?.slice(0, 50) || '').replace(/\n/g, ' ') : 'No messages';
+    const timestamp = sat.createdAt ? new Date(sat.createdAt).toLocaleDateString() : '';
+    const isPending = sat._pendingDelete || false;
+
+    let badges = '';
+    if (isDefault && id !== 'main') badges += '<span class="satellite-badge satellite-badge-default">★</span>';
+    if (sat.embedded) badges += '<span class="satellite-badge satellite-badge-embedded">🔗</span>';
+
+    const agentBadge = sat.agentId && sat.agentId !== 'main' 
+      ? `<span class="satellite-agent-badge" title="Agent: ${sat.agentId}">${sat.agentId}</span>` 
+      : '';
+
+    const agentId = sat.agentId || 'main';
+    const avatarSrc = `/img/agents/${agentId}.png`;
+
+    return `
+      <div class="satellite-item ${isActive ? 'active' : ''} ${isPending ? 'pending-delete' : ''}" 
+           data-satellite-id="${id}" role="option" aria-selected="${isActive}">
+        <img class="satellite-item-avatar" src="${avatarSrc}" alt="${sat.name || id}" onerror="this.src='/img/agents/default.png'">
+        <div class="satellite-item-main">
+          <span class="satellite-item-name">${sat.name || id}</span>
+          ${badges}
+          ${agentBadge}
+          <span class="satellite-item-count">${msgCount}</span>
+        </div>
+        <div class="satellite-item-preview">${preview}</div>
+        ${timestamp ? `<div class="satellite-item-timestamp">${timestamp}</div>` : ''}
+        ${!isDefault || id === 'main' ? `
+        <div class="satellite-item-actions">
+          ${id !== 'main' && !isDefault ? '<button class="satellite-action-btn satellite-action-primary" data-action="setPrimary" title="Set as default">★</button>' : ''}
+          <button class="satellite-action-btn satellite-action-rename" data-action="rename" title="Rename">✏</button>
+          ${id !== 'main' ? '<button class="satellite-action-btn satellite-action-delete" data-action="delete" title="Delete">🗑</button>' : ''}
+        </div>
+        ` : ''}
+      </div>
+    `;
+  }).join('');
+}
+
+/**
+ * Prompt for satellite name (with fallback for browsers that block prompt)
+ */
+export function promptForSatelliteName(onSuccess) {
+  const name = prompt('Name your new satellite:');
+  if (name && name.trim()) {
+    onSuccess(name.trim());
+  }
+}
+
+/**
+ * Show/hide switching indicator overlay
+ */
+export function showSwitchingIndicator(show) {
+  const messagesEl = document.getElementById('messages');
+  const inputArea = document.querySelector('.input-area, .chat-input');
+  const overlay = document.getElementById('satelliteSwitchOverlay');
+  
+  if (show) {
+    // Disable input during switch
+    if (inputArea) {
+      inputArea.classList.add('switching-satellite');
+      inputArea.style.pointerEvents = 'none';
+      inputArea.style.opacity = '0.5';
+    }
+    
+    // Add loading overlay to messages area
+    if (messagesEl && !overlay) {
+      const loadingOverlay = document.createElement('div');
+      loadingOverlay.id = 'satelliteSwitchOverlay';
+      loadingOverlay.className = 'satellite-switch-overlay';
+      loadingOverlay.innerHTML = `
+        <div class="satellite-switch-spinner">
+          <span>🛰️</span>
+          <span>Switching...</span>
+        </div>
+      `;
+      loadingOverlay.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0,0,0,0.3);
+        backdrop-filter: blur(4px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+      `;
+      messagesEl.parentElement.style.position = 'relative';
+      messagesEl.parentElement.appendChild(loadingOverlay);
+    }
+  } else {
+    // Re-enable input
+    if (inputArea) {
+      inputArea.classList.remove('switching-satellite');
+      inputArea.style.pointerEvents = '';
+      inputArea.style.opacity = '';
+    }
+    
+    // Remove overlay
+    if (overlay) {
+      overlay.remove();
+    }
+  }
+}
+
+// Expose on window for backward compatibility
+if (typeof window !== 'undefined') {
+  window.UplinkSatelliteUI = {
+    showNotification,
+    buildSatelliteList,
+    promptForSatelliteName,
+    showSwitchingIndicator
+  };
+}