@jungjaehoon/mama-os 0.1.1

package/public/viewer/js/utils/api.js

@@ -0,0 +1,169 @@
+/**
+ * API Utility Functions
+ * @module utils/api
+ * @version 1.0.0
+ */
+
+/* eslint-env browser */
+
+/**
+ * API client for MAMA viewer
+ */
+export class API {
+  /**
+   * Base URL for API requests (empty for same origin)
+   */
+  static baseUrl = '';
+
+  /**
+   * Perform GET request
+   * @param {string} endpoint - API endpoint
+   * @param {Object} params - Query parameters
+   * @returns {Promise<Object>} Response data
+   */
+  static async get(endpoint, params = null) {
+    const url = new URL(endpoint, window.location.origin);
+    if (params) {
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== null && value !== undefined) {
+          url.searchParams.set(key, value);
+        }
+      });
+    }
+
+    const response = await fetch(url);
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.message || `HTTP ${response.status}`);
+    }
+
+    return response.json();
+  }
+
+  /**
+   * Perform POST request
+   * @param {string} endpoint - API endpoint
+   * @param {Object} body - Request body
+   * @returns {Promise<Object>} Response data
+   */
+  static async post(endpoint, body) {
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.message || `HTTP ${response.status}`);
+    }
+
+    return response.json();
+  }
+
+  // =============================================
+  // Graph API
+  // =============================================
+
+  /**
+   * Get graph data
+   * @param {Object} params - Query parameters
+   * @returns {Promise<Object>} Graph data
+   */
+  static async getGraph(params = {}) {
+    // cluster: false by default to avoid slow embedding calculations
+    return this.get('/graph', { cluster: 'false', ...params });
+  }
+
+  /**
+   * Get similar decisions for a node
+   * @param {string} nodeId - Node ID
+   * @returns {Promise<Object>} Similar decisions
+   */
+  static async getSimilarDecisions(nodeId) {
+    return this.get('/graph/similar', { id: nodeId });
+  }
+
+  /**
+   * Update decision outcome
+   * @param {string} id - Decision ID
+   * @param {string} outcome - Outcome value
+   * @param {string} reason - Optional reason
+   * @returns {Promise<Object>} Update result
+   */
+  static async updateOutcome(id, outcome, reason = null) {
+    return this.post('/graph/update', { id, outcome, reason });
+  }
+
+  // =============================================
+  // Checkpoint API
+  // =============================================
+
+  /**
+   * Get all checkpoints
+   * @returns {Promise<Object>} Checkpoints data
+   */
+  static async getCheckpoints() {
+    return this.get('/checkpoints');
+  }
+
+  // =============================================
+  // MAMA Memory API
+  // =============================================
+
+  /**
+   * Search MAMA decisions
+   * @param {string} query - Search query
+   * @param {number} limit - Maximum results
+   * @returns {Promise<Object>} Search results
+   */
+  static async searchMemory(query, limit = 10) {
+    return this.get('/api/mama/search', { q: query, limit });
+  }
+
+  /**
+   * Save a new decision to MAMA
+   * @param {Object} data - Decision data
+   * @param {string} data.topic - Decision topic
+   * @param {string} data.decision - Decision text
+   * @param {string} data.reasoning - Reasoning text
+   * @param {number} data.confidence - Confidence (0-1)
+   * @returns {Promise<Object>} Save result
+   */
+  static async saveDecision(data) {
+    return this.post('/api/mama/save', data);
+  }
+
+  // =============================================
+  // Session API
+  // =============================================
+
+  /**
+   * Create a new chat session
+   * @param {string} projectDir - Project directory
+   * @returns {Promise<Object>} Session data
+   */
+  static async createSession(projectDir = '.') {
+    return this.post('/api/sessions', { projectDir });
+  }
+
+  /**
+   * Get the last active session
+   * @returns {Promise<Object|null>} Last active session or null
+   */
+  static async getLastActiveSession() {
+    try {
+      return await this.get('/api/sessions/last-active');
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Get all active sessions
+   * @returns {Promise<Object>} Sessions list
+   */
+  static async getSessions() {
+    return this.get('/api/sessions');
+  }
+}

package/public/viewer/js/utils/dom.js

@@ -0,0 +1,92 @@
+/**
+ * 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) {
+  if (!text) {
+    return '';
+  }
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Debounce function calls
+ * @param {Function} func - Function to debounce
+ * @param {number} wait - Wait time in milliseconds
+ * @returns {Function} Debounced function
+ */
+export function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    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, duration = 3000) {
+  // 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) {
+  // Use setTimeout to ensure DOM has updated before scrolling
+  setTimeout(() => {
+    container.scrollTop = container.scrollHeight;
+  }, 50);
+}
+
+/**
+ * Auto-resize textarea to fit content
+ * @param {HTMLTextAreaElement} textarea - Textarea element
+ * @param {number} maxRows - Maximum number of rows (default: 5)
+ */
+export function autoResizeTextarea(textarea, maxRows = 5) {
+  textarea.style.height = 'auto';
+  const lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
+  const maxHeight = lineHeight * maxRows;
+  const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+  textarea.style.height = newHeight + 'px';
+}

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

