@mooncompany/uplink-chat 0.5.0

package/public/js/commands.js

@@ -0,0 +1,581 @@
+// ============================================
+// SLASH COMMANDS MODULE
+// Handles /command parsing, execution, and autocomplete
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+// Command registry
+const commands = {
+  help: {
+    description: 'Show available commands',
+    usage: '/help',
+    execute: showHelp
+  },
+  clear: {
+    description: 'Clear conversation history',
+    usage: '/clear',
+    execute: clearConversation
+  },
+  export: {
+    description: 'Export conversation',
+    usage: '/export [format]',
+    args: ['markdown', 'json'],
+    execute: exportConversation
+  },
+  status: {
+    description: 'Show connection and session status',
+    usage: '/status',
+    execute: showStatus
+  },
+  voice: {
+    description: 'Toggle voice mode',
+    usage: '/voice',
+    execute: toggleVoice
+  },
+  model: {
+    description: 'Show current model info',
+    usage: '/model',
+    execute: showModel
+  },
+  theme: {
+    description: 'Change color theme',
+    usage: '/theme [name]',
+    args: ['dark', 'light', 'midnight', 'sunset', 'forest', 'high-contrast'],
+    execute: changeTheme
+  },
+  stats: {
+    description: 'Show usage dashboard',
+    usage: '/stats',
+    execute: showDashboard
+  },
+  remind: {
+    description: 'Set a reminder',
+    usage: '/remind <time> <message>',
+    args: ['5m', '15m', '30m', '1h', '2h', 'tomorrow'],
+    execute: setReminder
+  },
+  satellites: {
+    description: 'Open satellites panel',
+    usage: '/satellites',
+    execute: () => window.UplinkSatellites?.toggleNavigator()
+  },
+  share: {
+    description: 'Create shareable link for this conversation',
+    usage: '/share [title]',
+    execute: createShareLink
+  },
+  memdump: {
+    description: 'Dump current session state to memory file',
+    usage: '/memdump',
+    execute: () => sendAgentCommand('/m')
+  },
+  m: {
+    description: 'Shortcut for /memdump',
+    usage: '/m',
+    execute: () => sendAgentCommand('/m')
+  },
+  compact: {
+    description: 'Compact session context',
+    usage: '/compact',
+    execute: () => sendAgentCommand('/compact')
+  }
+};
+
+// Commands that should be passed through to the gateway as-is
+// (OpenClaw native slash commands — gateway intercepts these before the agent)
+const gatewayPassthroughPrefixes = [
+  'help', 'commands', 'skill', 'status', 'allowlist', 'approve',
+  'context', 'tts', 'whoami', 'subagents', 'config', 'debug',
+  'usage', 'stop', 'restart', 'activation', 'send', 'reset',
+  'new', 'compact', 'think', 'verbose', 'reasoning', 'elevated',
+  'exec', 'model', 'models', 'queue', 'bash', 'prose'
+];
+
+// Autocomplete state
+let autocompleteVisible = false;
+let autocompleteIndex = 0;
+let filteredCommands = [];
+
+// Create autocomplete dropdown with ARIA attributes
+const autocompleteEl = document.createElement('div');
+autocompleteEl.className = 'command-autocomplete';
+autocompleteEl.style.display = 'none';
+autocompleteEl.id = 'command-autocomplete-listbox';
+autocompleteEl.role = 'listbox';
+
+// Initialize when DOM is ready
+function init() {
+  const textInput = document.getElementById('textInput');
+  const inputArea = document.querySelector('.input-area');
+  
+  if (!textInput || !inputArea) {
+    logger.warn('Commands: Required elements not found, retrying...');
+    setTimeout(init, 100);
+    return;
+  }
+
+  // Insert autocomplete before input row
+  const textInputRow = document.getElementById('textInputRow');
+  textInputRow.parentNode.insertBefore(autocompleteEl, textInputRow);
+
+  // Add ARIA attributes to input for accessibility
+  textInput.role = 'combobox';
+  textInput.setAttribute('aria-autocomplete', 'list');
+  textInput.setAttribute('aria-controls', 'command-autocomplete-listbox');
+  textInput.setAttribute('aria-expanded', 'false');
+  textInput.setAttribute('aria-activedescendant', '');
+
+  // Listen for input changes
+  textInput.addEventListener('input', handleInput);
+  textInput.addEventListener('keydown', handleKeydown);
+  textInput.addEventListener('blur', () => {
+    // Delay hide to allow click on autocomplete
+    setTimeout(hideAutocomplete, 150);
+  });
+
+  // Share button handler
+  const shareBtn = document.getElementById('shareBtn');
+  shareBtn?.addEventListener('click', () => createShareLink(''));
+
+  logger.debug('Commands: Initialized');
+}
+
+function handleInput(e) {
+  const value = e.target.value;
+  
+  if (value.startsWith('/')) {
+    const query = value.slice(1).toLowerCase();
+    filteredCommands = Object.keys(commands).filter(cmd => 
+      cmd.startsWith(query)
+    );
+    
+    if (filteredCommands.length > 0 && !value.includes(' ')) {
+      showAutocomplete(filteredCommands);
+    } else {
+      hideAutocomplete();
+    }
+  } else {
+    hideAutocomplete();
+  }
+}
+
+function handleKeydown(e) {
+  if (!autocompleteVisible) {
+    // Check if Enter on a command
+    if (e.key === 'Enter' && !e.shiftKey) {
+      const value = e.target.value.trim();
+      if (value.startsWith('/')) {
+        e.preventDefault();
+        e.stopPropagation();
+        executeCommand(value);
+        return;
+      }
+    }
+    return;
+  }
+
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault();
+      autocompleteIndex = Math.min(autocompleteIndex + 1, filteredCommands.length - 1);
+      updateAutocompleteSelection();
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      autocompleteIndex = Math.max(autocompleteIndex - 1, 0);
+      updateAutocompleteSelection();
+      break;
+    case 'Tab':
+      e.preventDefault();
+      selectAutocomplete(filteredCommands[autocompleteIndex], false);
+      break;
+    case 'Enter':
+      e.preventDefault();
+      e.stopPropagation();
+      selectAutocomplete(filteredCommands[autocompleteIndex], true);
+      break;
+    case 'Escape':
+      e.preventDefault();
+      hideAutocomplete();
+      break;
+  }
+}
+
+function showAutocomplete(cmds) {
+  autocompleteEl.innerHTML = cmds.map((cmd, i) => `
+    <div class="command-option ${i === 0 ? 'selected' : ''}" data-command="${cmd}" role="option" id="command-option-${i}" aria-selected="${i === 0 ? 'true' : 'false'}">
+      <span class="command-name">/${cmd}</span>
+      <span class="command-desc">${commands[cmd].description}</span>
+    </div>
+  `).join('');
+
+  // Add click handlers
+  autocompleteEl.querySelectorAll('.command-option').forEach(el => {
+    el.addEventListener('click', () => {
+      selectAutocomplete(el.dataset.command, true);
+    });
+  });
+
+  autocompleteEl.style.display = 'block';
+  autocompleteVisible = true;
+  autocompleteIndex = 0;
+
+  // Update ARIA attributes on input
+  const textInput = document.getElementById('textInput');
+  textInput.setAttribute('aria-expanded', 'true');
+  if (cmds.length > 0) {
+    textInput.setAttribute('aria-activedescendant', 'command-option-0');
+  }
+}
+
+function hideAutocomplete() {
+  autocompleteEl.style.display = 'none';
+  autocompleteVisible = false;
+  autocompleteIndex = 0;
+
+  // Update ARIA attributes on input
+  const textInput = document.getElementById('textInput');
+  if (textInput) {
+    textInput.setAttribute('aria-expanded', 'false');
+    textInput.setAttribute('aria-activedescendant', '');
+  }
+}
+
+function updateAutocompleteSelection() {
+  const textInput = document.getElementById('textInput');
+
+  autocompleteEl.querySelectorAll('.command-option').forEach((el, i) => {
+    const isSelected = i === autocompleteIndex;
+    el.classList.toggle('selected', isSelected);
+    el.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+
+    if (isSelected && textInput) {
+      textInput.setAttribute('aria-activedescendant', `command-option-${i}`);
+    }
+  });
+}
+
+function selectAutocomplete(cmd, execute = false) {
+  const textInput = document.getElementById('textInput');
+  hideAutocomplete();
+  
+  if (execute) {
+    // Execute the command directly
+    textInput.value = '';
+    executeCommand('/' + cmd);
+  } else {
+    // Just fill in the command (Tab was pressed)
+    textInput.value = '/' + cmd + ' ';
+    textInput.focus();
+  }
+}
+
+function executeCommand(input) {
+  const textInput = document.getElementById('textInput');
+  textInput.value = '';
+  
+  const parts = input.slice(1).split(' ');
+  const cmdName = parts[0].toLowerCase();
+  const args = parts.slice(1);
+
+  // Check Uplink-local commands first
+  const cmd = commands[cmdName];
+  if (cmd) {
+    cmd.execute(args);
+    return;
+  }
+
+  // Check if it's a Gateway passthrough command (OpenClaw native)
+  const isGatewayCmd = gatewayPassthroughPrefixes.some(p => cmdName === p || cmdName.startsWith(p + '.'));
+  if (isGatewayCmd) {
+    // Send as a regular message — Gateway intercepts native /commands
+    sendAgentCommand(input);
+    return;
+  }
+
+  // Unknown command — still pass through to Gateway in case it's a native command
+  // Gateway will handle it or the agent will see it as a message
+  sendAgentCommand(input);
+}
+
+// Send a message to the AI agent as a command
+function sendAgentCommand(message) {
+  if (window.UplinkChat?.sendTextMessage) {
+    window.UplinkChat.sendTextMessage(message);
+  } else {
+    addSystemMessage('Chat module not available.');
+  }
+}
+
+// Command implementations
+function showHelp() {
+  const helpText = Object.entries(commands).map(([name, cmd]) => 
+    `**/${name}** — ${cmd.description}`
+  ).join('\n');
+  
+  addSystemMessage('**Available Commands:**\n' + helpText);
+}
+
+function clearConversation() {
+  if (confirm('Clear chat history? Your assistant still remembers the conversation.')) {
+    const messages = document.getElementById('messages');
+    const emptyState = document.getElementById('emptyState');
+    messages.innerHTML = '';
+    emptyState.style.display = 'flex';
+    messages.appendChild(emptyState);
+    
+    // Clear from storage
+    localStorage.removeItem('uplink-history');
+    localStorage.removeItem('uplink-history-encrypted');
+    
+    addSystemMessage('Chat cleared.');
+  }
+}
+
+function exportConversation(args) {
+  const format = args[0] || 'markdown';
+  const messages = document.querySelectorAll('.message:not(.system)');
+  
+  if (messages.length === 0) {
+    addSystemMessage('No messages to export.');
+    return;
+  }
+
+  let content;
+  let filename;
+  let mimeType;
+
+  if (format === 'json') {
+    const data = Array.from(messages).map(msg => ({
+      role: msg.classList.contains('user') ? 'user' : 'assistant',
+      content: msg.textContent,
+      timestamp: new Date().toISOString()
+    }));
+    content = JSON.stringify(data, null, 2);
+    filename = `uplink-export-${Date.now()}.json`;
+    mimeType = 'application/json';
+  } else {
+    // Markdown format
+    const lines = Array.from(messages).map(msg => {
+      const role = msg.classList.contains('user') ? '**You:**' : '**Assistant:**';
+      return `${role}\n${msg.textContent}\n`;
+    });
+    content = `# Uplink Conversation Export\n\n${lines.join('\n---\n\n')}`;
+    filename = `uplink-export-${Date.now()}.md`;
+    mimeType = 'text/markdown';
+  }
+
+  // Download
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+
+  addSystemMessage(`Exported as ${filename}`);
+}
+
+function showStatus() {
+  const statusDot = document.querySelector('.status-dot');
+  const isConnected = statusDot && statusDot.style.background !== 'var(--error)';
+  
+  // Get session info from localStorage
+  const config = JSON.parse(localStorage.getItem('uplink-config') || '{}');
+  const encrypted = config.encryptionEnabled ? 'Yes' : 'No';
+  
+  // Count messages
+  const messageCount = document.querySelectorAll('.message:not(.system)').length;
+  
+  const status = `**Status:**
+• Connection: ${isConnected ? '🟢 Connected' : '🔴 Disconnected'}
+• Gateway: ${config.gatewayUrl || 'Not configured'}
+• Encryption: ${encrypted}
+• Messages: ${messageCount}
+• Session: Active`;
+
+  addSystemMessage(status);
+}
+
+function toggleVoice() {
+  const voiceModeTab = document.getElementById('voiceModeTab');
+  const textModeTab = document.getElementById('textModeTab');
+  const isVoice = voiceModeTab.classList.contains('active');
+  
+  if (isVoice) {
+    textModeTab.click();
+    addSystemMessage('Switched to text mode.');
+  } else {
+    voiceModeTab.click();
+    addSystemMessage('Switched to voice mode.');
+  }
+}
+
+function showModel() {
+  const config = JSON.parse(localStorage.getItem('uplink-config') || '{}');
+  const gatewayUrl = config.gatewayUrl || 'http://localhost:18789';
+  
+  const voiceName = config.voiceName || config.assistantName || 'Default';
+  const assistantName = config.assistantName || 'Assistant';
+  
+  const modelInfo = `**Model Info:**
+• Gateway: ${gatewayUrl}
+• Model: openclaw (routed by gateway)
+• Voice: ${voiceName} (ElevenLabs)
+• Assistant: ${assistantName}
+
+*Model selection is managed by the OpenClaw gateway.*`;
+
+  addSystemMessage(modelInfo);
+}
+
+function changeTheme(args) {
+  const themeName = args[0];
+  
+  if (!themeName) {
+    // Show current theme and available options
+    const currentTheme = window.UplinkThemes?.get() || localStorage.getItem('uplink-theme') || 'dark';
+    const available = window.UplinkThemes?.list() || ['dark', 'light', 'midnight', 'sunset', 'forest', 'high-contrast'];
+    addSystemMessage(`**Current theme:** ${currentTheme}\n**Available:** ${available.join(', ')}`);
+    return;
+  }
+
+  // Validate theme name
+  const available = window.UplinkThemes?.list() || ['dark', 'light', 'midnight', 'sunset', 'forest', 'high-contrast'];
+  if (!available.includes(themeName)) {
+    addSystemMessage(`Unknown theme: ${themeName}\n**Available:** ${available.join(', ')}`);
+    return;
+  }
+
+  // Use the themes module if available
+  if (window.UplinkThemes && typeof window.UplinkThemes.apply === 'function') {
+    window.UplinkThemes.apply(themeName);
+    addSystemMessage(`Theme changed to: ${themeName}`);
+  } else {
+    // Fallback: try to set directly
+    document.documentElement.setAttribute('data-theme', themeName);
+    localStorage.setItem('uplink-theme', themeName);
+    addSystemMessage(`Theme changed to: ${themeName}`);
+  }
+}
+
+function showDashboard() {
+  if (window.UplinkDashboard) {
+    window.UplinkDashboard.show();
+  } else {
+    addSystemMessage('Dashboard module not loaded.');
+  }
+}
+
+function setReminder(args) {
+  if (args.length < 2) {
+    addSystemMessage(`**Usage:** /remind <time> <message>\n\n**Examples:**\n• /remind 30m check the build\n• /remind 2h call mom\n• /remind tomorrow morning brief`);
+    return;
+  }
+
+  const timeArg = args[0];
+  const message = args.slice(1).join(' ');
+
+  // Format as a natural language request for the AI to process
+  const request = `Please set a reminder for ${timeArg} from now: "${message}"`;
+  
+  // Send through chat (AI will use cron tool)
+  if (window.UplinkChat?.sendTextMessage) {
+    window.UplinkChat.sendTextMessage(request);
+  } else {
+    addSystemMessage('Chat module not available.');
+  }
+}
+
+async function createShareLink(args) {
+  const title = args.length > 0 ? args.join(' ') : null;
+  
+  // Get conversation messages
+  const storage = window.UplinkStorage;
+  if (!storage) {
+    addSystemMessage('Storage module not available.');
+    return;
+  }
+  
+  const messages = storage.getHistory?.() || [];
+  
+  if (messages.length === 0) {
+    addSystemMessage('No messages to share.');
+    return;
+  }
+  
+  addSystemMessage('Creating share link...');
+  
+  try {
+    const response = await fetch('/api/share/create', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        title: title || `Conversation on ${new Date().toLocaleDateString()}`,
+        messages: messages.slice(-50) // Share last 50 messages max
+      })
+    });
+    
+    if (!response.ok) {
+      addSystemMessage(`Error: Server returned ${response.status}`);
+      return;
+    }
+    const data = await response.json();
+    
+    if (data.error) {
+      addSystemMessage(`Error: ${data.error}`);
+      return;
+    }
+    
+    const shareUrl = window.location.origin + data.shareUrl;
+    
+    // Copy to clipboard
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      addSystemMessage(`**Share link created!**\n\n${shareUrl}\n\n*(Copied to clipboard - expires in 7 days)*`);
+    } catch (e) {
+      addSystemMessage(`**Share link created!**\n\n${shareUrl}\n\n*(Expires in 7 days)*`);
+    }
+  } catch (e) {
+    addSystemMessage(`Failed to create share link: ${e.message}`);
+  }
+}
+
+// Helper to add system messages
+function addSystemMessage(text) {
+  // Use the global addMessage if available, otherwise create our own
+  if (typeof window.addMessage === 'function') {
+    window.addMessage(text, 'system');
+  } else {
+    const messages = document.getElementById('messages');
+    const emptyState = document.getElementById('emptyState');
+    if (emptyState) emptyState.style.display = 'none';
+    
+    const div = document.createElement('div');
+    div.className = 'message system';
+    div.innerHTML = formatMarkdown(text);
+    messages.appendChild(div);
+    messages.scrollTop = messages.scrollHeight;
+  }
+}
+
+// Simple markdown formatter for system messages
+function formatMarkdown(text) {
+  return text
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\n/g, '<br>');
+}
+
+// Expose for external use
+export const UplinkCommands = {
+  execute: executeCommand,
+  list: () => Object.keys(commands)
+};
+
+// Backward compat: assign to window
+window.UplinkCommands = UplinkCommands;
+
+// Register with core for coordinated initialization
+UplinkCore.registerModule('commands', init);

