Initial commit

.gitignore

@@ -0,0 +1,55 @@
+# SvelteKit specific
+/build
+/.svelte-kit
+/package
+
+# Node.js dependencies
+/node_modules
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+.pnpm-debug.log
+.npm
+
+# Environment variables
+.env
+.env.*
+!.env.example
+
+# Editor directories and files
+.idea
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Logs
+logs
+*.log
+
+# Docker specific
+docker-compose.override.yml
+
+# Testing
+/coverage
+/.nyc_output
+
+# Production build extras
+/dist
+/.output

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

DOCKER-README.md

@@ -0,0 +1,100 @@
+# Svelte MUD Docker Setup
+
+This guide explains how to use Docker to build and run the Svelte MUD client.
+
+## Prerequisites
+
+- [Docker](https://docs.docker.com/get-docker/)
+- [Docker Compose](https://docs.docker.com/compose/install/) (usually included with Docker Desktop)
+
+## Quick Start
+
+1. Navigate to the project directory:
+   ```bash
+   cd path/to/svelte-mud
+   ```
+
+2. Build and start the containers:
+   ```bash
+   docker-compose up -d
+   ```
+
+3. Access the application:
+   - Web interface: http://localhost:3000
+   - WebSocket server: ws://localhost:3001/mud-ws
+
+## Docker Commands
+
+### Starting the Application
+
+```bash
+# Build and start in detached mode
+docker-compose up -d
+
+# Build and start with logs
+docker-compose up
+
+# Force rebuild
+docker-compose up --build
+```
+
+### Stopping the Application
+
+```bash
+# Stop containers
+docker-compose down
+
+# Stop containers and remove volumes
+docker-compose down -v
+```
+
+### Viewing Logs
+
+```bash
+# View all logs
+docker-compose logs
+
+# Follow logs
+docker-compose logs -f
+
+# View logs for specific service
+docker-compose logs -f svelte-mud
+```
+
+## Configuration
+
+The Docker setup uses the following ports:
+- Port 3000: Web server
+- Port 3001: WebSocket server
+
+You can modify these ports in the `docker-compose.yml` file if needed.
+
+## Customization
+
+### Environment Variables
+
+You can add environment variables in the `docker-compose.yml` file:
+
+```yaml
+services:
+  svelte-mud:
+    environment:
+      - NODE_ENV=production
+      - WS_PORT=3001
+      # Add your custom environment variables here
+```
+
+### Building for Production
+
+The default configuration is optimized for production use. It:
+- Uses a multi-stage build process to minimize image size
+- Runs as a non-root user for better security
+- Includes only production dependencies
+
+## Troubleshooting
+
+1. **Port conflicts**: If ports 3000 or 3001 are already in use, modify the port mappings in `docker-compose.yml`.
+
+2. **Build failures**: Ensure that all dependencies are properly defined in your package.json.
+
+3. **Connection issues**: If you can't connect to the WebSocket server, verify that your client is using the correct URL format: `ws://localhost:3001/mud-ws?host=YOUR_MUD_HOST&port=YOUR_MUD_PORT`.

Dockerfile

@@ -0,0 +1,51 @@
+# Multi-stage build Dockerfile for Svelte MUD client
+
+# Build stage
+FROM node:20-alpine AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source files
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS production
+
+# Set working directory
+WORKDIR /app
+
+# Create a non-root user and group with the node user ID
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S -u 1001 -G nodejs nodejs
+
+# Install only production dependencies
+COPY package*.json ./
+RUN npm ci --omit=dev
+
+# Copy built application from the build stage
+COPY --from=build /app/build ./build
+COPY --from=build /app/src/websocket-server.js ./src/
+COPY production.js ./
+
+# Switch to non-root user
+USER nodejs
+
+# Expose ports for both web and websocket servers
+EXPOSE 3000
+EXPOSE 3001
+
+# Set environment variables
+ENV NODE_ENV=production
+
+# Start the full application (web + websocket)
+CMD ["node", "production.js"]

README.md

@@ -0,0 +1,128 @@
+# SvelteMUD - A Modern MUD Client
+
+SvelteMUD is a feature-rich MUD (Multi-User Dungeon) client built with Svelte and SvelteKit, designed to provide a modern, accessible, and customizable interface for connecting to MUD servers.
+
+## Features
+
+### Core Functionality
+- WebSocket to Telnet proxy for connecting to MUD servers
+- Multiple simultaneous MUD connections via an MDI (Multiple Document Interface)
+- ANSI color support
+- Command history
+- Configurable profiles for different MUD servers
+- Auto-login functionality
+- Progressive Web App (PWA) support for offline use and installation
+
+### GMCP Support
+- Generic MUD Communication Protocol (GMCP) handling
+- Support for common packages:
+  - Client.Media for sound playback
+  - Client.Keystroke for key capturing
+  - Easily extendable with custom GMCP packages
+
+### Triggers System
+- Pattern matching with plain text or regular expressions
+- Actions:
+  - Sound playback on triggers
+  - Highlight matched text
+  - Send commands to the server
+  - Execute custom JavaScript code
+
+### Accessibility Features
+- Text-to-speech for incoming MUD text
+- High contrast mode
+- Configurable font size and family
+- Keyboard navigation
+- ARIA attributes for screen readers
+
+## Installation
+
+```bash
+# Clone the repository
+git clone https://your-repo-url/svelte-mud.git
+cd svelte-mud
+
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+
+# Build for production
+npm run build
+```
+
+## Usage
+
+1. **Creating a Profile**: Click "New Profile" to set up a connection to your MUD server. Configure host, port, and optional auto-login.
+
+2. **Connecting**: After creating a profile, click the connect button in the tab to establish a connection.
+
+3. **Setting Up Triggers**: Navigate to the Triggers tab and click "New Trigger" to create pattern matching triggers with various actions.
+
+4. **Customizing Settings**: Adjust appearance and accessibility options in the Settings tab.
+
+## Project Structure
+
+- `src/lib/connection/` - MUD connection handling code
+- `src/lib/gmcp/` - GMCP protocol handling
+- `src/lib/triggers/` - Trigger system implementation
+- `src/lib/accessibility/` - Accessibility features
+- `src/lib/profiles/` - Profile management
+- `src/lib/components/` - Svelte components
+- `src/lib/stores/` - Svelte stores for state management
+- `src/routes/api/` - Server endpoints for WebSocket proxying
+- `static/sounds/` - Trigger sound files
+- `static/icons/` - PWA icons in various sizes
+- `static/manifest.json` - PWA manifest file
+- `static/service-worker.js` - Service worker for offline capabilities
+
+## Configuration
+
+The client can be configured through the UI, with settings stored in local browser storage:
+- MUD server profiles
+- Trigger patterns and actions
+- UI preferences (dark mode, font size, etc.)
+- Accessibility settings
+
+## WebSocket to Telnet Proxy
+
+For security reasons, browser WebSockets cannot connect directly to telnet ports. SvelteMUD uses a server-side proxy to facilitate this connection. The proxy is implemented in the `src/routes/api/mud-connect` and `src/routes/api/mud-ws` endpoints.
+
+## Progressive Web App (PWA) Support
+
+SvelteMUD is configured as a Progressive Web App, allowing users to install it on their devices and use it offline:
+
+### Features
+
+- **Installable**: Add to home screen on mobile or desktop
+- **Offline Support**: Basic functionality works without an internet connection
+- **Automatic Updates**: Notifies users when a new version is available
+- **Responsive Design**: Works on all screen sizes
+
+### Installation
+
+#### Mobile (iOS/Android)
+1. Open SvelteMUD in your browser
+2. Tap the Share button (iOS) or menu (Android)
+3. Select "Add to Home Screen" or "Install App"
+
+#### Desktop (Chrome, Edge, etc.)
+1. Open SvelteMUD in your browser
+2. Look for the install icon in the address bar
+3. Click "Install" when prompted
+
+### Customizing Icons
+
+To replace the default PWA icons:
+
+1. Replace the SVG template in `/static/icons/icon-512x512.svg`
+2. Run the icon generator: `npm run generate-icons`
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

docker-compose.yml

@@ -0,0 +1,27 @@
+version: '3.8'
+
+services:
+  svelte-mud:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: svelte-mud
+    restart: unless-stopped
+    ports:
+      - "3000:3000"  # Web server
+      - "3001:3001"  # WebSocket server
+    environment:
+      - NODE_ENV=production
+      # Optional: You can override the WebSocket port if needed
+      # - WS_PORT=3001
+    # Uncomment for adding custom healthcheck
+    # healthcheck:
+    #   test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/"]
+    #   interval: 30s
+    #   timeout: 10s
+    #   retries: 3
+    #   start_period: 10s
+    volumes:
+      # Optional: Add persistent volumes if needed
+      # - ./logs:/app/logs
+      - /app/node_modules  # Don't mount local node_modules

generate-icons.js

@@ -0,0 +1,38 @@
+// Script to convert SVG to various PNG sizes for PWA icons
+// Requires: npm install sharp
+// Usage: node generate-icons.js
+
+const fs = require('fs');
+const path = require('path');
+const sharp = require('sharp');
+
+// Define icon sizes needed
+const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
+
+// Input SVG file
+const svgFile = path.join(__dirname, 'static/icons/icon-512x512.svg');
+
+// Read the SVG file
+fs.readFile(svgFile, (err, data) => {
+  if (err) throw err;
+  
+  // Convert to each size
+  sizes.forEach(size => {
+    const outputFile = path.join(__dirname, `static/icons/icon-${size}x${size}.png`);
+    
+    sharp(data)
+      .resize(size, size)
+      .png()
+      .toFile(outputFile)
+      .then(() => {
+        console.log(`Created icon: ${outputFile}`);
+      })
+      .catch(err => {
+        console.error(`Error creating ${outputFile}:`, err);
+      });
+  });
+});
+
+console.log('To use this script, first install the required dependency:');
+console.log('npm install sharp');
+console.log('Then run: node generate-icons.js');

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "svelte-mud",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "ws": "node src/websocket-server.js",
+    "dev:full": "node start-server.js",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "start": "node build/index.js",
+    "start:full": "node production.js",
+    "generate-icons": "node generate-icons.js"
+  },
+  "dependencies": {
+    "@types/node": "^22.14.1",
+    "@types/ws": "^8.18.1",
+    "ansi-to-html": "^0.7.2",
+    "events": "^3.3.0",
+    "howler": "^2.2.4",
+    "net": "^1.0.2",
+    "split.js": "^1.6.5",
+    "ws": "^8.18.1"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.1.1",
+    "@sveltejs/adapter-node": "^5.2.12",
+    "@sveltejs/kit": "^2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@types/howler": "^2.2.11",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "sharp": "^0.33.2",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "tailwindcss": "^3.3.6",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-node-polyfills": "^0.19.0",
+    "vite-plugin-pwa": "^0.19.4"
+  }
+}

production.js

@@ -0,0 +1,44 @@
+import { spawn } from 'child_process';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Start the WebSocket server
+console.log('Starting WebSocket server');
+const wsServer = spawn('node', ['src/websocket-server.js'], {
+  stdio: 'inherit',
+  shell: true,
+  cwd: __dirname
+});
+
+// Start the SvelteKit production server
+console.log('Starting SvelteKit production server');
+const sveltekit = spawn('node', ['build/index.js'], {
+  stdio: 'inherit',
+  shell: true,
+  cwd: __dirname
+});
+
+// Handle process exit
+process.on('exit', () => {
+  console.log('Shutting down servers...');
+  wsServer.kill();
+  sveltekit.kill();
+});
+
+// Handle ctrl+c
+process.on('SIGINT', () => {
+  console.log('Received SIGINT, shutting down servers...');
+  wsServer.kill('SIGINT');
+  sveltekit.kill('SIGINT');
+  process.exit(0);
+});
+
+// Handle termination
+process.on('SIGTERM', () => {
+  console.log('Received SIGTERM, shutting down servers...');
+  wsServer.kill('SIGTERM');
+  sveltekit.kill('SIGTERM');
+  process.exit(0);
+});

src/app.css

