Fix MDI

src/lib/components/MudTerminal.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-  import { activeOutputHistory, addToOutputHistory, addToInputHistory, navigateInputHistory, activeInputHistoryIndex, activeConnection, uiSettings, accessibilitySettings, activeInputHistory } from '$lib/stores/mudStore';
+  import { activeOutputHistory, 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 || [];
+  $: safeActiveProfileId = $activeProfileId || null;
+
   // Create event dispatcher
   const dispatch = createEventDispatcher();
   
@@ -92,7 +96,7 @@
   }
   
   // Handle input submission
-  function handleSubmit(event: Event) {
+  async function handleSubmit(event: Event) {
     event.preventDefault();
     
     if (!currentInput.trim()) return;
@@ -112,17 +116,35 @@
     } else {
       addToOutputHistory(`> ********`, true);
     }
+
+    // Get the currently active profile id
+    const profileId = $activeProfileId;
     
     // Send the command if connected
-    if ($activeConnection) {
-      try {
-        $activeConnection.send(currentInput);
-      } catch (error) {
-        console.error('Error sending command:', error);
-        addToOutputHistory(`Error sending command: ${error}`, false, [{ pattern: 'Error', color: '#ff5555', isRegex: false }]);
+    if (profileId) {
+      // Get connection status for this profile
+      const status = $connectionStatus[profileId];
+      
+      if (status === 'connected') {
+        try {
+          // Try using the activeConnection first
+          if ($activeConnection) {
+            $activeConnection.send(currentInput);
+          } else {
+            // If not available, use the ConnectionManager directly
+            const { ConnectionManager } = await import('$lib/connection/ConnectionManager');
+            const connectionManager = ConnectionManager.getInstance();
+            connectionManager.send(profileId, currentInput);
+          }
+        } catch (error) {
+          console.error('Error sending command:', error);
+          addToOutputHistory(`Error sending command: ${error}`, false, [{ pattern: 'Error', color: '#ff5555', isRegex: false }]);
+        }
+      } else {
+        addToOutputHistory(`Not connected to any MUD server. Status: ${status || 'disconnected'}`, false, [{ pattern: 'Not connected', color: '#ff5555', isRegex: false }]);
       }
     } else {
-      addToOutputHistory('Not connected to any MUD server.', false, [{ pattern: 'Not connected', color: '#ff5555', isRegex: false }]);
+      addToOutputHistory('No profile selected.', false, [{ pattern: 'No profile', color: '#ff5555', isRegex: false }]);
     }
     
     // Clear the input
@@ -266,16 +288,35 @@
     }
   }
   
-  // Watch output history changes to scroll to bottom
+  // Watch output history and profile changes to update display
   $: {
-    if ($activeOutputHistory) {
+    if (safeOutputHistory.length > 0) {
+      console.log('Active output history changed, updating terminal display');
       scrollToBottom();
       // Update message elements when output history changes
       setTimeout(updateMessageElements, 0);
     }
   }
   
+  $: {
+    // Every time the active profile changes, update the terminal content
+    if ($activeProfileId) {
+      console.log(`Active profile is now: ${$activeProfileId}, updating output display`);
+      updateOutputDisplay();
+    }
+  }
+  
+  // Function to update the displayed output based on the active profile
+  async function updateOutputDisplay() {
+    console.log('Updating output display...');
+    await tick(); // Wait for Svelte to update
+    scrollToBottom();
+    updateMessageElements();
+  }
+  
   onMount(() => {
+    console.log('MudTerminal component mounted for profile:', $activeProfileId);
+    
     // Initialize accessibility manager
     accessibilityManager = new AccessibilityManager();
     
@@ -318,7 +359,7 @@
        tabindex="0"
        on:keydown={handleOutputKeyDown}
        style="font-family: {$uiSettings.font}; font-size: {$accessibilitySettings.fontSize}px; line-height: {$accessibilitySettings.lineSpacing};">
-    {#each $activeOutputHistory as item (item.id)}
+    {#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">