package/public/js/connection-api.js

@@ -0,0 +1,121 @@
+// ============================================
+// CONNECTION API MODULE
+// HTTP API calls for chat endpoints
+// ============================================
+
+const logger = window.logger || console;
+
+/**
+ * Check server health
+ */
+export async function checkServerHealth() {
+  try {
+    const res = await fetch('/api/status', { method: 'GET', cache: 'no-cache' });
+    return res.ok;
+  } catch (e) {
+    logger.debug('Connection: Server health check failed', e);
+    return false;
+  }
+}
+
+/**
+ * Fetch chat history
+ */
+export async function fetchChatHistory(satelliteId = 'main') {
+  try {
+    const url = satelliteId === 'main' 
+      ? '/api/history'
+      : `/api/history?satelliteId=${encodeURIComponent(satelliteId)}`;
+    
+    const res = await fetch(url, { method: 'GET' });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    
+    const data = await res.json();
+    return data.messages || [];
+  } catch (err) {
+    logger.error('Connection: Failed to fetch history', err);
+    throw err;
+  }
+}
+
+/**
+ * Send a chat message (without streaming)
+ */
+export async function sendMessage(message, satelliteId = 'main', agentId = 'main') {
+  try {
+    const res = await fetch('/api/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ 
+        message, 
+        stream: false,
+        satelliteId,
+        agentId
+      })
+    });
+    
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    
+    const data = await res.json();
+    return data.response;
+  } catch (err) {
+    logger.error('Connection: Failed to send message', err);
+    throw err;
+  }
+}
+
+/**
+ * Upload a file
+ */
+export async function uploadFile(file, satelliteId = 'main') {
+  const formData = new FormData();
+  formData.append('file', file);
+  if (satelliteId !== 'main') {
+    formData.append('satelliteId', satelliteId);
+  }
+
+  try {
+    const res = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData
+    });
+
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+    const data = await res.json();
+    return data.url;
+  } catch (err) {
+    logger.error('Connection: Failed to upload file', err);
+    throw err;
+  }
+}
+
+/**
+ * Clear chat history
+ */
+export async function clearHistory(satelliteId = 'main') {
+  try {
+    const url = satelliteId === 'main'
+      ? '/api/clear'
+      : `/api/clear?satelliteId=${encodeURIComponent(satelliteId)}`;
+    
+    const res = await fetch(url, { method: 'POST' });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    
+    return true;
+  } catch (err) {
+    logger.error('Connection: Failed to clear history', err);
+    throw err;
+  }
+}
+
+// Expose on window for backward compatibility
+if (typeof window !== 'undefined') {
+  window.UplinkConnectionAPI = {
+    checkServerHealth,
+    fetchChatHistory,
+    sendMessage,
+    uploadFile,
+    clearHistory
+  };
+}