@jungjaehoon/mama-os 0.8.3 → 0.9.0

package/public/viewer/js/utils/format.js

@@ -3,119 +3,119 @@
  * @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 = {
-  'claude-sonnet-4-20250514': 'Claude 4 Sonnet',
-  'claude-opus-4-20250514': 'Claude 4 Opus',
-  'claude-opus-4-5-20251101': 'Claude 4.5 Opus',
-  'claude-3-5-sonnet-20241022': 'Claude 3.5 Sonnet',
-  'claude-3-opus-20240229': 'Claude 3 Opus',
-  'claude-3-sonnet-20240229': 'Claude 3 Sonnet',
-  'claude-3-haiku-20240307': 'Claude 3 Haiku',
+    // 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) {
-  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;
+    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) {
-  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    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) {
-  const date = new Date(timestamp);
-  const now = new Date();
-  const diff = now - date;
-
-  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' })
-  );
+    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) {
-  if (!timestamp) {
-    return '';
-  }
-
-  const date = new Date(timestamp);
-  const now = new Date();
-  const diff = now - date;
-
-  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();
+    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
@@ -123,141 +123,103 @@ export function formatRelativeTime(timestamp) {
  * @returns {string} Truncated text
  */
 export function truncateText(text, maxLength) {
-  if (!text) {
-    return '';
-  }
-  if (text.length <= maxLength) {
-    return text;
-  }
-  return text.substring(0, maxLength) + '...';
+    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) {
-  if (!text) {
-    return 'No summary';
-  }
-  const lines = text.split('\n').filter((l) => l.trim() && !l.startsWith('**'));
-  return lines[0] || text.substring(0, 100);
+    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) {
-  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) => {
-    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" data-choice="${upperLetter}" onclick="window.sendQuizChoice('${upperLetter}')">${upperLetter}) ${text.trim()}</button>`;
+    if (!text) {
+        return '';
     }
-  );
-
-  // 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;
+    // 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) => {
+        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) {
-  const div = document.createElement('div');
-  div.textContent = text;
-  return div.innerHTML;
+    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
@@ -265,11 +227,10 @@ function escapeHtmlForMarkdown(text) {
  * @returns {string} Decoded plain text
  */
 function decodeHtmlEntities(text) {
-  const div = document.createElement('div');
-  div.innerHTML = text;
-  return div.textContent || div.innerText || '';
+    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.
@@ -277,37 +238,30 @@ function decodeHtmlEntities(text) {
  * @returns {string} Text with collapsible sections
  */
 function wrapCheckpointSections(text) {
-  // 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);
+    // 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/js/utils/markdown.js

@@ -0,0 +1,40 @@
+/**
+ * Safe markdown rendering utilities.
+ */
+/* eslint-env browser */
+import { escapeHtml } from './dom.js';
+const MARKDOWN_PARSE_OPTIONS = {};
+/**
+ * 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) {
+    if (!markdown) {
+        return '';
+    }
+    const markdownText = String(markdown);
+    let html;
+    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;
+}