@mooncompany/uplink-chat 0.5.0

package/public/js/app.js

@@ -0,0 +1,79 @@
+// ============================================
+// APP ENTRY POINT
+// Imports all modules in correct dependency order.
+// esbuild bundles this into public/dist/bundle.js
+// ============================================
+
+// === Foundation (no dependencies) ===
+import './logger.js';
+import './utils/constants.js';
+import './utils/sanitize.js';
+import './fetch-utils.js';
+
+// === Core (depends on logger) ===
+import './core.js';
+import './encryption.js';
+import './storage.js';
+
+// === UI Rendering (depends on core, storage) ===
+import './errors.js';
+import './utils/sse-parser.js';
+import './markdown.js';
+import './message-renderer.js';
+import './streaming-handler.js';
+
+// === Audio & Queues ===
+import './audio-queue.js';
+import './offline-queue.js';
+import './file-handler.js';
+
+// === Event Bus (cross-module communication) ===
+import './event-bus.js';
+
+// === Core App (depends on rendering + storage) ===
+import './onboarding.js';
+import './ui.js';
+import './chat.js';
+import './connection-api.js';
+import './connection.js';
+
+// === Feature Modules (deferred in original, now bundled) ===
+import './panels.js';
+import './voice.js';
+import './realtime-voice.js';
+import './appearance-settings.js';
+import './tts-settings.js';
+import './stt-settings.js';
+import './settings.js';
+import './commands.js';
+import './developer.js';
+import './dashboard.js';
+import './files.js';
+import './themes.js';
+import './premium.js';
+import './theme-generator.js';
+import './notifications.js';
+import './shortcuts.js';
+import './missed-messages.js';
+import './timestamps.js';
+import './gateway-chat.js';
+import './agents-data.js';
+import './agents-ui.js';
+import './agents.js';
+import './satellite-sync.js';
+import './satellite-ui.js';
+import './satellites.js';
+import './message-actions.js';
+import './context-tracker.js';
+import './artifacts.js';
+import './splitview.js';
+import './split-resize.js';
+import './split-chat.js';
+import './update-notifier.js';
+
+// === Bootstrap (ensures everything is ready) ===
+import './bootstrap.js';
+
+// NOTE: mobile-debug.js is intentionally excluded from the bundle.
+// It is conditionally loaded only on non-localhost connections
+// and is commented out in index.html by default.

package/public/js/appearance-settings.js

@@ -0,0 +1,111 @@
+// ============================================
+// APPEARANCE SETTINGS MODULE
+// Theme, text size, and visual display settings
+// ============================================
+
+// DOM elements
+let themeSelect;
+let textSizeSelect;
+
+// Settings
+let textSize = 'medium';
+
+function init() {
+  themeSelect = document.getElementById('themeSelect');
+  textSizeSelect = document.getElementById('textSizeSelect');
+
+  loadSettings();
+  setupEvents();
+}
+
+function loadSettings() {
+  const storage = window.UplinkStorage;
+  if (!storage) return;
+
+  const saved = storage.loadSettings();
+  if (saved.textSize) textSize = saved.textSize;
+  if (saved.theme) applyTheme(saved.theme);
+}
+
+function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  if (themeSelect) {
+    // Ensure 'custom' option exists if needed
+    if (theme === 'custom' && !themeSelect.querySelector('option[value="custom"]')) {
+      var opt = document.createElement('option');
+      opt.value = 'custom';
+      opt.textContent = '✦ Custom';
+      themeSelect.appendChild(opt);
+    }
+    themeSelect.value = theme;
+  }
+}
+
+function setupEvents() {
+  // Theme change
+  themeSelect?.addEventListener('change', () => {
+    const theme = themeSelect.value;
+    // Use UplinkThemes if available (handles premium check + events)
+    if (window.UplinkThemes) {
+      window.UplinkThemes.apply(theme);
+    } else {
+      applyTheme(theme);
+    }
+    const storage = window.UplinkStorage;
+    if (storage) storage.saveSettings({ theme });
+  });
+
+  // Text size change
+  textSizeSelect?.addEventListener('change', () => {
+    textSize = textSizeSelect.value;
+    applyTextSize();
+    saveSettings();
+  });
+}
+
+function applyTextSize() {
+  const messages = document.getElementById('messages');
+  if (messages) {
+    messages.classList.remove('text-small', 'text-medium', 'text-large');
+    messages.classList.add(`text-${textSize}`);
+  }
+}
+
+function saveSettings() {
+  const storage = window.UplinkStorage;
+  if (!storage) return;
+
+  storage.saveSettings({
+    textSize,
+    mode: window.UplinkCore?.mode || 'text'
+  });
+}
+
+function applyState() {
+  // Update text size select
+  if (textSizeSelect) textSizeSelect.value = textSize;
+  
+  // Sync theme select with current theme
+  const currentTheme = document.documentElement.getAttribute('data-theme') || 'midnight';
+  if (themeSelect) themeSelect.value = currentTheme;
+
+  applyTextSize();
+}
+
+// Expose API
+export const UplinkAppearanceSettings = {
+  init,
+  applyState,
+  applyTheme,
+  getTextSize: () => textSize,
+  setTextSize: (size) => {
+    textSize = size;
+    applyTextSize();
+    saveSettings();
+  }
+};
+
+import { UplinkCore } from './core.js';
+
+// Backward compat: assign to window
+window.UplinkAppearanceSettings = UplinkAppearanceSettings;