@@ -0,0 +1,192 @@
+/**
+ * Formatting Utility Functions
+ * @module utils/format
+ * @version 1.0.0
+ */
+
+/* eslint-env browser */
+
+/**
+ * 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' });
+}
+
+/**
+ * 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' })
+  );
+}
+
+/**
+ * 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();
+}
+
+/**
+ * Truncate text with ellipsis
+ * @param {string} text - Text to truncate
+ * @param {number} maxLength - Maximum length
+ * @returns {string} Truncated text
+ */
+export function truncateText(text, 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);
+}
+
+/**
+ * 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);
+
+  // 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)
+  formatted = formatted.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>');
+
+  // Links: [text](url)
+  formatted = formatted.replace(
+    /\[([^\]]+)\]\(([^)]+)\)/g,
+    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+  );
+
+  // Auto-detect URLs (not already in anchor tags)
+  formatted = formatted.replace(
+    /(?<!href="|>)(https?:\/\/[^\s<]+)/g,
+    '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
+  );
+
+  // 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>`;
+    }
+  );
+
+  // 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;
+}

package/public/viewer/manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "MAMA Mobile",
+  "short_name": "MAMA",
+  "description": "Mobile interface for MAMA - Memory-Augmented MCP Assistant",
+  "start_url": "/viewer",
+  "display": "standalone",
+  "background_color": "#1a1a2e",
+  "theme_color": "#1a1a2e",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/viewer/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/viewer/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["productivity", "developer tools"],
+  "lang": "ko"
+}

package/public/viewer/sw.js

@@ -0,0 +1,131 @@
+/**
+ * @fileoverview Service Worker for MAMA Mobile PWA
+ * @version 1.5.0
+ *
+ * Provides offline caching for static assets using cache-first strategy.
+ */
+
+/* eslint-env serviceworker */
+
+const CACHE_NAME = 'mama-mobile-v1.5.1';
+const STATIC_ASSETS = [
+  '/viewer',
+  '/viewer/viewer.css',
+  '/viewer/viewer.js',
+  '/viewer/manifest.json',
+  '/viewer/js/modules/graph.js',
+  '/viewer/js/modules/chat.js',
+  '/viewer/js/modules/memory.js',
+  '/viewer/js/utils/dom.js',
+  '/viewer/js/utils/format.js',
+  '/viewer/js/utils/api.js',
+  '/viewer/icons/icon-192.png',
+  '/viewer/icons/icon-512.png',
+];
+
+/**
+ * Install event - cache static assets
+ */
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log('[SW] Caching static assets (graceful)');
+      // Graceful caching - 실패해도 계속 진행
+      return Promise.allSettled(
+        STATIC_ASSETS.map((url) =>
+          fetch(url)
+            .then((res) => {
+              if (res.ok) {
+                return cache.put(url, res);
+              }
+              console.warn('[SW] Failed to cache:', url, res.status);
+              return null;
+            })
+            .catch((err) => {
+              console.warn('[SW] Cache fetch error:', url, err.message);
+              return null;
+            })
+        )
+      );
+    })
+  );
+  // Activate immediately
+  self.skipWaiting();
+});
+
+/**
+ * Activate event - clean up old caches
+ */
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames
+          .filter((name) => name !== CACHE_NAME)
+          .map((name) => {
+            console.log('[SW] Deleting old cache:', name);
+            return caches.delete(name);
+          })
+      );
+    })
+  );
+  // Take control of all pages immediately
+  self.clients.claim();
+});
+
+/**
+ * Fetch event - cache-first strategy for static assets
+ */
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Only handle GET requests
+  if (request.method !== 'GET') {
+    return;
+  }
+
+  // Skip WebSocket and API requests
+  if (url.pathname.startsWith('/ws') || url.pathname.startsWith('/api/')) {
+    return;
+  }
+
+  // Cache-first for static assets
+  if (STATIC_ASSETS.some((asset) => url.pathname.startsWith(asset.split('?')[0]))) {
+    event.respondWith(
+      caches.match(request).then((cachedResponse) => {
+        if (cachedResponse) {
+          return cachedResponse;
+        }
+        return fetch(request).then((response) => {
+          // Cache successful responses
+          if (response.ok) {
+            const responseClone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => {
+              cache.put(request, responseClone);
+            });
+          }
+          return response;
+        });
+      })
+    );
+    return;
+  }
+
+  // Network-first for everything else
+  event.respondWith(
+    fetch(request).catch(() => {
+      // Return offline fallback if available
+      return caches.match('/viewer');
+    })
+  );
+});
+
+/**
+ * Message event - handle skip waiting message
+ */
+self.addEventListener('message', (event) => {
+  if (event.data === 'skipWaiting') {
+    self.skipWaiting();
+  }
+});