@jungjaehoon/mama-os 0.9.0 → 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;
@@ -1361,7 +1362,7 @@ export class ChatModule {
         }
     }
     /**
-     * Restore chat history
+     * Restore chat history (optimized with DocumentFragment)
      */
     restoreHistory(sessionId) {
         const history = this.loadHistory(sessionId);
@@ -1374,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') {
@@ -1407,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');
@@ -1427,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();
@@ -1449,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
@@ -1737,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');
@@ -1758,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');
             }
@@ -1814,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/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

@@ -66,12 +66,6 @@ type CheckpointRecord = {
   summary: string;
 };
 
-// Reserved for future use - attachment message handling
-type _ChatMessageWithAttachment = {
-  id?: string;
-  [key: string]: unknown;
-};
-
 /**
  * Chat Module Class
  */
@@ -104,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;
@@ -1666,7 +1661,7 @@ export class ChatModule {
   }
 
   /**
-   * Restore chat history
+   * Restore chat history (optimized with DocumentFragment)
    */
   restoreHistory(sessionId: string): boolean {
     const history = this.loadHistory(sessionId);
@@ -1683,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}`;
 
@@ -1715,9 +1715,10 @@ export class ChatModule {
         `;
       }
 
-      container.appendChild(msgEl);
+      fragment.appendChild(msgEl);
     });
 
+    container.appendChild(fragment);
     scrollToBottom(container);
     showToast('Previous conversation restored');
 
@@ -1725,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');
@@ -1740,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}`;
 
@@ -1764,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');
   }
 
   /**
@@ -2088,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');
@@ -2109,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');
       }
@@ -2166,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/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;
 }

package/public/viewer/viewer.html

@@ -18,17 +18,29 @@
     <link rel="icon" type="image/svg+xml" href="/viewer/icons/mama-icon.svg" />
     <link rel="icon" type="image/png" sizes="192x192" href="/viewer/icons/icon-192.png" />
 
+    <!-- Preconnect to CDN origins -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://cdn.tailwindcss.com" />
+    <link rel="preconnect" href="https://unpkg.com" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+
+    <!-- Preload critical resources -->
+    <link rel="preload" href="https://cdn.tailwindcss.com" as="script" />
+    <link rel="preload" href="/viewer/viewer.css" as="style" />
+
+    <!-- Fonts with reduced weights -->
     <link
-      href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&family=Nunito:wght@400;600&display=swap"
       rel="stylesheet"
     />
 
-    <script src="https://unpkg.com/vis-network@9/dist/vis-network.min.js"></script>
-    <script src="https://unpkg.com/lucide@latest"></script>
-    <script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.5/purify.min.js"></script>
+    <!-- External libraries with defer -->
+    <script defer src="https://unpkg.com/vis-network@9/dist/vis-network.min.js"></script>
+    <script defer src="https://unpkg.com/lucide@0.460.0"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.5/purify.min.js"></script>
+    <!-- Tailwind must load synchronously -->
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
       tailwind.config = {
@@ -1002,7 +1014,7 @@
             <span id="chat-badge" class="hidden absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full border-2 border-white animate-pulse"></span>
           </button>
 
-          <div id="chat-panel" class="hidden absolute bottom-[4.5rem] right-0 w-[400px] h-[560px] bg-white rounded-2xl shadow-float border border-mama-lavender-dark flex flex-col overflow-hidden">
+          <div id="chat-panel" class="chat-panel-closed absolute bottom-[4.5rem] right-0 w-[400px] h-[560px] bg-white rounded-2xl shadow-float border border-mama-lavender-dark flex flex-col overflow-hidden">
             <!-- Header -->
             <div id="chat-header" class="h-12 bg-mama-yellow/20 flex items-center px-4 border-b border-mama-lavender-dark shrink-0">
               <svg class="w-5 h-5 text-mama-black mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -2059,9 +2071,8 @@
         document.documentElement.lang = userLang.split('-')[0];
 
         initTheme();
-        // Initialize floating chat (WebSocket + panel bindings)
+        // Initialize floating chat panel bindings (session init is lazy, on first open)
         chat.initFloating();
-        chat.initSession();
         // Default to dashboard tab
         switchTab('dashboard');
       });

package/templates/personas/sisyphus.md

@@ -94,6 +94,14 @@ CONTEXT:
 - Prior analysis: {sub-agent result summary or file path}
 ```
 
+**Discord note (delegation trigger):**
+
+- `DELEGATE::...` text is only parsed if the Discord gateway processes the message.
+- If the guild/channel is configured with `requireMention: true`, normal messages without an @mention are ignored.
+- Delegation commands are treated as explicit triggers: if any line starts with `DELEGATE::` / `DELEGATE_BG::`, it will still be processed (even without an @mention).
+- Including the bot mention (example: `<@BOT_ID> DELEGATE::developer::...`) is still OK and makes intent obvious.
+- For low-friction delegation, prefer a dedicated swarm channel with `requireMention: false`.
+
 #### Asynchronous Delegation (background — do not wait for result)
 
 Use when assigning **independent tasks** to another agent while continuing your own work: