Try to fix slowdown when rendering large amount of output

src/lib/components/MudTerminal.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-  import { activeOutputHistory, addToOutputHistory, addToInputHistory, navigateInputHistory, activeInputHistoryIndex, activeConnection, uiSettings, accessibilitySettings, activeInputHistory, activeProfileId, connectionStatus } from '$lib/stores/mudStore';
+  import { activeRenderableLines, addToOutputHistory, addToInputHistory, navigateInputHistory, activeInputHistoryIndex, activeConnection, uiSettings, accessibilitySettings, activeInputHistory, activeProfileId, connectionStatus } from '$lib/stores/mudStore';
   import { tick } from 'svelte';
-  import AnsiToHtml from 'ansi-to-html';
   import { AccessibilityManager } from '$lib/accessibility/AccessibilityManager';
 
   // Create safe defaults for reactivity
-  $: safeOutputHistory = $activeOutputHistory || [];
+  $: safeRenderableLines = $activeRenderableLines || [];
   $: safeActiveProfileId = $activeProfileId || null;
 
   // Create event dispatcher
@@ -22,79 +21,11 @@
   let inputElement: HTMLInputElement;
   let currentInput = '';
   let accessibilityManager: AccessibilityManager | null = null;
-  let ansiConverter = new AnsiToHtml({
-    fg: '#f8f8f2',
-    bg: '#282a36',
-    newline: false, // We'll handle newlines ourselves
-    escapeXML: true,
-    stream: false
-  });
   
   // Message navigation state
   let currentFocusedMessageIndex: number = -1;
   let messageElements: HTMLElement[] = [];
   
-  // Process ANSI color codes
-  function processAnsi(text: string): string {
-    if ($uiSettings.ansiColor) {
-      try {
-        // First process ANSI to HTML without replacing newlines
-        const ansiProcessed = ansiConverter.toHtml(text);
-        
-        // Then replace newlines with <br> tags
-        return ansiProcessed.replace(/\r\n|\r|\n/g, '<br>');
-      } catch (error) {
-        console.error('Error processing ANSI colors:', error);
-        // Fallback to just replacing newlines
-        return text.replace(/\r\n|\r|\n/g, '<br>');
-      }
-    } else {
-      // Strip ANSI codes if color is disabled
-      return text.replace(/\u001b\[\d+(;\d+)*m/g, '')
-                .replace(/\r\n|\r|\n/g, '<br>');
-    }
-  }
-  
-  // Split text into individual lines (for better screen reader navigation)
-  function splitIntoLines(text: string): string[] {
-    // First handle any text that already has <br> tags from ANSI processing
-    if (text.includes('<br>')) {
-      return text.split('<br>').filter(line => line.trim().length > 0);
-    }
-    
-    // Otherwise split by newlines
-    return text.split(/\r\n|\r|\n/).filter(line => line.trim().length > 0);
-  }
-  
-  // Apply highlighting to text
-  function applyHighlights(text: string, highlights: { pattern: string; color: string; isRegex: boolean }[]): string {
-    if (!highlights || highlights.length === 0) return text;
-    
-    let highlightedText = text;
-    
-    highlights.forEach(({ pattern, color, isRegex }) => {
-      if (isRegex) {
-        try {
-          const regex = new RegExp(pattern, 'g');
-          highlightedText = highlightedText.replace(regex, (match) => {
-            return `<span style="background-color: ${color};">${match}</span>`;
-          });
-        } catch (error) {
-          console.error('Invalid regex pattern:', pattern, error);
-        }
-      } else {
-        // Escape special characters in the pattern for use in a regex
-        const safePattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        const regex = new RegExp(safePattern, 'g');
-        highlightedText = highlightedText.replace(regex, (match) => {
-          return `<span style="background-color: ${color};">${match}</span>`;
-        });
-      }
-    });
-    
-    return highlightedText;
-  }
-  
   // Handle input submission
   async function handleSubmit(event: Event) {
     event.preventDefault();
@@ -288,22 +219,20 @@
     }
   }
   
