@jungjaehoon/mama-os 0.8.3 → 0.9.0

package/public/viewer/src/utils/dom.ts

@@ -0,0 +1,138 @@
+/**
+ * DOM Utility Functions
+ * @module utils/dom
+ * @version 1.0.0
+ */
+
+/* eslint-env browser */
+
+/**
+ * Escape HTML to prevent XSS
+ * @param {string} text - Text to escape
+ * @returns {string} Escaped HTML
+ */
+export function escapeHtml(text: string | null | undefined): string {
+  if (!text) {
+    return '';
+  }
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Escape HTML for use in attribute values (also escapes quotes)
+ * @param {string} text - Text to escape
+ * @returns {string} Escaped text safe for HTML attributes
+ */
+export function escapeAttr(text: string | null | undefined): string {
+  if (!text) {
+    return '';
+  }
+  return escapeHtml(text).replace(/"/g, '"').replace(/'/g, ''');
+}
+
+/**
+ * Get DOM element by id with typed generic casting
+ * @param {string} id - Element id
+ * @returns {T | null} Matched element or null
+ */
+export function getElementByIdOrNull<T extends Element>(id: string): T | null {
+  const element = document.getElementById(id);
+  return element ? (element as unknown as T) : null;
+}
+
+/**
+ * Normalize error values to a safe message string
+ * @param error - Unknown thrown value
+ * @returns {string} Error message
+ */
+export function getErrorMessage(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+}
+
+/**
+ * Debounce function calls
+ * @param {Function} func - Function to debounce
+ * @param {number} wait - Wait time in milliseconds
+ * @returns {Function} Debounced function
+ */
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  return function executedFunction(...args) {
+    const later = () => {
+      timeout = undefined;
+      func(...args);
+    };
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(later, wait);
+  };
+}
+
+/**
+ * Show toast notification
+ * @param {string} message - Message to display
+ * @param {number} duration - Duration in milliseconds
+ */
+export function showToast(message: string, duration = 3000): void {
+  // Remove existing toast
+  const existingToast = document.querySelector('.toast-notification');
+  if (existingToast) {
+    existingToast.remove();
+  }
+
+  const toast = document.createElement('div');
+  toast.className = 'toast-notification';
+  toast.textContent = message;
+  document.body.appendChild(toast);
+
+  // Trigger animation
+  requestAnimationFrame(() => {
+    toast.classList.add('visible');
+  });
+
+  // Auto-remove
+  setTimeout(() => {
+    toast.classList.remove('visible');
+    setTimeout(() => toast.remove(), 300);
+  }, duration);
+}
+
+/**
+ * Scroll element to bottom
+ * @param {HTMLElement} container - Container to scroll
+ */
+export function scrollToBottom(container: HTMLElement): void {
+  // Use setTimeout to ensure DOM has updated before scrolling
+  const doScroll = () => {
+    container.scrollTop = container.scrollHeight;
+    if (container.scrollTo) {
+      container.scrollTo({ top: container.scrollHeight, behavior: 'auto' });
+    }
+  };
+  setTimeout(doScroll, 50);
+  requestAnimationFrame(doScroll);
+}
+
+/**
+ * Auto-resize textarea to fit content
+ * @param {HTMLTextAreaElement} textarea - Textarea element
+ * @param {number} maxRows - Maximum number of rows (default: 5)
+ */
+export function autoResizeTextarea(textarea: HTMLTextAreaElement, maxRows = 5): void {
+  textarea.style.height = 'auto';
+  const computedLineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight);
+  const lineHeight =
+    Number.isFinite(computedLineHeight) && computedLineHeight > 0 ? computedLineHeight : 20;
+  const maxHeight = lineHeight * maxRows;
+  const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+  textarea.style.height = newHeight + 'px';
+}

package/public/viewer/src/utils/format.ts

@@ -0,0 +1,331 @@
+/**
+ * Formatting Utility Functions
+ * @module utils/format
+ * @version 1.1.0
+ */
+
+/* eslint-env browser */
+
+/**
+ * Known Claude model name mappings
+ * https://platform.claude.com/docs/en/about-claude/models/overview
+ */
+const MODEL_NAMES: Record<string, string> = {
+  // Latest models
+  'claude-opus-4-6': 'Claude Opus 4.6',
+  'claude-sonnet-4-5-20250929': 'Claude Sonnet 4.5',
+  'claude-haiku-4-5-20251001': 'Claude Haiku 4.5',
+  // Legacy models
+  'claude-opus-4-5-20251101': 'Claude Opus 4.5',
+  'claude-sonnet-4-20250514': 'Claude Sonnet 4',
+  'claude-opus-4-20250514': 'Claude Opus 4',
+  'claude-3-7-sonnet-20250219': 'Claude Sonnet 3.7',
+  'claude-3-haiku-20240307': 'Claude Haiku 3',
+  // GPT models
+  'gpt-5.3-codex': 'GPT-5.3 Codex',
+  'gpt-5.2': 'GPT-5.2',
+  'gpt-5.1': 'GPT-5.1',
+  'gpt-4.1': 'GPT-4.1',
+  'gpt-4o': 'GPT-4o',
+  'gpt-4o-mini': 'GPT-4o Mini',
+  'o1': 'o1',
+  'o1-mini': 'o1 Mini',
+  'o3-mini': 'o3 Mini',
+};
+
+/**
+ * Get human-friendly model name from model ID
+ * @param {string} model - Model ID (e.g., 'claude-sonnet-4-20250514')
+ * @returns {string} Human-friendly name (e.g., 'Claude 4 Sonnet')
+ */
+export function formatModelName(model: string | null | undefined): string {
+  if (!model || model === 'default') {
+    return 'Default';
+  }
+
+  // Check known model mappings
+  if (MODEL_NAMES[model]) {
+    return MODEL_NAMES[model];
+  }
+
+  // Try to extract friendly name from model string
+  if (model.includes('opus')) {
+    return 'Claude Opus';
+  }
+  if (model.includes('sonnet')) {
+    return 'Claude Sonnet';
+  }
+  if (model.includes('haiku')) {
+    return 'Claude Haiku';
+  }
+
+  return model;
+}
+
+/**
+ * Format message timestamp
+ * @param {Date} date - Date object
+ * @returns {string} Formatted time (HH:MM)
+ */
+export function formatMessageTime(date: Date): string {
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+/**
+ * Format checkpoint timestamp
+ * @param {string|Date} timestamp - Timestamp
+ * @returns {string} Formatted relative time
+ */
+export function formatCheckpointTime(timestamp: string | Date): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+
+  if (diff < 3600000) {
+    const mins = Math.floor(diff / 60000);
+    return `${mins}m ago`;
+  }
+  if (diff < 86400000) {
+    const hours = Math.floor(diff / 3600000);
+    return `${hours}h ago`;
+  }
+
+  return (
+    date.toLocaleDateString() +
+    ' ' +
+    date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  );
+}
+
+/**
+ * Format relative time
+ * @param {string|Date} timestamp - Timestamp
+ * @returns {string} Relative time string
+ */
+export function formatRelativeTime(timestamp: string | number | Date | null | undefined): string {
+  if (!timestamp) {
+    return 'Never';
+  }
+
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) {
+    return 'Never';
+  }
+
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+
+  if (diff < 60000) {
+    return 'Just now';
+  }
+  if (diff < 3600000) {
+    const mins = Math.floor(diff / 60000);
+    return `${mins}m ago`;
+  }
+  if (diff < 86400000) {
+    const hours = Math.floor(diff / 3600000);
+    return `${hours}h ago`;
+  }
+  if (diff < 604800000) {
+    const days = Math.floor(diff / 86400000);
+    return `${days}d ago`;
+  }
+
+  return date.toLocaleDateString();
+}
+
+/**
+ * Truncate text with ellipsis
+ * @param {string} text - Text to truncate
+ * @param {number} maxLength - Maximum length
+ * @returns {string} Truncated text
+ */
+export function truncateText(text: string | null | undefined, maxLength: number): string {
+  if (!text) {
+    return '';
+  }
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return text.substring(0, maxLength) + '...';
+}
+
+/**
+ * Extract first meaningful line from text
+ * @param {string} text - Text to extract from
+ * @returns {string} First meaningful line
+ */
+export function extractFirstLine(text: string | null | undefined): string {
+  if (!text) {
+    return 'No summary';
+  }
+  const lines = text.split('\n').filter((l) => l.trim() && !l.startsWith('**'));
+  return lines[0] || text.substring(0, 100);
+}
+
+/**
+ * Format assistant message with markdown support
+ * @param {string} text - Text to format
+ * @returns {string} Formatted HTML
+ */
+export function formatAssistantMessage(text: string | null | undefined): string {
+  if (!text) {
+    return '';
+  }
+
+  // First escape HTML to prevent XSS
+  let formatted = escapeHtmlForMarkdown(text);
+
+  // Detect and wrap checkpoint/context sections in collapsible
+  formatted = wrapCheckpointSections(formatted);
+
+  // Code blocks with optional language (```js ... ```)
+  formatted = formatted.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, lang, code) => {
+    const langClass = lang ? ` class="language-${lang}"` : '';
+    return `<pre class="code-block"><code${langClass}>${code.trim()}</code></pre>`;
+  });
+
+  // Inline code
+  formatted = formatted.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  // Bold
+  formatted = formatted.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+
+  // Italic (avoiding conflicts with bold) - Safari-compatible without lookbehind
+  // Process after bold, match single asterisks not part of ** sequences
+  formatted = formatted.replace(/([^*]|^)\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+
+  // Helper: build safe media HTML from captured filename
+  // Note: filename may contain HTML entities from prior escaping, so decode first
+  const buildMediaHtml = (filename: string): string => {
+    const decodedName = decodeHtmlEntities(filename);
+    const safeName = encodeURIComponent(decodedName);
+    const safeAlt = escapeHtmlForMarkdown(decodedName).replace(/"/g, '&quot;');
+    const ext = decodedName.split('.').pop()?.toLowerCase() || '';
+    const imgExts = ['png', 'jpg', 'jpeg', 'gif', 'webp'];
+    if (imgExts.includes(ext)) {
+      return `<div class="media-inline"><img src="/api/media/${safeName}" class="max-w-[300px] rounded-lg my-1 cursor-pointer" data-lightbox="/api/media/${safeName}" alt="${safeAlt}"/><a href="/api/media/download/${safeName}" class="text-xs text-blue-500 hover:underline block">Download ${safeAlt}</a></div>`;
+    }
+    return `<a href="/api/media/download/${safeName}" class="text-blue-500 hover:underline">Download ${safeAlt}</a>`;
+  };
+
+  // Markdown images: ![alt](media-path) — render as inline images
+  // Note: exclude /api/media/download/ paths (they're already download links)
+  formatted = formatted.replace(
+    /!\[([^\]]*)\]\((?:~\/\.mama\/workspace\/media\/(?:outbound|inbound)\/|\/home\/[^/]+\/\.mama\/workspace\/media\/(?:outbound|inbound)\/|\/api\/media\/(?!download\/))([^)]+)\)/gi,
+    (_match, _alt, filename) => buildMediaHtml(filename)
+  );
+
+  // First: strip any <a> wrappers around media paths (from markdown link handler)
+  formatted = formatted.replace(
+    /<a\s+href="(?:~\/\.mama\/workspace\/media\/(?:outbound|inbound)\/|\/home\/[^/]+\/\.mama\/workspace\/media\/(?:outbound|inbound)\/)([^"]+)"[^>]*>[^<]*<\/a>/gi,
+    (_match, filename) => buildMediaHtml(filename)
+  );
+  // Then: handle bare media paths not already inside HTML tags
+  // Safari-compatible: use capture group instead of lookbehind
+  formatted = formatted.replace(
+    /(^|[^"'])(?:~\/\.mama\/workspace\/media\/(?:outbound|inbound)\/|\/home\/[^/]+\/\.mama\/workspace\/media\/(?:outbound|inbound)\/)([^\s<"']+\.(png|jpg|jpeg|gif|webp|svg|pdf))/gi,
+    (_, prefix, filename) => prefix + buildMediaHtml(filename)
+  );
+
+  // Headers (## and ###)
+  formatted = formatted.replace(
+    /^### (.+)$/gm,
+    '<h4 class="text-sm font-semibold mt-2 mb-1">$1</h4>'
+  );
+  formatted = formatted.replace(
+    /^## (.+)$/gm,
+    '<h3 class="text-base font-semibold mt-3 mb-1">$1</h3>'
+  );
+
+  // Bullet lists (- item)
+  formatted = formatted.replace(/^- (.+)$/gm, '<li class="ml-4">• $1</li>');
+
+  // Quiz choices as buttons - patterns like **A)** text or A) text
+  // Also handles blockquote prefix (> or &gt;)
+  // Match patterns: A) text, **A)** text, > A) text, etc.
+  formatted = formatted.replace(
+    /^(?:&gt;\s*)?(?:<strong>)?([A-D])\)(?:<\/strong>)?\s*(.+)$/gim,
+    (match, letter, text) => {
+      const upperLetter = letter.toUpperCase();
+      return `<button class="quiz-choice-btn" type="button" data-choice="${upperLetter}">${upperLetter}) ${text.trim()}</button>`;
+    }
+  );
+
+  // Line breaks
+  formatted = formatted.replace(/\n/g, '<br>');
+
+  // Clean up multiple <br> in lists
+  formatted = formatted.replace(/<\/li><br><li/g, '</li><li');
+
+  // Clean up <br> before/after quiz buttons
+  formatted = formatted.replace(/<br>(<button class="quiz-choice-btn")/g, '$1');
+  formatted = formatted.replace(/(<\/button>)<br>/g, '$1');
+
+  return formatted;
+}
+
+/**
+ * Escape HTML for markdown processing
+ * @param {string} text - Text to escape
+ * @returns {string} Escaped text
+ */
+function escapeHtmlForMarkdown(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Decode HTML entities back to plain text
+ * Used to fix double-encoding when building URLs from already-escaped content
+ * @param {string} text - Text with HTML entities
+ * @returns {string} Decoded plain text
+ */
+function decodeHtmlEntities(text: string): string {
+  const div = document.createElement('div');
+  div.innerHTML = text;
+  return div.textContent || div.innerText || '';
+}
+
+/**
+ * Wrap checkpoint/context sections in collapsible elements
+ * Detects patterns like "📍 Summary", "🎯 Goal", "Recent decisions", etc.
+ * @param {string} text - Text to process
+ * @returns {string} Text with collapsible sections
+ */
+function wrapCheckpointSections(text: string): string {
+  // Pattern to detect checkpoint section start
+  // Matches: "📍 Summary", "🎯 Goal", "📍 **Last Checkpoint**", etc.
+  const checkpointStartPatterns = [
+    /^(📍\s*\*?\*?Summary of past work|📍\s*\*?\*?Last Checkpoint)/m,
+    /^(🎯\s*Goal)/m,
+  ];
+
+  // Check if this message contains a checkpoint section
+  const hasCheckpoint = checkpointStartPatterns.some((p) => p.test(text));
+  if (!hasCheckpoint) {
+    return text;
+  }
+
+  // Find the checkpoint section boundaries
+  // It typically starts with "📍" and ends before "---" or end of message
+  const checkpointMatch = text.match(/(📍[\s\S]*?)(?=\n---\n🚀|\n---\n\n🚀|---\n\n🚀|$)/);
+
+  if (!checkpointMatch) {
+    return text;
+  }
+
+  const checkpointContent = checkpointMatch[1];
+  const uniqueId = 'cp-' + Math.random().toString(36).substring(2, 11);
+
+  // Create collapsible wrapper - summary must be first child (no newlines before it)
+  const collapsibleHtml =
+    `<details class="checkpoint-collapse" id="${uniqueId}">` +
+    `<summary class="checkpoint-summary">📍 Session Context <span class="collapse-hint">(tap to expand)</span></summary>` +
+    `<div class="checkpoint-content">${checkpointContent}</div>` +
+    `</details>`;
+
+  // Replace the checkpoint content with collapsible version
+  return text.replace(checkpointContent, collapsibleHtml);
+}

package/public/viewer/src/utils/markdown.ts

@@ -0,0 +1,46 @@
+/**
+ * Safe markdown rendering utilities.
+ */
+
+/* eslint-env browser */
+
+import { escapeHtml } from './dom.js';
+
+const MARKDOWN_PARSE_OPTIONS = {} as const;
+
+/**
+ * Render markdown string to HTML and sanitize.
+ *
+ * - Uses `marked.parse` when available.
+ * - Falls back to plain text rendering when markdown parser is unavailable.
+ * - Applies DOMPurify when available; otherwise returns parser output as-is.
+ */
+export function renderSafeMarkdown(markdown: string): string {
+  if (!markdown) {
+    return '';
+  }
+
+  const markdownText = String(markdown);
+
+  let html: string;
+  try {
+    if (typeof marked !== 'undefined' && typeof marked.parse === 'function') {
+      html = marked.parse(markdownText, MARKDOWN_PARSE_OPTIONS);
+    } else {
+      throw new Error('marked not available');
+    }
+  } catch {
+    const fallback = escapeHtml(markdownText);
+    html = fallback.replace(/\n/g, '<br/>');
+  }
+
+  if (typeof DOMPurify !== 'undefined' && typeof DOMPurify.sanitize === 'function') {
+    return DOMPurify.sanitize(html);
+  }
+
+  if (typeof console !== 'undefined') {
+    console.warn('[SafeMarkdown] DOMPurify is unavailable. Rendering escaped content as fallback.');
+  }
+  const safeFallback = escapeHtml(markdownText).replace(/\\n/g, '<br/>');
+  return safeFallback;
+}

package/public/viewer/tsconfig.viewer.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM"],
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noEmitOnError": false,
+    "outDir": "./js",
+    "rootDir": "./src",
+    "skipLibCheck": true,
+    "esModuleInterop": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}