@mooncompany/uplink-chat 0.5.0

package/public/js/markdown.js

@@ -0,0 +1,190 @@
+// ============================================
+// MARKDOWN MODULE
+// Enhanced markdown rendering for messages
+// ============================================
+
+// Validate URL to prevent XSS via javascript: protocol
+function isValidHttpUrl(str) {
+  try {
+    const url = new URL(str);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+// Markdown rendering function
+export function render(text) {
+  if (!text) return '';
+
+  // Escape HTML first
+  let html = text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  // Code blocks (```language\ncode\n```)
+  html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, (match, lang, code) => {
+    const langClass = lang ? ` class="language-${lang}"` : '';
+    return `<pre><code${langClass}>${code.trim()}</code></pre>`;
+  });
+
+  // Inline code (`code`)
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  // Tables (GitHub-flavored markdown) - MUST be before line breaks
+  html = html.replace(/\|([^\n]+)\|\n\|[-:\|\s]+\|\n((?:\|[^\n]+\|\n?)+)/g, (match, headerRow, bodyRows) => {
+    const headers = headerRow.split('|').map(h => h.trim()).filter(h => h);
+    const rows = bodyRows.trim().split('\n').map(row => {
+      const cells = row.split('|').map(c => c.trim()).filter(c => c);
+      return `<tr>${cells.map(c => `<td>${c}</td>`).join('')}</tr>`;
+    }).join('');
+    return `<table class="md-table"><thead><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr></thead><tbody>${rows}</tbody></table>`;
+  });
+
+  // Headers (# ## ###)
+  html = html.replace(/^### (.+)$/gm, '<h4>$1</h4>');
+  html = html.replace(/^## (.+)$/gm, '<h3>$1</h3>');
+  html = html.replace(/^# (.+)$/gm, '<h2>$1</h2>');
+
+  // Bold (**text** or __text__)
+  html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+  html = html.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+
+  // Italic (*text* or _text_)
+  html = html.replace(/(^|[^*])\*([^*]+)\*(?!\*)/gm, '$1<em>$2</em>');
+  html = html.replace(/(^|[^_])_([^_]+)_(?!_)/gm, '$1<em>$2</em>');
+
+  // Strikethrough (~~text~~)
+  html = html.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+
+  // Blockquotes (> text)
+  html = html.replace(/^&gt; (.+)$/gm, '<blockquote>$1</blockquote>');
+  // Merge consecutive blockquotes
+  html = html.replace(/<\/blockquote>\n<blockquote>/g, '\n');
+
+  // Horizontal rules (--- or ***)
+  html = html.replace(/^(-{3,}|\*{3,})$/gm, '<hr>');
+
+  // Unordered lists (- item or * item)
+  html = html.replace(/^[\-\*] (.+)$/gm, '<li>$1</li>');
+  html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
+
+  // Ordered lists (1. item)
+  html = html.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+  // Wrap consecutive li's in ol (avoiding ul)
+  html = html.replace(/(<li>.*<\/li>\n?)+/g, (match, _p1, offset) => {
+    const before = html.substring(Math.max(0, offset - 5), offset);
+    if (before.includes('<ul>') || match.includes('<ul>')) return match;
+    return '<ol>' + match + '</ol>';
+  });
+
+  // Images ![alt](url) - process before links to avoid conflict
+  html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, url) => {
+    const trimmedUrl = url.trim();
+    
+    // Rewrite local file paths to agent media proxy
+    // Matches Windows paths (C:\...), Unix paths (/home/...), and relative paths
+    if (!/^(https?:|\/api\/)/i.test(trimmedUrl)) {
+      // This is a local path - it should have been converted to a proxy URL by the server
+      // If it wasn't, skip rendering to avoid broken images
+      console.warn('[Markdown] Local file path in markdown image, skipping:', trimmedUrl);
+      return `[Image: ${alt || 'local file'}]`;
+    }
+    
+    return `<img src="${trimmedUrl}" alt="${alt || ''}" loading="lazy">`;
+  });
+
+  // Links [text](url)
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
+    const trimmedUrl = url.trim();
+    if (/^(https?:|mailto:|\/|#)/i.test(trimmedUrl)) {
+      return `<a href="${trimmedUrl}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+    }
+    return text;
+  });
+
+  // Auto-link URLs
+  html = html.replace(/(^|[\s>])(https?:\/\/[^\s<]+)/g,
+    (match, prefix, url) => {
+      if (prefix === '"' || prefix === "'") return match;
+      return isValidHttpUrl(url)
+        ? `${prefix}<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`
+        : match;
+    });
+
+  // Artifact deep links — detect artifacts/filename references and make them clickable
+  // Uses data-artifact attribute + event delegation (no inline onclick — works on mobile/PWA)
+  html = html.replace(/<code>artifacts\/([a-zA-Z0-9_\-]+\.[a-zA-Z]+)<\/code>/g, 
+    '<a href="javascript:void(0)" class="artifact-link" data-artifact="$1">📄 $1</a>');
+  html = html.replace(/(?<!<code>|data-artifact=")artifacts\/([a-zA-Z0-9_\-]+\.[a-zA-Z]+)/g,
+    '<a href="javascript:void(0)" class="artifact-link" data-artifact="$1">📄 $1</a>');
+
+  // Line breaks
+  html = html.replace(/\n/g, '<br>');
+
+  // Clean up extra breaks around block elements
+  html = html.replace(/<br>(<\/?(?:pre|ul|ol|li|blockquote|h[2-4]|hr|table))/g, '$1');
+  html = html.replace(/(<\/(?:pre|ul|ol|li|blockquote|h[2-4])>)<br>/g, '$1');
+
+  return html;
+}
+
+// Apply syntax highlighting to code blocks (basic)
+export function highlightCode(container) {
+  container.querySelectorAll('pre code').forEach(block => {
+    // Skip already-highlighted blocks
+    if (block.dataset.highlighted) return;
+    
+    const lang = block.className.replace('language-', '');
+    if (!lang) return;
+
+    const keywords = {
+      js: ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'class', 'import', 'export', 'from', 'async', 'await', 'try', 'catch', 'throw', 'new', 'this', 'true', 'false', 'null', 'undefined'],
+      python: ['def', 'class', 'if', 'elif', 'else', 'for', 'while', 'return', 'import', 'from', 'as', 'try', 'except', 'raise', 'with', 'True', 'False', 'None', 'and', 'or', 'not', 'in', 'is', 'lambda', 'self'],
+      css: ['@media', '@import', '@keyframes', '!important'],
+      html: []
+    };
+
+    const langKeywords = keywords[lang] || keywords.js;
+    if (langKeywords.length === 0) return;
+
+    let code = block.innerHTML;
+    
+    // Highlight strings
+    code = code.replace(/(["'`])(?:(?!\1)[^\\]|\\.)*\1/g, '<span class="md-string">$&</span>');
+    
+    // Highlight comments
+    code = code.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/|#.*$)/gm, '<span class="md-comment">$&</span>');
+    
+    // Highlight keywords (word boundary)
+    const keywordRegex = new RegExp(`\\b(${langKeywords.join('|')})\\b`, 'g');
+    code = code.replace(keywordRegex, '<span class="md-keyword">$1</span>');
+    
+    // Highlight numbers
+    code = code.replace(/\b(\d+\.?\d*)\b/g, '<span class="md-number">$1</span>');
+
+    block.innerHTML = code;
+    block.dataset.highlighted = 'true';
+  });
+}
+
+// Delegated click handler for artifact deep links (works on mobile/PWA, no inline onclick needed)
+document.addEventListener('click', (e) => {
+  const link = e.target.closest('.artifact-link[data-artifact]');
+  if (!link) return;
+  e.preventDefault();
+  const filename = link.dataset.artifact;
+  if (filename && window.UplinkArtifacts?.openArtifactByName) {
+    window.UplinkArtifacts.openArtifactByName(filename);
+  }
+});
+
+// Export API
+export const UplinkMarkdown = {
+  render,
+  highlightCode
+};
+
+// Backward compat: assign to window
+window.UplinkMarkdown = UplinkMarkdown;

