@jungjaehoon/mama-os 0.1.1

package/public/viewer/js/modules/memory.js

@@ -0,0 +1,353 @@
+/**
+ * Memory Module - MAMA Memory Integration
+ * @module modules/memory
+ * @version 1.0.0
+ *
+ * Handles Memory tab functionality including:
+ * - Semantic search of MAMA decisions
+ * - Related decision suggestions for chat messages
+ * - Save decision form modal
+ */
+
+/* eslint-env browser */
+/* global lucide */
+
+import { escapeHtml, debounce, showToast } from '../utils/dom.js';
+import { formatRelativeTime, truncateText } from '../utils/format.js';
+import { API } from '../utils/api.js';
+
+/**
+ * Memory Module Class
+ */
+export class MemoryModule {
+  constructor() {
+    // State
+    this.searchData = [];
+    this.debouncedSearch = debounce(() => this.performSearch(), 300);
+
+    // Initialize event listeners
+    this.initEventListeners();
+  }
+
+  /**
+   * Initialize all event listeners
+   */
+  initEventListeners() {
+    // Modal click outside to close
+    document.addEventListener('click', (e) => {
+      const modal = document.getElementById('save-decision-modal');
+      if (modal && e.target === modal) {
+        this.hideSaveForm();
+      }
+    });
+
+    // Escape key to close modal
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        const modal = document.getElementById('save-decision-modal');
+        if (modal && modal.classList.contains('visible')) {
+          this.hideSaveForm();
+        }
+      }
+    });
+  }
+
+  /**
+   * Handle memory search input event
+   * @param {KeyboardEvent} event - Keyboard event
+   */
+  handleSearchInput(event) {
+    if (event.key === 'Enter') {
+      this.search();
+    } else {
+      this.debouncedSearch();
+    }
+  }
+
+  /**
+   * Perform search (internal, debounced)
+   */
+  async performSearch() {
+    const input = document.getElementById('memory-search-input');
+    const query = input.value.trim();
+
+    if (!query) {
+      this.showPlaceholder();
+      return;
+    }
+
+    await this.search();
+  }
+
+  /**
+   * Search memory decisions via API
+   */
+  async search() {
+    const input = document.getElementById('memory-search-input');
+    const query = input.value.trim();
+
+    if (!query) {
+      this.showPlaceholder();
+      return;
+    }
+
+    this.setStatus('Searching...', 'loading');
+
+    try {
+      const data = await API.searchMemory(query, 10);
+      this.searchData = data.results || [];
+      this.renderResults(this.searchData, query);
+      this.setStatus(`Found ${this.searchData.length} decision(s)`, '');
+    } catch (error) {
+      console.error('[Memory] Search error:', error);
+      this.setStatus(`Error: ${error.message}`, 'error');
+    }
+  }
+
+  /**
+   * Search for related decisions (called automatically for chat messages)
+   * @param {string} message - Chat message text
+   * @returns {Promise<Array>} Related decisions
+   */
+  async searchRelated(message) {
+    if (!message || message.length < 3) {
+      return [];
+    }
+
+    try {
+      const data = await API.searchMemory(message, 5);
+      return data.results || [];
+    } catch (error) {
+      console.error('[Memory] Related search error:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Show related decisions for a chat message
+   * @param {string} message - Chat message text
+   */
+  async showRelatedForMessage(message) {
+    const results = await this.searchRelated(message);
+
+    if (results.length > 0) {
+      this.searchData = results;
+
+      // Update search input with the query
+      const input = document.getElementById('memory-search-input');
+      input.value = message.substring(0, 50) + (message.length > 50 ? '...' : '');
+
+      // Render results
+      this.renderResults(results, message);
+      this.setStatus(`${results.length} related decision(s) found`, '');
+
+      // Show notification
+      showToast(`🧠 ${results.length} related MAMA decision(s) found`);
+    }
+  }
+
+  /**
+   * Render search results
+   * @param {Array} results - Search results
+   * @param {string} query - Search query
+   */
+  renderResults(results, query) {
+    const container = document.getElementById('memory-results');
+
+    if (!results || results.length === 0) {
+      container.innerHTML = `
+        <div class="memory-placeholder">
+          <p>No decisions found for "${escapeHtml(query)}"</p>
+          <p class="memory-hint">Try different keywords or check if you have saved decisions</p>
+        </div>
+      `;
+      return;
+    }
+
+    const html = results
+      .map(
+        (item, idx) => `
+        <div class="memory-card" onclick="window.memoryModule.toggleCard(${idx})">
+          <div class="memory-card-header">
+            <span class="memory-card-topic">${escapeHtml(item.topic || 'Unknown')}</span>
+            ${item.similarity ? `<span class="memory-card-score">${Math.round(item.similarity * 100)}%</span>` : ''}
+          </div>
+          <div class="memory-card-decision">${escapeHtml(truncateText(item.decision, 150))}</div>
+          <div class="memory-card-meta">
+            <span class="memory-card-outcome ${(item.outcome || 'pending').toLowerCase()}">${item.outcome || 'PENDING'}</span>
+            <span>${formatRelativeTime(item.created_at)}</span>
+          </div>
+          <div class="memory-card-reasoning">${escapeHtml(item.reasoning || 'No reasoning provided')}</div>
+        </div>
+      `
+      )
+      .join('');
+
+    container.innerHTML = html;
+  }
+
+  /**
+   * Toggle memory card expand/collapse
+   * @param {number} idx - Card index
+   */
+  toggleCard(idx) {
+    const cards = document.querySelectorAll('.memory-card');
+    cards.forEach((card, i) => {
+      if (i === idx) {
+        card.classList.toggle('expanded');
+      } else {
+        card.classList.remove('expanded');
+      }
+    });
+  }
+
+  /**
+   * Show memory placeholder
+   */
+  showPlaceholder() {
+    const container = document.getElementById('memory-results');
+    container.innerHTML = `
+      <div class="memory-placeholder">
+        <p><i data-lucide="brain"></i> Search your MAMA decisions</p>
+        <p class="memory-hint">Type a keyword or send a chat message to see related decisions</p>
+      </div>
+    `;
+    this.setStatus('', '');
+    // Reinitialize Lucide icons for dynamic content
+    if (typeof lucide !== 'undefined' && typeof window.lucideConfig !== 'undefined') {
+      lucide.createIcons(window.lucideConfig);
+    }
+  }
+
+  /**
+   * Set memory status message
+   * @param {string} message - Status message
+   * @param {string} type - Status type (loading, error, success, '')
+   */
+  setStatus(message, type) {
+    const status = document.getElementById('memory-status');
+    status.textContent = message;
+    status.className = 'memory-status ' + (type || '');
+  }
+
+  /**
+   * Show save decision form modal
+   */
+  showSaveForm() {
+    const modal = document.getElementById('save-decision-modal');
+    modal.classList.add('visible');
+
+    // Clear form
+    document.getElementById('save-topic').value = '';
+    document.getElementById('save-decision').value = '';
+    document.getElementById('save-reasoning').value = '';
+    document.getElementById('save-confidence').value = '0.8';
+    document.getElementById('save-form-status').textContent = '';
+    document.getElementById('save-form-status').className = 'save-form-status';
+
+    // Focus on topic field
+    setTimeout(() => {
+      document.getElementById('save-topic').focus();
+    }, 100);
+  }
+
+  /**
+   * Show save form with pre-filled text (for /save command)
+   */
+  showSaveFormWithText(text) {
+    const modal = document.getElementById('save-decision-modal');
+    modal.classList.add('visible');
+
+    // Pre-fill decision field
+    document.getElementById('save-topic').value = '';
+    document.getElementById('save-decision').value = text;
+    document.getElementById('save-reasoning').value = '';
+    document.getElementById('save-confidence').value = '0.8';
+    document.getElementById('save-form-status').textContent = '';
+    document.getElementById('save-form-status').className = 'save-form-status';
+
+    // Focus on topic field
+    setTimeout(() => {
+      document.getElementById('save-topic').focus();
+    }, 100);
+  }
+
+  /**
+   * Hide save decision form modal
+   */
+  hideSaveForm() {
+    const modal = document.getElementById('save-decision-modal');
+    modal.classList.remove('visible');
+  }
+
+  /**
+   * Execute search with query (for /search command)
+   */
+  async searchWithQuery(query) {
+    const searchInput = document.getElementById('memory-search');
+    if (searchInput) {
+      searchInput.value = query;
+    }
+    this.currentQuery = query;
+    await this.search();
+  }
+
+  /**
+   * Submit save decision form
+   */
+  async submitSaveForm() {
+    const topic = document.getElementById('save-topic').value.trim();
+    const decision = document.getElementById('save-decision').value.trim();
+    const reasoning = document.getElementById('save-reasoning').value.trim();
+    const confidence = parseFloat(document.getElementById('save-confidence').value);
+
+    const statusEl = document.getElementById('save-form-status');
+    const submitBtn = document.querySelector('.save-form-submit');
+
+    // Validation
+    if (!topic || !decision || !reasoning) {
+      statusEl.textContent = 'Please fill in all required fields';
+      statusEl.className = 'save-form-status error';
+      return;
+    }
+
+    if (isNaN(confidence) || confidence < 0 || confidence > 1) {
+      statusEl.textContent = 'Confidence must be between 0.0 and 1.0';
+      statusEl.className = 'save-form-status error';
+      return;
+    }
+
+    // Disable submit button
+    submitBtn.disabled = true;
+    statusEl.textContent = 'Saving...';
+    statusEl.className = 'save-form-status';
+
+    try {
+      await API.saveDecision({ topic, decision, reasoning, confidence });
+
+      // Success
+      statusEl.textContent = '✓ Decision saved successfully!';
+      statusEl.className = 'save-form-status success';
+
+      // Show toast notification
+      showToast('✓ Decision saved to MAMA memory');
+
+      // Close modal after 1.5 seconds
+      setTimeout(() => {
+        this.hideSaveForm();
+
+        // Refresh memory search if there's a query
+        const searchInput = document.getElementById('memory-search-input');
+        if (searchInput.value.trim()) {
+          this.search();
+        }
+      }, 1500);
+    } catch (error) {
+      console.error('[Memory] Save error:', error);
+      statusEl.textContent = `Error: ${error.message}`;
+      statusEl.className = 'save-form-status error';
+    } finally {
+      submitBtn.disabled = false;
+    }
+  }
+}

package/public/viewer/js/modules/settings.js

@@ -0,0 +1,255 @@
+/**
+ * Settings Module - MAMA OS Settings Management
+ * @module modules/settings
+ * @version 1.0.0
+ *
+ * Handles Settings tab functionality including:
+ * - Load current configuration
+ * - Save configuration changes
+ * - Form validation
+ * - Gateway enable/disable toggles
+ */
+
+/* eslint-env browser */
+
+import { showToast } from '../utils/dom.js';
+
+/**
+ * Settings Module Class
+ */
+export class SettingsModule {
+  constructor() {
+    this.config = null;
+    this.initialized = false;
+  }
+
+  /**
+   * Initialize settings module
+   */
+  async init() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+
+    await this.loadSettings();
+  }
+
+  /**
+   * Load current settings from API
+   */
+  async loadSettings() {
+    this.setStatus('Loading...');
+
+    try {
+      const response = await fetch('/api/config');
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      this.config = await response.json();
+      this.populateForm();
+      this.setStatus('');
+    } catch (error) {
+      console.error('[Settings] Load error:', error);
+      this.setStatus(`Error: ${error.message}`, 'error');
+    }
+  }
+
+  /**
+   * Populate form with current config values
+   */
+  populateForm() {
+    if (!this.config) {
+      return;
+    }
+
+    // Discord
+    this.setCheckbox('settings-discord-enabled', this.config.discord?.enabled);
+    this.setValue('settings-discord-token', this.config.discord?.token || '');
+    this.setValue('settings-discord-channel', this.config.discord?.default_channel_id || '');
+
+    // Slack
+    this.setCheckbox('settings-slack-enabled', this.config.slack?.enabled);
+    this.setValue('settings-slack-bot-token', this.config.slack?.bot_token || '');
+    this.setValue('settings-slack-app-token', this.config.slack?.app_token || '');
+
+    // Telegram
+    this.setCheckbox('settings-telegram-enabled', this.config.telegram?.enabled);
+    this.setValue('settings-telegram-token', this.config.telegram?.token || '');
+
+    // Chatwork
+    this.setCheckbox('settings-chatwork-enabled', this.config.chatwork?.enabled);
+    this.setValue('settings-chatwork-token', this.config.chatwork?.api_token || '');
+
+    // Heartbeat
+    this.setCheckbox('settings-heartbeat-enabled', this.config.heartbeat?.enabled);
+    this.setValue(
+      'settings-heartbeat-interval',
+      Math.round((this.config.heartbeat?.interval || 1800000) / 60000)
+    );
+    this.setValue('settings-heartbeat-quiet-start', this.config.heartbeat?.quiet_start ?? 23);
+    this.setValue('settings-heartbeat-quiet-end', this.config.heartbeat?.quiet_end ?? 8);
+
+    // Agent
+    this.setSelectValue(
+      'settings-agent-model',
+      this.config.agent?.model || 'claude-sonnet-4-20250514'
+    );
+    this.setValue('settings-agent-max-turns', this.config.agent?.max_turns || 10);
+    this.setValue(
+      'settings-agent-timeout',
+      Math.round((this.config.agent?.timeout || 300000) / 1000)
+    );
+  }
+
+  /**
+   * Save settings to API
+   */
+  async saveSettings() {
+    this.setStatus('Saving...');
+
+    try {
+      const updates = this.collectFormData();
+
+      const response = await fetch('/api/config', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updates),
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        throw new Error(result.message || `HTTP ${response.status}`);
+      }
+
+      this.setStatus('Saved!', 'success');
+      showToast('Settings saved successfully');
+
+      // Reload to get updated masked values
+      setTimeout(() => this.loadSettings(), 1500);
+    } catch (error) {
+      console.error('[Settings] Save error:', error);
+      this.setStatus(`Error: ${error.message}`, 'error');
+      showToast(`Failed to save: ${error.message}`);
+    }
+  }
+
+  /**
+   * Collect form data into config update object
+   */
+  collectFormData() {
+    return {
+      discord: {
+        enabled: this.getCheckbox('settings-discord-enabled'),
+        token: this.getValue('settings-discord-token'),
+        default_channel_id: this.getValue('settings-discord-channel'),
+      },
+      slack: {
+        enabled: this.getCheckbox('settings-slack-enabled'),
+        bot_token: this.getValue('settings-slack-bot-token'),
+        app_token: this.getValue('settings-slack-app-token'),
+      },
+      telegram: {
+        enabled: this.getCheckbox('settings-telegram-enabled'),
+        token: this.getValue('settings-telegram-token'),
+      },
+      chatwork: {
+        enabled: this.getCheckbox('settings-chatwork-enabled'),
+        api_token: this.getValue('settings-chatwork-token'),
+      },
+      heartbeat: {
+        enabled: this.getCheckbox('settings-heartbeat-enabled'),
+        interval: parseInt(this.getValue('settings-heartbeat-interval') || '30', 10) * 60000,
+        quiet_start: parseInt(this.getValue('settings-heartbeat-quiet-start') || '23', 10),
+        quiet_end: parseInt(this.getValue('settings-heartbeat-quiet-end') || '8', 10),
+      },
+      agent: {
+        model: this.getSelectValue('settings-agent-model'),
+        max_turns: parseInt(this.getValue('settings-agent-max-turns') || '10', 10),
+        timeout: parseInt(this.getValue('settings-agent-timeout') || '300', 10) * 1000,
+      },
+    };
+  }
+
+  /**
+   * Reset form to current saved values
+   */
+  resetForm() {
+    this.populateForm();
+    this.setStatus('Form reset');
+    setTimeout(() => this.setStatus(''), 2000);
+  }
+
+  /**
+   * Helper: Set checkbox value
+   */
+  setCheckbox(id, checked) {
+    const el = document.getElementById(id);
+    if (el) {
+      el.checked = !!checked;
+    }
+  }
+
+  /**
+   * Helper: Get checkbox value
+   */
+  getCheckbox(id) {
+    const el = document.getElementById(id);
+    return el ? el.checked : false;
+  }
+
+  /**
+   * Helper: Set input value
+   */
+  setValue(id, value) {
+    const el = document.getElementById(id);
+    if (el) {
+      el.value = value;
+    }
+  }
+
+  /**
+   * Helper: Get input value
+   */
+  getValue(id) {
+    const el = document.getElementById(id);
+    return el ? el.value : '';
+  }
+
+  /**
+   * Helper: Set select value
+   */
+  setSelectValue(id, value) {
+    const el = document.getElementById(id);
+    if (el) {
+      el.value = value;
+    }
+  }
+
+  /**
+   * Helper: Get select value
+   */
+  getSelectValue(id) {
+    const el = document.getElementById(id);
+    return el ? el.value : '';
+  }
+
+  /**
+   * Set status message
+   */
+  setStatus(message, type = '') {
+    const statusEl = document.getElementById('settings-status');
+    if (statusEl) {
+      statusEl.textContent = message;
+      statusEl.className = `text-sm ${
+        type === 'error'
+          ? 'text-red-500'
+          : type === 'success'
+            ? 'text-green-500'
+            : 'text-gray-500 dark:text-gray-400'
+      }`;
+    }
+  }
+}