-  // Watch output history and profile changes to update display
-  $: {
-    if (safeOutputHistory.length > 0) {
-      console.log('Active output history changed, updating terminal display');
+  // Watch for renderable lines changes to update display - optimized reactive statement
+  $: if (safeRenderableLines.length > 0) {
+    // Only scroll and update elements when new lines are added
+    // Use a microtask to batch DOM updates
+    Promise.resolve().then(() => {
       scrollToBottom();
-      // Update message elements when output history changes
-      setTimeout(updateMessageElements, 0);
-    }
+      updateMessageElements();
+    });
   }
   
-  $: {
-    // Every time the active profile changes, update the terminal content
-    if ($activeProfileId) {
-      console.log(`Active profile is now: ${$activeProfileId}, updating output display`);
-      updateOutputDisplay();
-    }
+  // Watch for active profile changes
+  $: if ($activeProfileId) {
+    console.log(`Active profile is now: ${$activeProfileId}, updating output display`);
+    updateOutputDisplay();
   }
   
   // Function to update the displayed output based on the active profile
@@ -359,47 +288,20 @@
        tabindex="0"
        on:keydown={handleOutputKeyDown}
        style="font-family: {$uiSettings.font}; font-size: {$accessibilitySettings.fontSize}px; line-height: {$accessibilitySettings.lineSpacing};">
-    {#each safeOutputHistory as item (item.id)}
-      <!-- For input lines, keep them as a single block -->
-      {#if item.isInput}
-        <div class="mud-terminal-line mud-input-line" tabindex="-1">
-          {#if $uiSettings.showTimestamps}
-            <span class="mud-timestamp" aria-hidden="true">[{formatTimestamp(item.timestamp)}]</span>
-          {/if}
-          <div class="mud-terminal-content">
-            {@html item.text}
-          </div>
-        </div>
-      <!-- For MUD output, split into individual navigable lines -->
-      {:else}
-        <!-- Process the content first -->
-        {@const processedContent = applyHighlights(processAnsi(item.text), item.highlights || [])}
-        {@const lines = splitIntoLines(processedContent)}
-        
-        <!-- If no lines or only one line, render as is -->
-        {#if lines.length <= 1}
-          <div class="mud-terminal-line" tabindex="-1">
-            {#if $uiSettings.showTimestamps}
-              <span class="mud-timestamp" aria-hidden="true">[{formatTimestamp(item.timestamp)}]</span>
-            {/if}
-            <div class="mud-terminal-content">
-              {@html processedContent}
-            </div>
-          </div>
-        <!-- Otherwise render each line separately for better navigation -->
-        {:else}
-          {#each lines as line, lineIndex}
-            <div class="mud-terminal-line mud-terminal-subline" tabindex="-1">
-              {#if $uiSettings.showTimestamps && lineIndex === 0}
-                <span class="mud-timestamp" aria-hidden="true">[{formatTimestamp(item.timestamp)}]</span>
-              {/if}
-              <div class="mud-terminal-content">
-                {@html line}
-              </div>
-            </div>
-          {/each}
+    
+    <!-- Optimized rendering using pre-processed lines -->
+    {#each safeRenderableLines as line (line.id)}
+      <div class="mud-terminal-line" 
+           class:mud-input-line={line.isInput} 
+           class:mud-terminal-subline={line.isSubline} 
+           tabindex="-1">
+        {#if $uiSettings.showTimestamps && line.lineIndex === 0}
+          <span class="mud-timestamp" aria-hidden="true">[{formatTimestamp(line.timestamp)}]</span>
         {/if}
-      {/if}
+        <div class="mud-terminal-content">
+          {@html line.content}
+        </div>
+      </div>
     {/each}
   </div>
   
@@ -593,16 +495,16 @@
     border-width: 0;
   }
   
-  .focused-message {
+  :global(.focused-message) {
     outline: 2px solid var(--color-primary, #2196f3);
     background-color: rgba(33, 150, 243, 0.1);
   }
   
-  .dark-mode .focused-message {
+  .dark-mode :global(.focused-message) {
     background-color: rgba(255, 121, 198, 0.2); /* Use a pink highlight for dark mode */
   }
   
-  .high-contrast .focused-message {
+  .high-contrast :global(.focused-message) {
     outline: 3px solid #fff;
     background-color: #444;
   }