package/public/js/message-actions.js

@@ -0,0 +1,431 @@
+// ============================================
+// MESSAGE ACTIONS MODULE
+// Copy, Reply, Fork to Satellite
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+// ========== CONSTANTS (L-07: Extract magic numbers) ==========
+const COPY_FEEDBACK_DURATION_MS = 1500;    // How long to show "copied" state
+const TEXT_TRUNCATE_REPLY_LENGTH = 150;    // Reply context max chars
+const TEXT_TRUNCATE_FORK_LENGTH = 500;     // Fork dialog max chars
+const SATELLITE_NAME_MAX_LENGTH = 32;      // Max length for satellite name
+
+// State
+let replyingTo = null; // { text, type, element }
+
+// Icons
+const ICONS = {
+  copy: '<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>',
+  reply: '<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 17l-5-5 5-5"/><path d="M4 12h11a4 4 0 014 4v4"/></svg>',
+  fork: '<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M6 9v6c0 1.1.9 2 2 2h5"/><path d="M18 9v0"/></svg>',
+  edit: '<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>'
+};
+
+/**
+ * Create action buttons for a message
+ * @param {HTMLElement} msgElement - The message div
+ * @param {string} type - 'user' or 'assistant'
+ * @param {string} text - Message text content
+ */
+function createActions(msgElement, type, text) {
+  const actions = document.createElement('div');
+  actions.className = 'message-actions';
+
+  // Copy button (all messages)
+  const copyBtn = createButton('copy', 'Copy', () => copyMessage(text, copyBtn));
+  actions.appendChild(copyBtn);
+
+  // Reply button (all messages)
+  const replyBtn = createButton('reply', 'Reply', () => startReply(text, type, msgElement));
+  actions.appendChild(replyBtn);
+
+  // Fork button (all messages)
+  const forkBtn = createButton('fork', 'Fork to satellite', () => showForkDialog(msgElement, text));
+  actions.appendChild(forkBtn);
+
+  msgElement.appendChild(actions);
+  msgElement.style.position = 'relative'; // For absolute positioning of actions
+}
+
+function createButton(icon, title, onClick) {
+  const btn = document.createElement('button');
+  btn.className = 'message-action-btn';
+  btn.innerHTML = ICONS[icon];
+  btn.title = title;
+  btn.setAttribute('aria-label', title);
+  btn.setAttribute('type', 'button');
+  btn.onclick = (e) => {
+    e.stopPropagation();
+    onClick();
+  };
+  // Support Enter and Space for keyboard activation
+  btn.onkeydown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick();
+    }
+  };
+  return btn;
+}
+
+// ============================================
+// COPY
+// ============================================
+async function copyMessage(text, btn) {
+  try {
+    await navigator.clipboard.writeText(text);
+    btn.classList.add('copied');
+    setTimeout(() => btn.classList.remove('copied'), COPY_FEEDBACK_DURATION_MS);
+  } catch (err) {
+    if (window.UplinkLogger?.error) {
+      window.UplinkLogger.error('Failed to copy:', err);
+    }
+    // Fallback
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textarea);
+    btn.classList.add('copied');
+    setTimeout(() => btn.classList.remove('copied'), COPY_FEEDBACK_DURATION_MS);
+  }
+}
+
+// ============================================
+// REPLY
+// ============================================
+function startReply(text, type, element) {
+  // Clear any existing reply
+  clearReply();
+
+  replyingTo = { text, type, element };
+
+  // Highlight the message being replied to
+  element.classList.add('replying-to');
+
+  // Show reply context in input area
+  showReplyContext(text, type);
+
+  // Focus the input
+  const input = document.getElementById('textInput');
+  if (input) input.focus();
+}
+
+function showReplyContext(text, type) {
+  const inputArea = document.querySelector('.input-area');
+  if (!inputArea) return;
+
+  // Remove existing context
+  const existing = inputArea.querySelector('.reply-context');
+  if (existing) existing.remove();
+
+  // Create context element
+  const context = document.createElement('div');
+  context.className = 'reply-context';
+  
+  const truncated = text.length > TEXT_TRUNCATE_REPLY_LENGTH ? text.substring(0, TEXT_TRUNCATE_REPLY_LENGTH) + '...' : text;
+  const sender = type === 'user' ? 'You' : (window.UplinkCore?.config?.agentName || 'Assistant');
+  
+  context.innerHTML = `
+    <div class="reply-context-text">
+      <strong>${escapeHtml(sender)}:</strong> ${escapeHtml(truncated)}
+    </div>
+    <button class="reply-context-close" title="Cancel reply">×</button>
+  `;
+
+  context.querySelector('.reply-context-close').onclick = clearReply;
+
+  // Insert before the text input row
+  const textRow = inputArea.querySelector('.text-input-row');
+  if (textRow) {
+    inputArea.insertBefore(context, textRow);
+  }
+}
+
+function clearReply() {
+  if (replyingTo?.element) {
+    replyingTo.element.classList.remove('replying-to');
+  }
+  replyingTo = null;
+
+  // Remove context display
+  const context = document.querySelector('.reply-context');
+  if (context) context.remove();
+}
+
+/**
+ * Get reply context for sending with message
+ * Returns null if not replying, or { text, type } if replying
+ */
+function getReplyContext() {
+  if (!replyingTo) return null;
+  return { text: replyingTo.text, type: replyingTo.type };
+}
+
+/**
+ * Format message with reply context for sending
+ * @param {string} newMessage - The new message to send
+ * @returns {string} - Message formatted with reply context
+ */
+function formatMessageWithReply(newMessage) {
+  const ctx = getReplyContext();
+  if (!ctx) return newMessage;
+
+  // Clear the reply state
+  clearReply();
+
+  // Format: include the quoted message as context
+  const sender = ctx.type === 'user' ? 'User' : 'Assistant';
+  const truncated = ctx.text.length > TEXT_TRUNCATE_FORK_LENGTH ? ctx.text.substring(0, TEXT_TRUNCATE_FORK_LENGTH) + '...' : ctx.text;
+  
+  return `[Replying to ${sender}: "${truncated}"]\n\n${newMessage}`;
+}
+
+// ============================================
+// FORK TO SATELLITE
+// ============================================
+function showForkDialog(msgElement, text) {
+  // Store the trigger element to return focus when closed
+  const triggerElement = document.activeElement;
+
+  // Remove existing dialog
+  const existing = document.querySelector('.fork-dialog-backdrop');
+  if (existing) existing.remove();
+
+  const truncated = text.length > TEXT_TRUNCATE_FORK_LENGTH ? text.substring(0, TEXT_TRUNCATE_FORK_LENGTH) + '...' : text;
+
+  // Create backdrop
+  const backdrop = document.createElement('div');
+  backdrop.className = 'fork-dialog-backdrop';
+  backdrop.setAttribute('role', 'presentation');
+
+  // Function to close dialog and restore focus
+  const closeDialog = () => {
+    backdrop.remove();
+    // Return focus to trigger element
+    if (triggerElement && triggerElement.focus) {
+      triggerElement.focus();
+    }
+  };
+
+  backdrop.onclick = closeDialog;
+
+  // Create dialog
+  const dialog = document.createElement('div');
+  dialog.className = 'fork-dialog';
+  dialog.setAttribute('role', 'dialog');
+  dialog.setAttribute('aria-modal', 'true');
+  dialog.setAttribute('aria-labelledby', 'fork-dialog-title');
+  dialog.onclick = (e) => e.stopPropagation();
+
+  dialog.innerHTML = `
+    <h3 id="fork-dialog-title">🛰️ Fork to New Satellite</h3>
+    <div class="fork-dialog-preview" aria-label="Message preview">${escapeHtml(truncated)}</div>
+    <label for="fork-dialog-input" class="sr-only">Satellite name</label>
+    <input id="fork-dialog-input" type="text" placeholder="Satellite name..." maxlength="${SATELLITE_NAME_MAX_LENGTH}" autofocus>
+    <div class="fork-dialog-actions">
+      <button type="button" class="fork-dialog-cancel">Cancel</button>
+      <button type="button" class="fork-dialog-confirm">Create</button>
+    </div>
+  `;
+
+  const input = dialog.querySelector('input');
+  const cancelBtn = dialog.querySelector('.fork-dialog-cancel');
+  const confirmBtn = dialog.querySelector('.fork-dialog-confirm');
+
+  // Get all focusable elements in the dialog
+  const getFocusableElements = () => {
+    return dialog.querySelectorAll('input, button');
+  };
+
+  cancelBtn.onclick = closeDialog;
+  confirmBtn.onclick = () => {
+    const name = input.value.trim() || 'Forked conversation';
+    createForkedSatellite(msgElement, name);
+    closeDialog();
+  };
+
+  // Handle keyboard events for focus trap and shortcuts
+  const handleKeydown = (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      closeDialog();
+      return;
+    }
+
+    if (e.key === 'Enter' && e.target === input) {
+      e.preventDefault();
+      confirmBtn.click();
+      return;
+    }
+
+    // Focus trap
+    if (e.key === 'Tab') {
+      const focusable = getFocusableElements();
+      const firstElement = focusable[0];
+      const lastElement = focusable[focusable.length - 1];
+
+      if (e.shiftKey) {
+        // Shift+Tab: if on first element, go to last
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        // Tab: if on last element, go to first
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement.focus();
+        }
+      }
+    }
+  };
+
+  dialog.addEventListener('keydown', handleKeydown);
+
+  backdrop.appendChild(dialog);
+  document.body.appendChild(backdrop);
+  input.focus();
+}
+
+function createForkedSatellite(msgElement, name) {
+  if (!window.UplinkSatellites) {
+    if (window.UplinkLogger?.error) {
+      window.UplinkLogger.error('Satellites module not available');
+    }
+    return;
+  }
+
+  // Get all messages up to and including the selected one
+  const messages = document.querySelectorAll('.message');
+  const messageHistory = [];
+  
+  for (const msg of messages) {
+    const text = msg.dataset.originalText || msg.querySelector('.message-text')?.textContent || '';
+    const type = msg.classList.contains('user') ? 'user' : 
+                 msg.classList.contains('assistant') ? 'assistant' : 'system';
+    
+    if (type !== 'system' && text) {
+      messageHistory.push({ text, type });
+    }
+    
+    // Stop after the selected message
+    if (msg === msgElement) break;
+  }
+
+  // Create new satellite with this history
+  window.UplinkSatellites.launchSatellite(name, messageHistory);
+  
+  // Show notification
+  if (window.showNotification) {
+    window.showNotification(`Forked to "${name}" with ${messageHistory.length} messages`, 'success');
+  }
+}
+
+// ============================================
+// UTILITIES
+// ============================================
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// ============================================
+// INTEGRATION
+// ============================================
+
+// Hook into message creation
+function init() {
+  // Use the chat module's hook system instead of monkey-patching window.addMessage (H-26)
+  if (window.UplinkChat?.onMessage) {
+    window.UplinkChat.onMessage(({ text, type }) => {
+      if (type !== 'system' && text) {
+        const messages = document.querySelectorAll('.message');
+        const lastMsg = messages[messages.length - 1];
+        if (lastMsg && !lastMsg.querySelector('.message-actions')) {
+          createActions(lastMsg, type, text);
+        }
+      }
+    });
+  } else if (window.addMessage) {
+    // Fallback: legacy monkey-patch if hook system not available
+    const originalAddMessage = window.addMessage;
+    window.addMessage = function(text, type, imageUrl, save) {
+      originalAddMessage(text, type, imageUrl, save);
+      
+      // Add actions to the newly added message
+      if (type !== 'system') {
+        const messages = document.querySelectorAll('.message');
+        const lastMsg = messages[messages.length - 1];
+        if (lastMsg && !lastMsg.querySelector('.message-actions')) {
+          createActions(lastMsg, type, text);
+        }
+      }
+    };
+  }
+
+  // Add actions to existing messages on page load
+  setTimeout(() => {
+    document.querySelectorAll('.message').forEach(msg => {
+      if (msg.querySelector('.message-actions')) return;
+      
+      const type = msg.classList.contains('user') ? 'user' : 
+                   msg.classList.contains('assistant') ? 'assistant' : 'system';
+      const text = msg.dataset.originalText || msg.querySelector('.message-text')?.textContent || '';
+      
+      if (type !== 'system' && text) {
+        createActions(msg, type, text);
+      }
+    });
+  }, 500);
+}
+
+// Register with core for coordinated initialization
+UplinkCore.registerModule('message-actions', init);
+
+/**
+ * Refresh actions on all messages (call after satellite switch or reload)
+ */
+function refreshActions() {
+  document.querySelectorAll('.message').forEach(msg => {
+    if (msg.querySelector('.message-actions')) return;
+    
+    const type = msg.classList.contains('user') ? 'user' : 
+                 msg.classList.contains('assistant') ? 'assistant' : 'system';
+    const text = msg.dataset.originalText || msg.querySelector('.message-text')?.textContent || '';
+    
+    if (type !== 'system' && text) {
+      createActions(msg, type, text);
+    }
+  });
+}
+
+// Listen for satellite switch events - clear reply context and refresh actions
+window.addEventListener('uplink:satellite-switching', () => {
+  // Clear reply context BEFORE the switch happens
+  clearReply();
+});
+
+window.addEventListener('uplink:satellite-switched', () => {
+  // Clear reply again (in case) and refresh actions on new messages
+  clearReply();
+  refreshActions();
+});
+
+// Expose API
+export const UplinkMessageActions = {
+  createActions,
+  startReply,
+  clearReply,
+  getReplyContext,
+  formatMessageWithReply,
+  refreshActions
+};
+
+// Backward compat: assign to window
+window.UplinkMessageActions = UplinkMessageActions;
+