@@ -0,0 +1,241 @@
+/* Base styles */
+:root {
+  --color-bg: #f8f9fa;
+  --color-bg-alt: #e9ecef;
+  --color-text: #212529;
+  --color-text-muted: #6c757d;
+  --color-border: #dee2e6;
+  --color-primary: #2196f3;
+  --color-primary-hover: #1976d2;
+  --color-success: #4caf50;
+  --color-warning: #ff9800;
+  --color-error: #f44336;
+  --color-terminal-bg: #f8f8f8;
+  --color-terminal-text: #333;
+  --color-input-bg: #fff;
+  --color-input-border: #ced4da;
+  --border-radius: 4px;
+  --shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  --font-mono: monospace, 'Courier New', Courier;
+}
+
+.dark-mode {
+  --color-bg: #282a36;
+  --color-bg-alt: #44475a;
+  --color-text: #f8f8f2;
+  --color-text-muted: #bd93f9;
+  --color-border: #6272a4;
+  --color-primary: #8be9fd;
+  --color-primary-hover: #6bbed4;
+  --color-success: #50fa7b;
+  --color-warning: #ffb86c;
+  --color-error: #ff5555;
+  --color-terminal-bg: #282a36;
+  --color-terminal-text: #f8f8f2;
+  --color-input-bg: #44475a;
+  --color-input-border: #6272a4;
+  --shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+.high-contrast {
+  --color-bg: #000;
+  --color-bg-alt: #222;
+  --color-text: #fff;
+  --color-text-muted: #eee;
+  --color-border: #fff;
+  --color-primary: #ff0;
+  --color-primary-hover: #ff0;
+  --color-success: #0f0;
+  --color-warning: #ff0;
+  --color-error: #f00;
+  --color-terminal-bg: #000;
+  --color-terminal-text: #fff;
+  --color-input-bg: #000;
+  --color-input-border: #fff;
+}
+
+/* Typography */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  line-height: 1.5;
+  font-size: 16px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+/* Layout */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.col {
+  flex: 1 0 0%;
+  padding: 0 15px;
+}
+
+/* Components */
+.card {
+  background-color: var(--color-input-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  padding: 1rem;
+  margin-bottom: 1rem;
+  box-shadow: var(--shadow);
+}
+
+.card-header {
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+  font-weight: bold;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+}
+
+.btn-success {
+  background-color: var(--color-success);
+  color: white;
+  border-color: var(--color-success);
+}
+
+.btn-warning {
+  background-color: var(--color-warning);
+  color: white;
+  border-color: var(--color-warning);
+}
+
+.btn-danger {
+  background-color: var(--color-error);
+  color: white;
+  border-color: var(--color-error);
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.btn-lg {
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+}
+
+/* Form elements */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-input-bg);
+  background-clip: padding-box;
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--border-radius);
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-control:focus {
+  color: var(--color-text);
+  background-color: var(--color-input-bg);
+  border-color: var(--color-primary);
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
+}
+
+/* Accessibility */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.focus-visible:focus {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* MUD specific */
+.ansi-black { color: #000000; }
+.ansi-red { color: #ff0000; }
+.ansi-green { color: #00ff00; }
+.ansi-yellow { color: #ffff00; }
+.ansi-blue { color: #0000ff; }
+.ansi-magenta { color: #ff00ff; }
+.ansi-cyan { color: #00ffff; }
+.ansi-white { color: #ffffff; }
+.ansi-bright-black { color: #808080; }
+.ansi-bright-red { color: #ff5555; }
+.ansi-bright-green { color: #50fa7b; }
+.ansi-bright-yellow { color: #f1fa8c; }
+.ansi-bright-blue { color: #bd93f9; }
+.ansi-bright-magenta { color: #ff79c6; }
+.ansi-bright-cyan { color: #8be9fd; }
+.ansi-bright-white { color: #f8f8f2; }
+
+.ansi-bg-black { background-color: #000000; }
+.ansi-bg-red { background-color: #ff0000; }
+.ansi-bg-green { background-color: #00ff00; }
+.ansi-bg-yellow { background-color: #ffff00; }
+.ansi-bg-blue { background-color: #0000ff; }
+.ansi-bg-magenta { background-color: #ff00ff; }
+.ansi-bg-cyan { background-color: #00ffff; }
+.ansi-bg-white { background-color: #ffffff; }
+.ansi-bg-bright-black { background-color: #808080; }
+.ansi-bg-bright-red { background-color: #ff5555; }
+.ansi-bg-bright-green { background-color: #50fa7b; }
+.ansi-bg-bright-yellow { background-color: #f1fa8c; }
+.ansi-bg-bright-blue { background-color: #bd93f9; }
+.ansi-bg-bright-magenta { background-color: #ff79c6; }
+.ansi-bg-bright-cyan { background-color: #8be9fd; }
+.ansi-bg-bright-white { background-color: #f8f8f2; }

src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		
+		<!-- PWA Meta Tags -->
+		<meta name="theme-color" content="#6272a4" />
+		<meta name="description" content="A modern MUD client built with Svelte" />
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+		<meta name="apple-mobile-web-app-title" content="SvelteMUD" />
+		
+		<!-- PWA Icons and Manifest -->
+		<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
+		<link rel="apple-touch-icon" href="%sveltekit.assets%/icons/icon-192x192.png" />
+		
+		<!-- Service Worker Registration -->
+		<script src="%sveltekit.assets%/register-sw.js" defer></script>
+		
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/hooks.server.js

@@ -0,0 +1,6 @@
+// This is a placeholder hooks.server.js file
+// We're using a standalone WebSocket server instead of integrating with SvelteKit hooks
+
+export async function handle({ event, resolve }) {
+  return await resolve(event);
+}

src/lib/accessibility/AccessibilityManager.ts

@@ -0,0 +1,200 @@
+import { EventEmitter } from '$lib/utils/EventEmitter';
+
+export interface SpeechOptions {
+  pitch?: number;
+  rate?: number;
+  volume?: number;
+  voice?: SpeechSynthesisVoice;
+}
+
+export class AccessibilityManager extends EventEmitter {
+  private isSpeechEnabled: boolean = false;
+  private speechSynthesis: SpeechSynthesis | null = null;
+  private speechOptions: SpeechOptions = {
+    pitch: 1,
+    rate: 1,
+    volume: 0.8
+  };
+
+  constructor() {
+    super();
+    console.log('AccessibilityManager constructed');
+    
+    // Simple initialization - no speech synthesis by default
+    if (typeof window !== 'undefined' && window.speechSynthesis) {
+      this.speechSynthesis = window.speechSynthesis;
+      console.log('Speech synthesis is available');
+    }
+  }
+
+  /**
+   * Enable or disable speech
+   */
+  public setSpeechEnabled(enabled: boolean): void {
+    console.log('Setting speech enabled:', enabled);
+    this.isSpeechEnabled = enabled;
+    
+    // Cancel speech if disabling
+    if (!enabled && this.speechSynthesis) {
+      try {
+        this.speechSynthesis.cancel();
+      } catch (error) {
+        console.error('Error cancelling speech:', error);
+      }
+    }
+    
+    this.emit('speechEnabledChanged', enabled);
+    
+    // Test speech synthesis if enabling was successful
+    if (this.isSpeechEnabled) {
+      try {
+        console.log('Text-to-speech is now enabled');
+      } catch (error) {
+        console.error('Error testing speech:', error);
+      }
+    }
+  }
+
+  /**
+   * Update speech options
+   */
+  public updateSpeechOptions(options: SpeechOptions): void {
+    console.log('Speech options updated:', options);
+    
+    // Update stored options
+    if (options.rate !== undefined) this.speechOptions.rate = options.rate;
+    if (options.pitch !== undefined) this.speechOptions.pitch = options.pitch;
+    if (options.volume !== undefined) this.speechOptions.volume = options.volume;
+    if (options.voice !== undefined) this.speechOptions.voice = options.voice;
+    
+    console.log('New speech options:', this.speechOptions);
+    
+    this.emit('speechOptionsChanged', this.speechOptions);
+  }
+
+  /**
+   * Speak text using text-to-speech
+   */
+  public speak(text: string): void {
+    // Skip if speech is disabled
+    if (!this.isSpeechEnabled || !this.speechSynthesis) {
+      // console.log('Speech is disabled, not speaking');
+      return;
+    }
+    
+    try {
+      // Clean and truncate text to prevent issues with large blocks
+      const cleanText = this.cleanTextForSpeech(text);
+      
+      // Only speak if there's meaningful text after cleaning
+      if (cleanText && cleanText.trim().length > 0) {
+        console.log('Speaking text with options:', {
+          rate: this.speechOptions.rate,
+          pitch: this.speechOptions.pitch,
+          volume: this.speechOptions.volume
+        });
+        
+        const utterance = new SpeechSynthesisUtterance(cleanText);
+        
+        // Explicitly set options
+        utterance.rate = Number(this.speechOptions.rate) || 1;
+        utterance.pitch = Number(this.speechOptions.pitch) || 1;
+        utterance.volume = Number(this.speechOptions.volume) || 0.8;
+        
+        console.log('Created utterance with:', {
+          rate: utterance.rate,
+          pitch: utterance.pitch,
+          volume: utterance.volume
+        });
+        
+        // Add event handlers for debugging
+        utterance.onstart = () => console.log('Speech started');
+        utterance.onend = () => console.log('Speech ended');
+        utterance.onerror = (e) => console.error('Speech error:', e);
+        
+        // Apply voice if set
+        if (this.speechOptions.voice) {
+          utterance.voice = this.speechOptions.voice;
+        }
+        
+
+        
+        // Speak the text
+        this.speechSynthesis.speak(utterance);
+      }
+    } catch (error) {
+      console.error('Error in speak:', error);
+    }
+  }
+
+  /**
+   * Clean text for speech synthesis
+   */
+  private cleanTextForSpeech(text: string): string {
+    if (!text) return '';
+    
+    try {
+      // Limit text length to prevent freezes with very long text
+      let cleanText = text.length > 200 ? text.substring(0, 200) : text;
+      
+      // Remove ANSI color codes
+      cleanText = cleanText.replace(/\u001b\[\d+(;\d+)*m/g, '');
+      
+      // Remove HTML tags
+      cleanText = cleanText.replace(/<[^>]*>/g, '');
+      
+      return cleanText.trim();
+    } catch (error) {
+      console.error('Error cleaning text for speech:', error);
+      return '';
+    }
+  }
+
+  /**
+   * Stop current speech
+   */
+  public stopSpeech(): void {
+    if (!this.speechSynthesis) return;
+    
+    try {
+      // Make sure we cancel any pending or active speech
+      this.speechSynthesis.cancel();
+      
+      console.log('Speech stopped');
+      this.emit('speechStopped');
+      
+      // Force a small delay to ensure the speech engine has time to process the cancel
+      setTimeout(() => {
+        if (this.speechSynthesis && this.speechSynthesis.speaking) {
+          console.log('Force stopping speech again after delay');
+          this.speechSynthesis.cancel();
+        }
+      }, 50);
+    } catch (error) {
+      console.error('Error stopping speech:', error);
+    }
+  }
+  
+  /**
+   * Check if speech is currently speaking
+   */
+  public isSpeaking(): boolean {
+    // Ensure the speech synthesis is available
+    if (!this.speechSynthesis) return false;
+    
+    // Check if speech is currently active
+    try {
+      return this.speechSynthesis.speaking || this.speechSynthesis.pending;
+    } catch (error) {
+      console.error('Error checking if speech is speaking:', error);
+      return false;
+    }
+  }
+  
+  /**
+   * Check if speech is currently enabled
+   */
+  public isSpeechActive(): boolean {
+    return this.isSpeechEnabled;
+  }
+}

src/lib/components/KeyboardShortcutsHelp.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { shortcutManager, type KeyboardShortcut } from '$lib/utils/KeyboardShortcutManager';
+  
+  export let showModal = false;
+  
+  let shortcuts: KeyboardShortcut[] = [];
+  
+  function closeModal() {
+    showModal = false;
+  }
+  
+  function formatShortcut(shortcut: KeyboardShortcut): string {
+    const parts = [];
+    
+    if (shortcut.ctrlKey) parts.push('Ctrl');
+    if (shortcut.altKey) parts.push('Alt');
+    if (shortcut.shiftKey) parts.push('Shift');
+    if (shortcut.metaKey) parts.push('Meta');
+    
+    // Format key name for better readability
+    let keyName = shortcut.key;
+    
+    // Handle special keys
+    if (keyName === ' ') keyName = 'Space';
+    else if (keyName.length === 1) keyName = keyName.toUpperCase();
+    
+    parts.push(keyName);
+    
+    return parts.join(' + ');
+  }
+  
+  function handleShortcutsChanged() {
+    shortcuts = shortcutManager.getShortcuts();
+  }
+  
+  onMount(() => {
+    // Get initial shortcuts
+    shortcuts = shortcutManager.getShortcuts();
+    
+    // Listen for changes
+    shortcutManager.on('shortcutsChanged', handleShortcutsChanged);
+  });
+  
+  onDestroy(() => {
+    // Clean up listeners
+    shortcutManager.off('shortcutsChanged', handleShortcutsChanged);
+  });
+</script>
+
+{#if showModal}
+  <div class="keyboard-shortcuts-modal">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Keyboard Shortcuts</h2>
+        <button class="close-button" on:click={closeModal}>×</button>
+      </div>
+      
+      <div class="modal-body">
+        <p class="intro">These shortcuts help you quickly navigate the SvelteMUD client. Press the key combinations to activate them from anywhere in the application.</p>
+        
+        <h3>Global Navigation</h3>
+        <table class="shortcuts-table">
+          <thead>
+            <tr>
+              <th>Shortcut</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each shortcuts.filter(s => s.action.startsWith('focus-') || s.action === 'toggle-sidebar') as shortcut}
+              <tr>
+                <td class="shortcut-key">{formatShortcut(shortcut)}</td>
+                <td>{shortcut.description}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+        
+        <h3>Connection Controls</h3>
+        <table class="shortcuts-table">
+          <tbody>
+            {#each shortcuts.filter(s => s.action === 'connect' || s.action === 'disconnect' || s.action.includes('tab')) as shortcut}
+              <tr>
+                <td class="shortcut-key">{formatShortcut(shortcut)}</td>
+                <td>{shortcut.description}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+        
+        <h3>Terminal Navigation</h3>
+        <p class="note">Terminal navigation works when the terminal output is focused.</p>
+        <table class="shortcuts-table">
+          <tbody>
+            <tr>
+              <td class="shortcut-key">↑</td>
+              <td>Previous message</td>
+            </tr>
+            <tr>
+              <td class="shortcut-key">↓</td>
+              <td>Next message</td>
+            </tr>
+            <tr>
+              <td class="shortcut-key">Home</td>
+              <td>First message</td>
+            </tr>
+            <tr>
+              <td class="shortcut-key">End</td>
+              <td>Last message</td>
+            </tr>
+            <tr>
+              <td class="shortcut-key">Page Up</td>
+              <td>Scroll up one page</td>
+            </tr>
+            <tr>
+              <td class="shortcut-key">Page Down</td>
+              <td>Scroll down one page</td>
+            </tr>
+          </tbody>
+        </table>
+        
+        <h3>Input History Navigation</h3>
+        <p class="note">Input history navigation works when the input field is focused.</p>
+        <table class="shortcuts-table">
+          <tbody>
+            <tr>
+              <td class="shortcut-key">↑</td>
+              <td>Previous command in history</td>
+            </tr>
+            <tr>
+              <td class="shortcut-key">↓</td>
+              <td>Next command in history</td>
+            </tr>
+            <tr>
+              <td class="shortcut-key">Esc</td>
+              <td>Clear input</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      
+      <div class="modal-footer">
+        <button on:click={closeModal}>Close</button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .keyboard-shortcuts-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+  
+  .modal-content {
+    background-color: var(--color-bg, #f8f8f8);
+    border-radius: 5px;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    width: 90%;
+    max-width: 600px;
+    max-height: 90vh;
+    overflow-y: auto;
+    animation: modal-appear 0.3s ease-out;
+    color: var(--color-text, #333);
+  }
+  
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid var(--color-border, #ddd);
+  }
+  
+  .modal-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+  }
+  
+  .close-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0;
+    color: var(--color-text, #333);
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+  }
+  
+  .close-button:hover {
+    background-color: var(--color-bg-hover, #e9e9e9);
+  }
+  
+  .modal-body {
+    padding: 1rem;
+  }
+  
+  .modal-footer {
+    padding: 1rem;
+    border-top: 1px solid var(--color-border, #ddd);
+    display: flex;
+    justify-content: flex-end;
+  }
+  
+  .modal-footer button {
+    padding: 0.5rem 1rem;
+    background-color: var(--color-primary, #2196f3);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .shortcuts-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1rem;
+  }
+  
+  .shortcuts-table th,
+  .shortcuts-table td {
+    padding: 0.5rem;
+    text-align: left;
+    border-bottom: 1px solid var(--color-border, #ddd);
+  }
+  
+  .shortcuts-table th {
+    font-weight: bold;
+    background-color: var(--color-bg-alt, #f1f1f1);
+  }
+  
+  .shortcut-key {
+    font-family: monospace;
+    background-color: var(--color-bg-alt, #f1f1f1);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-weight: bold;
+    white-space: nowrap;
+  }
+  
+  h3 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 1.2rem;
+  }
+  
+  .intro {
+    margin-bottom: 1.5rem;
+    color: var(--color-text-muted, #555);
+  }
+  
+  .note {
+    margin-top: -0.5rem;
+    margin-bottom: 0.75rem;
+    font-style: italic;
+    color: var(--color-text-muted, #555);
+    font-size: 0.9rem;
+  }
+  
+  @keyframes modal-appear {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

src/lib/components/Modal.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { fade, scale } from 'svelte/transition';
+  
+  const dispatch = createEventDispatcher();
+  
+  // Props
+  export let title = '';
+  export let closable = true;
+  export let component = null;
+  export let componentProps = {};
+  
+  // State
+  let isOpen = false;
+  let modalContent;
+  let componentInstance = null;
+  
+  // Event callbacks
+  let onSubmitCallback = null;
+  let onCancelCallback = null;
+  
+  // Handle component dispatch events
+  function handleComponentEvent(event) {
+    if (event.type === 'save') {
+      if (onSubmitCallback) {
+        onSubmitCallback(event.detail);
+      }
+      close();
+    } else if (event.type === 'cancel') {
+      if (onCancelCallback) {
+        onCancelCallback();
+      }
+      close();
+    }
+  }
+  
+  // Open the modal
+  export function open() {
+    console.log('Opening modal');
+    isOpen = true;
+  }
+  
+  // Close the modal
+  export function close() {
+    console.log('Closing modal');
+    isOpen = false;
+    
+    // Schedule component cleanup
+    setTimeout(() => {
+      if (!isOpen) {
+        cleanupComponent();
+      }
+    }, 300); // Wait for transitions to complete
+  }
+  
+  // Set properties and callbacks
+  export function setProps(props) {
+    if (props.title !== undefined) title = props.title;
+    if (props.closable !== undefined) closable = props.closable;
+    if (props.component !== undefined) component = props.component;
+    if (props.componentProps !== undefined) componentProps = props.componentProps;
+    if (props.onSubmit) onSubmitCallback = props.onSubmit;
+    if (props.onCancel) onCancelCallback = props.onCancel;
+  }
+  
+  // Clean up any previous component instance
+  function cleanupComponent() {
+    if (componentInstance) {
+      try {
+        componentInstance.$destroy();
+      } catch (error) {
+        console.error('Error destroying component instance:', error);
+      }
+      componentInstance = null;
+    }
+  }
+
+  // Only create component when modal is open and modalContent is available
+  $: if (isOpen && component && modalContent) {
+    console.log('Creating component in modal:', component.name || 'Unknown component');
+    
+    // Clean up previous component first to prevent conflicts
+    cleanupComponent();
+    
+    try {
+      // Create the component instance
+      componentInstance = new component({
+        target: modalContent,
+        props: componentProps
+      });
+      
+      console.log('Component created successfully');
+      
+      // Listen for events from the component
+      for (const event of ['save', 'cancel']) {
+        componentInstance.$on(event, (e) => handleComponentEvent({ type: event, detail: e.detail }));
+      }
+    } catch (error) {
+      console.error('Error creating component in modal:', error);
+    }
+  }
+  
+  // Close on ESC key
+  function handleKeydown(event) {
+    if (event.key === 'Escape' && closable && isOpen) {
+      close();
+      if (onCancelCallback) onCancelCallback();
+    }
+  }
+  
+  // Cleanup on destroy
+  onDestroy(() => {
+    cleanupComponent();
+    window.removeEventListener('keydown', handleKeydown);
+  });
+  
+  // Listen for ESC key
+  onMount(() => {
+    window.addEventListener('keydown', handleKeydown);
+    return () => {
+      window.removeEventListener('keydown', handleKeydown);
+    };
+  });
+  
+  // Prevent clicks inside the modal from bubbling up
+  function handleModalClick(event) {
+    event.stopPropagation();
+  }
+  
+  // Handle backdrop click
+  function handleBackdropClick() {
+    if (closable) {
+      close();
+      if (onCancelCallback) onCancelCallback();
+    }
+  }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if isOpen}
+  <div class="modal-backdrop" on:click={handleBackdropClick} transition:fade={{ duration: 150 }}>
+    <div class="modal-content" on:click={handleModalClick} transition:scale={{ start: 0.95, duration: 200 }}>
+      <div class="modal-header">
+        <h2 class="modal-title">{title}</h2>
+        {#if closable}
+          <button type="button" class="modal-close-button" on:click={close} aria-label="Close modal">
+            &times;
+          </button>
+        {/if}
+      </div>
+      
+      <div class="modal-body" bind:this={modalContent}></div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+  
+  .modal-content {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    width: 90%;
+    max-width: 600px;
+    max-height: 90vh;
+    overflow-y: auto;
+    position: relative;
+  }
+  
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid #eee;
+  }
+  
+  .modal-title {
+    margin: 0;
+    font-size: 1.25rem;
+    color: #333;
+  }
+  
+  .modal-close-button {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #999;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+  }
+  
+  .modal-close-button:hover {
+    color: #333;
+    background-color: #f0f0f0;
+  }
+  
+  .modal-body {
+    max-height: calc(90vh - 70px);
+    overflow-y: auto;
+  }
+  
+  /* Dark mode support */
+  :global(body.dark) .modal-content {
+    background-color: #2d3748;
+    color: #f8f9fa;
+  }
+  
+  :global(body.dark) .modal-header {
+    border-bottom-color: #4a5568;
+  }
+  
+  :global(body.dark) .modal-title {
+    color: #f8f9fa;
+  }
+  
+  :global(body.dark) .modal-close-button {
+    color: #cbd5e0;
+  }
+  
+  :global(body.dark) .modal-close-button:hover {
+    color: #f8f9fa;
+    background-color: #4a5568;
+  }
+</style>

src/lib/components/MudConnection.svelte

@@ -0,0 +1,420 @@
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { MudConnection } from '$lib/connection/MudConnection';
+  import { GmcpHandler } from '$lib/gmcp/GmcpHandler';
+  import { TriggerSystem } from '$lib/triggers/TriggerSystem';
+  import { AccessibilityManager } from '$lib/accessibility/AccessibilityManager';
+  import { 
+    connections, 
+    connectionStatus, 
+    activeProfileId, 
+    activeProfile, 
+    addToOutputHistory, 
+    updateGmcpData,
+    accessibilitySettings,
+    uiSettings
+  } from '$lib/stores/mudStore';
+  import { get } from 'svelte/store';
+  
+  const dispatch = createEventDispatcher();
+  
+  // Props
+  export let profileId: string;
+  export let autoConnect = false;
+  
+  // Local state
+  let connection: MudConnection | null = null;
+  let gmcpHandler: GmcpHandler | null = null;
+  let triggerSystem: TriggerSystem | null = null;
+  let accessibilityManager: AccessibilityManager | null = null;
+  
+  /**
+   * Handle keyboard events for speech control
+   */
+  function handleKeyDown(event: KeyboardEvent): void {
+    // Control key stops speech - the key code for Control is 17
+    if (event.key === 'Control' || event.ctrlKey || event.keyCode === 17) {
+      // Stop propagation to ensure no other handlers interfere
+      event.stopPropagation();
+      
+      if (accessibilityManager && accessibilityManager.isSpeaking()) {
+        console.log('Control key pressed - stopping speech');
+        accessibilityManager.stopSpeech();
+      }
+    }
+    
+    // Enter key stops speech if the setting is enabled
+    if ((event.key === 'Enter' || event.keyCode === 13) && $accessibilitySettings.interruptSpeechOnEnter) {
+      if (accessibilityManager && accessibilityManager.isSpeaking()) {
+        console.log('Enter key pressed - interrupting speech');
+        accessibilityManager.stopSpeech();
+      }
+    }
+  }
+  
+  onMount(() => {
+    // Initialize components
+    initializeComponents();
+    
+    // Set up keyboard listener for speech control - use capture phase and make it top-level
+    document.addEventListener('keydown', handleKeyDown, true); // Using document instead of window
+    
+    // Auto-connect if enabled
+    if (autoConnect) {
+      console.log('Auto-connecting profile:', profileId);
+      connect();
+    }
+    
+    // Update connection status - ensure UI shows status as 'disconnected' at start
+    connectionStatus.update(statuses => ({
+      ...statuses,
+      [profileId]: 'disconnected'
+    }));
+  });
+  
+  onDestroy(() => {
+    // Remove keyboard listener
+    document.removeEventListener('keydown', handleKeyDown, true); // Match document and capture phase
+    
+    // Clean up connection
+    if (connection) {
+      connection.disconnect();
+    }
+    
+    // Remove from connections store
+    connections.update(conns => {
+      const newConns = { ...conns };
+      delete newConns[profileId];
+      return newConns;
+    });
+    
+    // Update connection status
+    connectionStatus.update(statuses => {
+      const newStatuses = { ...statuses };
+      delete newStatuses[profileId];
+      return newStatuses;
+    });
+  });
+  
+  /**
+   * Initialize connection components
+   */
+  function initializeComponents() {
+    // Create GMCP handler
+    gmcpHandler = new GmcpHandler();
+    
+    // Create trigger system
+    triggerSystem = new TriggerSystem();
+    
+    // Create accessibility manager
+    accessibilityManager = new AccessibilityManager();
+    
+    // Set up event listeners
+    setupEventListeners();
+  }
+  
+  /**
+   * Set up event listeners for components
+   */
+  function setupEventListeners() {
+    if (!gmcpHandler || !triggerSystem || !accessibilityManager) return;
+    
+    // GMCP handler events
+    gmcpHandler.on('gmcp', (module, data) => {
+      updateGmcpData(module, data);
+    });
+    
+    gmcpHandler.on('sendGmcp', (module, data) => {
+      if (connection) {
+        connection.sendGmcp(module, data);
+      }
+    });
+    
+    gmcpHandler.on('playSound', (url, volume, loop) => {
+      dispatch('playSound', { url, volume, loop });
+    });
+    
+    // Trigger system events
+    triggerSystem.on('sendText', (text) => {
+      if (connection) {
+        connection.send(text);
+      }
+    });
+    
+    triggerSystem.on('highlight', (text, pattern, color, isRegex) => {
+      dispatch('highlight', { text, pattern, color, isRegex });
+    });
+    
+    // Set up TTS subscription - use direct subscription to avoid circular updates
+    const unsubscribeTts = accessibilitySettings.subscribe(settings => {
+      try {
+        // Set speech enabled directly based on the store value
+        if (accessibilityManager) {
+          console.log('Setting TTS from store:', settings.textToSpeech);
+          accessibilityManager.setSpeechEnabled(settings.textToSpeech);
+          
+          // Update speech options when settings change
+          accessibilityManager.updateSpeechOptions({
+            rate: settings.speechRate,
+            pitch: settings.speechPitch,
+            volume: settings.speechVolume
+          });
+        }
+      } catch (error) {
+        console.error('Error updating TTS setting:', error);
+      }
+    });
+    
+    // Set up only GMCP debugging subscription
+    let previousGmcpDebug = $uiSettings.debugGmcp;
+    const unsubscribeUiSettings = uiSettings.subscribe(settings => {
+      if (settings.debugGmcp !== previousGmcpDebug) {
+        previousGmcpDebug = settings.debugGmcp;
+      }
+    });
+    
+    // Clean up subscriptions on component destruction
+    onDestroy(() => {
+      unsubscribeUiSettings();
+      unsubscribeTts();
+    });
+  }
+  
+  /**
+   * Connect to the MUD server
+   */
+  export function connect() {
+    const profile = get(activeProfile);
+    console.log('Connecting to profile:', profile);
+    
+    if (!profile) {
+      addToOutputHistory('Error: No active profile selected.');
+      console.error('No active profile selected');
+      return;
+    }
+    
+    // Update connection status
+    connectionStatus.update(statuses => ({
+      ...statuses,
+      [profileId]: 'connecting'
+    }));
+    
+    try {
+      addToOutputHistory(`Connecting to ${profile.host}:${profile.port}...`);
+      
+      // Create connection
+      connection = new MudConnection({
+        host: profile.host,
+        port: profile.port,
+        useSSL: profile.useSSL,
+        gmcpHandler: gmcpHandler || undefined
+      });
+      
+      console.log('Connection object created:', connection);
+      
+      // Set up connection event listeners
+      connection.on('connected', handleConnected);
+      connection.on('disconnected', handleDisconnected);
+      connection.on('error', handleError);
+      connection.on('received', handleReceived);
+      connection.on('sent', handleSent);
+      
+      // Add to connections store
+      connections.update(conns => ({
+        ...conns,
+        [profileId]: connection as MudConnection
+      }));
+      
+      // Connect
+      connection.connect();
+    } catch (error) {
+      console.error('Failed to connect:', error);
+      
+      connectionStatus.update(statuses => ({
+        ...statuses,
+        [profileId]: 'error'
+      }));
+      
+      addToOutputHistory(`Error connecting to ${profile.host}:${profile.port} - ${error}`);
+    }
+  }
+  
+  /**
+   * Disconnect from the MUD server
+   */
+  export function disconnect() {
+    if (connection) {
+      connection.disconnect();
+    }
+  }
+  
+  /**
+   * Handle connection established
+   */
+  function handleConnected() {
+    const profile = get(activeProfile);
+    
+    connectionStatus.update(statuses => ({
+      ...statuses,
+      [profileId]: 'connected'
+    }));
+    
+    addToOutputHistory(`Connected to ${profile?.host}:${profile?.port}`);
+    
+    // Handle auto-login if enabled
+    if (profile?.autoLogin?.enabled) {
+      setTimeout(() => {
+        // Send username
+        if (profile.autoLogin?.username) {
+          if (connection) connection.send(profile.autoLogin.username);
+        }
+        
+        // Send password after a delay
+        if (profile.autoLogin?.password) {
+          setTimeout(() => {
+            if (connection) connection.send(profile.autoLogin?.password || '');
+            
+            // Send additional commands
+            if (profile.autoLogin?.commands && profile.autoLogin.commands.length > 0) {
+              let delay = 500;
+              profile.autoLogin.commands.forEach((cmd) => {
+                setTimeout(() => {
+                  if (connection) connection.send(cmd);
+                }, delay);
+                delay += 500;
+              });
+            }
+          }, 1000);
+        }
+      }, 1000);
+    }
+    
+    dispatch('connected');
+  }
+  
+  /**
+   * Handle connection closed
+   */
+  function handleDisconnected() {
+    connectionStatus.update(statuses => ({
+      ...statuses,
+      [profileId]: 'disconnected'
+    }));
+    
+    addToOutputHistory('Disconnected from server.');
+    dispatch('disconnected');
+  }
+  
+  /**
+   * Handle connection error
+   */
+  function handleError(error: any) {
+    connectionStatus.update(statuses => ({
+      ...statuses,
+      [profileId]: 'error'
+    }));
+    
+    // Format the error message for display
+    const errorMessage = typeof error === 'object' ? 
+      (error.message || JSON.stringify(error)) : 
+      String(error);
+    
+    addToOutputHistory(`Connection error: ${errorMessage}`, false, [
+      { pattern: 'Connection error', color: '#ff5555', isRegex: false }
+    ]);
+    
+    dispatch('error', { error });
+  }
+  
+  /**
+   * Handle received data
+   */
+  function handleReceived(text: string) {
+    // Add to output history first
+    addToOutputHistory(text);
+    
+    // Process triggers with safe error handling
+    if (triggerSystem) {
+      try {
+        triggerSystem.processTriggers(text);
+      } catch (error) {
+        console.error('Error processing triggers:', error);
+      }
+    }
+    
+    // Try to use text-to-speech if enabled
+    if (accessibilityManager && $accessibilitySettings.textToSpeech) {
+      // Use a small timeout to avoid UI blocking
+      setTimeout(() => {
+        try {
+          accessibilityManager.speak(text);
+        } catch (error) {
+          console.error('Error using text-to-speech:', error);
+        }
+      }, 10);
+    }
+    
+    dispatch('received', { text });
+  }
+  
+  /**
+   * Handle sent data
+   */
+  function handleSent(text: string) {
+    dispatch('sent', { text });
+  }
+</script>
+
+{#if $connectionStatus[profileId]}
+  <div class="mud-connection-status" role="status" aria-live="polite">
+    <div class="status-indicator status-{$connectionStatus[profileId]}" aria-hidden="true"></div>
+    <span>Server status: {$connectionStatus[profileId]}</span>
+    {#if $connectionStatus[profileId] === 'error'}
+      <span class="sr-only">There was an error connecting to the MUD server. Please check your settings and try again.</span>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .mud-connection-status {
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    font-size: 0.9em;
+  }
+  
+  .status-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
+  
+  .status-connected {
+    background-color: #50fa7b;
+  }
+  
+  .status-connecting {
+    background-color: #f1fa8c;
+  }
+  
+  .status-disconnected {
+    background-color: #999;
+  }
+  
+  .status-error {
+    background-color: #ff5555;
+  }
+  
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+</style>

src/lib/components/MudMdi.svelte

@@ -0,0 +1,507 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import MudTerminal from './MudTerminal.svelte';
+  import MudConnection from './MudConnection.svelte';
+  import { activeProfileId, profiles, connectionStatus, addToOutputHistory } from '$lib/stores/mudStore';
+  import type { MudProfile } from '$lib/profiles/ProfileManager';
+  
+  // Local state
+  let tabs: { id: string; profile: MudProfile }[] = [];
+  let activeTab: string | null = null;
+  let autoConnectOnStart = true; // Auto-connect to the active profile on start
+  
+  // Component references
+  let connections: { [key: string]: any } = {};
+  
+  // Initialize tabs from profiles
+  function initializeTabs() {
+    // Get the profiles from the store
+    const allProfiles = $profiles || [];
+    console.log('Initializing tabs with profiles:', allProfiles);
+    
+    if (allProfiles.length === 0) {
+      console.warn('No profiles available to create tabs');
+      tabs = [];
+      // If no tabs are available, we should show a message to create a profile
+      addToOutputHistory('No profiles available. Please create a profile in the sidebar.');
+      return;
+    }
+    
+    tabs = allProfiles.map(profile => ({
+      id: profile.id,
+      profile
+    }));
+    
+    console.log('Created tabs:', tabs);
+    
+    // Set the active tab from the store or default to the first tab
+    activeTab = $activeProfileId || (tabs.length > 0 ? tabs[0].id : null);
+    console.log('Active tab set to:', activeTab);
+    
+    // Update the active profile ID in the store
+    if (activeTab) {
+      activeProfileId.set(activeTab);
+      
+      // Auto-connect if enabled
+      if (autoConnectOnStart && tabs.length > 0 && !$connectionStatus[activeTab]) {
+        console.log(`Auto-connecting to tab: ${activeTab}`);
+        setTimeout(() => connectToMud(activeTab), 500);
+      }
+    }
+    
+    // Force a rerender of the tabs
+    setTimeout(() => {
+      console.log('Forcing tab rerender');
+      tabs = [...tabs]; 
+    }, 0);
+  }
+  
+  // Handle tab changes
+  function changeTab(tabId: string) {
+    activeTab = tabId;
+    activeProfileId.set(tabId);
+  }
+  
+  // Connect to a MUD server
+  function connectToMud(profileId: string) {
+    const connectionComponent = connections[profileId];
+    if (connectionComponent) {
+      connectionComponent.connect();
+    }
+  }
+  
+  // Disconnect from a MUD server
+  function disconnectFromMud(profileId: string) {
+    const connectionComponent = connections[profileId];
+    if (connectionComponent) {
+      connectionComponent.disconnect();
+    }
+  }
+  
+  // Close a tab
+  function closeTab(profileId: string) {
+    // Disconnect if connected
+    if ($connectionStatus[profileId] === 'connected') {
+      disconnectFromMud(profileId);
+    }
+    
+    // Remove the tab
+    tabs = tabs.filter(tab => tab.id !== profileId);
+    
+    // If the closed tab was active, activate another tab
+    if (activeTab === profileId) {
+      activeTab = tabs.length > 0 ? tabs[0].id : null;
+      activeProfileId.set(activeTab);
+    }
+  }
+  
+  // Add a new tab
+  function addTab(profile: MudProfile) {
+    // Check if a tab already exists for this profile
+    const existingTabIndex = tabs.findIndex(tab => tab.id === profile.id);
+    
+    if (existingTabIndex !== -1) {
+      // If it exists, just switch to it
+      changeTab(profile.id);
+    } else {
+      // Otherwise, add a new tab
+      tabs = [...tabs, { id: profile.id, profile }];
+      activeTab = profile.id;
+      activeProfileId.set(profile.id);
+    }
+  }
+  
+  // Handle keyboard events for accessibility
+  function handleTabKeyDown(event: KeyboardEvent, tabId: string) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      changeTab(tabId);
+    }
+  }
+  
+  // Update when profiles change
+  $: if ($profiles) {
+    console.log('Profiles updated in store, reinitializing tabs:', $profiles);
+    initializeTabs();
+  }
+
+  onMount(() => {
+    // Initial setup of tabs
+    initializeTabs();
+    
+    // Force a refresh of the UI after a short delay to ensure components render correctly
+    setTimeout(() => {
+      console.log('Forcing UI refresh');
+      tabs = [...tabs]; // Create a new array reference to trigger UI updates
+    }, 500);
+  });
+</script>
+
+<div class="mud-mdi">
+  <div class="mud-mdi-tabs" role="tablist">
+    {#each tabs as tab}
+      <button 
+        class="mud-mdi-tab"
+        class:active={activeTab === tab.id}
+        class:connected={$connectionStatus[tab.id] === 'connected'}
+        class:connecting={$connectionStatus[tab.id] === 'connecting'}
+        class:error={$connectionStatus[tab.id] === 'error'}
+        role="tab"
+        aria-selected={activeTab === tab.id}
+        aria-controls={`panel-${tab.id}`}
+        id={`tab-${tab.id}`}
+        on:click={() => changeTab(tab.id)}
+        on:keydown={(e) => handleTabKeyDown(e, tab.id)}
+      >
+        <span class="tab-name">{tab.profile.name}</span>
+        <span class="tab-status" aria-hidden="true">
+          {#if $connectionStatus[tab.id] === 'connected'}
+            <span class="status-indicator connected" title="Connected"></span>
+          {:else if $connectionStatus[tab.id] === 'connecting'}
+            <span class="status-indicator connecting" title="Connecting"></span>
+          {:else if $connectionStatus[tab.id] === 'error'}
+            <span class="status-indicator error" title="Error"></span>
+          {:else}
+            <span class="status-indicator disconnected" title="Disconnected"></span>
+          {/if}
+        </span>
+      </button>
+    {/each}
+    <div class="tab-spacer"></div>
+  </div>
+  
+  <div class="mud-mdi-content">
+    {#if tabs.length === 0}
+      <div class="mud-mdi-no-profiles">
+        <div class="no-profiles-message">
+          <h3>No Profiles Available</h3>
+          <p>Please create a new profile in the sidebar to get started.</p>
+        </div>
+      </div>
+    {:else}
+      {#each tabs as tab (tab.id)}
+        <div 
+          class="mud-mdi-pane" 
+          style="display: {activeTab === tab.id ? 'flex' : 'none'}"
+          role="tabpanel"
+          id={`panel-${tab.id}`}
+          aria-labelledby={`tab-${tab.id}`}
+        >
+          <div class="mud-mdi-pane-header">
+            <div class="mud-mdi-pane-title">
+              <span class="profile-name">{tab.profile.name}</span>
+              <span class="profile-host">{tab.profile.host}:{tab.profile.port} {tab.profile.useSSL ? '(SSL)' : ''}</span>
+            </div>
+            
+            <div class="mud-mdi-pane-actions">
+              {#if $connectionStatus[tab.id] === 'connected' || $connectionStatus[tab.id] === 'connecting'}
+                <button 
+                  type="button"
+                  class="btn-disconnect" 
+                  on:click={() => disconnectFromMud(tab.id)}
+                  aria-label="Disconnect from MUD server"
+                >
+                  Disconnect
+                </button>
+              {:else}
+                <button 
+                  type="button"
+                  class="btn-connect" 
+                  on:click={() => connectToMud(tab.id)}
+                  aria-label="Connect to MUD server"
+                >
+                  Connect
+                </button>
+              {/if}
+              <button 
+                type="button"
+                class="btn-close" 
+                on:click={() => closeTab(tab.id)}
+                aria-label="Close this MUD connection"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+          
+          <MudConnection
+            profileId={tab.id}
+            bind:this={connections[tab.id]}
+          />
+          <MudTerminal 
+            autofocus={activeTab === tab.id}
+          />
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .mud-mdi {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: var(--color-bg);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  
+  .mud-mdi-tabs {
+    display: flex;
+    background-color: var(--color-bg-alt);
+    border-bottom: 1px solid var(--color-border);
+    overflow-x: auto;
+    min-height: 40px;
+  }
+  
+  .mud-mdi-tab {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    background-color: var(--color-bg);
+    border-right: 1px solid var(--color-border);
+    cursor: pointer;
+    user-select: none;
+    min-width: 150px;
+    max-width: 200px;
+    height: 40px;
+    position: relative;
+    text-align: left;
+    border: none;
+    border-bottom: 2px solid transparent;
+  }
+  
+  .mud-mdi-tab:hover {
+    background-color: var(--color-bg-hover);
+  }
+  
+  .mud-mdi-tab:focus {
+    outline: 3px solid var(--color-primary);
+    outline-offset: -2px;
+    position: relative;
+    z-index: 2;
+  }
+  
+  .mud-mdi-tab:focus:not(:focus-visible) {
+    outline: none;
+  }
+  
+  .mud-mdi-tab:focus-visible {
+    outline: 3px solid var(--color-primary);
+    outline-offset: -2px;
+  }
+  
+  .mud-mdi-tab.active {
+    background-color: var(--color-bg-active);
+    border-bottom: 2px solid var(--color-primary);
+  }
+  
+  .tab-status {
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+  }
+  
+  .status-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+  
+  .status-indicator.connected {
+    background-color: #4caf50;
+  }
+  
+  .status-indicator.connecting {
+    background-color: #ff9800;
+  }
+  
+  .status-indicator.error {
+    background-color: #f44336;
+  }
+  
+  .status-indicator.disconnected {
+    background-color: #999;
+  }
+  
+  .tab-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+  
+  .tab-actions {
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+  }
+  
+  .tab-connect,
+  .tab-disconnect,
+  .tab-close {
+    background: none;
+    border: none;
+    font-size: 12px;
+    cursor: pointer;
+    padding: 2px 4px;
+    margin-left: 2px;
+    border-radius: 3px;
+  }
+  
+  .tab-connect:hover,
+  .tab-disconnect:hover,
+  .tab-close:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  
+  .tab-connect:focus,
+  .tab-disconnect:focus,
+  .tab-close:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 1px;
+  }
+  
+  .tab-connect {
+    color: #4caf50;
+  }
+  
+  .tab-disconnect {
+    color: #f44336;
+  }
+  
+  .tab-close {
+    color: #757575;
+  }
+  
+  .tab-spacer {
+    flex: 1;
+    border-bottom: 1px solid var(--color-border);
+  }
+  
+  .mud-mdi-content {
+    flex: 1;
+    position: relative;
+    background-color: var(--color-bg);
+    overflow: hidden;
+  }
+  
+  .mud-mdi-pane {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex !important; /* Force display flex */
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden; /* Prevent overflow issues */
+  }
+  
+  .mud-mdi-pane-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 16px;
+    background-color: var(--color-bg-alt);
+    border-bottom: 1px solid var(--color-border);
+    z-index: 10;
+  }
+  
+  .mud-mdi-pane-title {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .profile-name {
+    font-weight: bold;
+    font-size: 1rem;
+  }
+  
+  .profile-host {
+    font-size: 0.8rem;
+    color: var(--color-text-muted);
+  }
+  
+  .mud-mdi-pane-actions {
+    display: flex;
+    gap: 8px;
+  }
+  
+  .btn-connect, .btn-disconnect, .btn-close {
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    border: 1px solid var(--color-border);
+  }
+  
+  .btn-connect {
+    background-color: #4caf50;
+    color: white;
+    border-color: #43a047;
+  }
+  
+  .btn-disconnect {
+    background-color: #ff9800;
+    color: white;
+    border-color: #f57c00;
+  }
+  
+  .btn-close {
+    background-color: #f44336;
+    color: white;
+    border-color: #e53935;
+  }
+  
+  .btn-connect:hover, .btn-disconnect:hover, .btn-close:hover {
+    opacity: 0.9;
+  }
+  
+  .btn-connect:focus, .btn-disconnect:focus, .btn-close:focus {
+    outline: 3px solid var(--color-primary);
+    outline-offset: 2px;
+    position: relative;
+    z-index: 2;
+  }
+  
+  .btn-connect:focus:not(:focus-visible), 
+  .btn-disconnect:focus:not(:focus-visible), 
+  .btn-close:focus:not(:focus-visible) {
+    outline: none;
+  }
+  
+  .btn-connect:focus-visible, 
+  .btn-disconnect:focus-visible, 
+  .btn-close:focus-visible {
+    outline: 3px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  .mud-mdi-no-profiles {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+  }
+
+  .no-profiles-message {
+    text-align: center;
+    padding: 2rem;
+    max-width: 400px;
+    background-color: var(--color-bg-alt);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+  }
+
+  .no-profiles-message h3 {
+    margin-top: 0;
+    color: var(--color-primary);
+  }
+</style>

src/lib/components/MudTerminal.svelte

@@ -0,0 +1,567 @@
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { outputHistory, addToOutputHistory, addToInputHistory, navigateInputHistory, inputHistoryIndex, activeConnection, uiSettings, accessibilitySettings, inputHistory } from '$lib/stores/mudStore';
+  import { tick } from 'svelte';
+  import AnsiToHtml from 'ansi-to-html';
+  import { AccessibilityManager } from '$lib/accessibility/AccessibilityManager';
+
+  // Create event dispatcher
+  const dispatch = createEventDispatcher();
+  
+  // Props
+  export let autofocus = true;
+  export let placeholder = 'Enter command...';
+  export let aria_label = 'MUD Input';
+  
+  // Local state
+  let terminalElement: HTMLDivElement;
+  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
+  function handleSubmit(event: Event) {
+    event.preventDefault();
+    
+    if (!currentInput.trim()) return;
+    
+    // Interrupt speech if enabled
+    if ($accessibilitySettings.interruptSpeechOnEnter && accessibilityManager && accessibilityManager.isSpeaking()) {
+      accessibilityManager.stopSpeech();
+    }
+    
+    // Add to input history
+    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');
+    if (!isPassword) {
+      addToOutputHistory(`> ${currentInput}`, true);
+    } else {
+      addToOutputHistory(`> ********`, true);
+    }
+    
+    // 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 }]);
+      }
+    } else {
+      addToOutputHistory('Not connected to any MUD server.', false, [{ pattern: 'Not connected', color: '#ff5555', isRegex: false }]);
+    }
+    
+    // Clear the input
+    currentInput = '';
+    dispatch('input', { text: currentInput });
+    
+    // Focus the input again
+    if (inputElement) {
+      inputElement.focus();
+    }
+  }
+  
+  // Handle keyboard shortcuts
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      currentInput = navigateInputHistory('up', currentInput);
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      currentInput = navigateInputHistory('down', currentInput);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      currentInput = '';
+      inputHistoryIndex.set(-1);
+    }
+  }
+  
+  // Scroll to bottom of terminal
+  async function scrollToBottom() {
+    await tick();
+    if (terminalElement) {
+      terminalElement.scrollTop = terminalElement.scrollHeight;
+    }
+  }
+  
+  // Handle keyboard navigation in output window
+  function handleOutputKeyDown(event: KeyboardEvent) {
+    if (event.key === 'PageUp') {
+      event.preventDefault();
+      if (terminalElement) {
+        terminalElement.scrollTop -= terminalElement.clientHeight;
+      }
+    } else if (event.key === 'PageDown') {
+      event.preventDefault();
+      if (terminalElement) {
+        terminalElement.scrollTop += terminalElement.clientHeight;
+      }
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      if (terminalElement) {
+        terminalElement.scrollTop = 0;
+        // Focus first message
+        navigateToMessage(0);
+      }
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      scrollToBottom();
+      // Focus last message
+      navigateToMessage(messageElements.length - 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      navigatePreviousMessage();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      navigateNextMessage();
+    }
+  }
+  
+  // Update message elements reference and prepare for navigation
+  function updateMessageElements() {
+    if (terminalElement) {
+      // Get all line elements to make them individually navigable
+      messageElements = Array.from(terminalElement.querySelectorAll('.mud-terminal-line'));
+      
+      // Add tabindex and aria attributes for accessibility
+      messageElements.forEach((el, index) => {
+        const element = el as HTMLElement;
+        element.setAttribute('tabindex', '-1'); // Can be focused but not in tab order
+        element.setAttribute('aria-posinset', (index + 1).toString());
+        element.setAttribute('aria-setsize', messageElements.length.toString());
+        
+        // Don't add navigation instructions text to the elements
+        // Let the screen reader just read the content
+      });
+    }
+  }
+  
+  // Navigate to specific message by index
+  function navigateToMessage(index: number) {
+    if (index < 0 || index >= messageElements.length) return;
+    
+    // Remove focus from current message
+    if (currentFocusedMessageIndex >= 0 && currentFocusedMessageIndex < messageElements.length) {
+      messageElements[currentFocusedMessageIndex].classList.remove('focused-message');
+    }
+    
+    // Set current message index
+    currentFocusedMessageIndex = index;
+    
+    // Add focus class to current message
+    const messageElement = messageElements[currentFocusedMessageIndex];
+    messageElement.classList.add('focused-message');
+    messageElement.focus();
+    
+    // Make sure the message is in view
+    messageElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    
+    // Announce for screen readers - simplified and concise announcement
+    const messageNumber = currentFocusedMessageIndex + 1;
+    const totalMessages = messageElements.length;
+    const messageContent = messageElement.textContent || '';
+    
+    // Only announce the message number and content, not terminal instructions
+    const announcement = `${messageNumber} of ${totalMessages}: ${messageContent.substring(0, 100)}`;
+    
+    // Use aria-live region for announcement
+    const announcementElement = document.getElementById('message-announcement');
+    if (announcementElement) {
+      announcementElement.textContent = announcement;
+    }
+  }
+  
+  // Navigate to previous message
+  function navigatePreviousMessage() {
+    if (currentFocusedMessageIndex <= 0) {
+      // Already at the first message - go to the first one
+      navigateToMessage(0);
+    } else {
+      navigateToMessage(currentFocusedMessageIndex - 1);
+    }
+  }
+  
+  // Navigate to next message
+  function navigateNextMessage() {
+    if (currentFocusedMessageIndex >= messageElements.length - 1) {
+      // Already at the last message
+      navigateToMessage(messageElements.length - 1);
+    } else {
+      navigateToMessage(currentFocusedMessageIndex + 1);
+    }
+  }
+  
+  // Watch output history changes to scroll to bottom
+  $: {
+    if ($outputHistory) {
+      scrollToBottom();
+      // Update message elements when output history changes
+      setTimeout(updateMessageElements, 0);
+    }
+  }
+  
+  onMount(() => {
+    // Initialize accessibility manager
+    accessibilityManager = new AccessibilityManager();
+    
+    // Focus input on mount if autofocus is true
+    if (autofocus && inputElement) {
+      inputElement.focus();
+    }
+    
+    // Initial scroll to bottom
+    scrollToBottom();
+    
+    // Initialize message elements for navigation
+    updateMessageElements();
+  });
+  
+  // Format timestamp
+  function formatTimestamp(timestamp: number): string {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString();
+  }
+</script>
+
+<div class="mud-terminal-container" 
+     class:dark-mode={$uiSettings.isDarkMode} 
+     class:high-contrast={$accessibilitySettings.highContrast}
+     role="region"
+     aria-label="MUD Terminal"
+     tabindex="-1">
+  
+  <!-- Screen reader announcements -->
+  <div id="message-announcement" class="sr-only" aria-live="polite"></div>
+  
+  <div class="mud-terminal-output" 
+       bind:this={terminalElement} 
+       role="log" 
+       aria-live="polite"
+       aria-atomic="false"
+       aria-relevant="additions"
+       aria-label="MUD output"
+       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)}
+      <!-- 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}
+        {/if}
+      {/if}
+    {/each}
+  </div>
+  
+  <form class="mud-terminal-input-form" on:submit={handleSubmit} aria-label="MUD command input form">
+    <input
+      type="text"
+      class="mud-terminal-input"
+      bind:this={inputElement}
+      bind:value={currentInput}
+      on:keydown={handleKeyDown}
+      placeholder={placeholder}
+      aria-label={aria_label}
+      autocomplete="off"
+      spellcheck="false"
+      style="font-family: {$uiSettings.font}; font-size: {$accessibilitySettings.fontSize}px;"
+    />
+    <button type="submit" class="mud-terminal-submit-button" aria-label="Send command">Send</button>
+  </form>
+</div>
+
+<style>
+  .mud-terminal-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%; /* Ensure full width */
+    background-color: #f8f8f8;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative; /* Ensure proper stacking */
+    z-index: 1; /* Ensure proper stacking */
+  }
+  
+  .mud-terminal-container.dark-mode {
+    background-color: #282a36;
+    border-color: #44475a;
+    color: #f8f8f2;
+  }
+  
+  .mud-terminal-container.high-contrast {
+    background-color: #000;
+    color: #fff;
+    border-color: #fff;
+  }
+  
+  .mud-terminal-output {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  
+  .mud-terminal-output:focus {
+    outline: 2px solid var(--color-primary, #2196f3);
+    outline-offset: -2px;
+  }
+  
+  .mud-terminal-output:focus:not(:focus-visible) {
+    outline: none;
+  }
+  
+  .mud-terminal-line {
+    margin-bottom: 4px;
+    overflow-wrap: break-word;
+    padding: 2px;
+    border-radius: 2px;
+  }
+  
+  .mud-terminal-subline {
+    margin-bottom: 1px; /* Less space between split lines */
+    margin-left: 10px; /* Indent sublines to show they belong together */
+    padding: 1px;
+  }
+  
+  .mud-terminal-content {
+    display: inline-block;
+    width: 100%;
+    white-space: pre-wrap;
+  }
+  
+  /* Ensure <br> tags are properly rendered */
+  :global(.mud-terminal-content br) {
+    display: block;
+    content: "";
+    margin-top: 0.25em;
+  }
+  
+  .mud-input-line {
+    color: #6272a4;
+    font-weight: bold;
+  }
+  
+  .dark-mode .mud-input-line {
+    color: #8be9fd;
+  }
+  
+  .high-contrast .mud-input-line {
+    color: #ff0;
+  }
+  
+  .mud-timestamp {
+    color: #999;
+    margin-right: 8px;
+    font-size: 0.9em;
+    display: inline-block;
+    vertical-align: top;
+  }
+  
+  .dark-mode .mud-timestamp {
+    color: #6272a4;
+  }
+  
+  .high-contrast .mud-timestamp {
+    color: #0f0;
+  }
+  
+  .mud-terminal-input-form {
+    display: flex;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+  }
+  
+  .dark-mode .mud-terminal-input-form {
+    border-top-color: #44475a;
+  }
+  
+  .high-contrast .mud-terminal-input-form {
+    border-top-color: #fff;
+  }
+  
+  .mud-terminal-input {
+    flex: 1;
+    padding: 8px;
+    font-family: monospace;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+  
+  .dark-mode .mud-terminal-input {
+    background-color: #383a59;
+    color: #f8f8f2;
+    border-color: #44475a;
+  }
+  
+  .high-contrast .mud-terminal-input {
+    background-color: #000;
+    color: #fff;
+    border-color: #fff;
+  }
+  
+  .mud-terminal-submit-button {
+    margin-left: 10px;
+    padding: 8px 16px;
+    background-color: #6272a4;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .dark-mode .mud-terminal-submit-button {
+    background-color: #ff79c6;
+  }
+  
+  .high-contrast .mud-terminal-submit-button {
+    background-color: #fff;
+    color: #000;
+    border: 2px solid #fff;
+  }
+  
+  .mud-terminal-submit-button:hover {
+    opacity: 0.9;
+  }
+  
+  .mud-terminal-submit-button:active {
+    opacity: 0.8;
+  }
+  
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  
+  .focused-message {
+    outline: 2px solid var(--color-primary, #2196f3);
+    background-color: rgba(33, 150, 243, 0.1);
+  }
+  
+  .dark-mode .focused-message {
+    background-color: rgba(255, 121, 198, 0.2); /* Use a pink highlight for dark mode */
+  }
+  
+  .high-contrast .focused-message {
+    outline: 3px solid #fff;
+    background-color: #444;
+  }
+</style>

src/lib/components/ProfileEditor.svelte

@@ -0,0 +1,363 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { MudProfile } from '$lib/profiles/ProfileManager';
+  
+  const dispatch = createEventDispatcher();
+  
+  // Props
+  export let profile: MudProfile;
+  export let isNewProfile = false;
+  
+  // Local state
+  let localProfile = { ...profile };
+  let autoLogin = { ...localProfile.autoLogin || { enabled: false, username: '', password: '', commands: [] } };
+  let newCommand = '';
+  let accessibilityOptions = { ...localProfile.accessibilityOptions || {
+    textToSpeech: false,
+    highContrast: false,
+    speechRate: 1,
+    speechPitch: 1,
+    speechVolume: 1
+  }};
+  
+  // Handle form submission
+  function handleSubmit() {
+    console.log('Saving profile:', localProfile);
+    // Update local profile
+    localProfile.autoLogin = autoLogin;
+    localProfile.accessibilityOptions = accessibilityOptions;
+    
+    // Dispatch save event
+    dispatch('save', { profile: localProfile });
+  }
+  
+  // Handle cancel
+  function handleCancel() {
+    dispatch('cancel');
+  }
+  
+  // Add command to auto-login commands
+  function addCommand() {
+    if (newCommand.trim()) {
+      autoLogin.commands = [...autoLogin.commands, newCommand];
+      newCommand = '';
+    }
+  }
+  
+  // Remove command from auto-login commands
+  function removeCommand(index: number) {
+    autoLogin.commands = autoLogin.commands.filter((_, i) => i !== index);
+  }
+</script>
+
+<form class="profile-editor" on:submit|preventDefault={handleSubmit}>
+  <h2>{isNewProfile ? 'Create New Profile' : 'Edit Profile'}</h2>
+  
+  <div class="form-group">
+    <label for="name">Profile Name</label>
+    <input type="text" id="name" bind:value={localProfile.name} required />
+  </div>
+  
+  <div class="form-group">
+    <label for="host">Host</label>
+    <input type="text" id="host" bind:value={localProfile.host} required />
+  </div>
+  
+  <div class="form-group">
+    <label for="port">Port</label>
+    <input type="number" id="port" bind:value={localProfile.port} min="1" max="65535" required />
+  </div>
+  
+  <div class="form-group checkbox">
+    <label for="useSSL">
+      <input type="checkbox" id="useSSL" bind:checked={localProfile.useSSL} />
+      Use SSL
+    </label>
+  </div>
+  
+  <div class="form-group checkbox">
+    <label for="ansiColor">
+      <input type="checkbox" id="ansiColor" bind:checked={localProfile.ansiColor} />
+      Enable ANSI Colors
+    </label>
+  </div>
+  
+  <fieldset>
+    <legend>Auto Login</legend>
+    
+    <div class="form-group checkbox">
+      <label for="autoLoginEnabled">
+        <input type="checkbox" id="autoLoginEnabled" bind:checked={autoLogin.enabled} />
+        Enable Auto Login
+      </label>
+    </div>
+    
+    {#if autoLogin.enabled}
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input type="text" id="username" bind:value={autoLogin.username} />
+      </div>
+      
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input type="password" id="password" bind:value={autoLogin.password} />
+      </div>
+      
+      <div class="form-group">
+        <label id="commands-label">Auto-Login Commands</label>
+        <div class="commands-list" role="list" aria-labelledby="commands-label">
+          {#each autoLogin.commands as command, index}
+            <div class="command-item" role="listitem">
+              <span>{command}</span>
+              <button type="button" class="btn-remove" on:click={() => removeCommand(index)} aria-label={`Remove command ${command}`}>✕</button>
+            </div>
+          {/each}
+        </div>
+        
+        <div class="command-add">
+          <label for="new-command">New command</label>
+          <input type="text" id="new-command" placeholder="Add command" bind:value={newCommand} />
+          <button type="button" class="btn-add" on:click={addCommand}>Add</button>
+        </div>
+      </div>
+    {/if}
+  </fieldset>
+  
+  <fieldset>
+    <legend>Appearance</legend>
+    
+    <div class="form-group">
+      <label for="font">Font</label>
+      <select id="font" bind:value={localProfile.font}>
+        <option value="monospace">Monospace</option>
+        <option value="'Courier New', monospace">Courier New</option>
+        <option value="'Roboto Mono', monospace">Roboto Mono</option>
+        <option value="'Source Code Pro', monospace">Source Code Pro</option>
+      </select>
+    </div>
+    
+    <div class="form-group">
+      <label for="fontSize">Font Size</label>
+      <input type="number" id="fontSize" bind:value={localProfile.fontSize} min="8" max="24" />
+    </div>
+    
+    <div class="form-group">
+      <label for="theme">Theme</label>
+      <select id="theme" bind:value={localProfile.theme}>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+        <option value="dracula">Dracula</option>
+        <option value="solarized">Solarized</option>
+      </select>
+    </div>
+  </fieldset>
+  
+  <fieldset>
+    <legend>Accessibility</legend>
+    
+    <div class="form-group checkbox">
+      <label for="textToSpeech">
+        <input type="checkbox" id="textToSpeech" bind:checked={accessibilityOptions.textToSpeech} />
+        Enable Text-to-Speech
+      </label>
+    </div>
+    
+    <div class="form-group checkbox">
+      <label for="highContrast">
+        <input type="checkbox" id="highContrast" bind:checked={accessibilityOptions.highContrast} />
+        High Contrast Mode
+      </label>
+    </div>
+    
+    {#if accessibilityOptions.textToSpeech}
+      <div class="form-group">
+        <label for="speechRate">Speech Rate</label>
+        <input type="range" id="speechRate" bind:value={accessibilityOptions.speechRate} min="0.5" max="2" step="0.1" />
+        <span class="range-value">{accessibilityOptions.speechRate.toFixed(1)}</span>
+      </div>
+      
+      <div class="form-group">
+        <label for="speechPitch">Speech Pitch</label>
+        <input type="range" id="speechPitch" bind:value={accessibilityOptions.speechPitch} min="0.5" max="2" step="0.1" />
+        <span class="range-value">{accessibilityOptions.speechPitch.toFixed(1)}</span>
+      </div>
+      
+      <div class="form-group">
+        <label for="speechVolume">Speech Volume</label>
+        <input type="range" id="speechVolume" bind:value={accessibilityOptions.speechVolume} min="0.1" max="1" step="0.1" />
+        <span class="range-value">{accessibilityOptions.speechVolume.toFixed(1)}</span>
+      </div>
+    {/if}
+  </fieldset>
+  
+  <div class="form-actions">
+    <button type="button" class="btn-cancel" on:click={handleCancel}>Cancel</button>
+    <button type="submit" class="btn-save">Save</button>
+  </div>
+</form>
+
+<style>
+  .profile-editor {
+    padding: 20px;
+    max-width: 100%;
+    margin: 0;
+    color: #333;
+  }
+  
+  h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+    color: #333;
+  }
+  
+  .form-group {
+    margin-bottom: 15px;
+  }
+  
+  label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #555;
+  }
+  
+  input[type="text"],
+  input[type="number"],
+  input[type="password"],
+  select {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .checkbox {
+    display: flex;
+    align-items: center;
+  }
+  
+  .checkbox label {
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    margin-bottom: 0;
+  }
+  
+  .checkbox input {
+    margin-right: 10px;
+  }
+  
+  fieldset {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 15px;
+    margin-bottom: 20px;
+  }
+  
+  legend {
+    padding: 0 10px;
+    font-weight: bold;
+    color: #555;
+  }
+  
+  .commands-list {
+    margin-bottom: 10px;
+    max-height: 150px;
+    overflow-y: auto;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 5px;
+  }
+  
+  .command-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    border-bottom: 1px solid #eee;
+  }
+  
+  .command-item:last-child {
+    border-bottom: none;
+  }
+  
+  .command-add {
+    display: flex;
+    gap: 10px;
+  }
+  
+  .command-add label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+  
+  .btn-add {
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .btn-remove {
+    background-color: #f44336;
+    color: white;
+    border: none;
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 12px;
+  }
+  
+  .form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+  }
+  
+  .btn-cancel {
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .btn-save {
+    background-color: #2196f3;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .btn-cancel:hover, .btn-add:hover, .btn-save:hover {
+    opacity: 0.9;
+  }
+  
+  input[type="range"] {
+    width: 80%;
+    vertical-align: middle;
+  }
+  
+  .range-value {
+    display: inline-block;
+    width: 15%;
+    text-align: right;
+    color: #555;
+  }
+</style>

src/lib/components/PwaUpdater.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  
+  let updateAvailable = false;
+  let registration: ServiceWorkerRegistration | null = null;
+  let offlineReady = false;
+  
+  function closeUpdateNotification() {
+    updateAvailable = false;
+  }
+  
+  function closeOfflineNotification() {
+    offlineReady = false;
+  }
+  
+  function updateApp() {
+    if (registration && registration.waiting) {
+      // Send a message to the waiting service worker
+      registration.waiting.postMessage({ type: 'SKIP_WAITING' });
+    }
+    window.location.reload();
+  }
+  
+  onMount(() => {
+    if ('serviceWorker' in navigator) {
+      // Handle service worker update detection
+      navigator.serviceWorker.ready.then(reg => {
+        registration = reg;
+        
+        // Initial installation
+        if (reg.active) {
+          offlineReady = true;
+          setTimeout(() => { offlineReady = false; }, 3000); // Auto-hide after 3 seconds
+        }
+        
+        // Check for updates
+        reg.addEventListener('updatefound', () => {
+          const newWorker = reg.installing;
+          if (!newWorker) return;
+          
+          newWorker.addEventListener('statechange', () => {
+            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+              updateAvailable = true;
+            }
+          });
+        });
+      });
+      
+      // Listen for controller change (after skipWaiting)
+      let refreshing = false;
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        if (refreshing) return;
+        refreshing = true;
+        window.location.reload();
+      });
+    }
+  });
+</script>
+
+{#if updateAvailable}
+  <div class="pwa-update-notification">
+    <div class="notification-content">
+      <p>A new version of SvelteMUD is available!</p>
+      <div class="notification-actions">
+        <button class="update-button" on:click={updateApp}>Update Now</button>
+        <button class="close-button" on:click={closeUpdateNotification}>Later</button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if offlineReady}
+  <div class="pwa-offline-notification">
+    <div class="notification-content">
+      <p>SvelteMUD is now available offline!</p>
+      <button class="close-button" on:click={closeOfflineNotification}>Close</button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .pwa-update-notification, .pwa-offline-notification {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #282a36;
+    color: #f8f8f2;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    max-width: 300px;
+    animation: slide-in 0.3s ease-out;
+  }
+  
+  .pwa-offline-notification {
+    background-color: #50fa7b;
+    color: #282a36;
+  }
+  
+  .notification-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .notification-actions {
+    display: flex;
+    gap: 10px;
+  }
+  
+  button {
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+  }
+  
+  .update-button {
+    background-color: #ff79c6;
+    color: #282a36;
+  }
+  
+  .close-button {
+    background-color: transparent;
+    border: 1px solid currentColor;
+    color: inherit;
+  }
+  
+  @keyframes slide-in {
+    from {
+      transform: translateY(100px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+</style>

src/lib/components/SimpleModal.svelte

@@ -0,0 +1,58 @@
+<script>
+  export let show = true; // Force modal to be visible by default
+  
+  function closeModal() {
+    show = false;
+  }
+  
+  function stopPropagation(e) {
+    e.stopPropagation();
+  }
+  
+  function handleKeydown(e) {
+    if (e.key === 'Escape') {
+      closeModal();
+    }
+  }
+</script>
+
+{#if show}
+  <div 
+    class="modal-backdrop" 
+    on:click={closeModal}
+    on:keydown={handleKeydown}
+    role="dialog"
+    aria-modal="true"
+  >
+    <div 
+      class="modal-content" 
+      on:click={stopPropagation}
+      on:keydown={handleKeydown}
+      role="document"
+    >
+      <slot></slot>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .modal-content {
+    background-color: white;
+    max-width: 90%;
+    max-height: 90%;
+    overflow: auto;
+  }
+</style>

src/lib/components/SimpleProfileEditor.svelte

@@ -0,0 +1,104 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  
+  const dispatch = createEventDispatcher();
+  
+  // Simple default profile
+  export let profile = {
+    id: `profile-${Date.now()}`,
+    name: 'New Profile',
+    host: 'mud.example.com',
+    port: 23,
+    useSSL: false,
+    ansiColor: true
+  };
+  
+  function handleSubmit() {
+    console.log('Saving profile:', profile);
+    dispatch('save', { profile });
+  }
+  
+  function handleCancel() {
+    dispatch('cancel');
+  }
+</script>
+
+<div class="simple-editor">
+  <h2>Create New Profile</h2>
+  
+  <div class="form-row">
+    <label for="name">Name:</label>
+    <input type="text" id="name" bind:value={profile.name} />
+  </div>
+  
+  <div class="form-row">
+    <label for="host">Host:</label>
+    <input type="text" id="host" bind:value={profile.host} />
+  </div>
+  
+  <div class="form-row">
+    <label for="port">Port:</label>
+    <input type="number" id="port" bind:value={profile.port} />
+  </div>
+  
+  <div class="buttons">
+    <button type="button" on:click={handleCancel}>Cancel</button>
+    <button type="button" on:click={handleSubmit}>Save</button>
+  </div>
+</div>
+
+<style>
+  .simple-editor {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    width: 400px;
+  }
+  
+  h2 {
+    margin-top: 0;
+    color: #333;
+  }
+  
+  .form-row {
+    margin-bottom: 15px;
+  }
+  
+  label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+  
+  input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+  
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+  }
+  
+  button {
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  button:first-child {
+    background: #f5f5f5;
+    border: 1px solid #ddd;
+  }
+  
+  button:last-child {
+    background: #2196f3;
+    color: white;
+    border: none;
+  }
+</style>

src/lib/components/TriggerEditor.svelte

@@ -0,0 +1,360 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { Trigger } from '$lib/triggers/TriggerSystem';
+  
+  const dispatch = createEventDispatcher();
+  
+  // Props
+  export let trigger: Trigger | null = null;
+  export let isNew = false;
+  
+  // Local state
+  let localTrigger: Trigger = trigger ? { ...trigger } : {
+    id: `trigger-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+    name: '',
+    pattern: '',
+    isRegex: false,
+    isEnabled: true,
+    soundFile: '',
+    sendText: '',
+    highlightColor: '',
+    priority: 0
+  };
+  
+  // Available sounds
+  let availableSounds: string[] = [
+    'alert.mp3',
+    'beep.mp3',
+    'chime.mp3',
+    'ding.mp3',
+    'notify.mp3'
+  ];
+  
+  // Track if we're using a built-in sound or custom URL
+  let soundType = localTrigger.soundFile?.startsWith('http') ? 'url' : 'preloaded';
+  
+  // Watch for changes in soundType
+  $: if (soundType === 'preloaded' && localTrigger.soundFile?.startsWith('http')) {
+    localTrigger.soundFile = '';
+  }
+  
+  // Handle form submission
+  function handleSubmit() {
+    dispatch('save', { trigger: localTrigger });
+  }
+  
+  // Handle cancel
+  function handleCancel() {
+    dispatch('cancel');
+  }
+  
+  // Test the regex pattern
+  let testInput = '';
+  let testResult: RegExpMatchArray | null = null;
+  let testError: string | null = null;
+  
+  function testPattern() {
+    testError = null;
+    testResult = null;
+    
+    if (!localTrigger.pattern || !testInput) return;
+    
+    if (localTrigger.isRegex) {
+      try {
+        const regex = new RegExp(localTrigger.pattern, 'g');
+        testResult = testInput.match(regex);
+      } catch (error) {
+        testError = `Invalid regex pattern: ${error}`;
+      }
+    } else {
+      testResult = testInput.includes(localTrigger.pattern) ? [localTrigger.pattern] : null;
+    }
+  }
+</script>
+
+<div class="trigger-editor">
+  <h2>{isNew ? 'Create New Trigger' : 'Edit Trigger'}</h2>
+  
+  <form on:submit|preventDefault={handleSubmit}>
+    <div class="form-group">
+      <label for="name">Trigger Name</label>
+      <input type="text" id="name" bind:value={localTrigger.name} required />
+    </div>
+    
+    <div class="form-group">
+      <label for="pattern">Pattern</label>
+      <input type="text" id="pattern" bind:value={localTrigger.pattern} required />
+    </div>
+    
+    <div class="form-group checkbox">
+      <label for="isRegex">
+        <input type="checkbox" id="isRegex" bind:checked={localTrigger.isRegex} />
+        Use Regular Expression
+      </label>
+    </div>
+    
+    <div class="form-group checkbox">
+      <label for="isEnabled">
+        <input type="checkbox" id="isEnabled" bind:checked={localTrigger.isEnabled} />
+        Enable Trigger
+      </label>
+    </div>
+    
+    <div class="form-group">
+      <label for="priority">Priority</label>
+      <input type="number" id="priority" bind:value={localTrigger.priority} min="0" max="100" />
+      <small>Higher values trigger first</small>
+    </div>
+    
+    <fieldset>
+      <legend>Actions</legend>
+      
+      <div class="form-group">
+        <label for="soundType">Sound Type</label>
+        <select id="soundType" bind:value={soundType}>
+          <option value="preloaded">Built-in Sound</option>
+          <option value="url">Custom URL</option>
+        </select>
+      </div>
+      
+      {#if soundType === 'preloaded'}
+        <div class="form-group">
+          <label for="soundFile">Play Sound</label>
+          <select id="soundFile" bind:value={localTrigger.soundFile}>
+            <option value="">None</option>
+            {#each availableSounds as sound}
+              <option value={sound}>{sound}</option>
+            {/each}
+          </select>
+        </div>
+      {:else}
+        <div class="form-group">
+          <label for="soundUrl">Sound URL</label>
+          <input type="text" id="soundUrl" bind:value={localTrigger.soundFile} placeholder="https://example.com/sound.mp3" />
+          <small>Enter a full URL to an audio file (MP3, WAV, OGG)</small>
+        </div>
+      {/if}
+      
+      <div class="form-group">
+        <label for="sendText">Send Text</label>
+        <input type="text" id="sendText" bind:value={localTrigger.sendText} />
+        {#if localTrigger.isRegex}
+          <small>Use $1, $2, etc. to reference captured groups</small>
+        {/if}
+      </div>
+      
+      <div class="form-group">
+        <label for="highlightColor">Highlight Color</label>
+        <input type="color" id="highlightColor" bind:value={localTrigger.highlightColor} />
+      </div>
+      
+      <div class="form-group">
+        <label for="action">Custom Action (JavaScript)</label>
+        <textarea id="action" bind:value={localTrigger.action} rows="5" placeholder="// JavaScript code to run when trigger matches"></textarea>
+        <small>Available variables: text, matches</small>
+      </div>
+    </fieldset>
+    
+    <fieldset>
+      <legend>Pattern Tester</legend>
+      
+      <div class="form-group">
+        <label for="testInput">Test Input</label>
+        <textarea id="testInput" bind:value={testInput} rows="3" placeholder="Enter sample text to test your pattern"></textarea>
+      </div>
+      
+      <button type="button" class="btn-test" on:click={testPattern}>Test Pattern</button>
+      
+      {#if testError}
+        <div class="test-error">
+          {testError}
+        </div>
+      {:else if testResult !== null}
+        <div class="test-result">
+          <strong>Result:</strong> 
+          {#if testResult.length > 0}
+            <span class="match-success">Matched {testResult.length} {testResult.length === 1 ? 'time' : 'times'}</span>
+            <div class="match-list">
+              {#each testResult as match, index}
+                <div class="match-item">
+                  <strong>Match {index + 1}:</strong> {match}
+                </div>
+              {/each}
+            </div>
+          {:else}
+            <span class="match-fail">No matches found</span>
+          {/if}
+        </div>
+      {/if}
+    </fieldset>
+    
+    <div class="form-actions">
+      <button type="button" class="btn-cancel" on:click={handleCancel}>Cancel</button>
+      <button type="submit" class="btn-save">Save Trigger</button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .trigger-editor {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    max-width: 700px;
+    margin: 0 auto;
+  }
+  
+  h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+    color: #333;
+  }
+  
+  .form-group {
+    margin-bottom: 15px;
+  }
+  
+  label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #555;
+  }
+  
+  input[type="text"],
+  input[type="number"],
+  select,
+  textarea {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  textarea {
+    resize: vertical;
+    font-family: monospace;
+  }
+  
+  input[type="color"] {
+    width: 50px;
+    height: 30px;
+    padding: 0;
+    vertical-align: middle;
+  }
+  
+  .checkbox {
+    display: flex;
+    align-items: center;
+  }
+  
+  .checkbox label {
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    margin-bottom: 0;
+  }
+  
+  .checkbox input {
+    margin-right: 10px;
+  }
+  
+  small {
+    display: block;
+    color: #777;
+    margin-top: 3px;
+    font-size: 12px;
+  }
+  
+  fieldset {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 15px;
+    margin-bottom: 20px;
+  }
+  
+  legend {
+    padding: 0 10px;
+    font-weight: bold;
+    color: #555;
+  }
+  
+  .test-error {
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #ffebee;
+    color: #c62828;
+    border-radius: 4px;
+  }
+  
+  .test-result {
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+  }
+  
+  .match-success {
+    color: #2e7d32;
+    font-weight: bold;
+  }
+  
+  .match-fail {
+    color: #c62828;
+    font-weight: bold;
+  }
+  
+  .match-list {
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  
+  .match-item {
+    padding: 5px 0;
+    border-bottom: 1px solid #eee;
+  }
+  
+  .match-item:last-child {
+    border-bottom: none;
+  }
+  
+  .form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+  }
+  
+  .btn-cancel {
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .btn-save, .btn-test {
+    background-color: #2196f3;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .btn-test {
+    background-color: #4caf50;
+    margin-bottom: 10px;
+  }
+  
+  .btn-cancel:hover, .btn-save:hover, .btn-test:hover {
+    opacity: 0.9;
+  }
+</style>

src/lib/connection/MudConnection.ts

@@ -0,0 +1,456 @@
+import { EventEmitter } from '$lib/utils/EventEmitter';
+import type { GmcpHandler } from '$lib/gmcp/GmcpHandler';
+
+// IAC codes for telnet negotiation
+enum TelnetCommand {
+  IAC = 255,  // Interpret As Command
+  DONT = 254,
+  DO = 253,
+  WONT = 252,
+  WILL = 251,
+  SB = 250,   // Subnegotiation Begin
+  SE = 240,   // Subnegotiation End
+  GMCP = 201, // Generic MUD Communication Protocol
+}
+
+interface MudConnectionOptions {
+  host: string;
+  port: number;
+  gmcpHandler?: GmcpHandler;
+  useSSL?: boolean;
+}
+
+export class MudConnection extends EventEmitter {
+  private host: string;
+  private port: number;
+  private useSSL: boolean;
+  private webSocket: WebSocket | null = null;
+  private gmcpHandler: GmcpHandler | null = null;
+  private buffer: number[] = [];
+  private connected: boolean = false;
+  private negotiationBuffer: number[] = [];
+  private isInIAC: boolean = false;
+  private inSubnegotiation: boolean = false;
+  private simulationMode: boolean = false; // Disable simulation mode to use real connections
+
+  constructor(options: MudConnectionOptions) {
+    super();
+    this.host = options.host;
+    this.port = options.port;
+    this.useSSL = options.useSSL || false;
+    this.gmcpHandler = options.gmcpHandler || null;
+  }
+
+  /**
+   * Connect to the MUD server
+   */
+  public connect(): void {
+    // For development/testing purposes, we'll use a simulated connection
+    if (this.simulationMode) {
+      this.connectSimulated();
+      return;
+    }
+    
+    // Connect through the standalone WebSocket server on port 3001
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    const wsHost = `${window.location.hostname}:3001`;
+    
+    const url = `${wsProtocol}://${wsHost}/mud-ws?host=${encodeURIComponent(this.host)}&port=${this.port}&useSSL=${this.useSSL}`;
+    console.log('Connecting to WebSocket server:', url);
+    
+    this.webSocket = new WebSocket(url);
+    
+    this.webSocket.binaryType = 'arraybuffer';
+    
+    this.webSocket.onopen = () => {
+      this.connected = true;
+      this.emit('connected');
+      
+      // Send GMCP negotiation upon connection
+      if (this.gmcpHandler) {
+        this.sendIAC(TelnetCommand.WILL, TelnetCommand.GMCP);
+      }
+    };
+    
+    this.webSocket.onclose = () => {
+      this.connected = false;
+      this.emit('disconnected');
+    };
+    
+    this.webSocket.onerror = (error) => {
+      console.error('WebSocket error:', error);
+      this.emit('error', `WebSocket error: Connection to ${this.host}:${this.port} failed. Please check your settings and ensure the MUD server is running.`);
+    };
+    
+    this.webSocket.onmessage = (event) => {
+      if (event.data instanceof ArrayBuffer) {
+        // Binary data
+        this.handleIncomingData(new Uint8Array(event.data));
+      } else if (typeof event.data === 'string') {
+        // Text data
+        this.emit('received', event.data);
+      } else if (event.data instanceof Blob) {
+        // Blob data (sometimes WebSockets send this instead of ArrayBuffer)
+        const reader = new FileReader();
+        reader.onload = () => {
+          if (reader.result instanceof ArrayBuffer) {
+            this.handleIncomingData(new Uint8Array(reader.result));
+          }
+        };
+        reader.readAsArrayBuffer(event.data);
+      }
+    };
+  }
+
+  /**
+   * Connect to a simulated MUD server for testing
+   */
+  private connectSimulated(): void {
+    console.log('Using simulated MUD connection');
+    
+    // Simulate connection delay
+    setTimeout(() => {
+      this.connected = true;
+      this.emit('connected');
+      
+      // Send welcome message
+      const welcomeMessage = `
+============================================================
+|                Welcome to ${this.host}                   |
+============================================================
+
+This is a simulated connection for testing purposes.
+Commands you type will be echoed back to the terminal.
+
+Type 'help' for a list of available commands.
+Type 'look' to see the current room.
+`;
+      setTimeout(() => {
+        this.emit('received', welcomeMessage);
+      }, 500);
+    }, 1000);
+  }
+
+  /**
+   * Send text to the MUD server
+   */
+  public send(text: string): void {
+    if (!this.connected) {
+      throw new Error('Not connected to MUD server');
+    }
+    
+    // In simulation mode, generate appropriate responses
+    if (this.simulationMode) {
+      this.handleSimulatedCommand(text);
+      return;
+    }
+    
+    if (!this.webSocket) {
+      throw new Error('WebSocket not initialized');
+    }
+    
+    // Check if the WebSocket is in a valid state for sending
+    if (this.webSocket.readyState !== WebSocket.OPEN) {
+      this.emit('error', `Cannot send message: WebSocket is not open (state: ${this.webSocket.readyState})`);
+      return;
+    }
+    
+    try {
+      // Append newline to the text
+      const data = new TextEncoder().encode(text + '\n');
+      this.webSocket.send(data);
+      
+      // Emit the data for possible triggers
+      this.emit('sent', text);
+    } catch (error) {
+      console.error('Error sending data:', error);
+      this.emit('error', `Failed to send message: ${error.message}`);
+    }
+  }
+
+  /**
+   * Handle commands in simulation mode
+   */
+  private handleSimulatedCommand(command: string): void {
+    // Emit that we sent the command
+    this.emit('sent', command);
+    
+    // Process command with a small delay to simulate network latency
+    setTimeout(() => {
+      const cmd = command.trim().toLowerCase();
+      
+      if (cmd === 'help') {
+        this.emit('received', `
+Available commands:
+- help: Show this help message
+- look: Look at the current room
+- say <message>: Say something
+- who: Show who's online
+- inventory: Show your inventory
+- quit: Disconnect
+`);
+      } else if (cmd === 'look') {
+        this.emit('received', `
+The Testing Room
+================
+You are in a simple testing room. The walls are white and featureless,
+with a single door to the north. A sign on the wall reads "Simulation Mode".
+
+Obvious exits: north
+
+You see a test object here.
+`);
+      } else if (cmd.startsWith('say ')) {
+        const message = command.substring(4);
+        this.emit('received', `You say, "${message}"\n`);
+      } else if (cmd === 'who') {
+        this.emit('received', `
+Players online:
+- TestPlayer1 (Idle)
+- TestPlayer2 (AFK)
+- You
+
+Total: 3 players
+`);
+      } else if (cmd === 'inventory' || cmd === 'i') {
+        this.emit('received', `
+You are carrying:
+- a test item
+- a notebook
+- some coins (15)
+`);
+      } else if (cmd === 'quit' || cmd === 'exit') {
+        this.emit('received', 'Goodbye! Thanks for testing.\n');
+        setTimeout(() => this.disconnect(), 1000);
+      } else {
+        this.emit('received', `Unknown command: ${command}\nType 'help' for a list of commands.\n`);
+      }
+    }, 200);
+  }
+
+  /**
+   * Disconnect from the MUD server
+   */
+  public disconnect(): void {
+    if (this.simulationMode) {
+      this.connected = false;
+      this.emit('disconnected');
+      return;
+    }
+    
+    if (this.webSocket) {
+      this.webSocket.close();
+      this.webSocket = null;
+    }
+  }
+
+  /**
+   * Handle incoming data from the MUD server
+   */
+  private handleIncomingData(data: Uint8Array): void {
+    console.log(`Received ${data.length} bytes from server`);
+    
+    // Quickly check if we need to handle telnet negotiation
+    let containsIAC = false;
+    for (let i = 0; i < data.length; i++) {
+      if (data[i] === TelnetCommand.IAC) {
+        containsIAC = true;
+        break;
+      }
+    }
+    
+    // Fast path if no IAC codes
+    if (!containsIAC && !this.isInIAC) {
+      const text = new TextDecoder().decode(data);
+      this.emit('received', text);
+      return;
+    }
+    
+    // Debug: Log the raw bytes if IAC is present
+    if (containsIAC) {
+      const hexData = Array.from(data).map(b => b.toString(16).padStart(2, '0')).join(' ');
+      console.log(`Data with IAC: ${hexData}`);
+    }
+    
+    // Process each byte in the incoming data
+    for (let i = 0; i < data.length; i++) {
+      const byte = data[i];
+      
+      if (this.isInIAC) {
+        // Add byte to negotiation buffer
+        this.negotiationBuffer.push(byte);
+        
+        // Check for special sequences
+        if (this.inSubnegotiation) {
+          // Inside subnegotiation - look for IAC SE
+          if (byte === TelnetCommand.SE && 
+              this.negotiationBuffer.length > 0 && 
+              this.negotiationBuffer[this.negotiationBuffer.length - 2] === TelnetCommand.IAC) {
+            
+            console.log('FOUND IAC SE SEQUENCE - End of subnegotiation');
+            
+            // Process the complete subnegotiation
+            this.handleCompleteSubnegotiation();
+            
+            // Reset state
+            this.isInIAC = false;
+            this.inSubnegotiation = false;
+            this.negotiationBuffer = [];
+          }
+        } else if (this.negotiationBuffer.length === 2) {
+          // After IAC, check what command it is
+          if (byte === TelnetCommand.SB) {
+            // Start of subnegotiation
+            this.inSubnegotiation = true;
+            console.log('Started subnegotiation - waiting for option code');
+          } else if (byte === TelnetCommand.WILL || byte === TelnetCommand.DO) {
+            // Need one more byte for option
+            console.log(`Telnet WILL/DO command, waiting for option`);
+          } else {
+            // Simple 3-byte command
+            this.processSimpleTelnetCommand();
+            this.isInIAC = false;
+            this.negotiationBuffer = [];
+          }
+        } else if (this.negotiationBuffer.length === 3 && !this.inSubnegotiation) {
+          // Complete 3-byte command like IAC WILL X or IAC DO X
+          this.processSimpleTelnetCommand();
+          this.isInIAC = false;
+          this.negotiationBuffer = [];
+        }
+      } else if (byte === TelnetCommand.IAC) {
+        // Start of telnet command
+        this.isInIAC = true;
+        this.negotiationBuffer = [byte];
+        console.log('Found IAC - start of telnet command');
+      } else {
+        // Normal data byte, add to buffer
+        this.buffer.push(byte);
+      }
+    }
+    
+    // Process any complete text in the buffer
+    if (this.buffer.length > 0) {
+      const text = new TextDecoder().decode(new Uint8Array(this.buffer));
+      this.buffer = [];
+      
+      // Emit the received text for display and trigger processing
+      this.emit('received', text);
+    }
+  }
+
+  /**
+   * Process a simple telnet command (3 bytes: IAC CMD OPTION)
+   */
+  private processSimpleTelnetCommand(): void {
+    try {
+      const [iac, command, option] = this.negotiationBuffer;
+      
+      console.log(`Processing telnet command: IAC(${iac}) ${command} ${option}`);
+      
+      // Handle specific commands
+      if ((command === TelnetCommand.WILL || command === TelnetCommand.DO) && option === TelnetCommand.GMCP) {
+        console.log('Server indicates WILL/DO GMCP, responding with DO GMCP');
+        // Server wants to use GMCP, we'll respond with IAC DO GMCP
+        this.sendIAC(TelnetCommand.DO, TelnetCommand.GMCP);
+        
+        // And request Core.Hello
+        if (this.gmcpHandler) {
+          console.log('Requesting GMCP capabilities');
+          this.gmcpHandler.requestCapabilities();
+        }
+      }
+    } catch (error) {
+      console.error('Error processing telnet command:', error);
+    }
+  }
+
+  /**
+   * Handle a complete telnet subnegotiation sequence
+   */
+  private handleCompleteSubnegotiation(): void {
+    try {
+      console.log(`Handling subnegotiation, buffer length: ${this.negotiationBuffer.length}`);
+      
+      // Check if this is a GMCP subnegotiation
+      // IAC SB GMCP ... IAC SE
+      // Indexes:  0  1   2  ... -2 -1
+      if (this.negotiationBuffer.length >= 5 && this.negotiationBuffer[2] === TelnetCommand.GMCP) {
+        console.log('Processing complete GMCP subnegotiation');
+        
+        try {
+          // Extract the GMCP data (skip IAC SB GMCP, and the final IAC SE)
+          const gmcpData = this.negotiationBuffer.slice(3, -2);
+          const gmcpText = new TextDecoder().decode(new Uint8Array(gmcpData));
+          
+          console.log('RECEIVED GMCP DATA:', gmcpText);
+          
+          // Process the GMCP message
+          if (this.gmcpHandler) {
+            setTimeout(() => {
+              try {
+                console.log('Passing GMCP to handler:', gmcpText);
+                this.gmcpHandler?.handleGmcpMessage(gmcpText);
+              } catch (error) {
+                console.error('Error in GMCP handler:', error);
+              }
+            }, 0);
+          } else {
+            console.warn('No GMCP handler available for message:', gmcpText);
+          }
+        } catch (error) {
+          console.error('Error processing GMCP data:', error, 'Buffer:', this.negotiationBuffer);
+        }
+      } else {
+        console.log(`Non-GMCP subnegotiation complete, option: ${this.negotiationBuffer[2]}`);
+      }
+    } catch (error) {
+      console.error('Error handling subnegotiation:', error);
+    }
+  }
+
+  /**
+   * Send a telnet IAC sequence
+   */
+  private sendIAC(command: TelnetCommand, option: TelnetCommand): void {
+    if (!this.connected || !this.webSocket) {
+      return;
+    }
+    
+    const data = new Uint8Array([TelnetCommand.IAC, command, option]);
+    this.webSocket.send(data);
+  }
+
+  /**
+   * Send a GMCP message
+   */
+  public sendGmcp(module: string, data: any): void {
+    if (!this.connected) {
+      return;
+    }
+    
+    if (this.simulationMode) {
+      console.log(`GMCP send (simulated): ${module}`, data);
+      return;
+    }
+    
+    if (!this.webSocket) {
+      return;
+    }
+    
+    const gmcpString = `${module} ${JSON.stringify(data)}`;
+    const gmcpData = new TextEncoder().encode(gmcpString);
+    
+    // Create the IAC SB GMCP <data> IAC SE sequence
+    const telnetSequence = new Uint8Array([
+      TelnetCommand.IAC,
+      TelnetCommand.SB,
+      TelnetCommand.GMCP,
+      ...gmcpData,
+      TelnetCommand.IAC,
+      TelnetCommand.SE
+    ]);
+    
+    this.webSocket.send(telnetSequence);
+  }
+}

src/lib/gmcp/GmcpHandler.ts

@@ -0,0 +1,123 @@
+import { EventEmitter } from '$lib/utils/EventEmitter';
+import { logGmcpMessage } from '$lib/stores/mudStore';
+import type { GmcpPackageHandler } from './packages/GmcpPackageHandler';
+import { ClientMediaPackage } from './packages/ClientMediaPackage';
+import { ClientKeystrokePackage } from './packages/ClientKeystrokePackage';
+import { CorePackage } from './packages/CorePackage';
+
+export type GmcpPackage = {
+  name: string;
+  version: string;
+};
+
+export class GmcpHandler extends EventEmitter {
+  private supportedPackages: Map<string, GmcpPackage> = new Map();
+  private receivedCapabilities: boolean = false;
+  private packageHandlers: Map<string, GmcpPackageHandler> = new Map();
+
+  constructor() {
+    super();
+    
+    // Register and initialize package handlers
+    this.registerPackageHandler(new CorePackage());
+    this.registerPackageHandler(new ClientMediaPackage());
+    this.registerPackageHandler(new ClientKeystrokePackage());
+  }
+  
+  /**
+   * Register a GMCP package handler
+   */
+  public registerPackageHandler(handler: GmcpPackageHandler): void {
+    // Initialize the handler with this event emitter
+    handler.initialize(this);
+    
+    // Register the package
+    this.registerPackage(handler.packageName, handler.version);
+    
+    // Store the handler
+    this.packageHandlers.set(handler.packageName, handler);
+    
+    console.log(`Registered GMCP package handler: ${handler.packageName} v${handler.version}`);
+  }
+
+  /**
+   * Register a GMCP package that the client supports
+   */
+  public registerPackage(name: string, version: string): void {
+    this.supportedPackages.set(name, { name, version });
+  }
+
+  /**
+   * Request capabilities from the server
+   */
+  public requestCapabilities(): void {
+    this.emit('sendGmcp', 'Core.Hello', {
+      client: 'SvelteMUD',
+      version: '0.1.0'
+    });
+    
+    this.emit('sendGmcp', 'Core.Supports.Set', [
+      ...Array.from(this.supportedPackages.values())
+        .map(pkg => `${pkg.name} ${pkg.version}`)
+    ]);
+  }
+
+  /**
+   * Handle an incoming GMCP message
+   */
+  public handleGmcpMessage(message: string): void {
+    try {
+      console.log('GmcpHandler received message:', message);
+      
+      // Extract module and data from the message
+      const spaceIndex = message.indexOf(' ');
+      if (spaceIndex === -1) {
+        // No space found, might be a module without data
+        console.log('GMCP message has no data, using module name only:', message);
+        this.emit('gmcp', message, {});
+        return;
+      }
+      
+      const module = message.substring(0, spaceIndex);
+      const jsonData = message.substring(spaceIndex + 1);
+      let data: any;
+      
+      try {
+        data = JSON.parse(jsonData);
+        console.log('GMCP data successfully parsed for module:', module, data);
+      } catch (e) {
+        console.error('Failed to parse GMCP data:', jsonData);
+        data = {};
+      }
+      
+      // Find the appropriate package handler
+      let handled = false;
+      for (const [packagePrefix, handler] of this.packageHandlers.entries()) {
+        if (module.startsWith(packagePrefix)) {
+          handler.handleMessage(module, data);
+          handled = true;
+          break;
+        }
+      }
+      
+      // If not handled by a specific package, handle it generically
+      if (!handled) {
+        console.log(`No specific handler for GMCP module: ${module}`);
+      }
+      
+      // Log the GMCP message for debugging
+      console.log('Calling logGmcpMessage for module:', module);
+      logGmcpMessage(module, data);
+      
+      // Emit the general GMCP event for custom handling
+      this.emit('gmcp', module, data);
+      
+      // Emit a module-specific event
+      this.emit(`gmcp:${module}`, data);
+    } catch (error) {
+      console.error('Error handling GMCP message:', error);
+    }
+  }
+
+
+}

src/lib/gmcp/packages/ClientKeystrokePackage.ts

@@ -0,0 +1,22 @@
+import type { EventEmitter } from '$lib/utils/EventEmitter';
+import type { GmcpPackageHandler } from './GmcpPackageHandler';
+
+export class ClientKeystrokePackage implements GmcpPackageHandler {
+  public readonly packageName = 'Client.Keystroke';
+  public readonly version = '1';
+  private emitter: EventEmitter | null = null;
+  
+  initialize(emitter: EventEmitter): void {
+    this.emitter = emitter;
+  }
+  
+  handleMessage(module: string, data: any): void {
+    if (module === 'Client.Keystroke.Capture') {
+      // Handle keystroke capture request
+      this.emitter?.emit('captureKeystroke', data.keys || [], data.type || 'all');
+    } else if (module === 'Client.Keystroke.Release') {
+      // Handle keystroke release request
+      this.emitter?.emit('releaseKeystroke');
+    }
+  }
+}

src/lib/gmcp/packages/ClientMediaPackage.ts

@@ -0,0 +1,302 @@
+import type { EventEmitter } from '$lib/utils/EventEmitter';
+import type { GmcpPackageHandler } from './GmcpPackageHandler';
+import { Howl } from 'howler';
+import { get } from 'svelte/store';
+import { uiSettings } from '$lib/stores/mudStore';
+
+// Interface to track sound information
+interface SoundInfo {
+  key?: number;
+  sound: Howl;
+  url?: string;
+  tag?: string;
+  originalVolume?: number; // Store the original volume to recalculate with global
+}
+
+export class ClientMediaPackage implements GmcpPackageHandler {
+  public readonly packageName = 'Client.Media';
+  public readonly version = '1';
+  private emitter: EventEmitter | null = null;
+  
+  // Maps to track active sounds
+  private activeSounds: Map<string, SoundInfo> = new Map(); // id -> SoundInfo
+  private keyToIdMap: Map<number, string> = new Map(); // key -> id
+  private tagToIdsMap: Map<string, Set<string>> = new Map(); // tag -> Set of ids
+  
+  initialize(emitter: EventEmitter): void {
+    this.emitter = emitter;
+    console.log('ClientMediaPackage initialized');
+    
+    // Subscribe to global volume changes to update active sounds
+    this.setupVolumeSubscription();
+  }
+  
+  /**
+   * Set up subscription to global volume changes
+   */
+  private setupVolumeSubscription(): void {
+    try {
+      // Only available in browser context
+      if (typeof window !== 'undefined') {
+        uiSettings.subscribe(settings => {
+          // Update all active sounds with the new global volume
+          this.updateAllSoundVolumes(settings.globalVolume);
+        });
+      }
+    } catch (error) {
+      console.error('Error setting up volume subscription:', error);
+    }
+  }
+  
+  /**
+   * Update all active sound volumes based on new global volume
+   */
+  private updateAllSoundVolumes(globalVolume: number): void {
+    try {
+      console.log(`Updating all sound volumes with global volume: ${globalVolume}`);
+      
+      // Update each active sound
+      for (const [id, info] of this.activeSounds.entries()) {
+        if (info.sound && typeof info.sound.volume === 'function') {
+          // Calculate new volume based on original volume (if available) or current volume
+          const originalVolume = info.originalVolume !== undefined ? info.originalVolume : 1.0;
+          const newVolume = originalVolume * globalVolume;
+          
+          console.log(`Updating sound ${id} volume: ${originalVolume} * ${globalVolume} = ${newVolume}`);
+          info.sound.volume(newVolume);
+        }
+      }
+    } catch (error) {
+      console.error('Error updating sound volumes:', error);
+    }
+  }
+  
+  handleMessage(module: string, data: any): void {
+    try {
+      if (module === 'Client.Media.Play') {
+        this.handlePlay(data);
+      } else if (module === 'Client.Media.Stop') {
+        this.handleStop(data);
+      }
+    } catch (error) {
+      console.error('Error handling GMCP Media message:', error);
+    }
+  }
+  
+  /**
+   * Handle Client.Media.Play GMCP message
+   */
+  private handlePlay(data: any): void {
+    try {
+      console.log('GMCP Media.Play received:', data);
+      
+      // Extract key and tag if present
+      const key = data.key;
+      const tag = data.tag;
+      
+      // Build the full URL
+      let fullUrl = '';
+      
+      if (data.url && data.name) {
+        const baseUrl = data.url.endsWith('/') ? data.url.slice(0, -1) : data.url;
+        const fileName = data.name.startsWith('/') ? data.name.slice(1) : data.name;
+        fullUrl = `${baseUrl}/${fileName}`;
+      } else if (data.url) {
+        fullUrl = data.url;
+      } else if (data.name) {
+        fullUrl = data.name;
+      }
+      
+      if (!fullUrl) {
+        console.error('No URL provided for media playback');
+        return;
+      }
+      
+      console.log(`Playing sound from: ${fullUrl}`);
+      
+      // Get global volume setting
+      const globalVolume = get(uiSettings).globalVolume || 0.7;
+      
+      // Calculate volume (normalize from 0-100 to 0-1 if needed)
+      let soundVolume = globalVolume;
+      
+      // Store original volume for later adjustments
+      let originalVolume = 1.0;
+      
+      // Apply volume from the GMCP data if provided
+      if (typeof data.volume === 'number') {
+        // Convert 0-100 range to 0-1 if needed
+        originalVolume = data.volume > 1 ? data.volume / 100 : data.volume;
+        
+        // Scale relative to global volume
+        soundVolume = originalVolume * globalVolume;
+        
+        console.log(`Using sound volume: ${originalVolume} (original: ${data.volume}) * global: ${globalVolume} = ${soundVolume}`);
+      } else {
+        console.log(`No volume specified, using global volume: ${globalVolume}`);
+      }
+      
+      // Create sound
+      const sound = new Howl({
+        src: [fullUrl],
+        volume: soundVolume,
+        loop: !!data.loop,
+        html5: true
+      });
+      
+      // Generate a unique ID for this sound
+      const soundId = `sound-${Date.now()}-${Math.random().toString(36).substring(2, 5)}`;
+      
+      // Store sound info
+      this.activeSounds.set(soundId, {
+        key: key,
+        sound: sound,
+        url: fullUrl,
+        tag: tag,
+        originalVolume: originalVolume // Store original volume for volume adjustments
+      });
+      
+      // Map key to ID if provided
+      if (key !== undefined) {
+        this.keyToIdMap.set(key, soundId);
+      }
+      
+      // Map tag to ID if provided
+      if (tag) {
+        if (!this.tagToIdsMap.has(tag)) {
+          this.tagToIdsMap.set(tag, new Set());
+        }
+        this.tagToIdsMap.get(tag)?.add(soundId);
+      }
+      
+      // Play the sound
+      sound.play();
+      
+      // Set up cleanup when sound ends
+      sound.once('end', () => {
+        console.log(`Sound ${soundId} finished playing`);
+        this.cleanupSound(soundId);
+      });
+      
+      // Emit an event for other components
+      this.emitter?.emit('playSound', fullUrl, soundVolume, !!data.loop);
+    } catch (error) {
+      console.error('Error in handlePlay:', error);
+    }
+  }
+  
+  /**
+   * Handle Client.Media.Stop GMCP message
+   */
+  private handleStop(data: any): void {
+    try {
+      console.log('GMCP Media.Stop received:', data);
+      
+      // Stop by key if provided
+      if (data.key !== undefined) {
+        console.log(`Stopping sound with key: ${data.key}`);
+        const soundId = this.keyToIdMap.get(data.key);
+        
+        if (soundId) {
+          this.stopSound(soundId);
+          console.log(`Stopped sound with key ${data.key}`);
+        } else {
+          console.log(`No sound found with key ${data.key}`);
+        }
+      }
+      // Stop by tag if provided
+      else if (data.tag) {
+        console.log(`Stopping sounds with tag: ${data.tag}`);
+        const ids = this.tagToIdsMap.get(data.tag);
+        
+        if (ids && ids.size > 0) {
+          // Create a copy of the set to avoid iteration issues during deletion
+          [...ids].forEach(id => {
+            this.stopSound(id);
+          });
+          console.log(`Stopped ${ids.size} sounds with tag ${data.tag}`);
+        } else {
+          console.log(`No sounds found with tag ${data.tag}`);
+        }
+      }
+      // If url provided, find and stop matching sounds
+      else if (data.url) {
+        console.log(`Stopping sounds matching URL: ${data.url}`);
+        let count = 0;
+        
+        for (const [id, info] of this.activeSounds.entries()) {
+          if (info.url && info.url.includes(data.url)) {
+            this.stopSound(id);
+            count++;
+          }
+        }
+        
+        console.log(`Stopped ${count} sounds matching URL`);
+      }
+      // Stop all sounds if no specifics provided
+      else {
+        console.log('Stopping all sounds');
+        const count = this.activeSounds.size;
+        
+        for (const [id] of this.activeSounds.entries()) {
+          this.stopSound(id);
+        }
+        
+        console.log(`Stopped all ${count} sounds`);
+      }
+    } catch (error) {
+      console.error('Error in handleStop:', error);
+    }
+  }
+  
+  /**
+   * Stop a specific sound by ID and clean up
+   */
+  private stopSound(soundId: string): void {
+    const info = this.activeSounds.get(soundId);
+    if (!info) return;
+    
+    try {
+      // Stop the sound
+      info.sound.stop();
+      
+      // Clean up resources
+      this.cleanupSound(soundId);
+    } catch (error) {
+      console.error(`Error stopping sound ${soundId}:`, error);
+      // Still try to clean up even if stop fails
+      this.cleanupSound(soundId);
+    }
+  }
+  
+  /**
+   * Clean up resources for a sound
+   */
+  private cleanupSound(soundId: string): void {
+    try {
+      const info = this.activeSounds.get(soundId);
+      if (!info) return;
+      
+      // Remove key mapping if exists
+      if (info.key !== undefined) {
+        this.keyToIdMap.delete(info.key);
+      }
+      
+      // Remove from tag mapping if exists
+      if (info.tag && this.tagToIdsMap.has(info.tag)) {
+        this.tagToIdsMap.get(info.tag)?.delete(soundId);
+        // Clean up empty tag sets
+        if (this.tagToIdsMap.get(info.tag)?.size === 0) {
+          this.tagToIdsMap.delete(info.tag);
+        }
+      }
+      
+      // Remove from active sounds
+      this.activeSounds.delete(soundId);
+      
+      console.log(`Cleaned up sound ${soundId}`);
+    } catch (error) {
+      console.error(`Error cleaning up sound ${soundId}:`, error);
+    }
+  }
+}

src/lib/gmcp/packages/CorePackage.ts

@@ -0,0 +1,28 @@
+import type { EventEmitter } from '$lib/utils/EventEmitter';
+import type { GmcpPackageHandler } from './GmcpPackageHandler';
+
+export class CorePackage implements GmcpPackageHandler {
+  public readonly packageName = 'Core';
+  public readonly version = '1';
+  private emitter: EventEmitter | null = null;
+  
+  initialize(emitter: EventEmitter): void {
+    this.emitter = emitter;
+  }
+  
+  handleMessage(module: string, data: any): void {
+    if (module === 'Core.Hello') {
+      this.emitter?.emit('gmcp:coreHello', data);
+    } else if (module === 'Core.Supports.Set') {
+      if (Array.isArray(data)) {
+        // Process the supported packages
+        const serverPackages = data.map(pkg => {
+          const [name, version] = pkg.split(' ');
+          return { name, version: version || '1' };
+        });
+        
+        this.emitter?.emit('gmcp:coreSupportsSet', serverPackages);
+      }
+    }
+  }
+}

src/lib/gmcp/packages/GmcpPackageHandler.ts

@@ -0,0 +1,15 @@
+import type { EventEmitter } from '$lib/utils/EventEmitter';
+
+export interface GmcpPackageHandler {
+  // The name of the GMCP package (e.g., "Client.Media")
+  readonly packageName: string;
+  
+  // The version of the GMCP package
+  readonly version: string;
+  
+  // Initialize the package handler with an event emitter
+  initialize(emitter: EventEmitter): void;
+  
+  // Handle an incoming GMCP message for this package
+  handleMessage(module: string, data: any): void;
+}

src/lib/profiles/ProfileManager.ts

@@ -0,0 +1,265 @@
+import { EventEmitter } from '$lib/utils/EventEmitter';
+
+export interface MudProfile {
+  id: string;
+  name: string;
+  host: string;
+  port: number;
+  useSSL: boolean;
+  autoLogin?: {
+    enabled: boolean;
+    username: string;
+    password: string;
+    commands: string[];
+  };
+  triggers?: string; // JSON string of triggers
+  aliases?: {
+    [key: string]: string;
+  };
+  macros?: {
+    [key: string]: string;
+  };
+  gmcpPackages?: string[]; // Additional GMCP packages to support
+  font?: string;
+  fontSize?: number;
+  theme?: string;
+  ansiColor: boolean;
+  accessibilityOptions?: {
+    textToSpeech: boolean;
+    highContrast: boolean;
+    speechRate: number;
+    speechPitch: number;
+    speechVolume: number;
+  };
+}
+
+export class ProfileManager extends EventEmitter {
+  private profiles: MudProfile[] = [];
+  private activeProfileId: string | null = null;
+  private storageKey = 'svelte-mud-profiles';
+
+  constructor() {
+    super();
+    this.loadProfiles();
+  }
+
+  /**
+   * Load profiles from local storage
+   */
+  private loadProfiles(): void {
+    if (typeof window === 'undefined') {
+      return; // Skip during SSR
+    }
+
+    try {
+      const storedProfiles = localStorage.getItem(this.storageKey);
+      if (storedProfiles) {
+        this.profiles = JSON.parse(storedProfiles);
+        console.log('Loaded profiles from localStorage:', this.profiles);
+        this.emit('profilesLoaded', this.profiles);
+      } else {
+        console.log('No profiles found in localStorage, creating default profile');
+        // Add a default profile if none exist
+        const defaultProfile = this.createDefaultProfile();
+        defaultProfile.name = 'Aardwolf MUD';
+        defaultProfile.host = 'aardmud.org';
+        defaultProfile.port = 23;
+        this.addProfile(defaultProfile);
+      }
+    } catch (error) {
+      console.error('Failed to load profiles from local storage:', error);
+      // Add a default profile if there was an error
+      const defaultProfile = this.createDefaultProfile();
+      defaultProfile.name = 'Aardwolf MUD';
+      defaultProfile.host = 'aardmud.org';
+      defaultProfile.port = 23;
+      this.addProfile(defaultProfile);
+    }
+  }
+
+  /**
+   * Save profiles to local storage
+   */
+  private saveProfiles(): void {
+    if (typeof window === 'undefined') {
+      return; // Skip during SSR
+    }
+
+    try {
+      localStorage.setItem(this.storageKey, JSON.stringify(this.profiles));
+    } catch (error) {
+      console.error('Failed to save profiles to local storage:', error);
+    }
+  }
+
+  /**
+   * Add a new profile
+   */
+  public addProfile(profile: MudProfile): void {
+    // Ensure all required fields are present
+    if (!profile.id) {
+      profile.id = `profile-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    
+    if (profile.useSSL === undefined) {
+      profile.useSSL = false;
+    }
+    
+    if (profile.ansiColor === undefined) {
+      profile.ansiColor = true;
+    }
+    
+    // Check if a profile with the same ID already exists
+    const existingIndex = this.profiles.findIndex(p => p.id === profile.id);
+    
+    if (existingIndex !== -1) {
+      // Update existing profile
+      this.profiles[existingIndex] = profile;
+      console.log(`Updated profile ${profile.id} (${profile.name})`, profile);
+      this.emit('profileUpdated', profile);
+    } else {
+      // Add new profile
+      this.profiles.push(profile);
+      console.log(`Added new profile ${profile.id} (${profile.name})`, profile);
+      this.emit('profileAdded', profile);
+    }
+    
+    // Save to storage
+    this.saveProfiles();
+  }
+
+  /**
+   * Remove a profile by ID
+   */
+  public removeProfile(profileId: string): void {
+    const index = this.profiles.findIndex(p => p.id === profileId);
+    
+    if (index !== -1) {
+      const removedProfile = this.profiles[index];
+      this.profiles.splice(index, 1);
+      
+      // If the active profile was removed, clear the active profile
+      if (this.activeProfileId === profileId) {
+        this.activeProfileId = null;
+        this.emit('activeProfileChanged', null);
+      }
+      
+      this.emit('profileRemoved', removedProfile);
+      this.saveProfiles();
+    }
+  }
+
+  /**
+   * Get all profiles
+   */
+  public getProfiles(): MudProfile[] {
+    return [...this.profiles];
+  }
+
+  /**
+   * Get a profile by ID
+   */
+  public getProfile(profileId: string): MudProfile | undefined {
+    return this.profiles.find(p => p.id === profileId);
+  }
+
+  /**
+   * Set the active profile
+   */
+  public setActiveProfile(profileId: string): void {
+    const profile = this.getProfile(profileId);
+    
+    if (profile) {
+      this.activeProfileId = profileId;
+      this.emit('activeProfileChanged', profile);
+    } else {
+      throw new Error(`Profile with ID ${profileId} not found`);
+    }
+  }
+
+  /**
+   * Get the active profile
+   */
+  public getActiveProfile(): MudProfile | null {
+    if (!this.activeProfileId) return null;
+    
+    const activeProfile = this.getProfile(this.activeProfileId);
+    return activeProfile || null;
+  }
+
+  /**
+   * Import profiles from a JSON string
+   */
+  public importProfiles(json: string): void {
+    try {
+      const imported = JSON.parse(json);
+      
+      if (Array.isArray(imported)) {
+        imported.forEach(profile => {
+          if (this.isValidProfile(profile)) {
+            this.addProfile(profile);
+          }
+        });
+      }
+      
+      this.emit('profilesImported', imported);
+    } catch (error) {
+      console.error('Failed to import profiles:', error);
+      throw new Error('Failed to import profiles. Invalid format.');
+    }
+  }
+
+  /**
+   * Export profiles to a JSON string
+   */
+  public exportProfiles(): string {
+    return JSON.stringify(this.profiles, null, 2);
+  }
+
+  /**
+   * Validate a profile object
+   */
+  private isValidProfile(obj: any): boolean {
+    return (
+      typeof obj === 'object' &&
+      typeof obj.id === 'string' &&
+      typeof obj.name === 'string' &&
+      typeof obj.host === 'string' &&
+      typeof obj.port === 'number' &&
+      typeof obj.useSSL === 'boolean' &&
+      typeof obj.ansiColor === 'boolean'
+    );
+  }
+
+  /**
+   * Create a default profile
+   */
+  public createDefaultProfile(): MudProfile {
+    const id = `profile-${Date.now()}`;
+    
+    return {
+      id,
+      name: 'New Profile',
+      host: 'mud.example.com',
+      port: 23,
+      useSSL: false,
+      ansiColor: true,
+      autoLogin: {
+        enabled: false,
+        username: '',
+        password: '',
+        commands: []
+      },
+      aliases: {},
+      macros: {},
+      gmcpPackages: [],
+      accessibilityOptions: {
+        textToSpeech: false,
+        highContrast: false,
+        speechRate: 1,
+        speechPitch: 1,
+        speechVolume: 1
+      }
+    };
+  }
+}

src/lib/stores/mudStore.ts

@@ -0,0 +1,214 @@
+import { writable, derived, get } from 'svelte/store';
+import type { MudProfile } from '$lib/profiles/ProfileManager';
+import type { MudConnection } from '$lib/connection/MudConnection';
+import type { Trigger } from '$lib/triggers/TriggerSystem';
+
+// Store for active connections
+export const connections = writable<{ [key: string]: MudConnection }>({});
+
+// Store for profiles
+export const profiles = writable<MudProfile[]>([]);
+
+// Store for active profile ID
+export const activeProfileId = writable<string | null>(null);
+
+// Store for triggers
+export const triggers = writable<Trigger[]>([]);
+
+// Store for MUD output history
+export const outputHistory = writable<{ 
+  id: string; 
+  text: string; 
+  timestamp: number; 
+  isInput?: boolean; 
+  highlights?: { pattern: string; color: string; isRegex: boolean }[] 
+}[]>([]);
+
+// Store for connection status
+export const connectionStatus = writable<{ [key: string]: 'connected' | 'disconnected' | 'connecting' | 'error' }>({});
+
+// Store for accessibility settings
+export const accessibilitySettings = writable({
+  textToSpeech: false,
+  highContrast: false,
+  fontSize: 16,
+  lineSpacing: 1.2,
+  speechRate: 1,
+  speechPitch: 1,
+  speechVolume: 1,
+  interruptSpeechOnEnter: true // New setting for interrupting speech on Enter key
+});
+
+// Store for UI settings
+export const uiSettings = writable({
+  isDarkMode: true,
+  showTimestamps: true,
+  showSidebar: true,
+  splitViewDirection: 'horizontal', // or 'vertical'
+  inputHistorySize: 100,
+  outputBufferSize: 1000,
+  ansiColor: true,
+  font: 'monospace',
+  debugGmcp: false, // Setting for GMCP debugging
+  globalVolume: 0.7 // Global volume control for sounds (0-1)
+});
+
+// Store for input history
+export const inputHistory = writable<string[]>([]);
+export const inputHistoryIndex = writable<number>(-1);
+
+// Derived store for active profile
+export const activeProfile = derived(
+  [profiles, activeProfileId],
+  ([$profiles, $activeProfileId]) => {
+    if (!$activeProfileId) return null;
+    return $profiles.find(profile => profile.id === $activeProfileId) || null;
+  }
+);
+
+// Derived store for active connection
+export const activeConnection = derived(
+  [connections, activeProfileId],
+  ([$connections, $activeProfileId]) => {
+    if (!$activeProfileId) return null;
+    return $connections[$activeProfileId] || null;
+  }
+);
+
+// Store for GMCP data
+export const gmcpData = writable<{ [module: string]: any }>({});
+
+// Store for GMCP debug messages
+export const gmcpDebugLog = writable<{ id: string; module: string; data: any; timestamp: number }[]>([]);
+
+// Helper functions
+export function addToOutputHistory(text: string, isInput = false, highlights: { pattern: string; color: string; isRegex: boolean }[] = []) {
+  outputHistory.update(history => {
+    const maxSize = get(uiSettings).outputBufferSize;
+    const newItem = {
+      id: `output-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+      text,
+      timestamp: Date.now(),
+      isInput,
+      highlights
+    };
+    
+    // Limit history size
+    const updatedHistory = [...history, newItem];
+    if (updatedHistory.length > maxSize) {
+      return updatedHistory.slice(updatedHistory.length - maxSize);
+    }
+    return updatedHistory;
+  });
+}
+
+/**
+ * Add GMCP message to debug log and possibly to output history if enabled
+ */
+export function logGmcpMessage(module: string, data: any) {
+  console.log('logGmcpMessage called for module:', module);
+  
+  // Always add to debug log
+  gmcpDebugLog.update(log => {
+    const maxSize = 100; // Keep last 100 GMCP messages
+    const newItem = {
+      id: `gmcp-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+      module,
+      data,
+      timestamp: Date.now()
+    };
+    
+    const updatedLog = [...log, newItem];
+    if (updatedLog.length > maxSize) {
+      return updatedLog.slice(updatedLog.length - maxSize);
+    }
+    return updatedLog;
+  });
+  
+  // Get the CURRENT state of the debugGmcp setting, not a snapshot
+  let currentSettings = get(uiSettings);
+  console.log('Current debugGmcp setting:', currentSettings.debugGmcp);
+  
+  // If debug mode is enabled, also add to normal output
+  if (currentSettings.debugGmcp) {
+    console.log('GMCP debug is enabled, adding to output history');
+    const dataString = typeof data === 'object' ? JSON.stringify(data, null, 2) : String(data);
+    const gmcpText = `[GMCP] ${module}: ${dataString}`;
+    
+    addToOutputHistory(gmcpText, false, [
+      { pattern: '\\[GMCP\\]', color: '#8be9fd', isRegex: true },
+      { pattern: module, color: '#ff79c6', isRegex: false }
+    ]);
+  } else {
+    console.log('GMCP debug is disabled, not adding to output history');
+  }
+}
+
+export function addToInputHistory(text: string) {
+  inputHistory.update(history => {
+    // Don't add empty strings or duplicates of the last command
+    if (!text || (history.length > 0 && history[history.length - 1] === text)) {
+      return history;
+    }
+    
+    const maxSize = get(uiSettings).inputHistorySize;
+    const updatedHistory = [...history, text];
+    
+    // Limit history size
+    if (updatedHistory.length > maxSize) {
+      return updatedHistory.slice(updatedHistory.length - maxSize);
+    }
+    
+    return updatedHistory;
+  });
+  
+  // Reset history index to point to the end
+  inputHistoryIndex.set(-1);
+}
+
+export function navigateInputHistory(direction: 'up' | 'down', currentInput: string) {
+  const history = get(inputHistory);
+  let index = get(inputHistoryIndex);
+  
+  if (history.length === 0) return currentInput;
+  
+  if (direction === 'up') {
+    // If we're at the beginning of navigation, save the current input
+    if (index === -1) {
+      inputHistory.update(h => {
+        if (currentInput && h[h.length - 1] !== currentInput) {
+          return [...h, currentInput];
+        }
+        return h;
+      });
+    }
+    
+    // Move up in history
+    index = Math.min(history.length - 1, index + 1);
+  } else if (direction === 'down') {
+    // Move down in history
+    index = Math.max(-1, index - 1);
+  }
+  
+  inputHistoryIndex.set(index);
+  
+  // Return appropriate value from history or empty string
+  if (index === -1) {
+    return '';
+  } else {
+    return history[history.length - 1 - index];
+  }
+}
+
+export function clearOutputHistory() {
+  outputHistory.set([]);
+}
+
+export function updateGmcpData(module: string, data: any) {
+  gmcpData.update(currentData => {
+    return {
+      ...currentData,
+      [module]: data
+    };
+  });
+}

src/lib/triggers/TriggerSystem.ts

@@ -0,0 +1,278 @@
+import { EventEmitter } from '$lib/utils/EventEmitter';
+import { Howl } from 'howler';
+import { get } from 'svelte/store';
+import { uiSettings } from '$lib/stores/mudStore';
+
+export interface Trigger {
+  id: string;
+  name: string;
+  pattern: string;
+  isRegex: boolean;
+  isEnabled: boolean;
+  soundFile?: string;
+  action?: string;
+  sendText?: string;
+  highlightColor?: string;
+  priority: number;
+}
+
+export class TriggerSystem extends EventEmitter {
+  private triggers: Trigger[] = [];
+  private sounds: Map<string, Howl> = new Map();
+  private storage: Storage | null = null;
+  private readonly STORAGE_KEY = 'mud-triggers';
+  
+  constructor() {
+    super();
+    
+    // Initialize storage if available
+    if (typeof window !== 'undefined') {
+      this.storage = window.localStorage;
+      this.loadTriggersFromStorage();
+    }
+  }
+  
+  /**
+   * Load triggers from storage
+   */
+  private loadTriggersFromStorage(): void {
+    if (!this.storage) return;
+    
+    try {
+      const triggersJson = this.storage.getItem(this.STORAGE_KEY);
+      if (triggersJson) {
+        const loadedTriggers = JSON.parse(triggersJson);
+        if (Array.isArray(loadedTriggers)) {
+          loadedTriggers.forEach(trigger => {
+            if (this.isValidTrigger(trigger)) {
+              this.triggers.push(trigger);
+            }
+          });
+          
+          // Sort by priority
+          this.triggers.sort((a, b) => b.priority - a.priority);
+          
+          console.log(`Loaded ${this.triggers.length} triggers from storage`);
+        }
+      }
+    } catch (error) {
+      console.error('Error loading triggers from storage:', error);
+    }
+  }
+  
+  /**
+   * Save triggers to storage
+   */
+  private saveTriggersToStorage(): void {
+    if (!this.storage) return;
+    
+    try {
+      this.storage.setItem(this.STORAGE_KEY, JSON.stringify(this.triggers));
+      console.log(`Saved ${this.triggers.length} triggers to storage`);
+    } catch (error) {
+      console.error('Error saving triggers to storage:', error);
+    }
+  }
+  
+  /**
+   * Add a new trigger
+   */
+  public addTrigger(trigger: Trigger): void {
+    const existingTriggerIndex = this.triggers.findIndex(t => t.id === trigger.id);
+    
+    if (existingTriggerIndex !== -1) {
+      // Update existing trigger
+      this.triggers[existingTriggerIndex] = trigger;
+    } else {
+      // Add new trigger
+      this.triggers.push(trigger);
+    }
+    
+    // Sort triggers by priority
+    this.triggers.sort((a, b) => b.priority - a.priority);
+    
+    // Preload sound if specified
+    if (trigger.soundFile) {
+      this.loadSound(trigger.id, trigger.soundFile);
+    }
+    
+    // Save triggers to storage
+    this.saveTriggersToStorage();
+    
+    this.emit('triggerAdded', trigger);
+  }
+  
+  /**
+   * Remove a trigger by ID
+   */
+  public removeTrigger(triggerId: string): void {
+    const index = this.triggers.findIndex(t => t.id === triggerId);
+    
+    if (index !== -1) {
+      const trigger = this.triggers[index];
+      this.triggers.splice(index, 1);
+      
+      // Unload sound if it was loaded
+      if (this.sounds.has(triggerId)) {
+        this.sounds.delete(triggerId);
+      }
+      
+      // Save triggers to storage
+      this.saveTriggersToStorage();
+      
+      this.emit('triggerRemoved', trigger);
+    }
+  }
+  
+  /**
+   * Process text for triggers
+   */
+  public processTriggers(text: string): void {
+    // Process only enabled triggers
+    for (const trigger of this.triggers.filter(t => t.isEnabled)) {
+      let matched = false;
+      let matches: RegExpMatchArray | null = null;
+      
+      if (trigger.isRegex) {
+        try {
+          const regex = new RegExp(trigger.pattern, 'g');
+          matches = text.match(regex);
+          matched = matches !== null;
+        } catch (error) {
+          console.error(`Invalid regex pattern in trigger ${trigger.name}:`, error);
+        }
+      } else {
+        // Simple text matching
+        matched = text.includes(trigger.pattern);
+      }
+      
+      if (matched) {
+        this.executeTrigger(trigger, text, matches);
+      }
+    }
+  }
+  
+  /**
+   * Execute a triggered action - simplified for stability
+   */
+  private executeTrigger(trigger: Trigger, text: string, matches: RegExpMatchArray | null): void {
+    // Play sound if specified - with minimal options
+    if (trigger.soundFile && this.sounds.has(trigger.id)) {
+      try {
+        const sound = this.sounds.get(trigger.id);
+        if (sound) {
+          sound.volume(0.7); // Fixed volume for stability
+          sound.play();
+        }
+      } catch (error) {
+        console.error('Error playing sound:', error);
+      }
+    }
+    
+    // Send text if specified
+    if (trigger.sendText) {
+      this.emit('sendText', trigger.sendText);
+    }
+    
+    // Skip custom actions for stability
+    
+    // Emit highlight event if color specified
+    if (trigger.highlightColor) {
+      this.emit('highlight', text, trigger.pattern, trigger.highlightColor, trigger.isRegex);
+    }
+    
+    // Emit basic trigger fired event
+    this.emit('triggerFired', trigger.id);
+  }
+  
+  /**
+   * Load a sound file for a trigger - simplified version
+   */
+  private loadSound(triggerId: string, soundFile: string): void {
+    try {
+      console.log(`Loading sound for trigger ${triggerId}: ${soundFile}`);
+      
+      // Build path based on whether it's a URL or local file
+      const soundPath = soundFile.startsWith('http') || soundFile.startsWith('/') 
+        ? soundFile 
+        : `/sounds/${soundFile}`;
+      
+      // Create minimal sound object
+      const sound = new Howl({ src: [soundPath] });
+      
+      // Set only necessary handlers
+      sound.once('load', () => {
+        this.sounds.set(triggerId, sound);
+      });
+      
+      sound.once('loaderror', () => {
+        console.error(`Failed to load sound ${soundFile}`);
+      });
+    } catch (error) {
+      console.error('Error loading sound:', error);
+    }
+  }
+  
+  /**
+   * Get all triggers
+   */
+  public getTriggers(): Trigger[] {
+    return [...this.triggers];
+  }
+  
+  /**
+   * Enable or disable a trigger
+   */
+  public setTriggerEnabled(triggerId: string, enabled: boolean): void {
+    const trigger = this.triggers.find(t => t.id === triggerId);
+    
+    if (trigger) {
+      trigger.isEnabled = enabled;
+      this.emit('triggerUpdated', trigger);
+    }
+  }
+  
+  /**
+   * Import triggers from a JSON string
+   */
+  public importTriggers(json: string): void {
+    try {
+      const imported = JSON.parse(json);
+      
+      if (Array.isArray(imported)) {
+        imported.forEach(trigger => {
+          if (this.isValidTrigger(trigger)) {
+            this.addTrigger(trigger);
+          }
+        });
+      }
+      
+      this.emit('triggersImported', imported);
+    } catch (error) {
+      console.error('Failed to import triggers:', error);
+      throw new Error('Failed to import triggers. Invalid format.');
+    }
+  }
+  
+  /**
+   * Export triggers to a JSON string
+   */
+  public exportTriggers(): string {
+    return JSON.stringify(this.triggers, null, 2);
+  }
+  
+  /**
+   * Validate a trigger object
+   */
+  private isValidTrigger(obj: any): boolean {
+    return (
+      typeof obj === 'object' &&
+      typeof obj.id === 'string' &&
+      typeof obj.name === 'string' &&
+      typeof obj.pattern === 'string' &&
+      typeof obj.isRegex === 'boolean' &&
+      typeof obj.isEnabled === 'boolean' &&
+      typeof obj.priority === 'number'
+    );
+  }
+}

src/lib/utils/EventEmitter.ts

@@ -0,0 +1,48 @@
+// A minimal EventEmitter implementation for browser
+export class EventEmitter {
+  private events: Record<string, Function[]> = {};
+
+  on(event: string, listener: Function): this {
+    if (!this.events[event]) {
+      this.events[event] = [];
+    }
+    this.events[event].push(listener);
+    return this;
+  }
+
+  once(event: string, listener: Function): this {
+    const onceWrapper = (...args: any[]) => {
+      listener(...args);
+      this.off(event, onceWrapper);
+    };
+    return this.on(event, onceWrapper);
+  }
+
+  off(event: string, listener: Function): this {
+    if (this.events[event]) {
+      this.events[event] = this.events[event].filter(l => l !== listener);
+    }
+    return this;
+  }
+
+  emit(event: string, ...args: any[]): boolean {
+    if (this.events[event]) {
+      this.events[event].forEach(listener => listener(...args));
+      return true;
+    }
+    return false;
+  }
+
+  removeAllListeners(event?: string): this {
+    if (event) {
+      this.events[event] = [];
+    } else {
+      this.events = {};
+    }
+    return this;
+  }
+
+  listenerCount(event: string): number {
+    return this.events[event]?.length || 0;
+  }
+}

src/lib/utils/KeyboardShortcutManager.ts

@@ -0,0 +1,211 @@
+import { EventEmitter } from './EventEmitter';
+
+// Define keyboard shortcut action types
+export type ShortcutAction = 
+  | 'focus-input'
+  | 'focus-terminal'
+  | 'focus-sidebar'
+  | 'focus-profiles'
+  | 'focus-triggers'
+  | 'focus-settings'
+  | 'toggle-sidebar'
+  | 'cycle-tabs'
+  | 'previous-tab'
+  | 'next-tab'
+  | 'connect'
+  | 'disconnect';
+
+// Keyboard shortcut definition
+export interface KeyboardShortcut {
+  key: string;          // Key code (e.g., 'i', 'ArrowUp')
+  altKey?: boolean;     // Whether Alt is required
+  ctrlKey?: boolean;    // Whether Ctrl is required
+  shiftKey?: boolean;   // Whether Shift is required
+  metaKey?: boolean;    // Whether Meta/Command is required
+  action: ShortcutAction;
+  description: string;
+}
+
+// Default keyboard shortcuts
+const DEFAULT_SHORTCUTS: KeyboardShortcut[] = [
+  { key: 'i', altKey: true, action: 'focus-input', description: 'Focus input box' },
+  { key: 't', altKey: true, action: 'focus-terminal', description: 'Focus terminal output' },
+  { key: 's', altKey: true, action: 'focus-sidebar', description: 'Focus sidebar' },
+  { key: 'p', altKey: true, action: 'focus-profiles', description: 'Focus profiles tab' },
+  { key: 'r', altKey: true, action: 'focus-triggers', description: 'Focus triggers tab' },
+  { key: 'o', altKey: true, action: 'focus-settings', description: 'Focus settings tab' },
+  { key: 'b', altKey: true, action: 'toggle-sidebar', description: 'Toggle sidebar' },
+  { key: 'Tab', ctrlKey: true, action: 'cycle-tabs', description: 'Cycle through connection tabs' },
+  { key: 'Tab', ctrlKey: true, shiftKey: true, action: 'previous-tab', description: 'Previous connection tab' },
+  { key: 'c', altKey: true, action: 'connect', description: 'Connect active profile' },
+  { key: 'd', altKey: true, action: 'disconnect', description: 'Disconnect active profile' },
+];
+
+/**
+ * Keyboard shortcut manager - handles global keyboard shortcuts
+ */
+export class KeyboardShortcutManager extends EventEmitter {
+  private shortcuts: KeyboardShortcut[];
+  private enabled: boolean = true;
+  private boundHandleKeyDown: (event: KeyboardEvent) => void;
+
+  constructor() {
+    super();
+    
+    // Initialize with default shortcuts
+    this.shortcuts = [...DEFAULT_SHORTCUTS];
+    
+    // Bind event handler to make it removable
+    this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+    
+    // See if we can load custom shortcuts from storage
+    this.loadCustomShortcuts();
+  }
+
+  /**
+   * Initialize keyboard shortcuts
+   */
+  initialize(): void {
+    // Add global keydown listener
+    document.addEventListener('keydown', this.boundHandleKeyDown, true);
+    console.log('Keyboard shortcut manager initialized');
+  }
+
+  /**
+   * Clean up event listeners
+   */
+  cleanup(): void {
+    document.removeEventListener('keydown', this.boundHandleKeyDown, true);
+    console.log('Keyboard shortcut manager cleaned up');
+  }
+
+  /**
+   * Handle keydown events globally
+   */
+  private handleKeyDown(event: KeyboardEvent): void {
+    // Skip if disabled
+    if (!this.enabled) return;
+    
+    const target = event.target as HTMLElement;
+    const tagName = target.tagName.toLowerCase();
+    
+    // Always allow global Alt+key shortcuts for navigation and UI control
+    // even when typing in input elements or textareas
+    if (event.altKey) {
+      // Log that we have an alt key combo
+      console.log(`Alt key combo detected: Alt+${event.key}`);
+    } else if (tagName === 'input' || tagName === 'textarea') {
+      // Don't trigger non-Alt shortcuts when typing in input elements
+      return;
+    }
+
+    // Check if this key combination matches any shortcut
+    for (const shortcut of this.shortcuts) {
+      if (
+        event.key === shortcut.key &&
+        event.altKey === !!shortcut.altKey &&
+        event.ctrlKey === !!shortcut.ctrlKey &&
+        event.shiftKey === !!shortcut.shiftKey &&
+        event.metaKey === !!shortcut.metaKey
+      ) {
+        // Matching shortcut found
+        console.log(`Keyboard shortcut triggered: ${shortcut.action}`, shortcut);
+        
+        // Prevent default behavior for special keys
+        event.preventDefault();
+        
+        // Emit event to notify listeners
+        this.emit('shortcut', shortcut.action);
+        
+        // Exit early - we found a match
+        return;
+      }
+    }
+  }
+
+  /**
+   * Load custom shortcuts from storage if available
+   */
+  private loadCustomShortcuts(): void {
+    try {
+      if (typeof localStorage !== 'undefined') {
+        const storedShortcuts = localStorage.getItem('keyboard-shortcuts');
+        if (storedShortcuts) {
+          this.shortcuts = JSON.parse(storedShortcuts);
+          console.log('Loaded custom keyboard shortcuts from storage');
+        }
+      }
+    } catch (error) {
+      console.error('Error loading custom shortcuts:', error);
+    }
+  }
+
+  /**
+   * Save custom shortcuts to storage
+   */
+  saveCustomShortcuts(): void {
+    try {
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem('keyboard-shortcuts', JSON.stringify(this.shortcuts));
+        console.log('Saved custom keyboard shortcuts to storage');
+      }
+    } catch (error) {
+      console.error('Error saving custom shortcuts:', error);
+    }
+  }
+
+  /**
+   * Add or update a shortcut
+   */
+  updateShortcut(shortcut: KeyboardShortcut): void {
+    // Find existing shortcut with the same action
+    const index = this.shortcuts.findIndex(s => s.action === shortcut.action);
+    
+    if (index !== -1) {
+      // Update existing shortcut
+      this.shortcuts[index] = shortcut;
+    } else {
+      // Add new shortcut
+      this.shortcuts.push(shortcut);
+    }
+    
+    // Save to storage
+    this.saveCustomShortcuts();
+    
+    // Notify listeners
+    this.emit('shortcutsChanged', this.shortcuts);
+  }
+
+  /**
+   * Get all registered shortcuts
+   */
+  getShortcuts(): KeyboardShortcut[] {
+    return [...this.shortcuts];
+  }
+
+  /**
+   * Reset shortcuts to defaults
+   */
+  resetToDefaults(): void {
+    this.shortcuts = [...DEFAULT_SHORTCUTS];
+    this.saveCustomShortcuts();
+    this.emit('shortcutsChanged', this.shortcuts);
+  }
+
+  /**
+   * Enable or disable keyboard shortcuts
+   */
+  setEnabled(enabled: boolean): void {
+    this.enabled = enabled;
+  }
+
+  /**
+   * Check if shortcuts are enabled
+   */
+  isEnabled(): boolean {
+    return this.enabled;
+  }
+}
+
+// Export singleton instance
+export const shortcutManager = new KeyboardShortcutManager();

src/lib/utils/ModalHelper.ts

@@ -0,0 +1,184 @@
+import { ProfileManager } from '$lib/profiles/ProfileManager';
+import { get } from 'svelte/store';
+import { activeProfile } from '$lib/stores/mudStore';
+import type { MudProfile } from '$lib/profiles/ProfileManager';
+import type { Trigger } from '$lib/triggers/TriggerSystem';
+import Modal from '$lib/components/Modal.svelte';
+import ProfileEditor from '$lib/components/ProfileEditor.svelte';
+import TriggerEditor from '$lib/components/TriggerEditor.svelte';
+
+/**
+ * Helper class for creating and showing modals programmatically
+ */
+export class ModalHelper {
+  private static modal: Modal | null = null;
+  private static profileManager = new ProfileManager();
+
+  /**
+   * Show the full-featured profile editor modal
+   * @param onSave Callback when profile is saved
+   * @param onCancel Callback when operation is cancelled
+   * @param existingProfile Optional existing profile to edit
+   */
+  static showProfileEditor(
+    onSave: (profile: MudProfile) => void,
+    onCancel: () => void,
+    existingProfile?: MudProfile
+  ): void {
+    console.log('ModalHelper.showProfileEditor called');
+    
+    try {
+      // Make sure document.body is available
+      if (!document.body) {
+        throw new Error('document.body is not available');
+      }
+      
+      // Destroy existing modal if it exists to prevent memory leaks
+      if (this.modal) {
+        try {
+          this.modal.$destroy();
+        } catch (error) {
+          console.error('Error destroying previous modal:', error);
+        }
+        this.modal = null;
+      }
+      
+      // Create a new modal instance
+      console.log('Creating new Modal instance');
+      this.modal = new Modal({
+        target: document.body,
+        props: {
+          closable: true,
+          title: '',
+        }
+      });
+      
+      if (!this.modal) {
+        throw new Error('Failed to create modal instance');
+      }
+      
+      // Get profile to edit or create new one
+      const profile = existingProfile || this.profileManager.createDefaultProfile();
+      const isNewProfile = !existingProfile;
+      
+      console.log('Setting up modal with profile:', profile);
+      
+      // Set up the modal with a short delay to ensure the DOM is ready
+      setTimeout(() => {
+        if (this.modal) {
+          // Set up the modal
+          this.modal.setProps({
+            title: isNewProfile ? 'Create New Profile' : 'Edit Profile',
+            component: ProfileEditor,
+            componentProps: {
+              profile,
+              isNewProfile
+            },
+            onSubmit: (result) => {
+              console.log('Modal submit callback with result:', result);
+              onSave(result.profile);
+            },
+            onCancel: () => {
+              console.log('Modal cancel callback');
+              onCancel();
+            }
+          });
+          
+          // Open the modal
+          this.modal.open();
+          console.log('Modal opened');
+        } else {
+          console.error('Modal instance was destroyed before it could be opened');
+        }
+      }, 50);
+    } catch (error) {
+      console.error('Error in showProfileEditor:', error);
+      // Call onCancel to ensure the flow continues even if there's an error
+      onCancel();
+      throw error; // Re-throw to allow +page.svelte to handle it
+    }
+  }
+
+  /**
+   * Show the trigger editor modal
+   * @param onSave Callback when trigger is saved
+   * @param onCancel Callback when operation is cancelled
+   * @param existingTrigger Optional existing trigger to edit
+   */
+  static showTriggerEditor(
+    onSave: (trigger: Trigger) => void,
+    onCancel: () => void,
+    existingTrigger?: Trigger
+  ): void {
+    console.log('ModalHelper.showTriggerEditor called');
+    
+    try {
+      // Make sure document.body is available
+      if (!document.body) {
+        throw new Error('document.body is not available');
+      }
+      
+      // Destroy existing modal if it exists to prevent memory leaks
+      if (this.modal) {
+        try {
+          this.modal.$destroy();
+        } catch (error) {
+          console.error('Error destroying previous modal:', error);
+        }
+        this.modal = null;
+      }
+      
+      // Create a new modal instance
+      console.log('Creating new Modal instance');
+      this.modal = new Modal({
+        target: document.body,
+        props: {
+          closable: true,
+          title: '',
+        }
+      });
+      
+      if (!this.modal) {
+        throw new Error('Failed to create modal instance');
+      }
+      
+      const isNewTrigger = !existingTrigger;
+      
+      console.log('Setting up trigger modal:', existingTrigger || 'new trigger');
+      
+      // Set up the modal with a short delay to ensure the DOM is ready
+      setTimeout(() => {
+        if (this.modal) {
+          // Set up the modal
+          this.modal.setProps({
+            title: isNewTrigger ? 'Create New Trigger' : 'Edit Trigger',
+            component: TriggerEditor,
+            componentProps: {
+              trigger: existingTrigger || null,
+              isNew: isNewTrigger
+            },
+            onSubmit: (result) => {
+              console.log('Modal submit callback with result:', result);
+              onSave(result.trigger);
+            },
+            onCancel: () => {
+              console.log('Modal cancel callback');
+              onCancel();
+            }
+          });
+          
+          // Open the modal
+          this.modal.open();
+          console.log('Modal opened');
+        } else {
+          console.error('Modal instance was destroyed before it could be opened');
+        }
+      }, 50);
+    } catch (error) {
+      console.error('Error in showTriggerEditor:', error);
+      // Call onCancel to ensure the flow continues even if there's an error
+      onCancel();
+      throw error; // Re-throw to allow +page.svelte to handle it
+    }
+  }
+}

src/routes/+layout.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { profiles, activeProfileId, uiSettings, accessibilitySettings } from '$lib/stores/mudStore';
+  import { ProfileManager } from '$lib/profiles/ProfileManager';
+  import { AccessibilityManager } from '$lib/accessibility/AccessibilityManager';
+  import { shortcutManager } from '$lib/utils/KeyboardShortcutManager';
+  import PwaUpdater from '$lib/components/PwaUpdater.svelte';
+  import '../app.css';
+  
+  // Initialize profile manager and accessibility manager
+  let profileManager: ProfileManager;
+  let accessibilityManager: AccessibilityManager;
+  
+  // Subscriptions for cleanup
+  let unsubAccessibility: () => void;
+  
+  // Flag to determine if we're in browser environment
+  const isBrowser = typeof window !== 'undefined';
+  
+  /**
+   * Handle global keyboard shortcuts
+   */
+  function handleGlobalShortcut(action: string): void {
+    console.log(`Global shortcut triggered: ${action}`);
+    
+    // Handle the different shortcut actions
+    switch (action) {
+      case 'focus-input':
+        // Find and focus the terminal input
+        const inputElement = document.querySelector('.mud-terminal-input');
+        if (inputElement) {
+          (inputElement as HTMLElement).focus();
+        }
+        break;
+        
+      case 'focus-terminal':
+        // Find and focus the terminal output
+        const terminalElement = document.querySelector('.mud-terminal-output');
+        if (terminalElement) {
+          (terminalElement as HTMLElement).focus();
+        }
+        break;
+        
+      case 'focus-sidebar':
+        // Find and focus the sidebar
+        const sidebarElement = document.querySelector('.mud-sidebar');
+        if (sidebarElement) {
+          (sidebarElement as HTMLElement).focus();
+        }
+        break;
+        
+      case 'focus-profiles':
+        // Find and activate the profiles tab
+        const profilesTab = document.getElementById('tab-profiles');
+        if (profilesTab) {
+          (profilesTab as HTMLElement).click();
+          (profilesTab as HTMLElement).focus();
+        }
+        break;
+        
+      case 'focus-triggers':
+        // Find and activate the triggers tab
+        const triggersTab = document.getElementById('tab-triggers');
+        if (triggersTab) {
+          (triggersTab as HTMLElement).click();
+          (triggersTab as HTMLElement).focus();
+        }
+        break;
+        
+      case 'focus-settings':
+        // Find and activate the settings tab
+        const settingsTab = document.getElementById('tab-settings');
+        if (settingsTab) {
+          (settingsTab as HTMLElement).click();
+          (settingsTab as HTMLElement).focus();
+        }
+        break;
+        
+      case 'toggle-sidebar':
+        // Programmatically click the sidebar toggle button
+        const sidebarToggleButton = document.querySelector('.app-actions button');
+        if (sidebarToggleButton) {
+          (sidebarToggleButton as HTMLElement).click();
+        }
+        break;
+        
+      case 'connect':
+        // Find active tab and click connect button
+        const connectButton = document.querySelector('.mud-mdi-pane[style*="display: flex"] .btn-connect');
+        if (connectButton) {
+          (connectButton as HTMLElement).click();
+        }
+        break;
+        
+      case 'disconnect':
+        // Find active tab and click disconnect button
+        const disconnectButton = document.querySelector('.mud-mdi-pane[style*="display: flex"] .btn-disconnect');
+        if (disconnectButton) {
+          (disconnectButton as HTMLElement).click();
+        }
+        break;
+        
+      default:
+        console.log(`Unhandled shortcut action: ${action}`);
+        break;
+    }
+  }
+  
+  /**
+   * Global keydown handler for accessibility controls
+   */
+  function handleGlobalKeydown(event: KeyboardEvent): void {
+    // Only handle events in the browser
+    if (!isBrowser) return;
+    
+    // Check if Control key is pressed (multiple ways to detect Control key)
+    if (event.key === 'Control' || event.code === 'ControlLeft' || event.code === 'ControlRight' || 
+        event.keyCode === 17 || event.ctrlKey) {
+      
+      console.log('GLOBAL CONTROL KEY DETECTED');
+      
+      // Check if speech is enabled and active
+      if ($accessibilitySettings.textToSpeech && accessibilityManager && accessibilityManager.isSpeaking()) {
+        // Stop the speech synthesis
+        console.log('Stopping speech from global keydown handler');
+        accessibilityManager.stopSpeech();
+        
+        // Prevent default and stop propagation to ensure no other handlers interfere
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+  }
+  
+  /**
+   * Handle Control key release to ensure we catch the event
+   */
+  function handleKeyUp(event: KeyboardEvent): void {
+    // Only handle events in the browser
+    if (!isBrowser) return;
+    
+    // Check for Control key release
+    if (event.key === 'Control' || event.code === 'ControlLeft' || event.code === 'ControlRight' || event.keyCode === 17) {
+      console.log('Control key released');
+      
+      // Check if speech is enabled and active
+      if ($accessibilitySettings.textToSpeech && accessibilityManager && accessibilityManager.isSpeaking()) {
+        console.log('Stopping speech on Control key release');
+        accessibilityManager.stopSpeech();
+      }
+    }
+  }
+  
+  onMount(() => {
+    // Only execute browser-specific code in browser environment
+    if (!isBrowser) return;
+    
+    profileManager = new ProfileManager();
+    
+    // Initialize accessibility manager for global control
+    accessibilityManager = new AccessibilityManager();
+    
+    // Initialize keyboard shortcut manager
+    shortcutManager.initialize();
+    
+    // Setup shortcut handlers
+    shortcutManager.on('shortcut', handleGlobalShortcut);
+    
+    // Sync accessibility manager with store settings
+    accessibilityManager.setSpeechEnabled($accessibilitySettings.textToSpeech);
+    accessibilityManager.updateSpeechOptions({
+      rate: $accessibilitySettings.speechRate,
+      pitch: $accessibilitySettings.speechPitch,
+      volume: $accessibilitySettings.speechVolume
+    });
+    
+    // Subscribe to changes in accessibility settings
+    unsubAccessibility = accessibilitySettings.subscribe(settings => {
+      if (accessibilityManager) {
+        accessibilityManager.setSpeechEnabled(settings.textToSpeech);
+        accessibilityManager.updateSpeechOptions({
+          rate: settings.speechRate,
+          pitch: settings.speechPitch,
+          volume: settings.speechVolume
+        });
+      }
+    });
+    
+    // Set up global keydown handler
+    window.addEventListener('keydown', handleGlobalKeydown, true);
+    document.addEventListener('keydown', handleGlobalKeydown, true);
+    
+    // Set up keyup handler
+    window.addEventListener('keyup', handleKeyUp, true);
+    document.addEventListener('keyup', handleKeyUp, true);
+    
+    // Load profiles from storage
+    const loadedProfiles = profileManager.getProfiles();
+    profiles.set(loadedProfiles);
+    
+    // Set active profile if available
+    if (loadedProfiles.length > 0) {
+      activeProfileId.set(loadedProfiles[0].id);
+    }
+    
+    // Apply dark mode setting from UI settings
+    if ($uiSettings.isDarkMode) {
+      document.body.classList.add('dark-mode');
+    } else {
+      document.body.classList.remove('dark-mode');
+    }
+  });
+  
+  onDestroy(() => {
+    // Only execute browser-specific code in browser environment
+    if (!isBrowser) return;
+    
+    // Clean up event listeners
+    window.removeEventListener('keydown', handleGlobalKeydown, true);
+    document.removeEventListener('keydown', handleGlobalKeydown, true);
+    window.removeEventListener('keyup', handleKeyUp, true);
+    document.removeEventListener('keyup', handleKeyUp, true);
+    
+    // Clean up keyboard shortcut manager
+    shortcutManager.off('shortcut', handleGlobalShortcut);
+    shortcutManager.cleanup();
+    
+    // Clean up subscriptions
+    if (unsubAccessibility) unsubAccessibility();
+  });
+  
+  // Watch for dark mode changes only in browser environment
+  $: if (isBrowser && $uiSettings) {
+    if ($uiSettings.isDarkMode) {
+      document.body.classList.add('dark-mode');
+    } else {
+      document.body.classList.remove('dark-mode');
+    }
+  }
+</script>
+
+<svelte:window on:keydown={handleGlobalKeydown} on:keyup={handleKeyUp} />
+
+<svelte:head>
+  <title>SvelteMUD Client</title>
+</svelte:head>
+
+<div class="app-container" class:dark-mode={$uiSettings.isDarkMode}>
+  <slot />
+  <PwaUpdater />
+</div>
+
+<style>
+  :global(html, body) {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  }
+  
+  :global(body) {
+    background-color: #f8f9fa;
+    color: #333;
+  }
+  
+  :global(body.dark-mode) {
+    background-color: #282a36;
+    color: #f8f8f2;
+  }
+  
+  .app-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    max-height: 100vh;
+    overflow: hidden;
+  }
+</style>

src/routes/+page.svelte

@@ -0,0 +1,932 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  // Declare global window property for volume debounce
+  declare global {
+    interface Window {
+      volumeDebounceTimeout?: number;
+    }
+  }
+  import MudMdi from '$lib/components/MudMdi.svelte';
+  import KeyboardShortcutsHelp from '$lib/components/KeyboardShortcutsHelp.svelte';
+  import { ModalHelper } from '$lib/utils/ModalHelper';
+  import { 
+    profiles, 
+    activeProfileId, 
+    activeProfile, 
+    triggers, 
+    uiSettings, 
+    accessibilitySettings,
+    addToOutputHistory
+  } from '$lib/stores/mudStore';
+  import { ProfileManager } from '$lib/profiles/ProfileManager';
+  import type { MudProfile } from '$lib/profiles/ProfileManager';
+  import { TriggerSystem } from '$lib/triggers/TriggerSystem';
+  import type { Trigger } from '$lib/triggers/TriggerSystem';
+  
+  // Component state
+  let profileManager: ProfileManager;
+  let triggerSystem: TriggerSystem;
+  let showTriggerEditor = false;
+  let editingTrigger: Trigger | null = null;
+  let showSidebar = true;
+  let sidebarTab: 'profiles' | 'triggers' | 'settings' = 'profiles';
+  let showKeyboardShortcutsHelp = false;
+  
+  // Save profile from component
+  function saveProfile(event) {
+    const profile = event.detail.profile;
+    console.log('Saving profile from component:', profile);
+    
+    if (profileManager) {
+      // Ensure profile has a valid ID
+      if (!profile.id) {
+        profile.id = `profile-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+      }
+      
+      // Ensure all required fields are set
+      if (!profile.ansiColor) profile.ansiColor = true;
+      
+      console.log('Saving validated profile:', profile);
+      profileManager.addProfile(profile);
+      
+      // Force reload all profiles
+      loadProfiles();
+      
+      // Set this as the active profile if no profile is active
+      if (!$activeProfileId) {
+        activeProfileId.set(profile.id);
+      }
+      
+      // Feedback to user
+      addToOutputHistory(`Profile "${profile.name}" saved successfully.`);
+    } else {
+      console.error('Profile manager not initialized');
+    }
+  }
+  
+  onMount(() => {
+    console.log('Page mounted');
+    // Initialize profile manager
+    profileManager = new ProfileManager();
+    console.log('Profile manager initialized');
+    
+    // Initialize trigger system
+    triggerSystem = new TriggerSystem();
+    console.log('Trigger system initialized');
+    
+    // Load profiles
+    loadProfiles();
+    
+    // Load triggers
+    loadTriggers();
+    
+    // Check URL parameters for debug mode
+    checkUrlParams();
+    
+    // Subscribe to profile manager events for real-time updates
+    profileManager.on('profileAdded', () => {
+      console.log('Profile added event detected');
+      loadProfiles();
+    });
+    
+    profileManager.on('profileUpdated', () => {
+      console.log('Profile updated event detected');
+      loadProfiles();
+    });
+    
+    profileManager.on('profileRemoved', () => {
+      console.log('Profile removed event detected');
+      loadProfiles();
+    });
+  });
+  
+  // Check URL for debug parameters
+  function checkUrlParams() {
+    const urlParams = new URLSearchParams(window.location.search);
+    
+    // Check for debug=gmcp parameter
+    if (urlParams.has('debug')) {
+      const debugValue = urlParams.get('debug');
+      if (debugValue === 'gmcp' || debugValue === 'all') {
+        console.log('GMCP debugging enabled via URL parameter');
+        uiSettings.update(settings => ({
+          ...settings,
+          debugGmcp: true
+        }));
+        
+        // Add a notification to the output
+        addToOutputHistory(
+          '🔍 GMCP debugging enabled via URL parameter. You will see all GMCP protocol messages in this window.', 
+          false, 
+          [{ pattern: 'GMCP debugging enabled', color: '#8be9fd', isRegex: false }]
+        );
+      }
+    }
+  }
+  
+  // Load profiles from manager
+  function loadProfiles() {
+    const allProfiles = profileManager.getProfiles();
+    console.log('Loaded profiles:', allProfiles); // Debug
+    profiles.set(allProfiles);
+    
+    // Set active profile if available and not already set
+    if (!$activeProfileId && allProfiles.length > 0) {
+      activeProfileId.set(allProfiles[0].id);
+    }
+  }
+  
+  // Load triggers from system
+  function loadTriggers() {
+    const allTriggers = triggerSystem.getTriggers();
+    triggers.set(allTriggers);
+  }
+  
+  // Edit an existing profile
+  function editProfile(profile: MudProfile) {
+    console.log('Editing profile:', profile);
+    ModalHelper.showProfileEditor(
+      (updatedProfile) => {
+        console.log('Profile updated from modal:', updatedProfile);
+        // Use the same saveProfile function for consistency
+        saveProfile({ detail: { profile: updatedProfile } });
+      },
+      () => {
+        console.log('Profile edit cancelled');
+      },
+      profile
+    );
+  }
+  
+  // Delete profile
+  function deleteProfile(profileId: string) {
+    if (confirm(`Are you sure you want to delete this profile?`)) {
+      profileManager.removeProfile(profileId);
+      loadProfiles();
+    }
+  }
+  
+  // Create a new trigger
+  function createTrigger() {
+    console.log('Creating new trigger using ModalHelper');
+    try {
+      ModalHelper.showTriggerEditor(
+        (trigger) => {
+          console.log('Trigger saved from trigger editor:', trigger);
+          saveTrigger({ detail: { trigger } });
+        },
+        () => {
+          console.log('Trigger creation cancelled');
+        }
+      );
+    } catch (error) {
+      console.error('Error showing trigger editor:', error);
+      alert('Error showing modal: ' + error.message);
+    }
+  }
+  
+  // Edit an existing trigger
+  function editTrigger(trigger: Trigger) {
+    console.log('Editing trigger using ModalHelper:', trigger);
+    try {
+      ModalHelper.showTriggerEditor(
+        (updatedTrigger) => {
+          console.log('Trigger updated from trigger editor:', updatedTrigger);
+          saveTrigger({ detail: { trigger: updatedTrigger } });
+        },
+        () => {
+          console.log('Trigger edit cancelled');
+        },
+        trigger
+      );
+    } catch (error) {
+      console.error('Error showing trigger editor:', error);
+      alert('Error showing modal: ' + error.message);
+    }
+  }
+  
+  // Save trigger
+  function saveTrigger(event: CustomEvent) {
+    const trigger = event.detail.trigger;
+    triggerSystem.addTrigger(trigger);
+    loadTriggers();
+    showTriggerEditor = false;
+    editingTrigger = null;
+  }
+  
+  // Delete trigger
+  function deleteTrigger(triggerId: string) {
+    if (confirm(`Are you sure you want to delete this trigger?`)) {
+      triggerSystem.removeTrigger(triggerId);
+      loadTriggers();
+    }
+  }
+  
+    // Toggle keyboard shortcuts help
+    function toggleKeyboardShortcutsHelp() {
+    showKeyboardShortcutsHelp = !showKeyboardShortcutsHelp;
+  }
+  
+  // Toggle sidebar
+  function toggleSidebar() {
+    showSidebar = !showSidebar;
+    uiSettings.update(settings => ({
+      ...settings,
+      showSidebar
+    }));
+  }
+  
+  // Toggle dark mode
+  function toggleDarkMode() {
+    uiSettings.update(settings => ({
+      ...settings,
+      isDarkMode: !settings.isDarkMode
+    }));
+  }
+  
+  // Toggle text-to-speech - minimal implementation
+  function toggleTextToSpeech() {
+    accessibilitySettings.update(settings => ({
+      ...settings,
+      textToSpeech: !settings.textToSpeech
+    }));
+  }
+  
+  // Update font size
+  function updateFontSize(size: number) {
+    accessibilitySettings.update(settings => ({
+      ...settings,
+      fontSize: size
+    }));
+  }
+  
+  // Handle keyboard navigation for sidebar tabs
+  function handleSidebarTabKeydown(event: KeyboardEvent) {
+    // Define the tab order
+    const tabs = ['profiles', 'triggers', 'settings'];
+    const currentIndex = tabs.indexOf(sidebarTab);
+    
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        // Move to next tab
+        event.preventDefault();
+        const nextIndex = (currentIndex + 1) % tabs.length;
+        sidebarTab = tabs[nextIndex];
+        document.getElementById(`tab-${tabs[nextIndex]}`)?.focus();
+        break;
+        
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        // Move to previous tab
+        event.preventDefault();
+        const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        sidebarTab = tabs[prevIndex];
+        document.getElementById(`tab-${tabs[prevIndex]}`)?.focus();
+        break;
+        
+      case 'Home':
+        // Move to first tab
+        event.preventDefault();
+        sidebarTab = tabs[0];
+        document.getElementById(`tab-${tabs[0]}`)?.focus();
+        break;
+        
+      case 'End':
+        // Move to last tab
+        event.preventDefault();
+        sidebarTab = tabs[tabs.length - 1];
+        document.getElementById(`tab-${tabs[tabs.length - 1]}`)?.focus();
+        break;
+        
+      case 'Enter':
+      case ' ':
+        // Activate current tab
+        event.preventDefault();
+        // The click handler will handle the tab change
+        break;
+        
+      default:
+        // Let other keys function normally
+        break;
+    }
+  }
+</script>
+
+<div class="mud-client">
+  <header class="app-header">
+    <div class="app-title">SvelteMUD Client</div>
+    <div class="app-actions">
+      <button class="btn btn-sm" on:click={toggleSidebar} aria-label="Toggle Sidebar">
+        {showSidebar ? '⇦' : '⇨'}
+      </button>
+      <button class="btn btn-sm" on:click={toggleDarkMode} aria-label="Toggle Dark Mode">
+        {$uiSettings.isDarkMode ? '☀️' : '🌙'}
+      </button>
+    </div>
+  </header>
+  
+  <div class="mud-content">
+    {#if showSidebar}
+      <aside class="mud-sidebar">
+        <div class="sidebar-tabs" role="tablist" aria-label="Sidebar tabs">
+          <button 
+            class="sidebar-tab" 
+            id="tab-profiles"
+            role="tab"
+            aria-controls="panel-profiles"
+            aria-selected={sidebarTab === 'profiles'}
+            class:active={sidebarTab === 'profiles'} 
+            tabindex={sidebarTab === 'profiles' ? "0" : "-1"}
+            on:click={() => sidebarTab = 'profiles'}
+            on:keydown={handleSidebarTabKeydown}>
+            Profiles
+          </button>
+          <button 
+            class="sidebar-tab" 
+            id="tab-triggers"
+            role="tab"
+            aria-controls="panel-triggers"
+            aria-selected={sidebarTab === 'triggers'}
+            class:active={sidebarTab === 'triggers'} 
+            tabindex={sidebarTab === 'triggers' ? "0" : "-1"}
+            on:click={() => sidebarTab = 'triggers'}
+            on:keydown={handleSidebarTabKeydown}>
+            Triggers
+          </button>
+          <button 
+            class="sidebar-tab" 
+            id="tab-settings"
+            role="tab"
+            aria-controls="panel-settings"
+            aria-selected={sidebarTab === 'settings'}
+            class:active={sidebarTab === 'settings'} 
+            tabindex={sidebarTab === 'settings' ? "0" : "-1"}
+            on:click={() => sidebarTab = 'settings'}
+            on:keydown={handleSidebarTabKeydown}>
+            Settings
+          </button>
+        </div>
+        
+        <div class="sidebar-content">
+          {#if sidebarTab === 'profiles'}
+            <div 
+              id="panel-profiles" 
+              role="tabpanel" 
+              aria-labelledby="tab-profiles"
+              tabindex="0">
+              <div class="sidebar-header">
+                <h3>MUD Profiles</h3>
+                <button 
+                  class="btn btn-sm btn-primary" 
+                  on:click={() => {
+                    console.log('New Profile button clicked - using full profile editor');
+                    try {
+                      ModalHelper.showProfileEditor(
+                        (profile) => {
+                          console.log('Profile saved from profile editor:', profile);
+                          // Use the same saveProfile function for consistency
+                          saveProfile({ detail: { profile } });
+                        },
+                        () => {
+                          console.log('Profile creation cancelled');
+                        }
+                      );
+                    } catch (error) {
+                      console.error('Error showing profile editor:', error);
+                      alert('Error showing modal: ' + error.message);
+                    }
+                  }}>New Profile</button>
+              </div>
+              
+              <div class="profile-list">
+                {#if $profiles.length === 0}
+                  <p class="no-items">No profiles found. Create one to get started.</p>
+                {:else}
+                  {#each $profiles as profile (profile.id)}
+                    <div class="profile-item" class:active={$activeProfileId === profile.id}>
+                      <span class="profile-name">{profile.name}</span>
+                      <div class="profile-actions">
+                        <button class="btn btn-sm" on:click={() => editProfile(profile)} aria-label="Edit profile {profile.name}">✏️</button>
+                        <button class="btn btn-sm" on:click={() => deleteProfile(profile.id)} aria-label="Delete profile {profile.name}">🗑️</button>
+                      </div>
+                    </div>
+                  {/each}
+                {/if}
+              </div>
+            </div>
+          {:else if sidebarTab === 'triggers'}
+            <div 
+              id="panel-triggers" 
+              role="tabpanel" 
+              aria-labelledby="tab-triggers"
+              tabindex="0">
+              <div class="sidebar-header">
+                <h3>Triggers</h3>
+                <button class="btn btn-sm btn-primary" on:click={createTrigger}>New Trigger</button>
+              </div>
+              
+              <div class="trigger-list">
+                {#if $triggers.length === 0}
+                  <p class="no-items">No triggers found. Create one to get started.</p>
+                {:else}
+                  {#each $triggers as trigger (trigger.id)}
+                    <div class="trigger-item" class:disabled={!trigger.isEnabled}>
+                      <span class="trigger-name">{trigger.name}</span>
+                      <div class="trigger-info">
+                        <span class="trigger-pattern">{trigger.pattern}</span>
+                        {#if trigger.soundFile}
+                          <span class="trigger-sound" aria-label="Has sound">🔊</span>
+                        {/if}
+                        {#if trigger.highlightColor}
+                          <span class="trigger-highlight" style="background-color: {trigger.highlightColor}" aria-label="Highlight color"></span>
+                        {/if}
+                      </div>
+                      <div class="trigger-actions">
+                        <button class="btn btn-sm" on:click={() => triggerSystem.setTriggerEnabled(trigger.id, !trigger.isEnabled)} aria-label="{trigger.isEnabled ? 'Disable' : 'Enable'} trigger {trigger.name}">
+                          {trigger.isEnabled ? '✓' : '✗'}
+                        </button>
+                        <button class="btn btn-sm" on:click={() => editTrigger(trigger)} aria-label="Edit trigger {trigger.name}">✏️</button>
+                        <button class="btn btn-sm" on:click={() => deleteTrigger(trigger.id)} aria-label="Delete trigger {trigger.name}">🗑️</button>
+                      </div>
+                    </div>
+                  {/each}
+                {/if}
+              </div>
+            </div>
+          {:else if sidebarTab === 'settings'}
+            <div 
+              id="panel-settings" 
+              role="tabpanel" 
+              aria-labelledby="tab-settings"
+              tabindex="0">
+              <div class="sidebar-header">
+                <h3>Settings</h3>
+              </div>
+              
+              <div class="settings-list">
+                <div class="setting-item">
+                  <span class="setting-name">Dark Mode</span>
+                  <label class="switch">
+                    <input type="checkbox" bind:checked={$uiSettings.isDarkMode}>
+                    <span class="slider round"></span>
+                  </label>
+                </div>
+                
+                <div class="setting-item">
+                  <span class="setting-name">Show Timestamps</span>
+                  <label class="switch">
+                    <input type="checkbox" bind:checked={$uiSettings.showTimestamps}>
+                    <span class="slider round"></span>
+                  </label>
+                </div>
+                
+                <div class="setting-item">
+                  <span class="setting-name">ANSI Colors</span>
+                  <label class="switch">
+                    <input type="checkbox" bind:checked={$uiSettings.ansiColor}>
+                    <span class="slider round"></span>
+                  </label>
+                </div>
+                
+                <div class="setting-item">
+                  <span class="setting-name">Font</span>
+                  <select bind:value={$uiSettings.font} class="form-control">
+                    <option value="monospace">Monospace</option>
+                    <option value="'Courier New', monospace">Courier New</option>
+                    <option value="'Roboto Mono', monospace">Roboto Mono</option>
+                    <option value="'Source Code Pro', monospace">Source Code Pro</option>
+                  </select>
+                </div>
+                
+                <div class="setting-item">
+                  <span class="setting-name">Global Sound Volume</span>
+                  <div class="range-control">
+                    <input 
+                      type="range" 
+                      min="0" 
+                      max="1" 
+                      step="0.1" 
+                      on:input={(e) => {
+                        // Debounce volume changes to avoid performance issues with rapid changes
+                        if (window.volumeDebounceTimeout) {
+                          clearTimeout(window.volumeDebounceTimeout);
+                        }
+                        
+                        // Read value directly from the input
+                        const newVolume = parseFloat(e.target.value);
+                        
+                        // Update the store with a slight delay to avoid excessive updates
+                        window.volumeDebounceTimeout = setTimeout(() => {
+                          uiSettings.update(settings => ({
+                            ...settings,
+                            globalVolume: newVolume
+                          }));
+                        }, 100);
+                      }}
+                      bind:value={$uiSettings.globalVolume}
+                    >
+                    <span class="range-value">{($uiSettings.globalVolume * 100).toFixed(0)}%</span>
+                  </div>
+                </div>
+                
+                <h4>Debugging</h4>
+                
+                <div class="setting-item">
+                  <span class="setting-name">Show GMCP Messages</span>
+                  <label class="switch">
+                    <input type="checkbox" bind:checked={$uiSettings.debugGmcp}>
+                    <span class="slider round"></span>
+                  </label>
+                  <div class="setting-description">
+                    Shows GMCP protocol messages in the output window for debugging
+                  </div>
+                </div>
+                
+                <h4>Accessibility</h4>
+                
+                <div class="setting-item">
+                  <span class="setting-name">Text-to-Speech</span>
+                  <label class="switch">
+                    <input type="checkbox" bind:checked={$accessibilitySettings.textToSpeech}>
+                    <span class="slider round"></span>
+                  </label>
+                </div>
+                
+                <div class="setting-item">
+                  <span class="setting-name">High Contrast</span>
+                  <label class="switch">
+                    <input type="checkbox" bind:checked={$accessibilitySettings.highContrast}>
+                    <span class="slider round"></span>
+                  </label>
+                </div>
+                
+                <div class="setting-item">
+                  <span class="setting-name">Font Size</span>
+                  <div class="range-control">
+                    <input 
+                      type="range" 
+                      min="12" 
+                      max="24" 
+                      step="1" 
+                      bind:value={$accessibilitySettings.fontSize}
+                    >
+                    <span class="range-value">{$accessibilitySettings.fontSize}px</span>
+                  </div>
+                </div>
+                
+                {#if $accessibilitySettings.textToSpeech}
+                  <div class="setting-item">
+                    <span class="setting-name">Interrupt Speech on Enter</span>
+                    <label class="switch">
+                      <input type="checkbox" bind:checked={$accessibilitySettings.interruptSpeechOnEnter}>
+                      <span class="slider round"></span>
+                    </label>
+                    <div class="setting-description">
+                      Automatically stop speaking when the Enter key is pressed
+                    </div>
+                  </div>
+                  
+                  <div class="setting-item">
+                    <span class="setting-name">Speech Rate</span>
+                    <div class="range-control">
+                      <input 
+                        type="range" 
+                        min="0.5" 
+                        max="2" 
+                        step="0.1" 
+                        bind:value={$accessibilitySettings.speechRate}
+                      >
+                      <span class="range-value">{$accessibilitySettings.speechRate.toFixed(1)}</span>
+                    </div>
+                  </div>
+                  
+                  <div class="setting-item">
+                    <span class="setting-name">Speech Pitch</span>
+                    <div class="range-control">
+                      <input 
+                        type="range" 
+                        min="0.5" 
+                        max="2" 
+                        step="0.1" 
+                        bind:value={$accessibilitySettings.speechPitch}
+                      >
+                      <span class="range-value">{$accessibilitySettings.speechPitch.toFixed(1)}</span>
+                    </div>
+                  </div>
+                  
+                  <div class="setting-item">
+                    <span class="setting-name">Speech Volume</span>
+                    <div class="range-control">
+                      <input 
+                        type="range" 
+                        min="0" 
+                        max="1" 
+                        step="0.1" 
+                        bind:value={$accessibilitySettings.speechVolume}
+                      >
+                      <span class="range-value">{($accessibilitySettings.speechVolume * 100).toFixed(0)}%</span>
+                    </div>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          {/if}
+        </div>
+      </aside>
+    {/if}
+    
+    <main class="mud-main">
+      <MudMdi />
+    </main>
+  </div>
+</div>
+
+<!-- The modal will be created programmatically using DOM APIs -->
+
+<style>
+  .mud-client {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+  }
+  
+  .app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background-color: var(--color-bg-alt);
+    border-bottom: 1px solid var(--color-border);
+  }
+  
+  .app-title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    color: var(--color-text);
+  }
+  
+  .app-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+  
+  .mud-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+  
+  .mud-sidebar {
+    display: flex;
+    flex-direction: column;
+    width: 250px;
+    border-right: 1px solid var(--color-border);
+    background-color: var(--color-bg);
+  }
+  
+  .sidebar-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--color-border);
+  }
+  
+  .sidebar-tab {
+    flex: 1;
+    padding: 0.5rem;
+    text-align: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text-muted);
+  }
+  
+  .sidebar-tab.active {
+    color: var(--color-text);
+    border-bottom: 2px solid var(--color-primary);
+  }
+  
+  .sidebar-tab:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+    position: relative;
+    z-index: 2;
+  }
+  
+  .sidebar-tab:focus:not(:focus-visible) {
+    outline: none;
+  }
+  
+  [role="tabpanel"]:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+  }
+  
+  [role="tabpanel"]:focus:not(:focus-visible) {
+    outline: none;
+  }
+  
+  .sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+  }
+  
+  .sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+  
+  .sidebar-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+  }
+  
+  .profile-list, .trigger-list, .settings-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .profile-item, .trigger-item, .setting-item {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem;
+    border-radius: var(--border-radius);
+    background-color: var(--color-input-bg);
+    border: 1px solid var(--color-border);
+  }
+  
+  .setting-description {
+    flex-basis: 100%;
+    margin-top: 5px;
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+    font-style: italic;
+  }
+  
+  .profile-item.active {
+    border-color: var(--color-primary);
+    background-color: rgba(33, 150, 243, 0.1);
+  }
+  
+  .profile-name, .trigger-name, .setting-name {
+    font-weight: bold;
+  }
+  
+  .profile-actions, .trigger-actions {
+    display: flex;
+    gap: 0.25rem;
+  }
+  
+  .trigger-item.disabled {
+    opacity: 0.5;
+  }
+  
+  .trigger-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.25rem;
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+  }
+  
+  .trigger-pattern {
+    font-family: monospace;
+  }
+  
+  .trigger-highlight {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    border: 1px solid var(--color-border);
+  }
+  
+  .no-items {
+    color: var(--color-text-muted);
+    font-style: italic;
+  }
+  
+  .mud-main {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+  }
+  
+  /* Switch styling */
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 24px;
+  }
+  
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+  }
+  
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.4s;
+  }
+  
+  input:checked + .slider {
+    background-color: var(--color-primary);
+  }
+  
+  input:focus + .slider {
+    box-shadow: 0 0 1px var(--color-primary);
+  }
+  
+  input:checked + .slider:before {
+    transform: translateX(16px);
+  }
+  
+  .slider.round {
+    border-radius: 24px;
+  }
+  
+  .slider.round:before {
+    border-radius: 50%;
+  }
+  
+  .range-control {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  
+  .range-control input {
+    flex: 1;
+  }
+  
+  .range-value {
+    min-width: 40px;
+    text-align: right;
+  }
+  
+  /* Form elements for modals */
+  .form-row {
+    margin-bottom: 15px;
+  }
+  
+  .form-row label {
+    display: block;
+    margin-bottom: 5px;
+  }
+  
+  .form-row input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+  
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+  
+  .buttons button {
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .buttons button:first-child {
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+  }
+  
+  .buttons button:last-child {
+    background-color: #2196f3;
+    color: white;
+    border: none;
+  }
+</style>

src/routes/api/mud-connect/+server.ts

@@ -0,0 +1,36 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import * as net from 'net';
+
+// This is a server endpoint to handle MUD connections
+export const POST: RequestHandler = async ({ request }) => {
+  try {
+    const data = await request.json();
+    const { host, port } = data;
+    
+    if (!host || !port) {
+      throw error(400, 'Missing host or port');
+    }
+    
+    // Validate host and port
+    if (typeof host !== 'string' || typeof port !== 'number') {
+      throw error(400, 'Invalid host or port');
+    }
+    
+    // In a real implementation, we would establish a WebSocket connection
+    // and proxy data to a telnet connection here.
+    // For security reasons, this would typically be done on the server side.
+    
+    return new Response(JSON.stringify({
+      success: true,
+      message: `Connection request received for ${host}:${port}`
+    }), {
+      headers: {
+        'content-type': 'application/json'
+      }
+    });
+  } catch (err) {
+    console.error('Error connecting to MUD server:', err);
+    throw error(500, 'Failed to connect to MUD server');
+  }
+};

src/routes/api/mud-ws/+server.ts

@@ -0,0 +1,27 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+// WebSocket server for MUD connections
+export const GET: RequestHandler = async ({ request, url }) => {
+  const host = url.searchParams.get('host');
+  const port = url.searchParams.get('port');
+  const useSSL = url.searchParams.get('useSSL') === 'true';
+  
+  if (!host || !port) {
+    throw error(400, 'Missing host or port parameters');
+  }
+
+  // In a real implementation, we would establish a WebSocket proxy to the MUD server
+  // Since SvelteKit server endpoints don't natively support WebSockets, 
+  // this endpoint would be used to create a connection in a dedicated WebSocket server
+  
+  // Use proper response status and headers for WebSocket upgrade
+  return new Response(null, {
+    status: 101,
+    headers: {
+      'Connection': 'Upgrade',
+      'Upgrade': 'websocket',
+      'Sec-WebSocket-Accept': 'placeholder-for-real-implementation' // In a real implementation, this would be calculated
+    }
+  });
+};

src/routes/websocket-test/+page.svelte

@@ -0,0 +1,240 @@
+<script>
+  import { onMount } from 'svelte';
+  
+  let messages = [];
+  let status = 'Disconnected';
+  let errorMessage = '';
+  let socket = null;
+  
+  // Connect to the WebSocket server
+  function connect() {
+    try {
+      // Clear previous state
+      status = 'Connecting...';
+      errorMessage = '';
+      messages = [];
+      
+      // Create WebSocket connection to the standalone server on port 3001
+      const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+      const wsHost = `${window.location.hostname}:3001`;
+      const url = `${wsProtocol}://${wsHost}/mud-ws?host=example.com&port=23&useSSL=false`;
+      
+      addMessage('System', `Connecting to ${url}`);
+      
+      socket = new WebSocket(url);
+      
+      // Connection opened
+      socket.addEventListener('open', (event) => {
+        status = 'Connected';
+        addMessage('System', 'Connection established');
+      });
+      
+      // Listen for messages
+      socket.addEventListener('message', (event) => {
+        const text = event.data instanceof Blob 
+          ? '[Binary data]' 
+          : event.data;
+        addMessage('Server', text);
+      });
+      
+      // Connection closed
+      socket.addEventListener('close', (event) => {
+        status = 'Disconnected';
+        addMessage('System', `Connection closed: ${event.code}`);
+      });
+      
+      // Connection error
+      socket.addEventListener('error', (event) => {
+        status = 'Error';
+        errorMessage = 'Connection error, check console for details';
+        addMessage('System', 'Connection error');
+      });
+    } catch (error) {
+      status = 'Error';
+      errorMessage = error.message;
+      addMessage('System', `Error: ${error.message}`);
+    }
+  }
+  
+  // Send a test message
+  function sendMessage() {
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      const testMessage = 'Test message from client';
+      socket.send(testMessage);
+      addMessage('Client', testMessage);
+    } else {
+      errorMessage = 'Socket is not connected';
+    }
+  }
+  
+  // Disconnect
+  function disconnect() {
+    if (socket) {
+      socket.close();
+      socket = null;
+    }
+  }
+  
+  // Add message to the log
+  function addMessage(source, text) {
+    messages = [...messages, { source, text, timestamp: new Date() }];
+  }
+  
+  // Cleanup on component unmount
+  onMount(() => {
+    return () => {
+      if (socket) {
+        socket.close();
+      }
+    };
+  });
+</script>
+
+<div class="websocket-test">
+  <h1>WebSocket Test Page</h1>
+  <p>This page tests the standalone WebSocket server at port 3001</p>
+  
+  <div class="connection-status">
+    <strong>Status:</strong> <span class={status.toLowerCase()}>{status}</span>
+    {#if errorMessage}
+      <div class="error">{errorMessage}</div>
+    {/if}
+  </div>
+  
+  <div class="controls">
+    <button on:click={connect} disabled={status === 'Connected' || status === 'Connecting...'}>
+      Connect
+    </button>
+    <button on:click={sendMessage} disabled={status !== 'Connected'}>
+      Send Test Message
+    </button>
+    <button on:click={disconnect} disabled={status !== 'Connected'}>
+      Disconnect
+    </button>
+  </div>
+  
+  <div class="message-log">
+    <h2>Message Log</h2>
+    {#if messages.length === 0}
+      <p class="empty-log">No messages yet. Connect and send a test message.</p>
+    {:else}
+      <div class="messages">
+        {#each messages as message}
+          <div class="message">
+            <div class="message-header">
+              <span class="source">{message.source}</span>
+              <span class="timestamp">{message.timestamp.toLocaleTimeString()}</span>
+            </div>
+            <pre class="message-text">{message.text}</pre>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .websocket-test {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+  
+  .connection-status {
+    margin: 20px 0;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+  
+  .connected {
+    color: green;
+  }
+  
+  .disconnected {
+    color: gray;
+  }
+  
+  .connecting\.\.\. {
+    color: blue;
+  }
+  
+  .error {
+    color: red;
+  }
+  
+  .controls {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+  
+  button {
+    padding: 8px 16px;
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  button:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+  }
+  
+  .message-log {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 10px;
+    max-height: 400px;
+    overflow-y: auto;
+  }
+  
+  .empty-log {
+    color: #888;
+    font-style: italic;
+  }
+  
+  .messages {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .message {
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+  }
+  
+  .message:last-child {
+    border-bottom: none;
+  }
+  
+  .message-header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.9em;
+    margin-bottom: 5px;
+  }
+  
+  .source {
+    font-weight: bold;
+  }
+  
+  .timestamp {
+    color: #888;
+  }
+  
+  .message-text {
+    margin: 0;
+    padding: 10px;
+    background-color: #f8f8f8;
+    border-radius: 4px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: monospace;
+  }
+</style>

src/websocket-server.js

@@ -0,0 +1,212 @@
+import { WebSocketServer } from 'ws';
+import * as net from 'net';
+import * as tls from 'tls';
+import http from 'http';
+import { parse } from 'url';
+
+// Create HTTP server
+const server = http.createServer();
+
+// Create WebSocket server
+const wss = new WebSocketServer({ noServer: true });
+
+// Active connections and their proxies
+const connections = new Map();
+
+// Handle WebSocket connections
+wss.on('connection', (ws, req, mudHost, mudPort, useSSL) => {
+  console.log(`WebSocket connection established for ${mudHost}:${mudPort} (SSL: ${useSSL})`);
+  
+  // Create a unique ID for this connection
+  const connectionId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  
+  // Special handling for test connections
+  if (mudHost === 'example.com' && mudPort === '23') {
+    console.log('Test connection detected - using echo server mode');
+    
+    // Send welcome message
+    ws.send('Hello from WebSocket test server! This is an echo server.');
+    
+    // Echo back messages
+    ws.on('message', (message) => {
+      console.log('Test server received:', message.toString());
+      ws.send(`Echo: ${message.toString()}`);
+    });
+    
+    // Handle close
+    ws.on('close', () => {
+      console.log('Test connection closed');
+      connections.delete(connectionId);
+    });
+    
+    // Store the connection (without a socket)
+    connections.set(connectionId, { ws, testMode: true });
+    return;
+  }
+
+  let socket;
+  try {
+    // Create a TCP socket connection to the MUD server
+    // Use tls for SSL connections, net for regular connections
+    socket = useSSL 
+      ? tls.connect({ host: mudHost, port: parseInt(mudPort), rejectUnauthorized: false })
+      : net.createConnection({ host: mudHost, port: parseInt(mudPort) });
+    
+    // Add error handler
+    socket.on('error', (error) => {
+      console.error(`Socket error for ${mudHost}:${mudPort}:`, error.message);
+      // Send error to client
+      if (ws.readyState === 1) {
+        ws.send(Buffer.from(`ERROR: Connection to MUD server failed: ${error.message}\r\n`));
+        setTimeout(() => {
+          if (ws.readyState === 1) ws.close();
+        }, 1000);
+      }
+      // Remove from connections map
+      connections.delete(connectionId);
+    });
+    
+    // Store the connection
+    connections.set(connectionId, { ws, socket });
+  } catch (error) {
+    console.error(`Error creating socket connection: ${error.message}`);
+    if (ws.readyState === 1) {
+      ws.send(Buffer.from(`ERROR: Failed to connect to MUD server: ${error.message}\r\n`));
+      ws.close();
+    }
+    return;
+  }
+  
+  // Handle data from the MUD server - only in regular mode, not test mode
+  if (socket) {
+    socket.on('data', (data) => {
+      // Check for GMCP data (IAC SB GMCP) - very basic check for debugging
+      // IAC = 255, SB = 250, GMCP = 201
+      let isGmcp = false;
+      for (let i = 0; i < data.length - 2; i++) {
+        if (data[i] === 255 && data[i+1] === 250 && data[i+2] === 201) {
+          isGmcp = true;
+          console.log('WebSocket server: Detected GMCP data in server response');
+          break;
+        }
+      }
+      
+      // Forward data to the WebSocket client if it's still open
+      if (ws.readyState === 1) { // WebSocket.OPEN
+        ws.send(data);
+        console.log(`WebSocket server: Sent ${data.length} bytes to client${isGmcp ? ' (contains GMCP data)' : ''}`);
+      }
+    });
+  }
+  
+  // Socket error handler already defined above
+  
+  // Handle socket close
+  if (socket) {
+    socket.on('close', () => {
+      console.log(`MUD connection closed for ${mudHost}:${mudPort}`);
+      // Close WebSocket if it's still open
+      if (ws.readyState === 1) {
+        ws.close();
+      }
+      // Remove from connections map
+      connections.delete(connectionId);
+    });
+  }
+  
+  // Handle WebSocket messages (data from client to server)
+  ws.on('message', (message) => {
+    try {
+      // Skip if this is a test connection (already handled in the test mode section)
+      const conn = connections.get(connectionId);
+      if (conn.testMode) return;
+      
+      // Check for GMCP data (IAC SB GMCP) in client messages
+      let isGmcp = false;
+      if (message instanceof Buffer || message instanceof Uint8Array) {
+        for (let i = 0; i < message.length - 2; i++) {
+          if (message[i] === 255 && message[i+1] === 250 && message[i+2] === 201) {
+            isGmcp = true;
+            console.log('WebSocket server: Detected GMCP data in client message');
+            break;
+          }
+        }
+      }
+      
+      // Forward data to the MUD server
+      // The message might be Buffer, ArrayBuffer, or string
+      if (conn.socket && conn.socket.writable) {
+        conn.socket.write(message);
+        console.log(`WebSocket server: Sent ${message.length} bytes to MUD server${isGmcp ? ' (contains GMCP data)' : ''}`);
+      } else {
+        console.error('Socket not writable, cannot send data to MUD server');
+        if (ws.readyState === 1) { // WebSocket.OPEN
+          ws.send(Buffer.from(`ERROR: Cannot send data to MUD server: Socket not connected\r\n`));
+        }
+      }
+    } catch (error) {
+      console.error('Error forwarding message to MUD server:', error);
+      if (ws.readyState === 1) { // WebSocket.OPEN
+        ws.send(Buffer.from(`ERROR: Failed to send data to MUD server: ${error.message}\r\n`));
+      }
+    }
+  });
+  
+  // Handle WebSocket close
+  ws.on('close', () => {
+    console.log(`WebSocket closed for ${mudHost}:${mudPort}`);
+    // Close socket if it's still open
+    const conn = connections.get(connectionId);
+    if (conn && conn.socket) {
+      conn.socket.end();
+    }
+    // Remove from connections map
+    connections.delete(connectionId);
+  });
+  
+  // Handle WebSocket errors
+  ws.on('error', (error) => {
+    console.error(`WebSocket error for ${mudHost}:${mudPort}:`, error.message);
+    // Close socket on error
+    const conn = connections.get(connectionId);
+    if (conn && conn.socket) {
+      conn.socket.end();
+    }
+    // Remove from connections map
+    connections.delete(connectionId);
+  });
+});
+
+// Handle HTTP server upgrade (WebSocket handshake)
+server.on('upgrade', (request, socket, head) => {
+  // Parse URL to get query parameters
+  const { pathname, query } = parse(request.url, true);
+  
+  // Only handle WebSocket connections to /mud-ws
+  if (pathname === '/mud-ws') {
+    // Extract MUD server details from query parameters
+    const { host, port, useSSL } = query;
+    
+    if (!host || !port) {
+      socket.write('HTTP/1.1 400 Bad Request\r\n\r\n');
+      socket.destroy();
+      return;
+    }
+    
+    // Handle WebSocket upgrade
+    wss.handleUpgrade(request, socket, head, (ws) => {
+      wss.emit('connection', ws, request, host, port, useSSL === 'true');
+    });
+  } else {
+    // For other upgrades (not to /mud-ws), close the connection
+    socket.destroy();
+  }
+});
+
+// Start the WebSocket server
+const PORT = process.env.WS_PORT || 3001;
+server.listen(PORT, () => {
+  console.log(`WebSocket server is running on port ${PORT}`);
+});
+
+export default server;

start-server.js

@@ -0,0 +1,44 @@
+import { spawn } from 'child_process';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Start the WebSocket server
+console.log('Starting WebSocket server');
+const wsServer = spawn('node', ['src/websocket-server.js'], {
+  stdio: 'inherit',
+  shell: true,
+  cwd: __dirname
+});
+
+// Start the SvelteKit dev server
+console.log('Starting SvelteKit dev server');
+const sveltekit = spawn('npm', ['run', 'dev'], {
+  stdio: 'inherit',
+  shell: true,
+  cwd: __dirname
+});
+
+// Handle process exit
+process.on('exit', () => {
+  console.log('Shutting down servers...');
+  wsServer.kill();
+  sveltekit.kill();
+});
+
+// Handle ctrl+c
+process.on('SIGINT', () => {
+  console.log('Received SIGINT, shutting down servers...');
+  wsServer.kill('SIGINT');
+  sveltekit.kill('SIGINT');
+  process.exit(0);
+});
+
+// Handle termination
+process.on('SIGTERM', () => {
+  console.log('Received SIGTERM, shutting down servers...');
+  wsServer.kill('SIGTERM');
+  sveltekit.kill('SIGTERM');
+  process.exit(0);
+});

static/favicon.png

@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFt0lEQVRYR8WXe2xTVRzHP+fe29u1a7t2L8YGY2MvGGMTJgPGYPgCISoKaqIkJIZoUIkk/qHRqEGNJlGJiSb+IRoRDCoGlYmaIKgzKBBwjrGNsY5t7Nmu7V7t+rj3Hk/vbde1a0sZ0JM06f313t/3+/3O9/c7R+J/HtL/6V9oaS542xgdyNKlsKmEyvpOWuqSXcSzwMtAkRxnpgHYD2wE9gAaeQKZ0AJvG80DWbIk4a6vQw5kgpyD7KgAqQ7YAqxKdj0hAW8b9wI7GH6kHmlWKZKU3NW4aXTwpfEZbgW0VYNVgB8IBPwMDw3R5+r5BniipwUt2W1SFvC28RYwp2zObOY8vQizxZS0+ESGvr4B9r+2h+unuwDeABoHBgbw+/x4PB58Ph+SJFFdXU1ZWRl5eXnvAVtTE5wQGMefB86WlpQwc9H9VFTPSe12wux87Cgnjp4ACIwFSJIkCgsLsdvt2Gw2DAZDsrM3gdWpJMYJ+Nr4GNhQs6iaiiW1o4vP9qXTycflX9Df70m+mGazGafTSXl5OYpyS/4E8CTQnM5XRgK+Nj4Ani+vKMdZX0dOTo6+qQYDtLZCczMMDEBtLVRURCPwYMslDr7+FTAEbAeagNDo4uLmer2ejBZIS8Dr5u1M56XHl7FwdrG+4cmT0NwcjUDT4PJlcLth+XIwm/EHA3y37xTff/YzcANYe2A/n3s8Hk6dOsXAwABLly6loKBAJPkZ4N10BDIS8AfcVNfNZGN9DYrJBGfORIOPjqtXYcYMqKoCWWbI5+fg/pOcPnpW53hgPx95vV6OHTuGz+fTvxcUFLBixQpMJhPAx8Da1DgkJSDw7wJ2FB6tZE55oT54/DisXQsWC1y7BkNDUFgIc+dCQQGSHVweD4c/bObMb3/p8fs/Yufw8DB+vx+fz0dOTg4mkwmTyaRbQUQEONETUCrQvwNeqph3F+WLavQJTU1w7Bi88grs3Kl/v3ED3nwTnn0WqqsBmTOtHXz83TlaLlyPEtjPewKwICAijnbnypUrOhGLxZLp4N9MIiDwfwpsnuaMRXdXTtcHWlpAKL6pCe67L0pg3z549FF9Tl3dDB5/kG9O/8n+o3/Q3tUb9bF/H58GAgH9XETCbreTl5envz9+/LjoF52ZQN8SgRH8R5w52dzlEGq/fVRXw/nzsGQJfPEFiJDX1UFfH8ydRygUotfj4/CZK+w7donff++KHvzAB3v1cwvQbrcLFYwJvfj+Pc1+rBnWtAgI/O8DT5aVwjSniFfMCpLok1pbYd48sFohGIRwWP9ss6GFQwRDYQKBIP5AiF5PgO7eIdq7Bjh/uYs/2m9G8D+4/6PdIgLi/CISOTk5WK1WPRoiiQcPHhT4DwDPpJ5fEhbYNqV0Ck/M1PTeNycnjyWVczCIVcfCIfALAKlkXAMEbgG8q7uP3r4heoZCXLzaxe9tN6MH37/7VYE/ODg4cmbRMcUZxTmF55SUlLB69eqI0l5IJhARgQ2AuzBf5hGnxJ34Jy1Dp8WN18BfcPPNz3wBvJmIP5H+hwDnzQH3HbWwnMVb32bqnElOL5FrwSCXWy9w5I2t+HpdCMXvnCz+0QSWCfzHj7DtyaNUOuyTuz0EvXRc/5sdyx8m6OsTFtg2ma7HisBm4Fnuq8JZv0QvuTuHhnG3uelocyFJ0NHuoq3NRaXDPl7nEQ0o8DfQdgKO/nzzVvl39uf3IitXO5HVG8iSAb+Pnu4evUPebXdSXt7/1Zi9YKLSuyVOG0/bA66YXaZXrQGfF5G2qY5yrFbRqafehnECYiKsUwQfizqCruQdWw5jCfjaeBE4YrPbWLBoIc7KSmw2G6qq8teFC5w9cwaPxwPQKFrxZFlIJDBbqCBHkZkty9QaDNSKdhwK646ut12l5WIrXZ2doj+8DfSOVwpTC32S9TnAY0ANUA2IdzVAPn2unh5gP/BVuovkX9mFoLBrYV8CAAAAAElFTkSuQmCC

static/icons/icon-512x512.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+  <rect width="512" height="512" fill="#282a36" rx="64" ry="64" />
+  <text x="256" y="300" font-family="Arial, sans-serif" font-size="240" text-anchor="middle" fill="#6272a4">MUD</text>
+  <path d="M128 96 L384 96 L256 224 Z" fill="#ff79c6" />
+</svg>

static/manifest.json

@@ -0,0 +1,59 @@
+{
+  "name": "SvelteMUD Client",
+  "short_name": "SvelteMUD",
+  "description": "A modern MUD client built with Svelte",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#282a36",
+  "theme_color": "#6272a4",
+  "icons": [
+    {
+      "src": "icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

static/pwa-loading.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SvelteMUD - Loading</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      background-color: #282a36;
+      color: #f8f8f2;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .logo {
+      width: 150px;
+      height: 150px;
+      background-color: #282a36;
+      border-radius: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+      animation: pulse 2s infinite;
+    }
+    
+    .logo-text {
+      font-size: 36px;
+      font-weight: bold;
+      color: #ff79c6;
+      text-shadow: 0 0 10px rgba(255, 121, 198, 0.5);
+    }
+    
+    .loading-text {
+      font-size: 18px;
+      margin-top: 20px;
+    }
+    
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: 3px solid #50fa7b;
+      border-top-color: transparent;
+      animation: spin 1s linear infinite;
+      margin-top: 20px;
+    }
+    
+    @keyframes pulse {
+      0% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.05);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+    
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="logo">
+    <div class="logo-text">MUD</div>
+  </div>
+  <h1>SvelteMUD Client</h1>
+  <div class="loading-text">Loading your MUD client...</div>
+  <div class="loading-spinner"></div>
+  
+  <script>
+    // Redirect to the main app after loading
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        window.location.href = '/';
+      }, 2000); // Redirect after 2 seconds
+    });
+  </script>
+</body>
+</html>

static/register-sw.js

@@ -0,0 +1,35 @@
+// Check if service workers are supported
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/service-worker.js')
+      .then(registration => {
+        console.log('Service Worker registered with scope:', registration.scope);
+        
+        // Check for updates to the Service Worker
+        registration.addEventListener('updatefound', () => {
+          const newWorker = registration.installing;
+          console.log('Service Worker update found!');
+          
+          newWorker.addEventListener('statechange', () => {
+            if (newWorker.state === 'installed') {
+              if (navigator.serviceWorker.controller) {
+                // New content is available, notify user
+                console.log('New version available! Reload to update.');
+                
+                // Optionally, display a notification to the user
+                if (window.confirm('A new version of this app is available. Reload to update?')) {
+                  window.location.reload();
+                }
+              } else {
+                // First time install
+                console.log('App is now available offline!');
+              }
+            }
+          });
+        });
+      })
+      .catch(error => {
+        console.error('Service Worker registration failed:', error);
+      });
+  });
+}

static/service-worker.js

@@ -0,0 +1,98 @@
+// Service worker for SvelteMUD Client PWA
+const CACHE_NAME = 'svelte-mud-v1';
+const ASSETS_TO_CACHE = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/favicon.ico',
+  '/global.css',
+  '/build/bundle.css',
+  '/build/bundle.js'
+];
+
+// Install event - cache critical assets
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        return cache.addAll(ASSETS_TO_CACHE);
+      })
+      .then(() => {
+        return self.skipWaiting();
+      })
+  );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    }).then(() => {
+      return self.clients.claim();
+    })
+  );
+});
+
+// Fetch event - serve from cache if available, otherwise fetch from network
+self.addEventListener('fetch', (event) => {
+  // Skip cross-origin requests
+  if (!event.request.url.startsWith(self.location.origin) || 
+      event.request.method !== 'GET') {
+    return;
+  }
+
+  // For navigation requests (HTML pages), use a network-first strategy
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      fetch(event.request)
+        .catch(() => {
+          return caches.match(event.request);
+        })
+    );
+    return;
+  }
+
+  // For all other requests, use a cache-first strategy
+  event.respondWith(
+    caches.match(event.request)
+      .then((response) => {
+        if (response) {
+          return response;
+        }
+        
+        // Clone the request because it's a one-time use stream
+        const fetchRequest = event.request.clone();
+        
+        return fetch(fetchRequest).then((response) => {
+          // Check if valid response
+          if (!response || response.status !== 200 || response.type !== 'basic') {
+            return response;
+          }
+          
+          // Clone the response because it's a one-time use stream
+          const responseToCache = response.clone();
+          
+          caches.open(CACHE_NAME)
+            .then((cache) => {
+              cache.put(event.request, responseToCache);
+            });
+            
+          return response;
+        });
+      })
+  );
+});
+
+// Listen for messages from clients
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});

static/sounds/README.md

@@ -0,0 +1,19 @@
+# Sound Files for SvelteMUD
+
+This directory contains sound files that can be used for trigger sounds in the MUD client.
+
+## Available Sounds
+
+For production use, place sound files in this directory with the following recommended names:
+
+- `alert.mp3` - General alert sound
+- `beep.mp3` - Short beep for notifications
+- `chime.mp3` - Chime sound for positive notifications
+- `ding.mp3` - Ding sound for attention
+- `notify.mp3` - General notification sound
+
+You can add more sound files as needed, and they will be available for selection in the trigger editor.
+
+## File Format
+
+For best compatibility, use MP3 format with reasonable file sizes (under 100KB recommended).

svelte.config.js

@@ -0,0 +1,21 @@
+import nodeAdapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+  
+  kit: {
+    adapter: nodeAdapter({
+      // You can customize the Node.js adapter options here:
+      // out: 'build',         // Output directory for the build
+      // precompress: false,   // Whether to precompress assets
+      // envPrefix: '',        // Environment variable prefix
+    }),
+    alias: {
+      $lib: 'src/lib'
+    }
+  }
+};
+
+export default config;

sync.js

@@ -0,0 +1,2 @@
+import { sync } from '@sveltejs/kit/sync';
+sync();

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "types": ["vite/client"]
+  }
+}

vite.config.ts

@@ -0,0 +1,100 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
+
+export default defineConfig({
+  plugins: [
+    sveltekit(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.png', 'icons/*.png'],
+      manifest: {
+        name: 'SvelteMUD Client',
+        short_name: 'SvelteMUD',
+        description: 'A modern MUD client built with Svelte',
+        theme_color: '#6272a4',
+        background_color: '#282a36',
+        display: 'standalone',
+        icons: [
+          {
+            src: 'icons/icon-72x72.png',
+            sizes: '72x72',
+            type: 'image/png',
+            purpose: 'any maskable'
+          },
+          {
+            src: 'icons/icon-96x96.png',
+            sizes: '96x96',
+            type: 'image/png',
+            purpose: 'any maskable'
+          },
+          {
+            src: 'icons/icon-128x128.png',
+            sizes: '128x128',
+            type: 'image/png',
+            purpose: 'any maskable'
+          },
+          {
+            src: 'icons/icon-144x144.png',
+            sizes: '144x144',
+            type: 'image/png',
+            purpose: 'any maskable'
+          },
+          {
+            src: 'icons/icon-152x152.png',
+            sizes: '152x152',
+            type: 'image/png',
+            purpose: 'any maskable'
+          },
+          {
+            src: 'icons/icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'any maskable'
+          },
+          {
+            src: 'icons/icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png',
+            purpose: 'any maskable'
+          },
+          {
+            src: 'icons/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable'
+          }
+        ]
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
+        navigateFallback: null
+      },
+      strategies: 'generateSW',
+      devOptions: {
+        enabled: true,
+        type: 'module'
+      }
+    })
+  ],
+  server: {
+    // No proxy - we're using a standalone WebSocket server on port 3001
+  },
+  resolve: {
+    alias: {
+      events: 'events' // This helps with browser compatibility
+    }
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: 'globalThis'
+      }
+    }
+  },
+  build: {
+    rollupOptions: {
+      external: ['net'] // Exclude Node-specific modules
+    }
+  }
+});