@jungjaehoon/mama-os 0.9.1 → 0.9.2

package/public/viewer/js/modules/chat.js

@@ -43,6 +43,7 @@ export class ChatModule {
     history = [];
     historyPrefix = 'mama_chat_history_';
     maxHistoryMessages = 50;
+    maxDomMessages = 100; // Limit DOM elements for performance
     historyExpiryMs = 24 * 60 * 60 * 1000;
     checkpointCooldown = false;
     COOLDOWN_MS = 60 * 1000;
@@ -80,7 +81,10 @@ export class ChatModule {
         }
     }
     async autoCheckpoint() {
-        // Auto-checkpoint disabled - use /checkpoint command for manual saves
+        // DISABLED: Auto-checkpoint was saving raw conversation history to MAMA memory.
+        // Checkpoints should only be saved manually via /checkpoint command with proper summaries.
+        // The viewer chat uses localStorage for session persistence instead.
+        logger.info('Auto-checkpoint disabled (use /checkpoint for manual saves)');
         return;
     }
     // =============================================
@@ -1358,7 +1362,7 @@ export class ChatModule {
         }
     }
     /**
-     * Restore chat history
+     * Restore chat history (optimized with DocumentFragment)
      */
     restoreHistory(sessionId) {
         const history = this.loadHistory(sessionId);
@@ -1371,7 +1375,11 @@ export class ChatModule {
             return false;
         }
         this.removePlaceholder();
-        history.forEach((msg) => {
+        // Use DocumentFragment for batch DOM insertion
+        const fragment = document.createDocumentFragment();
+        // Limit to last N messages for DOM performance
+        const messagesToRender = history.slice(-this.maxDomMessages);
+        messagesToRender.forEach((msg) => {
             const msgEl = document.createElement('div');
             msgEl.className = `chat-message ${msg.role}`;
             if (msg.role === 'user') {
@@ -1404,14 +1412,15 @@ export class ChatModule {
           <div class="message-content">${escapeHtml(msg.content)}</div>
         `;
             }
-            container.appendChild(msgEl);
+            fragment.appendChild(msgEl);
         });
+        container.appendChild(fragment);
         scrollToBottom(container);
         showToast('Previous conversation restored');
         return true;
     }
     /**
-     * Display history received from server
+     * Display history received from server (optimized with DocumentFragment)
      */
     displayHistory(messages) {
         const container = getElementByIdOrNull('chat-messages');
@@ -1424,8 +1433,12 @@ export class ChatModule {
             return;
         }
         container.innerHTML = '';
-        this.history = [];
-        messages.forEach((msg) => {
+        this.history = messages;
+        // Use DocumentFragment for batch DOM insertion
+        const fragment = document.createDocumentFragment();
+        // Limit to last N messages for DOM performance
+        const messagesToRender = messages.slice(-this.maxDomMessages);
+        messagesToRender.forEach((msg) => {
             const msgEl = document.createElement('div');
             msgEl.className = `chat-message ${msg.role}`;
             const timestamp = msg.timestamp ? new Date(msg.timestamp) : new Date();
@@ -1446,10 +1459,11 @@ export class ChatModule {
           <div class="message-content">${escapeHtml(msg.content)}</div>
         `;
             }
-            container.appendChild(msgEl);
+            fragment.appendChild(msgEl);
         });
+        container.appendChild(fragment);
         scrollToBottom(container);
-        logger.info('Displayed', messages.length, 'history messages');
+        logger.info('Displayed', messagesToRender.length, 'history messages');
     }
     /**
      * Clear chat history
@@ -1734,10 +1748,15 @@ export class ChatModule {
         if (!panel) {
             return;
         }
-        const shouldOpen = forceState !== undefined ? forceState : panel.classList.contains('hidden');
+        const isClosed = panel.classList.contains('chat-panel-closed');
+        const shouldOpen = forceState !== undefined ? forceState : isClosed;
         if (shouldOpen) {
-            panel.classList.remove('hidden');
-            panel.classList.add('animate-slide-up');
+            // Lazy session init on first open
+            if (!this.ws) {
+                this.initSession();
+            }
+            panel.classList.remove('chat-panel-closed');
+            panel.classList.add('chat-panel-open', 'animate-slide-up');
             this.restorePanelState(panel);
             if (bubble) {
                 bubble.classList.add('scale-0');
@@ -1755,8 +1774,8 @@ export class ChatModule {
             }
         }
         else {
-            panel.classList.add('hidden');
-            panel.classList.remove('animate-slide-up');
+            panel.classList.add('chat-panel-closed');
+            panel.classList.remove('chat-panel-open', 'animate-slide-up');
             if (bubble) {
                 bubble.classList.remove('scale-0');
             }
@@ -1811,7 +1830,7 @@ export class ChatModule {
      */
     isFloatingOpen() {
         const panel = getElementByIdOrNull('chat-panel');
-        return Boolean(panel && !panel.classList.contains('hidden'));
+        return Boolean(panel && panel.classList.contains('chat-panel-open'));
     }
     /**
      * Show unread badge on bubble when panel is closed

package/public/viewer/js/modules/dashboard.js

@@ -72,68 +72,48 @@ export class DashboardModule {
     }
     /**
      * Load dashboard status from API
-     * Uses Promise.allSettled for parallel loading to improve performance
      */
     async loadStatus() {
         try {
-            // Load all data in parallel for better performance
-            const [dashboardResult, multiAgentResult, delegationsResult, cronResult, tokenResult, mcpResult,] = await Promise.allSettled([
-                API.get('/api/dashboard/status'),
-                API.get('/api/multi-agent/status'),
-                API.get('/api/multi-agent/delegations?limit=10'),
-                API.getCronJobs(),
-                Promise.all([API.getTokenSummary(), API.getTokensByAgent()]),
-                API.get('/api/mcp-servers'),
-            ]);
-            // Process dashboard status (required)
-            if (dashboardResult.status === 'fulfilled') {
-                this.data = dashboardResult.value;
+            this.data = await API.get('/api/dashboard/status');
+            // Load multi-agent status (Sprint 3 F2)
+            try {
+                this.multiAgentData = await API.get('/api/multi-agent/status');
             }
-            else {
-                throw dashboardResult.reason;
-            }
-            // Process multi-agent status
-            if (multiAgentResult.status === 'fulfilled') {
-                this.multiAgentData = multiAgentResult.value;
-            }
-            else {
-                logger.warn('[Dashboard] Multi-agent status unavailable:', multiAgentResult.reason);
+            catch (e) {
+                logger.warn('[Dashboard] Multi-agent status unavailable:', e);
                 this.multiAgentData = { enabled: false, agents: [] };
             }
-            // Process delegations
-            if (delegationsResult.status === 'fulfilled') {
-                this.delegationsData = delegationsResult.value;
+            // Load delegations (F4 endpoint)
+            try {
+                this.delegationsData = await API.get('/api/multi-agent/delegations?limit=10');
             }
-            else {
-                logger.warn('[Dashboard] Delegations unavailable:', delegationsResult.reason);
+            catch (e) {
+                logger.warn('[Dashboard] Delegations unavailable:', e);
                 this.delegationsData = { delegations: [], count: 0 };
             }
-            // Process cron jobs
-            if (cronResult.status === 'fulfilled') {
-                this.cronData = cronResult.value;
+            // Load cron jobs
+            try {
+                this.cronData = await API.getCronJobs();
             }
-            else {
-                logger.warn('[Dashboard] Cron data unavailable:', cronResult.reason);
+            catch (e) {
+                logger.warn('[Dashboard] Cron data unavailable:', e);
                 this.cronData = null;
             }
-            // Process token data
-            if (tokenResult.status === 'fulfilled') {
-                const [summary, byAgent] = tokenResult.value;
+            // Load token summary
+            try {
+                const [summary, byAgent] = await Promise.all([
+                    API.getTokenSummary(),
+                    API.getTokensByAgent(),
+                ]);
                 this.tokenData = { summary, byAgent };
             }
-            else {
-                logger.warn('[Dashboard] Token data unavailable:', tokenResult.reason);
+            catch (e) {
+                logger.warn('[Dashboard] Token data unavailable:', e);
                 this.tokenData = null;
             }
-            // Process MCP servers
-            if (mcpResult.status === 'fulfilled' && mcpResult.value && 'servers' in mcpResult.value) {
-                this.mcpServers = mcpResult.value.servers || [];
-                this.renderMCPServers();
-            }
-            else {
-                logger.warn('[Dashboard] MCP servers unavailable');
-                this.mcpServers = [];
-            }
+            // Load MCP servers
+            await this.loadMCPServers();
             this.render();
             this.setStatus(`Last updated: ${new Date().toLocaleTimeString()}`);
         }
@@ -142,6 +122,21 @@ export class DashboardModule {
             this.setStatus(`Error: ${getErrorMessage(error)}`, 'error');
         }
     }
+    /**
+     * Load MCP servers from API
+     */
+    async loadMCPServers() {
+        try {
+            const data = await API.get('/api/mcp-servers');
+            if (data && 'servers' in data) {
+                this.mcpServers = data.servers || [];
+                this.renderMCPServers();
+            }
+        }
+        catch (error) {
+            logger.error('Failed to load MCP servers:', error);
+        }
+    }
     /**
      * Render all dashboard sections
      */

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

@@ -97,15 +97,11 @@ export function showToast(message, duration = 3000) {
  * @param {HTMLElement} container - Container to scroll
  */
 export function scrollToBottom(container) {
-    // 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);
+    // Use requestAnimationFrame to batch layout read/write and avoid forced reflow
+    requestAnimationFrame(() => {
+        const scrollHeight = container.scrollHeight; // Single read
+        container.scrollTop = scrollHeight; // Single write
+    });
 }
 /**
  * Auto-resize textarea to fit content
@@ -113,10 +109,14 @@ export function scrollToBottom(container) {
  * @param {number} maxRows - Maximum number of rows (default: 5)
  */
 export function autoResizeTextarea(textarea, maxRows = 5) {
-    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';
+    // Use requestAnimationFrame to defer resize to the next frame, avoiding layout thrash from rapid input events
+    requestAnimationFrame(() => {
+        textarea.style.height = 'auto'; // Reset height before measuring
+        const computedLineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight); // Forces reflow (unavoidable)
+        const scrollHeight = textarea.scrollHeight;
+        const lineHeight = Number.isFinite(computedLineHeight) && computedLineHeight > 0 ? computedLineHeight : 20;
+        const maxHeight = lineHeight * maxRows;
+        const newHeight = Math.min(scrollHeight, maxHeight);
+        textarea.style.height = newHeight + 'px';
+    });
 }

package/public/viewer/src/modules/chat.ts

@@ -98,6 +98,7 @@ export class ChatModule {
   history: ChatHistoryMessage[] = [];
   historyPrefix = 'mama_chat_history_';
   maxHistoryMessages = 50;
+  maxDomMessages = 100; // Limit DOM elements for performance
   historyExpiryMs = 24 * 60 * 60 * 1000;
   checkpointCooldown = false;
   COOLDOWN_MS = 60 * 1000;
@@ -147,7 +148,10 @@ export class ChatModule {
   }
 
   async autoCheckpoint(): Promise<void> {
-    // Auto-checkpoint disabled - use /checkpoint command for manual saves
+    // DISABLED: Auto-checkpoint was saving raw conversation history to MAMA memory.
+    // Checkpoints should only be saved manually via /checkpoint command with proper summaries.
+    // The viewer chat uses localStorage for session persistence instead.
+    logger.info('Auto-checkpoint disabled (use /checkpoint for manual saves)');
     return;
   }
 
@@ -1657,7 +1661,7 @@ export class ChatModule {
   }
 
   /**
-   * Restore chat history
+   * Restore chat history (optimized with DocumentFragment)
    */
   restoreHistory(sessionId: string): boolean {
     const history = this.loadHistory(sessionId);
@@ -1674,7 +1678,12 @@ export class ChatModule {
 
     this.removePlaceholder();
 
-    history.forEach((msg) => {
+    // Use DocumentFragment for batch DOM insertion
+    const fragment = document.createDocumentFragment();
+    // Limit to last N messages for DOM performance
+    const messagesToRender = history.slice(-this.maxDomMessages);
+
+    messagesToRender.forEach((msg) => {
       const msgEl = document.createElement('div');
       msgEl.className = `chat-message ${msg.role}`;
 
@@ -1706,9 +1715,10 @@ export class ChatModule {
         `;
       }
 
-      container.appendChild(msgEl);
+      fragment.appendChild(msgEl);
     });
 
+    container.appendChild(fragment);
     scrollToBottom(container);
     showToast('Previous conversation restored');
 
@@ -1716,7 +1726,7 @@ export class ChatModule {
   }
 
   /**
-   * Display history received from server
+   * Display history received from server (optimized with DocumentFragment)
    */
   displayHistory(messages: ChatHistoryMessage[]): void {
     const container = getElementByIdOrNull<HTMLDivElement>('chat-messages');
@@ -1731,9 +1741,14 @@ export class ChatModule {
     }
 
     container.innerHTML = '';
-    this.history = [];
+    this.history = messages;
+
+    // Use DocumentFragment for batch DOM insertion
+    const fragment = document.createDocumentFragment();
+    // Limit to last N messages for DOM performance
+    const messagesToRender = messages.slice(-this.maxDomMessages);
 
-    messages.forEach((msg) => {
+    messagesToRender.forEach((msg) => {
       const msgEl = document.createElement('div');
       msgEl.className = `chat-message ${msg.role}`;
 
@@ -1755,11 +1770,12 @@ export class ChatModule {
         `;
       }
 
-      container.appendChild(msgEl);
+      fragment.appendChild(msgEl);
     });
 
+    container.appendChild(fragment);
     scrollToBottom(container);
-    logger.info('Displayed', messages.length, 'history messages');
+    logger.info('Displayed', messagesToRender.length, 'history messages');
   }
 
   /**
@@ -2079,11 +2095,16 @@ export class ChatModule {
       return;
     }
 
-    const shouldOpen = forceState !== undefined ? forceState : panel.classList.contains('hidden');
+    const isClosed = panel.classList.contains('chat-panel-closed');
+    const shouldOpen = forceState !== undefined ? forceState : isClosed;
 
     if (shouldOpen) {
-      panel.classList.remove('hidden');
-      panel.classList.add('animate-slide-up');
+      // Lazy session init on first open
+      if (!this.ws) {
+        this.initSession();
+      }
+      panel.classList.remove('chat-panel-closed');
+      panel.classList.add('chat-panel-open', 'animate-slide-up');
       this.restorePanelState(panel);
       if (bubble) {
         bubble.classList.add('scale-0');
@@ -2100,8 +2121,8 @@ export class ChatModule {
         messages.scrollTop = messages.scrollHeight;
       }
     } else {
-      panel.classList.add('hidden');
-      panel.classList.remove('animate-slide-up');
+      panel.classList.add('chat-panel-closed');
+      panel.classList.remove('chat-panel-open', 'animate-slide-up');
       if (bubble) {
         bubble.classList.remove('scale-0');
       }
@@ -2157,7 +2178,7 @@ export class ChatModule {
    */
   isFloatingOpen(): boolean {
     const panel = getElementByIdOrNull<HTMLDivElement>('chat-panel');
-    return Boolean(panel && !panel.classList.contains('hidden'));
+    return Boolean(panel && panel.classList.contains('chat-panel-open'));
   }
 
   /**

package/public/viewer/src/modules/dashboard.ts

@@ -177,75 +177,51 @@ export class DashboardModule {
 
   /**
    * Load dashboard status from API
-   * Uses Promise.allSettled for parallel loading to improve performance
    */
   async loadStatus(): Promise<void> {
     try {
-      // Load all data in parallel for better performance
-      const [
-        dashboardResult,
-        multiAgentResult,
-        delegationsResult,
-        cronResult,
-        tokenResult,
-        mcpResult,
-      ] = await Promise.allSettled([
-        API.get<DashboardData>('/api/dashboard/status'),
-        API.get<MultiAgentDashboardStatus>('/api/multi-agent/status'),
-        API.get<DashboardDelegationsData>('/api/multi-agent/delegations?limit=10'),
-        API.getCronJobs(),
-        Promise.all([API.getTokenSummary(), API.getTokensByAgent()]),
-        API.get<McpServersResponse>('/api/mcp-servers'),
-      ]);
-
-      // Process dashboard status (required)
-      if (dashboardResult.status === 'fulfilled') {
-        this.data = dashboardResult.value;
-      } else {
-        throw dashboardResult.reason;
-      }
+      this.data = await API.get<DashboardData>('/api/dashboard/status');
 
-      // Process multi-agent status
-      if (multiAgentResult.status === 'fulfilled') {
-        this.multiAgentData = multiAgentResult.value;
-      } else {
-        logger.warn('[Dashboard] Multi-agent status unavailable:', multiAgentResult.reason);
+      // Load multi-agent status (Sprint 3 F2)
+      try {
+        this.multiAgentData = await API.get<MultiAgentDashboardStatus>('/api/multi-agent/status');
+      } catch (e) {
+        logger.warn('[Dashboard] Multi-agent status unavailable:', e);
         this.multiAgentData = { enabled: false, agents: [] };
       }
 
-      // Process delegations
-      if (delegationsResult.status === 'fulfilled') {
-        this.delegationsData = delegationsResult.value;
-      } else {
-        logger.warn('[Dashboard] Delegations unavailable:', delegationsResult.reason);
+      // Load delegations (F4 endpoint)
+      try {
+        this.delegationsData = await API.get<DashboardDelegationsData>(
+          '/api/multi-agent/delegations?limit=10'
+        );
+      } catch (e) {
+        logger.warn('[Dashboard] Delegations unavailable:', e);
         this.delegationsData = { delegations: [], count: 0 };
       }
 
-      // Process cron jobs
-      if (cronResult.status === 'fulfilled') {
-        this.cronData = cronResult.value;
-      } else {
-        logger.warn('[Dashboard] Cron data unavailable:', cronResult.reason);
+      // Load cron jobs
+      try {
+        this.cronData = await API.getCronJobs();
+      } catch (e) {
+        logger.warn('[Dashboard] Cron data unavailable:', e);
         this.cronData = null;
       }
 
-      // Process token data
-      if (tokenResult.status === 'fulfilled') {
-        const [summary, byAgent] = tokenResult.value;
+      // Load token summary
+      try {
+        const [summary, byAgent] = await Promise.all([
+          API.getTokenSummary(),
+          API.getTokensByAgent(),
+        ]);
         this.tokenData = { summary, byAgent };
-      } else {
-        logger.warn('[Dashboard] Token data unavailable:', tokenResult.reason);
+      } catch (e) {
+        logger.warn('[Dashboard] Token data unavailable:', e);
         this.tokenData = null;
       }
 
-      // Process MCP servers
-      if (mcpResult.status === 'fulfilled' && mcpResult.value && 'servers' in mcpResult.value) {
-        this.mcpServers = mcpResult.value.servers || [];
-        this.renderMCPServers();
-      } else {
-        logger.warn('[Dashboard] MCP servers unavailable');
-        this.mcpServers = [];
-      }
+      // Load MCP servers
+      await this.loadMCPServers();
 
       this.render();
       this.setStatus(`Last updated: ${new Date().toLocaleTimeString()}`);
@@ -255,6 +231,21 @@ export class DashboardModule {
     }
   }
 
+  /**
+   * Load MCP servers from API
+   */
+  async loadMCPServers(): Promise<void> {
+    try {
+      const data = await API.get<McpServersResponse>('/api/mcp-servers');
+      if (data && 'servers' in data) {
+        this.mcpServers = data.servers || [];
+        this.renderMCPServers();
+      }
+    } catch (error) {
+      logger.error('Failed to load MCP servers:', error);
+    }
+  }
+
   /**
    * Render all dashboard sections
    */

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

@@ -111,15 +111,11 @@ export function showToast(message: string, duration = 3000): void {
  * @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);
+  // Use requestAnimationFrame to batch layout read/write and avoid forced reflow
+  requestAnimationFrame(() => {
+    const scrollHeight = container.scrollHeight; // Single read
+    container.scrollTop = scrollHeight; // Single write
+  });
 }
 
 /**
@@ -128,11 +124,15 @@ export function scrollToBottom(container: HTMLElement): void {
  * @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';
+  // Use requestAnimationFrame to defer resize to the next frame, avoiding layout thrash from rapid input events
+  requestAnimationFrame(() => {
+    textarea.style.height = 'auto'; // Reset height before measuring
+    const computedLineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight); // Forces reflow (unavoidable)
+    const scrollHeight = textarea.scrollHeight;
+    const lineHeight =
+      Number.isFinite(computedLineHeight) && computedLineHeight > 0 ? computedLineHeight : 20;
+    const maxHeight = lineHeight * maxRows;
+    const newHeight = Math.min(scrollHeight, maxHeight);
+    textarea.style.height = newHeight + 'px';
+  });
 }

package/public/viewer/viewer.css

@@ -4,6 +4,25 @@
    Typography: Fredoka (display) + Nunito (body)
    ============================================================================ */
 
+/* ============================================================================
+   CRITICAL CSS - Prevent CLS before Tailwind loads
+   ============================================================================ */
+
+header {
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+}
+
+main {
+  min-height: calc(100vh - 56px);
+}
+
+[data-tab] {
+  min-width: 80px;
+  min-height: 36px;
+}
+
 /* ============================================================================
    ANIMATIONS
    ============================================================================ */
@@ -68,6 +87,19 @@
   min-height: 320px;
   max-width: 96vw;
   max-height: 85vh;
+  /* GPU compositing for smooth toggle */
+  transform: translateZ(0);
+  will-change: opacity;
+}
+
+#chat-panel.chat-panel-closed {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#chat-panel.chat-panel-open {
+  opacity: 1;
+  pointer-events: auto;
 }
 .chat-panel-draggable {
   position: fixed !important;
@@ -461,6 +493,7 @@
 /* Tab visibility */
 .tab-content {
   display: none;
+  content-visibility: hidden;
 }
 .tab-content.active {
   display: flex;
@@ -468,6 +501,12 @@
   flex: 1;
   height: 100%;
   min-height: 0;
+  content-visibility: visible;
+}
+/* Memory tab needs visible content-visibility for checkpoint details elements */
+#tab-memory,
+#tab-memory.active {
+  content-visibility: visible;
 }
 
 /* Modal visibility */
@@ -634,8 +673,12 @@
   background: #FFCE00;
 }
 
-/* Firefox scrollbar */
-* {
+/* Firefox scrollbar - scoped to scrollable containers */
+body,
+.tab-content,
+#chat-messages,
+.overflow-y-auto,
+.overflow-auto {
   scrollbar-width: thin;
   scrollbar-color: #D4C4E0 transparent;
 }