Start fixing MDI

src/lib/components/MudTerminal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-  import { outputHistory, addToOutputHistory, addToInputHistory, navigateInputHistory, inputHistoryIndex, activeConnection, uiSettings, accessibilitySettings, inputHistory } from '$lib/stores/mudStore';
+  import { activeOutputHistory, addToOutputHistory, addToInputHistory, navigateInputHistory, activeInputHistoryIndex, activeConnection, uiSettings, accessibilitySettings, activeInputHistory } from '$lib/stores/mudStore';
   import { tick } from 'svelte';
   import AnsiToHtml from 'ansi-to-html';
   import { AccessibilityManager } from '$lib/accessibility/AccessibilityManager';
@@ -106,7 +106,7 @@
     addToInputHistory(currentInput);
     
     // Show the command in the output (only if not password - for privacy)
-    const isPassword = currentInput.startsWith('password') || currentInput.toLowerCase() === $inputHistory[$inputHistory.length - 2]?.toLowerCase().replace('username', 'password');
+    const isPassword = currentInput.startsWith('password') || currentInput.toLowerCase() === $activeInputHistory[$activeInputHistory.length - 2]?.toLowerCase().replace('username', 'password');
     if (!isPassword) {
       addToOutputHistory(`> ${currentInput}`, true);
     } else {
@@ -146,7 +146,8 @@
     } else if (event.key === 'Escape') {
       event.preventDefault();
       currentInput = '';
-      inputHistoryIndex.set(-1);
+      // No need to directly set inputHistoryIndex since we have per-profile indexes now
+      // This is handled in navigateInputHistory
     }
   }
   
@@ -267,7 +268,7 @@
   
   // Watch output history changes to scroll to bottom
   $: {
-    if ($outputHistory) {
+    if ($activeOutputHistory) {
       scrollToBottom();
       // Update message elements when output history changes
       setTimeout(updateMessageElements, 0);
@@ -317,7 +318,7 @@
        tabindex="0"
        on:keydown={handleOutputKeyDown}
        style="font-family: {$uiSettings.font}; font-size: {$accessibilitySettings.fontSize}px; line-height: {$accessibilitySettings.lineSpacing};">
-    {#each $outputHistory as item (item.id)}
+    {#each $activeOutputHistory 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">

src/lib/components/ProfileEditor.svelte

@@ -8,17 +8,48 @@
   export let profile: MudProfile;
   export let isNewProfile = false;
   
-  // Local state
-  let localProfile = { ...profile };
-  let autoLogin = { ...localProfile.autoLogin || { enabled: false, username: '', password: '', commands: [] } };
+  // Initialize with defaults first, then merge with provided profile
+  let defaultProfile = {
+    id: isNewProfile ? `profile-${Date.now()}-${Math.random().toString(36).substring(2, 9)}` : (profile?.id || ''),
+    name: 'New Profile',
+    host: 'mud.example.com',
+    port: 23,
+    useSSL: false,
+    ansiColor: true,
+    autoLogin: { 
+      enabled: false, 
+      username: '', 
+      password: '', 
+      commands: [] 
+    },
+    accessibilityOptions: {
+      textToSpeech: false,
+      highContrast: false,
+      speechRate: 1,
+      speechPitch: 1,
+      speechVolume: 1
+    },
+    font: 'monospace',
+    fontSize: 14,
+    theme: 'dark'
+  };
+  
+  // Local state - merge default with provided profile
+  let localProfile = { ...defaultProfile, ...profile };
+  console.log('Initialized profile editor with:', localProfile);
+  
+  // Extract nested objects for easier binding
+  let autoLogin = { 
+    ...defaultProfile.autoLogin, 
+    ...(localProfile.autoLogin || {}) 
+  };
+  
   let newCommand = '';
-  let accessibilityOptions = { ...localProfile.accessibilityOptions || {
-    textToSpeech: false,
-    highContrast: false,
-    speechRate: 1,
-    speechPitch: 1,
-    speechVolume: 1
-  }};
+  
+  let accessibilityOptions = { 
+    ...defaultProfile.accessibilityOptions, 
+    ...(localProfile.accessibilityOptions || {}) 
+  };
   
   // Handle form submission
   function handleSubmit() {

src/lib/components/SettingsPanel.svelte

@@ -60,11 +60,17 @@
     input.click();
   }
   
+  // Helper function to explicitly save settings
+  function saveSettings() {
+    console.log('Explicitly saving settings');
+    settingsManager.saveSettings();
+  }
+  
   onMount(() => {
-    // Ensure settings are loaded from localStorage on component mount
-    // This ensures the UI displays the values stored in localStorage
-    // No need to explicitly set the uiSettings and accessibilitySettings store values
-    // as settingsManager already does this during initialization
+    console.log('SettingsPanel mounted');
+    // Log current settings for debugging
+    console.log('Current accessibility settings:', $accessibilitySettings);
+    console.log('Current UI settings:', $uiSettings);
   });
 </script>
 
@@ -73,7 +79,12 @@
     <div class="setting-item">
       <span class="setting-name">Dark Mode</span>
       <label class="switch">
-        <input type="checkbox" bind:checked={$uiSettings.isDarkMode}>
+        <input type="checkbox" 
+               bind:checked={$uiSettings.isDarkMode}
+               on:change={() => { 
+                 console.log('Dark mode changed to:', $uiSettings.isDarkMode);
+                 settingsManager.saveSettings();
+               }}>
         <span class="slider round"></span>
       </label>
     </div>
@@ -153,7 +164,12 @@
     <div class="setting-item">
       <span class="setting-name">Text-to-Speech</span>
       <label class="switch">
-        <input type="checkbox" bind:checked={$accessibilitySettings.textToSpeech}>
+        <input type="checkbox" 
+               bind:checked={$accessibilitySettings.textToSpeech}
+               on:change={() => { 
+                 console.log('Text-to-speech changed to:', $accessibilitySettings.textToSpeech);
+                 settingsManager.saveSettings();
+               }}>
         <span class="slider round"></span>
       </label>
     </div>