@mooncompany/uplink-chat 0.5.0

package/public/js/split-chat.js

@@ -0,0 +1,1234 @@
+// ============================================
+// SPLIT CHAT MODULE
+// Secondary chat component for dual-pane mode
+// Independent chat state sharing the same WebSocket
+// ============================================
+
+import { UplinkCore } from './core.js';
+import { UplinkLogger } from './logger.js';
+
+const logger = UplinkLogger;
+
+// ============================================
+// STATE
+// ============================================
+
+// Active session state
+let activeSession = null; // { sessionKey, label, agentName }
+
+// DOM references (set in init)
+let paneEl = null;
+let iconEl = null;
+let nameEl = null;
+let messagesEl = null;
+let inputEl = null;
+let sendBtnEl = null;
+let switchBtnEl = null;
+let closeBtnEl = null;
+let contextBadgeEl = null;
+let contextBarFillEl = null;
+let contextTextEl = null;
+
+// Streaming handler instance (created lazily via shared UplinkStreamingHandler)
+let streamHandler = null;
+
+// History loading timestamp (used to prevent sync event duplication after load)
+let historyLoadedAt = 0;
+
+// Track recently sent messages to prevent duplication from sync events
+let lastSentMessageText = null;
+let lastSentMessageTime = 0;
+
+// Auto-scroll state
+const SCROLL_THRESHOLD_PX = 100;
+let isNearBottom = true;
+
+// Picker state
+let pickerVisible = false;
+let pickerEl = null;
+
+// WebSocket listener unsubscribe function
+let wsUnsubscribe = null;
+
+// Typing indicator element
+let typingEl = null;
+
+// Abort controller for stopping generation
+let currentAbortController = null;
+
+// Module init retry state
+let initRetryCount = 0;
+const MAX_INIT_RETRIES = 10;
+
+// ============================================
+// SHARED MODULE HELPERS
+// ============================================
+
+/**
+ * Get or create the streaming handler instance for split chat.
+ * Lazily initialized because messagesEl may not be available at module load time.
+ */
+function getStreamHandler() {
+  if (!streamHandler && messagesEl && window.UplinkStreamingHandler) {
+    streamHandler = window.UplinkStreamingHandler.create({
+      container: messagesEl,
+      formatMessage: renderMarkdown,
+      agentId: activeSession?.agentId || null,
+      onStreamStart: () => {
+        setInputEnabled(false);
+      },
+      onStreamEnd: () => setInputEnabled(true),
+      getIsNearBottom: () => isNearBottom,
+      showAvatar: true
+    });
+  }
+  return streamHandler;
+}
+
+/**
+ * Render markdown text to HTML (delegates to shared module).
+ */
+function renderMarkdown(text) {
+  return window.UplinkMessageRenderer?.renderMarkdown(text) || text || '';
+}
+
+/**
+ * Get agent emoji (delegates to shared module).
+ */
+function getAgentEmoji(agentId) {
+  return window.UplinkMessageRenderer?.getAgentEmoji(agentId) || '🤖';
+}
+
+/**
+ * Parse a session key into satelliteId and agentId.
+ * Format: agent:<agentId>:main or agent:<agentId>:uplink:satellite:<satelliteId>
+ * @param {string} sessionKey
+ * @returns {{ satelliteId: string, agentId: string }}
+ */
+function parseSessionKey(sessionKey) {
+  let satelliteId = 'main';
+  let agentId = 'main';
+  const parts = (sessionKey || '').split(':');
+  if (parts[0] === 'agent' && parts.length >= 3) {
+    agentId = parts[1];
+    if (parts.length >= 5 && parts[2] === 'uplink' && parts[3] === 'satellite') {
+      satelliteId = parts[4];
+    } else {
+      satelliteId = parts[2]; // 'main' or other
+    }
+  }
+  return { satelliteId, agentId };
+}
+
+/**
+ * Escape HTML for safe insertion (delegates to shared module).
+ */
+function escapeHtml(text) {
+  if (window.UplinkMessageRenderer?.escapeHtml) {
+    return window.UplinkMessageRenderer.escapeHtml(text);
+  }
+  const div = document.createElement('div');
+  div.textContent = text || '';
+  return div.innerHTML;
+}
+
+/**
+ * Escape a string for use in HTML attributes (delegates to shared module).
+ */
+function escapeAttr(text) {
+  if (window.UplinkMessageRenderer?.escapeAttr) {
+    return window.UplinkMessageRenderer.escapeAttr(text);
+  }
+  return (text || '')
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+// ============================================
+// INITIALIZATION
+// ============================================
+
+/**
+ * Initialize the split chat module.
+ * Called once on page load. Sets up DOM references and event listeners.
+ */
+function init() {
+  paneEl = document.getElementById('splitSecondary');
+  iconEl = document.getElementById('splitSecondaryIcon');
+  nameEl = document.getElementById('splitSecondaryName');
+  messagesEl = document.getElementById('splitSecondaryMessages');
+  inputEl = document.getElementById('splitSecondaryInput');
+  sendBtnEl = document.getElementById('splitSecondarySend');
+  switchBtnEl = document.getElementById('splitSecondarySwitch');
+  closeBtnEl = document.getElementById('splitSecondaryClose');
+  contextBadgeEl = document.getElementById('splitContextBadge');
+  contextBarFillEl = document.getElementById('splitContextBarFill');
+  contextTextEl = document.getElementById('splitContextText');
+
+  if (!paneEl || !messagesEl || !inputEl || !switchBtnEl || !sendBtnEl) {
+    if (initRetryCount >= MAX_INIT_RETRIES) {
+      logger.warn('SplitChat: Required elements not found after max retries');
+      return;
+    }
+    initRetryCount++;
+    const delay = Math.min(100 * Math.pow(2, initRetryCount), 5000);
+    setTimeout(init, delay);
+    return;
+  }
+
+  setupEventListeners();
+  subscribeToWebSocket();
+  logger.debug('SplitChat: Initialized');
+}
+
+/**
+ * Set up DOM event listeners for input, buttons, and scrolling.
+ */
+function setupEventListeners() {
+  // Enter to send (Shift+Enter for newline)
+  if (inputEl) {
+    inputEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    });
+
+    // Auto-resize textarea as user types
+    inputEl.addEventListener('input', () => {
+      const prevHeight = inputEl.offsetHeight;
+      inputEl.style.height = 'auto';
+      inputEl.style.height = Math.min(inputEl.scrollHeight, 150) + 'px';
+      const delta = inputEl.offsetHeight - prevHeight;
+      if (delta > 0 && messagesEl && isNearBottom) {
+        messagesEl.scrollTop += delta;
+      }
+    });
+  }
+
+  // Send button
+  if (sendBtnEl) {
+    sendBtnEl.addEventListener('click', handleSend);
+  }
+
+  // Switch session button
+  if (switchBtnEl) {
+    switchBtnEl.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      showPicker();
+    });
+  }
+
+  // Close button
+  if (closeBtnEl) {
+    closeBtnEl.addEventListener('click', closeSession);
+  }
+
+  // Scroll tracking
+  if (messagesEl) {
+    messagesEl.addEventListener('scroll', () => {
+      const distFromBottom = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight;
+      isNearBottom = distFromBottom <= SCROLL_THRESHOLD_PX;
+    }, { passive: true });
+  }
+}
+
+/**
+ * Subscribe to the shared WebSocket connection for streaming events.
+ * Filters events to only handle the secondary session's sessionKey.
+ */
+function subscribeToWebSocket() {
+  if (!window.UplinkConnection) {
+    // Retry if connection module not ready yet
+    setTimeout(subscribeToWebSocket, 500);
+    return;
+  }
+
+  wsUnsubscribe = window.UplinkConnection.onConnection((event, data) => {
+    if (event !== 'message') return;
+    if (!activeSession) return;
+
+    let parsed;
+    try {
+      parsed = typeof data === 'string' ? JSON.parse(data) : data;
+    } catch {
+      return;
+    }
+
+    // Unwrap OpenClaw event envelope
+    if (parsed.type === 'event' && parsed.event && parsed.payload) {
+      handleWsEvent(parsed.event, parsed.payload);
+      return;
+    }
+
+    // Handle sync events routed directly (connection.js sends raw data, so
+    // this path fires when another module re-emits with unwrapped type)
+    if (parsed.type && parsed.type.startsWith('sync_')) {
+      handleSyncEvent(parsed.type, parsed);
+    }
+  });
+}
+
+// ============================================
+// WEBSOCKET EVENT HANDLERS
+// ============================================
+
+/**
+ * Handle unwrapped OpenClaw event envelope messages.
+ */
+function handleWsEvent(eventName, payload) {
+  if (!activeSession) return;
+
+  // Check if this event is for our session
+  const eventSatelliteId = payload.satelliteId;
+  if (eventSatelliteId && !isOurSession(eventSatelliteId)) return;
+
+  switch (eventName) {
+    case 'sync.thinking':
+      handleStreamThinking(payload);
+      break;
+    case 'sync.delta':
+      handleStreamDelta(payload);
+      break;
+    case 'sync.tool':
+      handleStreamTool(payload);
+      break;
+    case 'sync.complete':
+      handleStreamComplete(payload);
+      break;
+    case 'sync':
+      handleSyncMessage(payload);
+      break;
+  }
+}
+
+/**
+ * Handle sync events with type prefix (e.g., sync_delta).
+ */
+function handleSyncEvent(type, data) {
+  if (!activeSession) return;
+
+  const eventSatelliteId = data.satelliteId;
+  if (eventSatelliteId && !isOurSession(eventSatelliteId)) return;
+
+  switch (type) {
+    case 'sync_thinking':
+      handleStreamThinking(data);
+      break;
+    case 'sync_delta':
+      handleStreamDelta(data);
+      break;
+    case 'sync_tool':
+      handleStreamTool(data);
+      break;
+    case 'sync_complete':
+      handleStreamComplete(data);
+      break;
+    case 'sync_message':
+      handleSyncMessage(data);
+      break;
+  }
+}
+
+/**
+ * Check if a satelliteId belongs to our active session.
+ */
+function isOurSession(satelliteId) {
+  if (!activeSession) return false;
+
+  // Match by sessionKey components
+  // Session keys look like: agent:main:main or agent:main:uplink:satellite:sat-xxxxx
+  const sk = activeSession.sessionKey;
+  if (!sk) return false;
+
+  // Extract satellite ID from session key
+  // Format: agent:<agentId>:uplink:satellite:<satelliteId>
+  // Or: agent:<agentId>:main (for primary)
+  if (sk.includes(':uplink:satellite:')) {
+    const parts = sk.split(':uplink:satellite:');
+    return parts[1] === satelliteId;
+  }
+  // Primary session
+  if (sk.endsWith(':main')) {
+    return satelliteId === 'main';
+  }
+
+  return false;
+}
+
+/**
+ * Handle thinking status - show streaming bubble with thinking indicator.
+ */
+function handleStreamThinking(data) {
+  logger.debug('SplitChat: Thinking event received');
+  hideTyping();
+  const handler = getStreamHandler();
+  if (!handler) return;
+  if (!handler.getStreamingDiv()) {
+    handler.createStreamingMessage();
+  }
+
+  // Ensure .streaming class is on the div
+  const streamingDiv = handler.getStreamingDiv();
+  if (streamingDiv && !streamingDiv.classList.contains('streaming')) {
+    streamingDiv.classList.add('streaming');
+  }
+
+  handler.updateStreamingContent('🧠 Thinking...');
+}
+
+/**
+ * Handle streaming delta - accumulate content and render progressively.
+ */
+function handleStreamDelta(data) {
+  const { content } = data;
+  if (!content) return;
+
+  logger.debug('SplitChat: Delta event received');
+  hideTyping();
+  const handler = getStreamHandler();
+  if (!handler) return;
+  if (!handler.getStreamingDiv()) {
+    handler.createStreamingMessage();
+  }
+
+  // Ensure .streaming class is on the div
+  const streamingDiv = handler.getStreamingDiv();
+  if (streamingDiv && !streamingDiv.classList.contains('streaming')) {
+    streamingDiv.classList.add('streaming');
+  }
+
+  handler.setStreamContent(handler.getStreamContent() + content);
+  handler.updateStreamingContent(handler.getStreamContent());
+}
+
+/**
+ * Handle tool usage during streaming.
+ */
+function handleStreamTool(data) {
+  const { tool } = data;
+  if (!tool) return;
+
+  hideTyping();
+  const handler = getStreamHandler();
+  if (!handler) return;
+  if (!handler.getStreamingDiv()) {
+    handler.createStreamingMessage();
+  }
+  handler.updateStreamingContent(`🔧 Using ${tool}...`);
+}
+
+/**
+ * Handle stream completion - finalize message.
+ */
+function handleStreamComplete(_data) {
+  const handler = getStreamHandler();
+  if (handler) handler.finalizeStreamingMessage();
+}
+
+/**
+ * Handle a final sync message (complete message, not streaming).
+ */
+function handleSyncMessage(data) {
+  const { messageId, role, content } = data;
+  if (!content) return;
+
+  // Dedup by messageId via shared streaming handler
+  const handler = getStreamHandler();
+  if (handler && messageId && handler.isDuplicate(messageId)) {
+    logger.debug('SplitChat: Duplicate messageId, skipping:', messageId);
+    return;
+  }
+
+  // Skip sync messages that arrived shortly after history load to prevent duplication
+  if (historyLoadedAt && Date.now() - historyLoadedAt < 5000) {
+    return;
+  }
+
+  // Skip user messages that we just sent (prevent duplication from sync echo)
+  if (role === 'user' && content === lastSentMessageText && Date.now() - lastSentMessageTime < 5000) {
+    logger.debug('SplitChat: Skipping sync echo of own message');
+    return;
+  }
+
+  logger.debug('SplitChat: Processing sync message', role);
+
+  // If streaming is active, the streaming handlers own the assistant message lifecycle.
+  // Sync messages during active streaming are the "final" version - use them to finalize
+  // instead of creating a duplicate div.
+  if (role === 'assistant' && handler) {
+    const streamingDiv = handler.getStreamingDiv();
+    const isStreaming = handler.getIsStreaming?.() || !!streamingDiv;
+
+    if (isStreaming && streamingDiv) {
+      // Stream is active - finalize with the sync content (full message)
+      handler.setStreamContent(content);
+      handler.finalizeStreamingMessage();
+      return;
+    }
+
+    // If stream just completed (within 2s), this sync message is a duplicate of what
+    // was already finalized by handleStreamComplete. Skip it.
+    if (handler._lastFinalizedAt && Date.now() - handler._lastFinalizedAt < 2000) {
+      logger.debug('SplitChat: Skipping sync message — stream just finalized');
+      return;
+    }
+  }
+
+  // Append as a complete message (cross-device sync, another user sent to this satellite)
+  if (role === 'assistant' || role === 'user') {
+    appendMessage(content, role);
+  }
+}
+
+// ============================================
+// SESSION MANAGEMENT
+// ============================================
+
+/**
+ * Connect to a specific gateway session.
+ * Loads history and subscribes to streaming events for that session.
+ * @param {string} sessionKey - The gateway session key
+ * @param {string} label - Human-readable session label
+ * @param {string} agentName - The agent name for display
+ * @param {string} agentId - The agent ID for avatar lookup
+ */
+async function openSession(sessionKey, label, agentName, agentId = 'main') {
+  // Close any existing session first
+  if (activeSession) {
+    resetState();
+  }
+
+  activeSession = { sessionKey, label, agentName, agentId };
+
+  // Reset streaming handler so it picks up the new agentId
+  streamHandler = null;
+
+  // Update UI - name
+  if (nameEl) {
+    nameEl.textContent = agentName || label || 'Secondary';
+  }
+
+  // Update UI - avatar
+  if (iconEl) {
+    const avatarPath = `/img/agents/${agentId}.png`;
+    iconEl.src = avatarPath;
+    iconEl.alt = `${agentName || 'Agent'} avatar`;
+    // Fallback to default if agent avatar doesn't exist
+    iconEl.onerror = () => {
+      iconEl.onerror = null; // Prevent infinite loop
+      iconEl.src = '/img/agents/default.png';
+    };
+  }
+
+  // Clear messages container
+  if (messagesEl) {
+    messagesEl.innerHTML = '';
+  }
+
+  // Enable input
+  setInputEnabled(true);
+
+  // Hide picker if visible
+  hidePicker();
+
+  // Load history
+  await loadHistory(sessionKey);
+
+  // Fetch context data for this session
+  fetchContextData();
+
+  logger.debug('SplitChat: Opened session', sessionKey);
+}
+
+/**
+ * Disconnect and reset the secondary chat.
+ */
+function closeSession() {
+  const handler = getStreamHandler();
+  if (handler?.getStreamingDiv()) {
+    handler.finalizeStreamingMessage();
+  }
+
+  resetState();
+
+  // Reset context
+  contextUsed = 0;
+  displayedTokens = 0;
+  updateContextDisplay();
+
+  // Update UI to show picker / empty state
+  if (nameEl) {
+    nameEl.textContent = '';
+  }
+  if (messagesEl) {
+    messagesEl.innerHTML = '';
+  }
+
+  setInputEnabled(false);
+
+  logger.debug('SplitChat: Session closed');
+}
+
+/**
+ * Reset internal state without touching DOM beyond what's needed.
+ */
+function resetState() {
+  activeSession = null;
+  historyLoadedAt = 0;
+  hideTyping();
+
+  const handler = getStreamHandler();
+  if (handler) handler.reset();
+
+  if (currentAbortController) {
+    currentAbortController.abort();
+    currentAbortController = null;
+  }
+}
+
+/**
+ * Get the active session info.
+ * @returns {{ sessionKey: string, label: string, agentName: string } | null}
+ */
+function getActiveSession() {
+  return activeSession ? { ...activeSession } : null;
+}
+
+/**
+ * Check if the secondary chat has an active session.
+ * @returns {boolean}
+ */
+function isActive() {
+  return activeSession !== null;
+}
+
+// ============================================
+// HISTORY
+// ============================================
+
+/**
+ * Load chat history from the gateway for the given session key.
+ * @param {string} sessionKey - The session key to fetch history for
+ */
+async function loadHistory(sessionKey) {
+  try {
+    const { satelliteId, agentId } = parseSessionKey(sessionKey);
+
+    const url = `/api/gateway/history?satelliteId=${encodeURIComponent(satelliteId)}&agentId=${encodeURIComponent(agentId)}&limit=50`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      logger.warn('SplitChat: History fetch failed:', response.status);
+      return;
+    }
+
+    const data = await response.json();
+    if (!data.ok || !data.messages || data.messages.length === 0) {
+      logger.debug('SplitChat: No history messages');
+      return;
+    }
+
+    // Render messages
+    data.messages.forEach(msg => {
+      const role = msg.type === 'user' ? 'user' : 'assistant';
+      const timestamp = msg.createdAt ? new Date(msg.createdAt).getTime() : Date.now();
+      appendMessage(msg.text || msg.content || '', role, timestamp);
+    });
+
+    // Mark history as loaded to prevent sync event duplication
+    historyLoadedAt = Date.now();
+
+    // Scroll to bottom after loading history
+    if (messagesEl) {
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+
+    logger.debug('SplitChat: Loaded', data.messages.length, 'history messages');
+  } catch (err) {
+    logger.error('SplitChat: Failed to load history', err);
+  }
+}
+
+// ============================================
+// MESSAGE RENDERING
+// ============================================
+
+/**
+ * Append a complete message to the secondary messages container.
+ * Delegates to shared UplinkMessageRenderer.
+ * @param {string} content - Message text (markdown)
+ * @param {string} role - 'user' or 'assistant'
+ * @param {number} timestamp - Optional timestamp for the message
+ */
+function appendMessage(content, role, timestamp = null) {
+  if (!messagesEl || !content) return;
+
+  const renderer = window.UplinkMessageRenderer;
+  if (renderer?.addMessageToContainer) {
+    return renderer.addMessageToContainer({
+      container: messagesEl,
+      text: content,
+      type: role,
+      showAvatar: role === 'assistant',
+      agentId: activeSession?.agentId || null,
+      timestamp: timestamp || Date.now(),
+      scroll: { isNearBottom }
+    });
+  }
+
+  // Fallback if renderer not loaded yet
+  const div = document.createElement('div');
+  div.className = `message ${role}`;
+  div.dataset.time = timestamp || Date.now();
+
+  const textSpan = document.createElement('span');
+  textSpan.className = 'message-text';
+  textSpan.innerHTML = renderMarkdown(content);
+  div.appendChild(textSpan);
+
+  messagesEl.appendChild(div);
+  if (isNearBottom) {
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+  }
+}
+
+// ============================================
+// STREAMING MESSAGE MANAGEMENT
+// Delegated to shared UplinkStreamingHandler instance.
+// See getStreamHandler() in SHARED MODULE HELPERS section.
+// ============================================
+
+// ============================================
+// SENDING MESSAGES
+// ============================================
+
+/**
+ * Handle send button click or Enter key.
+ */
+async function handleSend() {
+  if (!activeSession) return;
+  const handler = getStreamHandler();
+  if (handler?.getIsStreaming()) return;
+
+  const text = inputEl?.value?.trim();
+  if (!text) return;
+
+  // Clear input
+  inputEl.value = '';
+  inputEl.style.height = 'auto';
+
+  // Show user message
+  appendMessage(text, 'user');
+
+  // Track this message to prevent duplication from sync events
+  lastSentMessageText = text;
+  lastSentMessageTime = Date.now();
+
+  // Show typing indicator
+  showTyping();
+  setInputEnabled(false);
+
+  // Create abort controller
+  currentAbortController = new AbortController();
+
+  try {
+    const { satelliteId, agentId } = parseSessionKey(activeSession.sessionKey);
+
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        message: text,
+        stream: true,
+        satelliteId,
+        satelliteName: activeSession.label || satelliteId,
+        agentId
+      }),
+      signal: currentAbortController.signal
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    // Process SSE stream
+    // The WebSocket sync events will handle rendering via our WS listener.
+    // We still read the SSE stream to handle cases where WS sync isn't available
+    // and to detect completion.
+    await processSSEResponse(response);
+
+  } catch (err) {
+    if (err.name === 'AbortError') {
+      appendSystemMessage('Generation stopped');
+    } else {
+      logger.error('SplitChat: Send failed', err);
+      appendSystemMessage('Failed to send message');
+    }
+  } finally {
+    hideTyping();
+    currentAbortController = null;
+
+    // If streaming didn't start, ensure input is re-enabled
+    if (!handler?.getIsStreaming()) {
+      setInputEnabled(true);
+    }
+
+    // Refresh context after message completes
+    refreshContext();
+  }
+}
+
+/**
+ * Process SSE response from /api/chat.
+ * WebSocket sync events handle the real-time streaming display.
+ * The SSE stream is read as a fallback and for completion detection.
+ * Delegates to shared UplinkStreamingHandler for chunk processing.
+ * @param {Response} response - Fetch response
+ */
+async function processSSEResponse(response) {
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = '';
+  let fullResponse = '';
+
+  // Split-chat's WebSocket subscription (subscribeToWebSocket) handles all
+  // streaming display via handleStreamThinking/handleStreamDelta/handleStreamComplete.
+  // The SSE stream is consumed ONLY to drain the response and track errors.
+  // We never create streaming divs here — that would race with the WS handlers.
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split('\n');
+    buffer = lines.pop() || '';
+
+    for (const line of lines) {
+      if (!line.startsWith('data: ')) continue;
+
+      const data = line.slice(6);
+      if (data === '[DONE]' || data.startsWith(':')) continue;
+
+      try {
+        const parsed = JSON.parse(data);
+
+        // Track content for completion detection
+        if (parsed.content) {
+          fullResponse += parsed.content;
+        }
+
+        // Surface errors
+        if (parsed.error) {
+          appendSystemMessage(parsed.error || parsed.message || 'An error occurred');
+          setInputEnabled(true);
+        }
+
+        await new Promise(r => setTimeout(r, 0));
+      } catch (e) {
+        // Skip unparseable chunks
+      }
+    }
+  }
+
+  return { fullResponse };
+}
+
+// ============================================
+// SESSION PICKER
+// ============================================
+
+/**
+ * Display a session/agent picker overlay inside the secondary pane.
+ * Pulls sessions from satellites or falls back to fetching from gateway.
+ */
+async function showPicker() {
+  logger.debug('SplitChat: showPicker() called');
+
+  // Check actual DOM presence instead of just the flag
+  // (pickerEl might have been removed without calling hidePicker)
+  if (pickerEl && pickerEl.parentNode) {
+    logger.debug('SplitChat: Picker already visible, hiding');
+    hidePicker();
+    return;
+  }
+  
+  // Reset flag if out of sync
+  if (pickerVisible && !pickerEl) {
+    pickerVisible = false;
+  }
+
+  // Reset flag if out of sync
+  if (pickerVisible && !pickerEl) {
+    console.warn('[SplitChat] pickerVisible out of sync, resetting');
+    pickerVisible = false;
+  }
+
+  const container = paneEl || document.getElementById('splitSecondary');
+  if (!container) {
+    logger.warn('SplitChat: No container found for picker');
+    return;
+  }
+
+  // Build picker data
+  let sessions = [];
+  
+  // Try to get from satellites module
+  const sats = window.UplinkSatellites?.getSatellites?.();
+  if (sats && Object.keys(sats).length > 0) {
+    for (const [id, sat] of Object.entries(sats)) {
+      const agentId = sat.agentId || 'main';
+      const sessionKey = id === 'main'
+        ? `agent:${agentId}:main`
+        : `agent:${agentId}:uplink:satellite:${id}`;
+
+      sessions.push({
+        sessionKey,
+        label: sat.name || id,
+        agentName: sat.name || id,
+        agentId,
+        emoji: getAgentEmoji(agentId),
+        satelliteId: id
+      });
+    }
+  }
+
+  // Fallback: fetch from API
+  if (sessions.length === 0) {
+    try {
+      const res = await fetch('/api/gateway/sessions');
+      if (res.ok) {
+        const data = await res.json();
+        if (data.sessions) {
+          sessions = data.sessions.map(s => ({
+            sessionKey: s.sessionKey || s.key,
+            label: s.label || s.name || s.sessionKey,
+            agentName: s.agentName || s.label || 'Agent',
+            emoji: '🤖',
+            satelliteId: s.satelliteId || 'main'
+          }));
+        }
+      }
+    } catch (err) {
+      logger.warn('SplitChat: Failed to fetch sessions', err);
+    }
+  }
+
+  // Filter out the primary chat's current session to avoid conflicts
+  const primarySatId = window.UplinkSatellites?.getCurrentSatellite?.() || 'main';
+  
+  // Build picker UI
+  pickerEl = document.createElement('div');
+  pickerEl.className = 'split-chat-picker';
+  pickerEl.innerHTML = `
+    <div class="split-chat-picker-header">
+      <span class="split-chat-picker-title">Select Session</span>
+      <button class="split-chat-picker-close" aria-label="Close picker">&times;</button>
+    </div>
+    <div class="split-chat-picker-list">
+      ${sessions.length === 0 ? '<div class="split-chat-picker-empty">No sessions available</div>' : ''}
+      ${sessions.map(s => {
+        const isCurrent = s.satelliteId === primarySatId;
+        const isActive = activeSession?.sessionKey === s.sessionKey;
+        const avatarSrc = `/img/agents/${s.agentId || 'main'}.png`;
+        return `
+          <button class="split-chat-picker-item${isCurrent ? ' primary' : ''}${isActive ? ' active' : ''}"
+                  data-session-key="${escapeAttr(s.sessionKey)}"
+                  data-label="${escapeAttr(s.label)}"
+                  data-agent-name="${escapeAttr(s.agentName)}"
+                  data-agent-id="${escapeAttr(s.agentId || 'main')}">
+            <img class="split-chat-picker-avatar" src="${avatarSrc}" alt="${escapeAttr(s.agentName || s.label)}" onerror="this.src='/img/agents/default.png'">
+            <span class="split-chat-picker-name">${escapeHtml(s.agentName || s.label)}</span>
+            ${isCurrent ? '<span class="split-chat-picker-badge">Primary</span>' : ''}
+            ${isActive ? '<span class="split-chat-picker-badge active">Active</span>' : ''}
+          </button>
+        `;
+      }).join('')}
+    </div>
+  `;
+
+  // Ensure container has relative positioning for overlay
+  container.style.position = 'relative';
+  container.appendChild(pickerEl);
+  pickerVisible = true;
+
+  // Event listeners
+  pickerEl.querySelector('.split-chat-picker-close').addEventListener('click', hidePicker);
+
+  pickerEl.querySelectorAll('.split-chat-picker-item').forEach(item => {
+    item.addEventListener('click', () => {
+      const sessionKey = item.dataset.sessionKey;
+      const label = item.dataset.label;
+      const agentName = item.dataset.agentName;
+      const agentId = item.dataset.agentId;
+      openSession(sessionKey, label, agentName, agentId);
+    });
+  });
+}
+
+/**
+ * Hide the session picker overlay.
+ */
+function hidePicker() {
+  if (pickerEl && pickerEl.parentNode) {
+    pickerEl.remove();
+  }
+  pickerEl = null;
+  pickerVisible = false;
+}
+
+// ============================================
+// TYPING INDICATOR
+// ============================================
+
+/**
+ * Show the typing indicator in the messages container.
+ */
+function showTyping() {
+  if (typingEl) return;
+
+  typingEl = document.createElement('div');
+  typingEl.className = 'typing';
+  typingEl.setAttribute('role', 'status');
+  typingEl.setAttribute('aria-label', 'Assistant is typing');
+  typingEl.innerHTML = '<span></span><span></span><span></span>';
+
+  if (messagesEl) {
+    messagesEl.appendChild(typingEl);
+    if (isNearBottom) {
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+  }
+}
+
+/**
+ * Hide the typing indicator.
+ */
+function hideTyping() {
+  if (typingEl) {
+    if (typingEl.parentNode) typingEl.remove();
+    typingEl = null;
+  }
+  // Also remove any orphaned typing elements in our container
+  if (messagesEl) {
+    messagesEl.querySelectorAll('.typing').forEach(el => el.remove());
+  }
+}
+
+// ============================================
+// SYSTEM MESSAGES
+// ============================================
+
+/**
+ * Append a system message (error, info) that auto-dismisses.
+ * @param {string} text - Message text
+ */
+function appendSystemMessage(text) {
+  if (!messagesEl) return;
+
+  const div = document.createElement('div');
+  div.className = 'message system';
+  div.setAttribute('role', 'alert');
+  div.setAttribute('aria-live', 'polite');
+
+  const textSpan = document.createElement('span');
+  textSpan.className = 'message-text';
+  textSpan.textContent = text;
+  div.appendChild(textSpan);
+
+  messagesEl.appendChild(div);
+
+  if (isNearBottom) {
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+  }
+
+  // Auto-dismiss after 10 seconds
+  setTimeout(() => {
+    if (div.parentNode) {
+      div.style.transition = 'opacity 0.3s';
+      div.style.opacity = '0';
+      setTimeout(() => div.remove(), 300);
+    }
+  }, 10000);
+}
+
+// ============================================
+// CONTEXT TRACKING
+// ============================================
+
+const DEFAULT_CONTEXT_WINDOW = 200000;
+let contextUsed = 0;
+let contextMax = DEFAULT_CONTEXT_WINDOW;
+let displayedTokens = 0;
+let contextAnimationFrame = null;
+
+/**
+ * Format token count to human-readable string
+ */
+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
+ */
+function getUsageColor(pct) {
+  if (pct >= 90) return 'var(--error)';
+  if (pct >= 75) return 'var(--warning)';
+  return 'var(--success)';
+}
+
+/**
+ * Animate token count smoothly
+ */
+function animateContextTokenCount(target, max) {
+  if (contextAnimationFrame) cancelAnimationFrame(contextAnimationFrame);
+
+  const start = displayedTokens;
+  const diff = target - start;
+  if (diff === 0) return;
+
+  const duration = 600;
+  const startTime = performance.now();
+
+  function tick(now) {
+    const elapsed = now - startTime;
+    const progress = Math.min(elapsed / duration, 1);
+    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));
+
+    if (contextTextEl) {
+      contextTextEl.textContent = isMobile ? `${pct}%` : `${formatTokens(displayedTokens)}/${formatTokens(max)}`;
+    }
+
+    if (progress < 1) {
+      contextAnimationFrame = requestAnimationFrame(tick);
+    } else {
+      displayedTokens = target;
+      contextAnimationFrame = null;
+    }
+  }
+
+  contextAnimationFrame = requestAnimationFrame(tick);
+}
+
+/**
+ * Update context badge display
+ */
+function updateContextDisplay() {
+  if (!contextBadgeEl) return;
+
+  if (contextUsed <= 0) {
+    contextBadgeEl.style.display = 'none';
+    return;
+  }
+
+  contextBadgeEl.style.display = 'flex';
+
+  const pct = Math.min(100, Math.round((contextUsed / contextMax) * 100));
+  const color = getUsageColor(pct);
+
+  if (contextBarFillEl) {
+    contextBarFillEl.style.width = pct + '%';
+    contextBarFillEl.style.background = color;
+  }
+
+  animateContextTokenCount(contextUsed, contextMax);
+
+  contextBadgeEl.title = `Context: ${contextUsed.toLocaleString()} / ${contextMax.toLocaleString()} tokens (${pct}%)`;
+  contextBadgeEl.setAttribute('aria-label', `Context window usage: ${pct}% - ${formatTokens(contextUsed)} of ${formatTokens(contextMax)} tokens used`);
+}
+
+/**
+ * Fetch context data for the active split session
+ */
+async function fetchContextData() {
+  if (!activeSession) {
+    contextUsed = 0;
+    updateContextDisplay();
+    return;
+  }
+
+  try {
+    const { satelliteId, agentId } = parseSessionKey(activeSession.sessionKey);
+    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) {
+      logger.warn('SplitChat: Context fetch error', data.error);
+      return;
+    }
+
+    contextUsed = data.totalTokens || 0;
+    contextMax = data.contextTokens || DEFAULT_CONTEXT_WINDOW;
+    updateContextDisplay();
+  } catch (e) {
+    logger.warn('SplitChat: Context fetch failed', e.message);
+  }
+}
+
+/**
+ * Refresh context after message completes
+ */
+function refreshContext() {
+  setTimeout(fetchContextData, 2000);
+  setTimeout(fetchContextData, 8000);
+}
+
+// ============================================
+// UI HELPERS
+// ============================================
+
+/**
+ * Enable or disable the input area.
+ * @param {boolean} enabled
+ */
+function setInputEnabled(enabled) {
+  if (inputEl) {
+    inputEl.disabled = !enabled;
+  }
+  if (sendBtnEl) {
+    sendBtnEl.disabled = !enabled;
+  }
+}
+
+// getAgentEmoji, escapeHtml, escapeAttr are defined in SHARED MODULE HELPERS
+// section above, delegating to UplinkMessageRenderer.
+
+// ============================================
+// PUBLIC API
+// ============================================
+
+export const UplinkSplitChat = {
+  init,
+  openSession,
+  closeSession,
+  getActiveSession,
+  isActive,
+  showPicker,
+  hidePicker
+};
+
+// Backward compat: assign to window
+window.UplinkSplitChat = UplinkSplitChat;
+
+// Register with UplinkCore if available
+UplinkCore.registerModule('splitChat', init);
+
+logger.debug('SplitChat: Module loaded');