package/public/js/artifacts.js

@@ -0,0 +1,432 @@
+// ============================================
+// ARTIFACTS MODULE
+// Artifacts viewer panel for agent-generated documents
+// ============================================
+
+import { UplinkCore } from './core.js';
+import { UplinkMarkdown } from './markdown.js';
+
+// DOM elements
+let artifactsBtn, artifactsPanel;
+let artifactsList, artifactsReader, artifactsSearch;
+let readerTitle, readerContent, readerBackBtn;
+
+// State
+let artifacts = [];
+let currentArtifact = null;
+
+// AbortController for event listeners cleanup
+let eventsAbortController = null;
+
+function init() {
+  artifactsBtn = document.getElementById('artifactsBtn');
+  artifactsPanel = document.getElementById('artifactsPanel');
+  artifactsList = document.getElementById('artifactsList');
+  artifactsReader = document.getElementById('artifactsReader');
+  artifactsSearch = document.getElementById('artifactsSearch');
+  readerTitle = document.getElementById('readerTitle');
+  readerContent = document.getElementById('readerContent');
+  readerBackBtn = document.getElementById('readerBackBtn');
+
+  if (!artifactsBtn || !artifactsPanel) {
+    console.warn('Artifacts: Elements not found, retrying...');
+    setTimeout(init, 100);
+    return;
+  }
+
+  setupEvents();
+
+  // Register with panel manager
+  if (window.UplinkPanels && artifactsPanel) {
+    window.UplinkPanels.register('artifacts', {
+      element: artifactsPanel,
+      isOpen: () => artifactsPanel.classList.contains('visible'),
+      open: () => {
+        artifactsPanel.classList.add('visible');
+        onPanelOpen();
+      },
+      close: () => {
+        artifactsPanel.classList.remove('visible');
+        onPanelClose();
+      }
+    });
+  }
+
+  console.log('Artifacts: Initialized');
+}
+
+function setupEvents() {
+  // Abort previous event listeners
+  if (eventsAbortController) {
+    eventsAbortController.abort();
+  }
+  eventsAbortController = new AbortController();
+  const signal = eventsAbortController.signal;
+
+  // Toggle artifacts panel
+  artifactsBtn?.addEventListener('click', () => {
+    if (window.UplinkPanels) {
+      window.UplinkPanels.toggle('artifacts');
+    } else {
+      artifactsPanel?.classList.toggle('visible');
+    }
+  }, { signal });
+
+  // Close button
+  const closeBtn = document.getElementById('artifactsCloseBtn');
+  closeBtn?.addEventListener('click', () => {
+    if (window.UplinkPanels) {
+      window.UplinkPanels.close('artifacts');
+    } else {
+      artifactsPanel?.classList.remove('visible');
+    }
+  }, { signal });
+
+  // Back button
+  readerBackBtn?.addEventListener('click', showList, { signal });
+
+  // Download button
+  const downloadBtn = document.getElementById('readerDownloadBtn');
+  downloadBtn?.addEventListener('click', downloadCurrentArtifact, { signal });
+
+  // Search input
+  artifactsSearch?.addEventListener('input', filterArtifacts, { signal });
+
+  // Refresh button
+  const refreshBtn = document.getElementById('artifactsRefreshBtn');
+  refreshBtn?.addEventListener('click', loadArtifacts, { signal });
+}
+
+async function onPanelOpen() {
+  // Load artifacts when panel opens
+  await loadArtifacts();
+  showList();
+}
+
+function onPanelClose() {
+  // Return focus to artifacts button
+  if (artifactsBtn) {
+    artifactsBtn.focus();
+  }
+}
+
+/**
+ * Load artifacts list from API
+ */
+async function loadArtifacts() {
+  try {
+    const response = await fetch('/api/artifacts');
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+    
+    artifacts = await response.json();
+    renderList();
+  } catch (error) {
+    console.error('Artifacts: Failed to load', error);
+    showError('Failed to load artifacts');
+  }
+}
+
+/**
+ * Render artifacts list
+ */
+function renderList() {
+  if (!artifactsList) return;
+
+  if (artifacts.length === 0) {
+    artifactsList.innerHTML = `
+      <div class="artifacts-empty">
+        <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+          <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+        <p>No artifacts yet</p>
+        <small>Agent-generated documents will appear here</small>
+      </div>
+    `;
+    return;
+  }
+
+  const searchTerm = artifactsSearch?.value.toLowerCase() || '';
+  const filteredArtifacts = searchTerm
+    ? artifacts.filter(a => a.name.toLowerCase().includes(searchTerm))
+    : artifacts;
+
+  if (filteredArtifacts.length === 0) {
+    artifactsList.innerHTML = `
+      <div class="artifacts-empty">
+        <p>No matching artifacts</p>
+      </div>
+    `;
+    return;
+  }
+
+  artifactsList.innerHTML = filteredArtifacts.map(artifact => `
+    <div class="artifact-item" data-name="${escapeAttr(artifact.name)}">
+      <div class="artifact-icon">${getFileIcon(artifact.extension)}</div>
+      <div class="artifact-info">
+        <div class="artifact-name">${escapeHtml(artifact.name)}</div>
+        <div class="artifact-meta">
+          ${formatFileSize(artifact.size)} · ${formatRelativeTime(artifact.modified)}
+        </div>
+      </div>
+    </div>
+  `).join('');
+
+  // Add click handlers
+  artifactsList.querySelectorAll('.artifact-item').forEach(item => {
+    item.addEventListener('click', () => {
+      const name = item.dataset.name;
+      const artifact = artifacts.find(a => a.name === name);
+      if (artifact) {
+        openArtifact(artifact);
+      }
+    });
+  });
+}
+
+/**
+ * Filter artifacts by search term
+ */
+function filterArtifacts() {
+  renderList();
+}
+
+/**
+ * Open artifact in reader view
+ */
+async function openArtifact(artifact) {
+  try {
+    const response = await fetch(`/api/artifacts/${encodeURIComponent(artifact.name)}`);
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+    
+    const data = await response.json();
+    currentArtifact = data;
+    
+    // Render in reader
+    if (readerTitle) {
+      readerTitle.textContent = data.name;
+    }
+    
+    if (readerContent) {
+      if (data.extension === '.md') {
+        // Render markdown
+        readerContent.innerHTML = UplinkMarkdown.render(data.content);
+        if (UplinkMarkdown.highlightCode) {
+          UplinkMarkdown.highlightCode(readerContent);
+        }
+      } else if (data.extension === '.html') {
+        // HTML files get a preview/source toggle
+        readerContent.innerHTML = `
+          <div class="artifacts-html-toggle">
+            <button class="artifacts-toggle-btn active" data-mode="preview">Preview</button>
+            <button class="artifacts-toggle-btn" data-mode="source">Source</button>
+          </div>
+          <div class="artifacts-html-preview">
+            <iframe class="artifacts-iframe" sandbox="allow-same-origin" srcdoc="${escapeAttr(data.content)}"></iframe>
+          </div>
+          <div class="artifacts-html-source" style="display: none;">
+            <pre><code>${escapeHtml(data.content)}</code></pre>
+          </div>
+        `;
+        // Wire up toggle buttons
+        readerContent.querySelectorAll('.artifacts-toggle-btn').forEach(btn => {
+          btn.addEventListener('click', () => {
+            const mode = btn.dataset.mode;
+            const preview = readerContent.querySelector('.artifacts-html-preview');
+            const source = readerContent.querySelector('.artifacts-html-source');
+            readerContent.querySelectorAll('.artifacts-toggle-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            if (mode === 'preview') {
+              preview.style.display = 'block';
+              source.style.display = 'none';
+            } else {
+              preview.style.display = 'none';
+              source.style.display = 'block';
+            }
+          });
+        });
+      } else {
+        // Plain text / code
+        readerContent.innerHTML = `<pre>${escapeHtml(data.content)}</pre>`;
+      }
+    }
+    
+    showReader();
+  } catch (error) {
+    console.error('Artifacts: Failed to open', error);
+    showError(`Failed to open ${artifact.name}`);
+  }
+}
+
+/**
+ * Show artifacts list view
+ */
+function showList() {
+  if (artifactsList) artifactsList.style.display = 'block';
+  if (artifactsReader) artifactsReader.style.display = 'none';
+  if (artifactsSearch) artifactsSearch.style.display = 'block';
+}
+
+/**
+ * Show artifact reader view
+ */
+function showReader() {
+  if (artifactsList) artifactsList.style.display = 'none';
+  if (artifactsReader) artifactsReader.style.display = 'block';
+  if (artifactsSearch) artifactsSearch.style.display = 'none';
+}
+
+/**
+ * Download the currently open artifact
+ */
+function downloadCurrentArtifact() {
+  if (!currentArtifact) return;
+  
+  const blob = new Blob([currentArtifact.content], { type: 'text/plain;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = currentArtifact.name;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Show error message
+ */
+function showError(message) {
+  if (artifactsList) {
+    artifactsList.innerHTML = `
+      <div class="artifacts-error">
+        <p>${escapeHtml(message)}</p>
+      </div>
+    `;
+  }
+}
+
+/**
+ * Get icon for file type
+ */
+function getFileIcon(extension) {
+  const icons = {
+    '.md': '📄',
+    '.txt': '📋',
+    '.html': '🌐',
+    '.json': '📊',
+    '.csv': '📈',
+    '.yml': '⚙️',
+    '.yaml': '⚙️',
+    '.xml': '📑',
+    '.log': '📝'
+  };
+  return icons[extension] || '📄';
+}
+
+/**
+ * Format file size
+ */
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Format relative time
+ */
+function formatRelativeTime(isoString) {
+  const date = new Date(isoString);
+  const now = new Date();
+  const diffMs = now - date;
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  
+  return date.toLocaleDateString();
+}
+
+/**
+ * Escape HTML
+ */
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text || '';
+  return div.innerHTML;
+}
+
+/**
+ * Escape attribute value
+ */
+function escapeAttr(text) {
+  return (text || '')
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+/**
+ * Cleanup function
+ */
+function destroy() {
+  if (eventsAbortController) {
+    eventsAbortController.abort();
+    eventsAbortController = null;
+  }
+}
+
+/**
+ * Open an artifact by filename — used for deep links from chat messages
+ * Opens the artifacts panel and navigates directly to the document
+ */
+async function openArtifactByName(filename) {
+  // Open the panel if not already open
+  if (window.UplinkPanels) {
+    window.UplinkPanels.open('artifacts');
+  }
+  
+  // Load artifacts if we haven't yet
+  if (artifacts.length === 0) {
+    await loadArtifacts();
+  }
+  
+  // Find the artifact
+  const artifact = artifacts.find(a => a.name === filename);
+  if (artifact) {
+    await openArtifact(artifact);
+  } else {
+    // Try loading fresh in case it was just created
+    await loadArtifacts();
+    const freshArtifact = artifacts.find(a => a.name === filename);
+    if (freshArtifact) {
+      await openArtifact(freshArtifact);
+    } else {
+      console.warn(`Artifacts: "${filename}" not found`);
+    }
+  }
+}
+
+// Export API
+export const UplinkArtifacts = {
+  init,
+  loadArtifacts,
+  openArtifactByName,
+  destroy
+};
+
+// Backward compat: assign to window
+window.UplinkArtifacts = UplinkArtifacts;
+
+// Register and init
+UplinkCore.registerModule('artifacts', init);