From 4d2cd3d84a53644470cd1ec8c6110134bc97d746 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 04:23:58 +0100
Subject: [PATCH 01/30] cursor rules

---
 .cursor/rules/backend.mdc            | 41 +++++++++++++++++++++++
 .cursor/rules/coding-conventions.mdc | 39 ++++++++++++++++++++++
 .cursor/rules/docker-deploy.mdc      | 37 +++++++++++++++++++++
 .cursor/rules/frontend.mdc           | 49 ++++++++++++++++++++++++++++
 .cursor/rules/project-overview.mdc   | 41 +++++++++++++++++++++++
 .cursor/rules/shared.mdc             | 30 +++++++++++++++++
 .cursor/rules/telnet-protocol.mdc    | 48 +++++++++++++++++++++++++++
 7 files changed, 285 insertions(+)
 create mode 100644 .cursor/rules/backend.mdc
 create mode 100644 .cursor/rules/coding-conventions.mdc
 create mode 100644 .cursor/rules/docker-deploy.mdc
 create mode 100644 .cursor/rules/frontend.mdc
 create mode 100644 .cursor/rules/project-overview.mdc
 create mode 100644 .cursor/rules/shared.mdc
 create mode 100644 .cursor/rules/telnet-protocol.mdc

diff --git a/.cursor/rules/backend.mdc b/.cursor/rules/backend.mdc
new file mode 100644
index 0000000..95864f3
--- /dev/null
+++ b/.cursor/rules/backend.mdc
@@ -0,0 +1,41 @@
+---
+globs: backend/**/*.ts
+---
+
+# Backend-Regeln
+
+## Module System
+- Backend verwendet **ES Modules** (`"type": "module"` in package.json)
+- Alle Imports müssen `.js`-Extension haben: `import { foo } from './bar.js'`
+- Jest-Tests laufen im CJS-Modus via `tsconfig.jest.json` und `moduleNameMapper`
+
+## Paket-Scope
+- Paketname: `@webmud3/backend`
+- Shared-Typen importieren via: `import { ... } from '@webmud3/shared'`
+
+## Architektur
+- **Environment**: Singleton via `Environment.getInstance()` – nie direkt `process.env` lesen
+- **Middleware**: Jede Middleware als eigene `use*`-Funktion in `core/middleware/`
+- **Telnet-Handler**: Neue Telnet-Options als Factory-Funktion in `features/telnet/utils/handle-*.ts` anlegen
+- **Logging**: Immer `logger` aus `shared/utils/logger.ts` verwenden (Winston), nie `console.log`
+
+## Telnet-Option hinzufügen
+1. Option in `features/telnet/models/telnet-options.ts` definieren
+2. Handler-Funktion in `features/telnet/utils/handle-<option>.ts` erstellen
+3. Handler in `TelnetClient.optionsHandler`-Map registrieren
+4. Optional: State-Tracking via `getState()` / `onStateChange()`
+
+## Socket.IO Events
+- Neue Client→Server Events: Interface `ClientToServerEvents` in `shared/` erweitern
+- Neue Server→Client Events: Interface `ServerToClientEvents` in `shared/` erweitern
+- Handler im `SocketManager.handleClientConnection()` registrieren
+
+## TypeScript
+- `strict: true`
+- Target: ES2020
+- Module: nodenext / moduleResolution: nodenext
+
+## Testing
+- Jest mit `ts-jest`
+- Test-Dateien: `*.spec.ts` neben den Source-Dateien
+- Config: `jest.config.cjs`
diff --git a/.cursor/rules/coding-conventions.mdc b/.cursor/rules/coding-conventions.mdc
new file mode 100644
index 0000000..f557a84
--- /dev/null
+++ b/.cursor/rules/coding-conventions.mdc
@@ -0,0 +1,39 @@
+---
+alwaysApply: true
+---
+
+# Coding Conventions
+
+## Sprache
+- Code und Code-Kommentare: **Englisch**
+- Dokumentation und Benutzer-Strings (z.B. ARIA-Labels, Screenreader-Texte): **Deutsch** (für UNItopia-Zielgruppe)
+- Git-Commits: Englisch
+
+## TypeScript
+- `strict: true` in allen tsconfig.json
+- Keine `any` – wenn unvermeidbar mit `eslint-disable`-Kommentar begründen
+- Interfaces bevorzugt über `type` für öffentliche Schnittstellen
+- Single Quotes, 2 Spaces Einrückung (EditorConfig)
+
+## Imports
+- Backend: `.js`-Extension in allen Imports (ES Modules)
+- Frontend: Keine Extension (Bundler-Resolution)
+- Sortierung: `eslint-plugin-simple-import-sort` erzwingt alphabetische Sortierung
+
+## Logging
+- Backend: Winston-Logger (`logger.info/warn/error/debug`) – nie `console.log`
+- Frontend: `console.log/info/warn/error` mit `[Kontext]`-Prefix, z.B. `[Sockets]`, `[MudClient]`
+
+## Error Handling
+- Backend: Fehler loggen und graceful behandeln
+- Frontend: Errors in `catch`-Blöcken loggen, User-facing Errors über UI melden
+
+## Formatting
+- Prettier ~3.6.2
+- EditorConfig: UTF-8, 2 Spaces, final newline, trim trailing whitespace
+- Markdown: kein max_line_length, kein trim trailing whitespace
+
+## Testing
+- Tests neben den Source-Dateien: `foo.spec.ts` neben `foo.ts`
+- Jest als Test-Runner (nicht Karma, nicht Jasmine)
+- Mindestens Unit-Tests für Business-Logik und Telnet-Handler
diff --git a/.cursor/rules/docker-deploy.mdc b/.cursor/rules/docker-deploy.mdc
new file mode 100644
index 0000000..77aa52b
--- /dev/null
+++ b/.cursor/rules/docker-deploy.mdc
@@ -0,0 +1,37 @@
+---
+description: Docker und Deployment-Regeln
+globs: Dockerfile,dockerfiles/**,*.yml,.github/**/*.yml
+---
+
+# Docker & Deployment
+
+## Docker Build
+- Multi-Stage Build: `builder` (kompiliert) → `runtime` (nur Node.js + dist)
+- Base Image: `node:22.20.0-alpine`
+- Shared-Paket wird nach `backend/dist/node_modules/@webmud3/shared` kopiert (kein npm Registry)
+- Prod-Dependencies werden separat in `backend/dist/` installiert (`npm install --omit=dev`)
+
+## Wichtige Docker-Umgebungsvariablen
+```env
+HOST=0.0.0.0
+PORT=5000
+TELNET_HOST=127.0.0.1
+TELNET_PORT=23
+TELNET_TLS=false
+SOCKET_ROOT=/socket.io
+SOCKET_TIMEOUT=900000
+```
+
+## CI/CD
+- **Build & Test**: GitHub Action auf PRs gegen `develop`
+- **Deploy to Azure**: GitHub Action auf Push zu `master`
+- Azure Deployment kopiert `shared/dist` manuell nach `backend/dist/node_modules/@webmud3`
+
+## Build-Reihenfolge
+```
+npm ci → npm run build:prod
+  1. shared: tsc
+  2. frontend: ng build --configuration=production
+  3. backend: tsc
+  4. postbuild: cpy frontend/dist → backend/dist/wwwroot/
+```
diff --git a/.cursor/rules/frontend.mdc b/.cursor/rules/frontend.mdc
new file mode 100644
index 0000000..6acf6aa
--- /dev/null
+++ b/.cursor/rules/frontend.mdc
@@ -0,0 +1,49 @@
+---
+globs: frontend/**/*.ts,frontend/**/*.html,frontend/**/*.scss
+---
+
+# Frontend-Regeln
+
+## Framework
+- Angular ~20.3.4 mit **Standalone Components** (keine NgModules)
+- Alle Components müssen `standalone: true` haben
+- Dependency Injection über `inject()` statt Constructor-Injection bevorzugt
+
+## Paket-Scope
+- Paketname: `@webmud3/frontend`
+- Pfad-Alias: `@webmud3/frontend/*` → `src/app/*`
+- Shared-Typen: `import { ... } from '@webmud3/shared'`
+
+## Terminal-Subsystem
+- **MudInputController**: Verwaltet den lokalen Editing-Buffer (LINEMODE). Nicht direkt auf xterm schreiben!
+- **MudPromptManager**: State-Machine für Prompt-Visibility bei Server-Output
+- **MudSocketAdapter**: Adapter – Observable → WebSocket-Interface für xterm AttachAddon
+- **MudScreenReaderAnnouncer**: Custom ARIA-Announcer (kein xterm screenReaderMode!)
+- Alle ANSI/Terminal-Escape-Konstanten in `features/terminal/models/escapes.ts`
+
+## Barrierefreiheit (A11y)
+- Screenreader-Support ist ein Kernfeature – ARIA-Regionen nicht entfernen!
+- Drei Announcement-Ebenen: Zeichen, Wort (bei Space), vollständige Zeile (bei Enter)
+- `aria-live="assertive"` für Output, `role="log"` für History
+- Bei Änderungen am Terminal: Screenreader-Tests durchführen (siehe SCREENREADER_TESTS.md)
+
+## Styling
+- SCSS als Preprocessor
+- Komponenten-spezifische Styles in `.component.scss`
+- Globale Styles in `src/styles.scss`
+
+## Environment
+- Dev: `environment.ts` → backendUrl = `http://localhost:5000`
+- Prod: `environment.prod.ts` → backendUrl = `window.location.href`
+- Compile-Time File-Replacement über `angular.json` `fileReplacements`
+
+## Testing
+- Jest über @angular-builders/jest (nicht Karma!)
+- Test-Dateien: `*.spec.ts` neben den Source-Dateien
+- Setup: `setup-jest.ts`
+
+## Conventions
+- TypeScript strict mode
+- Single quotes für Strings (EditorConfig)
+- 2 Spaces Einrückung
+- SCSS für Styles
diff --git a/.cursor/rules/project-overview.mdc b/.cursor/rules/project-overview.mdc
new file mode 100644
index 0000000..4adec6b
--- /dev/null
+++ b/.cursor/rules/project-overview.mdc
@@ -0,0 +1,41 @@
+---
+alwaysApply: true
+---
+
+# WebMud3 – Projektübersicht
+
+WebMud3 ist ein moderner, webbasierter MUD-Client (Multi-User Dungeon) als Open-Source-Projekt für UNItopia.
+
+## Architektur
+
+- **Monorepo** mit npm Workspaces: `frontend/`, `backend/`, `shared/`
+- Backend: Express 5 + Socket.IO → Telnet-Proxy zum MUD-Server
+- Frontend: Angular 20 + xterm.js → Terminal-UI im Browser
+- Shared: Typisierte Socket.IO Events und Konfigurationstypen (`@webmud3/shared`)
+
+## Datenfluss
+
+```
+Frontend (Angular/xterm) ←→ Socket.IO (WebSocket) ←→ Backend (Express/Node) ←→ Telnet (TCP) ←→ MUD-Server
+```
+
+## Wichtige Verzeichnisse
+
+- [package.json](mdc:package.json) – Root-Workspace-Konfiguration
+- `backend/src/main.ts` – Backend Entry Point
+- `backend/src/core/` – Middleware, Environment, Sockets, Routes
+- `backend/src/features/telnet/` – Telnet-Client mit Option-Negotiation
+- `frontend/src/app/core/mud/` – MudClientComponent + MudService
+- `frontend/src/app/features/terminal/` – InputController, PromptManager, ScreenReader
+- `frontend/src/app/features/sockets/` – Socket.IO Client-Wrapper
+- `shared/src/` – Gemeinsame Typen und Interfaces
+
+## Tech Stack
+
+- Node.js ~22.20.0, TypeScript ~5.9.3
+- Angular ~20.3.4 (Standalone Components)
+- Express ~5.1.0, Socket.IO ~4.8.1
+- xterm.js ~5.5.0
+- Jest ~30.2.0 für Tests
+- Docker Multi-Stage Build
+- GitHub Actions CI/CD → Azure Web App
diff --git a/.cursor/rules/shared.mdc b/.cursor/rules/shared.mdc
new file mode 100644
index 0000000..4cf5e70
--- /dev/null
+++ b/.cursor/rules/shared.mdc
@@ -0,0 +1,30 @@
+---
+globs: shared/**/*.ts
+---
+
+# Shared-Paket Regeln
+
+## Zweck
+Das `@webmud3/shared`-Paket definiert den **Vertrag** zwischen Frontend und Backend. Beide importieren die gleichen Typen, was Typsicherheit über Systemgrenzen gewährleistet.
+
+## Module System
+- ES Modules (`"type": "module"`)
+- Exports via `exports`-Feld in package.json und Barrel `src/index.ts`
+
+## Was gehört hier rein?
+- Socket.IO Event-Interfaces (`ClientToServerEvents`, `ServerToClientEvents`)
+- Telnet-bezogene Shared-Types (`LinemodeState`)
+- Backend-Konfigurationstypen (`ServerConfig`)
+- **Keine** Implementierungen, nur Typen und Interfaces!
+
+## Neuen Typ hinzufügen
+1. Typ-Datei in passendem Unterordner anlegen (`sockets/`, `config/`)
+2. In `src/index.ts` re-exportieren
+3. `npm run build --workspace shared` ausführen, da Frontend und Backend die kompilierte Version verwenden
+
+## Build-Reihenfolge
+Shared muss **immer zuerst** gebaut werden (passiert automatisch via `prebuild` in Backend/Frontend):
+
+```
+shared → frontend + backend (parallel möglich)
+```
diff --git a/.cursor/rules/telnet-protocol.mdc b/.cursor/rules/telnet-protocol.mdc
new file mode 100644
index 0000000..0c722e0
--- /dev/null
+++ b/.cursor/rules/telnet-protocol.mdc
@@ -0,0 +1,48 @@
+---
+description: Telnet-Protokoll und MUD-spezifische Konventionen für den TelnetClient
+globs: backend/src/features/telnet/**/*.ts
+---
+
+# Telnet-Protokoll Regeln
+
+## Telnet Negotiation Flow
+1. Client verbindet sich zum MUD-Server via TCP (oder TLS)
+2. `TelnetClient` registriert Handler für alle unterstützten Optionen
+3. Bei `connect`: Jeder Handler kann eine initiale Negotiation auslösen (`negotiate()`)
+4. Server antwortet mit DO/DONT/WILL/WONT → Handler reagieren entsprechend
+5. Subnegotiation (SB...SE) wird an `handleSub()` delegiert
+
+## Unterstützte Optionen
+- **CHARSET** (42): Zeichensatz-Verhandlung (dynamisch)
+- **ECHO** (1): Server-gesteuerte Echo-Kontrolle (dynamisch, für Passwörter)
+- **EOR** (25): End-of-Record Buffering
+- **GMCP** (201): Generic MUD Communication Protocol – strukturierte Daten zwischen Client und MUD
+- **LINEMODE** (34): Zeilenweise vs. zeichenweise Eingabe
+- **MSSP** (70): Mud Server Status Protocol
+- **NAWS** (31): Fenstergrößen-Meldung an Server
+- **SGA** (3): Suppress Go Ahead
+- **STATUS** (5): Option-Status-Abfrage
+- **TTYPE** (24): Terminal-Typ-Meldung
+
+## Handler-Interface
+Jeder Handler muss `TelnetOptionHandler` implementieren:
+- `handleDo()` / `handleDont()` – Pflicht
+- `handleWill()` / `handleWont()` – Pflicht
+- `negotiate()` – Optional: Initiale Verhandlung
+- `handleSub()` – Optional: Subnegotiation
+- `getState()` / `onStateChange()` – Optional: State-Tracking
+- `isDynamic` – Optional: Erlaubt Re-Negotiation nach initialem Handshake
+
+## GMCP-Protokoll
+- Subnegotiation-Format: `<module>.<message> <json-data>` (z.B. `Core.Hello {"client":"WebMud3"}`)
+- Parsing: Split bei erstem Leerzeichen → `moduleMessage` + `jsonData`, Split bei erstem Punkt → `module` + `message`
+- TelnetClient emittiert `gmcpIncoming(module, message, data)` bei eingehenden Nachrichten
+- TelnetClient emittiert `gmcpStart()` bei erfolgreicher GMCP-Negotiation
+- Ausgehende Nachrichten via `TelnetClient.sendGmcp(module, message, data)`
+- `GmcpOptionHandler` erweitert `TelnetOptionHandler<GmcpState>` mit `sendGmcp()`-Methode
+
+## Wichtige Konventionen
+- Handler NIEMALS direkt den TelnetSocket referenzieren – immer über den Wrapper `TelnetSocketWrapper`
+- Negotiation-State wird im `_negotiations`-Objekt des TelnetClient nachgehalten
+- EOR-Buffer: Wenn EOR aktiv, werden `data`-Events erst bei EOR-Command emittiert
+- Status-Request: Wird nach TTYPE-Negotiation gesendet (Workaround, siehe TODO)

From 029099987557f1a068221874f2259cde95f906fa Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 04:24:49 +0100
Subject: [PATCH 02/30] activate gmcp option in backend

---
 backend/src/features/telnet/telnet-client.ts  |  68 +++++
 .../telnet/utils/handle-gmcp-option.spec.ts   | 225 +++++++++++++++
 .../telnet/utils/handle-gmcp-option.ts        | 263 ++++++++++++++++++
 package-lock.json                             |   3 +-
 4 files changed, 557 insertions(+), 2 deletions(-)
 create mode 100644 backend/src/features/telnet/utils/handle-gmcp-option.spec.ts
 create mode 100644 backend/src/features/telnet/utils/handle-gmcp-option.ts

diff --git a/backend/src/features/telnet/telnet-client.ts b/backend/src/features/telnet/telnet-client.ts
index c4bf227..1551f38 100644
--- a/backend/src/features/telnet/telnet-client.ts
+++ b/backend/src/features/telnet/telnet-client.ts
@@ -12,6 +12,11 @@ import { TelnetOptionHandler } from './types/telnet-option-handler.js';
 import { handleCharsetOption } from './utils/handle-charset-option.js';
 import { handleEchoOption } from './utils/handle-echo-option.js';
 import { handleEorOption } from './utils/handle-eor-option.js';
+import {
+  GmcpIncomingMessage,
+  GmcpOptionHandler,
+  handleGmcpOption,
+} from './utils/handle-gmcp-option.js';
 import { handleLinemodeOption } from './utils/handle-linemode-option.js';
 import { handleMSSPOption } from './utils/handle-mssp-option.js';
 import {
@@ -39,6 +44,15 @@ type TelnetClientEvents = {
       state: unknown;
     },
   ];
+  /**
+   * Emitted when a GMCP message is received from the MUD server.
+   * The message has been parsed into module, message name, and JSON data.
+   */
+  gmcpIncoming: [module: string, message: string, data: unknown];
+  /**
+   * Emitted when GMCP negotiation succeeds and the protocol becomes active.
+   */
+  gmcpStart: [];
 };
 
 /**
@@ -140,6 +154,16 @@ export class TelnetClient extends EventEmitter<TelnetClientEvents> {
       [TelnetOptions.TELOPT_STATUS, handleStatusOption(this.telnetSocket)],
       [TelnetOptions.TELOPT_MSSP, handleMSSPOption(this.telnetSocket)],
       [TelnetOptions.TELOPT_EOR, handleEorOption(this.telnetSocket)],
+      [
+        TelnetOptions.TELOPT_GMCP,
+        handleGmcpOption(
+          this.telnetSocket,
+          this.socketId,
+          (msg: GmcpIncomingMessage) => {
+            this.emit('gmcpIncoming', msg.module, msg.message, msg.data);
+          },
+        ),
+      ],
     ]);
 
     this.setupOptionStateTracking();
@@ -194,6 +218,26 @@ export class TelnetClient extends EventEmitter<TelnetClientEvents> {
         this.requestStatus();
       }
 
+      // Emit gmcpStart when GMCP is successfully negotiated (server WILL, we DO)
+      if (negotiation.option === TelnetOptions.TELOPT_GMCP) {
+        const clientOption =
+          this._negotiations[TelnetOptions.TELOPT_GMCP]?.client;
+
+        const serverOption =
+          this._negotiations[TelnetOptions.TELOPT_GMCP]?.server;
+
+        if (
+          serverOption === TelnetControlSequences.WILL &&
+          clientOption === TelnetControlSequences.DO
+        ) {
+          logger.info(
+            `[${this.socketId}] [Telnet-Client] GMCP negotiation successful. Emitting 'gmcpStart'.`,
+          );
+
+          this.emit('gmcpStart');
+        }
+      }
+
       if (negotiation.option === TelnetOptions.TELOPT_EOR) {
         const clientOption =
           this.negotiations[TelnetOptions.TELOPT_EOR]?.client;
@@ -220,6 +264,30 @@ export class TelnetClient extends EventEmitter<TelnetClientEvents> {
     this.telnetSocket.write(data);
   }
 
+  /**
+   * Sends a GMCP message to the MUD server.
+   * Only works when GMCP has been successfully negotiated.
+   *
+   * @param module - Top-level module name (e.g. "Core")
+   * @param message - Message name (e.g. "Supports.Set")
+   * @param data - Payload to JSON-encode
+   */
+  public sendGmcp(module: string, message: string, data: unknown): void {
+    const handler = this.optionsHandler.get(TelnetOptions.TELOPT_GMCP) as
+      | GmcpOptionHandler
+      | undefined;
+
+    if (handler === undefined) {
+      logger.warn(
+        `[${this.socketId}] [Telnet-Client] GMCP handler not registered`,
+      );
+
+      return;
+    }
+
+    handler.sendGmcp(module, message, data);
+  }
+
   public updateViewportSize(columns: number, rows: number): void {
     const handler = this.optionsHandler.get(TelnetOptions.TELOPT_NAWS) as
       | NawsOptionHandler
diff --git a/backend/src/features/telnet/utils/handle-gmcp-option.spec.ts b/backend/src/features/telnet/utils/handle-gmcp-option.spec.ts
new file mode 100644
index 0000000..c6360cd
--- /dev/null
+++ b/backend/src/features/telnet/utils/handle-gmcp-option.spec.ts
@@ -0,0 +1,225 @@
+import {
+  GmcpIncomingMessage,
+  handleGmcpOption,
+  parseGmcpMessage,
+} from './handle-gmcp-option.js';
+
+// Minimal mock for TelnetSocket — only the methods used by the handler
+function createMockSocket() {
+  return {
+    writeDo: jest.fn(),
+    writeDont: jest.fn(),
+    writeWill: jest.fn(),
+    writeWont: jest.fn(),
+    writeSub: jest.fn(),
+  } as unknown as import('telnet-stream').TelnetSocket;
+}
+
+describe('parseGmcpMessage', () => {
+  it('should parse a standard GMCP message with JSON data', () => {
+    const result = parseGmcpMessage('Core.Hello {"client":"WebMud3"}');
+
+    expect(result).toEqual({
+      module: 'Core',
+      message: 'Hello',
+      data: { client: 'WebMud3' },
+    });
+  });
+
+  it('should parse a message without JSON data (empty object)', () => {
+    const result = parseGmcpMessage('Core.Goodbye');
+
+    expect(result).toEqual({
+      module: 'Core',
+      message: 'Goodbye',
+      data: {},
+    });
+  });
+
+  it('should parse a nested module message', () => {
+    const result = parseGmcpMessage(
+      'Char.Status.Vitals {"hp":100,"sp":50}',
+    );
+
+    expect(result).toEqual({
+      module: 'Char',
+      message: 'Status.Vitals',
+      data: { hp: 100, sp: 50 },
+    });
+  });
+
+  it('should handle a message with array data', () => {
+    const result = parseGmcpMessage(
+      'Core.Supports.Set ["Char 1","Sound 1"]',
+    );
+
+    expect(result).toEqual({
+      module: 'Core',
+      message: 'Supports.Set',
+      data: ['Char 1', 'Sound 1'],
+    });
+  });
+
+  it('should return null for empty string', () => {
+    expect(parseGmcpMessage('')).toBeNull();
+  });
+
+  it('should return null for message without a dot', () => {
+    expect(parseGmcpMessage('CoreHello')).toBeNull();
+  });
+
+  it('should return null if dot is at position 0', () => {
+    expect(parseGmcpMessage('.Hello')).toBeNull();
+  });
+
+  it('should return null if message after dot is empty', () => {
+    expect(parseGmcpMessage('Core.')).toBeNull();
+  });
+
+  it('should keep raw string as data when JSON is malformed', () => {
+    const result = parseGmcpMessage('Core.Hello {invalid json}');
+
+    expect(result).toEqual({
+      module: 'Core',
+      message: 'Hello',
+      data: '{invalid json}',
+    });
+  });
+});
+
+describe('handleGmcpOption', () => {
+  let mockSocket: ReturnType<typeof createMockSocket>;
+  let incomingMessages: GmcpIncomingMessage[];
+  let handler: ReturnType<typeof handleGmcpOption>;
+
+  beforeEach(() => {
+    mockSocket = createMockSocket();
+    incomingMessages = [];
+    handler = handleGmcpOption(mockSocket, 'test-socket', (msg) => {
+      incomingMessages.push(msg);
+    });
+  });
+
+  describe('negotiation', () => {
+    it('should accept GMCP when server sends WILL (respond with DO)', () => {
+      const result = handler.handleWill();
+
+      expect(result.controlSequence).toBe(253); // DO
+      expect(mockSocket.writeDo).toHaveBeenCalledWith(201); // TELOPT_GMCP
+    });
+
+    it('should decline when server sends WONT (respond with DONT)', () => {
+      const result = handler.handleWont();
+
+      expect(result.controlSequence).toBe(254); // DONT
+      expect(mockSocket.writeDont).toHaveBeenCalledWith(201); // TELOPT_GMCP
+    });
+
+    it('should refuse DO from server (respond with WONT)', () => {
+      const result = handler.handleDo();
+
+      expect(result.controlSequence).toBe(252); // WONT
+      expect(mockSocket.writeWont).toHaveBeenCalledWith(201); // TELOPT_GMCP
+    });
+
+    it('should respond to DONT with WONT', () => {
+      const result = handler.handleDont();
+
+      expect(result.controlSequence).toBe(252); // WONT
+      expect(mockSocket.writeWont).toHaveBeenCalledWith(201); // TELOPT_GMCP
+    });
+  });
+
+  describe('state tracking', () => {
+    it('should start inactive', () => {
+      expect(handler.getState!()).toEqual({ isActive: false });
+    });
+
+    it('should become active after WILL negotiation', () => {
+      handler.handleWill();
+
+      expect(handler.getState!()).toEqual({ isActive: true });
+    });
+
+    it('should become inactive after WONT', () => {
+      handler.handleWill(); // activate first
+      handler.handleWont();
+
+      expect(handler.getState!()).toEqual({ isActive: false });
+    });
+  });
+
+  describe('handleSub (incoming GMCP messages)', () => {
+    it('should parse and forward incoming GMCP messages', () => {
+      const buffer = Buffer.from('Core.Hello {"client":"MudClient"}');
+
+      handler.handleSub!(buffer);
+
+      expect(incomingMessages).toHaveLength(1);
+      expect(incomingMessages[0]).toEqual({
+        module: 'Core',
+        message: 'Hello',
+        data: { client: 'MudClient' },
+      });
+    });
+
+    it('should handle messages without payload', () => {
+      const buffer = Buffer.from('Core.Goodbye');
+
+      handler.handleSub!(buffer);
+
+      expect(incomingMessages).toHaveLength(1);
+      expect(incomingMessages[0]).toEqual({
+        module: 'Core',
+        message: 'Goodbye',
+        data: {},
+      });
+    });
+
+    it('should return subnegotiation result with module.message', () => {
+      const buffer = Buffer.from('Char.Name {"name":"Test"}');
+
+      const result = handler.handleSub!(buffer);
+
+      expect(result).not.toBeNull();
+      expect(result!.clientOption).toBe('Char.Name');
+    });
+
+    it('should return null for unparseable messages', () => {
+      const buffer = Buffer.from('');
+
+      const result = handler.handleSub!(buffer);
+
+      expect(result).toBeNull();
+      expect(incomingMessages).toHaveLength(0);
+    });
+  });
+
+  describe('sendGmcp', () => {
+    it('should send GMCP message when active', () => {
+      handler.handleWill(); // activate GMCP
+
+      handler.sendGmcp('Core', 'Hello', { client: 'WebMud3' });
+
+      expect(mockSocket.writeSub).toHaveBeenCalledWith(
+        201, // TELOPT_GMCP
+        Buffer.from('Core.Hello {"client":"WebMud3"}', 'utf-8'),
+      );
+    });
+
+    it('should not send when GMCP is inactive', () => {
+      handler.sendGmcp('Core', 'Hello', { client: 'WebMud3' });
+
+      expect(mockSocket.writeSub).not.toHaveBeenCalled();
+    });
+
+    it('should not send after deactivation', () => {
+      handler.handleWill(); // activate
+      handler.handleWont(); // deactivate
+
+      handler.sendGmcp('Core', 'Hello', { client: 'WebMud3' });
+
+      expect(mockSocket.writeSub).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/backend/src/features/telnet/utils/handle-gmcp-option.ts b/backend/src/features/telnet/utils/handle-gmcp-option.ts
new file mode 100644
index 0000000..d889692
--- /dev/null
+++ b/backend/src/features/telnet/utils/handle-gmcp-option.ts
@@ -0,0 +1,263 @@
+import { TelnetSocket } from 'telnet-stream';
+
+import { logger } from '../../../shared/utils/logger.js';
+import { TelnetOptions } from '../models/telnet-options.js';
+import { TelnetControlSequences } from '../types/telnet-control-sequences.js';
+import { TelnetOptionHandler } from '../types/telnet-option-handler.js';
+import { TelnetOptionResult } from '../types/telnet-option-result.js';
+import { TelnetSubnegotiationResult } from '../types/telnet-subnegotiation-result.js';
+
+/**
+ * Parsed GMCP message received from the MUD server.
+ */
+export interface GmcpIncomingMessage {
+  /** Top-level module name, e.g. "Core", "Char", "Sound" */
+  module: string;
+  /** Message name within the module, e.g. "Hello", "Status", "Url" */
+  message: string;
+  /** Parsed JSON payload (defaults to empty object) */
+  data: unknown;
+}
+
+/**
+ * State tracked by the GMCP option handler.
+ */
+export type GmcpState = {
+  /** Whether the MUD server has agreed to use GMCP */
+  isActive: boolean;
+};
+
+/**
+ * Callback invoked when a GMCP subnegotiation message arrives from the MUD.
+ */
+export type GmcpIncomingCallback = (message: GmcpIncomingMessage) => void;
+
+/**
+ * Extended handler interface exposing a method to send outgoing GMCP messages.
+ */
+export type GmcpOptionHandler = TelnetOptionHandler<GmcpState> & {
+  /**
+   * Sends a GMCP message to the MUD server.
+   *
+   * @param module - Top-level module name (e.g. "Core")
+   * @param message - Message name (e.g. "Hello")
+   * @param data - Payload to JSON-encode
+   */
+  sendGmcp: (module: string, message: string, data: unknown) => void;
+};
+
+/**
+ * Internal negotiator class encapsulating GMCP option logic.
+ */
+class GmcpNegotiator {
+  private state: GmcpState = { isActive: false };
+
+  constructor(
+    private readonly socket: TelnetSocket,
+    private readonly socketId: string,
+    private readonly onIncoming: GmcpIncomingCallback,
+  ) {}
+
+  /**
+   * Server asks us to enable GMCP (DO) — we refuse since we are the client side.
+   * GMCP negotiation is server-initiated via WILL.
+   */
+  public handleDo(): TelnetOptionResult {
+    // As a client, we don't initiate GMCP. If server sends DO, we respond WONT.
+    this.socket.writeWont(TelnetOptions.TELOPT_GMCP);
+
+    return { controlSequence: TelnetControlSequences.WONT };
+  }
+
+  /**
+   * Server tells us to disable GMCP (DONT).
+   */
+  public handleDont(): TelnetOptionResult {
+    this.socket.writeWont(TelnetOptions.TELOPT_GMCP);
+
+    this.setActive(false);
+
+    return { controlSequence: TelnetControlSequences.WONT };
+  }
+
+  /**
+   * Server announces GMCP support (WILL) — we accept with DO.
+   */
+  public handleWill(): TelnetOptionResult {
+    this.socket.writeDo(TelnetOptions.TELOPT_GMCP);
+
+    this.setActive(true);
+
+    logger.info(
+      `[${this.socketId}] [GMCP] Server announced GMCP support. Accepting.`,
+    );
+
+    return { controlSequence: TelnetControlSequences.DO };
+  }
+
+  /**
+   * Server declines GMCP (WONT).
+   */
+  public handleWont(): TelnetOptionResult {
+    this.socket.writeDont(TelnetOptions.TELOPT_GMCP);
+
+    this.setActive(false);
+
+    logger.info(
+      `[${this.socketId}] [GMCP] Server declined GMCP support.`,
+    );
+
+    return { controlSequence: TelnetControlSequences.DONT };
+  }
+
+  /**
+   * Handles incoming GMCP subnegotiation data from the MUD server.
+   *
+   * GMCP subnegotiation format:
+   *   `<module>.<message> <json-data>`
+   *
+   * Examples:
+   *   `Core.Hello {"client":"WebMud3"}`
+   *   `Char.Name {"name":"Gandalf","fullname":"Gandalf the Grey"}`
+   *   `Core.Goodbye` (no data → empty object)
+   */
+  public handleSub(serverChunk: Buffer): TelnetSubnegotiationResult {
+    const raw = serverChunk.toString('utf-8');
+
+    const parsed = parseGmcpMessage(raw);
+
+    if (parsed === null) {
+      logger.warn(
+        `[${this.socketId}] [GMCP] Failed to parse incoming message: ${raw}`,
+      );
+
+      return null;
+    }
+
+    logger.verbose(
+      `[${this.socketId}] [GMCP] Incoming: ${parsed.module}.${parsed.message}`,
+      { data: parsed.data },
+    );
+
+    this.onIncoming(parsed);
+
+    return {
+      clientChunk: serverChunk,
+      clientOption: `${parsed.module}.${parsed.message}`,
+    };
+  }
+
+  /**
+   * Sends a GMCP message to the MUD server via telnet subnegotiation.
+   *
+   * Wire format: IAC SB GMCP <module>.<message> <json> IAC SE
+   */
+  public sendGmcp(module: string, message: string, data: unknown): void {
+    if (!this.state.isActive) {
+      logger.warn(
+        `[${this.socketId}] [GMCP] Cannot send GMCP message: GMCP is not active.`,
+      );
+
+      return;
+    }
+
+    const jsonPayload = JSON.stringify(data);
+    const payload = `${module}.${message} ${jsonPayload}`;
+    const buffer = Buffer.from(payload, 'utf-8');
+
+    this.socket.writeSub(TelnetOptions.TELOPT_GMCP, buffer);
+
+    logger.verbose(
+      `[${this.socketId}] [GMCP] Outgoing: ${module}.${message}`,
+      { data },
+    );
+  }
+
+  public getState(): GmcpState {
+    return { ...this.state };
+  }
+
+  private setActive(isActive: boolean): void {
+    if (this.state.isActive === isActive) {
+      return;
+    }
+
+    this.state = { isActive };
+  }
+}
+
+/**
+ * Parses a raw GMCP subnegotiation string into its components.
+ *
+ * Format: `<module>.<message> <json-data>`
+ * If no space is found, data defaults to an empty object.
+ * The module/message split happens at the first dot.
+ *
+ * @returns Parsed message or null if the format is invalid.
+ */
+export function parseGmcpMessage(raw: string): GmcpIncomingMessage | null {
+  if (raw.length === 0) {
+    return null;
+  }
+
+  const spaceIndex = raw.indexOf(' ');
+  const moduleMessage = spaceIndex >= 0 ? raw.substring(0, spaceIndex) : raw;
+  const jsonString =
+    spaceIndex >= 0 ? raw.substring(spaceIndex + 1).trim() : '';
+
+  const dotIndex = moduleMessage.indexOf('.');
+
+  if (dotIndex < 1) {
+    // No dot found or dot is at position 0 — invalid GMCP format
+    return null;
+  }
+
+  const module = moduleMessage.substring(0, dotIndex);
+  const message = moduleMessage.substring(dotIndex + 1);
+
+  if (message.length === 0) {
+    return null;
+  }
+
+  let data: unknown = {};
+
+  if (jsonString.length > 0) {
+    try {
+      data = JSON.parse(jsonString);
+    } catch {
+      logger.warn(`[GMCP] Failed to parse JSON payload: ${jsonString}`);
+
+      // Keep data as the raw string if JSON parsing fails
+      data = jsonString;
+    }
+  }
+
+  return { module, message, data };
+}
+
+/**
+ * Factory function to create a GMCP option handler.
+ *
+ * @param socket - The telnet socket for sending negotiation responses.
+ * @param socketId - Identifier for logging purposes.
+ * @param onIncoming - Callback invoked when a GMCP message is received from the MUD.
+ * @returns A GmcpOptionHandler instance.
+ */
+export const handleGmcpOption = (
+  socket: TelnetSocket,
+  socketId: string,
+  onIncoming: GmcpIncomingCallback,
+): GmcpOptionHandler => {
+  const negotiator = new GmcpNegotiator(socket, socketId, onIncoming);
+
+  return {
+    handleDo: () => negotiator.handleDo(),
+    handleDont: () => negotiator.handleDont(),
+    handleWill: () => negotiator.handleWill(),
+    handleWont: () => negotiator.handleWont(),
+    handleSub: (serverChunk) => negotiator.handleSub(serverChunk),
+    getState: () => negotiator.getState(),
+    sendGmcp: (module, message, data) =>
+      negotiator.sendGmcp(module, message, data),
+  };
+};
diff --git a/package-lock.json b/package-lock.json
index e5c533f..6558ff0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,8 +13,7 @@
         "shared"
       ],
       "devDependencies": {
-        "cpy-cli": "~6.0.0",
-        "typescript": "~5.9.3"
+        "cpy-cli": "~6.0.0"
       },
       "engines": {
         "node": "~22.20.0"

From a42ce6e7417437427f4ecbf2695466443f7ba422 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 04:35:22 +0100
Subject: [PATCH 03/30] shared data types gmcp

---
 .cursor/rules/shared.mdc                      |  3 +-
 shared/src/gmcp/gmcp-types.ts                 | 80 +++++++++++++++++++
 shared/src/index.ts                           |  7 ++
 shared/src/sockets/client-to-server-events.ts |  7 ++
 shared/src/sockets/server-to-client-events.ts | 14 ++++
 5 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 shared/src/gmcp/gmcp-types.ts

diff --git a/.cursor/rules/shared.mdc b/.cursor/rules/shared.mdc
index 4cf5e70..41200e0 100644
--- a/.cursor/rules/shared.mdc
+++ b/.cursor/rules/shared.mdc
@@ -15,10 +15,11 @@ Das `@webmud3/shared`-Paket definiert den **Vertrag** zwischen Frontend und Back
 - Socket.IO Event-Interfaces (`ClientToServerEvents`, `ServerToClientEvents`)
 - Telnet-bezogene Shared-Types (`LinemodeState`)
 - Backend-Konfigurationstypen (`ServerConfig`)
+- GMCP-Typen (`GmcpSupport`, `GmcpModuleConfig`, `MudFamilyConfig`, `MudConfig`, `MudConfigFile`) in `gmcp/`
 - **Keine** Implementierungen, nur Typen und Interfaces!
 
 ## Neuen Typ hinzufügen
-1. Typ-Datei in passendem Unterordner anlegen (`sockets/`, `config/`)
+1. Typ-Datei in passendem Unterordner anlegen (`sockets/`, `config/`, `gmcp/`)
 2. In `src/index.ts` re-exportieren
 3. `npm run build --workspace shared` ausführen, da Frontend und Backend die kompilierte Version verwenden
 
diff --git a/shared/src/gmcp/gmcp-types.ts b/shared/src/gmcp/gmcp-types.ts
new file mode 100644
index 0000000..e8e15cf
--- /dev/null
+++ b/shared/src/gmcp/gmcp-types.ts
@@ -0,0 +1,80 @@
+/**
+ * Configuration for a single GMCP module as declared by a MUD family.
+ */
+export interface GmcpModuleConfig {
+  /** Version string of the module (e.g. "1") */
+  version: string;
+  /** Whether this module is part of the standard GMCP set */
+  standard: boolean;
+  /** Whether the module is optional (can be toggled by the user) */
+  optional: boolean;
+}
+
+/**
+ * Map of GMCP module names to their configuration.
+ * Used to declare which GMCP modules a MUD family supports.
+ *
+ * @example
+ * {
+ *   "Core": { version: "1", standard: true, optional: false },
+ *   "Char": { version: "1", standard: true, optional: false },
+ *   "Sound": { version: "1", standard: false, optional: true },
+ * }
+ */
+export interface GmcpSupport {
+  [moduleName: string]: GmcpModuleConfig;
+}
+
+/**
+ * Configuration for a MUD family (e.g. "unitopia", "seifenblase").
+ * Defines protocol capabilities shared by all MUDs of the same family.
+ */
+export interface MudFamilyConfig {
+  /** Character encoding to use (e.g. "UTF-8") */
+  charset: string;
+  /** Whether MXP (Mud eXtension Protocol) is supported */
+  MXP: boolean;
+  /** Whether GMCP (Generic MUD Communication Protocol) is supported */
+  GMCP: boolean;
+  /** Detailed GMCP module support configuration */
+  GMCP_Support: GmcpSupport;
+}
+
+/**
+ * Configuration for a single MUD server.
+ */
+export interface MudConfig {
+  /** Display name of the MUD */
+  name: string;
+  /** Hostname or IP address */
+  host: string;
+  /** Telnet port number */
+  port: number;
+  /** Whether to use TLS/SSL for the telnet connection */
+  ssl: boolean;
+  /** Whether to reject self-signed TLS certificates */
+  rejectUnauthorized: boolean;
+  /** Human-readable description */
+  description: string;
+  /** Required player level for access (e.g. "spieler", "magier") */
+  playerlevel: string;
+  /** Reference to the MUD family key (e.g. "unitopia") */
+  mudfamily: string;
+}
+
+/**
+ * Root structure of the mud_config.json file.
+ * Contains all MUD families, individual MUDs, and URL route mappings.
+ */
+export interface MudConfigFile {
+  /** Configuration scope identifier */
+  scope: string;
+  /** Base URL / href for the deployment */
+  href: string;
+  /** Map of family keys to their configurations */
+  mudfamilies: Record<string, MudFamilyConfig>;
+  /** Map of MUD identifiers to their server configurations */
+  muds: Record<string, MudConfig>;
+  /** Map of URL routes to MUD identifiers */
+  routes: Record<string, string>;
+}
diff --git a/shared/src/index.ts b/shared/src/index.ts
index d3e74b9..048994c 100644
--- a/shared/src/index.ts
+++ b/shared/src/index.ts
@@ -1,4 +1,11 @@
 export { ServerConfig } from './config/server-config.js';
+export {
+  GmcpModuleConfig,
+  GmcpSupport,
+  MudConfig,
+  MudConfigFile,
+  MudFamilyConfig,
+} from './gmcp/gmcp-types.js';
 export { ClientToServerEvents } from './sockets/client-to-server-events.js';
 export { LinemodeState } from './sockets/linemode-state.js';
 export { ServerToClientEvents } from './sockets/server-to-client-events.js';
diff --git a/shared/src/sockets/client-to-server-events.ts b/shared/src/sockets/client-to-server-events.ts
index 653ede6..2b1d65c 100644
--- a/shared/src/sockets/client-to-server-events.ts
+++ b/shared/src/sockets/client-to-server-events.ts
@@ -23,4 +23,11 @@ export interface ClientToServerEvents {
    * Updates the server with the client's current terminal dimensions.
    */
   mudViewportSize: (columns: number, rows: number) => void;
+  /**
+   * Sends a GMCP message from the frontend to the MUD server via the backend.
+   * @param module - GMCP top-level module name (e.g. "Core")
+   * @param message - GMCP message name (e.g. "Supports.Set")
+   * @param data - JSON-serializable payload
+   */
+  mudGmcpOutgoing: (module: string, message: string, data: unknown) => void;
 }
diff --git a/shared/src/sockets/server-to-client-events.ts b/shared/src/sockets/server-to-client-events.ts
index 3d97875..5d053b9 100644
--- a/shared/src/sockets/server-to-client-events.ts
+++ b/shared/src/sockets/server-to-client-events.ts
@@ -1,3 +1,4 @@
+import type { GmcpSupport } from '../gmcp/gmcp-types.js';
 import type { LinemodeState } from './linemode-state.js';
 
 /**
@@ -34,4 +35,17 @@ export interface ServerToClientEvents {
    * Sends the current linemode negotiation state to the client.
    */
   setLinemode: (state: LinemodeState) => void;
+  /**
+   * Forwards a GMCP message received from the MUD server to the frontend.
+   * @param module - GMCP top-level module name (e.g. "Char")
+   * @param message - GMCP message name (e.g. "Status")
+   * @param data - Parsed JSON payload from the MUD
+   */
+  mudGmcpIncoming: (module: string, message: string, data: unknown) => void;
+  /**
+   * Signals that the MUD server supports GMCP and negotiation was successful.
+   * Includes the GMCP module support configuration for the connected MUD family.
+   * @param gmcpSupport - Map of supported GMCP modules with their configurations
+   */
+  mudGmcpStart: (gmcpSupport: GmcpSupport) => void;
 }

From c0ad99a8e9b218c4e8346cb1132ad6ed3b0ce428 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 04:43:50 +0100
Subject: [PATCH 04/30] gmcp in frontend

---
 .cursor/rules/backend.mdc                     |   2 +
 .cursor/rules/frontend.mdc                    |  14 ++
 backend/src/core/sockets/socket-manager.ts    |  66 ++++++
 frontend/src/app/features/gmcp/gmcp-event.ts  |  12 +
 .../app/features/gmcp/gmcp-module-handler.ts  |  55 +++++
 .../src/app/features/gmcp/gmcp.service.ts     | 219 ++++++++++++++++++
 .../app/features/sockets/sockets.service.ts   |  55 ++++-
 7 files changed, 420 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/app/features/gmcp/gmcp-event.ts
 create mode 100644 frontend/src/app/features/gmcp/gmcp-module-handler.ts
 create mode 100644 frontend/src/app/features/gmcp/gmcp.service.ts

diff --git a/.cursor/rules/backend.mdc b/.cursor/rules/backend.mdc
index 95864f3..9af6f27 100644
--- a/.cursor/rules/backend.mdc
+++ b/.cursor/rules/backend.mdc
@@ -29,6 +29,8 @@ globs: backend/**/*.ts
 - Neue Client→Server Events: Interface `ClientToServerEvents` in `shared/` erweitern
 - Neue Server→Client Events: Interface `ServerToClientEvents` in `shared/` erweitern
 - Handler im `SocketManager.handleClientConnection()` registrieren
+- GMCP-Events: `mudGmcpIncoming`/`mudGmcpStart` (Server→Client), `mudGmcpOutgoing` (Client→Server)
+- GMCP-Weiterleitung: TelnetClient Events ↔ Socket.IO Events im SocketManager
 
 ## TypeScript
 - `strict: true`
diff --git a/.cursor/rules/frontend.mdc b/.cursor/rules/frontend.mdc
index 6acf6aa..a72495e 100644
--- a/.cursor/rules/frontend.mdc
+++ b/.cursor/rules/frontend.mdc
@@ -27,6 +27,20 @@ globs: frontend/**/*.ts,frontend/**/*.html,frontend/**/*.scss
 - `aria-live="assertive"` für Output, `role="log"` für History
 - Bei Änderungen am Terminal: Screenreader-Tests durchführen (siehe SCREENREADER_TESTS.md)
 
+## GMCP-Subsystem
+- **GmcpService** (`features/gmcp/gmcp.service.ts`): Zentraler Service für GMCP-Modul-Verwaltung
+  - Registry: Module registrieren/deregistrieren über `registerModule()`/`unregisterModule()`
+  - Routing: Eingehende Nachrichten werden an den passenden `GmcpModuleHandler` delegiert
+  - Observable: `gmcpEvent$` streamt alle GMCP-Events, `gmcpStart$` signalisiert GMCP-Aktivierung
+  - Senden: `sendOutgoing()` leitet über die von SocketsService gesetzte Sendefunktion
+- **GmcpModuleHandler** (`features/gmcp/gmcp-module-handler.ts`): Strategy-Interface für Module
+  - Jedes GMCP-Modul (Sound, Char, Files, etc.) implementiert dieses Interface
+  - `handleMessage(message, data)` verarbeitet eingehende Nachrichten
+  - Optional: `getMenuItems()` für dynamische Menüeinträge, `dispose()` für Cleanup
+- **GmcpEvent** (`features/gmcp/gmcp-event.ts`): Event-Typ für den Observable-Stream
+- Verdrahtung: SocketsService → GmcpService.handleIncoming() / handleGmcpStart()
+- Reset: GmcpService.reset() wird bei mudDisconnect aufgerufen
+
 ## Styling
 - SCSS als Preprocessor
 - Komponenten-spezifische Styles in `.component.scss`
diff --git a/backend/src/core/sockets/socket-manager.ts b/backend/src/core/sockets/socket-manager.ts
index 81f1fb1..2f10eaf 100644
--- a/backend/src/core/sockets/socket-manager.ts
+++ b/backend/src/core/sockets/socket-manager.ts
@@ -362,6 +362,41 @@ export class SocketManager extends Server<
           }
         });
 
+        telnetClient.on(
+          'gmcpIncoming',
+          (module: string, message: string, data: unknown) => {
+            const connection = this.mudConnections[resolvedSessionToken];
+            const targetSocket = connection
+              ? this.getSocketById(connection.socketId)
+              : undefined;
+
+            if (targetSocket !== undefined) {
+              logger.verbose(
+                `[${socket.id}] [Socket-Manager] Forwarding GMCP incoming: ${module}.${message}`,
+              );
+
+              targetSocket.emit('mudGmcpIncoming', module, message, data);
+            }
+          },
+        );
+
+        telnetClient.on('gmcpStart', () => {
+          const connection = this.mudConnections[resolvedSessionToken];
+          const targetSocket = connection
+            ? this.getSocketById(connection.socketId)
+            : undefined;
+
+          if (targetSocket !== undefined) {
+            logger.info(
+              `[${socket.id}] [Socket-Manager] GMCP started. Emitting 'mudGmcpStart'.`,
+            );
+
+            // For now emit an empty GmcpSupport object; Phase 1.3 (Multi-MUD) will
+            // populate this from the MudFamilyConfig once MudConfigService is available.
+            targetSocket.emit('mudGmcpStart', {});
+          }
+        });
+
         telnetClient.on('negotiationChanged', (negotiation) => {
           if (
             negotiation.option === TelnetOptions.TELOPT_TM &&
@@ -430,6 +465,37 @@ export class SocketManager extends Server<
       },
     );
 
+    socket.on(
+      'mudGmcpOutgoing',
+      (module: string, message: string, data: unknown) => {
+        const existing = this.getConnectionBySocketId(socket.id);
+
+        if (existing === undefined) {
+          logger.error(
+            `[${socket.id}] [Socket-Manager] Client has no session - cannot send GMCP!`,
+          );
+
+          return;
+        }
+
+        const telnetClient = existing.connection.telnet;
+
+        if (telnetClient === undefined || !telnetClient.isConnected) {
+          logger.error(
+            `[${socket.id}] [Socket-Manager] Client has no telnet connection - cannot send GMCP!`,
+          );
+
+          return;
+        }
+
+        logger.verbose(
+          `[${socket.id}] [Socket-Manager] Forwarding GMCP outgoing: ${module}.${message}`,
+        );
+
+        telnetClient.sendGmcp(module, message, data);
+      },
+    );
+
     socket.on('mudDisconnect', () => {
       logger.info(
         `[${socket.id}] [Socket-Manager] Client disconnecting from mud`,
diff --git a/frontend/src/app/features/gmcp/gmcp-event.ts b/frontend/src/app/features/gmcp/gmcp-event.ts
new file mode 100644
index 0000000..2f1b9c7
--- /dev/null
+++ b/frontend/src/app/features/gmcp/gmcp-event.ts
@@ -0,0 +1,12 @@
+/**
+ * Represents a single GMCP event flowing through the system.
+ * Used as the payload for the GmcpService's observable stream.
+ */
+export interface GmcpEvent {
+  /** Top-level module name (e.g. "Core", "Char", "Sound") */
+  module: string;
+  /** Message name within the module (e.g. "Hello", "Status.Vitals") */
+  message: string;
+  /** Parsed JSON payload from the MUD */
+  data: unknown;
+}
diff --git a/frontend/src/app/features/gmcp/gmcp-module-handler.ts b/frontend/src/app/features/gmcp/gmcp-module-handler.ts
new file mode 100644
index 0000000..21ac9bb
--- /dev/null
+++ b/frontend/src/app/features/gmcp/gmcp-module-handler.ts
@@ -0,0 +1,55 @@
+/**
+ * Represents a single menu item that a GMCP module can contribute.
+ * Used by modules like Sound to add toggle entries to the application menu.
+ */
+export interface GmcpMenuItem {
+  /** Display label for the menu item */
+  label: string;
+  /** Icon identifier (optional) */
+  icon?: string;
+  /** Tooltip text */
+  tooltip?: string;
+  /** Action to execute when clicked */
+  action: () => void;
+  /** Whether the item is currently checked/active */
+  checked?: boolean;
+}
+
+/**
+ * Strategy interface for GMCP module handlers.
+ *
+ * Each GMCP module (Sound, Char, Files, etc.) implements this interface.
+ * The GmcpService uses it to route incoming messages to the correct handler
+ * and to manage module lifecycle.
+ *
+ * This is the core of the Strategy Pattern: instead of hard-coding
+ * `if (module === 'Sound')` checks, each module registers a handler
+ * that encapsulates its behavior.
+ */
+export interface GmcpModuleHandler {
+  /** GMCP module name as registered with the MUD (e.g. "Sound", "Char", "Files") */
+  readonly moduleName: string;
+
+  /** GMCP module version (e.g. "1") */
+  readonly version: string;
+
+  /**
+   * Called when a GMCP message for this module arrives from the MUD.
+   *
+   * @param message - The message name within the module (e.g. "Url", "Status")
+   * @param data - The parsed JSON payload
+   */
+  handleMessage(message: string, data: unknown): void;
+
+  /**
+   * Optional: Returns menu items contributed by this module.
+   * Called by the MenuService (Phase 2.2) to build the dynamic menu.
+   */
+  getMenuItems?(): GmcpMenuItem[];
+
+  /**
+   * Optional: Called when the module is being unregistered.
+   * Use for cleanup (unsubscribe observables, etc.).
+   */
+  dispose?(): void;
+}
diff --git a/frontend/src/app/features/gmcp/gmcp.service.ts b/frontend/src/app/features/gmcp/gmcp.service.ts
new file mode 100644
index 0000000..194cc8e
--- /dev/null
+++ b/frontend/src/app/features/gmcp/gmcp.service.ts
@@ -0,0 +1,219 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+import type { GmcpSupport } from '@webmud3/shared';
+import type { GmcpEvent } from './gmcp-event';
+import type { GmcpModuleHandler } from './gmcp-module-handler';
+
+/**
+ * Callback type for sending outgoing GMCP messages via Socket.IO.
+ * Set by SocketsService during initialization.
+ */
+export type GmcpSendFunction = (
+  module: string,
+  message: string,
+  data: unknown,
+) => void;
+
+/**
+ * Central GMCP service for the frontend.
+ *
+ * Responsibilities:
+ * - Maintains a registry of active GMCP module handlers (Strategy Pattern)
+ * - Routes incoming GMCP messages to the correct handler
+ * - Provides an observable stream of all GMCP events for components
+ * - Manages outgoing GMCP messages (delegates to SocketsService)
+ * - Tracks active GMCP support configuration from the MUD
+ *
+ * Architecture:
+ * ```
+ * MUD Server → Backend → Socket.IO → SocketsService → GmcpService → GmcpModuleHandler
+ *                                                    ← sendOutgoing() ←
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class GmcpService {
+  /** Registry of all active GMCP module handlers, keyed by module name */
+  private readonly moduleRegistry = new Map<string, GmcpModuleHandler>();
+
+  /** Function to send outgoing GMCP messages — injected by SocketsService */
+  private sendFunction: GmcpSendFunction | null = null;
+
+  /** Current GMCP support configuration (from mudGmcpStart) */
+  private currentGmcpSupport: GmcpSupport | null = null;
+
+  /** Whether GMCP is currently active for this connection */
+  private active = false;
+
+  /**
+   * Observable stream of ALL incoming GMCP events.
+   * Components can filter by module/message to react to specific events.
+   *
+   * @example
+   * ```typescript
+   * this.gmcpService.gmcpEvent$.pipe(
+   *   filter(e => e.module === 'Char' && e.message === 'Name')
+   * ).subscribe(event => { ... });
+   * ```
+   */
+  public readonly gmcpEvent$ = new Subject<GmcpEvent>();
+
+  /**
+   * Emits when GMCP becomes active (after successful negotiation).
+   * Carries the GmcpSupport configuration from the MUD family.
+   */
+  public readonly gmcpStart$ = new Subject<GmcpSupport>();
+
+  /**
+   * Sets the send function used to emit GMCP messages over Socket.IO.
+   * Called once by SocketsService during its constructor.
+   */
+  public setSendFunction(fn: GmcpSendFunction): void {
+    this.sendFunction = fn;
+  }
+
+  /**
+   * Registers a GMCP module handler.
+   * If a handler for the same module already exists, it is replaced
+   * (the old handler's dispose() is called).
+   *
+   * @param handler - The module handler to register
+   */
+  public registerModule(handler: GmcpModuleHandler): void {
+    const existing = this.moduleRegistry.get(handler.moduleName);
+
+    if (existing !== undefined) {
+      console.info(
+        `[GMCP] Replacing existing handler for module: ${handler.moduleName}`,
+      );
+
+      existing.dispose?.();
+    }
+
+    this.moduleRegistry.set(handler.moduleName, handler);
+
+    console.info(
+      `[GMCP] Registered handler: ${handler.moduleName} v${handler.version}`,
+    );
+  }
+
+  /**
+   * Unregisters a GMCP module handler and calls its dispose() method.
+   *
+   * @param moduleName - The module name to unregister
+   */
+  public unregisterModule(moduleName: string): void {
+    const handler = this.moduleRegistry.get(moduleName);
+
+    if (handler !== undefined) {
+      handler.dispose?.();
+      this.moduleRegistry.delete(moduleName);
+
+      console.info(`[GMCP] Unregistered handler: ${moduleName}`);
+    }
+  }
+
+  /**
+   * Handles an incoming GMCP message from the MUD server.
+   * Called by SocketsService when a 'mudGmcpIncoming' event arrives.
+   *
+   * 1. Emits on the gmcpEvent$ observable (for any subscriber)
+   * 2. Routes to the registered module handler (Strategy Pattern)
+   *
+   * @param module - Top-level module name (e.g. "Char")
+   * @param message - Message within the module (e.g. "Status.Vitals")
+   * @param data - Parsed JSON payload
+   */
+  public handleIncoming(module: string, message: string, data: unknown): void {
+    const event: GmcpEvent = { module, message, data };
+
+    // Broadcast to all observers
+    this.gmcpEvent$.next(event);
+
+    // Route to specific module handler
+    const handler = this.moduleRegistry.get(module);
+
+    if (handler !== undefined) {
+      handler.handleMessage(message, data);
+    } else {
+      console.debug(
+        `[GMCP] No handler registered for module: ${module} (message: ${message})`,
+      );
+    }
+  }
+
+  /**
+   * Sends an outgoing GMCP message to the MUD server.
+   *
+   * @param module - Top-level module name (e.g. "Core")
+   * @param message - Message name (e.g. "Supports.Set")
+   * @param data - Payload to send (will be JSON-encoded)
+   */
+  public sendOutgoing(module: string, message: string, data: unknown): void {
+    if (this.sendFunction === null) {
+      console.error(
+        '[GMCP] Cannot send GMCP message: send function not set.',
+      );
+
+      return;
+    }
+
+    if (!this.active) {
+      console.warn(
+        `[GMCP] Cannot send GMCP message: GMCP is not active. (${module}.${message})`,
+      );
+
+      return;
+    }
+
+    console.debug(`[GMCP] Sending: ${module}.${message}`, data);
+
+    this.sendFunction(module, message, data);
+  }
+
+  /**
+   * Called when GMCP negotiation succeeds.
+   * Stores the support configuration and notifies subscribers.
+   *
+   * @param gmcpSupport - The GMCP module support config from the MUD family
+   */
+  public handleGmcpStart(gmcpSupport: GmcpSupport): void {
+    this.currentGmcpSupport = gmcpSupport;
+    this.active = true;
+
+    console.info('[GMCP] GMCP started with support:', gmcpSupport);
+
+    this.gmcpStart$.next(gmcpSupport);
+  }
+
+  /**
+   * Resets GMCP state (e.g. on disconnect).
+   * Disposes all registered handlers and clears the registry.
+   */
+  public reset(): void {
+    for (const [, handler] of this.moduleRegistry) {
+      handler.dispose?.();
+    }
+
+    this.moduleRegistry.clear();
+    this.currentGmcpSupport = null;
+    this.active = false;
+
+    console.info('[GMCP] GMCP state reset.');
+  }
+
+  /** Whether GMCP is currently active */
+  public get isActive(): boolean {
+    return this.active;
+  }
+
+  /** Current GMCP support configuration, or null if not yet started */
+  public get gmcpSupport(): GmcpSupport | null {
+    return this.currentGmcpSupport;
+  }
+
+  /** Returns all registered module handlers (for menu building, etc.) */
+  public getRegisteredModules(): ReadonlyMap<string, GmcpModuleHandler> {
+    return this.moduleRegistry;
+  }
+}
diff --git a/frontend/src/app/features/sockets/sockets.service.ts b/frontend/src/app/features/sockets/sockets.service.ts
index ac5279f..3b08cdd 100644
--- a/frontend/src/app/features/sockets/sockets.service.ts
+++ b/frontend/src/app/features/sockets/sockets.service.ts
@@ -3,12 +3,14 @@ import { BehaviorSubject } from 'rxjs';
 import { Manager, Socket } from 'socket.io-client';
 
 import { ServerConfigService } from '../../features/serverconfig/server-config.service';
+import { GmcpService } from '../../features/gmcp/gmcp.service';
 import { SecureString } from '@webmud3/frontend/shared/types/secure-string';
 import { isSecureString } from '@webmud3/frontend/shared/utils/is-secure-string';
 import { OutputHistoryService } from '@webmud3/frontend/shared/services/output-history.service';
 
 import type {
   ClientToServerEvents,
+  GmcpSupport,
   ServerToClientEvents,
   LinemodeState,
 } from '@webmud3/shared';
@@ -22,6 +24,7 @@ type MudOutputEventArgs = {
 })
 export class SocketsService {
   private readonly outputHistoryService = inject(OutputHistoryService);
+  private readonly gmcpService = inject(GmcpService);
   private readonly manager: Manager;
   private readonly socket: Socket<ServerToClientEvents, ClientToServerEvents>;
   private readonly connectedToServer = new BehaviorSubject<boolean>(false);
@@ -140,6 +143,24 @@ export class SocketsService {
     this.socket.on('requestTimingMark', (callback: () => void) => {
       this.handleTimingMark(callback);
     });
+
+    this.socket.on(
+      'mudGmcpIncoming',
+      (module: string, message: string, data: unknown) => {
+        this.handleGmcpIncoming(module, message, data);
+      },
+    );
+
+    this.socket.on('mudGmcpStart', (gmcpSupport: GmcpSupport) => {
+      this.handleGmcpStart(gmcpSupport);
+    });
+
+    // Wire up GmcpService's send function to emit via Socket.IO
+    this.gmcpService.setSendFunction(
+      (module: string, message: string, data: unknown) => {
+        this.socket.emit('mudGmcpOutgoing', module, message, data);
+      },
+    );
   }
 
   public connectToMud(initialViewPort: {
@@ -185,9 +206,16 @@ export class SocketsService {
     this.socket.emit('mudViewportSize', columns, rows);
   }
 
-  public sendGmcp(/*id: string, mod: string, msg: string, data: any*/): boolean {
-    console.log(`[Sockets] Sockets-Service: 'sendGmcp'`);
-    throw new Error('Method not implemented.');
+  /**
+   * Sends a GMCP message to the MUD server via Socket.IO.
+   * Prefer using GmcpService.sendOutgoing() instead for proper state checking.
+   */
+  public sendGmcp(module: string, message: string, data: unknown): void {
+    console.log(
+      `[Sockets] Sockets-Service: 'sendGmcp' ${module}.${message}`,
+    );
+
+    this.socket.emit('mudGmcpOutgoing', module, message, data);
   }
 
   private handleMudConnect = (
@@ -223,6 +251,9 @@ export class SocketsService {
     console.log('[Sockets] Clearing history after MUD disconnect');
     this.outputHistoryService.clearAll();
 
+    // Reset GMCP state (dispose handlers, clear registry)
+    this.gmcpService.reset();
+
     this.connectedToMud.next(false);
 
     this.onMudDisconnect.emit();
@@ -329,6 +360,24 @@ export class SocketsService {
     callback();
   };
 
+  private handleGmcpIncoming = (
+    module: string,
+    message: string,
+    data: unknown,
+  ) => {
+    console.debug(
+      `[Sockets] Sockets-Service: GMCP Incoming: ${module}.${message}`,
+    );
+
+    this.gmcpService.handleIncoming(module, message, data);
+  };
+
+  private handleGmcpStart = (gmcpSupport: GmcpSupport) => {
+    console.info('[Sockets] Sockets-Service: GMCP started', gmcpSupport);
+
+    this.gmcpService.handleGmcpStart(gmcpSupport);
+  };
+
   /**
    * Flushes the input queue by sending all queued messages to the server
    */

From 4a0da9ac257cb7f4882b3b5bad433fcb1258bc53 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 04:55:25 +0100
Subject: [PATCH 05/30] optional multi-mud config

---
 .cursor/rules/backend.mdc                     |   4 +
 .../core/config/mud-config.service.spec.ts    | 248 ++++++++++++++++++
 backend/src/core/config/mud-config.service.ts | 207 +++++++++++++++
 backend/src/core/environment/environment.ts   |  14 +-
 .../environment/types/environment-keys.ts     |   7 +-
 .../src/core/environment/types/environment.ts |   2 +
 .../middleware/use-mud-config-endpoint.ts     |  36 +++
 backend/src/core/middleware/use-sockets.ts    |  23 +-
 backend/src/core/sockets/socket-manager.ts    |  74 +++++-
 backend/src/main.ts                           |   9 +
 shared/src/sockets/client-to-server-events.ts |   3 +
 11 files changed, 609 insertions(+), 18 deletions(-)
 create mode 100644 backend/src/core/config/mud-config.service.spec.ts
 create mode 100644 backend/src/core/config/mud-config.service.ts
 create mode 100644 backend/src/core/middleware/use-mud-config-endpoint.ts

diff --git a/.cursor/rules/backend.mdc b/.cursor/rules/backend.mdc
index 9af6f27..a70708d 100644
--- a/.cursor/rules/backend.mdc
+++ b/.cursor/rules/backend.mdc
@@ -15,6 +15,10 @@ globs: backend/**/*.ts
 
 ## Architektur
 - **Environment**: Singleton via `Environment.getInstance()` – nie direkt `process.env` lesen
+- **MudConfigService**: Singleton via `MudConfigService.getInstance(configPath)` – Multi-MUD-Konfiguration
+  - Lädt `mud_config.json` wenn `MUD_CONFIG_PATH` Env-Var gesetzt und Datei existiert
+  - Fallback: Kein Config → `TELNET_HOST`/`TELNET_PORT` Env-Vars werden direkt genutzt
+  - Lookup: `getMudById()`, `resolveConnection()`, `getGmcpSupport()`, `getMudList()`
 - **Middleware**: Jede Middleware als eigene `use*`-Funktion in `core/middleware/`
 - **Telnet-Handler**: Neue Telnet-Options als Factory-Funktion in `features/telnet/utils/handle-*.ts` anlegen
 - **Logging**: Immer `logger` aus `shared/utils/logger.ts` verwenden (Winston), nie `console.log`
diff --git a/backend/src/core/config/mud-config.service.spec.ts b/backend/src/core/config/mud-config.service.spec.ts
new file mode 100644
index 0000000..3b0c9fd
--- /dev/null
+++ b/backend/src/core/config/mud-config.service.spec.ts
@@ -0,0 +1,248 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+
+import type { MudConfigFile } from '@webmud3/shared';
+
+// We need to reset the singleton between tests, so we use a helper
+// that clears the private static `instance` field.
+function resetSingleton() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (MudConfigService as any).instance = undefined;
+}
+
+// Import after mocks are set up
+import { MudConfigService } from './mud-config.service.js';
+
+const sampleConfig: MudConfigFile = {
+  scope: 'test',
+  href: '/',
+  mudfamilies: {
+    unitopia: {
+      charset: 'utf8',
+      MXP: true,
+      GMCP: true,
+      GMCP_Support: {
+        Sound: { version: '1', standard: true, optional: false },
+        Char: { version: '1', standard: true, optional: false },
+      },
+    },
+    basistelnet: {
+      charset: 'ascii',
+      MXP: false,
+      GMCP: false,
+      GMCP_Support: {},
+    },
+  },
+  muds: {
+    unitopia: {
+      name: 'UNItopia',
+      host: 'unitopia.de',
+      port: 992,
+      ssl: true,
+      rejectUnauthorized: true,
+      description: 'UNItopia via SSL',
+      playerlevel: 'all',
+      mudfamily: 'unitopia',
+    },
+    seifenblase: {
+      name: 'Seifenblase',
+      host: 'seifenblase.de',
+      port: 3333,
+      ssl: false,
+      rejectUnauthorized: false,
+      description: 'Seifenblase',
+      playerlevel: 'all',
+      mudfamily: 'basistelnet',
+    },
+  },
+  routes: {
+    '/': 'unitopia',
+    '/seifenblase': 'seifenblase',
+  },
+};
+
+describe('MudConfigService', () => {
+  let tmpFile: string;
+
+  beforeEach(() => {
+    resetSingleton();
+  });
+
+  afterEach(() => {
+    resetSingleton();
+
+    // Clean up temp file if it was created
+    if (tmpFile && fs.existsSync(tmpFile)) {
+      fs.unlinkSync(tmpFile);
+    }
+  });
+
+  function createTempConfig(content: MudConfigFile): string {
+    tmpFile = path.join(os.tmpdir(), `mud-config-test-${Date.now()}.json`);
+    fs.writeFileSync(tmpFile, JSON.stringify(content), 'utf-8');
+
+    return tmpFile;
+  }
+
+  describe('when MUD_CONFIG_PATH is not set', () => {
+    it('should report isAvailable = false', () => {
+      const service = MudConfigService.getInstance(null);
+
+      expect(service.isAvailable).toBe(false);
+    });
+
+    it('should return empty MUD list', () => {
+      const service = MudConfigService.getInstance(null);
+
+      expect(service.getMudList()).toEqual({});
+    });
+
+    it('should return empty routes', () => {
+      const service = MudConfigService.getInstance(null);
+
+      expect(service.getRoutes()).toEqual({});
+    });
+
+    it('should return undefined for getMudById', () => {
+      const service = MudConfigService.getInstance(null);
+
+      expect(service.getMudById('unitopia')).toBeUndefined();
+    });
+
+    it('should return undefined for resolveConnection', () => {
+      const service = MudConfigService.getInstance(null);
+
+      expect(service.resolveConnection('unitopia')).toBeUndefined();
+    });
+  });
+
+  describe('when MUD_CONFIG_PATH is set but file does not exist', () => {
+    it('should report isAvailable = false', () => {
+      const service = MudConfigService.getInstance('/nonexistent/path.json');
+
+      expect(service.isAvailable).toBe(false);
+    });
+
+    it('should return empty MUD list', () => {
+      const service = MudConfigService.getInstance('/nonexistent/path.json');
+
+      expect(service.getMudList()).toEqual({});
+    });
+  });
+
+  describe('when config file is loaded successfully', () => {
+    it('should report isAvailable = true', () => {
+      const configPath = createTempConfig(sampleConfig);
+      const service = MudConfigService.getInstance(configPath);
+
+      expect(service.isAvailable).toBe(true);
+    });
+
+    it('should return MUD by ID', () => {
+      const configPath = createTempConfig(sampleConfig);
+      const service = MudConfigService.getInstance(configPath);
+
+      const mud = service.getMudById('unitopia');
+
+      expect(mud).toBeDefined();
+      expect(mud!.name).toBe('UNItopia');
+      expect(mud!.host).toBe('unitopia.de');
+      expect(mud!.port).toBe(992);
+    });
+
+    it('should return undefined for unknown MUD ID', () => {
+      const configPath = createTempConfig(sampleConfig);
+      const service = MudConfigService.getInstance(configPath);
+
+      expect(service.getMudById('unknown')).toBeUndefined();
+    });
+
+    it('should resolve connection for known MUD', () => {
+      const configPath = createTempConfig(sampleConfig);
+      const service = MudConfigService.getInstance(configPath);
+
+      const conn = service.resolveConnection('unitopia');
+
+      expect(conn).toEqual({
+        host: 'unitopia.de',
+        port: 992,
+        ssl: true,
+        mudfamily: 'unitopia',
+        name: 'UNItopia',
+      });
+    });
+
+    it('should return GMCP support for GMCP-enabled family', () => {
+      const configPath = createTempConfig(sampleConfig);
+      const service = MudConfigService.getInstance(configPath);
+
+      const support = service.getGmcpSupport('unitopia');
+
+      expect(support).toBeDefined();
+      expect(support!['Sound']).toEqual({
+        version: '1',
+        standard: true,
+        optional: false,
+      });
+    });
+
+    it('should return undefined GMCP support for non-GMCP family', () => {
+      const configPath = createTempConfig(sampleConfig);
+      const service = MudConfigService.getInstance(configPath);
+
+      const support = service.getGmcpSupport('seifenblase');
+
+      expect(support).toBeUndefined();
+    });
+
+    it('should return MUD list for frontend', () => {
+      const configPath = createTempConfig(sampleConfig);
+      const service = MudConfigService.getInstance(configPath);
+
+      const list = service.getMudList();
+
+      expect(Object.keys(list)).toHaveLength(2);
+      expect(list['unitopia']).toEqual({
+        name: 'UNItopia',
+        description: 'UNItopia via SSL',
+        mudfamily: 'unitopia',
+      });
+    });
+
+    it('should return routes', () => {
+      const configPath = createTempConfig(sampleConfig);
+      const service = MudConfigService.getInstance(configPath);
+
+      expect(service.getRoutes()).toEqual({
+        '/': 'unitopia',
+        '/seifenblase': 'seifenblase',
+      });
+    });
+
+    it('should return MUD family config', () => {
+      const configPath = createTempConfig(sampleConfig);
+      const service = MudConfigService.getInstance(configPath);
+
+      const family = service.getMudFamily('unitopia');
+
+      expect(family).toBeDefined();
+      expect(family!.GMCP).toBe(true);
+      expect(family!.charset).toBe('utf8');
+    });
+  });
+
+  describe('when config file contains invalid JSON', () => {
+    it('should report isAvailable = false', () => {
+      tmpFile = path.join(
+        os.tmpdir(),
+        `mud-config-invalid-${Date.now()}.json`,
+      );
+      fs.writeFileSync(tmpFile, '{invalid json}', 'utf-8');
+
+      const service = MudConfigService.getInstance(tmpFile);
+
+      expect(service.isAvailable).toBe(false);
+    });
+  });
+});
diff --git a/backend/src/core/config/mud-config.service.ts b/backend/src/core/config/mud-config.service.ts
new file mode 100644
index 0000000..c65b193
--- /dev/null
+++ b/backend/src/core/config/mud-config.service.ts
@@ -0,0 +1,207 @@
+import fs from 'fs';
+import path from 'path';
+
+import type {
+  GmcpSupport,
+  MudConfig,
+  MudConfigFile,
+  MudFamilyConfig,
+} from '@webmud3/shared';
+
+import { logger } from '../../shared/utils/logger.js';
+
+/**
+ * Resolved connection parameters for a single MUD.
+ * Used by SocketManager to create the TelnetClient.
+ */
+export interface ResolvedMudConnection {
+  /** Telnet hostname */
+  host: string;
+  /** Telnet port */
+  port: number;
+  /** Whether to use TLS */
+  ssl: boolean;
+  /** MUD family key (e.g. "unitopia") */
+  mudfamily: string;
+  /** Display name */
+  name: string;
+}
+
+/**
+ * Service for loading and querying the multi-MUD configuration.
+ *
+ * Design decisions per user requirements:
+ * 1. The config file path is set via the optional `MUD_CONFIG_PATH` env variable
+ * 2. If the env variable is not set OR the file doesn't exist, the service
+ *    reports `isAvailable = false` and all lookups fall through to the
+ *    existing TELNET_HOST/PORT environment variables (no error, no crash)
+ */
+export class MudConfigService {
+  private static instance: MudConfigService;
+
+  private readonly config: MudConfigFile | null;
+
+  private constructor(configPath: string | null) {
+    this.config = this.loadConfig(configPath);
+  }
+
+  /**
+   * Initializes and returns the singleton instance.
+   *
+   * @param configPath - Path to mud_config.json (from `Environment.mudConfigPath`)
+   */
+  public static getInstance(configPath: string | null): MudConfigService {
+    return this.instance || (this.instance = new this(configPath));
+  }
+
+  /** Whether a valid MUD config file was loaded */
+  public get isAvailable(): boolean {
+    return this.config !== null;
+  }
+
+  /** Returns the full loaded config, or null */
+  public get rawConfig(): MudConfigFile | null {
+    return this.config;
+  }
+
+  /**
+   * Returns the MUD server configuration for a given MUD ID.
+   *
+   * @returns MudConfig or undefined if not found / config not loaded
+   */
+  public getMudById(mudId: string): MudConfig | undefined {
+    return this.config?.muds[mudId];
+  }
+
+  /**
+   * Returns the MUD family configuration for a given family key.
+   *
+   * @returns MudFamilyConfig or undefined if not found / config not loaded
+   */
+  public getMudFamily(familyKey: string): MudFamilyConfig | undefined {
+    return this.config?.mudfamilies[familyKey];
+  }
+
+  /**
+   * Returns the GMCP support configuration for a given MUD ID.
+   * Resolves the MUD → family → GMCP_Support chain.
+   *
+   * @returns GmcpSupport or undefined if MUD/family not found or GMCP not supported
+   */
+  public getGmcpSupport(mudId: string): GmcpSupport | undefined {
+    const mud = this.getMudById(mudId);
+
+    if (mud === undefined) {
+      return undefined;
+    }
+
+    const family = this.getMudFamily(mud.mudfamily);
+
+    if (family === undefined || !family.GMCP) {
+      return undefined;
+    }
+
+    return family.GMCP_Support;
+  }
+
+  /**
+   * Resolves the connection parameters for a given MUD ID.
+   *
+   * @returns ResolvedMudConnection or undefined if not found
+   */
+  public resolveConnection(mudId: string): ResolvedMudConnection | undefined {
+    const mud = this.getMudById(mudId);
+
+    if (mud === undefined) {
+      return undefined;
+    }
+
+    return {
+      host: mud.host,
+      port: mud.port,
+      ssl: mud.ssl,
+      mudfamily: mud.mudfamily,
+      name: mud.name,
+    };
+  }
+
+  /**
+   * Returns a sanitized MUD list suitable for the frontend (REST API).
+   * Excludes sensitive data and returns only what the frontend needs.
+   */
+  public getMudList(): Record<
+    string,
+    { name: string; description: string; mudfamily: string }
+  > {
+    if (this.config === null) {
+      return {};
+    }
+
+    const result: Record<
+      string,
+      { name: string; description: string; mudfamily: string }
+    > = {};
+
+    for (const [id, mud] of Object.entries(this.config.muds)) {
+      result[id] = {
+        name: mud.name,
+        description: mud.description,
+        mudfamily: mud.mudfamily,
+      };
+    }
+
+    return result;
+  }
+
+  /**
+   * Returns the route mappings from the config (URL path → MUD ID).
+   */
+  public getRoutes(): Record<string, string> {
+    return this.config?.routes ?? {};
+  }
+
+  /**
+   * Attempts to load and parse the mud_config.json file.
+   * Returns null (with a log message) if the file cannot be loaded.
+   */
+  private loadConfig(configPath: string | null): MudConfigFile | null {
+    if (configPath === null || configPath.trim().length === 0) {
+      logger.info(
+        '[MudConfigService] MUD_CONFIG_PATH not set. Using TELNET_HOST/PORT env variables as fallback.',
+      );
+
+      return null;
+    }
+
+    const resolvedPath = path.resolve(configPath);
+
+    if (!fs.existsSync(resolvedPath)) {
+      logger.warn(
+        `[MudConfigService] Config file not found: ${resolvedPath}. Using TELNET_HOST/PORT env variables as fallback.`,
+      );
+
+      return null;
+    }
+
+    try {
+      const rawContent = fs.readFileSync(resolvedPath, 'utf-8');
+      const parsed = JSON.parse(rawContent) as MudConfigFile;
+
+      const mudCount = Object.keys(parsed.muds ?? {}).length;
+      const familyCount = Object.keys(parsed.mudfamilies ?? {}).length;
+
+      logger.info(
+        `[MudConfigService] Loaded config from ${resolvedPath}: ${mudCount} MUDs, ${familyCount} families`,
+      );
+
+      return parsed;
+    } catch (error) {
+      logger.error(
+        `[MudConfigService] Failed to load config from ${resolvedPath}. Using TELNET_HOST/PORT env variables as fallback.`,
+        { error },
+      );
+
+      return null;
+    }
+  }
+}
diff --git a/backend/src/core/environment/environment.ts b/backend/src/core/environment/environment.ts
index 585c725..9be4a63 100644
--- a/backend/src/core/environment/environment.ts
+++ b/backend/src/core/environment/environment.ts
@@ -24,6 +24,7 @@ export class Environment implements IEnvironment {
   public readonly name: string;
   public readonly corsAllowList: string[];
   public readonly logLevel: string;
+  public readonly mudConfigPath: string | null;
 
   /**
    * Private constructor to enforce singleton pattern.
@@ -36,9 +37,18 @@ export class Environment implements IEnvironment {
 
     this.port = Number(getEnvironmentVariable('PORT', false, '5000'));
 
-    this.telnetHost = String(getEnvironmentVariable('TELNET_HOST'));
+    this.mudConfigPath =
+      getEnvironmentVariable('MUD_CONFIG_PATH', false) ?? null;
 
-    this.telnetPort = Number(getEnvironmentVariable('TELNET_PORT'));
+    // TELNET_HOST/PORT are fallback defaults when no MUD_CONFIG_PATH is set.
+    // When a mud_config.json is used, individual MUDs define their own host/port.
+    this.telnetHost = String(
+      getEnvironmentVariable('TELNET_HOST', false, 'localhost'),
+    );
+
+    this.telnetPort = Number(
+      getEnvironmentVariable('TELNET_PORT', false, '23'),
+    );
 
     this.telnetTLS =
       getEnvironmentVariable(
diff --git a/backend/src/core/environment/types/environment-keys.ts b/backend/src/core/environment/types/environment-keys.ts
index 4c181d9..08a953b 100644
--- a/backend/src/core/environment/types/environment-keys.ts
+++ b/backend/src/core/environment/types/environment-keys.ts
@@ -2,11 +2,12 @@ export type EnvironmentKeys =
   | 'HOST' // Optional | defaults to '0.0.0.0' | the IP the backend will listen for
   | 'PORT' // Optional | defaults to 5000 | the PORT the backend will listen for
   | 'NAME' // Required | the name of your client. Will be send to the MUD. Defaults to 'webmud3b'
-  | 'TELNET_HOST' // Required | the IP of your MUD
-  | 'TELNET_PORT' // Required | the PORT of your MUD
+  | 'TELNET_HOST' // Required (unless MUD_CONFIG_PATH is set) | the IP of your MUD
+  | 'TELNET_PORT' // Required (unless MUD_CONFIG_PATH is set) | the PORT of your MUD
   | 'TELNET_TLS' // Optional | defaults to 'false' | set this to true if you want a secure connection
   | 'SOCKET_TIMEOUT' // in milliseconds | default: 900000 (15 min) | determines how long messages are buffed for the disconnected frontend and when the telnet connection is closed
   | 'SOCKET_ROOT' // Required | URL for the socket connection. e.g. 'https://mud.example.com/socket.io'
   | 'ENVIRONMENT' // Optional | accepts values 'development' or 'production' | defaults to 'production' | Enables Debug REST Endpoint /api/info and allows for permissive CORS if set to 'development'
   | 'CORS_ALLOWED_ORIGINS' // Optional | comma separated list of origins that are allowed when ENVIRONMENT=production
-  | 'LOG_LEVEL'; // Optional | winston level: error|warn|info|http|verbose|debug|silly | defaults to 'debug'
+  | 'LOG_LEVEL' // Optional | winston level: error|warn|info|http|verbose|debug|silly | defaults to 'debug'
+  | 'MUD_CONFIG_PATH'; // Optional | path to mud_config.json | if not set or file not found, TELNET_HOST/PORT are used as fallback
diff --git a/backend/src/core/environment/types/environment.ts b/backend/src/core/environment/types/environment.ts
index 49e7b50..462c690 100644
--- a/backend/src/core/environment/types/environment.ts
+++ b/backend/src/core/environment/types/environment.ts
@@ -8,4 +8,6 @@ export interface IEnvironment {
   readonly socketTimeout: number;
   readonly environment: 'production' | 'development';
   readonly corsAllowList: string[];
+  /** Optional path to mud_config.json for Multi-MUD support */
+  readonly mudConfigPath: string | null;
 }
diff --git a/backend/src/core/middleware/use-mud-config-endpoint.ts b/backend/src/core/middleware/use-mud-config-endpoint.ts
new file mode 100644
index 0000000..23a78f8
--- /dev/null
+++ b/backend/src/core/middleware/use-mud-config-endpoint.ts
@@ -0,0 +1,36 @@
+import { Express, Request, Response } from 'express';
+
+import { MudConfigService } from '../config/mud-config.service.js';
+import { logger } from '../../shared/utils/logger.js';
+
+/**
+ * Registers the GET /api/mud-config endpoint.
+ *
+ * Returns the available MUD list and routes to the frontend.
+ * If no mud_config.json is loaded, returns an empty response
+ * (the frontend then knows it is in single-MUD mode).
+ */
+export const useMudConfigEndpoint = (
+  app: Express,
+  mudConfigService: MudConfigService,
+) => {
+  app.get('/api/mud-config', (req: Request, res: Response) => {
+    logger.info(`[Routes] requested /api/mud-config`);
+
+    if (!mudConfigService.isAvailable) {
+      res.json({
+        available: false,
+        muds: {},
+        routes: {},
+      });
+
+      return;
+    }
+
+    res.json({
+      available: true,
+      muds: mudConfigService.getMudList(),
+      routes: mudConfigService.getRoutes(),
+    });
+  });
+};
diff --git a/backend/src/core/middleware/use-sockets.ts b/backend/src/core/middleware/use-sockets.ts
index acb8fd9..4bb2817 100644
--- a/backend/src/core/middleware/use-sockets.ts
+++ b/backend/src/core/middleware/use-sockets.ts
@@ -1,6 +1,7 @@
 import { Server as HttpServer } from 'http';
 import { Server as HttpsServer } from 'https';
 
+import { MudConfigService } from '../config/mud-config.service.js';
 import { Environment } from '../environment/environment.js';
 import { SocketManager } from '../sockets/socket-manager.js';
 
@@ -8,11 +9,19 @@ export const useSockets = (
   httpServer: HttpServer | HttpsServer,
   environment: Environment,
 ) => {
-  return new SocketManager(httpServer, {
-    telnetHost: environment.telnetHost,
-    telnetPort: environment.telnetPort,
-    useTelnetTls: environment.telnetTLS,
-    socketRoot: environment.socketRoot,
-    clientName: environment.name,
-  });
+  const mudConfigService = MudConfigService.getInstance(
+    environment.mudConfigPath,
+  );
+
+  return new SocketManager(
+    httpServer,
+    {
+      telnetHost: environment.telnetHost,
+      telnetPort: environment.telnetPort,
+      useTelnetTls: environment.telnetTLS,
+      socketRoot: environment.socketRoot,
+      clientName: environment.name,
+    },
+    mudConfigService,
+  );
 };
diff --git a/backend/src/core/sockets/socket-manager.ts b/backend/src/core/sockets/socket-manager.ts
index 2f10eaf..e00ee30 100644
--- a/backend/src/core/sockets/socket-manager.ts
+++ b/backend/src/core/sockets/socket-manager.ts
@@ -1,5 +1,6 @@
 import type {
   ClientToServerEvents,
+  GmcpSupport,
   LinemodeState,
   ServerToClientEvents,
 } from '@webmud3/shared';
@@ -14,6 +15,7 @@ import { TelnetControlSequences } from '../../features/telnet/types/telnet-contr
 import { EchoState } from '../../features/telnet/utils/handle-echo-option.js';
 import { logger } from '../../shared/utils/logger.js';
 import { mapToServerEncodings } from '../../shared/utils/supported-encodings.js';
+import { MudConfigService } from '../config/mud-config.service.js';
 import { Environment } from '../environment/environment.js';
 import type { MudConnections } from './types/mud-connections.js';
 import { OutputLineBuffer } from './types/mud-connections.js';
@@ -33,6 +35,7 @@ export class SocketManager extends Server<
       socketRoot: string;
       clientName: string;
     },
+    private readonly mudConfigService?: MudConfigService,
   ) {
     super(server, {
       path: managerOptions.socketRoot,
@@ -202,6 +205,7 @@ export class SocketManager extends Server<
       (
         initialViewPort: { columns: number; rows: number },
         sessionToken: string,
+        mudId?: string,
       ) => {
         const resolvedSessionToken =
           sessionToken ||
@@ -212,6 +216,7 @@ export class SocketManager extends Server<
           `[${socket.id}] [Socket-Manager] Client want to connect to mud`,
           {
             sessionToken: resolvedSessionToken,
+            mudId: mudId ?? '(default)',
           },
         );
 
@@ -267,10 +272,16 @@ export class SocketManager extends Server<
           }
         }
 
+        // Resolve connection parameters: MudConfigService (by mudId) or fallback to env vars
+        const resolvedConnection = this.resolveConnectionParams(mudId);
+
         logger.info(
           `[${socket.id}] [Socket-Manager] Client had no active telnet connection .. creating new one..`,
           {
             sessionToken: resolvedSessionToken,
+            host: resolvedConnection.host,
+            port: resolvedConnection.port,
+            mudId: mudId ?? '(default)',
           },
         );
 
@@ -280,9 +291,9 @@ export class SocketManager extends Server<
 
         const telnetClient = new TelnetClient(
           socket.id,
-          this.managerOptions.telnetHost,
-          this.managerOptions.telnetPort,
-          this.managerOptions.useTelnetTls,
+          resolvedConnection.host,
+          resolvedConnection.port,
+          resolvedConnection.ssl,
           this.managerOptions.clientName,
           {
             initialViewPort,
@@ -387,13 +398,18 @@ export class SocketManager extends Server<
             : undefined;
 
           if (targetSocket !== undefined) {
+            // Resolve GMCP support from MUD family config (if available)
+            const gmcpSupport: GmcpSupport =
+              resolvedConnection.gmcpSupport ?? {};
+
             logger.info(
               `[${socket.id}] [Socket-Manager] GMCP started. Emitting 'mudGmcpStart'.`,
+              {
+                moduleCount: Object.keys(gmcpSupport).length,
+              },
             );
 
-            // For now emit an empty GmcpSupport object; Phase 1.3 (Multi-MUD) will
-            // populate this from the MudFamilyConfig once MudConfigService is available.
-            targetSocket.emit('mudGmcpStart', {});
+            targetSocket.emit('mudGmcpStart', gmcpSupport);
           }
         });
 
@@ -588,4 +604,50 @@ export class SocketManager extends Server<
 
     return undefined;
   }
+
+  /**
+   * Resolves the telnet connection parameters for a given MUD ID.
+   *
+   * Priority:
+   * 1. If mudId is given AND MudConfigService has config → use config values
+   * 2. Otherwise → fall back to managerOptions (from TELNET_HOST/PORT env vars)
+   */
+  private resolveConnectionParams(mudId?: string): {
+    host: string;
+    port: number;
+    ssl: boolean;
+    mudfamily?: string;
+    gmcpSupport?: GmcpSupport;
+  } {
+    if (mudId !== undefined && this.mudConfigService?.isAvailable) {
+      const resolved = this.mudConfigService.resolveConnection(mudId);
+
+      if (resolved !== undefined) {
+        const gmcpSupport = this.mudConfigService.getGmcpSupport(mudId);
+
+        logger.info(
+          `[Socket-Manager] Resolved MUD "${mudId}" → ${resolved.host}:${resolved.port} (family: ${resolved.mudfamily})`,
+        );
+
+        return {
+          host: resolved.host,
+          port: resolved.port,
+          ssl: resolved.ssl,
+          mudfamily: resolved.mudfamily,
+          gmcpSupport,
+        };
+      }
+
+      logger.warn(
+        `[Socket-Manager] MUD "${mudId}" not found in config. Falling back to env defaults.`,
+      );
+    }
+
+    // Fallback: use the default TELNET_HOST/PORT from environment
+    return {
+      host: this.managerOptions.telnetHost,
+      port: this.managerOptions.telnetPort,
+      ssl: this.managerOptions.useTelnetTls,
+    };
+  }
 }
diff --git a/backend/src/main.ts b/backend/src/main.ts
index f3233bb..c624bb7 100644
--- a/backend/src/main.ts
+++ b/backend/src/main.ts
@@ -2,11 +2,13 @@ import express from 'express';
 import sourceMaps from 'source-map-support';
 import { v4 as uuidv4 } from 'uuid';
 
+import { MudConfigService } from './core/config/mud-config.service.js';
 import { Environment } from './core/environment/environment.js';
 import { useBodyParser } from './core/middleware/use-body-parser.js';
 import { useConfigEndpoint } from './core/middleware/use-config-endpoint.js';
 import { useCors } from './core/middleware/use-cors.js';
 import { useInfoEndpoint } from './core/middleware/use-info-endpoint.js';
+import { useMudConfigEndpoint } from './core/middleware/use-mud-config-endpoint.js';
 import { useSockets } from './core/middleware/use-sockets.js';
 import { useStaticFiles } from './core/middleware/use-static-files.js';
 import { useRoutes } from './core/routes/routes.js';
@@ -36,6 +38,13 @@ const socketManager = useSockets(httpServer, environment);
 
 useConfigEndpoint(app);
 
+// MUD config endpoint (serves MUD list to frontend for Multi-MUD support)
+const mudConfigService = MudConfigService.getInstance(
+  environment.mudConfigPath,
+);
+
+useMudConfigEndpoint(app, mudConfigService);
+
 // Enable Debug Info Endpoints in Development Mode
 if (environment.environment === 'development') {
   useInfoEndpoint(app, socketManager);
diff --git a/shared/src/sockets/client-to-server-events.ts b/shared/src/sockets/client-to-server-events.ts
index 2b1d65c..17772ab 100644
--- a/shared/src/sockets/client-to-server-events.ts
+++ b/shared/src/sockets/client-to-server-events.ts
@@ -6,10 +6,13 @@ export interface ClientToServerEvents {
    * Requests a telnet connection using the provided initial viewport size.
    * @param initialViewPort - Client's terminal dimensions
    * @param sessionToken - Persistent session identifier (UUID) across socket reconnections
+   * @param mudId - Optional MUD identifier for Multi-MUD support. If not set, the backend
+   *                falls back to TELNET_HOST/PORT environment variables.
    */
   mudConnect: (
     initialViewPort: { columns: number; rows: number },
     sessionToken: string,
+    mudId?: string,
   ) => void;
   /**
    * Requests that the server tears down the active telnet connection.

From 835dd2d270d02787ff340114be02582bf073bcf3 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 05:07:42 +0100
Subject: [PATCH 06/30] reinvented window system

---
 .cursor/rules/frontend.mdc                    |  25 ++
 frontend/src/app/app.component.html           |   1 +
 frontend/src/app/app.component.ts             |   3 +-
 frontend/src/app/features/windows/index.ts    |   4 +
 .../src/app/features/windows/window-config.ts |  71 +++++
 .../windows/window-container.component.ts     | 100 +++++++
 .../features/windows/window.component.scss    | 112 +++++++
 .../app/features/windows/window.component.ts  | 230 ++++++++++++++
 .../features/windows/window.service.spec.ts   | 229 ++++++++++++++
 .../app/features/windows/window.service.ts    | 281 ++++++++++++++++++
 10 files changed, 1055 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/features/windows/index.ts
 create mode 100644 frontend/src/app/features/windows/window-config.ts
 create mode 100644 frontend/src/app/features/windows/window-container.component.ts
 create mode 100644 frontend/src/app/features/windows/window.component.scss
 create mode 100644 frontend/src/app/features/windows/window.component.ts
 create mode 100644 frontend/src/app/features/windows/window.service.spec.ts
 create mode 100644 frontend/src/app/features/windows/window.service.ts

diff --git a/.cursor/rules/frontend.mdc b/.cursor/rules/frontend.mdc
index a72495e..857e267 100644
--- a/.cursor/rules/frontend.mdc
+++ b/.cursor/rules/frontend.mdc
@@ -41,6 +41,31 @@ globs: frontend/**/*.ts,frontend/**/*.html,frontend/**/*.scss
 - Verdrahtung: SocketsService → GmcpService.handleIncoming() / handleGmcpStart()
 - Reset: GmcpService.reset() wird bei mudDisconnect aufgerufen
 
+## Fenstersystem (Modeless Windows)
+- **WindowConfig** (`features/windows/window-config.ts`): Interface für Fenster-Konfiguration
+  - UUID-basierte `windowId`, Parent-Child über `parentWindowId`
+  - `componentType` String bestimmt, welcher Content im Fenster gerendert wird
+  - Position, Größe, Z-Index, Sichtbarkeit, Titel
+- **WindowAction** Enum: Focus, Hide, Save, Cancel, SaveAndClose, WinError, Resize, CloseParent
+- **WindowEvent** Interface: `{ action, windowId, data? }` für Event-Kommunikation
+- **WindowService** (`features/windows/window.service.ts`): Zentraler Injectable Service
+  - `open()` erstellt neues Fenster mit UUID und auto-Z-Index
+  - `close()` schließt Fenster + rekursiv alle Children
+  - `focus()` bringt Fenster nach vorne (höchster Z-Index)
+  - `windows$` BehaviorSubject liefert reaktive Liste aller sichtbaren Fenster
+  - `incomingEvents$` / `outgoingEvents$` Subject-basierter Event-Bus
+  - `updatePosition()` / `updateSize()` / `updateData()` für State-Updates
+- **WindowComponent** (`features/windows/window.component.ts`): Standalone Component
+  - Draggable Titelleiste via native Pointer Events
+  - Resize-Handle (unten-rechts), Min-Constraints 200×120px
+  - ARIA: `role="dialog"`, `aria-label`, Focus-Buttons
+  - Emittet WindowEvents über Output an den Container
+- **WindowContainerComponent** (`features/windows/window-container.component.ts`):
+  - Fixed-Position Overlay, `pointer-events: none` (Fenster haben `auto`)
+  - Rendert `@for`-Loop über `windows$ | async`
+  - Routet Events an WindowService
+- Design-Prinzip: Catppuccin Mocha Farbschema (dark theme, passt zum Terminal)
+
 ## Styling
 - SCSS als Preprocessor
 - Komponenten-spezifische Styles in `.component.scss`
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index e307e2b..4edbae7 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1 +1,2 @@
 <app-mud-client></app-mud-client>
+<app-window-container></app-window-container>
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index ec0f4ad..b3b91a1 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { MudClientComponent } from '@webmud3/frontend/core/mud/components/mud-client/mud-client.component';
+import { WindowContainerComponent } from '@webmud3/frontend/features/windows';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  imports: [MudClientComponent],
+  imports: [MudClientComponent, WindowContainerComponent],
   standalone: true,
 })
 export class AppComponent {}
diff --git a/frontend/src/app/features/windows/index.ts b/frontend/src/app/features/windows/index.ts
new file mode 100644
index 0000000..b8c5d53
--- /dev/null
+++ b/frontend/src/app/features/windows/index.ts
@@ -0,0 +1,4 @@
+export { WindowAction, WindowConfig, WindowEvent } from './window-config';
+export { WindowContainerComponent } from './window-container.component';
+export { WindowComponent } from './window.component';
+export { WindowService } from './window.service';
diff --git a/frontend/src/app/features/windows/window-config.ts b/frontend/src/app/features/windows/window-config.ts
new file mode 100644
index 0000000..dd18eb2
--- /dev/null
+++ b/frontend/src/app/features/windows/window-config.ts
@@ -0,0 +1,71 @@
+/**
+ * Actions that can be communicated between a window and the WindowService.
+ */
+export enum WindowAction {
+  /** Bring window to front */
+  Focus = 'focus',
+  /** Close / hide the window */
+  Hide = 'hide',
+  /** Content requests a save operation */
+  Save = 'save',
+  /** Content requests cancel (close without saving) */
+  Cancel = 'cancel',
+  /** Save completed, close the window */
+  SaveAndClose = 'saveAndClose',
+  /** An error occurred inside the window content */
+  WinError = 'winError',
+  /** Window was resized by the user */
+  Resize = 'resize',
+  /** Parent window was closed → children should clean up */
+  CloseParent = 'closeParent',
+}
+
+/**
+ * Event payload flowing between the WindowService and window content components.
+ */
+export interface WindowEvent {
+  /** The action being performed */
+  action: WindowAction;
+  /** The ID of the window this event relates to */
+  windowId: string;
+  /** Optional payload (e.g. error message, new size) */
+  data?: unknown;
+}
+
+/**
+ * Configuration for a single modeless window instance.
+ *
+ * Immutable after creation — updates are done by replacing the config
+ * in the WindowService's BehaviorSubject.
+ */
+export interface WindowConfig {
+  /** Unique identifier (UUID) */
+  windowId: string;
+  /** ID of the parent window (for parent-child relationships) */
+  parentWindowId?: string;
+  /** Whether the window is currently visible */
+  visible: boolean;
+  /** Title displayed in the title bar */
+  title: string;
+  /** Optional tooltip on hover */
+  tooltip?: string;
+  /** Whether the window should start in a locked (non-draggable) state */
+  initialLock: boolean;
+  /** Whether the save button is shown */
+  allowSave: boolean;
+  /** Whether the cancel button is shown */
+  showCancel: boolean;
+  /**
+   * String key identifying which component to render inside the window.
+   * The WindowContainerComponent uses this to select the correct content.
+   */
+  componentType: string;
+  /** Z-index for stacking order */
+  zIndex: number;
+  /** Position on screen (top-left corner) */
+  position: { x: number; y: number };
+  /** Optional explicit size; if omitted, window sizes to content */
+  size?: { width: number; height: number };
+  /** Arbitrary data passed to the content component */
+  data?: unknown;
+}
diff --git a/frontend/src/app/features/windows/window-container.component.ts b/frontend/src/app/features/windows/window-container.component.ts
new file mode 100644
index 0000000..3cd56d0
--- /dev/null
+++ b/frontend/src/app/features/windows/window-container.component.ts
@@ -0,0 +1,100 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+
+import { WindowAction, WindowConfig, WindowEvent } from './window-config';
+import { WindowComponent } from './window.component';
+import { WindowService } from './window.service';
+
+/**
+ * Container component that renders all active modeless windows.
+ *
+ * Placed as an overlay on top of the main application content.
+ * It subscribes to WindowService.windows$ and renders a WindowComponent
+ * for each active window config.
+ *
+ * The container itself uses `pointer-events: none` so clicks pass through
+ * to the terminal below. Each individual window has `pointer-events: auto`.
+ */
+@Component({
+  selector: 'app-window-container',
+  standalone: true,
+  imports: [AsyncPipe, WindowComponent],
+  template: `
+    <div class="wm-container">
+      @for (config of windowService.windows$ | async; track config.windowId) {
+        <app-window
+          [config]="config"
+          (windowEvent)="onWindowEvent($event)"
+        ></app-window>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .wm-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 50;
+      }
+
+      :host ::ng-deep .wm-window {
+        pointer-events: auto;
+      }
+    `,
+  ],
+})
+export class WindowContainerComponent {
+  protected readonly windowService = inject(WindowService);
+
+  /**
+   * Handles events emitted by individual WindowComponent instances.
+   * Routes drag/resize position updates to the service and forwards
+   * action events.
+   */
+  onWindowEvent(event: WindowEvent): void {
+    switch (event.action) {
+      case WindowAction.Focus: {
+        // Check if this is a drag event with position data
+        const dragData = event.data as
+          | { x: number; y: number; type: string }
+          | undefined;
+
+        if (dragData?.type === 'drag') {
+          this.windowService.updatePosition(
+            event.windowId,
+            dragData.x,
+            dragData.y,
+          );
+        } else {
+          this.windowService.focus(event.windowId);
+        }
+
+        break;
+      }
+
+      case WindowAction.Resize: {
+        const sizeData = event.data as
+          | { width: number; height: number }
+          | undefined;
+
+        if (sizeData) {
+          this.windowService.updateSize(
+            event.windowId,
+            sizeData.width,
+            sizeData.height,
+          );
+        }
+
+        break;
+      }
+
+      default:
+        // Forward all other events to the service event bus
+        this.windowService.incomingEvents$.next(event);
+    }
+  }
+}
diff --git a/frontend/src/app/features/windows/window.component.scss b/frontend/src/app/features/windows/window.component.scss
new file mode 100644
index 0000000..448263f
--- /dev/null
+++ b/frontend/src/app/features/windows/window.component.scss
@@ -0,0 +1,112 @@
+.wm-window {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  min-height: 120px;
+  background: #1e1e2e;
+  border: 1px solid #45475a;
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  color: #cdd6f4;
+  font-family: sans-serif;
+  font-size: 13px;
+
+  // Prevent text selection during drag
+  user-select: none;
+}
+
+.wm-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  background: #313244;
+  cursor: grab;
+  flex-shrink: 0;
+  min-height: 28px;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.wm-title {
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  margin-right: 8px;
+}
+
+.wm-titlebar-buttons {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.wm-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #cdd6f4;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+  line-height: 1;
+
+  &:hover {
+    background: #45475a;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #89b4fa;
+    outline-offset: 1px;
+  }
+}
+
+.wm-btn-close {
+  &:hover {
+    background: #f38ba8;
+    color: #1e1e2e;
+  }
+}
+
+.wm-content {
+  flex: 1;
+  overflow: auto;
+  padding: 8px;
+  min-height: 0;
+
+  // Re-enable text selection inside content
+  user-select: text;
+}
+
+.wm-resize-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+
+  // Visual indicator: three diagonal lines
+  &::after {
+    content: '';
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 8px;
+    height: 8px;
+    border-right: 2px solid #585b70;
+    border-bottom: 2px solid #585b70;
+  }
+}
diff --git a/frontend/src/app/features/windows/window.component.ts b/frontend/src/app/features/windows/window.component.ts
new file mode 100644
index 0000000..c31e916
--- /dev/null
+++ b/frontend/src/app/features/windows/window.component.ts
@@ -0,0 +1,230 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+
+import { WindowAction, WindowConfig, WindowEvent } from './window-config';
+
+/** Minimum window dimensions in pixels */
+const MIN_WIDTH = 200;
+const MIN_HEIGHT = 120;
+
+/**
+ * A single floating modeless window with title bar, close button, drag and resize.
+ *
+ * Features:
+ * - Draggable via pointer events on the title bar
+ * - Resizable via a corner handle (bottom-right)
+ * - ARIA: `role="dialog"`, `aria-label`, keyboard-accessible close
+ * - Emits WindowEvents for focus, close, save, cancel
+ * - Content is projected via `<ng-content>`
+ */
+@Component({
+  selector: 'app-window',
+  standalone: true,
+  template: `
+    <div
+      class="wm-window"
+      role="dialog"
+      [attr.aria-label]="config.title"
+      [style.left.px]="config.position.x"
+      [style.top.px]="config.position.y"
+      [style.z-index]="config.zIndex"
+      [style.width.px]="config.size?.width"
+      [style.height.px]="config.size?.height"
+      (pointerdown)="onWindowPointerDown()"
+    >
+      <!-- Title bar -->
+      <div
+        class="wm-titlebar"
+        #titleBar
+        (pointerdown)="onDragStart($event)"
+      >
+        <span class="wm-title" [title]="config.tooltip ?? config.title">
+          {{ config.title }}
+        </span>
+        <div class="wm-titlebar-buttons">
+          @if (config.allowSave) {
+            <button
+              class="wm-btn wm-btn-save"
+              (click)="emitAction(WindowAction.Save)"
+              title="Speichern"
+              aria-label="Speichern"
+            >💾</button>
+          }
+          @if (config.showCancel) {
+            <button
+              class="wm-btn wm-btn-close"
+              (click)="emitAction(WindowAction.Hide)"
+              title="Schließen"
+              aria-label="Fenster schließen"
+            >✕</button>
+          }
+        </div>
+      </div>
+
+      <!-- Content area -->
+      <div class="wm-content">
+        <ng-content></ng-content>
+      </div>
+
+      <!-- Resize handle (bottom-right corner) -->
+      <div
+        class="wm-resize-handle"
+        (pointerdown)="onResizeStart($event)"
+        aria-hidden="true"
+      ></div>
+    </div>
+  `,
+  styleUrls: ['./window.component.scss'],
+})
+export class WindowComponent implements OnDestroy {
+  @Input({ required: true }) config!: WindowConfig;
+  @Output() windowEvent = new EventEmitter<WindowEvent>();
+
+  protected readonly WindowAction = WindowAction;
+
+  // Drag state
+  private isDragging = false;
+  private dragOffsetX = 0;
+  private dragOffsetY = 0;
+
+  // Resize state
+  private isResizing = false;
+  private resizeStartX = 0;
+  private resizeStartY = 0;
+  private resizeStartWidth = 0;
+  private resizeStartHeight = 0;
+
+  // Bound event handlers for cleanup
+  private readonly boundDragMove = this.onDragMove.bind(this);
+  private readonly boundDragEnd = this.onDragEnd.bind(this);
+  private readonly boundResizeMove = this.onResizeMove.bind(this);
+  private readonly boundResizeEnd = this.onResizeEnd.bind(this);
+
+  ngOnDestroy(): void {
+    // Ensure event listeners are cleaned up
+    this.cleanupDragListeners();
+    this.cleanupResizeListeners();
+  }
+
+  /** Emit focus event when clicking anywhere in the window */
+  onWindowPointerDown(): void {
+    this.emitAction(WindowAction.Focus);
+  }
+
+  /** Start dragging from the title bar */
+  onDragStart(event: PointerEvent): void {
+    if (this.config.initialLock) {
+      return;
+    }
+
+    // Only drag on primary button
+    if (event.button !== 0) {
+      return;
+    }
+
+    // Don't drag if clicking a button
+    if ((event.target as HTMLElement).closest('.wm-btn')) {
+      return;
+    }
+
+    event.preventDefault();
+
+    this.isDragging = true;
+    this.dragOffsetX = event.clientX - this.config.position.x;
+    this.dragOffsetY = event.clientY - this.config.position.y;
+
+    document.addEventListener('pointermove', this.boundDragMove);
+    document.addEventListener('pointerup', this.boundDragEnd);
+  }
+
+  /** Start resizing from the resize handle */
+  onResizeStart(event: PointerEvent): void {
+    if (event.button !== 0) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.isResizing = true;
+    this.resizeStartX = event.clientX;
+    this.resizeStartY = event.clientY;
+    this.resizeStartWidth = this.config.size?.width ?? MIN_WIDTH;
+    this.resizeStartHeight = this.config.size?.height ?? MIN_HEIGHT;
+
+    document.addEventListener('pointermove', this.boundResizeMove);
+    document.addEventListener('pointerup', this.boundResizeEnd);
+  }
+
+  /** Emit a window action event */
+  emitAction(action: WindowAction, data?: unknown): void {
+    this.windowEvent.emit({
+      action,
+      windowId: this.config.windowId,
+      data,
+    });
+  }
+
+  private onDragMove(event: PointerEvent): void {
+    if (!this.isDragging) {
+      return;
+    }
+
+    const newX = Math.max(0, event.clientX - this.dragOffsetX);
+    const newY = Math.max(0, event.clientY - this.dragOffsetY);
+
+    this.windowEvent.emit({
+      action: WindowAction.Focus,
+      windowId: this.config.windowId,
+      data: { x: newX, y: newY, type: 'drag' },
+    });
+  }
+
+  private onDragEnd(): void {
+    this.isDragging = false;
+    this.cleanupDragListeners();
+  }
+
+  private onResizeMove(event: PointerEvent): void {
+    if (!this.isResizing) {
+      return;
+    }
+
+    const deltaX = event.clientX - this.resizeStartX;
+    const deltaY = event.clientY - this.resizeStartY;
+
+    const newWidth = Math.max(MIN_WIDTH, this.resizeStartWidth + deltaX);
+    const newHeight = Math.max(MIN_HEIGHT, this.resizeStartHeight + deltaY);
+
+    this.windowEvent.emit({
+      action: WindowAction.Resize,
+      windowId: this.config.windowId,
+      data: { width: newWidth, height: newHeight },
+    });
+  }
+
+  private onResizeEnd(): void {
+    this.isResizing = false;
+    this.cleanupResizeListeners();
+  }
+
+  private cleanupDragListeners(): void {
+    document.removeEventListener('pointermove', this.boundDragMove);
+    document.removeEventListener('pointerup', this.boundDragEnd);
+  }
+
+  private cleanupResizeListeners(): void {
+    document.removeEventListener('pointermove', this.boundResizeMove);
+    document.removeEventListener('pointerup', this.boundResizeEnd);
+  }
+}
diff --git a/frontend/src/app/features/windows/window.service.spec.ts b/frontend/src/app/features/windows/window.service.spec.ts
new file mode 100644
index 0000000..7522fe1
--- /dev/null
+++ b/frontend/src/app/features/windows/window.service.spec.ts
@@ -0,0 +1,229 @@
+import { WindowAction, WindowConfig, WindowEvent } from './window-config';
+import { WindowService } from './window.service';
+
+describe('WindowService', () => {
+  let service: WindowService;
+  let emittedWindows: WindowConfig[][];
+
+  beforeEach(() => {
+    service = new WindowService();
+    emittedWindows = [];
+    service.windows$.subscribe((configs) => {
+      emittedWindows.push([...configs]);
+    });
+  });
+
+  describe('open()', () => {
+    it('should create a window with a unique ID', () => {
+      const id = service.open({ title: 'Test', componentType: 'TestComp' });
+      expect(id).toBeTruthy();
+      expect(typeof id).toBe('string');
+      expect(id.length).toBeGreaterThan(0);
+    });
+
+    it('should add the window to the registry', () => {
+      const id = service.open({ title: 'Test', componentType: 'TestComp' });
+      const config = service.getConfig(id);
+      expect(config).toBeDefined();
+      expect(config?.title).toBe('Test');
+      expect(config?.componentType).toBe('TestComp');
+      expect(config?.visible).toBe(true);
+    });
+
+    it('should emit the new window via windows$', () => {
+      service.open({ title: 'A', componentType: 'CompA' });
+
+      // First emission is empty (BehaviorSubject initial), second has the window
+      const last = emittedWindows[emittedWindows.length - 1];
+      expect(last.length).toBe(1);
+      expect(last[0].title).toBe('A');
+    });
+
+    it('should assign incrementing z-index', () => {
+      const idA = service.open({ title: 'A', componentType: 'CompA' });
+      const idB = service.open({ title: 'B', componentType: 'CompB' });
+
+      const cfgA = service.getConfig(idA);
+      const cfgB = service.getConfig(idB);
+
+      expect(cfgB!.zIndex).toBeGreaterThan(cfgA!.zIndex);
+    });
+
+    it('should stagger default positions', () => {
+      const idA = service.open({ title: 'A', componentType: 'CompA' });
+      const idB = service.open({ title: 'B', componentType: 'CompB' });
+
+      const cfgA = service.getConfig(idA);
+      const cfgB = service.getConfig(idB);
+
+      expect(cfgB!.position.x).toBeGreaterThan(cfgA!.position.x);
+      expect(cfgB!.position.y).toBeGreaterThan(cfgA!.position.y);
+    });
+
+    it('should apply partial config overrides', () => {
+      const id = service.open({
+        title: 'Custom',
+        componentType: 'Comp',
+        allowSave: true,
+        showCancel: false,
+        position: { x: 100, y: 200 },
+      });
+
+      const config = service.getConfig(id);
+      expect(config?.allowSave).toBe(true);
+      expect(config?.showCancel).toBe(false);
+      expect(config?.position).toEqual({ x: 100, y: 200 });
+    });
+  });
+
+  describe('close()', () => {
+    it('should remove the window from the registry', () => {
+      const id = service.open({ title: 'Test', componentType: 'TestComp' });
+      service.close(id);
+
+      expect(service.getConfig(id)).toBeUndefined();
+
+      const last = emittedWindows[emittedWindows.length - 1];
+      expect(last.length).toBe(0);
+    });
+
+    it('should close child windows recursively', () => {
+      const parentId = service.open({
+        title: 'Parent',
+        componentType: 'CompP',
+      });
+      const childId = service.open({
+        title: 'Child',
+        componentType: 'CompC',
+        parentWindowId: parentId,
+      });
+
+      service.close(parentId);
+
+      expect(service.getConfig(parentId)).toBeUndefined();
+      expect(service.getConfig(childId)).toBeUndefined();
+    });
+
+    it('should emit CloseParent event to outgoingEvents$', () => {
+      const events: WindowEvent[] = [];
+      service.outgoingEvents$.subscribe((e) => events.push(e));
+
+      const id = service.open({ title: 'Test', componentType: 'TestComp' });
+      service.close(id);
+
+      expect(events.some((e) => e.action === WindowAction.CloseParent)).toBe(
+        true,
+      );
+    });
+  });
+
+  describe('focus()', () => {
+    it('should give the focused window a higher z-index', () => {
+      const idA = service.open({ title: 'A', componentType: 'CompA' });
+      const idB = service.open({ title: 'B', componentType: 'CompB' });
+
+      const zBefore = service.getConfig(idA)!.zIndex;
+      service.focus(idA);
+      const zAfter = service.getConfig(idA)!.zIndex;
+
+      expect(zAfter).toBeGreaterThan(zBefore);
+      expect(zAfter).toBeGreaterThan(service.getConfig(idB)!.zIndex);
+    });
+  });
+
+  describe('updatePosition()', () => {
+    it('should update the window position', () => {
+      const id = service.open({ title: 'Test', componentType: 'TestComp' });
+      service.updatePosition(id, 300, 400);
+
+      expect(service.getConfig(id)?.position).toEqual({ x: 300, y: 400 });
+    });
+  });
+
+  describe('updateSize()', () => {
+    it('should update the window size', () => {
+      const id = service.open({ title: 'Test', componentType: 'TestComp' });
+      service.updateSize(id, 500, 350);
+
+      expect(service.getConfig(id)?.size).toEqual({
+        width: 500,
+        height: 350,
+      });
+    });
+  });
+
+  describe('updateData()', () => {
+    it('should update the data payload', () => {
+      const id = service.open({ title: 'Test', componentType: 'TestComp' });
+      const testData = { foo: 'bar', count: 42 };
+      service.updateData(id, testData);
+
+      expect(service.getConfig(id)?.data).toEqual(testData);
+    });
+  });
+
+  describe('closeAll()', () => {
+    it('should remove all windows', () => {
+      service.open({ title: 'A', componentType: 'CompA' });
+      service.open({ title: 'B', componentType: 'CompB' });
+      service.open({ title: 'C', componentType: 'CompC' });
+
+      service.closeAll();
+
+      const last = emittedWindows[emittedWindows.length - 1];
+      expect(last.length).toBe(0);
+    });
+  });
+
+  describe('incomingEvents$ handling', () => {
+    it('should close window on Hide event', () => {
+      const id = service.open({ title: 'Test', componentType: 'TestComp' });
+
+      service.incomingEvents$.next({
+        action: WindowAction.Hide,
+        windowId: id,
+      });
+
+      expect(service.getConfig(id)).toBeUndefined();
+    });
+
+    it('should close window on Cancel event', () => {
+      const id = service.open({ title: 'Test', componentType: 'TestComp' });
+
+      service.incomingEvents$.next({
+        action: WindowAction.Cancel,
+        windowId: id,
+      });
+
+      expect(service.getConfig(id)).toBeUndefined();
+    });
+
+    it('should focus window on Focus event', () => {
+      const idA = service.open({ title: 'A', componentType: 'CompA' });
+      const idB = service.open({ title: 'B', componentType: 'CompB' });
+
+      service.incomingEvents$.next({
+        action: WindowAction.Focus,
+        windowId: idA,
+      });
+
+      expect(service.getConfig(idA)!.zIndex).toBeGreaterThan(
+        service.getConfig(idB)!.zIndex,
+      );
+    });
+
+    it('should forward Save event to outgoingEvents$', () => {
+      const events: WindowEvent[] = [];
+      service.outgoingEvents$.subscribe((e) => events.push(e));
+
+      const id = service.open({ title: 'Test', componentType: 'TestComp' });
+
+      service.incomingEvents$.next({
+        action: WindowAction.Save,
+        windowId: id,
+      });
+
+      expect(events.some((e) => e.action === WindowAction.Save)).toBe(true);
+    });
+  });
+});
diff --git a/frontend/src/app/features/windows/window.service.ts b/frontend/src/app/features/windows/window.service.ts
new file mode 100644
index 0000000..176ff17
--- /dev/null
+++ b/frontend/src/app/features/windows/window.service.ts
@@ -0,0 +1,281 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+
+import {
+  WindowAction,
+  WindowConfig,
+  WindowEvent,
+} from './window-config';
+
+/** Starting z-index for windows (leaves room for terminal at z-index 1) */
+const BASE_Z_INDEX = 100;
+
+let nextZIndex = BASE_Z_INDEX;
+
+/**
+ * Generates a UUID v4 string (browser-safe, no crypto dependency needed).
+ */
+function generateId(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+/**
+ * Central service for managing modeless (floating) windows.
+ *
+ * Responsibilities:
+ * - Maintains the list of active windows as a reactive BehaviorSubject
+ * - Handles z-index management (auto-increment on focus)
+ * - Manages parent-child relationships (closing parent closes children)
+ * - Provides an event bus for window actions (focus, hide, save, etc.)
+ *
+ * Usage:
+ * ```typescript
+ * const windowId = windowService.open({
+ *   title: 'Verzeichnisanzeige',
+ *   componentType: 'DirlistComponent',
+ *   allowSave: false,
+ *   showCancel: true,
+ * });
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class WindowService {
+  /** Registry of all window configs, keyed by windowId */
+  private readonly registry = new Map<string, WindowConfig>();
+
+  /** Reactive stream of all currently active window configs */
+  private readonly windowConfigs$ = new BehaviorSubject<WindowConfig[]>([]);
+
+  /** Incoming events FROM window content components TO the service */
+  public readonly incomingEvents$ = new Subject<WindowEvent>();
+
+  /** Outgoing events FROM the service TO window content components */
+  public readonly outgoingEvents$ = new Subject<WindowEvent>();
+
+  /** Observable of all active windows (for the container component to render) */
+  public readonly windows$ = this.windowConfigs$.asObservable();
+
+  constructor() {
+    // Handle incoming events from window components
+    this.incomingEvents$.subscribe((event) => {
+      this.handleWindowEvent(event);
+    });
+  }
+
+  /**
+   * Opens a new window with the given partial configuration.
+   * Generates a windowId, assigns z-index, and adds to registry.
+   *
+   * @param config - Partial config (windowId and zIndex are auto-assigned)
+   * @returns The generated windowId
+   */
+  public open(config: Partial<WindowConfig> & { title: string; componentType: string }): string {
+    const windowId = generateId();
+
+    const fullConfig: WindowConfig = {
+      windowId,
+      visible: true,
+      initialLock: false,
+      allowSave: false,
+      showCancel: true,
+      zIndex: ++nextZIndex,
+      position: this.calculateDefaultPosition(),
+      ...config,
+    };
+
+    this.registry.set(windowId, fullConfig);
+    this.emitConfigs();
+
+    console.info(`[WindowService] Opened window: ${fullConfig.title} (${windowId})`);
+
+    return windowId;
+  }
+
+  /**
+   * Closes a window and removes it from the registry.
+   * Also closes all child windows recursively.
+   */
+  public close(windowId: string): void {
+    // Close children first
+    this.closeChildren(windowId);
+
+    const config = this.registry.get(windowId);
+
+    if (config !== undefined) {
+      // Notify the content component
+      this.outgoingEvents$.next({
+        action: WindowAction.CloseParent,
+        windowId,
+      });
+
+      this.registry.delete(windowId);
+      this.emitConfigs();
+
+      console.info(`[WindowService] Closed window: ${config.title} (${windowId})`);
+    }
+  }
+
+  /**
+   * Closes all child windows of the given parent.
+   */
+  public closeChildren(parentWindowId: string): void {
+    const children = Array.from(this.registry.values()).filter(
+      (c) => c.parentWindowId === parentWindowId,
+    );
+
+    for (const child of children) {
+      this.close(child.windowId);
+    }
+  }
+
+  /**
+   * Brings a window to the front by giving it the highest z-index.
+   */
+  public focus(windowId: string): void {
+    const config = this.registry.get(windowId);
+
+    if (config === undefined) {
+      return;
+    }
+
+    const updatedConfig: WindowConfig = {
+      ...config,
+      zIndex: ++nextZIndex,
+    };
+
+    this.registry.set(windowId, updatedConfig);
+    this.emitConfigs();
+  }
+
+  /**
+   * Updates the position of a window (after drag).
+   */
+  public updatePosition(windowId: string, x: number, y: number): void {
+    const config = this.registry.get(windowId);
+
+    if (config === undefined) {
+      return;
+    }
+
+    this.registry.set(windowId, {
+      ...config,
+      position: { x, y },
+    });
+
+    this.emitConfigs();
+  }
+
+  /**
+   * Updates the size of a window (after resize).
+   */
+  public updateSize(windowId: string, width: number, height: number): void {
+    const config = this.registry.get(windowId);
+
+    if (config === undefined) {
+      return;
+    }
+
+    this.registry.set(windowId, {
+      ...config,
+      size: { width, height },
+    });
+
+    this.emitConfigs();
+  }
+
+  /**
+   * Updates the data payload of a window (e.g. new directory listing).
+   */
+  public updateData(windowId: string, data: unknown): void {
+    const config = this.registry.get(windowId);
+
+    if (config === undefined) {
+      return;
+    }
+
+    this.registry.set(windowId, {
+      ...config,
+      data,
+    });
+
+    this.emitConfigs();
+
+    // Notify the content component about the data update
+    this.outgoingEvents$.next({
+      action: WindowAction.Resize, // repurpose as "data changed" signal
+      windowId,
+      data,
+    });
+  }
+
+  /**
+   * Returns the config for a specific window.
+   */
+  public getConfig(windowId: string): WindowConfig | undefined {
+    return this.registry.get(windowId);
+  }
+
+  /**
+   * Closes all windows and resets state.
+   */
+  public closeAll(): void {
+    this.registry.clear();
+    nextZIndex = BASE_Z_INDEX;
+    this.emitConfigs();
+
+    console.info('[WindowService] All windows closed.');
+  }
+
+  /**
+   * Handles incoming events from window content components.
+   */
+  private handleWindowEvent(event: WindowEvent): void {
+    switch (event.action) {
+      case WindowAction.Focus:
+        this.focus(event.windowId);
+        break;
+
+      case WindowAction.Hide:
+      case WindowAction.Cancel:
+        this.close(event.windowId);
+        break;
+
+      case WindowAction.SaveAndClose:
+        // Forward to content component, then close
+        this.outgoingEvents$.next(event);
+        this.close(event.windowId);
+        break;
+
+      case WindowAction.Save:
+      case WindowAction.WinError:
+        // Forward to content component
+        this.outgoingEvents$.next(event);
+        break;
+
+      default:
+        console.debug(`[WindowService] Unhandled event: ${event.action}`);
+    }
+  }
+
+  /**
+   * Calculates a staggered default position for new windows.
+   */
+  private calculateDefaultPosition(): { x: number; y: number } {
+    const count = this.registry.size;
+    const offset = (count % 10) * 24;
+
+    return { x: 40 + offset, y: 40 + offset };
+  }
+
+  /**
+   * Emits the current list of visible window configs.
+   */
+  private emitConfigs(): void {
+    const configs = Array.from(this.registry.values()).filter((c) => c.visible);
+    this.windowConfigs$.next(configs);
+  }
+}

From 02245061c0db77f3c6a4af515a69b1d3f15a1c3b Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 05:18:10 +0100
Subject: [PATCH 07/30] DirList and ACE-Editor

---
 .cursor/rules/frontend.mdc                    |  28 +-
 frontend/package.json                         |   3 +-
 frontend/setup-jest.ts                        |   4 +-
 .../features/gmcp-files/dirlist.component.ts  | 184 ++++++++++
 .../features/gmcp-files/editor.component.ts   | 327 ++++++++++++++++++
 .../features/gmcp-files/file-types.spec.ts    |  22 ++
 .../src/app/features/gmcp-files/file-types.ts | 102 ++++++
 .../features/gmcp-files/files-gmcp-handler.ts | 293 ++++++++++++++++
 .../features/gmcp-files/files.service.spec.ts | 158 +++++++++
 .../app/features/gmcp-files/files.service.ts  | 181 ++++++++++
 frontend/src/app/features/gmcp-files/index.ts |  12 +
 .../windows/window-container.component.ts     |  23 +-
 package-lock.json                             |   7 +
 13 files changed, 1339 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/app/features/gmcp-files/dirlist.component.ts
 create mode 100644 frontend/src/app/features/gmcp-files/editor.component.ts
 create mode 100644 frontend/src/app/features/gmcp-files/file-types.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-files/file-types.ts
 create mode 100644 frontend/src/app/features/gmcp-files/files-gmcp-handler.ts
 create mode 100644 frontend/src/app/features/gmcp-files/files.service.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-files/files.service.ts
 create mode 100644 frontend/src/app/features/gmcp-files/index.ts

diff --git a/.cursor/rules/frontend.mdc b/.cursor/rules/frontend.mdc
index 857e267..021c8ac 100644
--- a/.cursor/rules/frontend.mdc
+++ b/.cursor/rules/frontend.mdc
@@ -65,6 +65,31 @@ globs: frontend/**/*.ts,frontend/**/*.html,frontend/**/*.scss
   - Rendert `@for`-Loop über `windows$ | async`
   - Routet Events an WindowService
 - Design-Prinzip: Catppuccin Mocha Farbschema (dark theme, passt zum Terminal)
+- Content-Routing: `WindowContainerComponent` nutzt `@switch (config.componentType)` um Content-Komponenten einzubetten
+  - Neue Fenster-Typen: Component importieren + `@case` hinzufügen
+
+## GMCP Files-Modul (Datei-Browser & Code-Editor)
+- **FilesGmcpHandler** (`features/gmcp-files/files-gmcp-handler.ts`): GmcpModuleHandler für `Files`
+  - `Files.URL` → Datei laden + Editor-Fenster öffnen
+  - `Files.DirectoryList` → DirList-Fenster öffnen/aktualisieren
+  - `openFile()` / `changeDirectory()` → GMCP-Requests an MUD
+  - `saveFile()` → Save-Workflow: GMCP Files.OpenFile (flag=1) → HTTP PUT → GMCP Files.fileSaved
+- **FilesService** (`features/gmcp-files/files.service.ts`): HTTP Load/Save + FileInfo-Registry
+  - `processFileUrl()` erstellt/aktualisiert FileInfo aus GMCP-Payload
+  - `loadFileContent()` / `saveFileContent()` → async HTTP-Operationen
+  - `isDirty()` für ungespeicherte Änderungen, `reset()` bei Disconnect
+- **DirListComponent** (`features/gmcp-files/dirlist.component.ts`): Verzeichnis-Browser
+  - Standalone, zeigt Dateien/Ordner als Tabelle an
+  - Klick auf Datei → `FilesGmcpHandler.openFile()`
+  - Klick auf Ordner → `FilesGmcpHandler.changeDirectory()`
+- **EditorComponent** (`features/gmcp-files/editor.component.ts`): Code-Editor
+  - Ace Editor (`ace-builds`), lazy-loaded via `import()`
+  - Syntax-Highlighting: C/C++ (`.c`, `.h`, `.inc`), Text (alles andere)
+  - Theme-Auswahl mit localStorage-Persistenz
+  - Toolbar: Theme-Select, Read-Only-Toggle, Zwischenspeichern, Speichern&Schließen, Abbrechen
+  - Dirty-Check bei Schließen (window.confirm)
+- **FileInfo** / **FileEntry** (`features/gmcp-files/file-types.ts`): Typen für Dateisystem-Daten
+- Parent-Child: DirList-Fenster ist Parent aller geöffneten Editor-Fenster
 
 ## Styling
 - SCSS als Preprocessor
@@ -79,7 +104,8 @@ globs: frontend/**/*.ts,frontend/**/*.html,frontend/**/*.scss
 ## Testing
 - Jest über @angular-builders/jest (nicht Karma!)
 - Test-Dateien: `*.spec.ts` neben den Source-Dateien
-- Setup: `setup-jest.ts`
+- Setup: `setup-jest.ts` (nutzt `setupZoneTestEnv()` aus `jest-preset-angular`)
+- Angular-DI in Tests: `TestBed.configureTestingModule()` + `provideHttpClient()` bei Services mit HTTP
 
 ## Conventions
 - TypeScript strict mode
diff --git a/frontend/package.json b/frontend/package.json
index 37ebbd4..f547e33 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,7 +26,6 @@
   },
   "private": true,
   "dependencies": {
-    "@webmud3/shared": "1.0.0-alpha",
     "@angular-eslint/schematics": "~20.3.0",
     "@angular/animations": "~20.3.4",
     "@angular/common": "~20.3.4",
@@ -36,10 +35,12 @@
     "@angular/platform-browser": "~20.3.4",
     "@angular/platform-browser-dynamic": "~20.3.4",
     "@angular/router": "~20.3.4",
+    "@webmud3/shared": "1.0.0-alpha",
     "@xterm/addon-attach": "~0.11.0",
     "@xterm/addon-clipboard": "~0.2.0",
     "@xterm/addon-fit": "~0.10.0",
     "@xterm/xterm": "~5.5.0",
+    "ace-builds": "^1.43.6",
     "normalize.css": "~8.0.1",
     "rxjs": "~7.8.2",
     "socket.io-client": "~4.8.1",
diff --git a/frontend/setup-jest.ts b/frontend/setup-jest.ts
index 22d2d05..58c511e 100644
--- a/frontend/setup-jest.ts
+++ b/frontend/setup-jest.ts
@@ -1 +1,3 @@
-// import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();
diff --git a/frontend/src/app/features/gmcp-files/dirlist.component.ts b/frontend/src/app/features/gmcp-files/dirlist.component.ts
new file mode 100644
index 0000000..01628e1
--- /dev/null
+++ b/frontend/src/app/features/gmcp-files/dirlist.component.ts
@@ -0,0 +1,184 @@
+import {
+  Component,
+  inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { WindowAction, WindowConfig, WindowService } from '../windows';
+
+import { FileEntry } from './file-types';
+import { FilesGmcpHandler } from './files-gmcp-handler';
+
+/**
+ * Data shape expected in windowConfig.data for the DirList component.
+ */
+interface DirListData {
+  path: string;
+  entries: FileEntry[];
+}
+
+/**
+ * Displays a directory listing inside a modeless window.
+ *
+ * Allows:
+ * - Clicking a file to open it in the editor (via FilesGmcpHandler)
+ * - Clicking a directory to navigate into it (GMCP Files.ChDir)
+ *
+ * The component receives its data through the WindowConfig.data property
+ * and updates when the WindowService pushes new data via outgoingEvents$.
+ */
+@Component({
+  selector: 'app-dirlist',
+  standalone: true,
+  template: `
+    <div class="dirlist">
+      <div class="dirlist-path">{{ path }}</div>
+      <table class="dirlist-table" role="grid" aria-label="Verzeichnisinhalt">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Größe</th>
+            <th>Datum</th>
+            <th>Zeit</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (entry of entries; track entry.name; let i = $index) {
+            @if (entry.isdir !== 0) {
+              <tr class="dirlist-dir" (click)="onChangeDir(entry.name)" (keydown.enter)="onChangeDir(entry.name)" [attr.tabindex]="i">
+                <td class="dirlist-name dirlist-name--dir">{{ entry.name }}/</td>
+                <td></td>
+                <td>{{ entry.filedate }}</td>
+                <td>{{ entry.filetime }}</td>
+              </tr>
+            } @else {
+              <tr class="dirlist-file" (click)="onFileOpen(entry.name)" (keydown.enter)="onFileOpen(entry.name)" [attr.tabindex]="i">
+                <td class="dirlist-name dirlist-name--file">{{ entry.name }}</td>
+                <td class="dirlist-size">{{ entry.size }}</td>
+                <td>{{ entry.filedate }}</td>
+                <td>{{ entry.filetime }}</td>
+              </tr>
+            }
+          }
+        </tbody>
+      </table>
+    </div>
+  `,
+  styles: [
+    `
+      .dirlist {
+        font-family: monospace;
+        font-size: 12px;
+        color: #cdd6f4;
+      }
+
+      .dirlist-path {
+        font-weight: bold;
+        padding: 4px 0 8px 0;
+        color: #89b4fa;
+      }
+
+      .dirlist-table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+
+      .dirlist-table th {
+        text-align: left;
+        padding: 2px 8px;
+        border-bottom: 1px solid #45475a;
+        color: #a6adc8;
+        font-weight: 500;
+      }
+
+      .dirlist-table td {
+        padding: 2px 8px;
+      }
+
+      .dirlist-table tr {
+        cursor: pointer;
+
+        &:hover {
+          background: #313244;
+        }
+
+        &:focus {
+          outline: 1px solid #89b4fa;
+          outline-offset: -1px;
+        }
+      }
+
+      .dirlist-name--dir {
+        color: #89dceb;
+      }
+
+      .dirlist-name--file {
+        color: #cdd6f4;
+      }
+
+      .dirlist-size {
+        text-align: right;
+        color: #a6adc8;
+      }
+    `,
+  ],
+})
+export class DirListComponent implements OnInit, OnDestroy {
+  @Input({ required: true }) config!: WindowConfig;
+
+  path = '';
+  entries: FileEntry[] = [];
+
+  private readonly windowService = inject(WindowService);
+  private readonly filesHandler = inject(FilesGmcpHandler);
+  private subscription?: Subscription;
+
+  ngOnInit(): void {
+    this.updateFromConfig();
+
+    // Subscribe to data updates from the WindowService
+    this.subscription = this.windowService.outgoingEvents$.subscribe(
+      (event) => {
+        if (event.windowId !== this.config.windowId) {
+          return;
+        }
+
+        if (event.action === WindowAction.Resize && event.data !== undefined) {
+          // WindowService.updateData() repurposes Resize as data-changed signal
+          const dirData = event.data as DirListData;
+
+          if (dirData.path !== undefined && dirData.entries !== undefined) {
+            this.path = dirData.path;
+            this.entries = dirData.entries;
+          }
+        }
+      },
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
+
+  onFileOpen(filename: string): void {
+    this.filesHandler.openFile(this.path, filename);
+  }
+
+  onChangeDir(dirname: string): void {
+    this.filesHandler.changeDirectory(this.path, dirname);
+  }
+
+  private updateFromConfig(): void {
+    const data = this.config.data as DirListData | undefined;
+
+    if (data !== undefined) {
+      this.path = data.path;
+      this.entries = data.entries;
+    }
+  }
+}
diff --git a/frontend/src/app/features/gmcp-files/editor.component.ts b/frontend/src/app/features/gmcp-files/editor.component.ts
new file mode 100644
index 0000000..443b371
--- /dev/null
+++ b/frontend/src/app/features/gmcp-files/editor.component.ts
@@ -0,0 +1,327 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { WindowAction, WindowConfig, WindowService } from '../windows';
+
+import { FileInfo } from './file-types';
+import { FilesGmcpHandler } from './files-gmcp-handler';
+import { FilesService } from './files.service';
+
+/** Available Ace themes */
+const ACE_THEMES: string[] = [
+  'ambiance', 'chaos', 'chrome', 'clouds', 'clouds_midnight',
+  'cobalt', 'crimson_editor', 'dawn', 'dracula', 'dreamweaver',
+  'eclipse', 'github', 'gob', 'gruvbox', 'idle_fingers',
+  'iplastic', 'katzenmilch', 'kr_theme', 'kuroir', 'merbivore',
+  'merbivore_soft', 'mono_industrial', 'monokai', 'nord_dark',
+  'one_dark', 'pastel_on_dark', 'solarized_dark', 'solarized_light',
+  'sqlserver', 'terminal', 'textmate', 'tomorrow',
+  'tomorrow_night_blue', 'tomorrow_night_bright', 'tomorrow_night',
+  'tomorrow_night_eighties', 'twilight', 'vibrant_ink', 'xcode',
+];
+
+const STORAGE_KEY_THEME = 'webmud3_editor_theme';
+const DEFAULT_THEME = 'twilight';
+
+/**
+ * In-browser code editor using Ace Editor, displayed inside a modeless window.
+ *
+ * Features:
+ * - Syntax highlighting for C/C++ and text
+ * - Theme selection with persistence in localStorage
+ * - Save (intermediate and final)
+ * - Cancel with dirty-check warning
+ * - Read-only toggle
+ * - Responds to window resize events
+ */
+@Component({
+  selector: 'app-editor',
+  standalone: true,
+  template: `
+    <div class="editor-toolbar">
+      <select
+        class="editor-theme-select"
+        [value]="currentTheme"
+        (change)="onThemeChange($event)"
+        aria-label="Editor-Theme auswählen"
+      >
+        @for (theme of themes; track theme) {
+          <option [value]="theme">{{ theme }}</option>
+        }
+      </select>
+
+      <div class="editor-toolbar-buttons">
+        <button
+          class="editor-btn"
+          (click)="toggleReadOnly()"
+          [title]="readOnly ? 'Bearbeitungsmodus aktivieren' : 'Lesemodus aktivieren'"
+          [attr.aria-pressed]="readOnly"
+        >
+          {{ readOnly ? '🔒' : '🔓' }}
+        </button>
+
+        @if (!readOnly && fileInfo?.writeacl) {
+          <button
+            class="editor-btn"
+            (click)="onSave(false)"
+            title="Zwischenspeichern"
+            aria-label="Zwischenspeichern"
+          >💾</button>
+
+          <button
+            class="editor-btn editor-btn--primary"
+            (click)="onSave(true)"
+            title="Speichern & Schließen"
+            aria-label="Speichern und Schließen"
+          >💾✓</button>
+        }
+
+        <button
+          class="editor-btn editor-btn--danger"
+          (click)="onCancel()"
+          title="Schließen"
+          aria-label="Schließen"
+        >✕</button>
+      </div>
+    </div>
+
+    <div class="editor-container" #editorContainer></div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+      }
+
+      .editor-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 0;
+        gap: 8px;
+        flex-shrink: 0;
+      }
+
+      .editor-theme-select {
+        background: #313244;
+        color: #cdd6f4;
+        border: 1px solid #45475a;
+        border-radius: 4px;
+        padding: 2px 6px;
+        font-size: 11px;
+        max-width: 160px;
+
+        &:focus-visible {
+          outline: 2px solid #89b4fa;
+        }
+      }
+
+      .editor-toolbar-buttons {
+        display: flex;
+        gap: 4px;
+      }
+
+      .editor-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 28px;
+        height: 24px;
+        border: none;
+        border-radius: 4px;
+        background: #313244;
+        color: #cdd6f4;
+        cursor: pointer;
+        font-size: 12px;
+        padding: 0 6px;
+
+        &:hover {
+          background: #45475a;
+        }
+
+        &:focus-visible {
+          outline: 2px solid #89b4fa;
+          outline-offset: 1px;
+        }
+      }
+
+      .editor-btn--primary {
+        background: #a6e3a1;
+        color: #1e1e2e;
+
+        &:hover {
+          background: #94e2d5;
+        }
+      }
+
+      .editor-btn--danger {
+        &:hover {
+          background: #f38ba8;
+          color: #1e1e2e;
+        }
+      }
+
+      .editor-container {
+        flex: 1;
+        min-height: 100px;
+        position: relative;
+      }
+    `,
+  ],
+})
+export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
+  @Input({ required: true }) config!: WindowConfig;
+  @ViewChild('editorContainer', { static: true }) editorContainer!: ElementRef<HTMLElement>;
+
+  readonly themes = ACE_THEMES;
+  currentTheme = DEFAULT_THEME;
+  readOnly = false;
+  fileInfo: FileInfo | null = null;
+
+  private aceEditor: any; // ace.Ace.Editor — dynamically imported
+  private aceSession: any; // ace.Ace.EditSession
+  private initialContent = '';
+
+  private readonly windowService = inject(WindowService);
+  private readonly filesService = inject(FilesService);
+  private readonly filesHandler = inject(FilesGmcpHandler);
+
+  private eventSub?: Subscription;
+
+  ngOnInit(): void {
+    this.fileInfo = (this.config.data as FileInfo) ?? null;
+    this.initialContent = this.fileInfo?.content ?? '';
+
+    // Load saved theme
+    const savedTheme = localStorage.getItem(STORAGE_KEY_THEME);
+
+    if (savedTheme !== null && ACE_THEMES.includes(savedTheme)) {
+      this.currentTheme = savedTheme;
+    }
+
+    // Listen for window events (resize, errors)
+    this.eventSub = this.windowService.outgoingEvents$.subscribe((event) => {
+      if (event.windowId !== this.config.windowId) {
+        return;
+      }
+
+      switch (event.action) {
+        case WindowAction.Resize:
+          this.aceEditor?.resize(true);
+          break;
+
+        case WindowAction.WinError:
+          console.error('[EditorComponent] Save error:', event.data);
+          break;
+      }
+    });
+  }
+
+  async ngAfterViewInit(): Promise<void> {
+    // Dynamic import for lazy loading (~1MB)
+    const ace = await import('ace-builds');
+    await import('ace-builds/src-noconflict/mode-c_cpp');
+    await import('ace-builds/src-noconflict/mode-text');
+
+    this.aceEditor = ace.edit(this.editorContainer.nativeElement);
+    this.aceEditor.setAutoScrollEditorIntoView(true);
+    this.aceEditor.setShowPrintMargin(false);
+
+    // Apply theme (dynamic import)
+    try {
+      await import(`ace-builds/src-noconflict/theme-${this.currentTheme}`);
+    } catch {
+      // Fallback if theme module not found
+      await import('ace-builds/src-noconflict/theme-twilight');
+    }
+
+    this.aceEditor.setTheme(`ace/theme/${this.currentTheme}`);
+
+    // Create session with file content and mode
+    const mode = this.fileInfo?.editorMode ?? 'text';
+
+    this.aceSession = new ace.EditSession(this.initialContent);
+    this.aceSession.setMode(`ace/mode/${mode}`);
+    this.aceEditor.setSession(this.aceSession);
+    this.aceEditor.setReadOnly(this.readOnly);
+  }
+
+  ngOnDestroy(): void {
+    this.eventSub?.unsubscribe();
+
+    if (this.aceEditor !== undefined) {
+      this.aceEditor.destroy();
+    }
+  }
+
+  async onThemeChange(event: Event): Promise<void> {
+    const select = event.target as HTMLSelectElement;
+    this.currentTheme = select.value;
+
+    localStorage.setItem(STORAGE_KEY_THEME, this.currentTheme);
+
+    if (this.aceEditor !== undefined) {
+      try {
+        await import(`ace-builds/src-noconflict/theme-${this.currentTheme}`);
+      } catch {
+        // Theme module might not exist
+      }
+
+      this.aceEditor.setTheme(`ace/theme/${this.currentTheme}`);
+    }
+  }
+
+  toggleReadOnly(): void {
+    this.readOnly = !this.readOnly;
+
+    if (this.aceEditor !== undefined) {
+      this.aceEditor.setReadOnly(this.readOnly);
+    }
+  }
+
+  onSave(closable: boolean): void {
+    if (this.readOnly || this.fileInfo === null) {
+      return;
+    }
+
+    // Update fileInfo content from editor
+    this.fileInfo.content = this.aceEditor?.getValue() ?? '';
+
+    this.filesHandler.saveFile(this.fileInfo.file, closable);
+  }
+
+  onCancel(): void {
+    if (this.fileInfo === null) {
+      this.windowService.close(this.config.windowId);
+      return;
+    }
+
+    const currentContent = this.aceEditor?.getValue() ?? '';
+    const isDirty = currentContent !== this.initialContent;
+
+    if (isDirty) {
+      const confirmed = window.confirm(
+        'Willst Du ohne Speichern schließen?',
+      );
+
+      if (!confirmed) {
+        return;
+      }
+    }
+
+    this.filesService.removeFile(this.fileInfo.file);
+    this.windowService.close(this.config.windowId);
+  }
+}
diff --git a/frontend/src/app/features/gmcp-files/file-types.spec.ts b/frontend/src/app/features/gmcp-files/file-types.spec.ts
new file mode 100644
index 0000000..c4e3345
--- /dev/null
+++ b/frontend/src/app/features/gmcp-files/file-types.spec.ts
@@ -0,0 +1,22 @@
+import { editorModeFromExtension } from './file-types';
+
+describe('editorModeFromExtension', () => {
+  it('should return "c_cpp" for .c files', () => {
+    expect(editorModeFromExtension('.c')).toBe('c_cpp');
+  });
+
+  it('should return "c_cpp" for .h files', () => {
+    expect(editorModeFromExtension('.h')).toBe('c_cpp');
+  });
+
+  it('should return "c_cpp" for .inc files', () => {
+    expect(editorModeFromExtension('.inc')).toBe('c_cpp');
+  });
+
+  it('should return "text" for unknown extensions', () => {
+    expect(editorModeFromExtension('.txt')).toBe('text');
+    expect(editorModeFromExtension('.md')).toBe('text');
+    expect(editorModeFromExtension('.log')).toBe('text');
+    expect(editorModeFromExtension('')).toBe('text');
+  });
+});
diff --git a/frontend/src/app/features/gmcp-files/file-types.ts b/frontend/src/app/features/gmcp-files/file-types.ts
new file mode 100644
index 0000000..7fc3c77
--- /dev/null
+++ b/frontend/src/app/features/gmcp-files/file-types.ts
@@ -0,0 +1,102 @@
+/**
+ * A single entry in a directory listing.
+ * Corresponds to the GMCP `Files.DirectoryList` entries.
+ */
+export interface FileEntry {
+  /** File or directory name */
+  name: string;
+  /** 0 = file, non-zero = directory */
+  isdir: number;
+  /** File size in bytes (0 for directories) */
+  size?: number;
+  /** Human-readable date string (e.g. "14.02.2026") */
+  filedate?: string;
+  /** Human-readable time string (e.g. "12:34") */
+  filetime?: string;
+}
+
+/**
+ * Ace Editor mode identifier based on file extension.
+ */
+export type FileEditorMode = 'c_cpp' | 'text';
+
+/**
+ * Information about a file opened for editing.
+ * Central data structure for the editor workflow.
+ */
+export interface FileInfo {
+  /** Full file path on the MUD server */
+  file: string;
+  /** Directory path */
+  path: string;
+  /** Filename without path */
+  filename: string;
+  /** File extension (e.g. ".c", ".h") */
+  filetype: string;
+  /** Display title in the editor */
+  title: string;
+  /** URL for HTTP GET/PUT operations */
+  lasturl: string;
+  /** Whether this is a new (unsaved) file */
+  newfile: boolean;
+  /** Whether the user has write access */
+  writeacl: boolean;
+  /** Whether this is a temporary file */
+  temporary: boolean;
+  /** File size in bytes */
+  filesize: number;
+  /** Whether the file can be closed immediately after saving */
+  closable: boolean;
+  /** Current file content */
+  content: string;
+  /** Original content at load time (for dirty-check) */
+  oldContent: string;
+  /** Whether a save operation is in progress */
+  saveActive: boolean;
+  /** Whether the file was already loaded (re-opened) */
+  alreadyLoaded: boolean;
+  /** Ace editor mode identifier */
+  editorMode: FileEditorMode;
+  /** ID of the window displaying this file */
+  windowId?: string;
+}
+
+/**
+ * Payload received from the MUD for the GMCP `Files.URL` message.
+ */
+export interface FilesUrlPayload {
+  url: string;
+  file: string;
+  path: string;
+  filename: string;
+  filetype: string;
+  title: string;
+  newfile: boolean;
+  writeacl: boolean;
+  temporary: boolean;
+  saveactive: boolean;
+  filesize: number;
+  closable: boolean;
+}
+
+/**
+ * Payload received from the MUD for the GMCP `Files.DirectoryList` message.
+ */
+export interface FilesDirectoryListPayload {
+  path: string;
+  entries: FileEntry[];
+}
+
+/**
+ * Determines the Ace editor mode from a file extension.
+ */
+export function editorModeFromExtension(ext: string): FileEditorMode {
+  switch (ext) {
+    case '.c':
+    case '.h':
+    case '.inc':
+      return 'c_cpp';
+    default:
+      return 'text';
+  }
+}
diff --git a/frontend/src/app/features/gmcp-files/files-gmcp-handler.ts b/frontend/src/app/features/gmcp-files/files-gmcp-handler.ts
new file mode 100644
index 0000000..7a5dd90
--- /dev/null
+++ b/frontend/src/app/features/gmcp-files/files-gmcp-handler.ts
@@ -0,0 +1,293 @@
+import { inject, Injectable } from '@angular/core';
+
+import { GmcpService } from '../gmcp/gmcp.service';
+import type { GmcpModuleHandler } from '../gmcp/gmcp-module-handler';
+import { WindowAction, WindowService } from '../windows';
+
+import {
+  FileEntry,
+  FilesDirectoryListPayload,
+  FilesUrlPayload,
+} from './file-types';
+import { FilesService } from './files.service';
+
+/** Component type keys used with the WindowService */
+const COMPONENT_DIR_LIST = 'DirlistComponent';
+const COMPONENT_EDITOR = 'EditorComponent';
+
+/**
+ * GMCP handler for the `Files` module.
+ *
+ * Handles:
+ * - `Files.URL` (u1: `files.url`)  → Open/re-open editor window
+ * - `Files.DirectoryList` (u1: `files.directorylist`) → Open/update directory window
+ * - `Files.ChDir` → Change directory request (sent from DirList)
+ *
+ * Integrates with:
+ * - FilesService  (HTTP load/save, file registry)
+ * - WindowService (open/close editor & directory windows)
+ * - GmcpService   (sending outgoing GMCP messages)
+ */
+@Injectable({ providedIn: 'root' })
+export class FilesGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Files';
+  readonly version = '1';
+
+  private readonly filesService = inject(FilesService);
+  private readonly windowService = inject(WindowService);
+  private readonly gmcpService = inject(GmcpService);
+
+  /** ID of the current DirList window (only one at a time) */
+  private dirListWindowId: string | undefined;
+
+  /**
+   * Routes incoming GMCP `Files.*` messages to the appropriate handler.
+   */
+  handleMessage(message: string, data: unknown): void {
+    const msgLower = message.toLowerCase().trim();
+
+    switch (msgLower) {
+      case 'url':
+        this.handleFilesUrl(data as FilesUrlPayload);
+        break;
+
+      case 'directorylist':
+        this.handleDirectoryList(data as FilesDirectoryListPayload);
+        break;
+
+      default:
+        console.debug(`[FilesGmcpHandler] Unknown message: Files.${message}`, data);
+    }
+  }
+
+  /**
+   * Handles `Files.URL`: MUD wants to open a file for editing.
+   *
+   * Workflow:
+   * 1. Register file in FilesService
+   * 2. If already loaded (re-save), skip window creation
+   * 3. Load content via HTTP GET
+   * 4. Open editor window
+   */
+  private async handleFilesUrl(payload: FilesUrlPayload): Promise<void> {
+    const fileInfo = this.filesService.processFileUrl(payload);
+
+    if (fileInfo.alreadyLoaded) {
+      // File is being re-opened for save — just trigger save URL update
+      console.info('[FilesGmcpHandler] File re-opened for save:', payload.file);
+
+      // Run the save with the new URL
+      await this.saveFile(fileInfo.file);
+
+      return;
+    }
+
+    // Load content from MUD HTTP endpoint
+    try {
+      await this.filesService.loadFileContent(fileInfo);
+    } catch {
+      console.error('[FilesGmcpHandler] Failed to load file, opening empty editor:', payload.file);
+      fileInfo.content = '';
+      fileInfo.oldContent = '';
+    }
+
+    // Open editor window
+    const windowId = this.windowService.open({
+      title: fileInfo.title || fileInfo.filename,
+      componentType: COMPONENT_EDITOR,
+      allowSave: fileInfo.writeacl,
+      showCancel: true,
+      parentWindowId: this.dirListWindowId,
+      size: { width: 700, height: 500 },
+      data: fileInfo,
+    });
+
+    this.filesService.setWindowId(fileInfo.file, windowId);
+
+    // Subscribe to window events for this editor
+    this.subscribeToEditorEvents(windowId, fileInfo.file);
+
+    console.info('[FilesGmcpHandler] Opened editor for:', fileInfo.file);
+  }
+
+  /**
+   * Handles `Files.DirectoryList`: MUD sends directory contents.
+   *
+   * Opens a new DirList window or updates the existing one.
+   */
+  private handleDirectoryList(payload: FilesDirectoryListPayload): void {
+    const existingConfig = this.dirListWindowId !== undefined
+      ? this.windowService.getConfig(this.dirListWindowId)
+      : undefined;
+
+    if (existingConfig !== undefined) {
+      // Update existing DirList window
+      this.windowService.updateData(this.dirListWindowId!, {
+        path: payload.path,
+        entries: payload.entries,
+      });
+
+      console.debug('[FilesGmcpHandler] Updated DirList:', payload.path);
+    } else {
+      // Open new DirList window
+      this.dirListWindowId = this.windowService.open({
+        title: 'Verzeichnisanzeige',
+        componentType: COMPONENT_DIR_LIST,
+        allowSave: false,
+        showCancel: true,
+        size: { width: 500, height: 400 },
+        data: {
+          path: payload.path,
+          entries: payload.entries,
+        },
+      });
+
+      // Subscribe to DirList events (file open, dir change)
+      this.subscribeToDirListEvents(this.dirListWindowId);
+
+      console.info('[FilesGmcpHandler] Opened DirList for:', payload.path);
+    }
+  }
+
+  /**
+   * Initiates a file save operation.
+   *
+   * Flow: Editor → saveFile() → HTTP PUT → GMCP Files.fileSaved
+   */
+  public async saveFile(filepath: string, closable = false): Promise<void> {
+    const fileInfo = this.filesService.getFileInfo(filepath);
+
+    if (fileInfo === undefined) {
+      console.error('[FilesGmcpHandler] Cannot save unknown file:', filepath);
+      return;
+    }
+
+    // Request save URL from MUD (sends GMCP Files.OpenFile with flag=1)
+    this.gmcpService.sendOutgoing('Files', 'OpenFile', {
+      file: filepath,
+      title: fileInfo.title,
+      flag: 1, // save flag
+    });
+
+    fileInfo.closable = closable;
+    fileInfo.saveActive = true;
+  }
+
+  /**
+   * Completes a save after receiving the new URL (in handleFilesUrl with alreadyLoaded).
+   */
+  private async completeSave(filepath: string): Promise<void> {
+    const fileInfo = this.filesService.getFileInfo(filepath);
+
+    if (fileInfo === undefined) {
+      return;
+    }
+
+    try {
+      await this.filesService.saveFileContent(fileInfo);
+
+      // Notify MUD that save completed
+      this.gmcpService.sendOutgoing('Files', 'fileSaved', {
+        file: filepath,
+        title: fileInfo.title,
+        flag: 1,
+      });
+
+      if (fileInfo.temporary || fileInfo.closable) {
+        // Close editor window
+        if (fileInfo.windowId !== undefined) {
+          this.windowService.close(fileInfo.windowId);
+        }
+
+        this.filesService.removeFile(filepath);
+      }
+
+      console.info('[FilesGmcpHandler] Save complete:', filepath);
+    } catch (error) {
+      console.error('[FilesGmcpHandler] Save failed:', filepath, error);
+
+      if (fileInfo.windowId !== undefined) {
+        // Notify editor of error
+        this.windowService.outgoingEvents$.next({
+          action: WindowAction.WinError,
+          windowId: fileInfo.windowId,
+          data: error,
+        });
+      }
+    }
+  }
+
+  /**
+   * Sends a GMCP Files.OpenFile request to open a file from DirList.
+   */
+  public openFile(dirPath: string, filename: string): void {
+    this.gmcpService.sendOutgoing('Files', 'OpenFile', {
+      file: dirPath + filename,
+    });
+
+    console.debug('[FilesGmcpHandler] Requested file open:', dirPath + filename);
+  }
+
+  /**
+   * Sends a GMCP Files.ChDir request to change directory.
+   */
+  public changeDirectory(currentPath: string, dirName: string): void {
+    const targetDir = dirName === '../' ? dirName : currentPath + dirName;
+
+    this.gmcpService.sendOutgoing('Files', 'ChDir', {
+      dir: targetDir,
+    });
+
+    console.debug('[FilesGmcpHandler] Requested chdir:', targetDir);
+  }
+
+  /**
+   * Subscribes to window events from the editor window to handle
+   * save, cancel, and close actions.
+   */
+  private subscribeToEditorEvents(windowId: string, filepath: string): void {
+    const sub = this.windowService.outgoingEvents$.subscribe((event) => {
+      if (event.windowId !== windowId) {
+        return;
+      }
+
+      switch (event.action) {
+        case WindowAction.CloseParent:
+          this.filesService.removeFile(filepath);
+          sub.unsubscribe();
+          break;
+      }
+    });
+  }
+
+  /**
+   * Subscribes to DirList window events for file navigation.
+   */
+  private subscribeToDirListEvents(windowId: string): void {
+    const sub = this.windowService.outgoingEvents$.subscribe((event) => {
+      if (event.windowId !== windowId) {
+        return;
+      }
+
+      if (event.action === WindowAction.CloseParent) {
+        this.dirListWindowId = undefined;
+        sub.unsubscribe();
+      }
+    });
+  }
+
+  /**
+   * Cleanup when the Files GMCP module is unregistered.
+   */
+  dispose(): void {
+    // Close all editor/dirlist windows
+    if (this.dirListWindowId !== undefined) {
+      this.windowService.close(this.dirListWindowId);
+      this.dirListWindowId = undefined;
+    }
+
+    this.filesService.reset();
+
+    console.info('[FilesGmcpHandler] Disposed.');
+  }
+}
diff --git a/frontend/src/app/features/gmcp-files/files.service.spec.ts b/frontend/src/app/features/gmcp-files/files.service.spec.ts
new file mode 100644
index 0000000..e7ef40c
--- /dev/null
+++ b/frontend/src/app/features/gmcp-files/files.service.spec.ts
@@ -0,0 +1,158 @@
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+
+import { FilesService } from './files.service';
+import { FilesUrlPayload } from './file-types';
+
+/**
+ * Tests FilesService pure logic:
+ * processFileUrl, getFileInfo, removeFile, isDirty, reset.
+ * HttpClient is provided but not exercised (HTTP tests would need HttpTestingController).
+ */
+describe('FilesService', () => {
+  let service: FilesService;
+
+  const mockPayload: FilesUrlPayload = {
+    url: 'http://mud.example.com/files/test.c',
+    file: '/w/myonara/test.c',
+    path: '/w/myonara/',
+    filename: 'test.c',
+    filetype: '.c',
+    title: 'test.c',
+    newfile: false,
+    writeacl: true,
+    temporary: false,
+    saveactive: false,
+    filesize: 1234,
+    closable: false,
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), FilesService],
+    });
+    service = TestBed.inject(FilesService);
+  });
+
+  describe('processFileUrl()', () => {
+    it('should create a new FileInfo from payload', () => {
+      const fileInfo = service.processFileUrl(mockPayload);
+
+      expect(fileInfo.file).toBe('/w/myonara/test.c');
+      expect(fileInfo.filename).toBe('test.c');
+      expect(fileInfo.editorMode).toBe('c_cpp');
+      expect(fileInfo.writeacl).toBe(true);
+      expect(fileInfo.alreadyLoaded).toBe(false);
+      expect(fileInfo.content).toBe('');
+      expect(fileInfo.oldContent).toBe('');
+    });
+
+    it('should return existing FileInfo if save is active', () => {
+      const first = service.processFileUrl(mockPayload);
+      first.saveActive = true;
+
+      const second = service.processFileUrl({
+        ...mockPayload,
+        url: 'http://mud.example.com/files/test.c?v2',
+      });
+
+      expect(second).toBe(first); // Same reference
+      expect(second.alreadyLoaded).toBe(true);
+      expect(second.lasturl).toBe('http://mud.example.com/files/test.c?v2');
+    });
+
+    it('should create a new FileInfo if file not previously tracked', () => {
+      const first = service.processFileUrl(mockPayload);
+      first.saveActive = false; // Not saving
+
+      const second = service.processFileUrl({
+        ...mockPayload,
+        url: 'http://mud.example.com/files/test.c?v3',
+      });
+
+      // Should create new (replaces old since saveActive was false)
+      expect(second.lasturl).toBe('http://mud.example.com/files/test.c?v3');
+      expect(second.alreadyLoaded).toBe(false);
+    });
+
+    it('should determine text mode for .txt files', () => {
+      const fileInfo = service.processFileUrl({
+        ...mockPayload,
+        filetype: '.txt',
+      });
+
+      expect(fileInfo.editorMode).toBe('text');
+    });
+  });
+
+  describe('getFileInfo()', () => {
+    it('should return the FileInfo for a tracked file', () => {
+      service.processFileUrl(mockPayload);
+
+      const fileInfo = service.getFileInfo('/w/myonara/test.c');
+      expect(fileInfo).toBeDefined();
+      expect(fileInfo?.filename).toBe('test.c');
+    });
+
+    it('should return undefined for untracked files', () => {
+      expect(service.getFileInfo('/nonexistent')).toBeUndefined();
+    });
+  });
+
+  describe('setWindowId()', () => {
+    it('should associate a window ID with a file', () => {
+      service.processFileUrl(mockPayload);
+      service.setWindowId('/w/myonara/test.c', 'win-123');
+
+      const fileInfo = service.getFileInfo('/w/myonara/test.c');
+      expect(fileInfo?.windowId).toBe('win-123');
+    });
+
+    it('should do nothing for untracked files', () => {
+      // Should not throw
+      service.setWindowId('/nonexistent', 'win-456');
+    });
+  });
+
+  describe('removeFile()', () => {
+    it('should remove the file from the registry', () => {
+      service.processFileUrl(mockPayload);
+      service.removeFile('/w/myonara/test.c');
+
+      expect(service.getFileInfo('/w/myonara/test.c')).toBeUndefined();
+    });
+  });
+
+  describe('isDirty()', () => {
+    it('should return false when content matches oldContent', () => {
+      const fileInfo = service.processFileUrl(mockPayload);
+      fileInfo.content = 'hello';
+      fileInfo.oldContent = 'hello';
+
+      expect(service.isDirty(fileInfo)).toBe(false);
+    });
+
+    it('should return true when content differs from oldContent', () => {
+      const fileInfo = service.processFileUrl(mockPayload);
+      fileInfo.content = 'modified';
+      fileInfo.oldContent = 'original';
+
+      expect(service.isDirty(fileInfo)).toBe(true);
+    });
+  });
+
+  describe('reset()', () => {
+    it('should clear all tracked files', () => {
+      service.processFileUrl(mockPayload);
+      service.processFileUrl({
+        ...mockPayload,
+        file: '/w/myonara/other.c',
+      });
+
+      service.reset();
+
+      expect(service.getFileInfo('/w/myonara/test.c')).toBeUndefined();
+      expect(service.getFileInfo('/w/myonara/other.c')).toBeUndefined();
+    });
+  });
+});
diff --git a/frontend/src/app/features/gmcp-files/files.service.ts b/frontend/src/app/features/gmcp-files/files.service.ts
new file mode 100644
index 0000000..32f01a1
--- /dev/null
+++ b/frontend/src/app/features/gmcp-files/files.service.ts
@@ -0,0 +1,181 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+
+import { WindowService } from '../windows/window.service';
+import {
+  editorModeFromExtension,
+  FileInfo,
+  FilesUrlPayload,
+} from './file-types';
+
+/**
+ * Service for managing MUD file operations (load, save, track state).
+ *
+ * Responsibilities:
+ * - Maintains a registry of open files by their file path
+ * - Loads file content via HTTP GET from the MUD-provided URL
+ * - Saves file content via HTTP PUT to the MUD-provided URL
+ * - Tracks dirty/save state per file
+ *
+ * Architecture:
+ * ```
+ * GMCP Files.URL → FilesGmcpHandler → FilesService.processFileUrl()
+ *                                        ├─ HTTP GET → load content
+ *                                        └─ Opens editor window via WindowService
+ * Editor → FilesService.saveFile()
+ *            └─ HTTP PUT → save content
+ *            └─ GMCP Files.OpenFile (flag=1) → Files.fileSaved
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class FilesService {
+  private readonly http = inject(HttpClient);
+  private readonly windowService = inject(WindowService);
+
+  /** Registry of open files, keyed by full file path */
+  private readonly fileRegistry = new Map<string, FileInfo>();
+
+  /**
+   * Processes a GMCP Files.URL message.
+   *
+   * - If the file is already open and a save is active, updates the URL
+   *   for the ongoing save operation.
+   * - Otherwise, creates a new FileInfo and loads the content.
+   *
+   * @returns The FileInfo (existing or new)
+   */
+  public processFileUrl(payload: FilesUrlPayload): FileInfo {
+    const existingFile = this.fileRegistry.get(payload.file);
+
+    if (existingFile !== undefined && existingFile.saveActive) {
+      // File already open with an active save — update URL for PUT
+      existingFile.lasturl = payload.url;
+      existingFile.alreadyLoaded = true;
+
+      console.debug('[FilesService] File already loaded (save active):', payload.file);
+
+      return existingFile;
+    }
+
+    // Create a new FileInfo
+    const fileInfo: FileInfo = {
+      file: payload.file,
+      path: payload.path,
+      filename: payload.filename,
+      filetype: payload.filetype,
+      title: payload.title,
+      lasturl: payload.url,
+      newfile: payload.newfile,
+      writeacl: payload.writeacl,
+      temporary: payload.temporary,
+      filesize: payload.filesize,
+      closable: payload.closable,
+      content: '',
+      oldContent: '',
+      saveActive: payload.saveactive,
+      alreadyLoaded: false,
+      editorMode: editorModeFromExtension(payload.filetype),
+    };
+
+    this.fileRegistry.set(payload.file, fileInfo);
+
+    console.info('[FilesService] Registered file:', payload.file);
+
+    return fileInfo;
+  }
+
+  /**
+   * Loads file content from the MUD's HTTP endpoint.
+   *
+   * @returns The loaded content string
+   */
+  public async loadFileContent(fileInfo: FileInfo): Promise<string> {
+    try {
+      const content = await firstValueFrom(
+        this.http.get(fileInfo.lasturl, { responseType: 'text' }),
+      );
+
+      fileInfo.content = content;
+      fileInfo.oldContent = content;
+
+      console.info('[FilesService] Loaded file:', fileInfo.file, `(${content.length} chars)`);
+
+      return content;
+    } catch (error) {
+      console.error('[FilesService] Failed to load file:', fileInfo.file, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Saves file content to the MUD's HTTP endpoint.
+   *
+   * @returns The response text from the server
+   */
+  public async saveFileContent(fileInfo: FileInfo): Promise<string> {
+    fileInfo.saveActive = true;
+
+    try {
+      const response = await firstValueFrom(
+        this.http.put(fileInfo.lasturl, fileInfo.content, {
+          responseType: 'text',
+        }),
+      );
+
+      fileInfo.oldContent = fileInfo.content;
+      fileInfo.saveActive = false;
+
+      console.info('[FilesService] Saved file:', fileInfo.file);
+
+      return response;
+    } catch (error) {
+      fileInfo.saveActive = false;
+      console.error('[FilesService] Failed to save file:', fileInfo.file, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Returns the FileInfo for a given file path, or undefined if not open.
+   */
+  public getFileInfo(filepath: string): FileInfo | undefined {
+    return this.fileRegistry.get(filepath);
+  }
+
+  /**
+   * Associates a window ID with a file (after editor window is created).
+   */
+  public setWindowId(filepath: string, windowId: string): void {
+    const fileInfo = this.fileRegistry.get(filepath);
+
+    if (fileInfo !== undefined) {
+      fileInfo.windowId = windowId;
+    }
+  }
+
+  /**
+   * Removes a file from the registry (e.g. when editor window is closed).
+   */
+  public removeFile(filepath: string): void {
+    this.fileRegistry.delete(filepath);
+
+    console.debug('[FilesService] Removed file from registry:', filepath);
+  }
+
+  /**
+   * Checks whether a file has unsaved changes.
+   */
+  public isDirty(fileInfo: FileInfo): boolean {
+    return fileInfo.content !== fileInfo.oldContent;
+  }
+
+  /**
+   * Clears all tracked files (e.g. on disconnect).
+   */
+  public reset(): void {
+    this.fileRegistry.clear();
+
+    console.info('[FilesService] File registry cleared.');
+  }
+}
diff --git a/frontend/src/app/features/gmcp-files/index.ts b/frontend/src/app/features/gmcp-files/index.ts
new file mode 100644
index 0000000..11a9b37
--- /dev/null
+++ b/frontend/src/app/features/gmcp-files/index.ts
@@ -0,0 +1,12 @@
+export { DirListComponent } from './dirlist.component';
+export { EditorComponent } from './editor.component';
+export { FilesGmcpHandler } from './files-gmcp-handler';
+export { FilesService } from './files.service';
+export {
+  editorModeFromExtension,
+  FileEditorMode,
+  FileEntry,
+  FileInfo,
+  FilesDirectoryListPayload,
+  FilesUrlPayload,
+} from './file-types';
diff --git a/frontend/src/app/features/windows/window-container.component.ts b/frontend/src/app/features/windows/window-container.component.ts
index 3cd56d0..7188880 100644
--- a/frontend/src/app/features/windows/window-container.component.ts
+++ b/frontend/src/app/features/windows/window-container.component.ts
@@ -1,6 +1,9 @@
 import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 
+import { DirListComponent } from '../gmcp-files/dirlist.component';
+import { EditorComponent } from '../gmcp-files/editor.component';
+
 import { WindowAction, WindowConfig, WindowEvent } from './window-config';
 import { WindowComponent } from './window.component';
 import { WindowService } from './window.service';
@@ -14,18 +17,34 @@ import { WindowService } from './window.service';
  *
  * The container itself uses `pointer-events: none` so clicks pass through
  * to the terminal below. Each individual window has `pointer-events: auto`.
+ *
+ * Content components are resolved via `@switch` on `config.componentType`.
+ * New component types can be added by importing the component and adding
+ * a `@case` branch.
  */
 @Component({
   selector: 'app-window-container',
   standalone: true,
-  imports: [AsyncPipe, WindowComponent],
+  imports: [AsyncPipe, WindowComponent, DirListComponent, EditorComponent],
   template: `
     <div class="wm-container">
       @for (config of windowService.windows$ | async; track config.windowId) {
         <app-window
           [config]="config"
           (windowEvent)="onWindowEvent($event)"
-        ></app-window>
+        >
+          @switch (config.componentType) {
+            @case ('DirlistComponent') {
+              <app-dirlist [config]="config"></app-dirlist>
+            }
+            @case ('EditorComponent') {
+              <app-editor [config]="config"></app-editor>
+            }
+            @default {
+              <p>Unbekannter Fenstertyp: {{ config.componentType }}</p>
+            }
+          }
+        </app-window>
       }
     </div>
   `,
diff --git a/package-lock.json b/package-lock.json
index 6558ff0..8696860 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -107,6 +107,7 @@
         "@xterm/addon-clipboard": "~0.2.0",
         "@xterm/addon-fit": "~0.10.0",
         "@xterm/xterm": "~5.5.0",
+        "ace-builds": "^1.43.6",
         "normalize.css": "~8.0.1",
         "rxjs": "~7.8.2",
         "socket.io-client": "~4.8.1",
@@ -8932,6 +8933,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ace-builds": {
+      "version": "1.43.6",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.43.6.tgz",
+      "integrity": "sha512-L1ddibQ7F3vyXR2k2fg+I8TQTPWVA6CKeDQr/h2+8CeyTp3W6EQL8xNFZRTztuP8xNOAqL3IYPqdzs31GCjDvg==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",

From cefdb33b77b4c34001d22d6bba8b14b521084222 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 05:23:28 +0100
Subject: [PATCH 08/30] gmcp sound

---
 .cursor/rules/frontend.mdc                    |   9 +
 frontend/src/app/features/gmcp-sound/index.ts |   1 +
 .../gmcp-sound/sound-gmcp-handler.spec.ts     | 168 ++++++++++++++++++
 .../features/gmcp-sound/sound-gmcp-handler.ts | 151 ++++++++++++++++
 4 files changed, 329 insertions(+)
 create mode 100644 frontend/src/app/features/gmcp-sound/index.ts
 create mode 100644 frontend/src/app/features/gmcp-sound/sound-gmcp-handler.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-sound/sound-gmcp-handler.ts

diff --git a/.cursor/rules/frontend.mdc b/.cursor/rules/frontend.mdc
index 021c8ac..e3f483f 100644
--- a/.cursor/rules/frontend.mdc
+++ b/.cursor/rules/frontend.mdc
@@ -91,6 +91,15 @@ globs: frontend/**/*.ts,frontend/**/*.html,frontend/**/*.scss
 - **FileInfo** / **FileEntry** (`features/gmcp-files/file-types.ts`): Typen für Dateisystem-Daten
 - Parent-Child: DirList-Fenster ist Parent aller geöffneten Editor-Fenster
 
+## GMCP Sound-Modul
+- **SoundGmcpHandler** (`features/gmcp-sound/sound-gmcp-handler.ts`): GmcpModuleHandler für `Sound`
+  - `Sound.Url` → speichert Base-URL für Sound-Dateien
+  - `Sound.Event` → spielt Sound via `new Audio(baseUrl + "/" + file)`
+  - HTML5 Audio API (fire-and-forget, autoplay-Policy behandelt)
+  - Toggle: `Core.Supports.Add ["Sound 1"]` / `Core.Supports.Remove ["Sound 1"]`
+  - `getMenuItems()` liefert "Vertonung" Toggle-Eintrag für das Menü
+  - Backend: GMCP Sound-Messages werden transparent durchgereicht (kein Backend-Code nötig)
+
 ## Styling
 - SCSS als Preprocessor
 - Komponenten-spezifische Styles in `.component.scss`
diff --git a/frontend/src/app/features/gmcp-sound/index.ts b/frontend/src/app/features/gmcp-sound/index.ts
new file mode 100644
index 0000000..b94424e
--- /dev/null
+++ b/frontend/src/app/features/gmcp-sound/index.ts
@@ -0,0 +1 @@
+export { SoundGmcpHandler } from './sound-gmcp-handler';
diff --git a/frontend/src/app/features/gmcp-sound/sound-gmcp-handler.spec.ts b/frontend/src/app/features/gmcp-sound/sound-gmcp-handler.spec.ts
new file mode 100644
index 0000000..87d0119
--- /dev/null
+++ b/frontend/src/app/features/gmcp-sound/sound-gmcp-handler.spec.ts
@@ -0,0 +1,168 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GmcpService } from '../gmcp/gmcp.service';
+
+import { SoundGmcpHandler } from './sound-gmcp-handler';
+
+/**
+ * Tests for SoundGmcpHandler.
+ *
+ * Uses TestBed to properly resolve Angular `inject()` calls.
+ * Audio playback is tested via a mock of the global Audio constructor.
+ */
+describe('SoundGmcpHandler', () => {
+  let handler: SoundGmcpHandler;
+  let gmcpService: GmcpService;
+  let sendSpy: jest.SpyInstance;
+  let mockAudioPlay: jest.Mock;
+  let mockAudioLoad: jest.Mock;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SoundGmcpHandler, GmcpService],
+    });
+
+    handler = TestBed.inject(SoundGmcpHandler);
+    gmcpService = TestBed.inject(GmcpService);
+
+    // Spy on sendOutgoing (it won't actually send without a send function)
+    sendSpy = jest.spyOn(gmcpService, 'sendOutgoing').mockImplementation();
+
+    // Mock global Audio constructor
+    mockAudioPlay = jest.fn().mockResolvedValue(undefined);
+    mockAudioLoad = jest.fn();
+
+    (global as any).Audio = jest.fn().mockImplementation(() => ({
+      load: mockAudioLoad,
+      play: mockAudioPlay,
+      src: '',
+    }));
+  });
+
+  afterEach(() => {
+    delete (global as any).Audio;
+  });
+
+  describe('moduleName and version', () => {
+    it('should have module name "Sound"', () => {
+      expect(handler.moduleName).toBe('Sound');
+    });
+
+    it('should have version "1"', () => {
+      expect(handler.version).toBe('1');
+    });
+  });
+
+  describe('handleMessage() — Sound.Url', () => {
+    it('should store the base URL', () => {
+      handler.handleMessage('Url', { url: 'https://mud.example.com/sounds' });
+
+      expect(handler.soundBaseUrl).toBe('https://mud.example.com/sounds');
+    });
+
+    it('should handle case-insensitive message name', () => {
+      handler.handleMessage('url', { url: 'https://example.com/audio' });
+
+      expect(handler.soundBaseUrl).toBe('https://example.com/audio');
+    });
+  });
+
+  describe('handleMessage() — Sound.Event', () => {
+    beforeEach(() => {
+      handler.handleMessage('Url', { url: 'https://mud.example.com/sounds' });
+    });
+
+    it('should play audio with the correct URL', () => {
+      handler.handleMessage('Event', { file: 'door_open.mp3' });
+
+      expect(global.Audio).toHaveBeenCalledWith(
+        'https://mud.example.com/sounds/door_open.mp3',
+      );
+      expect(mockAudioLoad).toHaveBeenCalled();
+      expect(mockAudioPlay).toHaveBeenCalled();
+    });
+
+    it('should not play when sound is disabled', () => {
+      handler.toggle(); // disable
+      expect(handler.isEnabled).toBe(false);
+
+      handler.handleMessage('Event', { file: 'beep.mp3' });
+
+      expect(global.Audio).not.toHaveBeenCalled();
+    });
+
+    it('should not play when no base URL is set', () => {
+      // Create a fresh handler from TestBed (new instance via override)
+      const freshHandler = TestBed.inject(SoundGmcpHandler);
+      // Reset its base URL
+      freshHandler.dispose();
+
+      freshHandler.handleMessage('Event', { file: 'beep.mp3' });
+
+      expect(global.Audio).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('toggle()', () => {
+    it('should disable sound and send Core.Supports.Remove', () => {
+      expect(handler.isEnabled).toBe(true);
+
+      handler.toggle();
+
+      expect(handler.isEnabled).toBe(false);
+      expect(sendSpy).toHaveBeenCalledWith(
+        'Core',
+        'Supports.Remove',
+        ['Sound 1'],
+      );
+    });
+
+    it('should re-enable sound and send Core.Supports.Add', () => {
+      handler.toggle(); // disable
+      handler.toggle(); // re-enable
+
+      expect(handler.isEnabled).toBe(true);
+      expect(sendSpy).toHaveBeenCalledWith(
+        'Core',
+        'Supports.Add',
+        ['Sound 1'],
+      );
+    });
+  });
+
+  describe('getMenuItems()', () => {
+    it('should return a single menu item for "Vertonung"', () => {
+      const items = handler.getMenuItems();
+
+      expect(items).toHaveLength(1);
+      expect(items[0].label).toBe('Vertonung');
+      expect(items[0].checked).toBe(true);
+    });
+
+    it('should reflect disabled state', () => {
+      handler.toggle(); // disable
+
+      const items = handler.getMenuItems();
+      expect(items[0].checked).toBe(false);
+    });
+
+    it('should have a callable action that toggles', () => {
+      const items = handler.getMenuItems();
+      items[0].action();
+
+      expect(handler.isEnabled).toBe(false);
+    });
+  });
+
+  describe('dispose()', () => {
+    it('should reset base URL and enabled state', () => {
+      handler.handleMessage('Url', { url: 'https://example.com' });
+      handler.toggle(); // disable
+
+      handler.dispose();
+
+      expect(handler.soundBaseUrl).toBe('');
+      expect(handler.isEnabled).toBe(true);
+    });
+  });
+});
diff --git a/frontend/src/app/features/gmcp-sound/sound-gmcp-handler.ts b/frontend/src/app/features/gmcp-sound/sound-gmcp-handler.ts
new file mode 100644
index 0000000..2d7364f
--- /dev/null
+++ b/frontend/src/app/features/gmcp-sound/sound-gmcp-handler.ts
@@ -0,0 +1,151 @@
+import { inject, Injectable } from '@angular/core';
+
+import { GmcpService } from '../gmcp/gmcp.service';
+import type { GmcpMenuItem, GmcpModuleHandler } from '../gmcp/gmcp-module-handler';
+
+/**
+ * GMCP handler for the `Sound` module.
+ *
+ * Handles:
+ * - `Sound.Url`   → Stores the base URL for sound files
+ * - `Sound.Event` → Plays a sound file via HTML5 Audio API
+ *
+ * Toggle:
+ * - When enabled:  sends `Core.Supports.Add ["Sound 1"]`
+ * - When disabled: sends `Core.Supports.Remove ["Sound 1"]`
+ *
+ * The MUD sends `Sound.Url` once after GMCP start, providing the base URL
+ * (e.g. `https://unitopia.de/mudlet/sounds`). Then `Sound.Event` messages
+ * contain just the filename (e.g. `{ file: "door_open.mp3" }`), and we
+ * concatenate: `baseUrl + "/" + file`.
+ *
+ * No backend changes needed — GMCP sound messages are transparently forwarded.
+ */
+@Injectable({ providedIn: 'root' })
+export class SoundGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Sound';
+  readonly version = '1';
+
+  private readonly gmcpService = inject(GmcpService);
+
+  /** Base URL for sound files, set by `Sound.Url` */
+  private baseUrl = '';
+
+  /** Whether sound is currently enabled */
+  private enabled = true;
+
+  /**
+   * Routes incoming GMCP `Sound.*` messages.
+   */
+  handleMessage(message: string, data: unknown): void {
+    const msgLower = message.toLowerCase().trim();
+
+    switch (msgLower) {
+      case 'url':
+        this.handleSoundUrl(data as { url: string });
+        break;
+
+      case 'event':
+        this.handleSoundEvent(data as { file: string });
+        break;
+
+      default:
+        console.debug(`[SoundGmcpHandler] Unknown message: Sound.${message}`, data);
+    }
+  }
+
+  /**
+   * Returns a menu item for toggling sound on/off.
+   */
+  getMenuItems(): GmcpMenuItem[] {
+    return [
+      {
+        label: 'Vertonung',
+        tooltip: this.enabled ? 'Sound ausschalten' : 'Sound einschalten',
+        checked: this.enabled,
+        action: () => this.toggle(),
+      },
+    ];
+  }
+
+  /**
+   * Toggles sound on or off.
+   *
+   * When enabling:  sends `Core.Supports.Add ["Sound 1"]`
+   * When disabling: sends `Core.Supports.Remove ["Sound 1"]`
+   */
+  public toggle(): void {
+    this.enabled = !this.enabled;
+
+    if (this.enabled) {
+      this.gmcpService.sendOutgoing('Core', 'Supports.Add', ['Sound 1']);
+      console.info('[SoundGmcpHandler] Sound enabled.');
+    } else {
+      this.gmcpService.sendOutgoing('Core', 'Supports.Remove', ['Sound 1']);
+      console.info('[SoundGmcpHandler] Sound disabled.');
+    }
+  }
+
+  /** Whether sound is currently enabled */
+  public get isEnabled(): boolean {
+    return this.enabled;
+  }
+
+  /** The current base URL for sound files */
+  public get soundBaseUrl(): string {
+    return this.baseUrl;
+  }
+
+  /**
+   * Cleanup when module is unregistered.
+   */
+  dispose(): void {
+    this.baseUrl = '';
+    this.enabled = true;
+
+    console.info('[SoundGmcpHandler] Disposed.');
+  }
+
+  /**
+   * Handles `Sound.Url`: stores the base URL for sound files.
+   */
+  private handleSoundUrl(data: { url: string }): void {
+    this.baseUrl = data.url ?? '';
+
+    console.info('[SoundGmcpHandler] Sound base URL set:', this.baseUrl);
+  }
+
+  /**
+   * Handles `Sound.Event`: plays a sound file.
+   *
+   * Uses HTML5 Audio API — simple, no Web Audio API needed.
+   * Playback is fire-and-forget; errors are logged but not thrown.
+   */
+  private handleSoundEvent(data: { file: string }): void {
+    if (!this.enabled) {
+      console.debug('[SoundGmcpHandler] Sound disabled, skipping:', data.file);
+      return;
+    }
+
+    if (this.baseUrl === '') {
+      console.warn('[SoundGmcpHandler] No base URL set, cannot play:', data.file);
+      return;
+    }
+
+    const soundUrl = `${this.baseUrl}/${data.file}`;
+
+    try {
+      const audio = new Audio(soundUrl);
+      audio.load();
+
+      audio.play().catch((err) => {
+        // Browser may block autoplay — log but don't crash
+        console.warn('[SoundGmcpHandler] Playback failed (autoplay policy?):', soundUrl, err);
+      });
+
+      console.debug('[SoundGmcpHandler] Playing:', soundUrl);
+    } catch (err) {
+      console.error('[SoundGmcpHandler] Failed to create audio:', soundUrl, err);
+    }
+  }
+}

From bd42f5993561821bd4a773c1dfbd9e0162f479cd Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 05:35:28 +0100
Subject: [PATCH 09/30] gmcp browserinfo(real-ip)

---
 .cursor/rules/backend.mdc                     |  3 +
 .../src/core/sockets/extract-real-ip.spec.ts  | 82 +++++++++++++++++++
 backend/src/core/sockets/socket-manager.ts    | 54 +++++++++++-
 3 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 backend/src/core/sockets/extract-real-ip.spec.ts

diff --git a/.cursor/rules/backend.mdc b/.cursor/rules/backend.mdc
index a70708d..d5dd2be 100644
--- a/.cursor/rules/backend.mdc
+++ b/.cursor/rules/backend.mdc
@@ -35,6 +35,9 @@ globs: backend/**/*.ts
 - Handler im `SocketManager.handleClientConnection()` registrieren
 - GMCP-Events: `mudGmcpIncoming`/`mudGmcpStart` (Server→Client), `mudGmcpOutgoing` (Client→Server)
 - GMCP-Weiterleitung: TelnetClient Events ↔ Socket.IO Events im SocketManager
+- **Core.BrowserInfo Enrichment**: Bei `mudGmcpOutgoing` mit `Core.BrowserInfo` wird serverseitig `real_ip` injiziert
+  - `SocketManager.extractRealIp()` → `x-forwarded-for` (erster Eintrag) oder `socket.handshake.address`
+  - Auch `client` (clientName) wird hinzugefügt — Frontend-Daten werden gemergt
 
 ## TypeScript
 - `strict: true`
diff --git a/backend/src/core/sockets/extract-real-ip.spec.ts b/backend/src/core/sockets/extract-real-ip.spec.ts
new file mode 100644
index 0000000..7a8a267
--- /dev/null
+++ b/backend/src/core/sockets/extract-real-ip.spec.ts
@@ -0,0 +1,82 @@
+import { SocketManager } from './socket-manager.js';
+
+/**
+ * Tests for SocketManager.extractRealIp().
+ *
+ * We create minimal mock socket objects — only the handshake fields
+ * that extractRealIp actually reads are needed.
+ */
+describe('SocketManager.extractRealIp', () => {
+  function mockSocket(
+    address: string,
+    xForwardedFor?: string,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ): any {
+    return {
+      handshake: {
+        address,
+        headers: {
+          ...(xForwardedFor !== undefined
+            ? { 'x-forwarded-for': xForwardedFor }
+            : {}),
+        },
+      },
+    };
+  }
+
+  it('should return x-forwarded-for when present (single IP)', () => {
+    const socket = mockSocket('127.0.0.1', '203.0.113.50');
+
+    expect(SocketManager.extractRealIp(socket)).toBe('203.0.113.50');
+  });
+
+  it('should return first IP from x-forwarded-for with multiple entries', () => {
+    const socket = mockSocket(
+      '127.0.0.1',
+      '203.0.113.50, 70.41.3.18, 150.172.238.178',
+    );
+
+    expect(SocketManager.extractRealIp(socket)).toBe('203.0.113.50');
+  });
+
+  it('should trim whitespace from x-forwarded-for', () => {
+    const socket = mockSocket('127.0.0.1', '  203.0.113.50  ');
+
+    expect(SocketManager.extractRealIp(socket)).toBe('203.0.113.50');
+  });
+
+  it('should fall back to handshake.address when x-forwarded-for is missing', () => {
+    const socket = mockSocket('192.168.1.100');
+
+    expect(SocketManager.extractRealIp(socket)).toBe('192.168.1.100');
+  });
+
+  it('should fall back to handshake.address when x-forwarded-for is empty', () => {
+    const socket = mockSocket('10.0.0.1', '');
+
+    expect(SocketManager.extractRealIp(socket)).toBe('10.0.0.1');
+  });
+
+  it('should handle IPv6 addresses', () => {
+    const socket = mockSocket(
+      '::1',
+      '2003:c6:b707:9b00:a924:3e18:56b4:867',
+    );
+
+    expect(SocketManager.extractRealIp(socket)).toBe(
+      '2003:c6:b707:9b00:a924:3e18:56b4:867',
+    );
+  });
+
+  it('should handle IPv6 in x-forwarded-for with multiple entries', () => {
+    const socket = mockSocket(
+      '::1',
+      '2003:c6:b707:9b00::1, 10.0.0.1',
+    );
+
+    // Note: comma-based split works for IPv6 since IPv6 doesn't use commas
+    expect(SocketManager.extractRealIp(socket)).toBe(
+      '2003:c6:b707:9b00::1',
+    );
+  });
+});
diff --git a/backend/src/core/sockets/socket-manager.ts b/backend/src/core/sockets/socket-manager.ts
index e00ee30..7c54b2e 100644
--- a/backend/src/core/sockets/socket-manager.ts
+++ b/backend/src/core/sockets/socket-manager.ts
@@ -504,11 +504,31 @@ export class SocketManager extends Server<
           return;
         }
 
+        // Enrich Core.BrowserInfo with server-side real_ip and client metadata
+        let enrichedData = data;
+
+        if (
+          module === 'Core' &&
+          message.toLowerCase() === 'browserinfo'
+        ) {
+          const realIp = SocketManager.extractRealIp(socket);
+
+          enrichedData = {
+            ...(typeof data === 'object' && data !== null ? data : {}),
+            real_ip: realIp,
+            client: this.managerOptions.clientName,
+          };
+
+          logger.info(
+            `[${socket.id}] [Socket-Manager] Enriched Core.BrowserInfo with real_ip: ${realIp}`,
+          );
+        }
+
         logger.verbose(
           `[${socket.id}] [Socket-Manager] Forwarding GMCP outgoing: ${module}.${message}`,
         );
 
-        telnetClient.sendGmcp(module, message, data);
+        telnetClient.sendGmcp(module, message, enrichedData);
       },
     );
 
@@ -605,6 +625,38 @@ export class SocketManager extends Server<
     return undefined;
   }
 
+  /**
+   * Extracts the real client IP address from the socket handshake.
+   *
+   * Priority:
+   * 1. `x-forwarded-for` header (first entry, for reverse proxy setups)
+   * 2. `socket.handshake.address` (direct connection)
+   *
+   * This is injected into `Core.BrowserInfo` GMCP messages so the MUD
+   * receives the actual client IP instead of the backend server's IP.
+   */
+  public static extractRealIp(
+    socket: Socket<ClientToServerEvents, ServerToClientEvents>,
+  ): string {
+    const forwarded = socket.handshake.headers['x-forwarded-for'];
+    let realIp: string;
+
+    if (typeof forwarded === 'string' && forwarded.length > 0) {
+      // x-forwarded-for can contain multiple IPs: "client, proxy1, proxy2"
+      // The first entry is the original client IP
+      const commaIndex = forwarded.indexOf(',');
+
+      realIp =
+        commaIndex > -1
+          ? forwarded.slice(0, commaIndex).trim()
+          : forwarded.trim();
+    } else {
+      realIp = socket.handshake.address;
+    }
+
+    return realIp;
+  }
+
   /**
    * Resolves the telnet connection parameters for a given MUD ID.
    *

From 4aa393b033af020220aa15ffa9df9a8a928f4626 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 05:52:12 +0100
Subject: [PATCH 10/30] char stats as status bar(deviation from migplan)

---
 .cursor/rules/frontend.mdc                    |  30 +++
 frontend/src/app/app.component.html           |   1 +
 frontend/src/app/app.component.ts             |   3 +-
 .../gmcp-char/char-gmcp-handler.spec.ts       | 235 +++++++++++++++++
 .../features/gmcp-char/char-gmcp-handler.ts   | 237 ++++++++++++++++++
 .../gmcp-char/char-statusbar.component.ts     | 161 ++++++++++++
 .../features/gmcp-char/character-data.spec.ts | 150 +++++++++++
 .../app/features/gmcp-char/character-data.ts  | 196 +++++++++++++++
 frontend/src/app/features/gmcp-char/index.ts  |  11 +
 .../features/gmcp/gmcp-bootstrap.service.ts   |  44 ++++
 frontend/src/main.ts                          |   6 +
 11 files changed, 1073 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/features/gmcp-char/char-gmcp-handler.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-char/char-gmcp-handler.ts
 create mode 100644 frontend/src/app/features/gmcp-char/char-statusbar.component.ts
 create mode 100644 frontend/src/app/features/gmcp-char/character-data.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-char/character-data.ts
 create mode 100644 frontend/src/app/features/gmcp-char/index.ts
 create mode 100644 frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts

diff --git a/.cursor/rules/frontend.mdc b/.cursor/rules/frontend.mdc
index e3f483f..34c0ffa 100644
--- a/.cursor/rules/frontend.mdc
+++ b/.cursor/rules/frontend.mdc
@@ -100,6 +100,36 @@ globs: frontend/**/*.ts,frontend/**/*.html,frontend/**/*.scss
   - `getMenuItems()` liefert "Vertonung" Toggle-Eintrag für das Menü
   - Backend: GMCP Sound-Messages werden transparent durchgereicht (kein Backend-Code nötig)
 
+## GMCP Char-Modul (Statusleiste)
+- **CharacterData** (`features/gmcp-char/character-data.ts`): Typen + Parsing
+  - `CharacterData` Interface: Name, Fullname, Gender, Wizard-Flag, Vitals, Stats, Status
+  - `CharacterVitals`: HP/SP + MaxHP/MaxSP
+  - `CharacterStat`: key/label/value für STR/INT/CON/DEX
+  - `parseVitals("hp=100|sp=80|maxhp=120|maxsp=100")` → strukturierte Vitals
+  - `parseStats("con=34,2|dex=59,7|int=130|str=59,8")` → sortiertes Stats-Array
+  - `formatStatusSummary()` → kompakte Status-Anzeige
+- **CharGmcpHandler** (`features/gmcp-char/char-gmcp-handler.ts`): GmcpModuleHandler für `Char`
+  - `Char.Name` → Charakter-Init, Browser-Titel setzen, Wizard-Module aktivieren
+  - `Char.StatusVars` → Status-Variablen-Definitionen speichern
+  - `Char.Status` → Aktuelle Statuswerte (Gilde, Rasse, Rang)
+  - `Char.Vitals` → HP/SP Werte (string + object Format)
+  - `Char.Stats` → STR/INT/CON/DEX Attribute
+  - `characterData$` BehaviorSubject (null = nicht eingeloggt)
+  - Wizard-Erkennung: bei `wizard > 0` werden Files/Input/Numpad GMCP-Module aktiviert
+- **CharStatusBarComponent** (`features/gmcp-char/char-statusbar.component.ts`): Kompakte Statusleiste
+  - Standalone, direkt in `app.component.html` zwischen Terminal und Window-Container
+  - Nur sichtbar nach `Char.Name` Empfang (characterData$ nicht null + name gesetzt)
+  - Layout: `[Name] HP: x/y | SP: x/y | STR: x INT: y CON: z DEX: w | Status`
+  - Catppuccin Mocha Farben, monospace, responsive (Stats auf schmalen Viewports ausgeblendet)
+  - ARIA: `role="status"`, `aria-live="polite"`
+  - `flex: 0 0 auto` — verdrängt Terminal von unten, überlappt nicht
+
+## GMCP Handler-Registrierung
+- **GmcpBootstrapService** (`features/gmcp/gmcp-bootstrap.service.ts`): Zentrale Registrierung
+  - Registriert alle GMCP-Handler (Char, Sound, Files) beim GmcpService
+  - Wird als `provideAppInitializer()` in `main.ts` aufgerufen
+  - Idempotent (mehrfacher Aufruf sicher)
+
 ## Styling
 - SCSS als Preprocessor
 - Komponenten-spezifische Styles in `.component.scss`
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 4edbae7..3d10c52 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,2 +1,3 @@
 <app-mud-client></app-mud-client>
+<app-char-statusbar></app-char-statusbar>
 <app-window-container></app-window-container>
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index b3b91a1..885433c 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
 import { MudClientComponent } from '@webmud3/frontend/core/mud/components/mud-client/mud-client.component';
+import { CharStatusBarComponent } from '@webmud3/frontend/features/gmcp-char';
 import { WindowContainerComponent } from '@webmud3/frontend/features/windows';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  imports: [MudClientComponent, WindowContainerComponent],
+  imports: [MudClientComponent, CharStatusBarComponent, WindowContainerComponent],
   standalone: true,
 })
 export class AppComponent {}
diff --git a/frontend/src/app/features/gmcp-char/char-gmcp-handler.spec.ts b/frontend/src/app/features/gmcp-char/char-gmcp-handler.spec.ts
new file mode 100644
index 0000000..31dcbaf
--- /dev/null
+++ b/frontend/src/app/features/gmcp-char/char-gmcp-handler.spec.ts
@@ -0,0 +1,235 @@
+import { TestBed } from '@angular/core/testing';
+import { Title } from '@angular/platform-browser';
+
+import { GmcpService } from '../gmcp/gmcp.service';
+
+import { CharGmcpHandler } from './char-gmcp-handler';
+
+describe('CharGmcpHandler', () => {
+  let handler: CharGmcpHandler;
+  let gmcpService: GmcpService;
+  let titleService: Title;
+  let sendSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CharGmcpHandler, GmcpService, Title],
+    });
+
+    handler = TestBed.inject(CharGmcpHandler);
+    gmcpService = TestBed.inject(GmcpService);
+    titleService = TestBed.inject(Title);
+
+    sendSpy = jest.spyOn(gmcpService, 'sendOutgoing').mockImplementation();
+  });
+
+  describe('module identity', () => {
+    it('should have moduleName "Char"', () => {
+      expect(handler.moduleName).toBe('Char');
+    });
+
+    it('should have version "1"', () => {
+      expect(handler.version).toBe('1');
+    });
+  });
+
+  describe('characterData$', () => {
+    it('should start as null', () => {
+      expect(handler.characterData$.value).toBeNull();
+    });
+  });
+
+  describe('Char.Name', () => {
+    it('should initialize character data', () => {
+      handler.handleMessage('Name', {
+        name: 'Myonara',
+        fullname: 'Myonara der Erzmagier',
+        gender: 'male',
+        wizard: 0,
+      });
+
+      const data = handler.characterData$.value;
+      expect(data).not.toBeNull();
+      expect(data!.name).toBe('Myonara');
+      expect(data!.fullname).toBe('Myonara der Erzmagier');
+      expect(data!.gender).toBe('male');
+      expect(data!.wizard).toBe(0);
+      expect(data!.isWizard).toBe(false);
+    });
+
+    it('should detect wizard status', () => {
+      handler.handleMessage('Name', {
+        name: 'Wizzy',
+        wizard: 5,
+      });
+
+      const data = handler.characterData$.value;
+      expect(data!.isWizard).toBe(true);
+      expect(data!.wizard).toBe(5);
+    });
+
+    it('should enable Files/Input/Numpad for wizards', () => {
+      handler.handleMessage('Name', {
+        name: 'Wizzy',
+        wizard: 1,
+      });
+
+      expect(sendSpy).toHaveBeenCalledWith('Core', 'Supports.Add', [
+        'Files 1',
+      ]);
+      expect(sendSpy).toHaveBeenCalledWith('Core', 'Supports.Add', [
+        'Input 1',
+      ]);
+      expect(sendSpy).toHaveBeenCalledWith('Core', 'Supports.Add', [
+        'Numpad 1',
+      ]);
+    });
+
+    it('should NOT enable wizard modules for players', () => {
+      handler.handleMessage('Name', {
+        name: 'Player',
+        wizard: 0,
+      });
+
+      expect(sendSpy).not.toHaveBeenCalled();
+    });
+
+    it('should update browser title with fullname', () => {
+      const titleSpy = jest.spyOn(titleService, 'setTitle');
+
+      handler.handleMessage('Name', {
+        name: 'Myonara',
+        fullname: 'Myonara der Erzmagier',
+      });
+
+      expect(titleSpy).toHaveBeenCalledWith('Myonara der Erzmagier');
+    });
+
+    it('should use name as title fallback when fullname is missing', () => {
+      const titleSpy = jest.spyOn(titleService, 'setTitle');
+
+      handler.handleMessage('Name', { name: 'Myonara' });
+
+      expect(titleSpy).toHaveBeenCalledWith('Myonara');
+    });
+
+    it('should handle case-insensitive message name', () => {
+      handler.handleMessage('name', { name: 'Test' });
+
+      expect(handler.characterData$.value?.name).toBe('Test');
+    });
+  });
+
+  describe('Char.StatusVars', () => {
+    it('should store status variable definitions', () => {
+      handler.handleMessage('StatusVars', {
+        guild: 'Gilde',
+        race: 'Rasse',
+        rank: 'Rang',
+      });
+
+      const data = handler.characterData$.value;
+      expect(data).not.toBeNull();
+      expect(data!.statusVars).toEqual({
+        guild: 'Gilde',
+        race: 'Rasse',
+        rank: 'Rang',
+      });
+    });
+  });
+
+  describe('Char.Status', () => {
+    it('should update status values', () => {
+      handler.handleMessage('Status', {
+        guild: 'Zauberer',
+        race: 'Mensch',
+      });
+
+      const data = handler.characterData$.value;
+      expect(data!.status).toEqual({
+        guild: 'Zauberer',
+        race: 'Mensch',
+      });
+    });
+
+    it('should merge with existing status', () => {
+      handler.handleMessage('Status', { guild: 'Zauberer' });
+      handler.handleMessage('Status', { race: 'Elf' });
+
+      const data = handler.characterData$.value;
+      expect(data!.status).toEqual({
+        guild: 'Zauberer',
+        race: 'Elf',
+      });
+    });
+  });
+
+  describe('Char.Vitals', () => {
+    it('should parse string-format vitals', () => {
+      handler.handleMessage('Vitals', 'hp=100|sp=80|maxhp=120|maxsp=100');
+
+      const data = handler.characterData$.value;
+      expect(data!.vitals.hp).toBe(100);
+      expect(data!.vitals.sp).toBe(80);
+      expect(data!.vitals.maxHp).toBe(120);
+      expect(data!.vitals.maxSp).toBe(100);
+    });
+
+    it('should parse object-format vitals', () => {
+      handler.handleMessage('Vitals', {
+        hp: 90,
+        sp: 75,
+        maxhp: 120,
+        maxsp: 100,
+      });
+
+      const data = handler.characterData$.value;
+      expect(data!.vitals.hp).toBe(90);
+      expect(data!.vitals.sp).toBe(75);
+      expect(data!.vitals.maxHp).toBe(120);
+      expect(data!.vitals.maxSp).toBe(100);
+    });
+
+    it('should merge vitals updates', () => {
+      handler.handleMessage('Vitals', 'hp=100|maxhp=120');
+      handler.handleMessage('Vitals', 'sp=80|maxsp=100');
+
+      const data = handler.characterData$.value;
+      expect(data!.vitals.hp).toBe(100);
+      expect(data!.vitals.maxHp).toBe(120);
+      expect(data!.vitals.sp).toBe(80);
+      expect(data!.vitals.maxSp).toBe(100);
+    });
+  });
+
+  describe('Char.Stats', () => {
+    it('should parse string-format stats', () => {
+      handler.handleMessage(
+        'Stats',
+        'con=34,2|dex=59,7|int=130|str=59,8',
+      );
+
+      const data = handler.characterData$.value;
+      expect(data!.stats).toHaveLength(4);
+      expect(data!.stats[0].key).toBe('str');
+      expect(data!.stats[0].value).toBe('59,8');
+    });
+
+    it('should parse object-format stats', () => {
+      handler.handleMessage('Stats', { str: 50, int: 100 });
+
+      const data = handler.characterData$.value;
+      expect(data!.stats.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('dispose()', () => {
+    it('should reset characterData$ to null', () => {
+      handler.handleMessage('Name', { name: 'Test' });
+      expect(handler.characterData$.value).not.toBeNull();
+
+      handler.dispose();
+      expect(handler.characterData$.value).toBeNull();
+    });
+  });
+});
diff --git a/frontend/src/app/features/gmcp-char/char-gmcp-handler.ts b/frontend/src/app/features/gmcp-char/char-gmcp-handler.ts
new file mode 100644
index 0000000..cb16b7a
--- /dev/null
+++ b/frontend/src/app/features/gmcp-char/char-gmcp-handler.ts
@@ -0,0 +1,237 @@
+import { inject, Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { BehaviorSubject } from 'rxjs';
+
+import { GmcpService } from '../gmcp/gmcp.service';
+import type { GmcpModuleHandler } from '../gmcp/gmcp-module-handler';
+
+import {
+  CharacterData,
+  createCharacterData,
+  parseStats,
+  parseVitals,
+} from './character-data';
+
+/**
+ * Payload shape for GMCP `Char.Name`.
+ */
+interface CharNamePayload {
+  name: string;
+  fullname?: string;
+  gender?: string;
+  wizard?: number;
+}
+
+/**
+ * GMCP handler for the `Char` module.
+ *
+ * Handles:
+ * - `Char.Name`       → Character name, title, wizard flag
+ * - `Char.StatusVars`  → Available status variable definitions
+ * - `Char.Status`      → Current status values (guild, race, rank)
+ * - `Char.Vitals`      → HP/SP values (changes frequently)
+ * - `Char.Stats`       → STR/INT/CON/DEX attributes
+ *
+ * State is exposed as a `BehaviorSubject<CharacterData | null>`.
+ * The statusbar component subscribes to this for reactive rendering.
+ *
+ * When `Char.Name` is received with `wizard > 0`, wizard-only GMCP
+ * modules (Files, Input, Numpad) are automatically enabled.
+ */
+@Injectable({ providedIn: 'root' })
+export class CharGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Char';
+  readonly version = '1';
+
+  private readonly gmcpService = inject(GmcpService);
+  private readonly titleService = inject(Title);
+
+  /**
+   * Reactive stream of character data.
+   * `null` means no character is logged in (statusbar hidden).
+   */
+  public readonly characterData$ = new BehaviorSubject<CharacterData | null>(null);
+
+  /**
+   * Routes incoming GMCP `Char.*` messages.
+   */
+  handleMessage(message: string, data: unknown): void {
+    const msgLower = message.toLowerCase().trim();
+
+    switch (msgLower) {
+      case 'name':
+        this.handleCharName(data as CharNamePayload);
+        break;
+
+      case 'statusvars':
+        this.handleStatusVars(data as Record<string, string>);
+        break;
+
+      case 'status':
+        this.handleStatus(data as Record<string, string | number>);
+        break;
+
+      case 'vitals':
+        this.handleVitals(data as string | Record<string, unknown>);
+        break;
+
+      case 'stats':
+        this.handleStats(data as string | Record<string, unknown>);
+        break;
+
+      default:
+        console.debug(`[CharGmcpHandler] Unknown message: Char.${message}`, data);
+    }
+  }
+
+  /**
+   * Cleanup: reset character data to null.
+   */
+  dispose(): void {
+    this.characterData$.next(null);
+    console.info('[CharGmcpHandler] Disposed.');
+  }
+
+  /**
+   * Returns the current character data snapshot (for synchronous access).
+   */
+  public get currentData(): CharacterData | null {
+    return this.characterData$.value;
+  }
+
+  /**
+   * Handles `Char.Name`: initializes character data, sets browser title,
+   * and enables wizard-only modules if applicable.
+   */
+  private handleCharName(payload: CharNamePayload): void {
+    let charData = this.characterData$.value;
+
+    if (charData === null) {
+      charData = createCharacterData(payload.name);
+    }
+
+    charData = {
+      ...charData,
+      name: payload.name,
+      fullname: payload.fullname,
+      gender: payload.gender,
+      wizard: payload.wizard ?? 0,
+      isWizard: (payload.wizard ?? 0) > 0,
+    };
+
+    this.characterData$.next(charData);
+
+    // Update browser tab title
+    const titlePart = payload.fullname ?? payload.name;
+    this.titleService.setTitle(titlePart);
+
+    console.info(
+      `[CharGmcpHandler] Char.Name: ${payload.name} (wizard: ${charData.wizard})`,
+    );
+
+    // Enable wizard-only modules
+    if (charData.isWizard) {
+      this.gmcpService.sendOutgoing('Core', 'Supports.Add', ['Files 1']);
+      this.gmcpService.sendOutgoing('Core', 'Supports.Add', ['Input 1']);
+      this.gmcpService.sendOutgoing('Core', 'Supports.Add', ['Numpad 1']);
+
+      console.info('[CharGmcpHandler] Wizard detected — enabled Files, Input, Numpad modules.');
+    }
+  }
+
+  /**
+   * Handles `Char.StatusVars`: stores the available status variable definitions.
+   */
+  private handleStatusVars(vars: Record<string, string>): void {
+    const charData = this.ensureCharData();
+
+    this.characterData$.next({
+      ...charData,
+      statusVars: { ...vars },
+    });
+
+    console.debug('[CharGmcpHandler] StatusVars updated:', Object.keys(vars).length, 'vars');
+  }
+
+  /**
+   * Handles `Char.Status`: updates current status values (guild, race, rank).
+   */
+  private handleStatus(status: Record<string, string | number>): void {
+    const charData = this.ensureCharData();
+
+    this.characterData$.next({
+      ...charData,
+      status: { ...charData.status, ...status },
+    });
+
+    console.debug('[CharGmcpHandler] Status updated:', status);
+  }
+
+  /**
+   * Handles `Char.Vitals`: parses HP/SP values.
+   *
+   * Accepts both string format ("hp=100|sp=80") and object format ({ hp: 100, sp: 80 }).
+   */
+  private handleVitals(data: string | Record<string, unknown>): void {
+    const charData = this.ensureCharData();
+    let vitals;
+
+    if (typeof data === 'string') {
+      vitals = parseVitals(data);
+    } else {
+      // Object format — extract numeric values
+      vitals = {
+        hp: typeof data['hp'] === 'number' ? data['hp'] : charData.vitals.hp,
+        sp: typeof data['sp'] === 'number' ? data['sp'] : charData.vitals.sp,
+        maxHp: typeof data['maxhp'] === 'number' ? data['maxhp'] : charData.vitals.maxHp,
+        maxSp: typeof data['maxsp'] === 'number' ? data['maxsp'] : charData.vitals.maxSp,
+      };
+    }
+
+    this.characterData$.next({
+      ...charData,
+      vitals: { ...charData.vitals, ...vitals },
+    });
+  }
+
+  /**
+   * Handles `Char.Stats`: parses attribute values (STR, INT, CON, DEX).
+   *
+   * Accepts both string format ("str=59,8|int=130|con=34,2|dex=59,7")
+   * and object format.
+   */
+  private handleStats(data: string | Record<string, unknown>): void {
+    const charData = this.ensureCharData();
+    let stats;
+
+    if (typeof data === 'string') {
+      stats = parseStats(data);
+    } else {
+      // Object format — convert to string and parse
+      const parts = Object.entries(data)
+        .map(([key, value]) => `${key}=${value}`)
+        .join('|');
+
+      stats = parseStats(parts);
+    }
+
+    this.characterData$.next({
+      ...charData,
+      stats,
+    });
+  }
+
+  /**
+   * Ensures charData exists (creates a placeholder if Char.Name hasn't been received yet).
+   */
+  private ensureCharData(): CharacterData {
+    let charData = this.characterData$.value;
+
+    if (charData === null) {
+      charData = createCharacterData('');
+      // Note: we don't emit here — the individual handler will emit after updating
+    }
+
+    return charData;
+  }
+}
diff --git a/frontend/src/app/features/gmcp-char/char-statusbar.component.ts b/frontend/src/app/features/gmcp-char/char-statusbar.component.ts
new file mode 100644
index 0000000..de70f0b
--- /dev/null
+++ b/frontend/src/app/features/gmcp-char/char-statusbar.component.ts
@@ -0,0 +1,161 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+
+import { CharacterData, formatStatusSummary } from './character-data';
+import { CharGmcpHandler } from './char-gmcp-handler';
+
+/**
+ * Compact status bar displayed at the bottom of the screen.
+ *
+ * Shows character vitals (HP/SP), stats (STR/INT/CON/DEX),
+ * and status info (guild, race, rank) in a single horizontal line.
+ *
+ * Only visible after GMCP `Char.Name` is received (character logged in).
+ *
+ * Layout:
+ * ```
+ * [Myonara] HP: 100/120 | SP: 80/100 | STR: 59.8 INT: 130 CON: 34.2 DEX: 59.7 | Zauberer, Mensch
+ * ```
+ */
+@Component({
+  selector: 'app-char-statusbar',
+  standalone: true,
+  imports: [AsyncPipe],
+  template: `
+    @if (charHandler.characterData$ | async; as data) {
+      @if (data.name) {
+        <div class="statusbar" role="status" aria-live="polite" aria-label="Charakter-Status">
+          <span class="statusbar-name" [title]="data.fullname ?? data.name">
+            {{ data.name }}
+          </span>
+
+          @if (hasVitals(data)) {
+            <span class="statusbar-sep">|</span>
+            <span class="statusbar-vitals">
+              @if (data.vitals.hp !== undefined) {
+                <span class="statusbar-hp">
+                  HP: {{ data.vitals.hp }}@if (data.vitals.maxHp !== undefined) {/{{ data.vitals.maxHp }}}
+                </span>
+              }
+              @if (data.vitals.sp !== undefined) {
+                <span class="statusbar-sp">
+                  SP: {{ data.vitals.sp }}@if (data.vitals.maxSp !== undefined) {/{{ data.vitals.maxSp }}}
+                </span>
+              }
+            </span>
+          }
+
+          @if (data.stats.length > 0) {
+            <span class="statusbar-sep statusbar-stats-sep">|</span>
+            <span class="statusbar-stats">
+              @for (stat of data.stats; track stat.key) {
+                <span class="statusbar-stat" [title]="stat.label">
+                  {{ stat.key.toUpperCase() }}: {{ stat.value }}
+                </span>
+              }
+            </span>
+          }
+
+          @if (getStatusSummary(data); as summary) {
+            <span class="statusbar-sep statusbar-status-sep">|</span>
+            <span class="statusbar-status">{{ summary }}</span>
+          }
+        </div>
+      }
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        flex: 0 0 auto;
+      }
+
+      .statusbar {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 2px 8px;
+        background: #181825;
+        border-top: 1px solid #313244;
+        color: #cdd6f4;
+        font-family: monospace;
+        font-size: 12px;
+        line-height: 20px;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .statusbar-name {
+        color: #89b4fa;
+        font-weight: 600;
+        flex-shrink: 0;
+      }
+
+      .statusbar-sep {
+        color: #45475a;
+        flex-shrink: 0;
+      }
+
+      .statusbar-vitals {
+        display: flex;
+        gap: 8px;
+        flex-shrink: 0;
+      }
+
+      .statusbar-hp {
+        color: #a6e3a1;
+      }
+
+      .statusbar-sp {
+        color: #89dceb;
+      }
+
+      .statusbar-stats {
+        display: flex;
+        gap: 8px;
+        flex-shrink: 1;
+        overflow: hidden;
+      }
+
+      .statusbar-stat {
+        color: #cba6f7;
+      }
+
+      .statusbar-status {
+        color: #f9e2af;
+        flex-shrink: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* Hide stats and status sections on narrow viewports */
+      @media (max-width: 600px) {
+        .statusbar-stats-sep,
+        .statusbar-stats,
+        .statusbar-status-sep,
+        .statusbar-status {
+          display: none;
+        }
+      }
+
+      @media (max-width: 400px) {
+        .statusbar-sep,
+        .statusbar-vitals {
+          display: none;
+        }
+      }
+    `,
+  ],
+})
+export class CharStatusBarComponent {
+  protected readonly charHandler = inject(CharGmcpHandler);
+
+  hasVitals(data: CharacterData): boolean {
+    return data.vitals.hp !== undefined || data.vitals.sp !== undefined;
+  }
+
+  getStatusSummary(data: CharacterData): string {
+    return formatStatusSummary(data.status, data.statusVars);
+  }
+}
diff --git a/frontend/src/app/features/gmcp-char/character-data.spec.ts b/frontend/src/app/features/gmcp-char/character-data.spec.ts
new file mode 100644
index 0000000..458f4af
--- /dev/null
+++ b/frontend/src/app/features/gmcp-char/character-data.spec.ts
@@ -0,0 +1,150 @@
+import {
+  createCharacterData,
+  formatStatusSummary,
+  parseStats,
+  parseVitals,
+} from './character-data';
+
+describe('character-data', () => {
+  describe('createCharacterData()', () => {
+    it('should create default character data with given name', () => {
+      const data = createCharacterData('Myonara');
+
+      expect(data.name).toBe('Myonara');
+      expect(data.wizard).toBe(0);
+      expect(data.isWizard).toBe(false);
+      expect(data.statusVars).toEqual({});
+      expect(data.status).toEqual({});
+      expect(data.vitals).toEqual({});
+      expect(data.stats).toEqual([]);
+    });
+  });
+
+  describe('parseVitals()', () => {
+    it('should parse a full vitals string', () => {
+      const vitals = parseVitals('hp=100|sp=80|maxhp=120|maxsp=100');
+
+      expect(vitals.hp).toBe(100);
+      expect(vitals.sp).toBe(80);
+      expect(vitals.maxHp).toBe(120);
+      expect(vitals.maxSp).toBe(100);
+    });
+
+    it('should parse partial vitals (hp/sp only)', () => {
+      const vitals = parseVitals('hp=50|sp=30');
+
+      expect(vitals.hp).toBe(50);
+      expect(vitals.sp).toBe(30);
+      expect(vitals.maxHp).toBeUndefined();
+      expect(vitals.maxSp).toBeUndefined();
+    });
+
+    it('should handle comma as decimal separator', () => {
+      const vitals = parseVitals('hp=99,5|sp=45,2');
+
+      expect(vitals.hp).toBe(99.5);
+      expect(vitals.sp).toBe(45.2);
+    });
+
+    it('should be case-insensitive', () => {
+      const vitals = parseVitals('HP=100|SP=80|MAXHP=120|MAXSP=100');
+
+      expect(vitals.hp).toBe(100);
+      expect(vitals.sp).toBe(80);
+      expect(vitals.maxHp).toBe(120);
+      expect(vitals.maxSp).toBe(100);
+    });
+
+    it('should return empty object for empty string', () => {
+      expect(parseVitals('')).toEqual({});
+    });
+
+    it('should skip invalid entries', () => {
+      const vitals = parseVitals('hp=100|invalid|sp=abc|maxhp=50');
+
+      expect(vitals.hp).toBe(100);
+      expect(vitals.sp).toBeUndefined();
+      expect(vitals.maxHp).toBe(50);
+    });
+  });
+
+  describe('parseStats()', () => {
+    it('should parse stats in canonical order', () => {
+      const stats = parseStats('con=34,2|dex=59,7|int=130|str=59,8');
+
+      expect(stats).toHaveLength(4);
+      expect(stats[0].key).toBe('str');
+      expect(stats[0].value).toBe('59,8');
+      expect(stats[0].label).toBe('Stärke');
+      expect(stats[1].key).toBe('int');
+      expect(stats[1].value).toBe('130');
+      expect(stats[2].key).toBe('con');
+      expect(stats[2].value).toBe('34,2');
+      expect(stats[3].key).toBe('dex');
+      expect(stats[3].value).toBe('59,7');
+    });
+
+    it('should handle subset of stats', () => {
+      const stats = parseStats('str=50|dex=60');
+
+      expect(stats).toHaveLength(2);
+      expect(stats[0].key).toBe('str');
+      expect(stats[1].key).toBe('dex');
+    });
+
+    it('should use uppercase key as label for unknown stats', () => {
+      const stats = parseStats('wis=42');
+
+      expect(stats).toHaveLength(1);
+      expect(stats[0].key).toBe('wis');
+      expect(stats[0].label).toBe('WIS');
+      expect(stats[0].value).toBe('42');
+    });
+
+    it('should return empty array for empty string', () => {
+      expect(parseStats('')).toEqual([]);
+    });
+
+    it('should assign German labels', () => {
+      const stats = parseStats('str=1|int=2|con=3|dex=4');
+
+      expect(stats[0].label).toBe('Stärke');
+      expect(stats[1].label).toBe('Intelligenz');
+      expect(stats[2].label).toBe('Ausdauer');
+      expect(stats[3].label).toBe('Geschicklichkeit');
+    });
+  });
+
+  describe('formatStatusSummary()', () => {
+    it('should join non-empty status values with commas', () => {
+      const result = formatStatusSummary(
+        { guild: 'Zauberer', race: 'Mensch', rank: 'Erzmagier' },
+        {},
+      );
+
+      expect(result).toBe('Zauberer, Mensch, Erzmagier');
+    });
+
+    it('should skip empty values', () => {
+      const result = formatStatusSummary(
+        { guild: 'Krieger', race: '', rank: 'Novize' },
+        {},
+      );
+
+      expect(result).toBe('Krieger, Novize');
+    });
+
+    it('should skip zero values', () => {
+      const result = formatStatusSummary(
+        { guild: 'Heiler', level: 0, rank: 'Anfänger' },
+        {},
+      );
+
+      expect(result).toBe('Heiler, Anfänger');
+    });
+
+    it('should return empty string for empty status', () => {
+      expect(formatStatusSummary({}, {})).toBe('');
+    });
+  });
+});
diff --git a/frontend/src/app/features/gmcp-char/character-data.ts b/frontend/src/app/features/gmcp-char/character-data.ts
new file mode 100644
index 0000000..817f760
--- /dev/null
+++ b/frontend/src/app/features/gmcp-char/character-data.ts
@@ -0,0 +1,196 @@
+/**
+ * A single character attribute (STR, INT, CON, DEX).
+ */
+export interface CharacterStat {
+  /** Short key (e.g. "str", "int", "con", "dex") */
+  key: string;
+  /** Human-readable label (e.g. "Stärke", "Intelligenz") */
+  label: string;
+  /** Current value as string (may contain decimals like "59,8") */
+  value: string;
+}
+
+/**
+ * Vital statistics (health/spell points).
+ */
+export interface CharacterVitals {
+  hp?: number;
+  sp?: number;
+  maxHp?: number;
+  maxSp?: number;
+}
+
+/**
+ * Full character data as received from multiple GMCP Char.* messages.
+ */
+export interface CharacterData {
+  /** Character name */
+  name: string;
+  /** Full name including title */
+  fullname?: string;
+  /** Gender identifier */
+  gender?: string;
+  /** Wizard level (0 = player, >0 = wizard) */
+  wizard: number;
+  /** Whether the character is a wizard */
+  isWizard: boolean;
+  /** Name at MUD (e.g. "Myonara@UNItopia") */
+  nameAtMud?: string;
+  /** Available status variable definitions (from Char.StatusVars) */
+  statusVars: Record<string, string>;
+  /** Current status values (from Char.Status, e.g. guild, race, rank) */
+  status: Record<string, string | number>;
+  /** Health and spell points */
+  vitals: CharacterVitals;
+  /** Character attributes */
+  stats: CharacterStat[];
+}
+
+/**
+ * Creates a fresh CharacterData with default values.
+ */
+export function createCharacterData(name: string): CharacterData {
+  return {
+    name,
+    wizard: 0,
+    isWizard: false,
+    statusVars: {},
+    status: {},
+    vitals: {},
+    stats: [],
+  };
+}
+
+/** Map of stat keys to German labels */
+const STAT_LABELS: Record<string, string> = {
+  str: 'Stärke',
+  int: 'Intelligenz',
+  con: 'Ausdauer',
+  dex: 'Geschicklichkeit',
+};
+
+/** Canonical order for displaying stats */
+const STAT_ORDER = ['str', 'int', 'con', 'dex'];
+
+/**
+ * Parses a pipe-delimited vitals string into structured data.
+ *
+ * Input format from MUD: `"hp=100|sp=80|maxhp=120|maxsp=100"`
+ * Also handles plain number format: `"100|80"` (hp|sp only)
+ *
+ * @param input - The raw vitals string from GMCP Char.Vitals
+ * @returns Parsed vitals object
+ */
+export function parseVitals(input: string): CharacterVitals {
+  const vitals: CharacterVitals = {};
+
+  if (input.length === 0) {
+    return vitals;
+  }
+
+  const parts = input.split('|');
+
+  for (const part of parts) {
+    const eqIndex = part.indexOf('=');
+
+    if (eqIndex > 0) {
+      const key = part.substring(0, eqIndex).toLowerCase().trim();
+      const value = parseFloat(part.substring(eqIndex + 1).trim().replace(',', '.'));
+
+      if (isNaN(value)) {
+        continue;
+      }
+
+      switch (key) {
+        case 'hp':
+          vitals.hp = value;
+          break;
+        case 'sp':
+          vitals.sp = value;
+          break;
+        case 'maxhp':
+          vitals.maxHp = value;
+          break;
+        case 'maxsp':
+          vitals.maxSp = value;
+          break;
+      }
+    }
+  }
+
+  return vitals;
+}
+
+/**
+ * Parses a pipe-delimited stats string into an ordered array.
+ *
+ * Input format from MUD: `"con=34,2|dex=59,7|int=130|str=59,8"`
+ *
+ * @param input - The raw stats string from GMCP Char.Stats
+ * @returns Ordered array of CharacterStat objects
+ */
+export function parseStats(input: string): CharacterStat[] {
+  if (input.length === 0) {
+    return [];
+  }
+
+  const parts = input.split('|');
+  const statMap = new Map<string, CharacterStat>();
+
+  for (const part of parts) {
+    const eqIndex = part.indexOf('=');
+
+    if (eqIndex > 0) {
+      const key = part.substring(0, eqIndex).toLowerCase().trim();
+      const value = part.substring(eqIndex + 1).trim();
+
+      statMap.set(key, {
+        key,
+        label: STAT_LABELS[key] ?? key.toUpperCase(),
+        value,
+      });
+    }
+  }
+
+  // Return in canonical order
+  const result: CharacterStat[] = [];
+
+  for (const key of STAT_ORDER) {
+    const stat = statMap.get(key);
+
+    if (stat !== undefined) {
+      result.push(stat);
+    }
+  }
+
+  // Append any stats not in the canonical order
+  for (const [key, stat] of statMap) {
+    if (!STAT_ORDER.includes(key)) {
+      result.push(stat);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Formats a compact status summary string from status key-value pairs.
+ *
+ * @param status - The status record from Char.Status
+ * @param statusVars - The variable definitions from Char.StatusVars (key -> label)
+ * @returns A compact display string, e.g. "Zauberer, Mensch, Erzmagier"
+ */
+export function formatStatusSummary(
+  status: Record<string, string | number>,
+  statusVars: Record<string, string>,
+): string {
+  const parts: string[] = [];
+
+  for (const [key, value] of Object.entries(status)) {
+    if (value !== '' && value !== 0) {
+      parts.push(String(value));
+    }
+  }
+
+  return parts.join(', ');
+}
diff --git a/frontend/src/app/features/gmcp-char/index.ts b/frontend/src/app/features/gmcp-char/index.ts
new file mode 100644
index 0000000..132d680
--- /dev/null
+++ b/frontend/src/app/features/gmcp-char/index.ts
@@ -0,0 +1,11 @@
+export { CharGmcpHandler } from './char-gmcp-handler';
+export { CharStatusBarComponent } from './char-statusbar.component';
+export {
+  CharacterData,
+  CharacterStat,
+  CharacterVitals,
+  createCharacterData,
+  formatStatusSummary,
+  parseStats,
+  parseVitals,
+} from './character-data';
diff --git a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
new file mode 100644
index 0000000..37a358e
--- /dev/null
+++ b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
@@ -0,0 +1,44 @@
+import { inject, Injectable } from '@angular/core';
+
+import { GmcpService } from './gmcp.service';
+import { CharGmcpHandler } from '../gmcp-char/char-gmcp-handler';
+import { SoundGmcpHandler } from '../gmcp-sound/sound-gmcp-handler';
+import { FilesGmcpHandler } from '../gmcp-files/files-gmcp-handler';
+
+/**
+ * Central GMCP bootstrap service.
+ *
+ * Registers all known GMCP module handlers with the GmcpService.
+ * Must be called once during application startup (via APP_INITIALIZER or
+ * similar mechanism).
+ *
+ * This uses Angular DI to inject the handler singletons and registers them
+ * with the GMCP routing registry so incoming messages are dispatched correctly.
+ */
+@Injectable({ providedIn: 'root' })
+export class GmcpBootstrapService {
+  private readonly gmcpService = inject(GmcpService);
+  private readonly charHandler = inject(CharGmcpHandler);
+  private readonly soundHandler = inject(SoundGmcpHandler);
+  private readonly filesHandler = inject(FilesGmcpHandler);
+
+  private initialized = false;
+
+  /**
+   * Registers all GMCP module handlers.
+   * Safe to call multiple times — only runs once.
+   */
+  public bootstrap(): void {
+    if (this.initialized) {
+      return;
+    }
+
+    this.gmcpService.registerModule(this.charHandler);
+    this.gmcpService.registerModule(this.soundHandler);
+    this.gmcpService.registerModule(this.filesHandler);
+
+    this.initialized = true;
+
+    console.info('[GmcpBootstrap] All GMCP handlers registered.');
+  }
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e94c364..e25e870 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -8,6 +8,7 @@ import {
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { ServerConfigService } from './app/features/serverconfig/server-config.service';
+import { GmcpBootstrapService } from './app/features/gmcp/gmcp-bootstrap.service';
 
 if (environment.production) {
   enableProdMode();
@@ -21,5 +22,10 @@ bootstrapApplication(AppComponent, {
 
       return config.load();
     }),
+    provideAppInitializer(() => {
+      const gmcpBootstrap = inject(GmcpBootstrapService);
+
+      gmcpBootstrap.bootstrap();
+    }),
   ],
 }).catch((err) => console.error(err));

From 2095efbb804e438e7b6001873386bd128e4dde48 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 06:02:17 +0100
Subject: [PATCH 11/30] gmcp inventory

---
 .cursor/rules/frontend.mdc                    |  18 ++-
 .../gmcp-char/char-gmcp-handler.spec.ts       | 104 ++++++++++++++
 .../features/gmcp-char/char-gmcp-handler.ts   | 134 +++++++++++++++++-
 frontend/src/app/features/gmcp-char/index.ts  |   2 +
 .../features/gmcp-char/inventory-data.spec.ts | 131 +++++++++++++++++
 .../app/features/gmcp-char/inventory-data.ts  | 126 ++++++++++++++++
 .../features/gmcp-char/inventory.component.ts | 120 ++++++++++++++++
 .../windows/window-container.component.ts     |   6 +-
 8 files changed, 633 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/app/features/gmcp-char/inventory-data.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-char/inventory-data.ts
 create mode 100644 frontend/src/app/features/gmcp-char/inventory.component.ts

diff --git a/.cursor/rules/frontend.mdc b/.cursor/rules/frontend.mdc
index 34c0ffa..a9e75c2 100644
--- a/.cursor/rules/frontend.mdc
+++ b/.cursor/rules/frontend.mdc
@@ -100,7 +100,7 @@ globs: frontend/**/*.ts,frontend/**/*.html,frontend/**/*.scss
   - `getMenuItems()` liefert "Vertonung" Toggle-Eintrag für das Menü
   - Backend: GMCP Sound-Messages werden transparent durchgereicht (kein Backend-Code nötig)
 
-## GMCP Char-Modul (Statusleiste)
+## GMCP Char-Modul (Statusleiste + Inventar)
 - **CharacterData** (`features/gmcp-char/character-data.ts`): Typen + Parsing
   - `CharacterData` Interface: Name, Fullname, Gender, Wizard-Flag, Vitals, Stats, Status
   - `CharacterVitals`: HP/SP + MaxHP/MaxSP
@@ -108,14 +108,24 @@ globs: frontend/**/*.ts,frontend/**/*.html,frontend/**/*.scss
   - `parseVitals("hp=100|sp=80|maxhp=120|maxsp=100")` → strukturierte Vitals
   - `parseStats("con=34,2|dex=59,7|int=130|str=59,8")` → sortiertes Stats-Array
   - `formatStatusSummary()` → kompakte Status-Anzeige
+- **InventoryData** (`features/gmcp-char/inventory-data.ts`): Inventar-Datenmodell
+  - `InventoryEntry` Interface: `{ name, category }` — einzelner Gegenstand
+  - `InventoryList` Klasse: Kategorisierte Verwaltung mit `addItem()`, `removeItem()`, `initList()`
+  - Kategorien werden automatisch erstellt/gelöscht
+  - `getCategories()`, `getItems(category)`, `totalItems`, `isEmpty`
 - **CharGmcpHandler** (`features/gmcp-char/char-gmcp-handler.ts`): GmcpModuleHandler für `Char`
   - `Char.Name` → Charakter-Init, Browser-Titel setzen, Wizard-Module aktivieren
   - `Char.StatusVars` → Status-Variablen-Definitionen speichern
   - `Char.Status` → Aktuelle Statuswerte (Gilde, Rasse, Rang)
   - `Char.Vitals` → HP/SP Werte (string + object Format)
   - `Char.Stats` → STR/INT/CON/DEX Attribute
+  - `Char.Items.List` → Komplettes Inventar ersetzen + Fenster öffnen
+  - `Char.Items.Add` → Einzelnen Gegenstand hinzufügen
+  - `Char.Items.Remove` → Einzelnen Gegenstand entfernen
   - `characterData$` BehaviorSubject (null = nicht eingeloggt)
+  - `inventory$` BehaviorSubject für reaktive Inventar-Updates
   - Wizard-Erkennung: bei `wizard > 0` werden Files/Input/Numpad GMCP-Module aktiviert
+  - Inventar-Fenster wird automatisch bei `Items.List` geöffnet, bei `dispose()` geschlossen
 - **CharStatusBarComponent** (`features/gmcp-char/char-statusbar.component.ts`): Kompakte Statusleiste
   - Standalone, direkt in `app.component.html` zwischen Terminal und Window-Container
   - Nur sichtbar nach `Char.Name` Empfang (characterData$ nicht null + name gesetzt)
@@ -123,6 +133,12 @@ globs: frontend/**/*.ts,frontend/**/*.html,frontend/**/*.scss
   - Catppuccin Mocha Farben, monospace, responsive (Stats auf schmalen Viewports ausgeblendet)
   - ARIA: `role="status"`, `aria-live="polite"`
   - `flex: 0 0 auto` — verdrängt Terminal von unten, überlappt nicht
+- **InventoryComponent** (`features/gmcp-char/inventory.component.ts`): Inventar-Fenster
+  - Standalone, wird als Modeless-Window im WindowContainer gerendert (`componentType: 'InventoryComponent'`)
+  - Kategorisierte Liste mit Kategorie-Überschriften und Items
+  - Abonniert `CharGmcpHandler.inventory$` für reaktive Updates
+  - Catppuccin Mocha Farben, Gegenstandszähler im Footer
+  - ARIA: `role="list"`, `aria-label="Inventar"`
 
 ## GMCP Handler-Registrierung
 - **GmcpBootstrapService** (`features/gmcp/gmcp-bootstrap.service.ts`): Zentrale Registrierung
diff --git a/frontend/src/app/features/gmcp-char/char-gmcp-handler.spec.ts b/frontend/src/app/features/gmcp-char/char-gmcp-handler.spec.ts
index 31dcbaf..1a6a83e 100644
--- a/frontend/src/app/features/gmcp-char/char-gmcp-handler.spec.ts
+++ b/frontend/src/app/features/gmcp-char/char-gmcp-handler.spec.ts
@@ -223,6 +223,101 @@ describe('CharGmcpHandler', () => {
     });
   });
 
+  describe('Char.Items.List', () => {
+    it('should initialize the inventory', () => {
+      handler.handleMessage('Items.List', {
+        items: [
+          { name: 'Schwert', category: 'Waffen' },
+          { name: 'Dolch', category: 'Waffen' },
+          { name: 'Kettenhemd', category: 'Rüstung' },
+        ],
+      });
+
+      const inv = handler.inventory$.value;
+      expect(inv.totalItems).toBe(3);
+      expect(inv.getCategories()).toEqual(['Waffen', 'Rüstung']);
+      expect(inv.getItems('Waffen')).toEqual(['Schwert', 'Dolch']);
+    });
+
+    it('should replace previous inventory on new Items.List', () => {
+      handler.handleMessage('Items.List', {
+        items: [{ name: 'Alt', category: 'Test' }],
+      });
+
+      handler.handleMessage('Items.List', {
+        items: [{ name: 'Neu', category: 'Andere' }],
+      });
+
+      const inv = handler.inventory$.value;
+      expect(inv.totalItems).toBe(1);
+      expect(inv.getCategories()).toEqual(['Andere']);
+    });
+
+    it('should handle empty items array', () => {
+      handler.handleMessage('Items.List', { items: [] });
+
+      expect(handler.inventory$.value.isEmpty).toBe(true);
+    });
+  });
+
+  describe('Char.Items.Add', () => {
+    it('should add a single item', () => {
+      handler.handleMessage('Items.List', {
+        items: [{ name: 'Schwert', category: 'Waffen' }],
+      });
+
+      handler.handleMessage('Items.Add', {
+        item: { name: 'Dolch', category: 'Waffen' },
+      });
+
+      expect(handler.inventory$.value.getItems('Waffen')).toEqual([
+        'Dolch',
+        'Schwert',
+      ]);
+    });
+
+    it('should ignore null item', () => {
+      handler.handleMessage('Items.Add', { item: null });
+
+      expect(handler.inventory$.value.isEmpty).toBe(true);
+    });
+  });
+
+  describe('Char.Items.Remove', () => {
+    it('should remove a single item', () => {
+      handler.handleMessage('Items.List', {
+        items: [
+          { name: 'Schwert', category: 'Waffen' },
+          { name: 'Dolch', category: 'Waffen' },
+        ],
+      });
+
+      handler.handleMessage('Items.Remove', {
+        item: { name: 'Schwert', category: 'Waffen' },
+      });
+
+      expect(handler.inventory$.value.getItems('Waffen')).toEqual(['Dolch']);
+    });
+
+    it('should remove category when last item is removed', () => {
+      handler.handleMessage('Items.List', {
+        items: [{ name: 'Schwert', category: 'Waffen' }],
+      });
+
+      handler.handleMessage('Items.Remove', {
+        item: { name: 'Schwert', category: 'Waffen' },
+      });
+
+      expect(handler.inventory$.value.getCategories()).toEqual([]);
+    });
+
+    it('should ignore null item', () => {
+      handler.handleMessage('Items.Remove', { item: null });
+
+      expect(handler.inventory$.value.isEmpty).toBe(true);
+    });
+  });
+
   describe('dispose()', () => {
     it('should reset characterData$ to null', () => {
       handler.handleMessage('Name', { name: 'Test' });
@@ -231,5 +326,14 @@ describe('CharGmcpHandler', () => {
       handler.dispose();
       expect(handler.characterData$.value).toBeNull();
     });
+
+    it('should reset inventory to empty', () => {
+      handler.handleMessage('Items.List', {
+        items: [{ name: 'Test', category: 'Cat' }],
+      });
+
+      handler.dispose();
+      expect(handler.inventory$.value.isEmpty).toBe(true);
+    });
   });
 });
diff --git a/frontend/src/app/features/gmcp-char/char-gmcp-handler.ts b/frontend/src/app/features/gmcp-char/char-gmcp-handler.ts
index cb16b7a..b7e59ba 100644
--- a/frontend/src/app/features/gmcp-char/char-gmcp-handler.ts
+++ b/frontend/src/app/features/gmcp-char/char-gmcp-handler.ts
@@ -4,6 +4,8 @@ import { BehaviorSubject } from 'rxjs';
 
 import { GmcpService } from '../gmcp/gmcp.service';
 import type { GmcpModuleHandler } from '../gmcp/gmcp-module-handler';
+import { WindowAction } from '../windows/window-config';
+import { WindowService } from '../windows/window.service';
 
 import {
   CharacterData,
@@ -11,6 +13,7 @@ import {
   parseStats,
   parseVitals,
 } from './character-data';
+import { InventoryEntry, InventoryList } from './inventory-data';
 
 /**
  * Payload shape for GMCP `Char.Name`.
@@ -26,14 +29,18 @@ interface CharNamePayload {
  * GMCP handler for the `Char` module.
  *
  * Handles:
- * - `Char.Name`       → Character name, title, wizard flag
- * - `Char.StatusVars`  → Available status variable definitions
- * - `Char.Status`      → Current status values (guild, race, rank)
- * - `Char.Vitals`      → HP/SP values (changes frequently)
- * - `Char.Stats`       → STR/INT/CON/DEX attributes
+ * - `Char.Name`        → Character name, title, wizard flag
+ * - `Char.StatusVars`   → Available status variable definitions
+ * - `Char.Status`       → Current status values (guild, race, rank)
+ * - `Char.Vitals`       → HP/SP values (changes frequently)
+ * - `Char.Stats`        → STR/INT/CON/DEX attributes
+ * - `Char.Items.List`   → Full inventory list
+ * - `Char.Items.Add`    → Add single item to inventory
+ * - `Char.Items.Remove` → Remove single item from inventory
  *
  * State is exposed as a `BehaviorSubject<CharacterData | null>`.
  * The statusbar component subscribes to this for reactive rendering.
+ * Inventory is managed separately via `inventory$` BehaviorSubject.
  *
  * When `Char.Name` is received with `wizard > 0`, wizard-only GMCP
  * modules (Files, Input, Numpad) are automatically enabled.
@@ -45,6 +52,10 @@ export class CharGmcpHandler implements GmcpModuleHandler {
 
   private readonly gmcpService = inject(GmcpService);
   private readonly titleService = inject(Title);
+  private readonly windowService = inject(WindowService);
+
+  /** Window ID of the inventory window (if open) */
+  private inventoryWindowId: string | null = null;
 
   /**
    * Reactive stream of character data.
@@ -52,6 +63,13 @@ export class CharGmcpHandler implements GmcpModuleHandler {
    */
   public readonly characterData$ = new BehaviorSubject<CharacterData | null>(null);
 
+  /**
+   * Reactive stream of inventory data.
+   * The InventoryList instance is mutable; a new reference is emitted
+   * on each change to trigger change detection.
+   */
+  public readonly inventory$ = new BehaviorSubject<InventoryList>(new InventoryList());
+
   /**
    * Routes incoming GMCP `Char.*` messages.
    */
@@ -79,16 +97,36 @@ export class CharGmcpHandler implements GmcpModuleHandler {
         this.handleStats(data as string | Record<string, unknown>);
         break;
 
+      case 'items.list':
+        this.handleItemsList(data as { items: InventoryEntry[] });
+        break;
+
+      case 'items.add':
+        this.handleItemsAdd(data as { item: InventoryEntry });
+        break;
+
+      case 'items.remove':
+        this.handleItemsRemove(data as { item: InventoryEntry });
+        break;
+
       default:
         console.debug(`[CharGmcpHandler] Unknown message: Char.${message}`, data);
     }
   }
 
   /**
-   * Cleanup: reset character data to null.
+   * Cleanup: reset character data and inventory to defaults, close inventory window.
    */
   dispose(): void {
     this.characterData$.next(null);
+    this.inventory$.next(new InventoryList());
+
+    // Close inventory window if open
+    if (this.inventoryWindowId !== null) {
+      this.windowService.close(this.inventoryWindowId);
+      this.inventoryWindowId = null;
+    }
+
     console.info('[CharGmcpHandler] Disposed.');
   }
 
@@ -221,6 +259,90 @@ export class CharGmcpHandler implements GmcpModuleHandler {
     });
   }
 
+  /**
+   * Handles `Char.Items.List`: replaces the entire inventory and opens the window.
+   */
+  private handleItemsList(data: { items: InventoryEntry[] }): void {
+    const inv = this.inventory$.value;
+    inv.initList(data.items ?? []);
+
+    // Emit a new reference to trigger change detection
+    this.inventory$.next(inv);
+
+    // Open or refresh the inventory window
+    this.openInventoryWindow();
+
+    console.debug(
+      '[CharGmcpHandler] Items.List received:',
+      inv.totalItems,
+      'items in',
+      inv.getCategories().length,
+      'categories',
+    );
+  }
+
+  /**
+   * Handles `Char.Items.Add`: adds a single item to the inventory.
+   */
+  private handleItemsAdd(data: { item: InventoryEntry }): void {
+    if (data.item == null) {
+      return;
+    }
+
+    const inv = this.inventory$.value;
+    inv.addItem(data.item);
+    this.inventory$.next(inv);
+
+    console.debug('[CharGmcpHandler] Items.Add:', data.item.name, '→', data.item.category);
+  }
+
+  /**
+   * Handles `Char.Items.Remove`: removes a single item from the inventory.
+   */
+  private handleItemsRemove(data: { item: InventoryEntry }): void {
+    if (data.item == null) {
+      return;
+    }
+
+    const inv = this.inventory$.value;
+    const removed = inv.removeItem(data.item);
+    this.inventory$.next(inv);
+
+    if (removed) {
+      console.debug('[CharGmcpHandler] Items.Remove:', data.item.name, '←', data.item.category);
+    } else {
+      console.debug('[CharGmcpHandler] Items.Remove: item not found:', data.item.name);
+    }
+  }
+
+  /**
+   * Opens (or focuses) the inventory modeless window.
+   */
+  private openInventoryWindow(): void {
+    // If already open, just focus it
+    if (this.inventoryWindowId !== null) {
+      this.windowService.focus(this.inventoryWindowId);
+      return;
+    }
+
+    const windowId = this.windowService.open({
+      title: 'Inventar',
+      componentType: 'InventoryComponent',
+      position: { x: 20, y: 60 },
+      size: { width: 320, height: 400 },
+    });
+
+    this.inventoryWindowId = windowId;
+
+    // Listen for close events to clear our reference
+    const subscription = this.windowService.outgoingEvents$.subscribe((event) => {
+      if (event.windowId === windowId && event.action === WindowAction.CloseParent) {
+        this.inventoryWindowId = null;
+        subscription.unsubscribe();
+      }
+    });
+  }
+
   /**
    * Ensures charData exists (creates a placeholder if Char.Name hasn't been received yet).
    */
diff --git a/frontend/src/app/features/gmcp-char/index.ts b/frontend/src/app/features/gmcp-char/index.ts
index 132d680..9d66aae 100644
--- a/frontend/src/app/features/gmcp-char/index.ts
+++ b/frontend/src/app/features/gmcp-char/index.ts
@@ -1,5 +1,6 @@
 export { CharGmcpHandler } from './char-gmcp-handler';
 export { CharStatusBarComponent } from './char-statusbar.component';
+export { InventoryComponent } from './inventory.component';
 export {
   CharacterData,
   CharacterStat,
@@ -9,3 +10,4 @@ export {
   parseStats,
   parseVitals,
 } from './character-data';
+export { InventoryEntry, InventoryList } from './inventory-data';
diff --git a/frontend/src/app/features/gmcp-char/inventory-data.spec.ts b/frontend/src/app/features/gmcp-char/inventory-data.spec.ts
new file mode 100644
index 0000000..dabad48
--- /dev/null
+++ b/frontend/src/app/features/gmcp-char/inventory-data.spec.ts
@@ -0,0 +1,131 @@
+import { InventoryList } from './inventory-data';
+
+describe('InventoryList', () => {
+  let inv: InventoryList;
+
+  beforeEach(() => {
+    inv = new InventoryList();
+  });
+
+  describe('initial state', () => {
+    it('should be empty', () => {
+      expect(inv.isEmpty).toBe(true);
+      expect(inv.totalItems).toBe(0);
+      expect(inv.getCategories()).toEqual([]);
+    });
+  });
+
+  describe('addItem()', () => {
+    it('should add an item to a new category', () => {
+      inv.addItem({ name: 'Schwert', category: 'Waffen' });
+
+      expect(inv.getCategories()).toEqual(['Waffen']);
+      expect(inv.getItems('Waffen')).toEqual(['Schwert']);
+      expect(inv.totalItems).toBe(1);
+      expect(inv.isEmpty).toBe(false);
+    });
+
+    it('should prepend by default (addTop = true)', () => {
+      inv.addItem({ name: 'Schwert', category: 'Waffen' });
+      inv.addItem({ name: 'Dolch', category: 'Waffen' });
+
+      expect(inv.getItems('Waffen')).toEqual(['Dolch', 'Schwert']);
+    });
+
+    it('should append when addTop = false', () => {
+      inv.addItem({ name: 'Schwert', category: 'Waffen' }, false);
+      inv.addItem({ name: 'Dolch', category: 'Waffen' }, false);
+
+      expect(inv.getItems('Waffen')).toEqual(['Schwert', 'Dolch']);
+    });
+
+    it('should support multiple categories', () => {
+      inv.addItem({ name: 'Schwert', category: 'Waffen' });
+      inv.addItem({ name: 'Kettenhemd', category: 'Rüstung' });
+      inv.addItem({ name: 'Fackel', category: 'Sonstiges' });
+
+      expect(inv.getCategories()).toEqual(['Waffen', 'Rüstung', 'Sonstiges']);
+      expect(inv.totalItems).toBe(3);
+    });
+  });
+
+  describe('removeItem()', () => {
+    it('should remove an existing item', () => {
+      inv.addItem({ name: 'Schwert', category: 'Waffen' });
+      inv.addItem({ name: 'Dolch', category: 'Waffen' });
+
+      const removed = inv.removeItem({ name: 'Schwert', category: 'Waffen' });
+
+      expect(removed).toBe(true);
+      expect(inv.getItems('Waffen')).toEqual(['Dolch']);
+    });
+
+    it('should remove the category when last item is removed', () => {
+      inv.addItem({ name: 'Schwert', category: 'Waffen' });
+
+      inv.removeItem({ name: 'Schwert', category: 'Waffen' });
+
+      expect(inv.getCategories()).toEqual([]);
+      expect(inv.isEmpty).toBe(true);
+    });
+
+    it('should return false for non-existent item', () => {
+      inv.addItem({ name: 'Schwert', category: 'Waffen' });
+
+      const removed = inv.removeItem({ name: 'Dolch', category: 'Waffen' });
+
+      expect(removed).toBe(false);
+      expect(inv.getItems('Waffen')).toEqual(['Schwert']);
+    });
+
+    it('should return false for non-existent category', () => {
+      const removed = inv.removeItem({ name: 'Schwert', category: 'Waffen' });
+
+      expect(removed).toBe(false);
+    });
+  });
+
+  describe('initList()', () => {
+    it('should replace entire inventory', () => {
+      inv.addItem({ name: 'Alt', category: 'Test' });
+
+      inv.initList([
+        { name: 'Schwert', category: 'Waffen' },
+        { name: 'Dolch', category: 'Waffen' },
+        { name: 'Kettenhemd', category: 'Rüstung' },
+      ]);
+
+      expect(inv.getCategories()).toEqual(['Waffen', 'Rüstung']);
+      expect(inv.getItems('Waffen')).toEqual(['Schwert', 'Dolch']);
+      expect(inv.getItems('Rüstung')).toEqual(['Kettenhemd']);
+      expect(inv.totalItems).toBe(3);
+    });
+
+    it('should handle empty list', () => {
+      inv.addItem({ name: 'Alt', category: 'Test' });
+
+      inv.initList([]);
+
+      expect(inv.isEmpty).toBe(true);
+    });
+  });
+
+  describe('clear()', () => {
+    it('should empty the inventory', () => {
+      inv.addItem({ name: 'Schwert', category: 'Waffen' });
+      inv.addItem({ name: 'Kettenhemd', category: 'Rüstung' });
+
+      inv.clear();
+
+      expect(inv.isEmpty).toBe(true);
+      expect(inv.totalItems).toBe(0);
+      expect(inv.getCategories()).toEqual([]);
+    });
+  });
+
+  describe('getItems()', () => {
+    it('should return empty array for unknown category', () => {
+      expect(inv.getItems('NonExistent')).toEqual([]);
+    });
+  });
+});
diff --git a/frontend/src/app/features/gmcp-char/inventory-data.ts b/frontend/src/app/features/gmcp-char/inventory-data.ts
new file mode 100644
index 0000000..b9251da
--- /dev/null
+++ b/frontend/src/app/features/gmcp-char/inventory-data.ts
@@ -0,0 +1,126 @@
+/**
+ * A single inventory entry as received from GMCP `Char.Items.*`.
+ */
+export interface InventoryEntry {
+  /** Display name of the item */
+  name: string;
+  /** Category grouping (e.g. "Waffen", "Rüstung", "Sonstiges") */
+  category: string;
+}
+
+/**
+ * Manages a categorised inventory list.
+ *
+ * Categories are created on-the-fly when items are added and removed
+ * automatically when their last item is deleted.
+ *
+ * Thread-safety note: This class is designed for single-threaded use
+ * within Angular's change-detection cycle.
+ */
+export class InventoryList {
+  /** Internal storage: category name → ordered list of item names */
+  private readonly namedList = new Map<string, string[]>();
+
+  /**
+   * Returns all category names in insertion order.
+   */
+  getCategories(): string[] {
+    return [...this.namedList.keys()];
+  }
+
+  /**
+   * Returns item names for a given category (or empty array if unknown).
+   */
+  getItems(category: string): string[] {
+    return this.namedList.get(category) ?? [];
+  }
+
+  /**
+   * Returns the total number of items across all categories.
+   */
+  get totalItems(): number {
+    let count = 0;
+
+    for (const items of this.namedList.values()) {
+      count += items.length;
+    }
+
+    return count;
+  }
+
+  /**
+   * Returns whether the inventory is empty.
+   */
+  get isEmpty(): boolean {
+    return this.namedList.size === 0;
+  }
+
+  /**
+   * Adds an item to the inventory.
+   *
+   * @param entry - The item to add
+   * @param addTop - If true, prepend to category (default); if false, append
+   */
+  addItem(entry: InventoryEntry, addTop = true): void {
+    const existing = this.namedList.get(entry.category);
+
+    if (existing !== undefined) {
+      if (addTop) {
+        existing.unshift(entry.name);
+      } else {
+        existing.push(entry.name);
+      }
+    } else {
+      this.namedList.set(entry.category, [entry.name]);
+    }
+  }
+
+  /**
+   * Removes a single item from the inventory.
+   * If the category becomes empty, it is removed entirely.
+   *
+   * @param entry - The item to remove
+   * @returns true if the item was found and removed
+   */
+  removeItem(entry: InventoryEntry): boolean {
+    const items = this.namedList.get(entry.category);
+
+    if (items === undefined) {
+      return false;
+    }
+
+    const index = items.indexOf(entry.name);
+
+    if (index < 0) {
+      return false;
+    }
+
+    items.splice(index, 1);
+
+    if (items.length === 0) {
+      this.namedList.delete(entry.category);
+    }
+
+    return true;
+  }
+
+  /**
+   * Replaces the entire inventory with a new list of entries.
+   *
+   * @param entries - Complete inventory from `Char.Items.List`
+   */
+  initList(entries: InventoryEntry[]): void {
+    this.namedList.clear();
+
+    for (const entry of entries) {
+      this.addItem(entry, false);
+    }
+  }
+
+  /**
+   * Clears the entire inventory.
+   */
+  clear(): void {
+    this.namedList.clear();
+  }
+}
diff --git a/frontend/src/app/features/gmcp-char/inventory.component.ts b/frontend/src/app/features/gmcp-char/inventory.component.ts
new file mode 100644
index 0000000..5f6ec4f
--- /dev/null
+++ b/frontend/src/app/features/gmcp-char/inventory.component.ts
@@ -0,0 +1,120 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { WindowConfig } from '../windows';
+
+import { CharGmcpHandler } from './char-gmcp-handler';
+import { InventoryList } from './inventory-data';
+
+/**
+ * Displays a categorised inventory list inside a modeless window.
+ *
+ * Items are grouped by category (e.g. "Waffen", "Rüstung") with
+ * a collapsible tree-style layout.
+ *
+ * The component subscribes to `CharGmcpHandler.inventory$` for
+ * reactive updates when items are added/removed.
+ */
+@Component({
+  selector: 'app-inventory',
+  standalone: true,
+  imports: [AsyncPipe],
+  template: `
+    <div class="inventory" role="list" aria-label="Inventar">
+      @if (inventory.isEmpty) {
+        <div class="inventory-empty">Inventar ist leer.</div>
+      } @else {
+        @for (category of inventory.getCategories(); track category) {
+          <div class="inventory-category" role="listitem">
+            <div class="inventory-category-name">{{ category }}</div>
+            <ul class="inventory-items">
+              @for (item of inventory.getItems(category); track $index) {
+                <li class="inventory-item">{{ item }}</li>
+              }
+            </ul>
+          </div>
+        }
+        <div class="inventory-footer">
+          {{ inventory.totalItems }} Gegenstände
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        height: 100%;
+        overflow: auto;
+      }
+
+      .inventory {
+        padding: 4px 8px;
+        font-family: monospace;
+        font-size: 13px;
+        color: #cdd6f4;
+      }
+
+      .inventory-empty {
+        padding: 12px 0;
+        color: #6c7086;
+        font-style: italic;
+        text-align: center;
+      }
+
+      .inventory-category {
+        margin-bottom: 6px;
+      }
+
+      .inventory-category-name {
+        font-weight: 600;
+        color: #89b4fa;
+        padding: 2px 0;
+      }
+
+      .inventory-items {
+        list-style: none;
+        padding-left: 16px;
+        margin: 0;
+      }
+
+      .inventory-item {
+        color: #cdd6f4;
+        padding: 1px 0;
+        line-height: 1.4;
+      }
+
+      .inventory-item:hover {
+        color: #f5e0dc;
+      }
+
+      .inventory-footer {
+        margin-top: 8px;
+        padding-top: 4px;
+        border-top: 1px solid #313244;
+        color: #6c7086;
+        font-size: 11px;
+        text-align: right;
+      }
+    `,
+  ],
+})
+export class InventoryComponent implements OnInit, OnDestroy {
+  @Input() config!: WindowConfig;
+
+  protected inventory = new InventoryList();
+
+  private readonly charHandler = inject(CharGmcpHandler);
+  private subscription?: Subscription;
+
+  ngOnInit(): void {
+    this.subscription = this.charHandler.inventory$.subscribe((inv) => {
+      this.inventory = inv;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
+}
diff --git a/frontend/src/app/features/windows/window-container.component.ts b/frontend/src/app/features/windows/window-container.component.ts
index 7188880..4486fc8 100644
--- a/frontend/src/app/features/windows/window-container.component.ts
+++ b/frontend/src/app/features/windows/window-container.component.ts
@@ -1,6 +1,7 @@
 import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 
+import { InventoryComponent } from '../gmcp-char/inventory.component';
 import { DirListComponent } from '../gmcp-files/dirlist.component';
 import { EditorComponent } from '../gmcp-files/editor.component';
 
@@ -25,7 +26,7 @@ import { WindowService } from './window.service';
 @Component({
   selector: 'app-window-container',
   standalone: true,
-  imports: [AsyncPipe, WindowComponent, DirListComponent, EditorComponent],
+  imports: [AsyncPipe, WindowComponent, DirListComponent, EditorComponent, InventoryComponent],
   template: `
     <div class="wm-container">
       @for (config of windowService.windows$ | async; track config.windowId) {
@@ -40,6 +41,9 @@ import { WindowService } from './window.service';
             @case ('EditorComponent') {
               <app-editor [config]="config"></app-editor>
             }
+            @case ('InventoryComponent') {
+              <app-inventory [config]="config"></app-inventory>
+            }
             @default {
               <p>Unbekannter Fenstertyp: {{ config.componentType }}</p>
             }

From c9bdd50cd5e757485826b25c23c8a571b1aca21d Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 08:36:22 +0100
Subject: [PATCH 12/30] error handling backend and some cors

---
 backend/src/core/sockets/socket-manager.ts   | 10 +++-
 backend/src/features/telnet/telnet-client.ts | 59 ++++++++++++++++++++
 backend/src/main.ts                          | 27 +++++++++
 3 files changed, 95 insertions(+), 1 deletion(-)

diff --git a/backend/src/core/sockets/socket-manager.ts b/backend/src/core/sockets/socket-manager.ts
index 7c54b2e..67edd13 100644
--- a/backend/src/core/sockets/socket-manager.ts
+++ b/backend/src/core/sockets/socket-manager.ts
@@ -37,12 +37,20 @@ export class SocketManager extends Server<
     },
     private readonly mudConfigService?: MudConfigService,
   ) {
+    const environment = Environment.getInstance();
+
     super(server, {
       path: managerOptions.socketRoot,
       transports: ['websocket'],
       connectionStateRecovery: {
-        maxDisconnectionDuration: Environment.getInstance().socketTimeout,
+        maxDisconnectionDuration: environment.socketTimeout,
       },
+      cors:
+        environment.environment === 'development'
+          ? { origin: true, credentials: true }
+          : environment.corsAllowList.length > 0
+            ? { origin: environment.corsAllowList, credentials: true }
+            : undefined,
     });
 
     this.on('connection', (socket) => {
diff --git a/backend/src/features/telnet/telnet-client.ts b/backend/src/features/telnet/telnet-client.ts
index 1551f38..1a0b1f0 100644
--- a/backend/src/features/telnet/telnet-client.ts
+++ b/backend/src/features/telnet/telnet-client.ts
@@ -110,6 +110,22 @@ export class TelnetClient extends EventEmitter<TelnetClientEvents> {
       telnetPort,
     );
 
+    // CRITICAL: Register error handler on the raw TCP/TLS socket IMMEDIATELY
+    // to prevent uncaught exceptions. Without this, connection failures
+    // (especially AggregateError from Node.js happy-eyeballs DNS resolution)
+    // crash the entire process.
+    telnetConnection.on('error', (error: Error) => {
+      const details = formatConnectionError(error);
+
+      logger.error(
+        `[${this.socketId}] [Telnet-Client] Connection error to ${telnetHost}:${telnetPort}`,
+        details,
+      );
+
+      this.connected = false;
+      this.emit('close', true);
+    });
+
     if (useTls) {
       logger.info(
         `[${this.socketId}] [Telnet-Client] created https connection for telnet`,
@@ -138,6 +154,14 @@ export class TelnetClient extends EventEmitter<TelnetClientEvents> {
       },
     );
 
+    // Also handle errors on the TelnetSocket (Transform stream) layer
+    this.telnetSocket.on('error', (error: Error) => {
+      logger.error(
+        `[${this.socketId}] [Telnet-Client] TelnetSocket stream error`,
+        formatConnectionError(error),
+      );
+    });
+
     this.optionsHandler = new Map([
       [TelnetOptions.TELOPT_CHARSET, handleCharsetOption(this.telnetSocket)],
       [TelnetOptions.TELOPT_ECHO, handleEchoOption(this.telnetSocket)],
@@ -656,3 +680,38 @@ function createTelnetConnection(
 
   return socket;
 }
+
+/**
+ * Formats a connection error for structured logging.
+ * Handles AggregateError (from Node.js happy-eyeballs DNS resolution)
+ * by unpacking the individual sub-errors with their messages and stacks.
+ */
+function formatConnectionError(error: Error): Record<string, unknown> {
+  if (error instanceof AggregateError) {
+    return {
+      errorType: 'AggregateError',
+      message: error.message,
+      errors: error.errors.map((subError: Error, index: number) => ({
+        index,
+        message: subError.message,
+        code: (subError as NodeJS.ErrnoException).code,
+        syscall: (subError as NodeJS.ErrnoException).syscall,
+        address: (subError as NodeJS.ErrnoException).address,
+        port: (subError as NodeJS.ErrnoException).port,
+        stack: subError.stack,
+      })),
+    };
+  }
+
+  const errno = error as NodeJS.ErrnoException;
+
+  return {
+    errorType: error.constructor.name,
+    message: error.message,
+    code: errno.code,
+    syscall: errno.syscall,
+    address: errno.address,
+    port: errno.port,
+    stack: error.stack,
+  };
+}
diff --git a/backend/src/main.ts b/backend/src/main.ts
index c624bb7..58734fe 100644
--- a/backend/src/main.ts
+++ b/backend/src/main.ts
@@ -17,6 +17,33 @@ import { logger } from './shared/utils/logger.js';
 
 sourceMaps.install();
 
+// Global error handlers to prevent silent crashes and improve diagnostics
+process.on('uncaughtException', (error: Error) => {
+  if (error instanceof AggregateError) {
+    logger.error('[Process] Uncaught AggregateError:', {
+      message: error.message,
+      errors: error.errors.map((subError: Error, i: number) => ({
+        index: i,
+        message: subError.message,
+        code: (subError as NodeJS.ErrnoException).code,
+        stack: subError.stack,
+      })),
+    });
+  } else {
+    logger.error('[Process] Uncaught Exception:', {
+      message: error.message,
+      stack: error.stack,
+      name: error.name,
+    });
+  }
+});
+
+process.on('unhandledRejection', (reason: unknown) => {
+  logger.error('[Process] Unhandled Promise Rejection:', {
+    reason: reason instanceof Error ? { message: reason.message, stack: reason.stack } : reason,
+  });
+});
+
 const environment = Environment.getInstance();
 
 const app = express();

From b045060f11321c85a2c5cf1ca046b1951dd4f065 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 08:46:18 +0100
Subject: [PATCH 13/30] build error fixed

---
 backend/src/features/telnet/telnet-client.ts | 45 +++++++++++++-------
 backend/src/main.ts                          |  9 +++-
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/backend/src/features/telnet/telnet-client.ts b/backend/src/features/telnet/telnet-client.ts
index 1a0b1f0..2370d54 100644
--- a/backend/src/features/telnet/telnet-client.ts
+++ b/backend/src/features/telnet/telnet-client.ts
@@ -681,37 +681,50 @@ function createTelnetConnection(
   return socket;
 }
 
+/**
+ * Extracts network-error details from an Error (code, syscall, address, port).
+ * These properties exist at runtime on Node.js network errors but are not
+ * fully covered by the NodeJS.ErrnoException type definition.
+ */
+function extractNetworkErrorDetails(
+  error: Error,
+): Record<string, unknown> {
+  const err = error as unknown as Record<string, unknown>;
+
+  return {
+    message: error.message,
+    code: err['code'],
+    syscall: err['syscall'],
+    address: err['address'],
+    port: err['port'],
+    stack: error.stack,
+  };
+}
+
 /**
  * Formats a connection error for structured logging.
  * Handles AggregateError (from Node.js happy-eyeballs DNS resolution)
  * by unpacking the individual sub-errors with their messages and stacks.
  */
 function formatConnectionError(error: Error): Record<string, unknown> {
-  if (error instanceof AggregateError) {
+  // AggregateError check via property presence (ES2020 target has no AggregateError type)
+  const errRecord = error as unknown as Record<string, unknown>;
+
+  if ('errors' in error && Array.isArray(errRecord['errors'])) {
+    const subErrors = errRecord['errors'] as Error[];
+
     return {
       errorType: 'AggregateError',
       message: error.message,
-      errors: error.errors.map((subError: Error, index: number) => ({
+      errors: subErrors.map((subError: Error, index: number) => ({
         index,
-        message: subError.message,
-        code: (subError as NodeJS.ErrnoException).code,
-        syscall: (subError as NodeJS.ErrnoException).syscall,
-        address: (subError as NodeJS.ErrnoException).address,
-        port: (subError as NodeJS.ErrnoException).port,
-        stack: subError.stack,
+        ...extractNetworkErrorDetails(subError),
       })),
     };
   }
 
-  const errno = error as NodeJS.ErrnoException;
-
   return {
     errorType: error.constructor.name,
-    message: error.message,
-    code: errno.code,
-    syscall: errno.syscall,
-    address: errno.address,
-    port: errno.port,
-    stack: error.stack,
+    ...extractNetworkErrorDetails(error),
   };
 }
diff --git a/backend/src/main.ts b/backend/src/main.ts
index 58734fe..02def53 100644
--- a/backend/src/main.ts
+++ b/backend/src/main.ts
@@ -19,10 +19,15 @@ sourceMaps.install();
 
 // Global error handlers to prevent silent crashes and improve diagnostics
 process.on('uncaughtException', (error: Error) => {
-  if (error instanceof AggregateError) {
+  // AggregateError check via property (ES2020 target has no AggregateError type)
+  const errRecord = error as unknown as Record<string, unknown>;
+
+  if ('errors' in error && Array.isArray(errRecord['errors'])) {
+    const subErrors = errRecord['errors'] as Error[];
+
     logger.error('[Process] Uncaught AggregateError:', {
       message: error.message,
-      errors: error.errors.map((subError: Error, i: number) => ({
+      errors: subErrors.map((subError: Error, i: number) => ({
         index: i,
         message: subError.message,
         code: (subError as NodeJS.ErrnoException).code,

From e01974a669f99b3b99cf06b5fd4b6f4b34fed39c Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 09:00:30 +0100
Subject: [PATCH 14/30] error and close handling revisted

---
 backend/src/features/telnet/telnet-client.ts | 23 ++++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/backend/src/features/telnet/telnet-client.ts b/backend/src/features/telnet/telnet-client.ts
index 2370d54..5fdadaf 100644
--- a/backend/src/features/telnet/telnet-client.ts
+++ b/backend/src/features/telnet/telnet-client.ts
@@ -114,16 +114,23 @@ export class TelnetClient extends EventEmitter<TelnetClientEvents> {
     // to prevent uncaught exceptions. Without this, connection failures
     // (especially AggregateError from Node.js happy-eyeballs DNS resolution)
     // crash the entire process.
+    //
+    // NOTE: telnet-stream's TelnetSocket.on() proxies non-telnet events
+    // (like 'error', 'close', 'connect') directly to the raw socket.
+    // So we ONLY register the error handler HERE on the raw socket.
+    // Do NOT add another error handler on this.telnetSocket - it would
+    // be a duplicate on the same underlying socket.
+    //
+    // We also do NOT manually emit 'close' here. The raw socket will
+    // emit 'close' naturally after 'error', and telnet-stream proxies
+    // that to telnetSocket, which triggers our handleClose() method.
     telnetConnection.on('error', (error: Error) => {
       const details = formatConnectionError(error);
 
       logger.error(
-        `[${this.socketId}] [Telnet-Client] Connection error to ${telnetHost}:${telnetPort}`,
+        `[${this.socketId}] [Telnet-Client] Socket error (${telnetHost}:${telnetPort}, tls=${useTls}): ${error.message}`,
         details,
       );
-
-      this.connected = false;
-      this.emit('close', true);
     });
 
     if (useTls) {
@@ -154,14 +161,6 @@ export class TelnetClient extends EventEmitter<TelnetClientEvents> {
       },
     );
 
-    // Also handle errors on the TelnetSocket (Transform stream) layer
-    this.telnetSocket.on('error', (error: Error) => {
-      logger.error(
-        `[${this.socketId}] [Telnet-Client] TelnetSocket stream error`,
-        formatConnectionError(error),
-      );
-    });
-
     this.optionsHandler = new Map([
       [TelnetOptions.TELOPT_CHARSET, handleCharsetOption(this.telnetSocket)],
       [TelnetOptions.TELOPT_ECHO, handleEchoOption(this.telnetSocket)],

From be4f4cfa31ee6d3f885c136edbe439e22061dfc0 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Sat, 14 Feb 2026 09:10:36 +0100
Subject: [PATCH 15/30] happy eyeball and localhost dns

---
 backend/src/features/telnet/telnet-client.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/backend/src/features/telnet/telnet-client.ts b/backend/src/features/telnet/telnet-client.ts
index 5fdadaf..22b45ac 100644
--- a/backend/src/features/telnet/telnet-client.ts
+++ b/backend/src/features/telnet/telnet-client.ts
@@ -662,17 +662,32 @@ function createTelnetConnection(
   telnetHost: string,
   telnetPort: number,
 ) {
+  // Resolve 'localhost' to '127.0.0.1' explicitly to avoid issues with
+  // Node.js 22's autoSelectFamily (happy eyeballs) on Windows.
+  // When autoSelectFamily is enabled (default since Node 20), 'localhost'
+  // is resolved via DNS which may return both ::1 (IPv6) and 127.0.0.1 (IPv4).
+  // The happy eyeballs algorithm then tries both in parallel, which can fail
+  // on Windows when the target only listens on one address family.
+  const resolvedHost =
+    telnetHost.toLowerCase() === 'localhost' ? '127.0.0.1' : telnetHost;
+
+  if (resolvedHost !== telnetHost) {
+    logger.info(
+      `[Telnet-Client] Resolved '${telnetHost}' to '${resolvedHost}' (bypassing happy eyeballs DNS)`,
+    );
+  }
+
   let socket;
 
   if (useTls) {
     socket = tls.connect({
-      host: telnetHost,
+      host: resolvedHost,
       port: telnetPort,
       rejectUnauthorized: true,
     });
   } else {
     socket = net.createConnection({
-      host: telnetHost,
+      host: resolvedHost,
       port: telnetPort,
     });
   }

From 1a3639bcda64a809bff9909c98dedd231a6b5fdf Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 13:26:10 +0100
Subject: [PATCH 16/30] some bugs, hello, support.set, ping, goodbye

---
 GMCP.md                                       |  48 +++++--
 .../gmcp-core/core-gmcp-handler.spec.ts       | 109 +++++++++++++++
 .../features/gmcp-core/core-gmcp-handler.ts   | 124 ++++++++++++++++++
 frontend/src/app/features/gmcp-core/index.ts  |   1 +
 .../features/gmcp-files/dirlist.component.ts  |   3 +-
 .../features/gmcp-files/files-gmcp-handler.ts |   6 +-
 .../features/gmcp/gmcp-bootstrap.service.ts   |   6 +
 .../src/app/features/gmcp/gmcp.service.ts     |  42 +++++-
 .../src/app/features/windows/window-config.ts |   2 +
 .../app/features/windows/window.service.ts    |   2 +-
 10 files changed, 324 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/app/features/gmcp-core/core-gmcp-handler.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-core/core-gmcp-handler.ts
 create mode 100644 frontend/src/app/features/gmcp-core/index.ts

diff --git a/GMCP.md b/GMCP.md
index 3251df2..fbc8a99 100644
--- a/GMCP.md
+++ b/GMCP.md
@@ -1,33 +1,55 @@
-# GMCP support of WEbmud3 (to be snychronized with project)
+# GMCP support of WebMud3 (to be synchronized with project)
 
 * UNItopia support: https://github.com/unitopia-de/client-plugins/wiki/GMCP
 
 In UNItopia there is now more modules and messages supported, here now following the status:
+
 ### Module Core, MUD => Client
 - [x]  Core.Ping: Fully Implemented with a button for GMCP-Ping.
-- [ ]  Core.Goodbye (Parameter "goodbye-message"): Partially Implemented. E.g. useful for recycle ressources.
+- [ ]  Core.Goodbye (Parameter "goodbye-message"): Partially Implemented. E.g. useful for recycle resources.
+
 ### Module Core, Client => MUD
 - [x]  Core.Hello: Implemented, e.g. { client: 'Webmud3', version: 'v0.0.24' }
 - [ ]  Core.Supports.Set/Add/Remove: A flexible configuration is needed in the Webmud3, so that only modules are active, which are also shown.
 - [x]  Core.Ping implemented: request ping back from server.
+
 ### Module Char: MUD => Client
-- [ ]  Char.Name  { "name": "Leo", "fullname": "Leo, der Goetterbote", "gender": "maennlich" }
-- [ ]  Char.StatusVars { "race": "Rasse", "guild": "Gilde", "rank": "Gildenrang" }
-- [ ]  Char.Status { "race": "Mensch", "guild": "Bardengilde", "rank": "Bannsaenger" }
-- [ ]  Char.Vitals { "hp": 100, "maxhp": 150, "sp": "120", "maxsp": 120, "string": "AP:100/150 ZP:120/120" }
-- [ ]  Char.Stats { "str": 85, "int": 100, "con": 80, "dex": 98 }
+- [x]  Char.Name  { "name": "Leo", "fullname": "Leo, der Goetterbote", "gender": "maennlich" }
+- [x]  Char.StatusVars { "race": "Rasse", "guild": "Gilde", "rank": "Gildenrang" }
+- [x]  Char.Status { "race": "Mensch", "guild": "Bardengilde", "rank": "Bannsaenger" }
+- [x]  Char.Vitals { "hp": 100, "maxhp": 150, "sp": "120", "maxsp": 120, "string": "AP:100/150 ZP:120/120" }
+- [x]  Char.Stats { "str": 85, "int": 100, "con": 80, "dex": 98 }
+
 ### Module Char: Client => MUD
 - [ ]  Char.Login to be implemented in UNItopia first.
+
 ### Modul Char.Items MUD => Client (Inventory)
-- [ ]  Char.Items.List { "location": "inv", "items": [ { "name": "Ein Gummigoettchen", "category": "Nahrung" } ] }
-- [ ]  Char.Items.Add { "location": "inv", "item": { "name": "Ein Gummigoettchen", "category": "Nahrung" } }
-- [ ]  Char.Items.Remove { "location": "inv", "item": { "name": "Ein Gummigoettchen", "category": "Nahrung" } }
+- [x]  Char.Items.List { "location": "inv", "items": [ { "name": "Ein Gummigoettchen", "category": "Nahrung" } ] }
+- [x]  Char.Items.Add { "location": "inv", "item": { "name": "Ein Gummigoettchen", "category": "Nahrung" } }
+- [x]  Char.Items.Remove { "location": "inv", "item": { "name": "Ein Gummigoettchen", "category": "Nahrung" } }
+
 ### Modul Char.Items: Client => MUD (Inventory)
 - [ ]  Char.Items.Inv  TODO: request on partial refresh...
+
+### Module Sound: MUD => Client
+- [x]  Sound.Url: Base URL for sound files
+- [x]  Sound.Event: Play sound file via HTML5 Audio API
+
+### Module Files: MUD => Client
+- [x]  Files.URL: Open file in editor
+- [x]  Files.DirectoryList: Show directory listing
+
+### Module Files: Client => MUD
+- [x]  Files.OpenFile: Open or save a file
+- [x]  Files.ChDir: Change directory
+- [x]  Files.fileSaved: Notify save complete
+
 ### Modul Comm
+- [ ]  Comm.Say / Comm.Soul / Comm.Tell: Not yet implemented
 
 ### Modul Numpad MUD => Client
 - [ ] Numpad.SendLevel { "prefix":"", "keys": { 'Numpad7': "nordwesten", ... }}
+
 ### Modul Numpad Client => MUD
 - [ ] Numpad.Update( "prefix":"", "key":"Numpad7", "value": "nordwesten" }
 - [ ] Numpad.GetAll
@@ -35,5 +57,7 @@ In UNItopia there is now more modules and messages supported, here now following
 
 ### Module Status:
 - [ ] Core 90%
-- [ ] Char
-- [ ]  Char.Items
+- [x] Char (Name, StatusVars, Status, Vitals, Stats)
+- [x] Char.Items (List, Add, Remove)
+- [x] Sound (Url, Event)
+- [x] Files (URL, DirectoryList, OpenFile, ChDir, fileSaved)
diff --git a/frontend/src/app/features/gmcp-core/core-gmcp-handler.spec.ts b/frontend/src/app/features/gmcp-core/core-gmcp-handler.spec.ts
new file mode 100644
index 0000000..7fde6dc
--- /dev/null
+++ b/frontend/src/app/features/gmcp-core/core-gmcp-handler.spec.ts
@@ -0,0 +1,109 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CoreGmcpHandler } from './core-gmcp-handler';
+import { GmcpService } from '../gmcp/gmcp.service';
+import { WindowService } from '../windows/window.service';
+
+describe('CoreGmcpHandler', () => {
+  let handler: CoreGmcpHandler;
+  let gmcpService: GmcpService;
+  let windowService: WindowService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CoreGmcpHandler, GmcpService, WindowService],
+    });
+
+    handler = TestBed.inject(CoreGmcpHandler);
+    gmcpService = TestBed.inject(GmcpService);
+    windowService = TestBed.inject(WindowService);
+  });
+
+  it('should have correct module metadata', () => {
+    expect(handler.moduleName).toBe('Core');
+    expect(handler.version).toBe('1');
+  });
+
+  describe('Core.Ping', () => {
+    it('should toggle pingToggle$ on Ping message', () => {
+      // Mock the sendOutgoing to avoid "not active" warning
+      jest.spyOn(gmcpService, 'sendOutgoing').mockImplementation(() => {});
+
+      expect(handler.pingToggle$.value).toBe(false);
+
+      handler.handleMessage('Ping', {});
+      expect(handler.pingToggle$.value).toBe(true);
+
+      handler.handleMessage('Ping', {});
+      expect(handler.pingToggle$.value).toBe(false);
+    });
+
+    it('should send pong back on Ping message', () => {
+      const sendSpy = jest.spyOn(gmcpService, 'sendOutgoing').mockImplementation(() => {});
+
+      handler.handleMessage('Ping', {});
+
+      expect(sendSpy).toHaveBeenCalledWith('Core', 'Ping', {});
+    });
+
+    it('should calculate latency when ping was initiated by client', () => {
+      jest.spyOn(gmcpService, 'sendOutgoing').mockImplementation(() => {});
+
+      // Simulate sending a ping
+      const now = Date.now();
+      jest.spyOn(Date, 'now')
+        .mockReturnValueOnce(now) // sendPing timestamp
+        .mockReturnValueOnce(now + 42); // handlePing timestamp
+
+      handler.sendPing();
+      handler.handleMessage('Ping', {});
+
+      expect(handler.latency$.value).toBe(42);
+    });
+
+    it('should not calculate latency for unsolicited pings', () => {
+      jest.spyOn(gmcpService, 'sendOutgoing').mockImplementation(() => {});
+
+      handler.handleMessage('Ping', {});
+
+      expect(handler.latency$.value).toBeNull();
+    });
+  });
+
+  describe('Core.Goodbye', () => {
+    it('should close all windows on Goodbye', () => {
+      const closeAllSpy = jest.spyOn(windowService, 'closeAll');
+      const resetSpy = jest.spyOn(gmcpService, 'reset');
+
+      handler.handleMessage('Goodbye', 'See you later!');
+
+      expect(closeAllSpy).toHaveBeenCalled();
+      expect(resetSpy).toHaveBeenCalled();
+    });
+
+    it('should handle Goodbye with object payload', () => {
+      const closeAllSpy = jest.spyOn(windowService, 'closeAll');
+      const resetSpy = jest.spyOn(gmcpService, 'reset');
+
+      handler.handleMessage('Goodbye', { message: 'Auf Wiedersehen!' });
+
+      expect(closeAllSpy).toHaveBeenCalled();
+      expect(resetSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('dispose', () => {
+    it('should reset state on dispose', () => {
+      jest.spyOn(gmcpService, 'sendOutgoing').mockImplementation(() => {});
+
+      // Set some state first
+      handler.handleMessage('Ping', {});
+      expect(handler.pingToggle$.value).toBe(true);
+
+      handler.dispose();
+
+      expect(handler.pingToggle$.value).toBe(false);
+      expect(handler.latency$.value).toBeNull();
+    });
+  });
+});
diff --git a/frontend/src/app/features/gmcp-core/core-gmcp-handler.ts b/frontend/src/app/features/gmcp-core/core-gmcp-handler.ts
new file mode 100644
index 0000000..eb5a8a5
--- /dev/null
+++ b/frontend/src/app/features/gmcp-core/core-gmcp-handler.ts
@@ -0,0 +1,124 @@
+import { inject, Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+import { GmcpService } from '../gmcp/gmcp.service';
+import type { GmcpModuleHandler } from '../gmcp/gmcp-module-handler';
+import { WindowService } from '../windows/window.service';
+
+/**
+ * GMCP handler for the `Core` module.
+ *
+ * Handles:
+ * - `Core.Ping`    → Keep-alive: toggle visual indicator, measure latency, send pong
+ * - `Core.Goodbye` → MUD signals logoff: reset GMCP state, close windows
+ *
+ * The Core module is special: Core.Hello and Core.Supports.Set are handled
+ * directly by GmcpService during the handshake. This handler only processes
+ * incoming Core messages from the MUD.
+ */
+@Injectable({ providedIn: 'root' })
+export class CoreGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Core';
+  readonly version = '1';
+
+  private readonly gmcpService = inject(GmcpService);
+  private readonly windowService = inject(WindowService);
+
+  /** Visual ping toggle indicator (alternates with each ping) */
+  public readonly pingToggle$ = new BehaviorSubject<boolean>(false);
+
+  /** Last measured round-trip latency in milliseconds (null = no measurement yet) */
+  public readonly latency$ = new BehaviorSubject<number | null>(null);
+
+  /** Timestamp of the last outgoing ping (for latency calculation) */
+  private lastPingSent = 0;
+
+  /**
+   * Routes incoming GMCP `Core.*` messages.
+   */
+  handleMessage(message: string, data: unknown): void {
+    switch (message) {
+      case 'Ping':
+        this.handlePing();
+        break;
+
+      case 'Goodbye':
+        this.handleGoodbye(data);
+        break;
+
+      case 'Hello':
+        // MUD's Core.Hello response is logged by GmcpService.handleIncoming()
+        break;
+
+      default:
+        console.debug(`[CoreGmcpHandler] Unknown message: Core.${message}`, data);
+    }
+  }
+
+  /**
+   * Sends a Core.Ping to the MUD and records the timestamp for latency measurement.
+   */
+  public sendPing(): void {
+    this.lastPingSent = Date.now();
+    this.gmcpService.sendOutgoing('Core', 'Ping', {});
+
+    console.debug('[CoreGmcpHandler] Ping sent.');
+  }
+
+  /**
+   * Cleanup when the Core module is unregistered.
+   */
+  dispose(): void {
+    this.pingToggle$.next(false);
+    this.latency$.next(null);
+    this.lastPingSent = 0;
+
+    console.info('[CoreGmcpHandler] Disposed.');
+  }
+
+  /**
+   * Handles `Core.Ping` from the MUD.
+   *
+   * 1. If we sent a ping, calculate round-trip latency
+   * 2. Toggle the visual ping indicator
+   * 3. Send pong (echo the ping back)
+   */
+  private handlePing(): void {
+    // Calculate latency if we initiated the ping
+    if (this.lastPingSent > 0) {
+      const latency = Date.now() - this.lastPingSent;
+      this.latency$.next(latency);
+      this.lastPingSent = 0;
+
+      console.debug(`[CoreGmcpHandler] Ping latency: ${latency}ms`);
+    }
+
+    // Toggle visual indicator (like u1's togglePing)
+    this.pingToggle$.next(!this.pingToggle$.value);
+
+    // Send pong back to MUD
+    this.gmcpService.sendOutgoing('Core', 'Ping', {});
+  }
+
+  /**
+   * Handles `Core.Goodbye` from the MUD.
+   *
+   * Performs cleanup:
+   * - Logs the goodbye message
+   * - Resets GMCP state (disposes all handlers)
+   * - Closes all open windows
+   */
+  private handleGoodbye(data: unknown): void {
+    const message = typeof data === 'string'
+      ? data
+      : (data as { message?: string })?.message ?? 'MUD meldet Abmeldung';
+
+    console.info(`[CoreGmcpHandler] Core.Goodbye received: ${message}`);
+
+    // Close all modeless windows
+    this.windowService.closeAll();
+
+    // Reset GMCP state (this will call dispose() on all handlers including us)
+    this.gmcpService.reset();
+  }
+}
diff --git a/frontend/src/app/features/gmcp-core/index.ts b/frontend/src/app/features/gmcp-core/index.ts
new file mode 100644
index 0000000..b2443fb
--- /dev/null
+++ b/frontend/src/app/features/gmcp-core/index.ts
@@ -0,0 +1 @@
+export { CoreGmcpHandler } from './core-gmcp-handler';
diff --git a/frontend/src/app/features/gmcp-files/dirlist.component.ts b/frontend/src/app/features/gmcp-files/dirlist.component.ts
index 01628e1..413cb16 100644
--- a/frontend/src/app/features/gmcp-files/dirlist.component.ts
+++ b/frontend/src/app/features/gmcp-files/dirlist.component.ts
@@ -148,8 +148,7 @@ export class DirListComponent implements OnInit, OnDestroy {
           return;
         }
 
-        if (event.action === WindowAction.Resize && event.data !== undefined) {
-          // WindowService.updateData() repurposes Resize as data-changed signal
+        if (event.action === WindowAction.DataChanged && event.data !== undefined) {
           const dirData = event.data as DirListData;
 
           if (dirData.path !== undefined && dirData.entries !== undefined) {
diff --git a/frontend/src/app/features/gmcp-files/files-gmcp-handler.ts b/frontend/src/app/features/gmcp-files/files-gmcp-handler.ts
index 7a5dd90..b3fa997 100644
--- a/frontend/src/app/features/gmcp-files/files-gmcp-handler.ts
+++ b/frontend/src/app/features/gmcp-files/files-gmcp-handler.ts
@@ -73,11 +73,11 @@ export class FilesGmcpHandler implements GmcpModuleHandler {
     const fileInfo = this.filesService.processFileUrl(payload);
 
     if (fileInfo.alreadyLoaded) {
-      // File is being re-opened for save — just trigger save URL update
+      // File is being re-opened after save request — complete the save workflow
       console.info('[FilesGmcpHandler] File re-opened for save:', payload.file);
 
-      // Run the save with the new URL
-      await this.saveFile(fileInfo.file);
+      // Complete the save via HTTP PUT (not saveFile which would re-request the URL)
+      await this.completeSave(fileInfo.file);
 
       return;
     }
diff --git a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
index 37a358e..a255b08 100644
--- a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
+++ b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
@@ -1,6 +1,7 @@
 import { inject, Injectable } from '@angular/core';
 
 import { GmcpService } from './gmcp.service';
+import { CoreGmcpHandler } from '../gmcp-core/core-gmcp-handler';
 import { CharGmcpHandler } from '../gmcp-char/char-gmcp-handler';
 import { SoundGmcpHandler } from '../gmcp-sound/sound-gmcp-handler';
 import { FilesGmcpHandler } from '../gmcp-files/files-gmcp-handler';
@@ -14,10 +15,14 @@ import { FilesGmcpHandler } from '../gmcp-files/files-gmcp-handler';
  *
  * This uses Angular DI to inject the handler singletons and registers them
  * with the GMCP routing registry so incoming messages are dispatched correctly.
+ *
+ * Registration order matters: Core must be registered first so that
+ * Core.Supports.Set in handleGmcpStart() includes all modules.
  */
 @Injectable({ providedIn: 'root' })
 export class GmcpBootstrapService {
   private readonly gmcpService = inject(GmcpService);
+  private readonly coreHandler = inject(CoreGmcpHandler);
   private readonly charHandler = inject(CharGmcpHandler);
   private readonly soundHandler = inject(SoundGmcpHandler);
   private readonly filesHandler = inject(FilesGmcpHandler);
@@ -33,6 +38,7 @@ export class GmcpBootstrapService {
       return;
     }
 
+    this.gmcpService.registerModule(this.coreHandler);
     this.gmcpService.registerModule(this.charHandler);
     this.gmcpService.registerModule(this.soundHandler);
     this.gmcpService.registerModule(this.filesHandler);
diff --git a/frontend/src/app/features/gmcp/gmcp.service.ts b/frontend/src/app/features/gmcp/gmcp.service.ts
index 194cc8e..f6028b9 100644
--- a/frontend/src/app/features/gmcp/gmcp.service.ts
+++ b/frontend/src/app/features/gmcp/gmcp.service.ts
@@ -15,6 +15,12 @@ export type GmcpSendFunction = (
   data: unknown,
 ) => void;
 
+/** Client name sent in Core.Hello handshake */
+const CLIENT_NAME = 'WebMud3';
+
+/** Client version sent in Core.Hello handshake */
+const CLIENT_VERSION = '0.7.0';
+
 /**
  * Central GMCP service for the frontend.
  *
@@ -24,6 +30,7 @@ export type GmcpSendFunction = (
  * - Provides an observable stream of all GMCP events for components
  * - Manages outgoing GMCP messages (delegates to SocketsService)
  * - Tracks active GMCP support configuration from the MUD
+ * - Sends Core.Hello and Core.Supports.Set during GMCP handshake
  *
  * Architecture:
  * ```
@@ -130,6 +137,11 @@ export class GmcpService {
     // Broadcast to all observers
     this.gmcpEvent$.next(event);
 
+    // Log MUD's Core.Hello response (contains MUD name/version)
+    if (module === 'Core' && message === 'Hello') {
+      console.info('[GMCP] MUD identifies as:', data);
+    }
+
     // Route to specific module handler
     const handler = this.moduleRegistry.get(module);
 
@@ -173,7 +185,10 @@ export class GmcpService {
 
   /**
    * Called when GMCP negotiation succeeds.
-   * Stores the support configuration and notifies subscribers.
+   * Stores the support configuration, sends the Core.Hello handshake,
+   * and notifies subscribers.
+   *
+   * Handshake sequence: Core.Hello → Core.Supports.Set → gmcpStart$
    *
    * @param gmcpSupport - The GMCP module support config from the MUD family
    */
@@ -183,9 +198,34 @@ export class GmcpService {
 
     console.info('[GMCP] GMCP started with support:', gmcpSupport);
 
+    // Step 1: Identify client to MUD
+    this.sendOutgoing('Core', 'Hello', {
+      client: CLIENT_NAME,
+      version: CLIENT_VERSION,
+    });
+
+    // Step 2: Announce supported modules
+    this.sendCoreSupportsSet();
+
+    // Step 3: Notify subscribers (handlers can now send their own messages)
     this.gmcpStart$.next(gmcpSupport);
   }
 
+  /**
+   * Sends `Core.Supports.Set` with all currently registered modules.
+   * Called during GMCP start handshake.
+   */
+  private sendCoreSupportsSet(): void {
+    const supportList = Array.from(this.moduleRegistry.values())
+      .map(handler => `${handler.moduleName} ${handler.version}`);
+
+    if (supportList.length > 0) {
+      this.sendOutgoing('Core', 'Supports.Set', supportList);
+
+      console.info('[GMCP] Core.Supports.Set sent:', supportList);
+    }
+  }
+
   /**
    * Resets GMCP state (e.g. on disconnect).
    * Disposes all registered handlers and clears the registry.
diff --git a/frontend/src/app/features/windows/window-config.ts b/frontend/src/app/features/windows/window-config.ts
index dd18eb2..1e7a401 100644
--- a/frontend/src/app/features/windows/window-config.ts
+++ b/frontend/src/app/features/windows/window-config.ts
@@ -16,6 +16,8 @@ export enum WindowAction {
   WinError = 'winError',
   /** Window was resized by the user */
   Resize = 'resize',
+  /** Window data payload was updated (e.g. new directory listing) */
+  DataChanged = 'dataChanged',
   /** Parent window was closed → children should clean up */
   CloseParent = 'closeParent',
 }
diff --git a/frontend/src/app/features/windows/window.service.ts b/frontend/src/app/features/windows/window.service.ts
index 176ff17..58dd633 100644
--- a/frontend/src/app/features/windows/window.service.ts
+++ b/frontend/src/app/features/windows/window.service.ts
@@ -206,7 +206,7 @@ export class WindowService {
 
     // Notify the content component about the data update
     this.outgoingEvents$.next({
-      action: WindowAction.Resize, // repurpose as "data changed" signal
+      action: WindowAction.DataChanged,
       windowId,
       data,
     });

From 50be7ec4fc21d3aa49fdb7c4db0f033a3ac24da1 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 13:34:38 +0100
Subject: [PATCH 17/30] menubar and color settings

---
 frontend/src/app/app.component.html           |   1 +
 frontend/src/app/app.component.ts             |   3 +-
 .../mud-client/mud-client.component.ts        |  11 +-
 frontend/src/app/features/menu/index.ts       |   4 +
 .../app/features/menu/menu-bar.component.scss |  44 +++
 .../app/features/menu/menu-bar.component.ts   | 173 ++++++++++++
 .../features/menu/menu-bootstrap.service.ts   | 169 +++++++++++
 .../menu/menu-dropdown.component.scss         |  83 ++++++
 .../features/menu/menu-dropdown.component.ts  | 162 +++++++++++
 frontend/src/app/features/menu/menu-item.ts   |  34 +++
 .../app/features/menu/menu.service.spec.ts    | 131 +++++++++
 .../src/app/features/menu/menu.service.ts     | 162 +++++++++++
 .../settings/color-settings.component.scss    |  72 +++++
 .../settings/color-settings.component.ts      | 114 ++++++++
 .../settings/color-settings.service.spec.ts   | 117 ++++++++
 .../settings/color-settings.service.ts        | 263 ++++++++++++++++++
 frontend/src/app/features/settings/index.ts   |   3 +
 .../windows/window-container.component.ts     |   6 +-
 frontend/src/main.ts                          |   6 +
 19 files changed, 1555 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/app/features/menu/index.ts
 create mode 100644 frontend/src/app/features/menu/menu-bar.component.scss
 create mode 100644 frontend/src/app/features/menu/menu-bar.component.ts
 create mode 100644 frontend/src/app/features/menu/menu-bootstrap.service.ts
 create mode 100644 frontend/src/app/features/menu/menu-dropdown.component.scss
 create mode 100644 frontend/src/app/features/menu/menu-dropdown.component.ts
 create mode 100644 frontend/src/app/features/menu/menu-item.ts
 create mode 100644 frontend/src/app/features/menu/menu.service.spec.ts
 create mode 100644 frontend/src/app/features/menu/menu.service.ts
 create mode 100644 frontend/src/app/features/settings/color-settings.component.scss
 create mode 100644 frontend/src/app/features/settings/color-settings.component.ts
 create mode 100644 frontend/src/app/features/settings/color-settings.service.spec.ts
 create mode 100644 frontend/src/app/features/settings/color-settings.service.ts
 create mode 100644 frontend/src/app/features/settings/index.ts

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 3d10c52..3654e96 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,3 +1,4 @@
+<app-menu-bar></app-menu-bar>
 <app-mud-client></app-mud-client>
 <app-char-statusbar></app-char-statusbar>
 <app-window-container></app-window-container>
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 885433c..8d216bb 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
 import { MudClientComponent } from '@webmud3/frontend/core/mud/components/mud-client/mud-client.component';
 import { CharStatusBarComponent } from '@webmud3/frontend/features/gmcp-char';
+import { MenuBarComponent } from '@webmud3/frontend/features/menu';
 import { WindowContainerComponent } from '@webmud3/frontend/features/windows';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  imports: [MudClientComponent, CharStatusBarComponent, WindowContainerComponent],
+  imports: [MenuBarComponent, MudClientComponent, CharStatusBarComponent, WindowContainerComponent],
   standalone: true,
 })
 export class AppComponent {}
diff --git a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
index 4ac544c..c50a727 100644
--- a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
+++ b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
@@ -24,6 +24,7 @@ import {
   MudPromptContext,
   CTRL,
 } from '../../../../features/terminal';
+import { ColorSettingsService } from '../../../../features/settings/color-settings.service';
 
 /**
  * Component-internal shape that bundles the mutable Mud client flags.
@@ -50,6 +51,7 @@ type MudClientState = {
 export class MudClientComponent implements AfterViewInit, OnDestroy {
   private readonly mudService = inject(MudService);
   private readonly outputHistoryService = inject(OutputHistoryService);
+  private readonly colorSettingsService = inject(ColorSettingsService);
 
   private readonly fontSizeBreakpoints = [
     { minWidth: 0, fontSize: 8.5 },
@@ -91,6 +93,7 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
 
   private showEchoSubscription?: Subscription;
   private linemodeSubscription?: Subscription;
+  private colorSettingsSubscription?: Subscription;
   private pasteHandler?: (event: ClipboardEvent) => void;
   private state: MudClientState = {
     isEditMode: true,
@@ -124,7 +127,7 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
   constructor() {
     this.terminal = new Terminal({
       fontFamily: 'JetBrainsMono, monospace',
-      theme: { background: '#000', foreground: '#ccc' },
+      theme: this.colorSettingsService.getXtermTheme(),
       disableStdin: false,
       screenReaderMode: false,
     });
@@ -207,6 +210,11 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
       this.setLinemode(state),
     );
 
+    // Apply color theme changes live
+    this.colorSettingsSubscription = this.colorSettingsService.settings$.subscribe(() => {
+      this.terminal.options.theme = this.colorSettingsService.getXtermTheme();
+    });
+
     this.resizeObs.observe(this.terminalRef.nativeElement);
     this.setState({ terminalReady: true });
 
@@ -248,6 +256,7 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
     this.terminalDisposables.forEach((disposable) => disposable.dispose());
     this.showEchoSubscription?.unsubscribe();
     this.linemodeSubscription?.unsubscribe();
+    this.colorSettingsSubscription?.unsubscribe();
 
     this.terminalClipboardAddon.dispose();
     this.terminalAttachAddon?.dispose();
diff --git a/frontend/src/app/features/menu/index.ts b/frontend/src/app/features/menu/index.ts
new file mode 100644
index 0000000..e68b8e3
--- /dev/null
+++ b/frontend/src/app/features/menu/index.ts
@@ -0,0 +1,4 @@
+export { MenuBarComponent } from './menu-bar.component';
+export { MenuDropdownComponent } from './menu-dropdown.component';
+export { MenuService } from './menu.service';
+export type { MenuItem, MenuEvent } from './menu-item';
diff --git a/frontend/src/app/features/menu/menu-bar.component.scss b/frontend/src/app/features/menu/menu-bar.component.scss
new file mode 100644
index 0000000..28633d0
--- /dev/null
+++ b/frontend/src/app/features/menu/menu-bar.component.scss
@@ -0,0 +1,44 @@
+.menu-bar {
+  display: flex;
+  align-items: center;
+  background: #181825;
+  border-bottom: 1px solid #313244;
+  padding: 0 4px;
+  height: 30px;
+  flex-shrink: 0;
+  font-family: sans-serif;
+  font-size: 13px;
+  user-select: none;
+  z-index: 9999;
+}
+
+.menu-bar-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 10px;
+  color: #cdd6f4;
+  cursor: pointer;
+  border-radius: 4px;
+  position: relative;
+  height: 100%;
+  outline: none;
+  white-space: nowrap;
+
+  &:hover,
+  &.active {
+    background: #313244;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #89b4fa;
+    outline-offset: -2px;
+  }
+
+  // Position dropdown below the menu bar item
+  app-menu-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 2px;
+  }
+}
diff --git a/frontend/src/app/features/menu/menu-bar.component.ts b/frontend/src/app/features/menu/menu-bar.component.ts
new file mode 100644
index 0000000..4e433cb
--- /dev/null
+++ b/frontend/src/app/features/menu/menu-bar.component.ts
@@ -0,0 +1,173 @@
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  inject,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { Subscription } from 'rxjs';
+
+import { MenuService } from './menu.service';
+import { MenuDropdownComponent } from './menu-dropdown.component';
+import type { MenuItem, MenuEvent } from './menu-item';
+
+/**
+ * Horizontal menu bar at the top of the application.
+ *
+ * Features:
+ * - Renders top-level menu items horizontally
+ * - Click to open dropdown, click again or Escape to close
+ * - Keyboard navigation: Arrow keys, Enter, Escape
+ * - ARIA: role="menubar", role="menuitem", aria-expanded, aria-haspopup
+ * - Catppuccin Mocha color scheme (consistent with WindowComponent)
+ * - Click-outside closes any open dropdown
+ */
+@Component({
+  selector: 'app-menu-bar',
+  standalone: true,
+  imports: [AsyncPipe, MenuDropdownComponent],
+  template: `
+    <nav class="menu-bar" role="menubar" aria-label="Hauptmenü">
+      @for (item of menuService.items$ | async; track item.id) {
+        @if (item.visible !== false) {
+          <div
+            class="menu-bar-item"
+            role="menuitem"
+            [class.active]="openMenuId === item.id"
+            [attr.aria-haspopup]="item.children && item.children.length > 0 ? 'true' : null"
+            [attr.aria-expanded]="openMenuId === item.id ? 'true' : 'false'"
+            [tabindex]="0"
+            (click)="onTopItemClick($event, item)"
+            (keydown)="onTopItemKeydown($event, item)"
+            (mouseenter)="onTopItemHover(item)"
+          >
+            {{ item.label }}
+
+            @if (openMenuId === item.id && item.children && item.children.length > 0) {
+              <app-menu-dropdown
+                [items]="item.children"
+                [ariaLabel]="item.label"
+                (itemSelected)="onItemSelected($event)"
+                (closeRequest)="closeMenu()"
+              ></app-menu-dropdown>
+            }
+          </div>
+        }
+      }
+    </nav>
+  `,
+  styleUrls: ['./menu-bar.component.scss'],
+})
+export class MenuBarComponent {
+  protected readonly menuService = inject(MenuService);
+  private readonly elementRef = inject(ElementRef);
+
+  /** ID of the currently open top-level menu item */
+  openMenuId: string | null = null;
+
+  /**
+   * Close dropdown when clicking outside the menu bar.
+   */
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (this.openMenuId === null) {
+      return;
+    }
+
+    const clickedInside = this.elementRef.nativeElement.contains(event.target as Node);
+
+    if (!clickedInside) {
+      this.closeMenu();
+    }
+  }
+
+  /**
+   * Close dropdown on Escape key.
+   */
+  @HostListener('document:keydown.escape')
+  onEscapeKey(): void {
+    this.closeMenu();
+  }
+
+  onTopItemClick(event: Event, item: MenuItem): void {
+    event.stopPropagation();
+
+    if (item.children !== undefined && item.children.length > 0) {
+      // Toggle dropdown
+      this.openMenuId = this.openMenuId === item.id ? null : item.id;
+    } else if (item.command !== undefined) {
+      item.command({ item, originalEvent: event });
+      this.closeMenu();
+    }
+  }
+
+  onTopItemKeydown(event: KeyboardEvent, item: MenuItem): void {
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+      case 'ArrowDown':
+        event.preventDefault();
+        this.openMenuId = item.id;
+        break;
+
+      case 'ArrowRight': {
+        event.preventDefault();
+        const items = this.menuService.getItems().filter(i => i.visible !== false);
+        const currentIndex = items.findIndex(i => i.id === item.id);
+        const nextItem = items[(currentIndex + 1) % items.length];
+
+        if (nextItem !== undefined) {
+          this.openMenuId = this.openMenuId !== null ? nextItem.id : null;
+          this.focusTopItem(nextItem.id);
+        }
+        break;
+      }
+
+      case 'ArrowLeft': {
+        event.preventDefault();
+        const items = this.menuService.getItems().filter(i => i.visible !== false);
+        const currentIndex = items.findIndex(i => i.id === item.id);
+        const prevItem = items[(currentIndex - 1 + items.length) % items.length];
+
+        if (prevItem !== undefined) {
+          this.openMenuId = this.openMenuId !== null ? prevItem.id : null;
+          this.focusTopItem(prevItem.id);
+        }
+        break;
+      }
+
+      case 'Escape':
+        event.preventDefault();
+        this.closeMenu();
+        break;
+    }
+  }
+
+  onTopItemHover(item: MenuItem): void {
+    // If a menu is already open, switch to the hovered item
+    if (this.openMenuId !== null) {
+      this.openMenuId = item.id;
+    }
+  }
+
+  onItemSelected(_event: MenuEvent): void {
+    this.closeMenu();
+  }
+
+  closeMenu(): void {
+    this.openMenuId = null;
+  }
+
+  private focusTopItem(itemId: string): void {
+    const items = this.elementRef.nativeElement.querySelectorAll('.menu-bar-item');
+
+    for (const el of items) {
+      if (el.textContent?.trim() === this.menuService.getItems().find(i => i.id === itemId)?.label) {
+        (el as HTMLElement).focus();
+        break;
+      }
+    }
+  }
+}
diff --git a/frontend/src/app/features/menu/menu-bootstrap.service.ts b/frontend/src/app/features/menu/menu-bootstrap.service.ts
new file mode 100644
index 0000000..0a9e637
--- /dev/null
+++ b/frontend/src/app/features/menu/menu-bootstrap.service.ts
@@ -0,0 +1,169 @@
+import { inject, Injectable } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { MenuService } from './menu.service';
+import { GmcpService } from '../gmcp/gmcp.service';
+import { CoreGmcpHandler } from '../gmcp-core/core-gmcp-handler';
+import { WindowService } from '../windows/window.service';
+import { ColorSettingsService } from '../settings/color-settings.service';
+import type { MenuItem } from './menu-item';
+
+/**
+ * Initializes the application menu structure with default items.
+ *
+ * Called during APP_INITIALIZER. Sets up:
+ * - "Ansicht" menu (Scroll-Lock, future color settings)
+ * - "GMCP" menu (refreshed from GMCP module handlers)
+ * - "Fenster" menu (list of open windows)
+ *
+ * Listens to GMCP start events to refresh the GMCP menu
+ * and to window changes to update the window list.
+ */
+@Injectable({ providedIn: 'root' })
+export class MenuBootstrapService {
+  private readonly menuService = inject(MenuService);
+  private readonly gmcpService = inject(GmcpService);
+  private readonly coreHandler = inject(CoreGmcpHandler);
+  private readonly windowService = inject(WindowService);
+  private readonly colorSettingsService = inject(ColorSettingsService);
+
+  private initialized = false;
+  private readonly subscriptions: Subscription[] = [];
+
+  /**
+   * Sets up the initial menu structure.
+   * Safe to call multiple times — only runs once.
+   */
+  public bootstrap(): void {
+    if (this.initialized) {
+      return;
+    }
+
+    this.initializeMenu();
+    this.setupGmcpListener();
+    this.setupWindowListener();
+
+    this.initialized = true;
+
+    console.info('[MenuBootstrap] Menu initialized.');
+  }
+
+  private initializeMenu(): void {
+    const items: MenuItem[] = [
+      {
+        id: 'view',
+        label: 'Ansicht',
+        children: [
+          {
+            id: 'view-colors',
+            label: 'Farbeinstellungen…',
+            command: () => this.openColorSettings(),
+          },
+          {
+            id: 'view-sep1',
+            label: '',
+            separator: true,
+          },
+          {
+            id: 'view-ping',
+            label: 'Ping senden',
+            command: () => this.coreHandler.sendPing(),
+          },
+        ],
+      },
+      {
+        id: 'gmcp',
+        label: 'GMCP',
+        children: [],
+      },
+      {
+        id: 'windows',
+        label: 'Fenster',
+        children: [
+          {
+            id: 'windows-close-all',
+            label: 'Alle schließen',
+            command: () => this.windowService.closeAll(),
+          },
+        ],
+      },
+    ];
+
+    this.menuService.setItems(items);
+  }
+
+  /** Window ID of the color settings dialog (only one at a time) */
+  private colorSettingsWindowId: string | null = null;
+
+  /**
+   * Opens the color settings dialog as a modeless window.
+   */
+  private openColorSettings(): void {
+    if (this.colorSettingsWindowId !== null) {
+      this.windowService.focus(this.colorSettingsWindowId);
+      return;
+    }
+
+    this.colorSettingsWindowId = this.windowService.open({
+      title: 'Farbeinstellungen',
+      componentType: 'ColorSettingsComponent',
+      size: { width: 300, height: 260 },
+    });
+
+    const sub = this.windowService.outgoingEvents$.subscribe(event => {
+      if (event.windowId === this.colorSettingsWindowId && event.action === 'closeParent') {
+        this.colorSettingsWindowId = null;
+        sub.unsubscribe();
+      }
+    });
+
+    this.subscriptions.push(sub);
+  }
+
+  /**
+   * When GMCP starts, refresh the GMCP menu with handler contributions.
+   */
+  private setupGmcpListener(): void {
+    const sub = this.gmcpService.gmcpStart$.subscribe(() => {
+      this.menuService.refreshGmcpMenuItems();
+    });
+
+    this.subscriptions.push(sub);
+  }
+
+  /**
+   * Update the "Fenster" menu whenever the window list changes.
+   */
+  private setupWindowListener(): void {
+    const sub = this.windowService.windows$.subscribe(windows => {
+      const windowChildren: MenuItem[] = [
+        {
+          id: 'windows-close-all',
+          label: 'Alle schließen',
+          disabled: windows.length === 0,
+          command: () => this.windowService.closeAll(),
+        },
+      ];
+
+      if (windows.length > 0) {
+        windowChildren.push({ id: 'windows-sep', label: '', separator: true });
+
+        for (const win of windows) {
+          windowChildren.push({
+            id: `window-${win.windowId}`,
+            label: win.title,
+            command: () => this.windowService.focus(win.windowId),
+          });
+        }
+      }
+
+      this.menuService.registerItem(null, {
+        id: 'windows',
+        label: 'Fenster',
+        children: windowChildren,
+      });
+    });
+
+    this.subscriptions.push(sub);
+  }
+}
diff --git a/frontend/src/app/features/menu/menu-dropdown.component.scss b/frontend/src/app/features/menu/menu-dropdown.component.scss
new file mode 100644
index 0000000..dd7053f
--- /dev/null
+++ b/frontend/src/app/features/menu/menu-dropdown.component.scss
@@ -0,0 +1,83 @@
+:host {
+  display: block;
+}
+
+.menu-dropdown {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  background: #1e1e2e;
+  border: 1px solid #45475a;
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  min-width: 180px;
+  z-index: 10000;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  color: #cdd6f4;
+  font-size: 13px;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  outline: none;
+
+  &:hover,
+  &:focus-visible {
+    background: #313244;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #89b4fa;
+    outline-offset: -2px;
+  }
+
+  &.disabled {
+    color: #585b70;
+    cursor: default;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  &.checked {
+    color: #a6e3a1;
+  }
+}
+
+.menu-item-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.menu-check {
+  display: inline-block;
+  width: 14px;
+  text-align: center;
+  font-size: 11px;
+}
+
+.menu-arrow {
+  margin-left: 12px;
+  font-size: 10px;
+  color: #585b70;
+}
+
+.menu-separator {
+  height: 1px;
+  margin: 4px 8px;
+  background: #45475a;
+}
+
+// Nested submenu positioning
+:host(.submenu) {
+  position: absolute;
+  left: 100%;
+  top: -4px;
+}
diff --git a/frontend/src/app/features/menu/menu-dropdown.component.ts b/frontend/src/app/features/menu/menu-dropdown.component.ts
new file mode 100644
index 0000000..fa81770
--- /dev/null
+++ b/frontend/src/app/features/menu/menu-dropdown.component.ts
@@ -0,0 +1,162 @@
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+
+import type { MenuItem, MenuEvent } from './menu-item';
+
+/**
+ * A dropdown panel for displaying submenu items.
+ *
+ * Features:
+ * - Renders a vertical list of MenuItem entries
+ * - Supports nested submenus (hover to open)
+ * - Keyboard navigation: ArrowUp/Down, Enter, Escape
+ * - ARIA: role="menu", role="menuitem"
+ * - Click-outside closes the dropdown
+ */
+@Component({
+  selector: 'app-menu-dropdown',
+  standalone: true,
+  template: `
+    <ul class="menu-dropdown" role="menu" [attr.aria-label]="ariaLabel">
+      @for (item of items; track item.id) {
+        @if (item.separator) {
+          <li class="menu-separator" role="separator"></li>
+        } @else if (item.visible !== false) {
+          <li
+            class="menu-item"
+            role="menuitem"
+            [class.disabled]="item.disabled"
+            [class.has-children]="item.children && item.children.length > 0"
+            [class.checked]="item.checked"
+            [attr.aria-disabled]="item.disabled || null"
+            [attr.aria-haspopup]="item.children && item.children.length > 0 ? 'true' : null"
+            [attr.aria-expanded]="activeSubmenuId === item.id ? 'true' : null"
+            [tabindex]="item.disabled ? -1 : 0"
+            (click)="onItemClick($event, item)"
+            (keydown)="onItemKeydown($event, item)"
+            (mouseenter)="onItemHover(item)"
+            (mouseleave)="onItemLeave()"
+          >
+            <span class="menu-item-label">
+              @if (item.checked !== undefined) {
+                <span class="menu-check" aria-hidden="true">{{ item.checked ? '✓' : '' }}</span>
+              }
+              {{ item.label }}
+            </span>
+            @if (item.children && item.children.length > 0) {
+              <span class="menu-arrow" aria-hidden="true">▸</span>
+            }
+
+            @if (activeSubmenuId === item.id && item.children) {
+              <app-menu-dropdown
+                class="submenu"
+                [items]="item.children"
+                [ariaLabel]="item.label"
+                (itemSelected)="itemSelected.emit($event)"
+                (closeRequest)="activeSubmenuId = null"
+              ></app-menu-dropdown>
+            }
+          </li>
+        }
+      }
+    </ul>
+  `,
+  styleUrls: ['./menu-dropdown.component.scss'],
+})
+export class MenuDropdownComponent {
+  @Input() items: MenuItem[] = [];
+  @Input() ariaLabel = 'Untermenü';
+  @Output() itemSelected = new EventEmitter<MenuEvent>();
+  @Output() closeRequest = new EventEmitter<void>();
+
+  /** ID of the currently open submenu (hover-triggered) */
+  activeSubmenuId: string | null = null;
+
+  private submenuTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  onItemClick(event: Event, item: MenuItem): void {
+    if (item.disabled) {
+      return;
+    }
+
+    // If item has children, toggle submenu
+    if (item.children !== undefined && item.children.length > 0) {
+      this.activeSubmenuId = this.activeSubmenuId === item.id ? null : item.id;
+      return;
+    }
+
+    // Execute command
+    if (item.command !== undefined) {
+      item.command({ item, originalEvent: event });
+    }
+
+    this.itemSelected.emit({ item, originalEvent: event });
+  }
+
+  onItemKeydown(event: KeyboardEvent, item: MenuItem): void {
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        this.onItemClick(event, item);
+        break;
+
+      case 'Escape':
+        event.preventDefault();
+        this.closeRequest.emit();
+        break;
+
+      case 'ArrowDown': {
+        event.preventDefault();
+        const next = (event.target as HTMLElement).nextElementSibling as HTMLElement | null;
+        next?.focus();
+        break;
+      }
+
+      case 'ArrowUp': {
+        event.preventDefault();
+        const prev = (event.target as HTMLElement).previousElementSibling as HTMLElement | null;
+        prev?.focus();
+        break;
+      }
+
+      case 'ArrowRight':
+        if (item.children !== undefined && item.children.length > 0) {
+          event.preventDefault();
+          this.activeSubmenuId = item.id;
+        }
+        break;
+
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.closeRequest.emit();
+        break;
+    }
+  }
+
+  onItemHover(item: MenuItem): void {
+    if (this.submenuTimeout !== null) {
+      clearTimeout(this.submenuTimeout);
+    }
+
+    if (item.children !== undefined && item.children.length > 0) {
+      this.submenuTimeout = setTimeout(() => {
+        this.activeSubmenuId = item.id;
+      }, 150);
+    } else {
+      this.activeSubmenuId = null;
+    }
+  }
+
+  onItemLeave(): void {
+    if (this.submenuTimeout !== null) {
+      clearTimeout(this.submenuTimeout);
+      this.submenuTimeout = null;
+    }
+  }
+}
diff --git a/frontend/src/app/features/menu/menu-item.ts b/frontend/src/app/features/menu/menu-item.ts
new file mode 100644
index 0000000..73331ca
--- /dev/null
+++ b/frontend/src/app/features/menu/menu-item.ts
@@ -0,0 +1,34 @@
+/**
+ * Represents a single item in the application menu hierarchy.
+ * Supports up to 3 levels of nesting (menubar → dropdown → submenu).
+ */
+export interface MenuItem {
+  /** Unique identifier for this menu item */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Icon identifier (optional, for future use) */
+  icon?: string;
+  /** Whether the item is disabled (greyed out) */
+  disabled?: boolean;
+  /** Whether the item is visible */
+  visible?: boolean;
+  /** Whether this is a visual separator line */
+  separator?: boolean;
+  /** Whether the item is in a checked/toggled state */
+  checked?: boolean;
+  /** Action to execute when clicked */
+  command?: (event: MenuEvent) => void;
+  /** Child items (submenu) */
+  children?: MenuItem[];
+}
+
+/**
+ * Event payload passed to MenuItem command callbacks.
+ */
+export interface MenuEvent {
+  /** The menu item that was activated */
+  item: MenuItem;
+  /** The original DOM event (if available) */
+  originalEvent?: Event;
+}
diff --git a/frontend/src/app/features/menu/menu.service.spec.ts b/frontend/src/app/features/menu/menu.service.spec.ts
new file mode 100644
index 0000000..3a0cbcc
--- /dev/null
+++ b/frontend/src/app/features/menu/menu.service.spec.ts
@@ -0,0 +1,131 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MenuService } from './menu.service';
+import { GmcpService } from '../gmcp/gmcp.service';
+import type { MenuItem } from './menu-item';
+
+describe('MenuService', () => {
+  let service: MenuService;
+  let gmcpService: GmcpService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MenuService, GmcpService],
+    });
+
+    service = TestBed.inject(MenuService);
+    gmcpService = TestBed.inject(GmcpService);
+  });
+
+  it('should start with empty items', () => {
+    expect(service.getItems()).toEqual([]);
+  });
+
+  describe('setItems', () => {
+    it('should replace all items', () => {
+      const items: MenuItem[] = [
+        { id: 'file', label: 'Datei' },
+        { id: 'edit', label: 'Bearbeiten' },
+      ];
+
+      service.setItems(items);
+
+      expect(service.getItems()).toEqual(items);
+    });
+  });
+
+  describe('registerItem', () => {
+    it('should add a top-level item when parentId is null', () => {
+      service.registerItem(null, { id: 'file', label: 'Datei' });
+
+      expect(service.getItems()).toHaveLength(1);
+      expect(service.getItems()[0].label).toBe('Datei');
+    });
+
+    it('should replace an existing item with the same id', () => {
+      service.registerItem(null, { id: 'file', label: 'Datei' });
+      service.registerItem(null, { id: 'file', label: 'Datei v2' });
+
+      expect(service.getItems()).toHaveLength(1);
+      expect(service.getItems()[0].label).toBe('Datei v2');
+    });
+
+    it('should add a child item to a parent', () => {
+      service.registerItem(null, { id: 'file', label: 'Datei', children: [] });
+      service.registerItem('file', { id: 'new', label: 'Neu' });
+
+      const fileMenu = service.getItems()[0];
+
+      expect(fileMenu.children).toHaveLength(1);
+      expect(fileMenu.children![0].label).toBe('Neu');
+    });
+  });
+
+  describe('removeItem', () => {
+    it('should remove a top-level item', () => {
+      service.setItems([
+        { id: 'file', label: 'Datei' },
+        { id: 'edit', label: 'Bearbeiten' },
+      ]);
+
+      service.removeItem('file');
+
+      expect(service.getItems()).toHaveLength(1);
+      expect(service.getItems()[0].id).toBe('edit');
+    });
+
+    it('should remove a nested item', () => {
+      service.setItems([
+        {
+          id: 'file', label: 'Datei', children: [
+            { id: 'new', label: 'Neu' },
+            { id: 'open', label: 'Öffnen' },
+          ],
+        },
+      ]);
+
+      service.removeItem('new');
+
+      expect(service.getItems()[0].children).toHaveLength(1);
+      expect(service.getItems()[0].children![0].id).toBe('open');
+    });
+  });
+
+  describe('items$ observable', () => {
+    it('should emit when items change', () => {
+      const emissions: MenuItem[][] = [];
+      const sub = service.items$.subscribe(items => emissions.push(items));
+
+      service.registerItem(null, { id: 'test', label: 'Test' });
+
+      expect(emissions.length).toBe(2); // Initial [] + after registerItem
+      expect(emissions[1]).toHaveLength(1);
+
+      sub.unsubscribe();
+    });
+  });
+
+  describe('refreshGmcpMenuItems', () => {
+    it('should collect items from GMCP handlers', () => {
+      const mockHandler = {
+        moduleName: 'Sound',
+        version: '1',
+        handleMessage: jest.fn(),
+        getMenuItems: () => [{
+          label: 'Vertonung',
+          checked: true,
+          action: jest.fn(),
+        }],
+      };
+
+      gmcpService.registerModule(mockHandler);
+      service.refreshGmcpMenuItems();
+
+      const gmcpMenu = service.getItems().find(i => i.id === 'gmcp');
+
+      expect(gmcpMenu).toBeDefined();
+      expect(gmcpMenu!.children).toHaveLength(1);
+      expect(gmcpMenu!.children![0].label).toBe('Vertonung');
+    });
+  });
+});
diff --git a/frontend/src/app/features/menu/menu.service.ts b/frontend/src/app/features/menu/menu.service.ts
new file mode 100644
index 0000000..b193aaf
--- /dev/null
+++ b/frontend/src/app/features/menu/menu.service.ts
@@ -0,0 +1,162 @@
+import { inject, Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import type { MenuItem } from './menu-item';
+import type { GmcpModuleHandler } from '../gmcp/gmcp-module-handler';
+import { GmcpService } from '../gmcp/gmcp.service';
+
+/**
+ * Central menu service managing the application's hierarchical menu structure.
+ *
+ * Responsibilities:
+ * - Maintains a reactive list of top-level menu items
+ * - Supports dynamic registration/removal of menu items (by GMCP modules, etc.)
+ * - Collects menu contributions from registered GMCP module handlers
+ * - Provides observable stream for the MenuBarComponent to render
+ *
+ * Menu structure: 3 levels max (menubar → dropdown → submenu).
+ */
+@Injectable({ providedIn: 'root' })
+export class MenuService {
+  private readonly gmcpService = inject(GmcpService);
+
+  /** Internal state of all top-level menu items */
+  private readonly menuItems = new BehaviorSubject<MenuItem[]>([]);
+
+  /** Observable stream of the current menu structure */
+  public readonly items$: Observable<MenuItem[]> = this.menuItems.asObservable();
+
+  /**
+   * Replaces the entire menu structure.
+   */
+  public setItems(items: MenuItem[]): void {
+    this.menuItems.next(items);
+  }
+
+  /**
+   * Returns the current snapshot of menu items.
+   */
+  public getItems(): MenuItem[] {
+    return this.menuItems.value;
+  }
+
+  /**
+   * Registers or replaces a top-level menu item by id.
+   * If an item with the same id exists, it is replaced.
+   * If parentId is provided, the item is added as a child of that parent.
+   */
+  public registerItem(parentId: string | null, item: MenuItem): void {
+    const items = [...this.menuItems.value];
+
+    if (parentId === null) {
+      const existingIndex = items.findIndex(i => i.id === item.id);
+
+      if (existingIndex >= 0) {
+        items[existingIndex] = item;
+      } else {
+        items.push(item);
+      }
+
+      this.menuItems.next(items);
+    } else {
+      const updated = this.addToParent(items, parentId, item);
+      this.menuItems.next(updated);
+    }
+  }
+
+  /**
+   * Removes a menu item by id (searches recursively).
+   */
+  public removeItem(itemId: string): void {
+    const items = this.removeFromTree(this.menuItems.value, itemId);
+    this.menuItems.next(items);
+  }
+
+  /**
+   * Rebuilds the dynamic parts of the menu by collecting contributions
+   * from all registered GMCP module handlers.
+   *
+   * Call this after GMCP state changes (e.g. module enabled/disabled).
+   */
+  public refreshGmcpMenuItems(): void {
+    const items = [...this.menuItems.value];
+    let gmcpMenu = items.find(i => i.id === 'gmcp');
+
+    if (gmcpMenu === undefined) {
+      gmcpMenu = { id: 'gmcp', label: 'GMCP', children: [] };
+      items.push(gmcpMenu);
+    }
+
+    // Collect menu items from all registered GMCP handlers
+    const gmcpChildren: MenuItem[] = [];
+    const modules = this.gmcpService.getRegisteredModules();
+
+    for (const [, handler] of modules) {
+      const handlerItems = handler.getMenuItems?.();
+
+      if (handlerItems !== undefined && handlerItems.length > 0) {
+        for (const gmcpItem of handlerItems) {
+          gmcpChildren.push({
+            id: `gmcp-${handler.moduleName}-${gmcpItem.label}`,
+            label: gmcpItem.label,
+            icon: gmcpItem.icon,
+            checked: gmcpItem.checked,
+            command: () => gmcpItem.action(),
+          });
+        }
+      }
+    }
+
+    gmcpMenu.children = gmcpChildren;
+
+    // Update the reference in the items array
+    const gmcpIndex = items.findIndex(i => i.id === 'gmcp');
+
+    if (gmcpIndex >= 0) {
+      items[gmcpIndex] = { ...gmcpMenu };
+    }
+
+    this.menuItems.next(items);
+  }
+
+  /**
+   * Recursively adds an item as a child of the specified parent.
+   */
+  private addToParent(items: MenuItem[], parentId: string, newItem: MenuItem): MenuItem[] {
+    return items.map(item => {
+      if (item.id === parentId) {
+        const children = [...(item.children ?? [])];
+        const existingIndex = children.findIndex(c => c.id === newItem.id);
+
+        if (existingIndex >= 0) {
+          children[existingIndex] = newItem;
+        } else {
+          children.push(newItem);
+        }
+
+        return { ...item, children };
+      }
+
+      if (item.children !== undefined) {
+        return { ...item, children: this.addToParent(item.children, parentId, newItem) };
+      }
+
+      return item;
+    });
+  }
+
+  /**
+   * Recursively removes an item by id from the tree.
+   */
+  private removeFromTree(items: MenuItem[], itemId: string): MenuItem[] {
+    return items
+      .filter(item => item.id !== itemId)
+      .map(item => {
+        if (item.children !== undefined) {
+          return { ...item, children: this.removeFromTree(item.children, itemId) };
+        }
+
+        return item;
+      });
+  }
+}
diff --git a/frontend/src/app/features/settings/color-settings.component.scss b/frontend/src/app/features/settings/color-settings.component.scss
new file mode 100644
index 0000000..0cf14f6
--- /dev/null
+++ b/frontend/src/app/features/settings/color-settings.component.scss
@@ -0,0 +1,72 @@
+.color-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 4px;
+  font-family: sans-serif;
+  font-size: 13px;
+  color: #cdd6f4;
+}
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+
+  label {
+    flex: 1;
+    cursor: pointer;
+  }
+
+  input[type='checkbox'] {
+    width: 18px;
+    height: 18px;
+    accent-color: #89b4fa;
+    cursor: pointer;
+  }
+
+  input[type='color'] {
+    width: 40px;
+    height: 28px;
+    border: 1px solid #45475a;
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+    padding: 2px;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border-radius: 2px;
+      border: none;
+    }
+  }
+}
+
+.setting-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+
+.btn {
+  padding: 6px 14px;
+  border: 1px solid #45475a;
+  border-radius: 4px;
+  background: #313244;
+  color: #cdd6f4;
+  font-size: 12px;
+  cursor: pointer;
+
+  &:hover {
+    background: #45475a;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #89b4fa;
+    outline-offset: 1px;
+  }
+}
diff --git a/frontend/src/app/features/settings/color-settings.component.ts b/frontend/src/app/features/settings/color-settings.component.ts
new file mode 100644
index 0000000..7f8d5ab
--- /dev/null
+++ b/frontend/src/app/features/settings/color-settings.component.ts
@@ -0,0 +1,114 @@
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Subscription } from 'rxjs';
+
+import { ColorSettingsService, ColorSettings } from './color-settings.service';
+import { WindowService } from '../windows/window.service';
+import { WindowAction } from '../windows/window-config';
+
+/**
+ * Color settings dialog for the terminal.
+ *
+ * Rendered inside a modeless window (via WindowService).
+ * Provides toggle switches for:
+ * - Color inversion
+ * - Black-on-white mode
+ * - Monochrome mode (disable colors)
+ * - Local echo color picker
+ *
+ * Changes are applied live (no explicit save button needed).
+ *
+ * ARIA: role="dialog", labels on all inputs.
+ */
+@Component({
+  selector: 'app-color-settings',
+  standalone: true,
+  imports: [FormsModule],
+  template: `
+    <div class="color-settings" role="group" aria-label="Farbeinstellungen">
+      <div class="setting-row">
+        <label for="invertColors">Farben invertieren</label>
+        <input
+          id="invertColors"
+          type="checkbox"
+          [ngModel]="settings.invertColors"
+          (ngModelChange)="onToggle('invertColors', $event)"
+          aria-label="Farben invertieren"
+        />
+      </div>
+
+      <div class="setting-row">
+        <label for="blackOnWhite">Heller Hintergrund</label>
+        <input
+          id="blackOnWhite"
+          type="checkbox"
+          [ngModel]="settings.blackOnWhite"
+          (ngModelChange)="onToggle('blackOnWhite', $event)"
+          aria-label="Heller Hintergrund"
+        />
+      </div>
+
+      <div class="setting-row">
+        <label for="disableColors">Farben ausschalten</label>
+        <input
+          id="disableColors"
+          type="checkbox"
+          [ngModel]="settings.disableColors"
+          (ngModelChange)="onToggle('disableColors', $event)"
+          aria-label="Farben ausschalten"
+        />
+      </div>
+
+      <div class="setting-row">
+        <label for="localEchoColor">Eingabe-Farbe</label>
+        <input
+          id="localEchoColor"
+          type="color"
+          [ngModel]="settings.localEchoColor"
+          (ngModelChange)="onColorChange($event)"
+          aria-label="Farbe für lokale Eingabe"
+        />
+      </div>
+
+      <div class="setting-actions">
+        <button
+          class="btn btn-reset"
+          (click)="onReset()"
+          aria-label="Einstellungen zurücksetzen"
+        >
+          Zurücksetzen
+        </button>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./color-settings.component.scss'],
+})
+export class ColorSettingsComponent implements OnInit, OnDestroy {
+  private readonly colorSettingsService = inject(ColorSettingsService);
+
+  settings: ColorSettings = { ...this.colorSettingsService.current };
+
+  private subscription?: Subscription;
+
+  ngOnInit(): void {
+    this.subscription = this.colorSettingsService.settings$.subscribe(s => {
+      this.settings = { ...s };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
+
+  onToggle(key: keyof ColorSettings, value: boolean): void {
+    this.colorSettingsService.update({ [key]: value });
+  }
+
+  onColorChange(color: string): void {
+    this.colorSettingsService.update({ localEchoColor: color });
+  }
+
+  onReset(): void {
+    this.colorSettingsService.reset();
+  }
+}
diff --git a/frontend/src/app/features/settings/color-settings.service.spec.ts b/frontend/src/app/features/settings/color-settings.service.spec.ts
new file mode 100644
index 0000000..18d6585
--- /dev/null
+++ b/frontend/src/app/features/settings/color-settings.service.spec.ts
@@ -0,0 +1,117 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ColorSettingsService } from './color-settings.service';
+
+describe('ColorSettingsService', () => {
+  let service: ColorSettingsService;
+
+  beforeEach(() => {
+    localStorage.clear();
+
+    TestBed.configureTestingModule({
+      providers: [ColorSettingsService],
+    });
+
+    service = TestBed.inject(ColorSettingsService);
+  });
+
+  it('should start with default settings', () => {
+    expect(service.current.invertColors).toBe(false);
+    expect(service.current.blackOnWhite).toBe(false);
+    expect(service.current.disableColors).toBe(false);
+    expect(service.current.localEchoColor).toBe('#a6e3a1');
+  });
+
+  describe('save', () => {
+    it('should update current settings', () => {
+      service.save({ ...service.current, invertColors: true });
+
+      expect(service.current.invertColors).toBe(true);
+    });
+
+    it('should persist to localStorage', () => {
+      service.save({ ...service.current, blackOnWhite: true });
+
+      const stored = JSON.parse(localStorage.getItem('webmud3-color-settings')!);
+
+      expect(stored.blackOnWhite).toBe(true);
+    });
+
+    it('should emit on settings$ observable', () => {
+      const emissions: boolean[] = [];
+      const sub = service.settings$.subscribe(s => emissions.push(s.invertColors));
+
+      service.save({ ...service.current, invertColors: true });
+
+      expect(emissions).toContain(true);
+
+      sub.unsubscribe();
+    });
+  });
+
+  describe('update', () => {
+    it('should update a single property', () => {
+      service.update({ disableColors: true });
+
+      expect(service.current.disableColors).toBe(true);
+      expect(service.current.invertColors).toBe(false);
+    });
+  });
+
+  describe('reset', () => {
+    it('should restore default settings', () => {
+      service.save({
+        invertColors: true,
+        blackOnWhite: true,
+        disableColors: true,
+        localEchoColor: '#ff0000',
+      });
+
+      service.reset();
+
+      expect(service.current.invertColors).toBe(false);
+      expect(service.current.blackOnWhite).toBe(false);
+      expect(service.current.disableColors).toBe(false);
+      expect(service.current.localEchoColor).toBe('#a6e3a1');
+    });
+  });
+
+  describe('getXtermTheme', () => {
+    it('should return a valid theme with default settings', () => {
+      const theme = service.getXtermTheme();
+
+      expect(theme.background).toBe('#1e1e2e');
+      expect(theme.foreground).toBe('#cdd6f4');
+      expect(theme.cursor).toBeDefined();
+    });
+
+    it('should apply monochrome mode', () => {
+      service.update({ disableColors: true });
+
+      const theme = service.getXtermTheme();
+
+      // All ANSI colors should be either foreground or background
+      expect(theme.red).toBe(theme.foreground);
+      expect(theme.green).toBe(theme.foreground);
+      expect(theme.blue).toBe(theme.foreground);
+    });
+
+    it('should apply inversion', () => {
+      const defaultTheme = service.getXtermTheme();
+      service.update({ invertColors: true });
+      const invertedTheme = service.getXtermTheme();
+
+      expect(invertedTheme.background).not.toBe(defaultTheme.background);
+      expect(invertedTheme.foreground).not.toBe(defaultTheme.foreground);
+    });
+
+    it('should apply black-on-white mode', () => {
+      service.update({ blackOnWhite: true });
+
+      const theme = service.getXtermTheme();
+
+      expect(theme.background).toBe('#eff1f5');
+      expect(theme.foreground).toBe('#4c4f69');
+    });
+  });
+});
diff --git a/frontend/src/app/features/settings/color-settings.service.ts b/frontend/src/app/features/settings/color-settings.service.ts
new file mode 100644
index 0000000..c5cf910
--- /dev/null
+++ b/frontend/src/app/features/settings/color-settings.service.ts
@@ -0,0 +1,263 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import type { ITheme } from '@xterm/xterm';
+
+/**
+ * User-configurable color settings for the terminal.
+ */
+export interface ColorSettings {
+  /** Invert all terminal colors */
+  invertColors: boolean;
+  /** Swap black and white (light background mode) */
+  blackOnWhite: boolean;
+  /** Disable all colors (monochrome mode) */
+  disableColors: boolean;
+  /** Color for local echo text */
+  localEchoColor: string;
+}
+
+/** Default Catppuccin Mocha terminal colors */
+const DEFAULT_SETTINGS: ColorSettings = {
+  invertColors: false,
+  blackOnWhite: false,
+  disableColors: false,
+  localEchoColor: '#a6e3a1',
+};
+
+/** Storage key for persisting settings in localStorage */
+const STORAGE_KEY = 'webmud3-color-settings';
+
+/** Standard ANSI 16-color palette (Catppuccin Mocha inspired) */
+const ANSI_COLORS = {
+  black: '#45475a',
+  red: '#f38ba8',
+  green: '#a6e3a1',
+  yellow: '#f9e2af',
+  blue: '#89b4fa',
+  magenta: '#cba6f7',
+  cyan: '#94e2d5',
+  white: '#bac2de',
+  brightBlack: '#585b70',
+  brightRed: '#f38ba8',
+  brightGreen: '#a6e3a1',
+  brightYellow: '#f9e2af',
+  brightBlue: '#89b4fa',
+  brightMagenta: '#cba6f7',
+  brightCyan: '#94e2d5',
+  brightWhite: '#a6adc8',
+};
+
+/**
+ * Service for managing terminal color settings.
+ *
+ * Responsibilities:
+ * - Stores color preferences (invert, B/W, monochrome, echo color)
+ * - Persists settings to localStorage
+ * - Generates xterm.js ITheme objects from current settings
+ * - Exposes reactive observable for setting changes
+ *
+ * Replaces PrimeNG DynamicDialog-based approach from u1 with localStorage
+ * persistence and xterm.js Theme API integration.
+ */
+@Injectable({ providedIn: 'root' })
+export class ColorSettingsService {
+  private readonly settings = new BehaviorSubject<ColorSettings>(this.loadFromStorage());
+
+  /** Observable stream of current color settings */
+  public readonly settings$: Observable<ColorSettings> = this.settings.asObservable();
+
+  /**
+   * Returns the current color settings snapshot.
+   */
+  public get current(): ColorSettings {
+    return this.settings.value;
+  }
+
+  /**
+   * Updates and persists the color settings.
+   */
+  public save(settings: ColorSettings): void {
+    this.settings.next(settings);
+    this.saveToStorage(settings);
+
+    console.info('[ColorSettings] Settings saved:', settings);
+  }
+
+  /**
+   * Updates a single setting property.
+   */
+  public update(patch: Partial<ColorSettings>): void {
+    this.save({ ...this.settings.value, ...patch });
+  }
+
+  /**
+   * Resets to default settings.
+   */
+  public reset(): void {
+    this.save({ ...DEFAULT_SETTINGS });
+  }
+
+  /**
+   * Generates an xterm.js ITheme from the current color settings.
+   *
+   * Applies transformations in order:
+   * 1. Start with default Catppuccin Mocha colors
+   * 2. If `disableColors`: all ANSI colors → foreground/background only
+   * 3. If `invertColors`: invert all color values
+   * 4. If `blackOnWhite`: swap background/foreground to light mode
+   */
+  public getXtermTheme(): ITheme {
+    const s = this.settings.value;
+
+    let theme: ITheme = {
+      background: '#1e1e2e',
+      foreground: '#cdd6f4',
+      cursor: '#f5e0dc',
+      cursorAccent: '#1e1e2e',
+      selectionBackground: '#585b70',
+      selectionForeground: '#cdd6f4',
+      ...ANSI_COLORS,
+    };
+
+    if (s.disableColors) {
+      theme = this.applyMonochrome(theme);
+    }
+
+    if (s.invertColors) {
+      theme = this.applyInversion(theme);
+    }
+
+    if (s.blackOnWhite) {
+      theme = this.applyBlackOnWhite(theme);
+    }
+
+    return theme;
+  }
+
+  /**
+   * Removes all colors, keeping only foreground and background.
+   */
+  private applyMonochrome(theme: ITheme): ITheme {
+    const fg = theme.foreground ?? '#cdd6f4';
+    const bg = theme.background ?? '#1e1e2e';
+
+    return {
+      ...theme,
+      black: bg,
+      red: fg,
+      green: fg,
+      yellow: fg,
+      blue: fg,
+      magenta: fg,
+      cyan: fg,
+      white: fg,
+      brightBlack: bg,
+      brightRed: fg,
+      brightGreen: fg,
+      brightYellow: fg,
+      brightBlue: fg,
+      brightMagenta: fg,
+      brightCyan: fg,
+      brightWhite: fg,
+    };
+  }
+
+  /**
+   * Inverts all color values (RGB component-wise).
+   */
+  private applyInversion(theme: ITheme): ITheme {
+    const invert = (color: string | undefined): string | undefined => {
+      if (color === undefined) {
+        return undefined;
+      }
+
+      return this.invertHexColor(color);
+    };
+
+    return {
+      background: invert(theme.background),
+      foreground: invert(theme.foreground),
+      cursor: invert(theme.cursor),
+      cursorAccent: invert(theme.cursorAccent),
+      selectionBackground: invert(theme.selectionBackground),
+      selectionForeground: invert(theme.selectionForeground),
+      black: invert(theme.black),
+      red: invert(theme.red),
+      green: invert(theme.green),
+      yellow: invert(theme.yellow),
+      blue: invert(theme.blue),
+      magenta: invert(theme.magenta),
+      cyan: invert(theme.cyan),
+      white: invert(theme.white),
+      brightBlack: invert(theme.brightBlack),
+      brightRed: invert(theme.brightRed),
+      brightGreen: invert(theme.brightGreen),
+      brightYellow: invert(theme.brightYellow),
+      brightBlue: invert(theme.brightBlue),
+      brightMagenta: invert(theme.brightMagenta),
+      brightCyan: invert(theme.brightCyan),
+      brightWhite: invert(theme.brightWhite),
+    };
+  }
+
+  /**
+   * Swaps to a light-background mode.
+   */
+  private applyBlackOnWhite(theme: ITheme): ITheme {
+    return {
+      ...theme,
+      background: '#eff1f5',
+      foreground: '#4c4f69',
+      cursor: '#dc8a78',
+      cursorAccent: '#eff1f5',
+      selectionBackground: '#acb0be',
+      selectionForeground: '#4c4f69',
+    };
+  }
+
+  /**
+   * Inverts a hex color (e.g. #1e1e2e → #e1e1d1).
+   */
+  private invertHexColor(hex: string): string {
+    const clean = hex.replace('#', '');
+
+    if (clean.length !== 6) {
+      return hex;
+    }
+
+    const r = 255 - parseInt(clean.substring(0, 2), 16);
+    const g = 255 - parseInt(clean.substring(2, 4), 16);
+    const b = 255 - parseInt(clean.substring(4, 6), 16);
+
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+  }
+
+  /**
+   * Loads settings from localStorage, falls back to defaults.
+   */
+  private loadFromStorage(): ColorSettings {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+
+      if (stored !== null) {
+        return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) as Partial<ColorSettings> };
+      }
+    } catch (error) {
+      console.warn('[ColorSettings] Failed to load from localStorage:', error);
+    }
+
+    return { ...DEFAULT_SETTINGS };
+  }
+
+  /**
+   * Saves settings to localStorage.
+   */
+  private saveToStorage(settings: ColorSettings): void {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+    } catch (error) {
+      console.error('[ColorSettings] Failed to save to localStorage:', error);
+    }
+  }
+}
diff --git a/frontend/src/app/features/settings/index.ts b/frontend/src/app/features/settings/index.ts
new file mode 100644
index 0000000..8b0fa49
--- /dev/null
+++ b/frontend/src/app/features/settings/index.ts
@@ -0,0 +1,3 @@
+export { ColorSettingsService } from './color-settings.service';
+export type { ColorSettings } from './color-settings.service';
+export { ColorSettingsComponent } from './color-settings.component';
diff --git a/frontend/src/app/features/windows/window-container.component.ts b/frontend/src/app/features/windows/window-container.component.ts
index 4486fc8..c701a09 100644
--- a/frontend/src/app/features/windows/window-container.component.ts
+++ b/frontend/src/app/features/windows/window-container.component.ts
@@ -4,6 +4,7 @@ import { Component, inject } from '@angular/core';
 import { InventoryComponent } from '../gmcp-char/inventory.component';
 import { DirListComponent } from '../gmcp-files/dirlist.component';
 import { EditorComponent } from '../gmcp-files/editor.component';
+import { ColorSettingsComponent } from '../settings/color-settings.component';
 
 import { WindowAction, WindowConfig, WindowEvent } from './window-config';
 import { WindowComponent } from './window.component';
@@ -26,7 +27,7 @@ import { WindowService } from './window.service';
 @Component({
   selector: 'app-window-container',
   standalone: true,
-  imports: [AsyncPipe, WindowComponent, DirListComponent, EditorComponent, InventoryComponent],
+  imports: [AsyncPipe, WindowComponent, DirListComponent, EditorComponent, InventoryComponent, ColorSettingsComponent],
   template: `
     <div class="wm-container">
       @for (config of windowService.windows$ | async; track config.windowId) {
@@ -44,6 +45,9 @@ import { WindowService } from './window.service';
             @case ('InventoryComponent') {
               <app-inventory [config]="config"></app-inventory>
             }
+            @case ('ColorSettingsComponent') {
+              <app-color-settings></app-color-settings>
+            }
             @default {
               <p>Unbekannter Fenstertyp: {{ config.componentType }}</p>
             }
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e25e870..9eef694 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -9,6 +9,7 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { ServerConfigService } from './app/features/serverconfig/server-config.service';
 import { GmcpBootstrapService } from './app/features/gmcp/gmcp-bootstrap.service';
+import { MenuBootstrapService } from './app/features/menu/menu-bootstrap.service';
 
 if (environment.production) {
   enableProdMode();
@@ -27,5 +28,10 @@ bootstrapApplication(AppComponent, {
 
       gmcpBootstrap.bootstrap();
     }),
+    provideAppInitializer(() => {
+      const menuBootstrap = inject(MenuBootstrapService);
+
+      menuBootstrap.bootstrap();
+    }),
   ],
 }).catch((err) => console.error(err));

From e0635bf9b2e8c2196b76c111b4d1d2c48a987b96 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 13:39:10 +0100
Subject: [PATCH 18/30] input completion

---
 .../mud-client/mud-client.component.ts        | 29 ++++++
 frontend/src/app/features/gmcp-input/index.ts |  2 +
 .../gmcp-input/input-gmcp-handler.spec.ts     | 73 ++++++++++++++
 .../features/gmcp-input/input-gmcp-handler.ts | 85 ++++++++++++++++
 .../features/gmcp/gmcp-bootstrap.service.ts   |  3 +
 .../features/terminal/mud-input.controller.ts | 98 ++++++++++++++++++-
 6 files changed, 289 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/features/gmcp-input/index.ts
 create mode 100644 frontend/src/app/features/gmcp-input/input-gmcp-handler.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-input/input-gmcp-handler.ts

diff --git a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
index c50a727..dd607e8 100644
--- a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
+++ b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
@@ -25,6 +25,7 @@ import {
   CTRL,
 } from '../../../../features/terminal';
 import { ColorSettingsService } from '../../../../features/settings/color-settings.service';
+import { InputGmcpHandler } from '../../../../features/gmcp-input/input-gmcp-handler';
 
 /**
  * Component-internal shape that bundles the mutable Mud client flags.
@@ -52,6 +53,7 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
   private readonly mudService = inject(MudService);
   private readonly outputHistoryService = inject(OutputHistoryService);
   private readonly colorSettingsService = inject(ColorSettingsService);
+  private readonly inputGmcpHandler = inject(InputGmcpHandler);
 
   private readonly fontSizeBreakpoints = [
     { minWidth: 0, fontSize: 8.5 },
@@ -94,6 +96,7 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
   private showEchoSubscription?: Subscription;
   private linemodeSubscription?: Subscription;
   private colorSettingsSubscription?: Subscription;
+  private completionSubscription?: Subscription;
   private pasteHandler?: (event: ClipboardEvent) => void;
   private state: MudClientState = {
     isEditMode: true,
@@ -139,6 +142,13 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
     );
     this.inputController.setLocalEcho(this.state.localEchoEnabled);
 
+    // Wire up tab-completion
+    this.inputController.setTabCompleteHandler(({ word }) => {
+      if (word.length > 0) {
+        this.inputGmcpHandler.requestCompletion(word);
+      }
+    });
+
     this.promptManager = new MudPromptManager(
       this.terminal,
       this.inputController,
@@ -215,6 +225,24 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
       this.terminal.options.theme = this.colorSettingsService.getXtermTheme();
     });
 
+    // Handle tab-completion results
+    this.completionSubscription = this.inputGmcpHandler.completionResult$.subscribe(result => {
+      switch (result.type) {
+        case 'text':
+          if (result.value !== undefined) {
+            this.inputController.replaceCurrentWord(result.value);
+          }
+          break;
+        case 'choice':
+          // TODO: Show completion overlay (Phase 3.1 follow-up)
+          console.info('[MudClient] Completion choices:', result.options);
+          break;
+        case 'none':
+          // No completion available — optionally beep
+          break;
+      }
+    });
+
     this.resizeObs.observe(this.terminalRef.nativeElement);
     this.setState({ terminalReady: true });
 
@@ -257,6 +285,7 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
     this.showEchoSubscription?.unsubscribe();
     this.linemodeSubscription?.unsubscribe();
     this.colorSettingsSubscription?.unsubscribe();
+    this.completionSubscription?.unsubscribe();
 
     this.terminalClipboardAddon.dispose();
     this.terminalAttachAddon?.dispose();
diff --git a/frontend/src/app/features/gmcp-input/index.ts b/frontend/src/app/features/gmcp-input/index.ts
new file mode 100644
index 0000000..fa58c23
--- /dev/null
+++ b/frontend/src/app/features/gmcp-input/index.ts
@@ -0,0 +1,2 @@
+export { InputGmcpHandler } from './input-gmcp-handler';
+export type { CompletionResult } from './input-gmcp-handler';
diff --git a/frontend/src/app/features/gmcp-input/input-gmcp-handler.spec.ts b/frontend/src/app/features/gmcp-input/input-gmcp-handler.spec.ts
new file mode 100644
index 0000000..d243fea
--- /dev/null
+++ b/frontend/src/app/features/gmcp-input/input-gmcp-handler.spec.ts
@@ -0,0 +1,73 @@
+import { TestBed } from '@angular/core/testing';
+
+import { InputGmcpHandler, CompletionResult } from './input-gmcp-handler';
+import { GmcpService } from '../gmcp/gmcp.service';
+
+describe('InputGmcpHandler', () => {
+  let handler: InputGmcpHandler;
+  let gmcpService: GmcpService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [InputGmcpHandler, GmcpService],
+    });
+
+    handler = TestBed.inject(InputGmcpHandler);
+    gmcpService = TestBed.inject(GmcpService);
+  });
+
+  it('should have correct module metadata', () => {
+    expect(handler.moduleName).toBe('Input');
+    expect(handler.version).toBe('1');
+  });
+
+  describe('CompleteText', () => {
+    it('should emit text completion result', () => {
+      const results: CompletionResult[] = [];
+      handler.completionResult$.subscribe(r => results.push(r));
+
+      handler.handleMessage('CompleteText', 'nordwesten');
+
+      expect(results).toHaveLength(1);
+      expect(results[0].type).toBe('text');
+      expect(results[0].value).toBe('nordwesten');
+    });
+  });
+
+  describe('CompleteChoice', () => {
+    it('should emit choice completion result', () => {
+      const results: CompletionResult[] = [];
+      handler.completionResult$.subscribe(r => results.push(r));
+
+      const options = [['nord', 'nord'], ['nordwesten', 'nordwesten']];
+
+      handler.handleMessage('CompleteChoice', options);
+
+      expect(results).toHaveLength(1);
+      expect(results[0].type).toBe('choice');
+      expect(results[0].options).toEqual(options);
+    });
+  });
+
+  describe('CompleteNone', () => {
+    it('should emit none completion result', () => {
+      const results: CompletionResult[] = [];
+      handler.completionResult$.subscribe(r => results.push(r));
+
+      handler.handleMessage('CompleteNone', null);
+
+      expect(results).toHaveLength(1);
+      expect(results[0].type).toBe('none');
+    });
+  });
+
+  describe('requestCompletion', () => {
+    it('should send GMCP Input.Complete request', () => {
+      const sendSpy = jest.spyOn(gmcpService, 'sendOutgoing').mockImplementation(() => {});
+
+      handler.requestCompletion('nor');
+
+      expect(sendSpy).toHaveBeenCalledWith('Input', 'Complete', { text: 'nor' });
+    });
+  });
+});
diff --git a/frontend/src/app/features/gmcp-input/input-gmcp-handler.ts b/frontend/src/app/features/gmcp-input/input-gmcp-handler.ts
new file mode 100644
index 0000000..604c063
--- /dev/null
+++ b/frontend/src/app/features/gmcp-input/input-gmcp-handler.ts
@@ -0,0 +1,85 @@
+import { inject, Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+import { GmcpService } from '../gmcp/gmcp.service';
+import type { GmcpModuleHandler } from '../gmcp/gmcp-module-handler';
+
+/**
+ * Result of a tab-completion request from the MUD.
+ */
+export interface CompletionResult {
+  /** Type of completion response */
+  type: 'text' | 'choice' | 'none';
+  /** Completed text (for type='text') */
+  value?: string;
+  /** List of choices (for type='choice'), each entry is [display, insert] */
+  options?: string[][];
+}
+
+/**
+ * GMCP handler for the `Input` module.
+ *
+ * Handles tab-completion responses from the MUD:
+ * - `Input.CompleteText`   → Single completion, replace current word
+ * - `Input.CompleteChoice` → Multiple options, show overlay
+ * - `Input.CompleteNone`   → No completion available
+ *
+ * Workflow:
+ * 1. User presses Tab → MudInputController extracts current word
+ * 2. GmcpService sends `Input.Complete { text: currentWord }`
+ * 3. MUD responds with one of CompleteText/Choice/None
+ * 4. MudClientComponent subscribes to completionResult$ and updates the input
+ */
+@Injectable({ providedIn: 'root' })
+export class InputGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Input';
+  readonly version = '1';
+
+  private readonly gmcpService = inject(GmcpService);
+
+  /** Emits completion results for the MudClientComponent to consume */
+  public readonly completionResult$ = new Subject<CompletionResult>();
+
+  /**
+   * Routes incoming GMCP `Input.*` messages.
+   */
+  handleMessage(message: string, data: unknown): void {
+    switch (message) {
+      case 'CompleteText':
+        this.completionResult$.next({ type: 'text', value: data as string });
+        console.debug('[InputGmcpHandler] CompleteText:', data);
+        break;
+
+      case 'CompleteChoice':
+        this.completionResult$.next({ type: 'choice', options: data as string[][] });
+        console.debug('[InputGmcpHandler] CompleteChoice:', data);
+        break;
+
+      case 'CompleteNone':
+        this.completionResult$.next({ type: 'none' });
+        console.debug('[InputGmcpHandler] CompleteNone');
+        break;
+
+      default:
+        console.debug(`[InputGmcpHandler] Unknown message: Input.${message}`, data);
+    }
+  }
+
+  /**
+   * Sends a tab-completion request to the MUD.
+   *
+   * @param text - The current word/text to complete
+   */
+  public requestCompletion(text: string): void {
+    this.gmcpService.sendOutgoing('Input', 'Complete', { text });
+
+    console.debug('[InputGmcpHandler] Requesting completion for:', text);
+  }
+
+  /**
+   * Cleanup.
+   */
+  dispose(): void {
+    console.info('[InputGmcpHandler] Disposed.');
+  }
+}
diff --git a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
index a255b08..01d7980 100644
--- a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
+++ b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
@@ -5,6 +5,7 @@ import { CoreGmcpHandler } from '../gmcp-core/core-gmcp-handler';
 import { CharGmcpHandler } from '../gmcp-char/char-gmcp-handler';
 import { SoundGmcpHandler } from '../gmcp-sound/sound-gmcp-handler';
 import { FilesGmcpHandler } from '../gmcp-files/files-gmcp-handler';
+import { InputGmcpHandler } from '../gmcp-input/input-gmcp-handler';
 
 /**
  * Central GMCP bootstrap service.
@@ -26,6 +27,7 @@ export class GmcpBootstrapService {
   private readonly charHandler = inject(CharGmcpHandler);
   private readonly soundHandler = inject(SoundGmcpHandler);
   private readonly filesHandler = inject(FilesGmcpHandler);
+  private readonly inputHandler = inject(InputGmcpHandler);
 
   private initialized = false;
 
@@ -42,6 +44,7 @@ export class GmcpBootstrapService {
     this.gmcpService.registerModule(this.charHandler);
     this.gmcpService.registerModule(this.soundHandler);
     this.gmcpService.registerModule(this.filesHandler);
+    this.gmcpService.registerModule(this.inputHandler);
 
     this.initialized = true;
 
diff --git a/frontend/src/app/features/terminal/mud-input.controller.ts b/frontend/src/app/features/terminal/mud-input.controller.ts
index 8148b17..ff59380 100644
--- a/frontend/src/app/features/terminal/mud-input.controller.ts
+++ b/frontend/src/app/features/terminal/mud-input.controller.ts
@@ -26,6 +26,13 @@ export type MudInputCommitHandler = (payload: {
  */
 export type MudInputChangeHandler = (payload: { buffer: string }) => void;
 
+/**
+ * Callback signature for tab-completion requests.
+ * Called when the user presses Tab.
+ * Receives the current word at the cursor position.
+ */
+export type MudTabCompleteHandler = (payload: { word: string; buffer: string; cursor: number }) => void;
+
 /**
  * Encapsulates client-side editing state for LINEMODE input.  The controller keeps
  * track of the text buffer and cursor position, applies terminal side-effects
@@ -38,6 +45,7 @@ export class MudInputController {
   private localEchoEnabled = true;
   // Holds a partially received escape sequence to be completed by the next chunk.
   private pendingEscape = '';
+  private tabCompleteHandler?: MudTabCompleteHandler;
 
   /**
    * @param terminal Reference to the xterm instance we mirror the editing state to.
@@ -71,6 +79,10 @@ export class MudInputController {
             this.commitBuffer();
           }
 
+          this.lastWasCarriageReturn = false;
+          break;
+        case CTRL.TAB:
+          this.handleTabKey();
           this.lastWasCarriageReturn = false;
           break;
         case CTRL.BS:
@@ -108,6 +120,50 @@ export class MudInputController {
     this.localEchoEnabled = enabled;
   }
 
+  /**
+   * Sets the handler for Tab-completion requests.
+   * When set, pressing Tab triggers the handler instead of inserting a tab character.
+   */
+  public setTabCompleteHandler(handler: MudTabCompleteHandler | undefined): void {
+    this.tabCompleteHandler = handler;
+  }
+
+  /**
+   * Replaces the current word at the cursor position with the given text.
+   * Used by the completion system to insert the completed word.
+   */
+  public replaceCurrentWord(replacement: string): void {
+    const { start, end } = this.findCurrentWordBounds();
+    const before = this.buffer.slice(0, start);
+    const after = this.buffer.slice(end);
+    const oldLen = end - start;
+
+    this.buffer = before + replacement + after;
+    this.cursor = start + replacement.length;
+
+    this.onInputChange?.({ buffer: this.buffer });
+
+    if (!this.localEchoEnabled) {
+      return;
+    }
+
+    // Redraw: move cursor to word start, write replacement + after, clear trailing, reposition
+    if (start < end) {
+      this.terminal.write(cursorLeft(end - start));
+    }
+
+    const tail = replacement + after;
+    const padding = oldLen > replacement.length ? ' '.repeat(oldLen - replacement.length) : '';
+
+    this.terminal.write(sequence(tail, padding));
+
+    const backAmount = after.length + padding.length;
+
+    if (backAmount > 0) {
+      this.terminal.write(cursorLeft(backAmount));
+    }
+  }
+
   /**
    * Clears all editing state (buffer, cursor, carriage-return tracker).
    */
@@ -175,7 +231,7 @@ export class MudInputController {
   private insertCharacter(char: string): void {
     const charCode = char.charCodeAt(0);
 
-    if (charCode < 32 && char !== CTRL.TAB) {
+    if (charCode < 32) {
       return;
     }
 
@@ -402,4 +458,44 @@ export class MudInputController {
   private moveCursorToEnd(): void {
     this.moveCursorRight(this.buffer.length - this.cursor);
   }
+
+  /**
+   * Handles the Tab key: extracts the current word and calls the tab-complete handler.
+   * If no handler is set, Tab is silently ignored (not inserted as a character).
+   */
+  private handleTabKey(): void {
+    if (this.tabCompleteHandler === undefined) {
+      return;
+    }
+
+    const { start, end } = this.findCurrentWordBounds();
+    const word = this.buffer.slice(start, end);
+
+    this.tabCompleteHandler({
+      word,
+      buffer: this.buffer,
+      cursor: this.cursor,
+    });
+  }
+
+  /**
+   * Finds the start and end offsets of the word at the current cursor position.
+   * Words are delimited by spaces.
+   */
+  private findCurrentWordBounds(): { start: number; end: number } {
+    let start = this.cursor;
+    let end = this.cursor;
+
+    // Scan left to find word start
+    while (start > 0 && this.buffer[start - 1] !== ' ') {
+      start--;
+    }
+
+    // Scan right to find word end
+    while (end < this.buffer.length && this.buffer[end] !== ' ') {
+      end++;
+    }
+
+    return { start, end };
+  }
 }

From 50ebf4f74cd4b532a018a1a602bde59033e134ac Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 13:42:55 +0100
Subject: [PATCH 19/30] numpad keypad

---
 .../src/app/features/gmcp-numpad/index.ts     |   4 +
 .../app/features/gmcp-numpad/keypad-data.ts   | 112 ++++++++++++
 .../features/gmcp-numpad/keypad.component.ts  | 157 +++++++++++++++++
 .../gmcp-numpad/numpad-gmcp-handler.spec.ts   | 105 +++++++++++
 .../gmcp-numpad/numpad-gmcp-handler.ts        | 165 ++++++++++++++++++
 .../features/gmcp/gmcp-bootstrap.service.ts   |   3 +
 .../windows/window-container.component.ts     |   6 +-
 7 files changed, 551 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/features/gmcp-numpad/index.ts
 create mode 100644 frontend/src/app/features/gmcp-numpad/keypad-data.ts
 create mode 100644 frontend/src/app/features/gmcp-numpad/keypad.component.ts
 create mode 100644 frontend/src/app/features/gmcp-numpad/numpad-gmcp-handler.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-numpad/numpad-gmcp-handler.ts

diff --git a/frontend/src/app/features/gmcp-numpad/index.ts b/frontend/src/app/features/gmcp-numpad/index.ts
new file mode 100644
index 0000000..4cff190
--- /dev/null
+++ b/frontend/src/app/features/gmcp-numpad/index.ts
@@ -0,0 +1,4 @@
+export { NumpadGmcpHandler } from './numpad-gmcp-handler';
+export { KeypadComponent } from './keypad.component';
+export { KeypadData, buildCompoundKey, isNumpadOrFunctionKey } from './keypad-data';
+export type { OneKeypadData } from './keypad-data';
diff --git a/frontend/src/app/features/gmcp-numpad/keypad-data.ts b/frontend/src/app/features/gmcp-numpad/keypad-data.ts
new file mode 100644
index 0000000..b99b94c
--- /dev/null
+++ b/frontend/src/app/features/gmcp-numpad/keypad-data.ts
@@ -0,0 +1,112 @@
+/**
+ * Key mapping for a single numpad modifier level (e.g. "", "shift", "ctrl").
+ *
+ * The prefix identifies the modifier state, and the keys map
+ * physical Numpad keys (e.g. "Numpad7") to MUD commands (e.g. "nordwesten").
+ */
+export interface OneKeypadData {
+  /** Modifier prefix (e.g. "", "shift", "ctrl", "alt", "meta") */
+  prefix: string;
+  /** Map of key code → MUD command */
+  keys: Map<string, string>;
+}
+
+/**
+ * Complete keypad configuration received from the MUD via GMCP Numpad.SendLevel.
+ *
+ * Holds multiple levels (one per modifier combination) and provides
+ * lookup methods for compound keys (modifier|keyCode).
+ */
+export class KeypadData {
+  /** All levels keyed by modifier prefix */
+  public readonly levels = new Map<string, OneKeypadData>();
+
+  /**
+   * Adds or updates a single key mapping.
+   */
+  public addKey(prefix: string, key: string, value: string): void {
+    let level = this.levels.get(prefix);
+
+    if (level === undefined) {
+      level = { prefix, keys: new Map() };
+      this.levels.set(prefix, level);
+    }
+
+    level.keys.set(key, value);
+  }
+
+  /**
+   * Gets or creates a level for the given prefix.
+   */
+  public getLevel(prefix: string): OneKeypadData {
+    let level = this.levels.get(prefix);
+
+    if (level === undefined) {
+      level = { prefix, keys: new Map() };
+      this.levels.set(prefix, level);
+    }
+
+    return level;
+  }
+
+  /**
+   * Sets an entire level (replaces existing).
+   */
+  public setLevel(data: OneKeypadData): void {
+    this.levels.set(data.prefix, data);
+  }
+
+  /**
+   * Looks up a MUD command for a compound key in the format "prefix|keyCode".
+   *
+   * @param compoundKey - e.g. "|Numpad7" (no modifier) or "shift|Numpad7"
+   * @returns The MUD command, or empty string if not mapped
+   */
+  public getCompoundKey(compoundKey: string): string {
+    const separatorIndex = compoundKey.indexOf('|');
+
+    if (separatorIndex < 0) {
+      return '';
+    }
+
+    const prefix = compoundKey.slice(0, separatorIndex);
+    const key = compoundKey.slice(separatorIndex + 1);
+    const level = this.levels.get(prefix);
+
+    return level?.keys.get(key) ?? '';
+  }
+
+  /**
+   * Checks whether any key mappings exist.
+   */
+  public get isEmpty(): boolean {
+    return this.levels.size === 0;
+  }
+}
+
+/**
+ * Builds a compound key string from a keyboard event's modifiers and key code.
+ *
+ * @param event - The keyboard event
+ * @returns Compound key like "shift|Numpad7" or "|Numpad5"
+ */
+export function buildCompoundKey(event: KeyboardEvent): string {
+  const modifiers: string[] = [];
+
+  if (event.shiftKey) modifiers.push('shift');
+  if (event.ctrlKey) modifiers.push('ctrl');
+  if (event.altKey) modifiers.push('alt');
+  if (event.metaKey) modifiers.push('meta');
+
+  const prefix = modifiers.join('+');
+
+  return `${prefix}|${event.code}`;
+}
+
+/**
+ * Returns true if the keyboard event targets a numpad or function key
+ * that should be intercepted by the keypad system.
+ */
+export function isNumpadOrFunctionKey(event: KeyboardEvent): boolean {
+  return event.code.startsWith('Numpad') || event.code.startsWith('F');
+}
diff --git a/frontend/src/app/features/gmcp-numpad/keypad.component.ts b/frontend/src/app/features/gmcp-numpad/keypad.component.ts
new file mode 100644
index 0000000..599a3bd
--- /dev/null
+++ b/frontend/src/app/features/gmcp-numpad/keypad.component.ts
@@ -0,0 +1,157 @@
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { NumpadGmcpHandler } from './numpad-gmcp-handler';
+import type { OneKeypadData } from './keypad-data';
+import type { WindowConfig } from '../windows/window-config';
+
+/**
+ * Grid layout for the directional numpad.
+ * Each entry: [gridPosition, displayLabel, numpadKeyCode]
+ */
+const NUMPAD_GRID: Array<[string, string, string]> = [
+  ['1/1', 'NW', 'Numpad7'],
+  ['1/2', 'N', 'Numpad8'],
+  ['1/3', 'NO', 'Numpad9'],
+  ['2/1', 'W', 'Numpad4'],
+  ['2/2', '·', 'Numpad5'],
+  ['2/3', 'O', 'Numpad6'],
+  ['3/1', 'SW', 'Numpad1'],
+  ['3/2', 'S', 'Numpad2'],
+  ['3/3', 'SO', 'Numpad3'],
+];
+
+/**
+ * Visual numpad widget rendered in a modeless window.
+ *
+ * Displays a 3x3 directional grid (NW, N, NE, W, center, E, SW, S, SE).
+ * Each button shows the mapped MUD command and sends it on click.
+ *
+ * ARIA: role="grid", aria-label per button.
+ */
+@Component({
+  selector: 'app-keypad',
+  standalone: true,
+  template: `
+    <div class="keypad-grid" role="grid" aria-label="Richtungs-Numpad">
+      @for (cell of grid; track cell[2]) {
+        <button
+          class="keypad-btn"
+          [style.grid-area]="cell[0]"
+          [title]="getCommand(cell[2]) || cell[1]"
+          [attr.aria-label]="cell[1] + ': ' + (getCommand(cell[2]) || 'nicht belegt')"
+          [disabled]="!getCommand(cell[2])"
+          (click)="onKeyClick(cell[2])"
+        >
+          <span class="keypad-label">{{ cell[1] }}</span>
+          <span class="keypad-cmd">{{ getCommand(cell[2]) }}</span>
+        </button>
+      }
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: block;
+    }
+
+    .keypad-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+      gap: 4px;
+      padding: 4px;
+      height: 100%;
+    }
+
+    .keypad-btn {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #45475a;
+      border-radius: 6px;
+      background: #313244;
+      color: #cdd6f4;
+      cursor: pointer;
+      padding: 4px;
+      font-family: sans-serif;
+      min-height: 50px;
+      transition: background 0.1s;
+
+      &:hover:not(:disabled) {
+        background: #45475a;
+      }
+
+      &:active:not(:disabled) {
+        background: #585b70;
+      }
+
+      &:disabled {
+        color: #585b70;
+        cursor: default;
+        border-color: #313244;
+      }
+
+      &:focus-visible {
+        outline: 2px solid #89b4fa;
+        outline-offset: 1px;
+      }
+    }
+
+    .keypad-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: #a6adc8;
+    }
+
+    .keypad-cmd {
+      font-size: 10px;
+      margin-top: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+  `],
+})
+export class KeypadComponent implements OnInit, OnDestroy {
+  @Input() config!: WindowConfig;
+
+  private readonly numpadHandler = inject(NumpadGmcpHandler);
+  private subscription?: Subscription;
+
+  /** Current level being displayed (default: no modifier) */
+  private currentLevel: OneKeypadData | null = null;
+
+  /** Grid layout definition */
+  protected readonly grid = NUMPAD_GRID;
+
+  ngOnInit(): void {
+    this.subscription = this.numpadHandler.keypadData$.subscribe(data => {
+      this.currentLevel = data.getLevel('');
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
+
+  /**
+   * Returns the MUD command mapped to the given numpad key, or empty string.
+   */
+  getCommand(keyCode: string): string {
+    return this.currentLevel?.keys.get(keyCode) ?? '';
+  }
+
+  /**
+   * Sends the mapped command when a numpad button is clicked.
+   */
+  onKeyClick(keyCode: string): void {
+    const command = this.getCommand(keyCode);
+
+    if (command !== '') {
+      this.numpadHandler['gmcpService'].sendOutgoing('Input', 'Line', command);
+      console.debug(`[KeypadComponent] Sent: ${command} (key: ${keyCode})`);
+    }
+  }
+}
diff --git a/frontend/src/app/features/gmcp-numpad/numpad-gmcp-handler.spec.ts b/frontend/src/app/features/gmcp-numpad/numpad-gmcp-handler.spec.ts
new file mode 100644
index 0000000..cb118d5
--- /dev/null
+++ b/frontend/src/app/features/gmcp-numpad/numpad-gmcp-handler.spec.ts
@@ -0,0 +1,105 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NumpadGmcpHandler } from './numpad-gmcp-handler';
+import { GmcpService } from '../gmcp/gmcp.service';
+import { WindowService } from '../windows/window.service';
+import { KeypadData } from './keypad-data';
+
+describe('NumpadGmcpHandler', () => {
+  let handler: NumpadGmcpHandler;
+  let gmcpService: GmcpService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NumpadGmcpHandler, GmcpService, WindowService],
+    });
+
+    handler = TestBed.inject(NumpadGmcpHandler);
+    gmcpService = TestBed.inject(GmcpService);
+  });
+
+  it('should have correct module metadata', () => {
+    expect(handler.moduleName).toBe('Numpad');
+    expect(handler.version).toBe('1');
+  });
+
+  describe('Numpad.SendLevel', () => {
+    it('should store key mappings from SendLevel', () => {
+      handler.handleMessage('SendLevel', {
+        prefix: '',
+        keys: {
+          Numpad7: 'nordwesten',
+          Numpad8: 'norden',
+          Numpad9: 'nordosten',
+        },
+      });
+
+      expect(handler.hasData).toBe(true);
+      expect(handler.lookupCommand('|Numpad7')).toBe('nordwesten');
+      expect(handler.lookupCommand('|Numpad8')).toBe('norden');
+      expect(handler.lookupCommand('|Numpad9')).toBe('nordosten');
+    });
+
+    it('should support modifier levels', () => {
+      handler.handleMessage('SendLevel', {
+        prefix: 'shift',
+        keys: { Numpad7: 'schleiche nordwesten' },
+      });
+
+      expect(handler.lookupCommand('shift|Numpad7')).toBe('schleiche nordwesten');
+      expect(handler.lookupCommand('|Numpad7')).toBe('');
+    });
+
+    it('should emit on keypadData$', () => {
+      const emissions: KeypadData[] = [];
+      handler.keypadData$.subscribe(d => emissions.push(d));
+
+      handler.handleMessage('SendLevel', {
+        prefix: '',
+        keys: { Numpad5: 'schaue' },
+      });
+
+      // Initial + after SendLevel
+      expect(emissions.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  describe('sendUpdate', () => {
+    it('should send GMCP Numpad.Update', () => {
+      const spy = jest.spyOn(gmcpService, 'sendOutgoing').mockImplementation(() => {});
+
+      handler.sendUpdate('', 'Numpad7', 'nordwesten');
+
+      expect(spy).toHaveBeenCalledWith('Numpad', 'Update', {
+        prefix: '',
+        key: 'Numpad7',
+        value: 'nordwesten',
+      });
+    });
+  });
+
+  describe('requestAll', () => {
+    it('should send GMCP Numpad.GetAll', () => {
+      const spy = jest.spyOn(gmcpService, 'sendOutgoing').mockImplementation(() => {});
+
+      handler.requestAll();
+
+      expect(spy).toHaveBeenCalledWith('Numpad', 'GetAll', {});
+    });
+  });
+
+  describe('dispose', () => {
+    it('should reset keypad data', () => {
+      handler.handleMessage('SendLevel', {
+        prefix: '',
+        keys: { Numpad5: 'schaue' },
+      });
+
+      expect(handler.hasData).toBe(true);
+
+      handler.dispose();
+
+      expect(handler.hasData).toBe(false);
+    });
+  });
+});
diff --git a/frontend/src/app/features/gmcp-numpad/numpad-gmcp-handler.ts b/frontend/src/app/features/gmcp-numpad/numpad-gmcp-handler.ts
new file mode 100644
index 0000000..08d6fd1
--- /dev/null
+++ b/frontend/src/app/features/gmcp-numpad/numpad-gmcp-handler.ts
@@ -0,0 +1,165 @@
+import { inject, Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+import { GmcpService } from '../gmcp/gmcp.service';
+import type { GmcpMenuItem, GmcpModuleHandler } from '../gmcp/gmcp-module-handler';
+import { WindowService } from '../windows/window.service';
+import { WindowAction } from '../windows/window-config';
+
+import { KeypadData, OneKeypadData } from './keypad-data';
+
+/**
+ * Payload shape for GMCP `Numpad.SendLevel`.
+ */
+interface NumpadLevelPayload {
+  prefix: string;
+  keys: Record<string, string>;
+}
+
+/**
+ * GMCP handler for the `Numpad` module.
+ *
+ * Handles:
+ * - `Numpad.SendLevel` → MUD sends key mappings for one modifier level
+ *
+ * Provides:
+ * - `keypadData$` reactive stream of current keypad configuration
+ * - `sendUpdate()` to push changed mappings back to the MUD
+ * - `requestAll()` to request all levels from the MUD
+ * - `lookupCommand()` for fast key lookup during keyboard interception
+ *
+ * The visual KeypadComponent subscribes to `keypadData$` and renders
+ * a clickable 3x3 directional grid.
+ */
+@Injectable({ providedIn: 'root' })
+export class NumpadGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Numpad';
+  readonly version = '1';
+
+  private readonly gmcpService = inject(GmcpService);
+  private readonly windowService = inject(WindowService);
+
+  /** Reactive stream of the full keypad configuration */
+  public readonly keypadData$ = new BehaviorSubject<KeypadData>(new KeypadData());
+
+  /** Whether the numpad module is currently active */
+  private active = false;
+
+  /** Window ID of the keypad widget (if open) */
+  private keypadWindowId: string | null = null;
+
+  /**
+   * Routes incoming GMCP `Numpad.*` messages.
+   */
+  handleMessage(message: string, data: unknown): void {
+    switch (message) {
+      case 'SendLevel':
+        this.handleSendLevel(data as NumpadLevelPayload);
+        break;
+
+      default:
+        console.debug(`[NumpadGmcpHandler] Unknown message: Numpad.${message}`, data);
+    }
+  }
+
+  /**
+   * Returns menu items for the GMCP menu.
+   */
+  getMenuItems(): GmcpMenuItem[] {
+    return [
+      {
+        label: 'Numpad anzeigen',
+        action: () => this.openKeypadWindow(),
+      },
+    ];
+  }
+
+  /**
+   * Looks up a MUD command for the given compound key.
+   * Returns the command string or empty string if not mapped.
+   */
+  public lookupCommand(compoundKey: string): string {
+    return this.keypadData$.value.getCompoundKey(compoundKey);
+  }
+
+  /**
+   * Sends a key mapping update to the MUD.
+   */
+  public sendUpdate(prefix: string, key: string, value: string): void {
+    this.gmcpService.sendOutgoing('Numpad', 'Update', { prefix, key, value });
+    console.debug(`[NumpadGmcpHandler] Update sent: ${prefix}|${key} = ${value}`);
+  }
+
+  /**
+   * Requests all numpad levels from the MUD.
+   */
+  public requestAll(): void {
+    this.gmcpService.sendOutgoing('Numpad', 'GetAll', {});
+    console.debug('[NumpadGmcpHandler] Requested all levels.');
+  }
+
+  /** Whether the numpad has any key mappings loaded */
+  public get hasData(): boolean {
+    return !this.keypadData$.value.isEmpty;
+  }
+
+  /**
+   * Cleanup.
+   */
+  dispose(): void {
+    this.keypadData$.next(new KeypadData());
+    this.active = false;
+
+    if (this.keypadWindowId !== null) {
+      this.windowService.close(this.keypadWindowId);
+      this.keypadWindowId = null;
+    }
+
+    console.info('[NumpadGmcpHandler] Disposed.');
+  }
+
+  /**
+   * Handles `Numpad.SendLevel`: MUD sends key mappings for one modifier level.
+   */
+  private handleSendLevel(payload: NumpadLevelPayload): void {
+    const keypadData = this.keypadData$.value;
+    const level: OneKeypadData = {
+      prefix: payload.prefix,
+      keys: new Map(Object.entries(payload.keys)),
+    };
+
+    keypadData.setLevel(level);
+    this.active = true;
+
+    // Emit new reference to trigger change detection
+    this.keypadData$.next(keypadData);
+
+    console.info(
+      `[NumpadGmcpHandler] Level received: "${payload.prefix}" with ${level.keys.size} keys`,
+    );
+  }
+
+  /**
+   * Opens the visual keypad widget as a modeless window.
+   */
+  private openKeypadWindow(): void {
+    if (this.keypadWindowId !== null) {
+      this.windowService.focus(this.keypadWindowId);
+      return;
+    }
+
+    this.keypadWindowId = this.windowService.open({
+      title: 'Numpad',
+      componentType: 'KeypadComponent',
+      size: { width: 260, height: 280 },
+      position: { x: window.innerWidth - 300, y: 60 },
+    });
+
+    const sub = this.windowService.outgoingEvents$.subscribe(event => {
+      if (event.windowId === this.keypadWindowId && event.action === WindowAction.CloseParent) {
+        this.keypadWindowId = null;
+        sub.unsubscribe();
+      }
+    });
+  }
+}
diff --git a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
index 01d7980..c6e0da3 100644
--- a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
+++ b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
@@ -6,6 +6,7 @@ import { CharGmcpHandler } from '../gmcp-char/char-gmcp-handler';
 import { SoundGmcpHandler } from '../gmcp-sound/sound-gmcp-handler';
 import { FilesGmcpHandler } from '../gmcp-files/files-gmcp-handler';
 import { InputGmcpHandler } from '../gmcp-input/input-gmcp-handler';
+import { NumpadGmcpHandler } from '../gmcp-numpad/numpad-gmcp-handler';
 
 /**
  * Central GMCP bootstrap service.
@@ -28,6 +29,7 @@ export class GmcpBootstrapService {
   private readonly soundHandler = inject(SoundGmcpHandler);
   private readonly filesHandler = inject(FilesGmcpHandler);
   private readonly inputHandler = inject(InputGmcpHandler);
+  private readonly numpadHandler = inject(NumpadGmcpHandler);
 
   private initialized = false;
 
@@ -45,6 +47,7 @@ export class GmcpBootstrapService {
     this.gmcpService.registerModule(this.soundHandler);
     this.gmcpService.registerModule(this.filesHandler);
     this.gmcpService.registerModule(this.inputHandler);
+    this.gmcpService.registerModule(this.numpadHandler);
 
     this.initialized = true;
 
diff --git a/frontend/src/app/features/windows/window-container.component.ts b/frontend/src/app/features/windows/window-container.component.ts
index c701a09..17d2e92 100644
--- a/frontend/src/app/features/windows/window-container.component.ts
+++ b/frontend/src/app/features/windows/window-container.component.ts
@@ -5,6 +5,7 @@ import { InventoryComponent } from '../gmcp-char/inventory.component';
 import { DirListComponent } from '../gmcp-files/dirlist.component';
 import { EditorComponent } from '../gmcp-files/editor.component';
 import { ColorSettingsComponent } from '../settings/color-settings.component';
+import { KeypadComponent } from '../gmcp-numpad/keypad.component';
 
 import { WindowAction, WindowConfig, WindowEvent } from './window-config';
 import { WindowComponent } from './window.component';
@@ -27,7 +28,7 @@ import { WindowService } from './window.service';
 @Component({
   selector: 'app-window-container',
   standalone: true,
-  imports: [AsyncPipe, WindowComponent, DirListComponent, EditorComponent, InventoryComponent, ColorSettingsComponent],
+  imports: [AsyncPipe, WindowComponent, DirListComponent, EditorComponent, InventoryComponent, ColorSettingsComponent, KeypadComponent],
   template: `
     <div class="wm-container">
       @for (config of windowService.windows$ | async; track config.windowId) {
@@ -48,6 +49,9 @@ import { WindowService } from './window.service';
             @case ('ColorSettingsComponent') {
               <app-color-settings></app-color-settings>
             }
+            @case ('KeypadComponent') {
+              <app-keypad [config]="config"></app-keypad>
+            }
             @default {
               <p>Unbekannter Fenstertyp: {{ config.componentType }}</p>
             }

From cb7b91e76cd38c4823dbdfaa2b8b386db25bce8b Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 13:45:09 +0100
Subject: [PATCH 20/30] gmcp comm

---
 .../gmcp-comm/comm-gmcp-handler.spec.ts       | 59 +++++++++++++++++++
 .../features/gmcp-comm/comm-gmcp-handler.ts   | 59 +++++++++++++++++++
 frontend/src/app/features/gmcp-comm/index.ts  |  2 +
 .../features/gmcp/gmcp-bootstrap.service.ts   |  3 +
 4 files changed, 123 insertions(+)
 create mode 100644 frontend/src/app/features/gmcp-comm/comm-gmcp-handler.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-comm/comm-gmcp-handler.ts
 create mode 100644 frontend/src/app/features/gmcp-comm/index.ts

diff --git a/frontend/src/app/features/gmcp-comm/comm-gmcp-handler.spec.ts b/frontend/src/app/features/gmcp-comm/comm-gmcp-handler.spec.ts
new file mode 100644
index 0000000..50d3fb9
--- /dev/null
+++ b/frontend/src/app/features/gmcp-comm/comm-gmcp-handler.spec.ts
@@ -0,0 +1,59 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CommGmcpHandler, CommMessage } from './comm-gmcp-handler';
+
+describe('CommGmcpHandler', () => {
+  let handler: CommGmcpHandler;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CommGmcpHandler],
+    });
+
+    handler = TestBed.inject(CommGmcpHandler);
+  });
+
+  it('should have correct module metadata', () => {
+    expect(handler.moduleName).toBe('Comm');
+    expect(handler.version).toBe('1');
+  });
+
+  it('should emit Say messages', () => {
+    const messages: CommMessage[] = [];
+    handler.commMessage$.subscribe(m => messages.push(m));
+
+    handler.handleMessage('Say', { text: 'Hallo!' });
+
+    expect(messages).toHaveLength(1);
+    expect(messages[0].type).toBe('Say');
+  });
+
+  it('should emit Soul messages', () => {
+    const messages: CommMessage[] = [];
+    handler.commMessage$.subscribe(m => messages.push(m));
+
+    handler.handleMessage('Soul', { text: 'grinst.' });
+
+    expect(messages).toHaveLength(1);
+    expect(messages[0].type).toBe('Soul');
+  });
+
+  it('should emit Tell messages', () => {
+    const messages: CommMessage[] = [];
+    handler.commMessage$.subscribe(m => messages.push(m));
+
+    handler.handleMessage('Tell', { from: 'Leo', text: 'Hi!' });
+
+    expect(messages).toHaveLength(1);
+    expect(messages[0].type).toBe('Tell');
+  });
+
+  it('should not emit for unknown messages', () => {
+    const messages: CommMessage[] = [];
+    handler.commMessage$.subscribe(m => messages.push(m));
+
+    handler.handleMessage('Unknown', {});
+
+    expect(messages).toHaveLength(0);
+  });
+});
diff --git a/frontend/src/app/features/gmcp-comm/comm-gmcp-handler.ts b/frontend/src/app/features/gmcp-comm/comm-gmcp-handler.ts
new file mode 100644
index 0000000..7efba3f
--- /dev/null
+++ b/frontend/src/app/features/gmcp-comm/comm-gmcp-handler.ts
@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+import type { GmcpModuleHandler } from '../gmcp/gmcp-module-handler';
+
+/**
+ * A single communication message received via GMCP.
+ */
+export interface CommMessage {
+  /** Message type: Say, Soul, or Tell */
+  type: string;
+  /** Raw payload from the MUD */
+  data: unknown;
+}
+
+/**
+ * GMCP handler for the `Comm` module.
+ *
+ * Handles communication channels from the MUD:
+ * - `Comm.Say`  → Someone speaks in the room
+ * - `Comm.Soul` → Someone performs a soul action
+ * - `Comm.Tell` → Someone sends a private message
+ *
+ * Minimal implementation: messages are published on an observable stream.
+ * In u1, these are rendered as regular MUD output.
+ * A future enhancement could add a separate communication panel.
+ */
+@Injectable({ providedIn: 'root' })
+export class CommGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Comm';
+  readonly version = '1';
+
+  /** Observable stream of all communication messages */
+  public readonly commMessage$ = new Subject<CommMessage>();
+
+  /**
+   * Routes incoming GMCP `Comm.*` messages.
+   */
+  handleMessage(message: string, data: unknown): void {
+    switch (message) {
+      case 'Say':
+      case 'Soul':
+      case 'Tell':
+        this.commMessage$.next({ type: message, data });
+        console.debug(`[CommGmcpHandler] ${message}:`, data);
+        break;
+
+      default:
+        console.debug(`[CommGmcpHandler] Unknown message: Comm.${message}`, data);
+    }
+  }
+
+  /**
+   * Cleanup.
+   */
+  dispose(): void {
+    console.info('[CommGmcpHandler] Disposed.');
+  }
+}
diff --git a/frontend/src/app/features/gmcp-comm/index.ts b/frontend/src/app/features/gmcp-comm/index.ts
new file mode 100644
index 0000000..27fd010
--- /dev/null
+++ b/frontend/src/app/features/gmcp-comm/index.ts
@@ -0,0 +1,2 @@
+export { CommGmcpHandler } from './comm-gmcp-handler';
+export type { CommMessage } from './comm-gmcp-handler';
diff --git a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
index c6e0da3..cf19a45 100644
--- a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
+++ b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
@@ -7,6 +7,7 @@ import { SoundGmcpHandler } from '../gmcp-sound/sound-gmcp-handler';
 import { FilesGmcpHandler } from '../gmcp-files/files-gmcp-handler';
 import { InputGmcpHandler } from '../gmcp-input/input-gmcp-handler';
 import { NumpadGmcpHandler } from '../gmcp-numpad/numpad-gmcp-handler';
+import { CommGmcpHandler } from '../gmcp-comm/comm-gmcp-handler';
 
 /**
  * Central GMCP bootstrap service.
@@ -30,6 +31,7 @@ export class GmcpBootstrapService {
   private readonly filesHandler = inject(FilesGmcpHandler);
   private readonly inputHandler = inject(InputGmcpHandler);
   private readonly numpadHandler = inject(NumpadGmcpHandler);
+  private readonly commHandler = inject(CommGmcpHandler);
 
   private initialized = false;
 
@@ -48,6 +50,7 @@ export class GmcpBootstrapService {
     this.gmcpService.registerModule(this.filesHandler);
     this.gmcpService.registerModule(this.inputHandler);
     this.gmcpService.registerModule(this.numpadHandler);
+    this.gmcpService.registerModule(this.commHandler);
 
     this.initialized = true;
 

From 18a5bfa65740e8e38eca63491824b3c48978ce4b Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 13:48:27 +0100
Subject: [PATCH 21/30] gmcp-room

---
 GMCP.md                                       | 35 +++++---
 frontend/src/app/features/gmcp-room/index.ts  |  2 +
 .../gmcp-room/room-gmcp-handler.spec.ts       | 70 ++++++++++++++++
 .../features/gmcp-room/room-gmcp-handler.ts   | 80 +++++++++++++++++++
 .../features/gmcp/gmcp-bootstrap.service.ts   |  3 +
 5 files changed, 180 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/app/features/gmcp-room/index.ts
 create mode 100644 frontend/src/app/features/gmcp-room/room-gmcp-handler.spec.ts
 create mode 100644 frontend/src/app/features/gmcp-room/room-gmcp-handler.ts

diff --git a/GMCP.md b/GMCP.md
index fbc8a99..7559aa5 100644
--- a/GMCP.md
+++ b/GMCP.md
@@ -5,12 +5,12 @@
 In UNItopia there is now more modules and messages supported, here now following the status:
 
 ### Module Core, MUD => Client
-- [x]  Core.Ping: Fully Implemented with a button for GMCP-Ping.
-- [ ]  Core.Goodbye (Parameter "goodbye-message"): Partially Implemented. E.g. useful for recycle resources.
+- [x]  Core.Ping: Fully Implemented with visual toggle + latency measurement.
+- [x]  Core.Goodbye (Parameter "goodbye-message"): Implemented. Resets GMCP state, closes windows.
 
 ### Module Core, Client => MUD
-- [x]  Core.Hello: Implemented, e.g. { client: 'Webmud3', version: 'v0.0.24' }
-- [ ]  Core.Supports.Set/Add/Remove: A flexible configuration is needed in the Webmud3, so that only modules are active, which are also shown.
+- [x]  Core.Hello: Implemented, e.g. { client: 'WebMud3', version: '0.7.0' }
+- [x]  Core.Supports.Set/Add/Remove: Automatic Set on GMCP start, Add/Remove for dynamic modules.
 - [x]  Core.Ping implemented: request ping back from server.
 
 ### Module Char: MUD => Client
@@ -44,20 +44,35 @@ In UNItopia there is now more modules and messages supported, here now following
 - [x]  Files.ChDir: Change directory
 - [x]  Files.fileSaved: Notify save complete
 
-### Modul Comm
-- [ ]  Comm.Say / Comm.Soul / Comm.Tell: Not yet implemented
+### Module Input: MUD => Client
+- [x]  Input.CompleteText: Single completion result
+- [x]  Input.CompleteChoice: Multiple choice completion
+- [x]  Input.CompleteNone: No completion available
+
+### Module Input: Client => MUD
+- [x]  Input.Complete: Request tab-completion for current word
+
+### Modul Comm: MUD => Client
+- [x]  Comm.Say / Comm.Soul / Comm.Tell: Received and published on observable stream
+
+### Modul Room: MUD => Client
+- [x]  Room.Info: Room name, domain, exits. Updates browser title.
 
 ### Modul Numpad MUD => Client
-- [ ] Numpad.SendLevel { "prefix":"", "keys": { 'Numpad7': "nordwesten", ... }}
+- [x] Numpad.SendLevel { "prefix":"", "keys": { 'Numpad7': "nordwesten", ... }}
 
 ### Modul Numpad Client => MUD
-- [ ] Numpad.Update( "prefix":"", "key":"Numpad7", "value": "nordwesten" }
-- [ ] Numpad.GetAll
+- [x] Numpad.Update { "prefix":"", "key":"Numpad7", "value": "nordwesten" }
+- [x] Numpad.GetAll
 - [ ] Numpad.GetLevel { "prefix":"" }
 
 ### Module Status:
-- [ ] Core 90%
+- [x] Core (Hello, Supports.Set, Ping, Goodbye)
 - [x] Char (Name, StatusVars, Status, Vitals, Stats)
 - [x] Char.Items (List, Add, Remove)
 - [x] Sound (Url, Event)
 - [x] Files (URL, DirectoryList, OpenFile, ChDir, fileSaved)
+- [x] Input (Complete, CompleteText, CompleteChoice, CompleteNone)
+- [x] Comm (Say, Soul, Tell)
+- [x] Room (Info)
+- [x] Numpad (SendLevel, Update, GetAll)
diff --git a/frontend/src/app/features/gmcp-room/index.ts b/frontend/src/app/features/gmcp-room/index.ts
new file mode 100644
index 0000000..35bb84f
--- /dev/null
+++ b/frontend/src/app/features/gmcp-room/index.ts
@@ -0,0 +1,2 @@
+export { RoomGmcpHandler } from './room-gmcp-handler';
+export type { RoomInfo } from './room-gmcp-handler';
diff --git a/frontend/src/app/features/gmcp-room/room-gmcp-handler.spec.ts b/frontend/src/app/features/gmcp-room/room-gmcp-handler.spec.ts
new file mode 100644
index 0000000..6c7f306
--- /dev/null
+++ b/frontend/src/app/features/gmcp-room/room-gmcp-handler.spec.ts
@@ -0,0 +1,70 @@
+import { TestBed } from '@angular/core/testing';
+import { Title } from '@angular/platform-browser';
+
+import { RoomGmcpHandler, RoomInfo } from './room-gmcp-handler';
+
+describe('RoomGmcpHandler', () => {
+  let handler: RoomGmcpHandler;
+  let titleService: Title;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [RoomGmcpHandler, Title],
+    });
+
+    handler = TestBed.inject(RoomGmcpHandler);
+    titleService = TestBed.inject(Title);
+  });
+
+  it('should have correct module metadata', () => {
+    expect(handler.moduleName).toBe('Room');
+    expect(handler.version).toBe('1');
+  });
+
+  describe('Room.Info', () => {
+    it('should store room info', () => {
+      handler.handleMessage('Info', {
+        name: 'Marktplatz',
+        domain: 'stadt',
+        exits: ['norden', 'sueden', 'osten'],
+      });
+
+      const info = handler.roomInfo$.value;
+
+      expect(info).not.toBeNull();
+      expect(info!.name).toBe('Marktplatz');
+      expect(info!.domain).toBe('stadt');
+      expect(info!.exits).toEqual(['norden', 'sueden', 'osten']);
+    });
+
+    it('should update browser title', () => {
+      const spy = jest.spyOn(titleService, 'setTitle');
+
+      handler.handleMessage('Info', { name: 'Marktplatz' });
+
+      expect(spy).toHaveBeenCalledWith('Marktplatz - WebMud3');
+    });
+
+    it('should emit on roomInfo$ observable', () => {
+      const emissions: (RoomInfo | null)[] = [];
+      handler.roomInfo$.subscribe(r => emissions.push(r));
+
+      handler.handleMessage('Info', { name: 'Taverne' });
+
+      expect(emissions).toHaveLength(2); // null + Taverne
+      expect(emissions[1]!.name).toBe('Taverne');
+    });
+  });
+
+  describe('dispose', () => {
+    it('should reset room info and title', () => {
+      const spy = jest.spyOn(titleService, 'setTitle');
+
+      handler.handleMessage('Info', { name: 'Test' });
+      handler.dispose();
+
+      expect(handler.roomInfo$.value).toBeNull();
+      expect(spy).toHaveBeenCalledWith('WebMud3');
+    });
+  });
+});
diff --git a/frontend/src/app/features/gmcp-room/room-gmcp-handler.ts b/frontend/src/app/features/gmcp-room/room-gmcp-handler.ts
new file mode 100644
index 0000000..68a6ada
--- /dev/null
+++ b/frontend/src/app/features/gmcp-room/room-gmcp-handler.ts
@@ -0,0 +1,80 @@
+import { inject, Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { BehaviorSubject } from 'rxjs';
+
+import type { GmcpModuleHandler } from '../gmcp/gmcp-module-handler';
+
+/**
+ * Room information received from the MUD via GMCP.
+ */
+export interface RoomInfo {
+  /** Room name */
+  name?: string;
+  /** Domain or area name */
+  domain?: string;
+  /** Available exits from this room */
+  exits?: string[];
+}
+
+/**
+ * GMCP handler for the `Room` module.
+ *
+ * Handles:
+ * - `Room.Info` → Room name, domain, and exits
+ *
+ * Minimal implementation:
+ * - Updates the browser tab title with the room name
+ * - Exposes room info as a reactive observable for future UI use
+ *   (e.g. exit buttons, mini-map)
+ */
+@Injectable({ providedIn: 'root' })
+export class RoomGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Room';
+  readonly version = '1';
+
+  private readonly titleService = inject(Title);
+
+  /** Reactive stream of current room information */
+  public readonly roomInfo$ = new BehaviorSubject<RoomInfo | null>(null);
+
+  /**
+   * Routes incoming GMCP `Room.*` messages.
+   */
+  handleMessage(message: string, data: unknown): void {
+    switch (message) {
+      case 'Info':
+        this.handleRoomInfo(data as RoomInfo);
+        break;
+
+      default:
+        console.debug(`[RoomGmcpHandler] Unknown message: Room.${message}`, data);
+    }
+  }
+
+  /**
+   * Cleanup.
+   */
+  dispose(): void {
+    this.roomInfo$.next(null);
+    this.titleService.setTitle('WebMud3');
+
+    console.info('[RoomGmcpHandler] Disposed.');
+  }
+
+  /**
+   * Handles `Room.Info`: stores room data and updates browser title.
+   */
+  private handleRoomInfo(data: RoomInfo): void {
+    this.roomInfo$.next(data);
+
+    // Update browser tab title with room name
+    if (data.name !== undefined && data.name !== '') {
+      this.titleService.setTitle(`${data.name} - WebMud3`);
+    }
+
+    console.debug(
+      `[RoomGmcpHandler] Room.Info: ${data.name ?? '(unnamed)'}`,
+      data.exits ?? [],
+    );
+  }
+}
diff --git a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
index cf19a45..125a706 100644
--- a/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
+++ b/frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts
@@ -8,6 +8,7 @@ import { FilesGmcpHandler } from '../gmcp-files/files-gmcp-handler';
 import { InputGmcpHandler } from '../gmcp-input/input-gmcp-handler';
 import { NumpadGmcpHandler } from '../gmcp-numpad/numpad-gmcp-handler';
 import { CommGmcpHandler } from '../gmcp-comm/comm-gmcp-handler';
+import { RoomGmcpHandler } from '../gmcp-room/room-gmcp-handler';
 
 /**
  * Central GMCP bootstrap service.
@@ -32,6 +33,7 @@ export class GmcpBootstrapService {
   private readonly inputHandler = inject(InputGmcpHandler);
   private readonly numpadHandler = inject(NumpadGmcpHandler);
   private readonly commHandler = inject(CommGmcpHandler);
+  private readonly roomHandler = inject(RoomGmcpHandler);
 
   private initialized = false;
 
@@ -51,6 +53,7 @@ export class GmcpBootstrapService {
     this.gmcpService.registerModule(this.inputHandler);
     this.gmcpService.registerModule(this.numpadHandler);
     this.gmcpService.registerModule(this.commHandler);
+    this.gmcpService.registerModule(this.roomHandler);
 
     this.initialized = true;
 

From 8c3ef90740a189609440b56364193c5294ec74b3 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 13:50:27 +0100
Subject: [PATCH 22/30] editor searchbox keybindings against xterm

---
 .../features/gmcp-files/editor.component.ts   | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/src/app/features/gmcp-files/editor.component.ts b/frontend/src/app/features/gmcp-files/editor.component.ts
index 443b371..d96e2ee 100644
--- a/frontend/src/app/features/gmcp-files/editor.component.ts
+++ b/frontend/src/app/features/gmcp-files/editor.component.ts
@@ -229,11 +229,21 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  /**
+   * Prevents keyboard events inside the editor from propagating to the terminal.
+   * Without this, Ctrl+C/V/F and other shortcuts would be intercepted by xterm.js.
+   */
+  private readonly stopPropagation = (event: KeyboardEvent): void => {
+    event.stopPropagation();
+  };
+
   async ngAfterViewInit(): Promise<void> {
     // Dynamic import for lazy loading (~1MB)
     const ace = await import('ace-builds');
     await import('ace-builds/src-noconflict/mode-c_cpp');
     await import('ace-builds/src-noconflict/mode-text');
+    // Load search extension for Ctrl+F / Ctrl+H support
+    await import('ace-builds/src-noconflict/ext-searchbox');
 
     this.aceEditor = ace.edit(this.editorContainer.nativeElement);
     this.aceEditor.setAutoScrollEditorIntoView(true);
@@ -256,11 +266,21 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     this.aceSession.setMode(`ace/mode/${mode}`);
     this.aceEditor.setSession(this.aceSession);
     this.aceEditor.setReadOnly(this.readOnly);
+
+    // Prevent keyboard events from reaching the terminal
+    this.editorContainer.nativeElement.addEventListener('keydown', this.stopPropagation);
+    this.editorContainer.nativeElement.addEventListener('keyup', this.stopPropagation);
+    this.editorContainer.nativeElement.addEventListener('keypress', this.stopPropagation);
   }
 
   ngOnDestroy(): void {
     this.eventSub?.unsubscribe();
 
+    // Remove keyboard event interceptors
+    this.editorContainer.nativeElement.removeEventListener('keydown', this.stopPropagation);
+    this.editorContainer.nativeElement.removeEventListener('keyup', this.stopPropagation);
+    this.editorContainer.nativeElement.removeEventListener('keypress', this.stopPropagation);
+
     if (this.aceEditor !== undefined) {
       this.aceEditor.destroy();
     }

From c9a8285e511b5e575785941b44dc6041573412c1 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 13:57:38 +0100
Subject: [PATCH 23/30] multi-Mud-Selector

---
 frontend/src/app/app.component.html           |   4 +-
 frontend/src/app/app.component.ts             |   6 +-
 frontend/src/app/app.routes.ts                |  40 ++++
 .../mud-client/mud-client.component.ts        |   6 +-
 .../src/app/core/mud/services/mud.service.ts  |   7 +-
 frontend/src/app/features/mud-config/index.ts |   3 +
 .../mud-config/mud-client-shell.component.ts  |  42 +++++
 .../mud-config/mud-config.service.spec.ts     | 175 ++++++++++++++++++
 .../features/mud-config/mud-config.service.ts | 126 +++++++++++++
 .../mud-config/mud-selector.component.ts      | 161 ++++++++++++++++
 .../app/features/sockets/sockets.service.ts   |  12 +-
 frontend/src/main.ts                          |  16 ++
 12 files changed, 582 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/app/app.routes.ts
 create mode 100644 frontend/src/app/features/mud-config/index.ts
 create mode 100644 frontend/src/app/features/mud-config/mud-client-shell.component.ts
 create mode 100644 frontend/src/app/features/mud-config/mud-config.service.spec.ts
 create mode 100644 frontend/src/app/features/mud-config/mud-config.service.ts
 create mode 100644 frontend/src/app/features/mud-config/mud-selector.component.ts

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 3654e96..926b69f 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,4 +1,2 @@
 <app-menu-bar></app-menu-bar>
-<app-mud-client></app-mud-client>
-<app-char-statusbar></app-char-statusbar>
-<app-window-container></app-window-container>
+<router-outlet></router-outlet>
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 8d216bb..e790833 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,14 +1,12 @@
 import { Component } from '@angular/core';
-import { MudClientComponent } from '@webmud3/frontend/core/mud/components/mud-client/mud-client.component';
-import { CharStatusBarComponent } from '@webmud3/frontend/features/gmcp-char';
+import { RouterOutlet } from '@angular/router';
 import { MenuBarComponent } from '@webmud3/frontend/features/menu';
-import { WindowContainerComponent } from '@webmud3/frontend/features/windows';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  imports: [MenuBarComponent, MudClientComponent, CharStatusBarComponent, WindowContainerComponent],
+  imports: [RouterOutlet, MenuBarComponent],
   standalone: true,
 })
 export class AppComponent {}
diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
new file mode 100644
index 0000000..1828fe8
--- /dev/null
+++ b/frontend/src/app/app.routes.ts
@@ -0,0 +1,40 @@
+import { Routes } from '@angular/router';
+
+import { MudConfigService } from './features/mud-config/mud-config.service';
+import { MudSelectorComponent } from './features/mud-config/mud-selector.component';
+import { MudClientShellComponent } from './features/mud-config/mud-client-shell.component';
+
+/**
+ * Builds routes dynamically based on whether multi-MUD mode is active.
+ *
+ * - Multi-MUD mode: "/" shows MudSelector, "/:mudId" loads the client.
+ * - Single-MUD mode: "/" loads the client directly (no selector page).
+ */
+export function buildAppRoutes(mudConfig: MudConfigService): Routes {
+  if (mudConfig.isMultiMud) {
+    return [
+      {
+        path: '',
+        component: MudSelectorComponent,
+        pathMatch: 'full',
+      },
+      {
+        path: ':mudId',
+        component: MudClientShellComponent,
+      },
+    ];
+  }
+
+  // Single-MUD mode: go straight to the client
+  return [
+    {
+      path: '',
+      component: MudClientShellComponent,
+      pathMatch: 'full',
+    },
+    {
+      path: '**',
+      redirectTo: '',
+    },
+  ];
+}
diff --git a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
index dd607e8..af84083 100644
--- a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
+++ b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   ElementRef,
   inject,
+  Input,
   OnDestroy,
   ViewChild,
 } from '@angular/core';
@@ -120,6 +121,9 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
 
   private helperTextarea: HTMLTextAreaElement | null = null;
 
+  /** Optional MUD identifier for multi-MUD mode. Passed to the backend on connect. */
+  @Input() public mudId?: string;
+
   protected readonly isConnected$ = this.mudService.connectedToMud$;
   protected readonly showEcho$ = this.mudService.showEcho$;
 
@@ -255,7 +259,7 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
     const columns = this.terminal.cols;
     const rows = this.terminal.rows + 1;
 
-    this.mudService.connect({ columns, rows });
+    this.mudService.connect({ columns, rows }, this.mudId);
   }
 
   /**
diff --git a/frontend/src/app/core/mud/services/mud.service.ts b/frontend/src/app/core/mud/services/mud.service.ts
index b4237b2..531af6d 100644
--- a/frontend/src/app/core/mud/services/mud.service.ts
+++ b/frontend/src/app/core/mud/services/mud.service.ts
@@ -21,8 +21,11 @@ export class MudService {
   /** Emittiert isNewConnection wenn MUD-Verbindung hergestellt wurde */
   public readonly mudConnect$ = this.sockets.onMudConnect.asObservable();
 
-  public connect(initialViewPort: { columns: number; rows: number }) {
-    this.sockets.connectToMud(initialViewPort);
+  public connect(
+    initialViewPort: { columns: number; rows: number },
+    mudId?: string,
+  ) {
+    this.sockets.connectToMud(initialViewPort, mudId);
   }
 
   public disconnect() {
diff --git a/frontend/src/app/features/mud-config/index.ts b/frontend/src/app/features/mud-config/index.ts
new file mode 100644
index 0000000..a02ef8d
--- /dev/null
+++ b/frontend/src/app/features/mud-config/index.ts
@@ -0,0 +1,3 @@
+export { MudConfigService, MudListEntry, MudConfigResponse } from './mud-config.service';
+export { MudSelectorComponent } from './mud-selector.component';
+export { MudClientShellComponent } from './mud-client-shell.component';
diff --git a/frontend/src/app/features/mud-config/mud-client-shell.component.ts b/frontend/src/app/features/mud-config/mud-client-shell.component.ts
new file mode 100644
index 0000000..ba7edba
--- /dev/null
+++ b/frontend/src/app/features/mud-config/mud-client-shell.component.ts
@@ -0,0 +1,42 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { MudClientComponent } from '../../core/mud/components/mud-client/mud-client.component';
+import { CharStatusBarComponent } from '../gmcp-char';
+import { WindowContainerComponent } from '../windows';
+import { MudConfigService } from './mud-config.service';
+
+/**
+ * Route shell that reads the `:mudId` parameter and passes it to the
+ * MudClientComponent. Renders the full MUD UI (client + status bar + windows).
+ */
+@Component({
+  selector: 'app-mud-client-shell',
+  standalone: true,
+  imports: [MudClientComponent, CharStatusBarComponent, WindowContainerComponent],
+  template: `
+    <app-mud-client [mudId]="resolvedMudId"></app-mud-client>
+    <app-char-statusbar></app-char-statusbar>
+    <app-window-container></app-window-container>
+  `,
+})
+export class MudClientShellComponent implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+  private readonly mudConfig = inject(MudConfigService);
+
+  protected resolvedMudId?: string;
+
+  ngOnInit(): void {
+    const paramMudId = this.route.snapshot.paramMap.get('mudId');
+
+    if (paramMudId) {
+      // Resolve parameter: could be a direct mud ID or a route alias
+      this.resolvedMudId = this.mudConfig.resolveMudId(paramMudId) ?? paramMudId;
+    } else {
+      // No param → use default MUD (root route in single-MUD mode)
+      this.resolvedMudId = this.mudConfig.getDefaultMudId();
+    }
+
+    console.info('[MudClientShell] Resolved mudId:', this.resolvedMudId);
+  }
+}
diff --git a/frontend/src/app/features/mud-config/mud-config.service.spec.ts b/frontend/src/app/features/mud-config/mud-config.service.spec.ts
new file mode 100644
index 0000000..64ec0b4
--- /dev/null
+++ b/frontend/src/app/features/mud-config/mud-config.service.spec.ts
@@ -0,0 +1,175 @@
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing';
+
+import { MudConfigService, MudConfigResponse } from './mud-config.service';
+import { ServerConfigService } from '../serverconfig/server-config.service';
+
+describe('MudConfigService', () => {
+  let service: MudConfigService;
+  let httpTesting: HttpTestingController;
+
+  const multiMudResponse: MudConfigResponse = {
+    available: true,
+    muds: {
+      unitopia: {
+        name: 'UNItopia',
+        description: 'Das deutschsprachige MUD',
+        mudfamily: 'unitopia',
+      },
+      orbit: {
+        name: 'Orbit',
+        description: 'Test-MUD',
+        mudfamily: 'unitopia',
+      },
+    },
+    routes: {
+      '/': 'unitopia',
+      '/orbit': 'orbit',
+    },
+  };
+
+  const singleMudResponse: MudConfigResponse = {
+    available: false,
+    muds: {},
+    routes: {},
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        {
+          provide: ServerConfigService,
+          useValue: { getBackendUrl: () => 'http://localhost:5000' },
+        },
+      ],
+    });
+
+    service = TestBed.inject(MudConfigService);
+    httpTesting = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpTesting.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('load() in multi-MUD mode', () => {
+    it('should set isMultiMud to true', async () => {
+      const loadPromise = service.load();
+      const req = httpTesting.expectOne(
+        'http://localhost:5000/api/mud-config',
+      );
+      req.flush(multiMudResponse);
+      await loadPromise;
+
+      expect(service.isMultiMud).toBe(true);
+    });
+
+    it('should populate muds map', async () => {
+      const loadPromise = service.load();
+      httpTesting
+        .expectOne('http://localhost:5000/api/mud-config')
+        .flush(multiMudResponse);
+      await loadPromise;
+
+      expect(Object.keys(service.muds)).toEqual(['unitopia', 'orbit']);
+      expect(service.muds['unitopia'].name).toBe('UNItopia');
+    });
+
+    it('should resolve MUD ID for route', async () => {
+      const loadPromise = service.load();
+      httpTesting
+        .expectOne('http://localhost:5000/api/mud-config')
+        .flush(multiMudResponse);
+      await loadPromise;
+
+      expect(service.getMudIdForRoute('/')).toBe('unitopia');
+      expect(service.getMudIdForRoute('/orbit')).toBe('orbit');
+    });
+
+    it('should return default MUD ID', async () => {
+      const loadPromise = service.load();
+      httpTesting
+        .expectOne('http://localhost:5000/api/mud-config')
+        .flush(multiMudResponse);
+      await loadPromise;
+
+      expect(service.getDefaultMudId()).toBe('unitopia');
+    });
+
+    it('should resolve direct MUD IDs', async () => {
+      const loadPromise = service.load();
+      httpTesting
+        .expectOne('http://localhost:5000/api/mud-config')
+        .flush(multiMudResponse);
+      await loadPromise;
+
+      expect(service.resolveMudId('unitopia')).toBe('unitopia');
+      expect(service.resolveMudId('orbit')).toBe('orbit');
+    });
+
+    it('should resolve route-based IDs with and without leading slash', async () => {
+      const loadPromise = service.load();
+      httpTesting
+        .expectOne('http://localhost:5000/api/mud-config')
+        .flush(multiMudResponse);
+      await loadPromise;
+
+      expect(service.resolveMudId('orbit')).toBe('orbit');
+    });
+  });
+
+  describe('load() in single-MUD mode', () => {
+    it('should set isMultiMud to false', async () => {
+      const loadPromise = service.load();
+      httpTesting
+        .expectOne('http://localhost:5000/api/mud-config')
+        .flush(singleMudResponse);
+      await loadPromise;
+
+      expect(service.isMultiMud).toBe(false);
+    });
+
+    it('should return empty muds', async () => {
+      const loadPromise = service.load();
+      httpTesting
+        .expectOne('http://localhost:5000/api/mud-config')
+        .flush(singleMudResponse);
+      await loadPromise;
+
+      expect(Object.keys(service.muds)).toEqual([]);
+    });
+
+    it('should return undefined for default MUD ID', async () => {
+      const loadPromise = service.load();
+      httpTesting
+        .expectOne('http://localhost:5000/api/mud-config')
+        .flush(singleMudResponse);
+      await loadPromise;
+
+      expect(service.getDefaultMudId()).toBeUndefined();
+    });
+  });
+
+  describe('load() with network error', () => {
+    it('should fall back to single-MUD mode', async () => {
+      const loadPromise = service.load();
+      httpTesting
+        .expectOne('http://localhost:5000/api/mud-config')
+        .error(new ProgressEvent('error'));
+      await loadPromise;
+
+      expect(service.isMultiMud).toBe(false);
+      expect(Object.keys(service.muds)).toEqual([]);
+    });
+  });
+});
diff --git a/frontend/src/app/features/mud-config/mud-config.service.ts b/frontend/src/app/features/mud-config/mud-config.service.ts
new file mode 100644
index 0000000..986a468
--- /dev/null
+++ b/frontend/src/app/features/mud-config/mud-config.service.ts
@@ -0,0 +1,126 @@
+import { inject, Injectable } from '@angular/core';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+import { ServerConfigService } from '../serverconfig/server-config.service';
+
+/**
+ * Frontend representation of a MUD entry as returned by the backend.
+ */
+export interface MudListEntry {
+  /** Display name of the MUD */
+  name: string;
+  /** Human-readable description */
+  description: string;
+  /** MUD family key (e.g. "unitopia") */
+  mudfamily: string;
+}
+
+/**
+ * Response shape of `GET /api/mud-config`.
+ */
+export interface MudConfigResponse {
+  /** Whether a valid MUD config was loaded on the backend */
+  available: boolean;
+  /** Map of MUD IDs to their sanitized info */
+  muds: Record<string, MudListEntry>;
+  /** Map of URL routes (e.g. "/" or "/orbit") to MUD IDs */
+  routes: Record<string, string>;
+}
+
+/**
+ * Service that loads the multi-MUD configuration from the backend.
+ *
+ * When the backend has no `mud_config.json` loaded, the service reports
+ * `isMultiMud = false` and all lookups return `undefined` — the app then
+ * behaves as a single-MUD deployment using TELNET_HOST/PORT env vars.
+ */
+@Injectable({ providedIn: 'root' })
+export class MudConfigService {
+  private readonly http = inject(HttpClient);
+  private readonly serverConfig = inject(ServerConfigService);
+
+  private config: MudConfigResponse | null = null;
+  private readonly loaded = new BehaviorSubject<boolean>(false);
+
+  /** Emits `true` once the config has been loaded (even if multi-MUD is not available). */
+  public readonly loaded$ = this.loaded.asObservable();
+
+  /** Whether the backend has a multi-MUD config loaded. */
+  public get isMultiMud(): boolean {
+    return this.config?.available === true;
+  }
+
+  /** Returns the full MUD list (empty object if single-MUD mode). */
+  public get muds(): Record<string, MudListEntry> {
+    return this.config?.muds ?? {};
+  }
+
+  /** Returns the route map (empty object if single-MUD mode). */
+  public get routes(): Record<string, string> {
+    return this.config?.routes ?? {};
+  }
+
+  /**
+   * Resolves a route path (e.g. "/" or "/orbit") to the corresponding MUD ID.
+   */
+  public getMudIdForRoute(routePath: string): string | undefined {
+    return this.routes[routePath];
+  }
+
+  /**
+   * Resolves a MUD ID from the route map or returns the ID itself if it
+   * exists as a direct key in the muds map.
+   */
+  public resolveMudId(idOrRoute: string): string | undefined {
+    // First try direct lookup
+    if (this.muds[idOrRoute]) {
+      return idOrRoute;
+    }
+
+    // Then try route lookup (with leading slash)
+    const routeKey = idOrRoute.startsWith('/') ? idOrRoute : `/${idOrRoute}`;
+    return this.routes[routeKey];
+  }
+
+  /**
+   * Returns the default MUD ID (the one mapped to "/").
+   */
+  public getDefaultMudId(): string | undefined {
+    return this.routes['/'];
+  }
+
+  /**
+   * Loads the MUD config from the backend.
+   * Called during app initialization.
+   */
+  public async load(): Promise<void> {
+    try {
+      const backendUrl = this.serverConfig
+        .getBackendUrl()
+        .replace(/\/$/, '');
+
+      const response = await firstValueFrom(
+        this.http.get<MudConfigResponse>(`${backendUrl}/api/mud-config`),
+      );
+
+      this.config = response;
+
+      console.info(
+        '[MudConfigService] Loaded config:',
+        response.available
+          ? `${Object.keys(response.muds).length} MUDs available`
+          : 'Single-MUD mode',
+      );
+    } catch (error) {
+      console.warn(
+        '[MudConfigService] Failed to load MUD config, assuming single-MUD mode.',
+        error,
+      );
+
+      this.config = { available: false, muds: {}, routes: {} };
+    }
+
+    this.loaded.next(true);
+  }
+}
diff --git a/frontend/src/app/features/mud-config/mud-selector.component.ts b/frontend/src/app/features/mud-config/mud-selector.component.ts
new file mode 100644
index 0000000..2dbf278
--- /dev/null
+++ b/frontend/src/app/features/mud-config/mud-selector.component.ts
@@ -0,0 +1,161 @@
+import { Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { MudConfigService, MudListEntry } from './mud-config.service';
+
+/**
+ * Landing page that shows all available MUDs and lets the user pick one.
+ *
+ * Displayed when multi-MUD mode is active and the user navigates to "/".
+ * Each card shows name, description, and MUD family. Clicking navigates
+ * to `/:mudId` which bootstraps the MudClientComponent.
+ */
+@Component({
+  selector: 'app-mud-selector',
+  standalone: true,
+  template: `
+    <div class="mud-selector" role="main" aria-label="MUD-Auswahl">
+      <h1 class="mud-selector__title">WebMUD 3</h1>
+      <p class="mud-selector__subtitle">Wähle ein MUD zum Verbinden:</p>
+
+      <ul class="mud-selector__list" role="list">
+        @for (entry of mudEntries; track entry.id) {
+          <li class="mud-selector__item" role="listitem">
+            <button
+              class="mud-card"
+              (click)="selectMud(entry.id)"
+              (keydown.enter)="selectMud(entry.id)"
+              [attr.aria-label]="'Verbinden mit ' + entry.mud.name"
+            >
+              <span class="mud-card__name">{{ entry.mud.name }}</span>
+              <span class="mud-card__description">{{ entry.mud.description }}</span>
+              <span class="mud-card__family">{{ entry.mud.mudfamily }}</span>
+            </button>
+          </li>
+        }
+      </ul>
+
+      @if (mudEntries.length === 0) {
+        <p class="mud-selector__empty">Keine MUDs konfiguriert.</p>
+      }
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      min-height: 100vh;
+      background: #1e1e2e;
+      color: #cdd6f4;
+      font-family: 'JetBrainsMono', 'Segoe UI', sans-serif;
+      padding: 2rem;
+    }
+
+    .mud-selector {
+      max-width: 800px;
+      width: 100%;
+    }
+
+    .mud-selector__title {
+      font-size: 2rem;
+      font-weight: 700;
+      margin: 0 0 0.5rem;
+      color: #cba6f7;
+    }
+
+    .mud-selector__subtitle {
+      font-size: 1rem;
+      margin: 0 0 2rem;
+      color: #a6adc8;
+    }
+
+    .mud-selector__list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 1rem;
+    }
+
+    .mud-selector__item {
+      display: contents;
+    }
+
+    .mud-card {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 1.25rem 1.5rem;
+      background: #313244;
+      border: 2px solid #45475a;
+      border-radius: 12px;
+      cursor: pointer;
+      text-align: left;
+      transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
+      color: #cdd6f4;
+      font-family: inherit;
+      font-size: 1rem;
+      width: 100%;
+    }
+
+    .mud-card:hover,
+    .mud-card:focus-visible {
+      border-color: #cba6f7;
+      box-shadow: 0 4px 16px rgba(203, 166, 247, 0.15);
+      transform: translateY(-2px);
+      outline: none;
+    }
+
+    .mud-card:active {
+      transform: translateY(0);
+    }
+
+    .mud-card__name {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #f5c2e7;
+    }
+
+    .mud-card__description {
+      font-size: 0.9rem;
+      color: #bac2de;
+      line-height: 1.4;
+    }
+
+    .mud-card__family {
+      font-size: 0.75rem;
+      color: #6c7086;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .mud-selector__empty {
+      text-align: center;
+      color: #6c7086;
+      font-style: italic;
+      margin-top: 2rem;
+    }
+  `],
+})
+export class MudSelectorComponent {
+  private readonly mudConfig = inject(MudConfigService);
+  private readonly router = inject(Router);
+
+  /** Flattened list of MUD entries for the template. */
+  protected readonly mudEntries: Array<{ id: string; mud: MudListEntry }>;
+
+  constructor() {
+    const muds = this.mudConfig.muds;
+
+    this.mudEntries = Object.entries(muds).map(([id, mud]) => ({ id, mud }));
+  }
+
+  /**
+   * Navigates to the MUD client route for the selected MUD.
+   */
+  protected selectMud(mudId: string): void {
+    this.router.navigate(['/', mudId]);
+  }
+}
diff --git a/frontend/src/app/features/sockets/sockets.service.ts b/frontend/src/app/features/sockets/sockets.service.ts
index 3b08cdd..35caadf 100644
--- a/frontend/src/app/features/sockets/sockets.service.ts
+++ b/frontend/src/app/features/sockets/sockets.service.ts
@@ -163,14 +163,14 @@ export class SocketsService {
     );
   }
 
-  public connectToMud(initialViewPort: {
-    columns: number;
-    rows: number;
-  }): void {
+  public connectToMud(
+    initialViewPort: { columns: number; rows: number },
+    mudId?: string,
+  ): void {
     console.log(
-      `[Sockets] Sockets-Service: 'connectToMud' with sessionToken: ${this.sessionToken}`,
+      `[Sockets] Sockets-Service: 'connectToMud' with sessionToken: ${this.sessionToken}, mudId: ${mudId ?? '(default)'}`,
     );
-    this.socket.emit('mudConnect', initialViewPort, this.sessionToken);
+    this.socket.emit('mudConnect', initialViewPort, this.sessionToken, mudId);
   }
 
   public disconnectFromMud() {
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 9eef694..ada7786 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,4 +1,6 @@
 import { enableProdMode, inject, provideAppInitializer } from '@angular/core';
+import { ROUTES } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { environment } from './environments/environment';
 import {
@@ -10,6 +12,8 @@ import { AppComponent } from './app/app.component';
 import { ServerConfigService } from './app/features/serverconfig/server-config.service';
 import { GmcpBootstrapService } from './app/features/gmcp/gmcp-bootstrap.service';
 import { MenuBootstrapService } from './app/features/menu/menu-bootstrap.service';
+import { MudConfigService } from './app/features/mud-config/mud-config.service';
+import { buildAppRoutes } from './app/app.routes';
 
 if (environment.production) {
   enableProdMode();
@@ -18,11 +22,17 @@ if (environment.production) {
 bootstrapApplication(AppComponent, {
   providers: [
     provideHttpClient(withInterceptorsFromDi()),
+    provideRouter([], withComponentInputBinding()),
     provideAppInitializer(() => {
       const config = inject(ServerConfigService);
 
       return config.load();
     }),
+    provideAppInitializer(() => {
+      const mudConfig = inject(MudConfigService);
+
+      return mudConfig.load();
+    }),
     provideAppInitializer(() => {
       const gmcpBootstrap = inject(GmcpBootstrapService);
 
@@ -33,5 +43,11 @@ bootstrapApplication(AppComponent, {
 
       menuBootstrap.bootstrap();
     }),
+    {
+      provide: ROUTES,
+      useFactory: (mudConfig: MudConfigService) => buildAppRoutes(mudConfig),
+      deps: [MudConfigService],
+      multi: true,
+    },
   ],
 }).catch((err) => console.error(err));

From fb666763b524f1c6b355eff50bbe16f039d1171c Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 14:03:10 +0100
Subject: [PATCH 24/30] env and dockerfiles for uni and sb

---
 dockerfiles/README.md                         | 181 +++++++++---------
 dockerfiles/w3_docker_compose.yml             |  18 +-
 dockerfiles/w3_docker_compose_local.yml       |  24 +--
 dockerfiles/w3_docker_compose_sb.yml          |  15 +-
 dockerfiles/w3_docker_compose_secret.yml      |  20 +-
 dockerfiles/w3_docker_compose_test.yml        |  17 +-
 dockerfiles/w3_docker_compose_test_neu.yml    |  17 +-
 dockerfiles/w3_docker_compose_with_apache.yml |  20 +-
 frontend/angular.json                         |  56 ++++++
 .../src/environments/environment.prod.sb.ts   |  13 ++
 .../src/environments/environment.prod.uni.ts  |  15 ++
 11 files changed, 257 insertions(+), 139 deletions(-)
 create mode 100644 frontend/src/environments/environment.prod.sb.ts
 create mode 100644 frontend/src/environments/environment.prod.uni.ts

diff --git a/dockerfiles/README.md b/dockerfiles/README.md
index 1963b9e..a09d342 100644
--- a/dockerfiles/README.md
+++ b/dockerfiles/README.md
@@ -1,123 +1,130 @@
-# README for docker commands
-
-### To adjust versions:  webmud3\UI8\src\app\shared\server-config.service.ts
-
-
-### To build the docker images 
+# Docker Deployment Guide
+
+## Environment Variables
+
+| Variable | Required | Default | Description |
+|----------|----------|---------|-------------|
+| `HOST` | No | `0.0.0.0` | IP the backend listens on |
+| `PORT` | No | `5000` | Port the backend listens on |
+| `TELNET_HOST` | Yes* | `localhost` | MUD server hostname |
+| `TELNET_PORT` | Yes* | `23` | MUD server port |
+| `TELNET_TLS` | No | `false` | Use TLS for telnet |
+| `SOCKET_ROOT` | Yes | `/socket.io` | Socket.IO path |
+| `SOCKET_TIMEOUT` | No | `900000` | Session timeout (ms) |
+| `MUD_CONFIG_PATH` | No | - | Path to `mud_config.json` for multi-MUD mode |
+| `CORS_ALLOWED_ORIGINS` | No | - | Comma-separated origins for CORS |
+| `LOG_LEVEL` | No | `debug` | Winston log level |
+| `ENVIRONMENT` | No | `production` | `production` or `development` |
+| `NAME` | No | `webmud3b` | Client name sent to MUD |
+
+*Required unless `MUD_CONFIG_PATH` is set (then per-MUD host/port from config).
+
+## Build Docker Images
+
+```bash
+# Default (latest)
+docker build -f Dockerfile -t myonara/webmud3:latest .
 
+# Development
 docker build -f Dockerfile -t myonara/webmud3:develop .
 
-docker build -f Dockerfile -t myonara/webmud3:latest .
-
+# UNItopia Test
 docker build -f dockerfiles/ng_unitopia_test.dockerfile -t myonara/webmud3:unitopiatest .
+```
 
-### To run the docker containers in a swarm:
+## Deployment Variants
 
-docker stack deploy -c dockerfiles/w3_docker_compose_local.yml webmud3alocal
-
-docker stack deploy -c dockerfiles/w3_docker_compose.yml webmud3a
+### Docker Compose (recommended)
 
-docker stack deploy -c dockerfiles/w3_docker_compose_test.yml webmud3atest
+```bash
+# Local development
+docker compose -f dockerfiles/wm3_local_dev.yml -p webmud3dev up -d
 
-docker stack deploy -c dockerfiles/w3_docker_compose_sb.yml webmud3sb
+# UNItopia Production
+docker compose -f dockerfiles/w3_docker_compose.yml -p webmud3 up -d
 
-docker stack rm webmud3atest
+# UNItopia Test
+docker compose -f dockerfiles/w3_docker_compose_test.yml -p webmud3test up -d
 
-### Test docker containers as standalone
+# Seifenblase Production
+docker compose -f dockerfiles/w3_docker_compose_sb.yml -p webmud3sb up -d
 
-docker run -d -p 2018:5000 --name webmud3local myonara/webmud3:latest
+# With Apache Reverse Proxy
+docker compose -f dockerfiles/w3_docker_compose_with_apache.yml -p webmud3apache up -d
 
-docker run -d --name mudconnOrbit myonara/mdconn:v0.0.6
+# With TLS Secrets
+docker compose -f dockerfiles/w3_docker_compose_secret.yml -p webmud3tls up -d
+```
 
-docker run -d -p 50000:80 --name helloplain -P nginxdemos/hello:plain-text
+### Docker Swarm (legacy)
 
-### Alternative podman compose
-#### to start
+```bash
+docker stack deploy -c dockerfiles/w3_docker_compose.yml webmud3a
+docker stack deploy -c dockerfiles/w3_docker_compose_test.yml webmud3atest
+docker stack deploy -c dockerfiles/w3_docker_compose_sb.yml webmud3sb
+docker stack deploy -c dockerfiles/w3_docker_compose_local.yml webmud3alocal
 
-docker compose -f dockerfiles/wm_dev_mystiker.yml -p webmud3dev up -d
+# Remove a stack
+docker stack rm webmud3atest
+```
 
-docker compose -f dockerfiles/wm3_local_dev.yml -p webmud3dev up -d
+### Podman Compose (alternative)
 
+```bash
 podman-compose -f dockerfiles/w3_docker_compose.yml -p webmud_unitopia up -d
-
 podman-compose -f dockerfiles/w3_docker_compose_sb.yml -p webmud_seifenblase up -d
-
 podman-compose -f dockerfiles/w3_docker_compose_test.yml -p webmud_test up -d
-    
-podman-compose -f dockerfiles/w3_docker_compose_test_neu.yml -p webmud_test up -d
-    
-####  to stop
-
-podman-compose -f dockerfiles/w3_docker_compose.yml -p webmud_unitopia down
-    
-podman-compose -f dockerfiles/w3_docker_compose_sb.yml -p webmud_seifenblase down
-
-podman-compose -f dockerfiles/w3_docker_compose_test.yml -p webmud_test down
-    
-podman-compose -f dockerfiles/w3_docker_compose_test_neu.yml -p webmud_test down
-    
-####  to get new imges:
 
+# Pull new images
 podman pull myonara/webmud3:latest
-
 podman pull myonara/webmud3:unitopiatest
+```
 
+### Standalone (testing)
 
-### docker commands for diagnosis:
-grep dockerd /var/log/daemon.log
-
-#### List services (stack deploys) and details:
-
-docker service ls
-
-docker service ps --no-trunc webmud3a_web
-
-docker service ps --no-trunc webmud3atest_web
-
-docker service ps --no-trunc webmud3alocal_web
-
-#### get container id and logs
-
-docker container ls 
-
-docker logs --follow <contaienrid>
-
-#### testing images:
-
-cd mdconn/test_ipc/
-
-docker build -f Dockerfile -t test/test-ipc .
-
-docker stack deploy -c docker-compose.yml testipc
-
-docker stack rm testipc
-
-cd mdconn/mudrpc
-
-docker build -t myonara/test-rpc .
-
-docker run -it myonara/test-rpc /bin/sh
-
-docker run --volume /UNItopia/ftpwww/webmud3/run/sockets/:/run/sockets -it myonara/test-rpc /bin/sh
+```bash
+docker run -d -p 2018:5000 --name webmud3local myonara/webmud3:latest
+```
 
-docker run --volume /UNItopia/ftpwww/webmud3/run/sockets/:/run/sockets -e SOCKETFILE=/run/sockets/mudfifo myonara/test-rpc node testclient.js
+## Compose Files Overview
 
-ls -al /UNItopia/ftpwww/webmud3/run/sockets/
+| File | Deployment | Socket Path | Port |
+|------|-----------|-------------|------|
+| `wm3_local_dev.yml` | Local dev | `/mysocket.io` | 2018 |
+| `w3_docker_compose.yml` | UNItopia prod | `/mysocket.io` | 2018 |
+| `w3_docker_compose_test.yml` | UNItopia test | `/mysocket-test.io` | 2019 |
+| `w3_docker_compose_sb.yml` | Seifenblase prod | `/sbsocket.io` | 2020 |
+| `w3_docker_compose_local.yml` | Local standalone | `/socket.io` | 2018 |
+| `w3_docker_compose_with_apache.yml` | Apache reverse proxy | `/mysocket.io` | 2018 |
+| `w3_docker_compose_secret.yml` | TLS with secrets | `/mysocket.io` | 2018 |
 
-docker stack deploy -c docker-test-rpc.yml testmudrpc
+## Angular Build Configurations
 
-docker stack rm testmudrpc
+```bash
+# Default (development)
+ng build
 
-### Obsolete docker commands
+# Generic production
+ng build --configuration=production
 
-docker build -f dockerfiles/mdconn.dockerfile -t myonara/mdconn:v0.0.17 .
+# UNItopia production
+ng build --configuration=production-unitopia
 
-docker stack deploy -c dockerfiles/w3_docker_compose_secret.yml webmud3a
+# Seifenblase production
+ng build --configuration=production-seifenblase
+```
 
-docker stack deploy -c dockerfiles/w3_docker_compose_with_apache.yml webmud3a
+## Diagnostic Commands
 
-docker stack deploy -c dockerfiles/w3mdc_docker_compose.yml mdconn
+```bash
+# List services
+docker service ls
+docker service ps --no-trunc webmud3_web
 
-docker attach <containerid>
+# Container logs
+docker container ls
+docker logs --follow <container-id>
 
-docker exec -ti node:alpine /bin/sh
+# System logs
+grep dockerd /var/log/daemon.log
+```
diff --git a/dockerfiles/w3_docker_compose.yml b/dockerfiles/w3_docker_compose.yml
index 8efe47e..8a5b959 100644
--- a/dockerfiles/w3_docker_compose.yml
+++ b/dockerfiles/w3_docker_compose.yml
@@ -1,16 +1,19 @@
-version: "3.7"
+# UNItopia Production Deployment
+# docker compose -f dockerfiles/w3_docker_compose.yml -p webmud3 up -d
 services:
   web:
-    # replace username/repo:tag with your name and image details
     image: myonara/webmud3:latest
-    environment: 
+    environment:
       NODE_ENV: 'production'
-      SECRET_CONFIG: '/run/webmud3.json'
-      MUD_CONFIG: '/run/mud_config_unitopia.json'
-      WEBMUD3_DISTRIBUTION_TYPE: 'unitopia-prod'
+      HOST: '0.0.0.0'
+      PORT: 5000
+      SOCKET_ROOT: '/mysocket.io'
+      SOCKET_TIMEOUT: 900000
+      MUD_CONFIG_PATH: '/run/mud_config_unitopia.json'
+      CORS_ALLOWED_ORIGINS: 'https://www.unitopia.de'
+      LOG_LEVEL: 'info'
     volumes:
       - "/UNItopia/ftpwww/webmud3/run:/run"
-    # command: --tls-cert=/run/secrets/cert.pem --tls-key=/run/secrets/privkey.pem
     deploy:
       replicas: 1
       resources:
@@ -29,5 +32,4 @@ services:
       - webnet
 networks:
   webnet:
-    #driver: overlay
     attachable: true
diff --git a/dockerfiles/w3_docker_compose_local.yml b/dockerfiles/w3_docker_compose_local.yml
index cc7f69c..6d1d84c 100644
--- a/dockerfiles/w3_docker_compose_local.yml
+++ b/dockerfiles/w3_docker_compose_local.yml
@@ -1,25 +1,28 @@
-version: "3.7"
+# Local Development Deployment (without code mounting)
+# docker compose -f dockerfiles/w3_docker_compose_local.yml -p webmud3local up -d
 services:
   web:
-    # replace username/repo:tag with your name and image details
     image: myonara/webmud3:latest
-    environment: 
+    environment:
       NODE_ENV: 'production'
-    # command: --tls-cert=/run/secrets/cert.pem --tls-key=/run/secrets/privkey.pem
+      HOST: '0.0.0.0'
+      PORT: 5000
+      TELNET_HOST: 'host.docker.internal'
+      TELNET_PORT: 4000
+      TELNET_TLS: 'false'
+      SOCKET_ROOT: '/socket.io'
+      SOCKET_TIMEOUT: 900000
+      LOG_LEVEL: 'debug'
     deploy:
       replicas: 1
       resources:
         limits:
           cpus: "0.1"
           memory: 50M
-      labels:
-        com.docker.lb.hosts: www.unitopia.de
-        com.docker.lb.network: webnet
-        com.docker.lb.port: 2018
       restart_policy:
         condition: on-failure
         delay: 20s
-        max_attempts: 2 
+        max_attempts: 2
         window: 3600s
     ports:
       - "2018:5000"
@@ -27,5 +30,4 @@ services:
       - webnet
 networks:
   webnet:
-    driver: overlay
-    attachable: true
+    driver: bridge
diff --git a/dockerfiles/w3_docker_compose_sb.yml b/dockerfiles/w3_docker_compose_sb.yml
index 87e4d1d..7ee53bf 100644
--- a/dockerfiles/w3_docker_compose_sb.yml
+++ b/dockerfiles/w3_docker_compose_sb.yml
@@ -1,12 +1,17 @@
-version: "3.7"
+# Seifenblase Production Deployment
+# docker compose -f dockerfiles/w3_docker_compose_sb.yml -p webmud3sb up -d
 services:
   web:
     image: myonara/webmud3:latest
-    environment: 
+    environment:
       NODE_ENV: 'production'
-      SECRET_CONFIG: '/run/webmud3sb.json'
-      MUD_CONFIG: '/run/mud_config_seifenblase.json'
-      WEBMUD3_DISTRIBUTION_TYPE: 'seifenblase'
+      HOST: '0.0.0.0'
+      PORT: 5000
+      SOCKET_ROOT: '/sbsocket.io'
+      SOCKET_TIMEOUT: 900000
+      MUD_CONFIG_PATH: '/run/mud_config_seifenblase.json'
+      CORS_ALLOWED_ORIGINS: 'https://seife.mud.de,https://seifenblase.de,https://www.seifenblase.de,https://mud.seifenblase.de,https://seifenblase.mud.de'
+      LOG_LEVEL: 'info'
     volumes:
       - "/UNItopia/ftpwww/webmud3/run:/run"
     deploy:
diff --git a/dockerfiles/w3_docker_compose_secret.yml b/dockerfiles/w3_docker_compose_secret.yml
index e6074bf..af28ade 100644
--- a/dockerfiles/w3_docker_compose_secret.yml
+++ b/dockerfiles/w3_docker_compose_secret.yml
@@ -1,14 +1,17 @@
-version: "3.7"
+# UNItopia Production with TLS Secrets
+# docker compose -f dockerfiles/w3_docker_compose_secret.yml -p webmud3tls up -d
 services:
   web:
-    # replace username/repo:tag with your name and image details
-    image: myonara/webmud3:v0.0.36
-    environment: 
+    image: myonara/webmud3:latest
+    environment:
       NODE_ENV: 'production'
-      TLS: 'true'
-      TLS_KEY: '/run/secrets/privkey.pem'
-      TLS_CERT: '/run/secrets/cert.pem'
-    # command: --tls-cert=/run/secrets/cert.pem --tls-key=/run/secrets/privkey.pem
+      HOST: '0.0.0.0'
+      PORT: 5000
+      SOCKET_ROOT: '/mysocket.io'
+      SOCKET_TIMEOUT: 900000
+      MUD_CONFIG_PATH: '/run/mud_config_unitopia.json'
+      CORS_ALLOWED_ORIGINS: 'https://www.unitopia.de'
+      LOG_LEVEL: 'info'
     deploy:
       replicas: 1
       resources:
@@ -40,4 +43,3 @@ secrets:
     file: ../run/secrets/cert.pem
   www.unitopia.de.key:
     file: ../run/secrets/privkey.pem
-
diff --git a/dockerfiles/w3_docker_compose_test.yml b/dockerfiles/w3_docker_compose_test.yml
index c392270..6704d97 100644
--- a/dockerfiles/w3_docker_compose_test.yml
+++ b/dockerfiles/w3_docker_compose_test.yml
@@ -1,12 +1,17 @@
-version: "3.7"
+# UNItopia Test Deployment
+# docker compose -f dockerfiles/w3_docker_compose_test.yml -p webmud3test up -d
 services:
   web:
     image: myonara/webmud3:latest
-    environment: 
+    environment:
       NODE_ENV: 'production'
-      SECRET_CONFIG: '/run/webmud3test.json'
-      MUD_CONFIG: '/run/mud_config_unitopia_test.json'
-      WEBMUD3_DISTRIBUTION_TYPE: 'unitopia-test'
+      HOST: '0.0.0.0'
+      PORT: 5000
+      SOCKET_ROOT: '/mysocket-test.io'
+      SOCKET_TIMEOUT: 900000
+      MUD_CONFIG_PATH: '/run/mud_config_unitopia_test.json'
+      CORS_ALLOWED_ORIGINS: 'https://www.unitopia.de'
+      LOG_LEVEL: 'debug'
     volumes:
       - "/UNItopia/ftpwww/webmud3/run:/run"
     deploy:
@@ -22,7 +27,7 @@ services:
       restart_policy:
         condition: on-failure
         delay: 20s
-        max_attempts: 2 
+        max_attempts: 2
         window: 3600s
     ports:
       - "2019:5000"
diff --git a/dockerfiles/w3_docker_compose_test_neu.yml b/dockerfiles/w3_docker_compose_test_neu.yml
index 00eb090..b271d5a 100644
--- a/dockerfiles/w3_docker_compose_test_neu.yml
+++ b/dockerfiles/w3_docker_compose_test_neu.yml
@@ -1,12 +1,17 @@
-version: "3.7"
+# UNItopia Test Deployment (tagged image)
+# docker compose -f dockerfiles/w3_docker_compose_test_neu.yml -p webmud3testneu up -d
 services:
   web:
     image: myonara/webmud3:unitopiatest
-    environment: 
+    environment:
       NODE_ENV: 'production'
-      SECRET_CONFIG: '/run/webmud3test.json'
-      MUD_CONFIG: '/run/mud_config_unitopia_test.json'
-      WEBMUD3_DISTRIBUTION_TYPE: 'unitopia-test'
+      HOST: '0.0.0.0'
+      PORT: 5000
+      SOCKET_ROOT: '/mysocket-test.io'
+      SOCKET_TIMEOUT: 900000
+      MUD_CONFIG_PATH: '/run/mud_config_unitopia_test.json'
+      CORS_ALLOWED_ORIGINS: 'https://www.unitopia.de'
+      LOG_LEVEL: 'debug'
     volumes:
       - "/UNItopia/ftpwww/webmud3/run:/run"
     deploy:
@@ -22,7 +27,7 @@ services:
       restart_policy:
         condition: on-failure
         delay: 20s
-        max_attempts: 2 
+        max_attempts: 2
         window: 3600s
     ports:
       - "2019:5000"
diff --git a/dockerfiles/w3_docker_compose_with_apache.yml b/dockerfiles/w3_docker_compose_with_apache.yml
index ab8df3f..d630a44 100644
--- a/dockerfiles/w3_docker_compose_with_apache.yml
+++ b/dockerfiles/w3_docker_compose_with_apache.yml
@@ -1,11 +1,17 @@
-version: "3.7"
+# UNItopia Production with Apache Reverse Proxy
+# docker compose -f dockerfiles/w3_docker_compose_with_apache.yml -p webmud3apache up -d
 services:
   web:
-    # replace username/repo:tag with your name and image details
-    image: myonara/webmud3:v0.0.36
-    environment: 
+    image: myonara/webmud3:latest
+    environment:
       NODE_ENV: 'production'
-    # command: --tls-cert=/run/secrets/cert.pem --tls-key=/run/secrets/privkey.pem
+      HOST: '0.0.0.0'
+      PORT: 5000
+      SOCKET_ROOT: '/mysocket.io'
+      SOCKET_TIMEOUT: 900000
+      MUD_CONFIG_PATH: '/run/mud_config_unitopia.json'
+      CORS_ALLOWED_ORIGINS: 'https://www.unitopia.de'
+      LOG_LEVEL: 'info'
     deploy:
       replicas: 1
       resources:
@@ -21,7 +27,7 @@ services:
     ports:
       - "2018:5000"
     networks:
-      webnet:    
+      webnet:
         ipv4_address: 172.16.238.10
   apache:
     image: 'bitnami/apache:2.4'
@@ -36,7 +42,7 @@ services:
     volumes:
       - 'apache_data:/bitnami'
     networks:
-      webnet:    
+      webnet:
         ipv4_address: 172.16.238.11
 volumes:
   apache_data:
diff --git a/frontend/angular.json b/frontend/angular.json
index 173ab2c..3747b32 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -76,6 +76,56 @@
                   "maximumError": "10kb"
                 }
               ]
+            },
+            "production-unitopia": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.uni.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            },
+            "production-seifenblase": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.sb.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
             }
           }
         },
@@ -87,6 +137,12 @@
           "configurations": {
             "production": {
               "buildTarget": "frontend:build:production"
+            },
+            "production-unitopia": {
+              "buildTarget": "frontend:build:production-unitopia"
+            },
+            "production-seifenblase": {
+              "buildTarget": "frontend:build:production-seifenblase"
             }
           }
         },
diff --git a/frontend/src/environments/environment.prod.sb.ts b/frontend/src/environments/environment.prod.sb.ts
new file mode 100644
index 0000000..255ef56
--- /dev/null
+++ b/frontend/src/environments/environment.prod.sb.ts
@@ -0,0 +1,13 @@
+import { Environment } from './environment.interface';
+
+/**
+ * Seifenblase production environment.
+ *
+ * Deployed at https://seife.mud.de/webmud3/
+ * Backend is reverse-proxied by Apache on the same origin.
+ * The backend URL is derived from the current page location.
+ */
+export const environment: Environment = {
+  production: true,
+  backendUrl: () => window.location.origin,
+};
diff --git a/frontend/src/environments/environment.prod.uni.ts b/frontend/src/environments/environment.prod.uni.ts
new file mode 100644
index 0000000..d1de7bc
--- /dev/null
+++ b/frontend/src/environments/environment.prod.uni.ts
@@ -0,0 +1,15 @@
+import { Environment } from './environment.interface';
+
+/**
+ * UNItopia production environment.
+ *
+ * Deployed at https://www.unitopia.de/webmud3/
+ * Backend is reverse-proxied by Apache on the same origin.
+ * The backend URL is derived from the current page location:
+ * - origin: https://www.unitopia.de
+ * - Socket.IO path is configured server-side via /api/config
+ */
+export const environment: Environment = {
+  production: true,
+  backendUrl: () => window.location.origin,
+};

From 5f85380d8849cc4d412199383ac6b4cc9fc5a8de Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 14:11:13 +0100
Subject: [PATCH 25/30] migration plans and analysis

---
 dockerfiles/MIGRATION_V1.md |  734 ++++++++++++++++++++++++
 dockerfiles/MIGRATION_V2.md |  767 +++++++++++++++++++++++++
 dockerfiles/MIGRATION_V3.md | 1080 +++++++++++++++++++++++++++++++++++
 dockerfiles/U1_ANALYSIS.md  |  470 +++++++++++++++
 dockerfiles/U2_ANALYSIS.md  |  322 +++++++++++
 dockerfiles/U3_ANALYSIS.md  |  341 +++++++++++
 6 files changed, 3714 insertions(+)
 create mode 100644 dockerfiles/MIGRATION_V1.md
 create mode 100644 dockerfiles/MIGRATION_V2.md
 create mode 100644 dockerfiles/MIGRATION_V3.md
 create mode 100644 dockerfiles/U1_ANALYSIS.md
 create mode 100644 dockerfiles/U2_ANALYSIS.md
 create mode 100644 dockerfiles/U3_ANALYSIS.md

diff --git a/dockerfiles/MIGRATION_V1.md b/dockerfiles/MIGRATION_V1.md
new file mode 100644
index 0000000..6d52a4c
--- /dev/null
+++ b/dockerfiles/MIGRATION_V1.md
@@ -0,0 +1,734 @@
+# WebMud3 Migrationsplan: Master (u1) → Develop (u2)
+
+## 1. Kontext
+
+Die **Zielarchitektur** ist `u2_webmud3_develop` (TypeScript-Monorepo, Angular Standalone Components, xterm.js, Express 5). Der **Feature-Spender** ist `u1_webmud3_master` (Plain JS, PrimeNG, HTML-Span-Rendering, Express 4), der zahlreiche Features enthält, die in u2 noch fehlen.
+
+### 1.1 Technologische Grundlagen der Zielarchitektur (u2)
+
+| Aspekt                 | u2 (Develop – Ziel)                          |
+|------------------------|-----------------------------------------------|
+| **Backend-Sprache**    | TypeScript (strict)                           |
+| **Projekt-Struktur**   | npm Workspaces Monorepo (shared/backend/frontend) |
+| **Shared-Paket**       | `@webmud3/shared` – typisierte Socket-Events  |
+| **Angular-Stil**       | Standalone Components, `inject()` statt Constructor DI |
+| **Terminal-Rendering**  | xterm.js mit FitAddon, ClipboardAddon, AttachAddon |
+| **UI-Framework**       | Eigenes SCSS (kein PrimeNG)                   |
+| **Express**            | v5                                            |
+| **Logging**            | Winston                                       |
+| **Testing**            | Jest (Frontend + Backend)                     |
+| **CI/CD**              | GitHub Actions → Azure Web App + Docker Compose |
+| **Accessibility**      | Custom ARIA-Live-Region ScreenReader-Announcer |
+| **Reconnection**       | Session-Token + OutputLineBuffer-Replay       |
+
+### 1.2 Feature-Bestand der Quellarchitektur (u1)
+
+| Aspekt                 | u1 (Master – Quelle)                         |
+|------------------------|-----------------------------------------------|
+| **Backend-Sprache**    | Plain JavaScript (ES6+)                       |
+| **Projekt-Struktur**   | Separate Packages (kein Monorepo)             |
+| **Angular-Stil**       | NgModules                                     |
+| **Terminal-Rendering**  | HTML-Spans mit eigenem AnsiService            |
+| **UI-Framework**       | PrimeNG (Nora Theme)                          |
+| **Express**            | v4                                            |
+| **Logging**            | Custom ngxlogger                              |
+| **CI/CD**              | Jenkinsfile + Docker Compose                  |
+| **GMCP-Support**       | Umfangreich (15+ Module)                      |
+| **Code-Editor**        | Ace Editor (37 Themes)                        |
+| **Fenster-System**     | Eigenes Draggable/Resizable                   |
+
+---
+
+## 2. Analyse der Feature-Lücken
+
+Die folgende Tabelle zeigt alle wesentlichen Features, die von u1 nach u2 migriert werden müssen:
+
+| Feature | u1 (Master) | u2 (Develop) | Aufwand |
+|---------|-------------|--------------|---------|
+| GMCP-Protokoll | Vollständig (15+ Module) | Stub (`sendGmcp` wirft Error) | Hoch |
+| Multi-MUD-Support | 4 MUDs + Familien-System | Single-MUD via Env-Vars | Hoch |
+| Sound-System | GMCP Sound.Url/Event + HTML5 Audio | Nicht vorhanden | Mittel |
+| Datei-Browser + Code-Editor | Ace Editor (37 Themes) + DirList | Nicht vorhanden | Hoch |
+| Fenster-System (Modeless) | Eigenes Draggable/Resizable | Nicht vorhanden | Hoch |
+| Inventar-Anzeige | GMCP Char.Items | Nicht vorhanden | Mittel |
+| Charakter-Statistiken | GMCP Char.Status/Vitals/Stats | Nicht vorhanden | Mittel |
+| Menü-System | PrimeNG Menubar, dynamisch | Nicht vorhanden | Mittel |
+| Numpad/Keypad | MUD-synchron, konfigurierbar | Nicht vorhanden | Mittel |
+| Farbeinstellungen | Invertierung, B/W, Farben aus | Nur xterm-Theme | Niedrig |
+| Tab-Completion | GMCP Input.Complete | Nicht vorhanden | Niedrig |
+| Auth/RPC (experimentell) | REST Login + Unix-Socket RPC | Auskommentiert | Niedrig |
+| Multi-Deployment | 5+ Environment-Configs | 2 Environments (Dev/Prod) | Niedrig |
+| mdconn Microservice | Experimentell | Nicht vorhanden | Niedrig |
+
+---
+
+## 3. Migrationsprinzipien
+
+1. **Keine Rückschritte**: Accessibility (Screen Reader), TypeScript Strict, xterm.js, Standalone Components, Session-Token-Reconnection bleiben erhalten.
+2. **Typisierung**: Alle migrierten Features müssen vollständig typisiert sein (kein `any`).
+3. **Shared-First**: Neue Socket-Events und Typen immer zuerst in `@webmud3/shared` definieren.
+4. **Strategy Pattern statt Hardcoding**: MUD-Familien-spezifisches Verhalten über austauschbare Handler, nicht über `if (family === 'unitopia')`.
+5. **Lazy Loading**: GMCP-Feature-Module nur laden wenn aktiviert.
+6. **Tests**: Jeder neue Handler/Service braucht Unit-Tests (Jest).
+7. **Barrierefreiheit**: Alle neuen UI-Elemente (Fenster, Menüs, Dialoge) müssen ARIA-Attribute und Keyboard-Navigation unterstützen.
+
+---
+
+## 4. Migrationsstruktur (4 Phasen)
+
+Die Migration wird in **4 Phasen** organisiert, geordnet nach Abhängigkeiten:
+
+```
+Phase 1: Infrastruktur (GMCP-Grundlagen, Multi-MUD)
+    │
+    ▼
+Phase 2: UI-Framework (Fenstersystem, Menü, Farbeinstellungen)
+    │
+    ▼
+Phase 3: GMCP-Feature-Module (Sound, Files, Char, Input, Numpad, Comm)
+    │
+    ▼
+Phase 4: Deployment & Optionales (Routing, Multi-Deploy, Auth, mdconn)
+```
+
+---
+
+### Phase 1: Infrastruktur-Erweiterungen (Grundlagen)
+
+Schafft die Voraussetzungen für alle weiteren Features.
+
+#### 1.1 GMCP-Protokoll im Backend
+
+**Ziel:** Der Backend-TelnetClient kann GMCP-Nachrichten empfangen und senden.
+
+**Referenz-Implementierung:** `u1_webmud3_master/backend/mudSocket.js` (Zeilen 276–353)
+
+**Aufgaben:**
+
+- Neuen Telnet-Option-Handler `handle-gmcp-option.ts` in `u2_webmud3_develop/backend/src/features/telnet/utils/` erstellen
+- GMCP als `TELOPT_GMCP (201)` in `u2_webmud3_develop/backend/src/features/telnet/models/telnet-options.ts` registrieren
+- Subnegotiation-Parsing implementieren:
+  - Eingehend: Buffer → String → Split bei erstem Leerzeichen → `{module}.{message}` + JSON-Daten
+  - Format: `"Core.Hello {\"client\":\"WebMud3\"}"` → `module="Core"`, `message="Hello"`, `data={client:"WebMud3"}`
+- GMCP-Outgoing implementieren: `writeSub(201, Buffer.concat([moduleMsg, jsonData]))`
+- GMCP-WILL-Handling: Wenn MUD `WILL GMCP` sendet → `DO GMCP` antworten (wenn MUD-Familie GMCP unterstützt)
+- Event-Emission: `TelnetClient` emittiert `gmcpIncoming(module, message, data)` und `gmcpStart(gmcpSupport)`
+
+**Schnittstelle:**
+```typescript
+// In TelnetClient (EventEmitter)
+interface TelnetClientEvents {
+  // ... bestehende Events ...
+  gmcpIncoming: (module: string, message: string, data: unknown) => void;
+  gmcpStart: (gmcpSupport: GmcpSupport) => void;
+}
+
+// Neuer Handler
+interface GmcpOptionHandler extends TelnetOptionHandler {
+  sendGmcp(module: string, message: string, data: unknown): void;
+}
+```
+
+#### 1.2 GMCP Socket-Events im Shared-Paket
+
+**Ziel:** Typisierte Socket.IO-Events für GMCP-Kommunikation zwischen Frontend und Backend.
+
+**Aufgaben:**
+
+- Neue Typen-Dateien in `u2_webmud3_develop/shared/src/` anlegen:
+
+```typescript
+// shared/src/gmcp/gmcp-types.ts
+export interface GmcpModuleConfig {
+  version: string;
+  standard: boolean;
+  optional: boolean;
+}
+
+export interface GmcpSupport {
+  [moduleName: string]: GmcpModuleConfig;
+}
+
+export interface MudFamilyConfig {
+  charset: string;
+  MXP: boolean;
+  GMCP: boolean;
+  GMCP_Support: GmcpSupport;
+}
+
+export interface MudConfig {
+  name: string;
+  host: string;
+  port: number;
+  ssl: boolean;
+  rejectUnauthorized: boolean;
+  description: string;
+  playerlevel: string;
+  mudfamily: string;
+}
+
+export interface MudConfigFile {
+  scope: string;
+  href: string;
+  mudfamilies: Record<string, MudFamilyConfig>;
+  muds: Record<string, MudConfig>;
+  routes: Record<string, string>;
+}
+```
+
+- Bestehende Socket-Events erweitern:
+
+```typescript
+// ClientToServerEvents – neue Events:
+mudGmcpOutgoing: (module: string, message: string, data: unknown) => void;
+
+// ServerToClientEvents – neue Events:
+mudGmcpIncoming: (module: string, message: string, data: unknown) => void;
+mudGmcpStart: (gmcpSupport: GmcpSupport) => void;
+```
+
+- In `shared/src/index.ts` re-exportieren
+- `npm run build --workspace shared` ausführen
+
+#### 1.3 Multi-MUD-Konfiguration im Backend
+
+**Ziel:** Das Backend unterstützt dynamische MUD-Auswahl pro Verbindung statt fester Env-Vars.
+
+**Referenz:** `u1_webmud3_master/frontend/src/mud_config.json` und `u1_webmud3_master/backend/server.js`
+
+**Aufgaben:**
+
+- `MudConfigService` in `backend/src/core/config/` erstellen:
+  - Lädt `mud_config.json` beim Start
+  - Liefert MUD-Konfiguration nach MUD-ID
+  - Liefert MUD-Familien-Konfiguration (GMCP-Support, Charset, etc.)
+- `Environment` erweitern:
+  - `TELNET_HOST/PORT` werden zu Fallback-Defaults
+  - Neue Env-Var: `MUD_CONFIG_PATH` (Pfad zur `mud_config.json`)
+- `SocketManager.mudConnect`-Event erweitern:
+  - Neuer Parameter: `mudId?: string` (optional, für Rückwärtskompatibilität)
+  - Wenn `mudId` gesetzt → Telnet-Verbindung zur konfigurierten Host/Port-Kombination
+  - Wenn nicht gesetzt → Fallback auf Env-Var `TELNET_HOST/PORT`
+- Neuer REST-Endpoint: `GET /api/mud-config` liefert MUD-Liste ans Frontend
+- `ClientToServerEvents.mudConnect` Signatur erweitern:
+
+```typescript
+mudConnect: (
+  initialViewPort: { columns: number; rows: number },
+  sessionToken: string,
+  mudId?: string,  // NEU
+) => void;
+```
+
+#### 1.4 GMCP-Service im Frontend
+
+**Ziel:** Zentraler Service für GMCP-Modul-Verwaltung und Event-Routing.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/gmcp/gmcp.service.ts`
+
+**Aufgaben:**
+
+- Neuen Service `frontend/src/app/features/gmcp/gmcp.service.ts` erstellen:
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class GmcpService {
+  // Registry aller aktiven GMCP-Module pro Verbindung
+  private moduleRegistry = new Map<string, GmcpModuleHandler>();
+
+  // Observable-Streams für einzelne GMCP-Module
+  public readonly gmcpEvent$ = new Subject<GmcpEvent>();
+
+  registerModule(handler: GmcpModuleHandler): void { ... }
+  unregisterModule(moduleName: string): void { ... }
+  handleIncoming(module: string, message: string, data: unknown): void { ... }
+  sendOutgoing(module: string, message: string, data: unknown): void { ... }
+}
+```
+
+- `GmcpModuleHandler`-Interface definieren (Strategy Pattern):
+
+```typescript
+export interface GmcpModuleHandler {
+  readonly moduleName: string;
+  readonly version: string;
+  handleMessage(message: string, data: unknown): void;
+  getMenuItems?(): GmcpMenuItem[];
+}
+```
+
+- MUD-Familien-spezifische Handler-Factory:
+  - `GmcpHandlerFactory` erzeugt passende Handler basierend auf `mudfamily`
+  - Statt hartcodiertem `unitopia`-Switch wie in u1
+- Integration in `SocketsService`:
+  - `mudGmcpIncoming`-Event → `GmcpService.handleIncoming()`
+  - `mudGmcpStart`-Event → `GmcpService` initialisiert Module basierend auf `GmcpSupport`
+  - `GmcpService.sendOutgoing()` → `socket.emit('mudGmcpOutgoing', ...)`
+
+---
+
+### Phase 2: UI-Framework und Fenstersystem
+
+#### 2.1 Fenstersystem (Modeless Windows)
+
+**Ziel:** Schwebende, verschiebbare und skalierbare Fenster für Editor, Stats, Keypad etc.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/shared/window.service.ts` und `u1_webmud3_master/frontend/src/app/modeless/`
+
+**Aufgaben:**
+
+- Neues Feature-Verzeichnis: `frontend/src/app/features/windows/`
+- `WindowService` als Injectable:
+  - `windowConfigs` Signal oder BehaviorSubject für reaktive UI
+  - Z-Index-Management (auto-increment bei Focus)
+  - Parent-Child-Beziehungen für zusammengehörige Fenster
+  - UUID-basierte Fenster-IDs
+  - Event-System: `inComingEvents` / `outGoingEvents` per Subject
+  - Aktionen: Focus, Hide, Save, Cancel, SaveAndClose, WinError
+- `WindowContainerComponent` (Standalone):
+  - Hostet alle aktiven Fenster
+  - Rendert `WindowComponent`-Instanzen dynamisch
+- `WindowComponent` (Standalone):
+  - Titelleiste mit Schließen/Minimieren-Buttons
+  - Drag-Funktionalität (Angular CDK DragDrop oder eigene Pointer-Events)
+  - Resize-Handles (min-width/min-height Constraints)
+  - ARIA-Attribute: `role="dialog"`, `aria-label`, Keyboard-Trap
+- `WindowConfig`-Interface (typisiert):
+
+```typescript
+export interface WindowConfig {
+  windowId: string;
+  parentWindowId?: string;
+  visible: boolean;
+  title: string;
+  tooltip?: string;
+  initialLock: boolean;
+  allowSave: boolean;
+  showCancel: boolean;
+  componentType: string;
+  zIndex: number;
+  position: { x: number; y: number };
+  size?: { width: number; height: number };
+  data?: unknown;
+}
+```
+
+#### 2.2 Menü-System
+
+**Ziel:** Dynamisches hierarchisches Menü für MUD-Steuerung und Feature-Zugriff.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/menu/menu.service.ts`
+
+**Aufgaben:**
+
+- Neues Feature: `frontend/src/app/features/menu/`
+- `MenuService`:
+  - 3-Level-Hierarchie: Hauptmenü → Untermenü → Sub-Untermenü
+  - Dynamische Items: Connect/Disconnect, Scroll-Lock, View-Settings, Numpad-Config
+  - MUD-Liste als Connect-Optionen (aus Backend-Config)
+  - GMCP-Module können eigene Menüpunkte registrieren (z.B. Sound Toggle)
+- `MenuBarComponent` (Standalone):
+  - Horizontale Menüleiste am oberen Bildschirmrand
+  - Keyboard-Navigation (Arrow-Keys, Enter, Escape)
+  - ARIA: `role="menubar"`, `role="menu"`, `role="menuitem"`
+- **Entscheidung**: Leichtgewichtige eigene Lösung mit Angular CDK Overlay (empfohlen) oder PrimeNG Menubar. CDK bevorzugt, um Abhängigkeits-Overhead gering zu halten.
+
+#### 2.3 Farbeinstellungen für xterm.js
+
+**Ziel:** Benutzer können Terminal-Farben anpassen wie in u1.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/mud/color-settings.ts` und `u1_webmud3_master/frontend/src/app/settings/color-settings/`
+
+**Aufgaben:**
+
+- `ColorSettingsService` in `frontend/src/app/features/settings/`:
+  - Farb-Invertierung (alle Farben invertieren)
+  - Schwarz-auf-Weiß-Modus (helle Umgebungen)
+  - Farben-aus-Modus (monochrom)
+  - Local-Echo-Farbe konfigurierbar (Standard: `#a8ff00`)
+  - Persistenz: `localStorage` mit JSON (statt Base64-Cookie wie in u1)
+- xterm.js Theme-API nutzen:
+  - `terminal.options.theme = { background, foreground, cursor, ... }`
+  - 16 ANSI-Farben einzeln überschreibbar
+- `ColorSettingsComponent` (Standalone): Dialog/Panel für Farbeinstellungen
+- Integration ins Menü-System (Phase 2.2)
+
+---
+
+### Phase 3: GMCP-Feature-Module
+
+Jedes GMCP-Modul wird als eigenständiges Angular Feature implementiert, das den `GmcpModuleHandler` aus Phase 1.4 implementiert.
+
+#### 3.1 Sound-Modul
+
+**Ziel:** MUD-gesteuerte Audio-Wiedergabe.
+
+**Referenz:** Sound-Handling in `u1_webmud3_master/frontend/src/app/mudconfig/unitopia.service.ts`
+
+**Aufgaben:**
+
+- `frontend/src/app/features/gmcp-sound/`
+- `SoundGmcpHandler` implementiert `GmcpModuleHandler`:
+  - `Sound.Url`: Speichert Base-URL für Sound-Dateien
+  - `Sound.Event`: Spielt Sound ab via `new Audio(baseUrl + filename)`
+- HTML5 Audio API (kein Web Audio API nötig – das ist nur für Beep)
+- An/Aus-Toggle:
+  - Registriert Menüpunkt über `GmcpService`
+  - Toggle sendet `Core.Supports.Add "Sound 1"` / `Core.Supports.Remove "Sound 1"`
+- Backend: GMCP Sound-Messages werden transparent durchgereicht (kein spezieller Handler nötig)
+
+#### 3.2 Datei-Browser und Code-Editor
+
+**Ziel:** In-Browser Code-Editor für MUD-Wizard-Dateien.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/modeless/editor/editor.component.ts`, `u1_webmud3_master/frontend/src/app/modeless/dirlist/dirlist.component.ts`, `u1_webmud3_master/frontend/src/app/mud/files.service.ts`
+
+**Aufgaben:**
+
+- `frontend/src/app/features/gmcp-files/`
+- `FilesGmcpHandler` implementiert `GmcpModuleHandler`:
+  - `Files.DirectoryList`: Empfängt Verzeichnisinhalt → öffnet DirList-Fenster
+  - `Files.OpenFile`: Empfängt Datei-URL → öffnet Editor-Fenster
+  - `Files.FileSaved`: Bestätigung nach Speichern
+  - `Files.ChDir`: Verzeichniswechsel
+- `FilesService`:
+  - HTTP GET für Datei-Laden
+  - HTTP PUT für Datei-Speichern
+  - Datei-Zustandsverwaltung (FileInfo mit Content, OldContent, Modified-Flag)
+- `DirListComponent` (Standalone):
+  - Verzeichnis-Anzeige in einem Modeless-Fenster
+  - Navigation (Doppelklick auf Ordner → `Files.ChDir`)
+  - Datei öffnen (Doppelklick auf Datei → `Files.OpenFile`)
+- `EditorComponent` (Standalone):
+  - **Editor-Wahl**: Ace Editor (bewährt, 37 Themes) – als `ace-builds` npm-Paket
+  - Alternativ: CodeMirror 6 evaluieren (modernere API, besser für Tree-Shaking)
+  - Syntax-Highlighting für C/C++ (`.c`, `.h`, `.inc`) und Text
+  - Theme-Persistenz via localStorage
+  - Suchen & Ersetzen
+  - Speichern (Zwischen- und Abschluss-Speichern)
+  - Schließen mit Warnung bei ungespeicherten Änderungen
+  - Read-Only-Toggle
+- Integration ins Fenster-System (Phase 2.1):
+  - Editor und DirList werden als Fenster dargestellt
+  - Parent-Child: DirList ist Parent von Editor
+
+#### 3.3 Charakter-Module
+
+**Ziel:** Anzeige von Charakter-Informationen (Name, Stats, Inventar).
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/mud/mud-signals.ts`, `u1_webmud3_master/frontend/src/app/modeless/char-stat/`, `u1_webmud3_master/frontend/src/app/widgets/inventory/`
+
+**Aufgaben:**
+
+- `frontend/src/app/features/gmcp-char/`
+- `CharGmcpHandler` implementiert `GmcpModuleHandler`:
+  - `Char.Name`: Charakter-Name und Titel → Browser-Titel-Update, Wizard-Erkennung
+  - `Char.StatusVars`: Definiert verfügbare Status-Variablen
+  - `Char.Status`: Aktuelle Werte (Gilde, Rasse, Rang)
+  - `Char.Vitals`: HP/SP-Werte
+  - `Char.Stats`: STR/INT/CON/DEX-Werte
+- `CharacterData`-Klasse (typisiert):
+
+```typescript
+export interface CharacterData {
+  name?: string;
+  title?: string;
+  isWizard: boolean;
+  statusVars: Map<string, string>;
+  status: Record<string, string | number>;
+  vitals: { hp?: number; sp?: number; maxHp?: number; maxSp?: number };
+  stats: { str?: number; int?: number; con?: number; dex?: number };
+}
+```
+
+- `CharStatsComponent` (Standalone): Charakter-Statistik-Fenster
+- `Char.Items`-Handler:
+  - `Char.Items.List`: Empfängt vollständige Inventar-Liste
+  - `Char.Items.Add`: Einzelnes Item hinzufügen
+  - `Char.Items.Remove`: Item entfernen
+- `InventoryComponent` (Standalone): Kategorisiertes Inventar-Widget
+- `InventoryList`-Datenmodell:
+
+```typescript
+export interface InventoryItem {
+  id: string;
+  name: string;
+  category?: string;
+}
+
+export interface InventoryList {
+  items: InventoryItem[];
+  categories: Map<string, InventoryItem[]>;
+}
+```
+
+#### 3.4 Input-Completion
+
+**Ziel:** Tab-Vervollständigung über GMCP.
+
+**Referenz:** GMCP `Input.Complete` in u1
+
+**Aufgaben:**
+
+- `InputGmcpHandler` implementiert `GmcpModuleHandler`:
+  - Tab-Taste im `MudInputController` → `Input.Complete` Request an MUD
+  - Response-Typen:
+    - `Text`: Direkte Ersetzung des aktuellen Worts
+    - `Choice`: Auswahlliste anzeigen (Overlay)
+    - `None`: Kein Match
+- Integration in `MudInputController` (`frontend/src/app/features/terminal/mud-input.controller.ts`):
+  - Neuer Callback für Tab-Events
+  - Buffer-Manipulation bei erfolgreicher Completion
+- Completion-Overlay-Component (Standalone):
+  - Dropdown-Liste bei `Choice`-Response
+  - Keyboard-Navigation (Arrow-Keys, Enter, Escape)
+
+#### 3.5 Numpad/Keypad
+
+**Ziel:** MUD-synchronisierte Tastenbelegung mit visuellem Numpad.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/shared/keypad-data.ts`, `u1_webmud3_master/frontend/src/app/modeless/keypad/`
+
+**Aufgaben:**
+
+- `frontend/src/app/features/gmcp-numpad/`
+- `NumpadGmcpHandler` implementiert `GmcpModuleHandler`:
+  - `Numpad.SendLevel`: MUD sendet Tastenbelegung für eine Ebene
+  - `Numpad.Update`: Client sendet geänderte Belegung zurück
+  - `Numpad.GetAll`: Client fordert alle Ebenen an
+- `KeypadData`-Datenmodell:
+
+```typescript
+export interface OneKeypadData {
+  prefix: string;
+  keys: Map<string, string>;  // Taste → Befehl
+}
+
+export interface KeypadData {
+  levels: Map<string, OneKeypadData>;
+  currentLevel: string;
+}
+```
+
+- Modifier-Support: Shift, Ctrl, Alt, Meta + Numpad/F-Tasten
+- `KeypadComponent` (Standalone): Visuelles anklickbares Numpad-Widget
+- `KeypadConfigComponent` (Standalone): Konfigurations-Dialog im Fenster-System
+- Integration in `MudInputController`: Numpad-Tasten abfangen und MUD-Befehl senden
+
+#### 3.6 Kommunikations- und Kern-Module
+
+**Ziel:** Weitere GMCP-Module für Kommunikation, Keep-Alive und Raum-Info.
+
+**Aufgaben:**
+
+- **`Core.Ping`**: Keep-Alive mit visueller Anzeige
+  - Periodischer Ping → Latenz-Messung
+  - Status-Anzeige (z.B. im Menü oder als Badge)
+- **`Core.BrowserInfo`**: Geräte-Info an MUD senden
+  - Browser, OS, Version, Typ (Mobile/Tablet/Desktop)
+  - Client-ID (UUID pro Session)
+  - `real_ip` wird im Backend ergänzt (aus `x-forwarded-for`)
+  - Alternative zu `ngx-device-detector`: Native `navigator.userAgent` Parsing oder `ua-parser-js`
+- **`Core.Hello`**: MUD/Client-Identifikation beim Verbindungsaufbau
+- **`Core.Goodbye`**: Logoff-Ankündigung vom MUD
+- **`Core.Supports`**: Set/Add/Remove von GMCP-Modulen
+  - Wird vom `GmcpService` automatisch verwaltet
+- **`Comm.Say/Soul/Tell`**: Kommunikationskanäle
+  - Optional: Separate Anzeige in eigenem Panel
+  - Minimal: Als regulärer MUD-Output durchreichen
+- **`Room.Info`**: Raum-Information (Name, Domain, Exits)
+  - Optional: Raum-Name in Titelleiste
+  - Optional: Exit-Buttons/Links
+
+---
+
+### Phase 4: Deployment und Infrastruktur
+
+#### 4.1 Multi-MUD-Routing im Frontend
+
+**Ziel:** Verschiedene MUDs über URL-Pfade auswählbar.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/nonportal/` und `mud_config.json` Routes
+
+**Aufgaben:**
+
+- Dynamische Routen aus `mud_config.json`:
+  - `"/"` → UNItopia, `"/orbit"` → Orbit, `"/seifenblase"` → Seifenblase etc.
+- Angular Router konfigurieren:
+  - Parametrisierte Route: `/:mudId` statt hartcodierter Nonportal-Pages
+  - Default-Route aus Config
+- `MudSelectorComponent` (Standalone): Landing-Page mit MUD-Auswahl (wenn keine spezifische Route)
+- `MudService.connect()` erweitern: `mudId` aus Router-Parameter übergeben
+
+#### 4.2 Multi-Deployment-Konfiguration
+
+**Ziel:** Verschiedene Deployment-Szenarien unterstützen.
+
+**Referenz:** `u1_webmud3_master/frontend/src/environments/` (5+ Dateien)
+
+**Aufgaben:**
+
+- Zusätzliche Environment-Files:
+  - `environment.prod.sb.ts` (Seifenblase)
+  - `environment.prod.uni.ts` (UNItopia Produktion)
+- `ServerConfigService` erweitern:
+  - URL-basierte Backend-Erkennung (Referenz: `u1_webmud3_master/frontend/src/app/shared/server-config.service.ts`)
+  - Origin/Path-Matching für verschiedene Deployments
+- Docker Compose Varianten:
+  - Lokales Deployment
+  - Produktion (UNItopia)
+  - Seifenblase
+  - Mit Apache Reverse-Proxy
+  - Secret-Management
+- `angular.json`: File-Replacements für zusätzliche Build-Konfigurationen
+
+---
+
+## 5. Architektur-Diagramm: Zielzustand
+
+```mermaid
+graph TB
+  subgraph frontend [Frontend - Angular Standalone]
+    MudClient[MudClientComponent]
+    XTerm[xterm.js Terminal]
+    GmcpFE[GmcpService]
+    WinSvc[WindowService]
+    MenuSvc[MenuService]
+    ColorSvc[ColorSettingsService]
+    SoundMod[SoundModule]
+    FilesMod[FilesModule]
+    CharMod[CharModule]
+    NumpadMod[NumpadModule]
+    InputComp[InputCompletion]
+    CommMod[CommModule]
+    SocketsSvc[SocketsService]
+    ScreenReader[ScreenReaderAnnouncer]
+
+    MudClient --> XTerm
+    MudClient --> WinSvc
+    MudClient --> MenuSvc
+    MudClient --> ColorSvc
+    MudClient --> ScreenReader
+    GmcpFE --> SoundMod
+    GmcpFE --> FilesMod
+    GmcpFE --> CharMod
+    GmcpFE --> NumpadMod
+    GmcpFE --> InputComp
+    GmcpFE --> CommMod
+    SocketsSvc --> GmcpFE
+  end
+
+  subgraph shared [Shared - Types]
+    SocketEvents[Socket Events inkl. GMCP]
+    MudCfgTypes[MudFamilyConfig Types]
+    GmcpTypes[GmcpModule Types]
+    LinemodeTypes[LinemodeState]
+  end
+
+  subgraph backend [Backend - Express 5 / TypeScript]
+    SocketMgr[SocketManager]
+    TelnetCl[TelnetClient]
+    GmcpHandler[GMCP OptionHandler]
+    MudCfgSvc[MudConfigService]
+    AuthRPC["Auth/RPC (optional)"]
+    OutputBuf[OutputLineBuffer]
+
+    SocketMgr --> TelnetCl
+    TelnetCl --> GmcpHandler
+    SocketMgr --> MudCfgSvc
+    SocketMgr --> OutputBuf
+  end
+
+  SocketsSvc -->|"Socket.IO (WebSocket)"| SocketMgr
+  TelnetCl -->|"Telnet TCP/TLS"| MUDServer[MUD Server]
+  AuthRPC -.->|"Unix Socket / RPC"| MUDServer
+```
+
+---
+
+## 6. Empfohlene Reihenfolge und Priorisierung
+
+| Priorität | Phase | Begründung |
+|-----------|-------|------------|
+| **Kritisch** | 1.1 + 1.2 + 1.4 (GMCP Grundlagen) | Voraussetzung für alle GMCP-Features |
+| **Hoch** | 1.3 (Multi-MUD) | Kernfunktionalität für Produktivbetrieb |
+| **Hoch** | 2.1 (Fenstersystem) | Voraussetzung für Editor, Stats, Keypad |
+| **Hoch** | 3.2 (Datei-Editor) | Wichtigstes Wizard-Tool |
+| **Mittel** | 3.1 (Sound) | Erlebnis-Feature |
+| **Mittel** | 3.3 (Char-Module) | Gameplay-relevant |
+| **Mittel** | 2.2 (Menü) | UX-Verbesserung |
+| **Mittel** | 3.5 (Numpad) | Komfort-Feature |
+| **Niedrig** | 2.3 (Farbeinstellungen) | Nice-to-have |
+| **Niedrig** | 3.4 (Tab-Completion) | Komfort |
+| **Niedrig** | 3.6 (Comm-Module) | Ergänzend |
+| **Niedrig** | 4.1 (Multi-MUD-Routing) | Deployment |
+| **Niedrig** | 4.2 (Multi-Deployment) | Deployment |
+
+---
+
+## 7. Aufwandsschätzung
+
+| Phase | Geschätzter Aufwand | Beschreibung |
+|-------|---------------------|--------------|
+| Phase 1 | 3–5 Wochen | GMCP-Grundlagen + Multi-MUD |
+| Phase 2 | 2–4 Wochen | Fenstersystem + Menü + Farben |
+| Phase 3 | 4–8 Wochen | Alle GMCP-Feature-Module |
+| Phase 4 | 1–3 Wochen | Deployment + Optionales |
+| **Gesamt** | **10–20 Wochen** | Je nach Priorisierung und Parallelisierung |
+
+---
+
+## 8. Risiken und Mitigationen
+
+| Risiko | Auswirkung | Mitigation |
+|--------|------------|------------|
+| xterm.js unterstützt kein HTML-Rendering für ANSI-Spans | Farbeinstellungen weniger flexibel als u1 | xterm.js Theme-API und Addon-System nutzen |
+| Ace Editor Bundle-Größe (~1MB) | Frontend-Performance | Lazy Loading, nur laden wenn Editor geöffnet |
+| PrimeNG-Abhängigkeit vermeiden | Eigene UI-Komponenten nötig | Angular CDK für Overlays, Drag&Drop; eigenes SCSS |
+| GMCP-Module-Interaktion komplex | Schwer testbar | Klare Interfaces, Strategy Pattern, umfangreiche Unit-Tests |
+| Multi-MUD ändert Socket-Protokoll | Breaking Change | Rückwärtskompatibel: `mudId` optional, Fallback auf Env-Vars |
+| Screenreader-Kompatibilität bei neuen UI-Elementen | Accessibility-Regression | ARIA-Attribute, Keyboard-Navigation, Screenreader-Tests |
+
+---
+
+## 9. Referenz-Dateien
+
+### u1 (Master) – Quellen für Migration
+
+| Datei/Ordner | Feature |
+|---|---|
+| `backend/mudSocket.js` | GMCP-Protokoll, Telnet-Negotiation |
+| `backend/server.js` | Multi-MUD-Config, GMCP-Event-Routing |
+| `backend/mudrpc/` | Auth/RPC-System |
+| `frontend/src/mud_config.json` | MUD-Familien + MUD-Liste |
+| `frontend/src/app/gmcp/gmcp.service.ts` | GMCP-Service Architektur |
+| `frontend/src/app/mudconfig/unitopia.service.ts` | MUD-Familien-Handler |
+| `frontend/src/app/mud/ansi.service.ts` | ANSI-Farbverarbeitung |
+| `frontend/src/app/mud/files.service.ts` | Datei-Lade/Speicher-Logik |
+| `frontend/src/app/mud/mud-signals.ts` | GMCP-Signal-Verarbeitung |
+| `frontend/src/app/shared/sockets-config.ts` | 4-Schichten Socket-Architektur |
+| `frontend/src/app/shared/window.service.ts` | Fenster-Management |
+| `frontend/src/app/shared/window-config.ts` | Fenster-Konfiguration |
+| `frontend/src/app/shared/keypad-data.ts` | Numpad-Datenmodell |
+| `frontend/src/app/modeless/editor/` | Code-Editor Component |
+| `frontend/src/app/modeless/dirlist/` | Verzeichnis-Browser Component |
+| `frontend/src/app/modeless/keypad/` | Keypad-Widget |
+| `frontend/src/app/widgets/inventory/` | Inventar-Anzeige |
+| `frontend/src/app/menu/menu.service.ts` | Menü-Logik |
+| `frontend/src/app/settings/color-settings/` | Farbeinstellungen UI |
+
+### u2 (Develop) – Ziel-Dateien für Erweiterung
+
+| Datei/Ordner | Erweiterung |
+|---|---|
+| `shared/src/sockets/client-to-server-events.ts` | + GMCP-Events |
+| `shared/src/sockets/server-to-client-events.ts` | + GMCP-Events |
+| `shared/src/index.ts` | + GMCP-Typen Export |
+| `backend/src/features/telnet/models/telnet-options.ts` | + TELOPT_GMCP |
+| `backend/src/features/telnet/utils/` | + handle-gmcp-option.ts |
+| `backend/src/core/sockets/socket-manager.ts` | + GMCP-Event-Handling, Multi-MUD |
+| `backend/src/core/environment/environment.ts` | + MUD_CONFIG_PATH |
+| `frontend/src/app/features/sockets/sockets.service.ts` | + GMCP-Events |
+| `frontend/src/app/core/mud/services/mud.service.ts` | + GMCP-Observables |
+| `frontend/src/app/features/terminal/mud-input.controller.ts` | + Tab-Completion, Numpad |
+
diff --git a/dockerfiles/MIGRATION_V2.md b/dockerfiles/MIGRATION_V2.md
new file mode 100644
index 0000000..9c724be
--- /dev/null
+++ b/dockerfiles/MIGRATION_V2.md
@@ -0,0 +1,767 @@
+# WebMud3 Migrationsplan: Master (u1) → Develop (u2)
+
+## 1. Kontext
+
+Die **Zielarchitektur** ist `u2_webmud3_develop` (TypeScript-Monorepo, Angular Standalone Components, xterm.js, Express 5). Der **Feature-Spender** ist `u1_webmud3_master` (Plain JS, PrimeNG, HTML-Span-Rendering, Express 4), der zahlreiche Features enthält, die in u2 noch fehlen.
+
+### 1.1 Technologische Grundlagen der Zielarchitektur (u2)
+
+| Aspekt                 | u2 (Develop – Ziel)                          |
+|------------------------|-----------------------------------------------|
+| **Backend-Sprache**    | TypeScript (strict)                           |
+| **Projekt-Struktur**   | npm Workspaces Monorepo (shared/backend/frontend) |
+| **Shared-Paket**       | `@webmud3/shared` – typisierte Socket-Events  |
+| **Angular-Stil**       | Standalone Components, `inject()` statt Constructor DI |
+| **Terminal-Rendering**  | xterm.js mit FitAddon, ClipboardAddon, AttachAddon |
+| **UI-Framework**       | Eigenes SCSS (kein PrimeNG)                   |
+| **Express**            | v5                                            |
+| **Logging**            | Winston                                       |
+| **Testing**            | Jest (Frontend + Backend)                     |
+| **CI/CD**              | GitHub Actions → Azure Web App                |
+| **Accessibility**      | Custom ARIA-Live-Region ScreenReader-Announcer |
+| **Reconnection**       | Session-Token + OutputLineBuffer-Replay       |
+
+### 1.2 Feature-Bestand der Quellarchitektur (u1)
+
+| Aspekt                 | u1 (Master – Quelle)                         |
+|------------------------|-----------------------------------------------|
+| **Backend-Sprache**    | Plain JavaScript (ES6+)                       |
+| **Projekt-Struktur**   | Separate Packages (kein Monorepo)             |
+| **Angular-Stil**       | NgModules                                     |
+| **Terminal-Rendering**  | HTML-Spans mit eigenem AnsiService            |
+| **UI-Framework**       | PrimeNG (Nora Theme)                          |
+| **Express**            | v4                                            |
+| **Logging**            | Custom ngxlogger                              |
+| **CI/CD**              | Jenkinsfile + Docker Compose                  |
+| **GMCP-Support**       | Umfangreich (15+ Module)                      |
+| **Code-Editor**        | Ace Editor (37 Themes)                        |
+| **Fenster-System**     | Eigenes Draggable/Resizable                   |
+
+---
+
+## 2. Analyse der Feature-Lücken
+
+Die folgende Tabelle zeigt alle wesentlichen Features, die von u1 nach u2 migriert werden müssen:
+
+| Feature | u1 (Master) | u2 (Develop) | Aufwand |
+|---------|-------------|--------------|---------|
+| GMCP-Protokoll | Vollständig (15+ Module) | Stub (`sendGmcp` wirft Error) | Hoch |
+| Multi-MUD-Support | 4 MUDs + Familien-System | Single-MUD via Env-Vars | Hoch |
+| Sound-System | GMCP Sound.Url/Event + HTML5 Audio | Nicht vorhanden | Mittel |
+| Datei-Browser + Code-Editor | Ace Editor (37 Themes) + DirList | Nicht vorhanden | Hoch |
+| Fenster-System (Modeless) | Eigenes Draggable/Resizable | Nicht vorhanden | Hoch |
+| Inventar-Anzeige | GMCP Char.Items | Nicht vorhanden | Mittel |
+| Charakter-Statistiken | GMCP Char.Status/Vitals/Stats | Nicht vorhanden | Mittel |
+| Menü-System | PrimeNG Menubar, dynamisch | Nicht vorhanden | Mittel |
+| Numpad/Keypad | MUD-synchron, konfigurierbar | Nicht vorhanden | Mittel |
+| Farbeinstellungen | Invertierung, B/W, Farben aus | Nur xterm-Theme | Niedrig |
+| Tab-Completion | GMCP Input.Complete | Nicht vorhanden | Niedrig |
+| Auth/RPC (experimentell) | REST Login + Unix-Socket RPC | Auskommentiert | Niedrig |
+| Multi-Deployment | 5+ Environment-Configs | 2 Environments (Dev/Prod) | Niedrig |
+| mdconn Microservice | Experimentell | Nicht vorhanden | Niedrig |
+
+---
+
+## 3. Migrationsprinzipien
+
+1. **Keine Rückschritte**: Accessibility (Screen Reader), TypeScript Strict, xterm.js, Standalone Components, Session-Token-Reconnection bleiben erhalten.
+2. **Typisierung**: Alle migrierten Features müssen vollständig typisiert sein (kein `any`).
+3. **Shared-First**: Neue Socket-Events und Typen immer zuerst in `@webmud3/shared` definieren.
+4. **Strategy Pattern statt Hardcoding**: MUD-Familien-spezifisches Verhalten über austauschbare Handler, nicht über `if (family === 'unitopia')`.
+5. **Lazy Loading**: GMCP-Feature-Module nur laden wenn aktiviert.
+6. **Tests**: Jeder neue Handler/Service braucht Unit-Tests (Jest).
+7. **Barrierefreiheit**: Alle neuen UI-Elemente (Fenster, Menüs, Dialoge) müssen ARIA-Attribute und Keyboard-Navigation unterstützen.
+
+---
+
+## 4. Migrationsstruktur (4 Phasen)
+
+Die Migration wird in **4 Phasen** organisiert, geordnet nach Abhängigkeiten:
+
+```
+Phase 1: Infrastruktur (GMCP-Grundlagen, Multi-MUD)
+    │
+    ▼
+Phase 2: UI-Framework (Fenstersystem, Menü, Farbeinstellungen)
+    │
+    ▼
+Phase 3: GMCP-Feature-Module (Sound, Files, Char, Input, Numpad, Comm)
+    │
+    ▼
+Phase 4: Deployment & Optionales (Routing, Multi-Deploy, Auth, mdconn)
+```
+
+---
+
+### Phase 1: Infrastruktur-Erweiterungen (Grundlagen)
+
+Schafft die Voraussetzungen für alle weiteren Features.
+
+#### 1.1 GMCP-Protokoll im Backend
+
+**Ziel:** Der Backend-TelnetClient kann GMCP-Nachrichten empfangen und senden.
+
+**Referenz-Implementierung:** `u1_webmud3_master/backend/mudSocket.js` (Zeilen 276–353)
+
+**Aufgaben:**
+
+- Neuen Telnet-Option-Handler `handle-gmcp-option.ts` in `u2_webmud3_develop/backend/src/features/telnet/utils/` erstellen
+- GMCP als `TELOPT_GMCP (201)` in `u2_webmud3_develop/backend/src/features/telnet/models/telnet-options.ts` registrieren
+- Subnegotiation-Parsing implementieren:
+  - Eingehend: Buffer → String → Split bei erstem Leerzeichen → `{module}.{message}` + JSON-Daten
+  - Format: `"Core.Hello {\"client\":\"WebMud3\"}"` → `module="Core"`, `message="Hello"`, `data={client:"WebMud3"}`
+- GMCP-Outgoing implementieren: `writeSub(201, Buffer.concat([moduleMsg, jsonData]))`
+- GMCP-WILL-Handling: Wenn MUD `WILL GMCP` sendet → `DO GMCP` antworten (wenn MUD-Familie GMCP unterstützt)
+- Event-Emission: `TelnetClient` emittiert `gmcpIncoming(module, message, data)` und `gmcpStart(gmcpSupport)`
+
+**Schnittstelle:**
+```typescript
+// In TelnetClient (EventEmitter)
+interface TelnetClientEvents {
+  // ... bestehende Events ...
+  gmcpIncoming: (module: string, message: string, data: unknown) => void;
+  gmcpStart: (gmcpSupport: GmcpSupport) => void;
+}
+
+// Neuer Handler
+interface GmcpOptionHandler extends TelnetOptionHandler {
+  sendGmcp(module: string, message: string, data: unknown): void;
+}
+```
+
+#### 1.2 GMCP Socket-Events im Shared-Paket
+
+**Ziel:** Typisierte Socket.IO-Events für GMCP-Kommunikation zwischen Frontend und Backend.
+
+**Aufgaben:**
+
+- Neue Typen-Dateien in `u2_webmud3_develop/shared/src/` anlegen:
+
+```typescript
+// shared/src/gmcp/gmcp-types.ts
+export interface GmcpModuleConfig {
+  version: string;
+  standard: boolean;
+  optional: boolean;
+}
+
+export interface GmcpSupport {
+  [moduleName: string]: GmcpModuleConfig;
+}
+
+export interface MudFamilyConfig {
+  charset: string;
+  MXP: boolean;
+  GMCP: boolean;
+  GMCP_Support: GmcpSupport;
+}
+
+export interface MudConfig {
+  name: string;
+  host: string;
+  port: number;
+  ssl: boolean;
+  rejectUnauthorized: boolean;
+  description: string;
+  playerlevel: string;
+  mudfamily: string;
+}
+
+export interface MudConfigFile {
+  scope: string;
+  href: string;
+  mudfamilies: Record<string, MudFamilyConfig>;
+  muds: Record<string, MudConfig>;
+  routes: Record<string, string>;
+}
+```
+
+- Bestehende Socket-Events erweitern:
+
+```typescript
+// ClientToServerEvents – neue Events:
+mudGmcpOutgoing: (module: string, message: string, data: unknown) => void;
+
+// ServerToClientEvents – neue Events:
+mudGmcpIncoming: (module: string, message: string, data: unknown) => void;
+mudGmcpStart: (gmcpSupport: GmcpSupport) => void;
+```
+
+- In `shared/src/index.ts` re-exportieren
+- `npm run build --workspace shared` ausführen
+
+#### 1.3 Multi-MUD-Konfiguration im Backend
+
+**Ziel:** Das Backend unterstützt dynamische MUD-Auswahl pro Verbindung statt fester Env-Vars.
+
+**Referenz:** `u1_webmud3_master/frontend/src/mud_config.json` und `u1_webmud3_master/backend/server.js`
+
+**Aufgaben:**
+
+- `MudConfigService` in `backend/src/core/config/` erstellen:
+  - Lädt `mud_config.json` beim Start
+  - Liefert MUD-Konfiguration nach MUD-ID
+  - Liefert MUD-Familien-Konfiguration (GMCP-Support, Charset, etc.)
+- `Environment` erweitern:
+  - `TELNET_HOST/PORT` werden zu Fallback-Defaults
+  - Neue Env-Var: `MUD_CONFIG_PATH` (Pfad zur `mud_config.json`)
+- `SocketManager.mudConnect`-Event erweitern:
+  - Neuer Parameter: `mudId?: string` (optional, für Rückwärtskompatibilität)
+  - Wenn `mudId` gesetzt → Telnet-Verbindung zur konfigurierten Host/Port-Kombination
+  - Wenn nicht gesetzt → Fallback auf Env-Var `TELNET_HOST/PORT`
+- Neuer REST-Endpoint: `GET /api/mud-config` liefert MUD-Liste ans Frontend
+- `ClientToServerEvents.mudConnect` Signatur erweitern:
+
+```typescript
+mudConnect: (
+  initialViewPort: { columns: number; rows: number },
+  sessionToken: string,
+  mudId?: string,  // NEU
+) => void;
+```
+
+#### 1.4 GMCP-Service im Frontend
+
+**Ziel:** Zentraler Service für GMCP-Modul-Verwaltung und Event-Routing.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/gmcp/gmcp.service.ts`
+
+**Aufgaben:**
+
+- Neuen Service `frontend/src/app/features/gmcp/gmcp.service.ts` erstellen:
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class GmcpService {
+  // Registry aller aktiven GMCP-Module pro Verbindung
+  private moduleRegistry = new Map<string, GmcpModuleHandler>();
+
+  // Observable-Streams für einzelne GMCP-Module
+  public readonly gmcpEvent$ = new Subject<GmcpEvent>();
+
+  registerModule(handler: GmcpModuleHandler): void { ... }
+  unregisterModule(moduleName: string): void { ... }
+  handleIncoming(module: string, message: string, data: unknown): void { ... }
+  sendOutgoing(module: string, message: string, data: unknown): void { ... }
+}
+```
+
+- `GmcpModuleHandler`-Interface definieren (Strategy Pattern):
+
+```typescript
+export interface GmcpModuleHandler {
+  readonly moduleName: string;
+  readonly version: string;
+  handleMessage(message: string, data: unknown): void;
+  getMenuItems?(): GmcpMenuItem[];
+}
+```
+
+- MUD-Familien-spezifische Handler-Factory:
+  - `GmcpHandlerFactory` erzeugt passende Handler basierend auf `mudfamily`
+  - Statt hartcodiertem `unitopia`-Switch wie in u1
+- Integration in `SocketsService`:
+  - `mudGmcpIncoming`-Event → `GmcpService.handleIncoming()`
+  - `mudGmcpStart`-Event → `GmcpService` initialisiert Module basierend auf `GmcpSupport`
+  - `GmcpService.sendOutgoing()` → `socket.emit('mudGmcpOutgoing', ...)`
+
+---
+
+### Phase 2: UI-Framework und Fenstersystem
+
+#### 2.1 Fenstersystem (Modeless Windows)
+
+**Ziel:** Schwebende, verschiebbare und skalierbare Fenster für Editor, Stats, Keypad etc.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/shared/window.service.ts` und `u1_webmud3_master/frontend/src/app/modeless/`
+
+**Aufgaben:**
+
+- Neues Feature-Verzeichnis: `frontend/src/app/features/windows/`
+- `WindowService` als Injectable:
+  - `windowConfigs` Signal oder BehaviorSubject für reaktive UI
+  - Z-Index-Management (auto-increment bei Focus)
+  - Parent-Child-Beziehungen für zusammengehörige Fenster
+  - UUID-basierte Fenster-IDs
+  - Event-System: `inComingEvents` / `outGoingEvents` per Subject
+  - Aktionen: Focus, Hide, Save, Cancel, SaveAndClose, WinError
+- `WindowContainerComponent` (Standalone):
+  - Hostet alle aktiven Fenster
+  - Rendert `WindowComponent`-Instanzen dynamisch
+- `WindowComponent` (Standalone):
+  - Titelleiste mit Schließen/Minimieren-Buttons
+  - Drag-Funktionalität (Angular CDK DragDrop oder eigene Pointer-Events)
+  - Resize-Handles (min-width/min-height Constraints)
+  - ARIA-Attribute: `role="dialog"`, `aria-label`, Keyboard-Trap
+- `WindowConfig`-Interface (typisiert):
+
+```typescript
+export interface WindowConfig {
+  windowId: string;
+  parentWindowId?: string;
+  visible: boolean;
+  title: string;
+  tooltip?: string;
+  initialLock: boolean;
+  allowSave: boolean;
+  showCancel: boolean;
+  componentType: string;
+  zIndex: number;
+  position: { x: number; y: number };
+  size?: { width: number; height: number };
+  data?: unknown;
+}
+```
+
+#### 2.2 Menü-System
+
+**Ziel:** Dynamisches hierarchisches Menü für MUD-Steuerung und Feature-Zugriff.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/menu/menu.service.ts`
+
+**Aufgaben:**
+
+- Neues Feature: `frontend/src/app/features/menu/`
+- `MenuService`:
+  - 3-Level-Hierarchie: Hauptmenü → Untermenü → Sub-Untermenü
+  - Dynamische Items: Connect/Disconnect, Scroll-Lock, View-Settings, Numpad-Config
+  - MUD-Liste als Connect-Optionen (aus Backend-Config)
+  - GMCP-Module können eigene Menüpunkte registrieren (z.B. Sound Toggle)
+- `MenuBarComponent` (Standalone):
+  - Horizontale Menüleiste am oberen Bildschirmrand
+  - Keyboard-Navigation (Arrow-Keys, Enter, Escape)
+  - ARIA: `role="menubar"`, `role="menu"`, `role="menuitem"`
+- **Entscheidung**: Leichtgewichtige eigene Lösung mit Angular CDK Overlay (empfohlen) oder PrimeNG Menubar. CDK bevorzugt, um Abhängigkeits-Overhead gering zu halten.
+
+#### 2.3 Farbeinstellungen für xterm.js
+
+**Ziel:** Benutzer können Terminal-Farben anpassen wie in u1.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/mud/color-settings.ts` und `u1_webmud3_master/frontend/src/app/settings/color-settings/`
+
+**Aufgaben:**
+
+- `ColorSettingsService` in `frontend/src/app/features/settings/`:
+  - Farb-Invertierung (alle Farben invertieren)
+  - Schwarz-auf-Weiß-Modus (helle Umgebungen)
+  - Farben-aus-Modus (monochrom)
+  - Local-Echo-Farbe konfigurierbar (Standard: `#a8ff00`)
+  - Persistenz: `localStorage` mit JSON (statt Base64-Cookie wie in u1)
+- xterm.js Theme-API nutzen:
+  - `terminal.options.theme = { background, foreground, cursor, ... }`
+  - 16 ANSI-Farben einzeln überschreibbar
+- `ColorSettingsComponent` (Standalone): Dialog/Panel für Farbeinstellungen
+- Integration ins Menü-System (Phase 2.2)
+
+---
+
+### Phase 3: GMCP-Feature-Module
+
+Jedes GMCP-Modul wird als eigenständiges Angular Feature implementiert, das den `GmcpModuleHandler` aus Phase 1.4 implementiert.
+
+#### 3.1 Sound-Modul
+
+**Ziel:** MUD-gesteuerte Audio-Wiedergabe.
+
+**Referenz:** Sound-Handling in `u1_webmud3_master/frontend/src/app/mudconfig/unitopia.service.ts`
+
+**Aufgaben:**
+
+- `frontend/src/app/features/gmcp-sound/`
+- `SoundGmcpHandler` implementiert `GmcpModuleHandler`:
+  - `Sound.Url`: Speichert Base-URL für Sound-Dateien
+  - `Sound.Event`: Spielt Sound ab via `new Audio(baseUrl + filename)`
+- HTML5 Audio API (kein Web Audio API nötig – das ist nur für Beep)
+- An/Aus-Toggle:
+  - Registriert Menüpunkt über `GmcpService`
+  - Toggle sendet `Core.Supports.Add "Sound 1"` / `Core.Supports.Remove "Sound 1"`
+- Backend: GMCP Sound-Messages werden transparent durchgereicht (kein spezieller Handler nötig)
+
+#### 3.2 Datei-Browser und Code-Editor
+
+**Ziel:** In-Browser Code-Editor für MUD-Wizard-Dateien.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/modeless/editor/editor.component.ts`, `u1_webmud3_master/frontend/src/app/modeless/dirlist/dirlist.component.ts`, `u1_webmud3_master/frontend/src/app/mud/files.service.ts`
+
+**Aufgaben:**
+
+- `frontend/src/app/features/gmcp-files/`
+- `FilesGmcpHandler` implementiert `GmcpModuleHandler`:
+  - `Files.DirectoryList`: Empfängt Verzeichnisinhalt → öffnet DirList-Fenster
+  - `Files.OpenFile`: Empfängt Datei-URL → öffnet Editor-Fenster
+  - `Files.FileSaved`: Bestätigung nach Speichern
+  - `Files.ChDir`: Verzeichniswechsel
+- `FilesService`:
+  - HTTP GET für Datei-Laden
+  - HTTP PUT für Datei-Speichern
+  - Datei-Zustandsverwaltung (FileInfo mit Content, OldContent, Modified-Flag)
+- `DirListComponent` (Standalone):
+  - Verzeichnis-Anzeige in einem Modeless-Fenster
+  - Navigation (Doppelklick auf Ordner → `Files.ChDir`)
+  - Datei öffnen (Doppelklick auf Datei → `Files.OpenFile`)
+- `EditorComponent` (Standalone):
+  - **Editor-Wahl**: Ace Editor (bewährt, 37 Themes) – als `ace-builds` npm-Paket
+  - Alternativ: CodeMirror 6 evaluieren (modernere API, besser für Tree-Shaking)
+  - Syntax-Highlighting für C/C++ (`.c`, `.h`, `.inc`) und Text
+  - Theme-Persistenz via localStorage
+  - Suchen & Ersetzen
+  - Speichern (Zwischen- und Abschluss-Speichern)
+  - Schließen mit Warnung bei ungespeicherten Änderungen
+  - Read-Only-Toggle
+- Integration ins Fenster-System (Phase 2.1):
+  - Editor und DirList werden als Fenster dargestellt
+  - Parent-Child: DirList ist Parent von Editor
+
+#### 3.3 Charakter-Module
+
+**Ziel:** Anzeige von Charakter-Informationen (Name, Stats, Inventar).
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/mud/mud-signals.ts`, `u1_webmud3_master/frontend/src/app/modeless/char-stat/`, `u1_webmud3_master/frontend/src/app/widgets/inventory/`
+
+**Aufgaben:**
+
+- `frontend/src/app/features/gmcp-char/`
+- `CharGmcpHandler` implementiert `GmcpModuleHandler`:
+  - `Char.Name`: Charakter-Name und Titel → Browser-Titel-Update, Wizard-Erkennung
+  - `Char.StatusVars`: Definiert verfügbare Status-Variablen
+  - `Char.Status`: Aktuelle Werte (Gilde, Rasse, Rang)
+  - `Char.Vitals`: HP/SP-Werte
+  - `Char.Stats`: STR/INT/CON/DEX-Werte
+- `CharacterData`-Klasse (typisiert):
+
+```typescript
+export interface CharacterData {
+  name?: string;
+  title?: string;
+  isWizard: boolean;
+  statusVars: Map<string, string>;
+  status: Record<string, string | number>;
+  vitals: { hp?: number; sp?: number; maxHp?: number; maxSp?: number };
+  stats: { str?: number; int?: number; con?: number; dex?: number };
+}
+```
+
+- `CharStatsComponent` (Standalone): Charakter-Statistik-Fenster
+- `Char.Items`-Handler:
+  - `Char.Items.List`: Empfängt vollständige Inventar-Liste
+  - `Char.Items.Add`: Einzelnes Item hinzufügen
+  - `Char.Items.Remove`: Item entfernen
+- `InventoryComponent` (Standalone): Kategorisiertes Inventar-Widget
+- `InventoryList`-Datenmodell:
+
+```typescript
+export interface InventoryItem {
+  id: string;
+  name: string;
+  category?: string;
+}
+
+export interface InventoryList {
+  items: InventoryItem[];
+  categories: Map<string, InventoryItem[]>;
+}
+```
+
+#### 3.4 Input-Completion
+
+**Ziel:** Tab-Vervollständigung über GMCP.
+
+**Referenz:** GMCP `Input.Complete` in u1
+
+**Aufgaben:**
+
+- `InputGmcpHandler` implementiert `GmcpModuleHandler`:
+  - Tab-Taste im `MudInputController` → `Input.Complete` Request an MUD
+  - Response-Typen:
+    - `Text`: Direkte Ersetzung des aktuellen Worts
+    - `Choice`: Auswahlliste anzeigen (Overlay)
+    - `None`: Kein Match
+- Integration in `MudInputController` (`frontend/src/app/features/terminal/mud-input.controller.ts`):
+  - Neuer Callback für Tab-Events
+  - Buffer-Manipulation bei erfolgreicher Completion
+- Completion-Overlay-Component (Standalone):
+  - Dropdown-Liste bei `Choice`-Response
+  - Keyboard-Navigation (Arrow-Keys, Enter, Escape)
+
+#### 3.5 Numpad/Keypad
+
+**Ziel:** MUD-synchronisierte Tastenbelegung mit visuellem Numpad.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/shared/keypad-data.ts`, `u1_webmud3_master/frontend/src/app/modeless/keypad/`
+
+**Aufgaben:**
+
+- `frontend/src/app/features/gmcp-numpad/`
+- `NumpadGmcpHandler` implementiert `GmcpModuleHandler`:
+  - `Numpad.SendLevel`: MUD sendet Tastenbelegung für eine Ebene
+  - `Numpad.Update`: Client sendet geänderte Belegung zurück
+  - `Numpad.GetAll`: Client fordert alle Ebenen an
+- `KeypadData`-Datenmodell:
+
+```typescript
+export interface OneKeypadData {
+  prefix: string;
+  keys: Map<string, string>;  // Taste → Befehl
+}
+
+export interface KeypadData {
+  levels: Map<string, OneKeypadData>;
+  currentLevel: string;
+}
+```
+
+- Modifier-Support: Shift, Ctrl, Alt, Meta + Numpad/F-Tasten
+- `KeypadComponent` (Standalone): Visuelles anklickbares Numpad-Widget
+- `KeypadConfigComponent` (Standalone): Konfigurations-Dialog im Fenster-System
+- Integration in `MudInputController`: Numpad-Tasten abfangen und MUD-Befehl senden
+
+#### 3.6 Kommunikations- und Kern-Module
+
+**Ziel:** Weitere GMCP-Module für Kommunikation, Keep-Alive und Raum-Info.
+
+**Aufgaben:**
+
+- **`Core.Ping`**: Keep-Alive mit visueller Anzeige
+  - Periodischer Ping → Latenz-Messung
+  - Status-Anzeige (z.B. im Menü oder als Badge)
+- **`Core.BrowserInfo`**: Geräte-Info an MUD senden
+  - Browser, OS, Version, Typ (Mobile/Tablet/Desktop)
+  - Client-ID (UUID pro Session)
+  - `real_ip` wird im Backend ergänzt (aus `x-forwarded-for`)
+  - Alternative zu `ngx-device-detector`: Native `navigator.userAgent` Parsing oder `ua-parser-js`
+- **`Core.Hello`**: MUD/Client-Identifikation beim Verbindungsaufbau
+- **`Core.Goodbye`**: Logoff-Ankündigung vom MUD
+- **`Core.Supports`**: Set/Add/Remove von GMCP-Modulen
+  - Wird vom `GmcpService` automatisch verwaltet
+- **`Comm.Say/Soul/Tell`**: Kommunikationskanäle
+  - Optional: Separate Anzeige in eigenem Panel
+  - Minimal: Als regulärer MUD-Output durchreichen
+- **`Room.Info`**: Raum-Information (Name, Domain, Exits)
+  - Optional: Raum-Name in Titelleiste
+  - Optional: Exit-Buttons/Links
+
+---
+
+### Phase 4: Deployment und Infrastruktur
+
+#### 4.1 Multi-MUD-Routing im Frontend
+
+**Ziel:** Verschiedene MUDs über URL-Pfade auswählbar.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/nonportal/` und `mud_config.json` Routes
+
+**Aufgaben:**
+
+- Dynamische Routen aus `mud_config.json`:
+  - `"/"` → UNItopia, `"/orbit"` → Orbit, `"/seifenblase"` → Seifenblase etc.
+- Angular Router konfigurieren:
+  - Parametrisierte Route: `/:mudId` statt hartcodierter Nonportal-Pages
+  - Default-Route aus Config
+- `MudSelectorComponent` (Standalone): Landing-Page mit MUD-Auswahl (wenn keine spezifische Route)
+- `MudService.connect()` erweitern: `mudId` aus Router-Parameter übergeben
+
+#### 4.2 Multi-Deployment-Konfiguration
+
+**Ziel:** Verschiedene Deployment-Szenarien unterstützen.
+
+**Referenz:** `u1_webmud3_master/frontend/src/environments/` (5+ Dateien)
+
+**Aufgaben:**
+
+- Zusätzliche Environment-Files:
+  - `environment.prod.sb.ts` (Seifenblase)
+  - `environment.prod.uni.ts` (UNItopia Produktion)
+- `ServerConfigService` erweitern:
+  - URL-basierte Backend-Erkennung (Referenz: `u1_webmud3_master/frontend/src/app/shared/server-config.service.ts`)
+  - Origin/Path-Matching für verschiedene Deployments
+- Docker Compose Varianten:
+  - Lokales Deployment
+  - Produktion (UNItopia)
+  - Seifenblase
+  - Mit Apache Reverse-Proxy
+  - Secret-Management
+- `angular.json`: File-Replacements für zusätzliche Build-Konfigurationen
+
+#### 4.3 Auth/RPC (optional)
+
+**Ziel:** Experimentelle Authentifizierung gegen den MUD-Server.
+
+**Referenz:** `u1_webmud3_master/backend/mudrpc/`
+
+**Aufgaben:**
+
+- REST-Auth-Routes in TypeScript portieren:
+  - `POST /api/auth/login` → RPC `mud.password` Validierung
+  - `POST /api/auth/logout` → Session beenden
+  - `GET /api/auth/loggedon` → Status abfragen
+- `LdjClient` (Line-Delimited JSON) in TypeScript portieren
+- `MudRpc` Request/Response-Protokoll mit ID-basiertem Caching in TypeScript
+- `RpcClient` mit Lazy-Connection und Auto-Reconnect
+- Cookie-Session-Middleware reaktivieren (`use-cookie-session.ts` existiert bereits in u2)
+- GMCP `Char.Login`: JWT-Token-basiertes Auto-Login (konzeptionell aus u1)
+
+#### 4.4 mdconn-Microservice (optional)
+
+**Ziel:** RPC-Bridge zum MUD-Server über Unix-Socket.
+
+**Referenz:** `u1_webmud3_master/mdconn/`
+
+**Aufgaben:**
+
+- TypeScript-Portierung des LDJ-Protokolls
+- Eigenes `mdconn/`-Paket im Monorepo (oder separates Repository)
+- Docker Compose Integration
+- Dokumentation der IPC-Schnittstelle
+
+---
+
+## 5. Architektur-Diagramm: Zielzustand
+
+```mermaid
+graph TB
+  subgraph frontend [Frontend - Angular Standalone]
+    MudClient[MudClientComponent]
+    XTerm[xterm.js Terminal]
+    GmcpFE[GmcpService]
+    WinSvc[WindowService]
+    MenuSvc[MenuService]
+    ColorSvc[ColorSettingsService]
+    SoundMod[SoundModule]
+    FilesMod[FilesModule]
+    CharMod[CharModule]
+    NumpadMod[NumpadModule]
+    InputComp[InputCompletion]
+    CommMod[CommModule]
+    SocketsSvc[SocketsService]
+    ScreenReader[ScreenReaderAnnouncer]
+
+    MudClient --> XTerm
+    MudClient --> WinSvc
+    MudClient --> MenuSvc
+    MudClient --> ColorSvc
+    MudClient --> ScreenReader
+    GmcpFE --> SoundMod
+    GmcpFE --> FilesMod
+    GmcpFE --> CharMod
+    GmcpFE --> NumpadMod
+    GmcpFE --> InputComp
+    GmcpFE --> CommMod
+    SocketsSvc --> GmcpFE
+  end
+
+  subgraph shared [Shared - Types]
+    SocketEvents[Socket Events inkl. GMCP]
+    MudCfgTypes[MudFamilyConfig Types]
+    GmcpTypes[GmcpModule Types]
+    LinemodeTypes[LinemodeState]
+  end
+
+  subgraph backend [Backend - Express 5 / TypeScript]
+    SocketMgr[SocketManager]
+    TelnetCl[TelnetClient]
+    GmcpHandler[GMCP OptionHandler]
+    MudCfgSvc[MudConfigService]
+    AuthRPC["Auth/RPC (optional)"]
+    OutputBuf[OutputLineBuffer]
+
+    SocketMgr --> TelnetCl
+    TelnetCl --> GmcpHandler
+    SocketMgr --> MudCfgSvc
+    SocketMgr --> OutputBuf
+  end
+
+  SocketsSvc -->|"Socket.IO (WebSocket)"| SocketMgr
+  TelnetCl -->|"Telnet TCP/TLS"| MUDServer[MUD Server]
+  AuthRPC -.->|"Unix Socket / RPC"| MUDServer
+```
+
+---
+
+## 6. Empfohlene Reihenfolge und Priorisierung
+
+| Priorität | Phase | Begründung |
+|-----------|-------|------------|
+| **Kritisch** | 1.1 + 1.2 + 1.4 (GMCP Grundlagen) | Voraussetzung für alle GMCP-Features |
+| **Hoch** | 1.3 (Multi-MUD) | Kernfunktionalität für Produktivbetrieb |
+| **Hoch** | 2.1 (Fenstersystem) | Voraussetzung für Editor, Stats, Keypad |
+| **Hoch** | 3.2 (Datei-Editor) | Wichtigstes Wizard-Tool |
+| **Mittel** | 3.1 (Sound) | Erlebnis-Feature |
+| **Mittel** | 3.3 (Char-Module) | Gameplay-relevant |
+| **Mittel** | 2.2 (Menü) | UX-Verbesserung |
+| **Mittel** | 3.5 (Numpad) | Komfort-Feature |
+| **Niedrig** | 2.3 (Farbeinstellungen) | Nice-to-have |
+| **Niedrig** | 3.4 (Tab-Completion) | Komfort |
+| **Niedrig** | 3.6 (Comm-Module) | Ergänzend |
+| **Niedrig** | 4.1 (Multi-MUD-Routing) | Deployment |
+| **Niedrig** | 4.2 (Multi-Deployment) | Deployment |
+| **Optional** | 4.3 (Auth/RPC) | Experimentell |
+| **Optional** | 4.4 (mdconn) | Experimentell |
+
+---
+
+## 7. Aufwandsschätzung
+
+| Phase | Geschätzter Aufwand | Beschreibung |
+|-------|---------------------|--------------|
+| Phase 1 | 3–5 Wochen | GMCP-Grundlagen + Multi-MUD |
+| Phase 2 | 2–4 Wochen | Fenstersystem + Menü + Farben |
+| Phase 3 | 4–8 Wochen | Alle GMCP-Feature-Module |
+| Phase 4 | 1–3 Wochen | Deployment + Optionales |
+| **Gesamt** | **10–20 Wochen** | Je nach Priorisierung und Parallelisierung |
+
+---
+
+## 8. Risiken und Mitigationen
+
+| Risiko | Auswirkung | Mitigation |
+|--------|------------|------------|
+| xterm.js unterstützt kein HTML-Rendering für ANSI-Spans | Farbeinstellungen weniger flexibel als u1 | xterm.js Theme-API und Addon-System nutzen |
+| Ace Editor Bundle-Größe (~1MB) | Frontend-Performance | Lazy Loading, nur laden wenn Editor geöffnet |
+| PrimeNG-Abhängigkeit vermeiden | Eigene UI-Komponenten nötig | Angular CDK für Overlays, Drag&Drop; eigenes SCSS |
+| GMCP-Module-Interaktion komplex | Schwer testbar | Klare Interfaces, Strategy Pattern, umfangreiche Unit-Tests |
+| Multi-MUD ändert Socket-Protokoll | Breaking Change | Rückwärtskompatibel: `mudId` optional, Fallback auf Env-Vars |
+| Screenreader-Kompatibilität bei neuen UI-Elementen | Accessibility-Regression | ARIA-Attribute, Keyboard-Navigation, Screenreader-Tests |
+
+---
+
+## 9. Referenz-Dateien
+
+### u1 (Master) – Quellen für Migration
+
+| Datei/Ordner | Feature |
+|---|---|
+| `backend/mudSocket.js` | GMCP-Protokoll, Telnet-Negotiation |
+| `backend/server.js` | Multi-MUD-Config, GMCP-Event-Routing |
+| `backend/mudrpc/` | Auth/RPC-System |
+| `frontend/src/mud_config.json` | MUD-Familien + MUD-Liste |
+| `frontend/src/app/gmcp/gmcp.service.ts` | GMCP-Service Architektur |
+| `frontend/src/app/mudconfig/unitopia.service.ts` | MUD-Familien-Handler |
+| `frontend/src/app/mud/ansi.service.ts` | ANSI-Farbverarbeitung |
+| `frontend/src/app/mud/files.service.ts` | Datei-Lade/Speicher-Logik |
+| `frontend/src/app/mud/mud-signals.ts` | GMCP-Signal-Verarbeitung |
+| `frontend/src/app/shared/sockets-config.ts` | 4-Schichten Socket-Architektur |
+| `frontend/src/app/shared/window.service.ts` | Fenster-Management |
+| `frontend/src/app/shared/window-config.ts` | Fenster-Konfiguration |
+| `frontend/src/app/shared/keypad-data.ts` | Numpad-Datenmodell |
+| `frontend/src/app/modeless/editor/` | Code-Editor Component |
+| `frontend/src/app/modeless/dirlist/` | Verzeichnis-Browser Component |
+| `frontend/src/app/modeless/keypad/` | Keypad-Widget |
+| `frontend/src/app/widgets/inventory/` | Inventar-Anzeige |
+| `frontend/src/app/menu/menu.service.ts` | Menü-Logik |
+| `frontend/src/app/settings/color-settings/` | Farbeinstellungen UI |
+
+### u2 (Develop) – Ziel-Dateien für Erweiterung
+
+| Datei/Ordner | Erweiterung |
+|---|---|
+| `shared/src/sockets/client-to-server-events.ts` | + GMCP-Events |
+| `shared/src/sockets/server-to-client-events.ts` | + GMCP-Events |
+| `shared/src/index.ts` | + GMCP-Typen Export |
+| `backend/src/features/telnet/models/telnet-options.ts` | + TELOPT_GMCP |
+| `backend/src/features/telnet/utils/` | + handle-gmcp-option.ts |
+| `backend/src/core/sockets/socket-manager.ts` | + GMCP-Event-Handling, Multi-MUD |
+| `backend/src/core/environment/environment.ts` | + MUD_CONFIG_PATH |
+| `frontend/src/app/features/sockets/sockets.service.ts` | + GMCP-Events |
+| `frontend/src/app/core/mud/services/mud.service.ts` | + GMCP-Observables |
+| `frontend/src/app/features/terminal/mud-input.controller.ts` | + Tab-Completion, Numpad |
+
diff --git a/dockerfiles/MIGRATION_V3.md b/dockerfiles/MIGRATION_V3.md
new file mode 100644
index 0000000..377ac03
--- /dev/null
+++ b/dockerfiles/MIGRATION_V3.md
@@ -0,0 +1,1080 @@
+# WebMud3 Migrationsplan V3: Feature-Completion u3 (Target) mit u1 (Master)
+
+## 1. Kontext
+
+Die **Zielarchitektur** ist `u3_webmud3_target` (Branch `migrate/p3-gmcp`), ein teilweise migrierter Stand auf Basis von `u2_webmud3_develop` (PR #165) plus 15 eigene Migrations-Commits. Der **Feature-Spender** ist `u1_webmud3_master` (V0.6.2), der zahlreiche Features enthält, die in u3 noch fehlen.
+
+Dieser Plan baut auf **MIGRATION_V2** (u1 → u2) auf und adressiert die **verbleibende Feature-Lücke** zwischen u1 und u3 in 6 Phasen.
+
+### 1.1 Technologische Grundlagen der Zielarchitektur (u3)
+
+| Aspekt                 | u3 (Target – Ziel)                            |
+|------------------------|------------------------------------------------|
+| **Backend-Sprache**    | TypeScript (strict), ES Modules                |
+| **Projekt-Struktur**   | npm Workspaces Monorepo (shared/backend/frontend) |
+| **Shared-Paket**       | `@webmud3/shared` – typisierte Socket-Events + GMCP-Typen |
+| **Angular-Stil**       | Standalone Components, `inject()` statt Constructor DI |
+| **Terminal-Rendering**  | xterm.js mit FitAddon, ClipboardAddon, AttachAddon |
+| **UI-Framework**       | Eigenes SCSS (kein PrimeNG), Catppuccin Mocha   |
+| **Express**            | v5                                              |
+| **Logging**            | Winston                                         |
+| **Testing**            | Jest (Frontend + Backend), ~1.752 Test-Zeilen für neue Features |
+| **CI/CD**              | GitHub Actions → Azure Web App                  |
+| **Accessibility**      | Custom ARIA-Live-Region ScreenReader-Announcer   |
+| **Reconnection**       | Session-Token + OutputLineBuffer-Replay          |
+| **GMCP Backend**       | Vollständig (Negotiation, Forwarding, Core.BrowserInfo) |
+| **GMCP Frontend**      | GmcpService mit Strategy Pattern, 3 Handler (Char, Sound, Files) |
+| **Multi-MUD Backend**  | MudConfigService + REST `/api/mud-config`        |
+| **Fenstersystem**      | WindowService, Drag/Resize, Parent-Child, Event-Bus |
+| **Code-Editor**        | Ace Editor (ace-builds), Syntax-Highlighting      |
+
+### 1.2 Feature-Bestand der Quellarchitektur (u1)
+
+| Aspekt                 | u1 (Master – Quelle, V0.6.2)                 |
+|------------------------|-----------------------------------------------|
+| **Backend-Sprache**    | Plain JavaScript (ES6+)                       |
+| **Projekt-Struktur**   | Separate Packages (kein Monorepo)             |
+| **Angular-Stil**       | NgModules                                     |
+| **Terminal-Rendering**  | HTML-Spans mit eigenem AnsiService            |
+| **UI-Framework**       | PrimeNG (Nora Theme)                          |
+| **Express**            | v4                                            |
+| **GMCP-Support**       | Umfangreich (15+ Module)                      |
+| **Code-Editor**        | Ace Editor (37 Themes) + Suchen & Ersetzen    |
+| **Fenster-System**     | Eigenes Draggable/Resizable                   |
+| **Menü-System**        | PrimeNG Menubar, 3-Level, dynamisch           |
+| **Numpad/Keypad**      | MUD-synchron, Modifier, visuelles Widget      |
+| **Farbeinstellungen**  | Invertierung, B/W, Monochrom, Echo-Farbe      |
+| **Tab-Completion**     | GMCP Input.Complete (Text/Choice/None)        |
+| **Auth/RPC**           | REST Login + Unix-Socket RPC (experimentell)  |
+| **Multi-Deployment**   | 5+ Environment-Configs + Docker Compose       |
+
+---
+
+## 2. Analyse der Feature-Lücken
+
+### 2.1 Bereits migrierte Features (kein Handlungsbedarf)
+
+| Feature | u1 (Master) | u3 (Target) | Migrations-Commit |
+|---------|-------------|-------------|-------------------|
+| GMCP-Protokoll Backend | `mudSocket.js` | `handle-gmcp-option.ts` + TelnetClient | #2, #14, #15 |
+| GMCP Socket-Events | Nicht typisiert | `@webmud3/shared` GMCP-Typen | #3 |
+| Multi-MUD Backend | `server.js` + `mud_config.json` | MudConfigService + REST-API | #5 |
+| GMCP Frontend Core | `gmcp.service.ts` | GmcpService + Strategy Pattern | #4 |
+| Fenstersystem | `window.service.ts` | WindowService + Components | #6 |
+| Sound-System | UNItopia-Service | SoundGmcpHandler | #8 |
+| Datei-Browser + Editor | `files.service.ts` + Modeless | FilesGmcpHandler + ACE | #7 |
+| Char-Statistiken | `mud-signals.ts` | CharGmcpHandler + Statusbar | #10 |
+| Inventar-Anzeige | `inventory/` Widget | InventoryComponent | #11 |
+| Core.BrowserInfo | `sockets-config.ts` | extractRealIp + SocketManager | #9 |
+
+### 2.2 Noch zu migrierende Features
+
+| Feature | u1 (Master) | u3 (Target) | Aufwand | Phase |
+|---------|-------------|-------------|---------|-------|
+| Core.Hello (Client-ID) | Automatisch bei GMCP-Start | **Fehlt** | Niedrig | 1 |
+| Core.Supports.Set (Init) | Automatisch nach Hello | **Fehlt** (nur Add/Remove für Sound) | Niedrig | 1 |
+| Core.Ping (Keep-Alive) | Toggle-Visualisierung | **Fehlt** | Niedrig | 1 |
+| Core.Goodbye (Logoff) | Empfang (Cleanup fehlt auch in u1) | **Fehlt** | Niedrig | 1 |
+| Menü-System | PrimeNG Menubar, 3-Level | **Fehlt** | Mittel | 2 |
+| Farbeinstellungen | Invertierung, B/W, Farben aus | **Fehlt** (nur xterm-Theme) | Mittel | 2 |
+| Input-Completion | Tab → CompleteText/Choice/None | **Fehlt** | Mittel | 3 |
+| Numpad/Keypad | MUD-synchron, Modifier, Widget | **Fehlt** (Aktivierung vorhanden) | Mittel | 3 |
+| Comm-Module | Say/Soul/Tell als Output | **Fehlt** | Niedrig | 3 |
+| Room.Info | Name, Domain, Exits | **Fehlt** | Niedrig | 3 |
+| Editor-Suche | EditorSearchComponent | **Fehlt** (ACE-intern via Ctrl+F) | Niedrig | 3 |
+| Multi-MUD Frontend UI | NonPortal Landing-Pages | **Fehlt** (Backend-API vorhanden) | Mittel | 4 |
+| Multi-Deployment | 5+ Environments, Docker | **Fehlt** (2 Environments) | Niedrig | 4 |
+| Auth/RPC | REST + RPC + LDJ-Client | **Fehlt** (Cookie-Session existiert) | Mittel | 5 |
+| mdconn Microservice | LDJ über Unix-Socket | **Fehlt** | Niedrig | 5 |
+
+### 2.3 Fehlende develop-Features (Rebase nötig)
+
+| Feature | develop PR | Status in u3 |
+|---------|------------|-------------|
+| Reconnect-Fix (`forceNewSession`, Transport-Fallback) | PR #170 | **Fehlt** |
+| Cancelable Screenreader (Structured Output, Echo-Suppression) | PR #172 | **Fehlt** |
+| WCAG AAA Web-Colors (`minimumContrastRatio: 7`) | PR #162 | **Fehlt** |
+| Docker Local Test Setup | PR #173 | **Fehlt** |
+
+---
+
+## 3. Migrationsprinzipien
+
+Alle Prinzipien aus MIGRATION_V2 gelten weiterhin:
+
+1. **Keine Rückschritte**: Accessibility (Screen Reader), TypeScript Strict, xterm.js, Standalone Components, Session-Token-Reconnection bleiben erhalten.
+2. **Typisierung**: Alle migrierten Features müssen vollständig typisiert sein (kein `any`).
+3. **Shared-First**: Neue Socket-Events und Typen immer zuerst in `@webmud3/shared` definieren.
+4. **Strategy Pattern statt Hardcoding**: MUD-Familien-spezifisches Verhalten über austauschbare Handler, nicht über `if (family === 'unitopia')`.
+5. **Lazy Loading**: GMCP-Feature-Module nur laden wenn aktiviert.
+6. **Tests**: Jeder neue Handler/Service braucht Unit-Tests (Jest).
+7. **Barrierefreiheit**: Alle neuen UI-Elemente (Fenster, Menüs, Dialoge) müssen ARIA-Attribute und Keyboard-Navigation unterstützen.
+
+Zusätzlich für V3:
+
+8. **Rebase-First**: Vor neuen Features den develop-HEAD einholen (Phase 0).
+9. **Bestehende Bugs zuerst**: Bekannte Probleme aus U3_ANALYSIS.md fixen bevor neue Features aufgesetzt werden.
+10. **GmcpBootstrapService erweitern**: Neue Handler werden über den bestehenden Bootstrap-Mechanismus registriert.
+
+---
+
+## 4. Migrationsstruktur (6 Phasen)
+
+Die Migration wird in **6 Phasen** organisiert, geordnet nach Abhängigkeiten:
+
+```mermaid
+flowchart TD
+    P0["Phase 0: Stabilisierung + Rebase"]
+    P1["Phase 1: Core GMCP Module"]
+    P2["Phase 2: Menü + Farbeinstellungen"]
+    P3["Phase 3: GMCP Feature Module"]
+    P4["Phase 4: Deployment + Routing"]
+    P5["Phase 5: Experimentell"]
+
+    P0 --> P1
+    P1 --> P2
+    P2 --> P3
+    P3 --> P4
+    P4 --> P5
+
+    P1 -.->|"Core.Supports.Set<br>ermöglicht"| P3
+    P2 -.->|"Menü benötigt für<br>Toggles + Config"| P3
+```
+
+---
+
+### Phase 0: Stabilisierung und Rebase auf develop HEAD
+
+Schafft eine saubere Basis für alle weiteren Phasen.
+
+#### 0.1 Rebase auf develop HEAD
+
+**Ziel:** Die 4 fehlenden PRs aus dem develop-Branch in den Migrations-Branch integrieren.
+
+**Fehlende PRs:**
+
+| PR | Feature | Auswirkung auf u3 |
+|----|---------|-------------------|
+| #170 | Reconnect-Fix: `forceNewSession`, Transport `websocket` + `polling` | SocketsService muss erweitert werden |
+| #172 | Cancelable Screenreader: Structured Output, Echo-Suppression | Neue Accessibility-Features |
+| #162 | WCAG AAA Web-Colors: `minimumContrastRatio: 7` | Farbkontrast-Verbesserung, relevant für Phase 2.2 |
+| #173 | Docker Local Test Setup | Neues Dockerfile für lokale Entwicklung |
+
+**Strategie:** Cherry-Pick oder Rebase der 4 PRs. Bei Konflikten mit den 15 Migrations-Commits manuelle Resolution nötig, insbesondere in:
+- `frontend/src/app/features/sockets/sockets.service.ts` (PR #170 vs. GMCP-Erweiterungen)
+- `frontend/src/app/features/terminal/` (PR #172 vs. bestehende Terminal-Integration)
+
+#### 0.2 Bekannte Bugs fixen
+
+**Bug 1 – Files Save-Workflow (toter Code):**
+
+- **Datei:** `u3_webmud3_target/frontend/src/app/features/gmcp-files/files-gmcp-handler.ts`
+- **Problem:** `completeSave()` wird nie direkt aufgerufen; der Save-Workflow nutzt den Re-Open-via-`handleFilesUrl()`-Mechanismus
+- **Fix:** `completeSave()` entfernen oder korrekt in den Save-Workflow einbinden
+
+**Bug 2 – WindowAction Missbrauch:**
+
+- **Datei:** `u3_webmud3_target/frontend/src/app/features/windows/window-config.ts`
+- **Problem:** `WindowService.updateData()` nutzt `WindowAction.Resize` als "data changed"-Signal
+- **Fix:** Neues Enum-Member `WindowAction.DataChanged` einführen:
+
+```typescript
+export enum WindowAction {
+  Focus = 'focus',
+  Hide = 'hide',
+  Save = 'save',
+  Cancel = 'cancel',
+  SaveAndClose = 'saveAndClose',
+  WinError = 'winError',
+  Resize = 'resize',
+  DataChanged = 'dataChanged',  // NEU
+}
+```
+
+**Bug 3 – GMCP.md veraltet:**
+
+- **Problem:** `GMCP.md` zeigt alle `Char.*`-Messages als nicht implementiert, obwohl sie in u3 fertig sind
+- **Fix:** Dokumentation aktualisieren (Checkboxen setzen)
+
+---
+
+### Phase 1: Core GMCP Module
+
+**Ziel:** Die fehlenden Core-GMCP-Handshake-Mechanismen implementieren, die in u1 vorhanden sind aber in u3 fehlen. Diese sind Voraussetzung für korrekte MUD-Kommunikation.
+
+#### 1.1 Core.Hello (Client-Identifikation)
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/shared/sockets-config.ts` (Zeile 163–166)
+
+In u1 wird bei GMCP-Start automatisch gesendet:
+
+```typescript
+other.sendGMCP(id, 'Core', 'Hello', {
+  client: ioPlatform.srvcfg.getWebmudName(),
+  version: ioPlatform.srvcfg.getWebmudVersion(),
+});
+```
+
+**Aufgaben:**
+
+- In `GmcpService.handleGmcpStart()` nach Emission von `gmcpStart$` automatisch `Core.Hello` senden
+- Kein eigener Handler nötig — direkt über `sendOutgoing('Core', 'Hello', { client, version })`
+- Client-Name und Version aus `environment.ts` oder Konstante beziehen
+- MUD antwortet ebenfalls mit `Core.Hello { name: "UNItopia" }` — dieses Event loggen (Info-Level)
+
+**Schnittstelle:**
+
+```typescript
+// In GmcpService.handleGmcpStart():
+this.sendOutgoing('Core', 'Hello', {
+  client: 'WebMud3',
+  version: 'v0.7',  // oder aus Environment
+});
+```
+
+#### 1.2 Core.Supports.Set (Modul-Aktivierung)
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/shared/sockets-config.ts` (Zeile 168–175)
+
+In u1 werden nach `Core.Hello` alle unterstützten Module per `Core.Supports.Set` an das MUD gemeldet. In u3 wird nur `Core.Supports.Add/Remove` für den Sound-Toggle genutzt, aber das initiale `Set` fehlt.
+
+**Aufgaben:**
+
+- In `GmcpService.handleGmcpStart()` nach `Core.Hello` alle registrierten Module sammeln:
+
+```typescript
+// Alle registrierten Module als "ModuleName Version" Array
+const supportList = Array.from(this.moduleRegistry.values())
+  .map(handler => `${handler.moduleName} ${handler.version}`);
+
+this.sendOutgoing('Core', 'Supports.Set', supportList);
+// z.B. ["Char 1", "Char.Items 1", "Sound 1", "Files 1"]
+```
+
+- Reihenfolge: `Core.Hello` → `Core.BrowserInfo` → `Core.Supports.Set`
+- Nach `Supports.Set` kann das MUD sofort GMCP-Messages für die aktivierten Module senden
+
+#### 1.3 Core.Ping (Keep-Alive mit Latenz)
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/mud/mud-signals.ts` – `case 'Core.Ping'`
+
+In u1 wird bei Empfang eines `Core.Ping` ein visueller Toggle gesetzt (`other.togglePing = !other.togglePing`).
+
+**Aufgaben:**
+
+- Neues Feature-Verzeichnis: `frontend/src/app/features/gmcp-core/`
+- `CoreGmcpHandler` erstellen, implementiert `GmcpModuleHandler`:
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class CoreGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Core';
+  readonly version = '1';
+
+  /** Observable für Ping-Toggle (visueller Indikator) */
+  public readonly pingToggle$ = new BehaviorSubject<boolean>(false);
+
+  /** Letzte gemessene Latenz in ms */
+  public readonly latency$ = new BehaviorSubject<number | null>(null);
+
+  private lastPingSent = 0;
+
+  handleMessage(message: string, data: unknown): void {
+    switch (message) {
+      case 'Ping':
+        this.handlePing();
+        break;
+      case 'Goodbye':
+        this.handleGoodbye(data);
+        break;
+    }
+  }
+
+  private handlePing(): void {
+    // Latenz berechnen falls wir den Ping initiiert haben
+    if (this.lastPingSent > 0) {
+      this.latency$.next(Date.now() - this.lastPingSent);
+      this.lastPingSent = 0;
+    }
+    // Visueller Toggle (wie u1)
+    this.pingToggle$.next(!this.pingToggle$.value);
+    // Pong zurücksenden
+    this.sendFunction?.('Core', 'Ping', {});
+  }
+}
+```
+
+- Visueller Indikator: Ping-Toggle als kleines Icon in Statusbar oder Menüleiste
+- In `GmcpBootstrapService` registrieren
+
+#### 1.4 Core.Goodbye (Logoff-Handling)
+
+**Referenz:** u1 empfängt `Core.Goodbye`, aber Resource-Handling fehlt auch dort (TODO in u1, `GMCP.md`)
+
+**Aufgaben:**
+
+- In `CoreGmcpHandler.handleMessage('Goodbye', data)`:
+  - Logoff-Nachricht im Terminal anzeigen (z.B. `[MUD meldet Abmeldung]`)
+  - GMCP-State zurücksetzen über `GmcpService.reset()`
+  - Bestehende Fenster schließen (WindowService)
+  - CharacterData zurücksetzen
+- **Hinweis:** Auch in u1 ist dieses Feature nur teilweise implementiert. Hier die erste vollständige Implementierung.
+
+---
+
+### Phase 2: Menü-System und Farbeinstellungen
+
+#### 2.1 Menü-System
+
+**Ziel:** Dynamisches hierarchisches Menü für MUD-Steuerung und Feature-Zugriff.
+
+**Referenz:**
+- `u1_webmud3_master/frontend/src/app/menu/menu.service.ts` – 3-Level-Hierarchie, dynamische Items
+- `u1_webmud3_master/frontend/src/app/menu/one-menu.ts` – `MenuType`, Callback-System
+- `u1_webmud3_master/frontend/src/app/menu/main-menu/main-menu.component.ts` – PrimeNG Menubar
+
+**Ziel-Verzeichnis:** `frontend/src/app/features/menu/`
+
+**Aufgaben:**
+
+- `MenuService` als Injectable (`providedIn: 'root'`):
+  - Typisiertes Menü-Modell (ohne PrimeNG — eigenes SCSS):
+
+```typescript
+export interface MenuItem {
+  id: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  visible?: boolean;
+  separator?: boolean;
+  command?: (event: MenuEvent) => void;
+  children?: MenuItem[];
+}
+
+export interface MenuEvent {
+  item: MenuItem;
+  originalEvent?: Event;
+}
+
+@Injectable({ providedIn: 'root' })
+export class MenuService {
+  private readonly menuItems$ = new BehaviorSubject<MenuItem[]>([]);
+
+  /** Registriert/aktualisiert einen Menüpunkt */
+  registerItem(parentId: string | null, item: MenuItem): void { ... }
+
+  /** Entfernt einen Menüpunkt */
+  removeItem(itemId: string): void { ... }
+
+  /** Observable der aktuellen Menüstruktur */
+  get items$(): Observable<MenuItem[]> { return this.menuItems$.asObservable(); }
+}
+```
+
+  - 3-Level-Hierarchie: Hauptmenü → Untermenü → Sub-Untermenü
+  - Dynamische Items:
+    - **MUD**: Connect (MUD-Liste aus `/api/mud-config`), Disconnect
+    - **Ansicht**: Scroll-Lock Toggle, Farbeinstellungen (→ Phase 2.2)
+    - **GMCP**: Sound an/aus, Numpad-Config (→ Phase 3.2)
+    - **Fenster**: Liste offener Fenster
+  - GMCP-Module können eigene Menüpunkte registrieren via `GmcpModuleHandler.getMenuItems()`
+
+- `MenuBarComponent` (Standalone):
+  - Horizontale Leiste am oberen Bildschirmrand
+  - Eigenes SCSS mit Catppuccin Mocha Farbschema (konsistent zu WindowComponent)
+  - Keyboard-Navigation: Arrow-Keys horizontal/vertikal, Enter zum Öffnen, Escape zum Schließen
+  - ARIA: `role="menubar"`, `role="menu"`, `role="menuitem"`, `aria-expanded`, `aria-haspopup`
+  - Responsive: Hamburger-Menü auf schmalen Bildschirmen
+
+- `MenuDropdownComponent` (Standalone):
+  - Dropdown-Panel für Untermenüs
+  - Positionierung relativ zum Parent-Item
+  - Klick-außerhalb-Schließen via `@HostListener('document:click')`
+
+- Integration in `app.component.html`:
+  - `<app-menu-bar>` oberhalb des Terminal-Bereichs
+  - Layout: MenuBar → Terminal + Statusbar → WindowContainer
+
+**Schnittstelle zu GMCP-Modulen:**
+
+```typescript
+// In GmcpModuleHandler (bestehendes Interface erweitern):
+export interface GmcpModuleHandler {
+  readonly moduleName: string;
+  readonly version: string;
+  handleMessage(message: string, data: unknown): void;
+  getMenuItems?(): MenuItem[];  // Optional: Menüpunkte für dieses Modul
+  dispose?(): void;
+}
+```
+
+#### 2.2 Farbeinstellungen für xterm.js
+
+**Ziel:** Benutzer können Terminal-Farben anpassen wie in u1.
+
+**Referenz:**
+- `u1_webmud3_master/frontend/src/app/settings/color-settings/color-settings.component.ts` – PrimeNG DynamicDialog
+- `u1_webmud3_master/frontend/src/app/mud/color-settings.ts` – Farb-Invertierung, B/W, Monochrom
+
+**Ziel-Verzeichnis:** `frontend/src/app/features/settings/`
+
+**Aufgaben:**
+
+- `ColorSettingsService` als Injectable:
+
+```typescript
+export interface ColorSettings {
+  invertColors: boolean;       // Alle Farben invertieren
+  blackOnWhite: boolean;       // Schwarz/Weiß tauschen (helle Umgebungen)
+  disableColors: boolean;      // Monochromer Modus
+  localEchoColor: string;     // Farbe für lokales Echo (Standard: '#a8ff00')
+}
+
+@Injectable({ providedIn: 'root' })
+export class ColorSettingsService {
+  private readonly settings$ = new BehaviorSubject<ColorSettings>(this.loadFromStorage());
+
+  /** Speichert Einstellungen in localStorage (statt Base64-Cookie wie u1) */
+  save(settings: ColorSettings): void { ... }
+
+  /** Generiert xterm.js Theme aus aktuellen Einstellungen */
+  getXtermTheme(): ITheme { ... }
+}
+```
+
+- xterm.js Theme-API Integration:
+  - `terminal.options.theme = { background, foreground, cursor, selection, ... }`
+  - 16 ANSI-Farben einzeln überschreibbar
+  - Bei `invertColors`: Alle Farbwerte invertieren
+  - Bei `blackOnWhite`: `background = '#ffffff'`, `foreground = '#000000'`
+  - Bei `disableColors`: Alle Farben auf Schwarz/Weiß-Palette setzen
+  - WCAG: Kompatibel mit PR #162 (`minimumContrastRatio: 7`)
+
+- `ColorSettingsComponent` (Standalone):
+  - Dialog/Panel, über Menü erreichbar (Phase 2.1)
+  - Toggle-Switches für Invertierung, B/W, Farben aus
+  - Farbwähler für Local-Echo-Farbe
+  - Live-Vorschau der Terminal-Farben
+  - ARIA: Labels für alle Eingabefelder, `role="dialog"`
+
+---
+
+### Phase 3: GMCP-Feature-Module
+
+Jedes GMCP-Modul wird als eigenständiges Angular Feature implementiert, das das bestehende `GmcpModuleHandler`-Interface aus `frontend/src/app/features/gmcp/gmcp-module-handler.ts` implementiert. Neue Handler werden in `GmcpBootstrapService` registriert.
+
+#### 3.1 Input-Completion (Tab-Vervollständigung)
+
+**Ziel:** Tab-Vervollständigung über GMCP, wie in u1 implementiert.
+
+**Referenz:**
+- `u1_webmud3_master/frontend/src/app/mud/mud-signals.ts` (Zeile 166–175) – `Input.CompleteText`, `Input.CompleteChoice`, `Input.CompleteNone`
+- `u1_webmud3_master/frontend/src/app/shared/sockets-config.ts` (Zeile 224–246) – GMCP-Signal-Routing für Input-Module
+
+**Ziel-Verzeichnis:** `frontend/src/app/features/gmcp-input/`
+
+**Aufgaben:**
+
+- `InputGmcpHandler` implementiert `GmcpModuleHandler`:
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class InputGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Input';
+  readonly version = '1';
+
+  /** Letzte Completion-Antwort */
+  public readonly completionResult$ = new Subject<CompletionResult>();
+
+  handleMessage(message: string, data: unknown): void {
+    switch (message) {
+      case 'CompleteText':
+        this.completionResult$.next({ type: 'text', value: data as string });
+        break;
+      case 'CompleteChoice':
+        this.completionResult$.next({ type: 'choice', options: data as string[][] });
+        break;
+      case 'CompleteNone':
+        this.completionResult$.next({ type: 'none' });
+        break;
+    }
+  }
+}
+
+export interface CompletionResult {
+  type: 'text' | 'choice' | 'none';
+  value?: string;
+  options?: string[][];
+}
+```
+
+- Integration in `MudInputController` (`frontend/src/app/features/terminal/mud-input.controller.ts`):
+  - Tab-Taste abfangen → aktuelles Wort extrahieren → `Input.Complete` an MUD senden:
+    ```typescript
+    gmcpService.sendOutgoing('Input', 'Complete', { text: currentWord });
+    ```
+  - Bei `CompleteText`: Aktuelles Wort im Input-Buffer ersetzen
+  - Bei `CompleteChoice`: Auswahlliste anzeigen (→ Completion-Overlay)
+  - Bei `CompleteNone`: Optional Beep oder keine Aktion
+
+- `CompletionOverlayComponent` (Standalone):
+  - Dropdown-Liste bei `Choice`-Response
+  - Positionierung relativ zur Cursor-Position im Terminal
+  - Keyboard-Navigation (Arrow-Keys, Enter zum Auswählen, Escape zum Schließen)
+  - ARIA: `role="listbox"`, `role="option"`, `aria-activedescendant`
+
+- In `GmcpBootstrapService` registrieren
+
+#### 3.2 Numpad/Keypad
+
+**Ziel:** MUD-synchronisierte Tastenbelegung mit visuellem Numpad-Widget.
+
+**Referenz:**
+- `u1_webmud3_master/frontend/src/app/shared/keypad-data.ts` – `OneKeypadData`, `KeypadData` Klassen (untypisiert, `any`)
+- `u1_webmud3_master/frontend/src/app/modeless/keypad/keypad.component.ts` – Visuelles Keypad-Widget (PrimeNG DynamicDialog)
+
+**Ziel-Verzeichnis:** `frontend/src/app/features/gmcp-numpad/`
+
+**Aufgaben:**
+
+- Typisiertes `KeypadData`-Datenmodell (Map statt `any` wie in u1):
+
+```typescript
+export interface OneKeypadData {
+  prefix: string;
+  keys: Map<string, string>;  // Taste → Befehl
+}
+
+export interface KeypadData {
+  levels: Map<string, OneKeypadData>;
+  currentLevel: string;
+}
+```
+
+- `NumpadGmcpHandler` implementiert `GmcpModuleHandler`:
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class NumpadGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Numpad';
+  readonly version = '1';
+
+  public readonly keypadData$ = new BehaviorSubject<KeypadData | null>(null);
+
+  handleMessage(message: string, data: unknown): void {
+    switch (message) {
+      case 'SendLevel':
+        // MUD sendet Tastenbelegung für eine Ebene
+        this.handleSendLevel(data as NumpadLevelPayload);
+        break;
+    }
+  }
+
+  /** Client sendet geänderte Belegung zurück ans MUD */
+  sendUpdate(level: string, key: string, value: string): void {
+    this.sendFunction?.('Numpad', 'Update', { level, key, value });
+  }
+
+  /** Client fordert alle Ebenen an */
+  requestAll(): void {
+    this.sendFunction?.('Numpad', 'GetAll', {});
+  }
+}
+```
+
+- Modifier-Support: Shift, Ctrl, Alt, Meta + Numpad-Tasten + F-Tasten
+  - Compound-Key-Format: `"prefix|key"` (z.B. `"shift|Numpad7"` → "nordwesten")
+  - `getCompoundKey(modifiers: string): string` wie in u1
+
+- `KeypadComponent` (Standalone):
+  - Visuelles anklickbares Numpad-Widget als Modeless Window (via WindowService)
+  - 3x3 Grid für Richtungen (NW, N, NE, W, center, E, SW, S, SE)
+  - Klick → Befehl an MUD senden
+  - Anzeige der aktuellen Belegung pro Taste
+  - ARIA: `role="grid"`, `aria-label` pro Taste
+
+- `KeypadConfigComponent` (Standalone):
+  - Konfigurationsdialog im Fenstersystem (Parent: KeypadComponent)
+  - Ebene auswählen, Tasten-Zuordnung bearbeiten
+  - Speichern → `Numpad.Update` an MUD
+
+- Integration in `MudInputController`:
+  - Numpad-Tasten (Numpad0–Numpad9, NumpadDecimal, etc.) und F-Tasten abfangen
+  - Modifier-Erkennung (Shift/Ctrl/Alt/Meta)
+  - Compound-Key-Lookup in `KeypadData` → Befehl an MUD senden
+  - Tastendruck nicht an Terminal weiterleiten wenn Mapping existiert
+
+- Aktivierung: Wird bei Wizard-Login via `Core.Supports.Add ['Numpad 1']` aktiviert (Logik in `CharGmcpHandler` bei Wizard-Erkennung über `Char.Name` bereits vorhanden)
+
+#### 3.3 Kommunikations-Module (Comm)
+
+**Ziel:** GMCP-Kommunikationskanäle wie in u1 unterstützen.
+
+**Referenz:** u1 hat `Comm.Say`, `Comm.Soul`, `Comm.Tell` als GMCP-Signale, die als regulärer MUD-Output durchgereicht werden.
+
+**Ziel-Verzeichnis:** `frontend/src/app/features/gmcp-comm/`
+
+**Aufgaben:**
+
+- `CommGmcpHandler` implementiert `GmcpModuleHandler`:
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class CommGmcpHandler implements GmcpModuleHandler {
+  readonly moduleName = 'Comm';
+  readonly version = '1';
+
+  /** Observable für Kommunikations-Messages */
+  public readonly commMessage$ = new Subject<CommMessage>();
+
+  handleMessage(message: string, data: unknown): void {
+    switch (message) {
+      case 'Say':
+      case 'Soul':
+      case 'Tell':
+        this.commMessage$.next({ type: message, data });
+        break;
+    }
+  }
+}
+```
+
+- **Minimal-Implementierung**: Comm-Messages werden als regulärer MUD-Output durchgereicht (wie in u1)
+- **Optional (Erweiterung)**: Separates Kommunikations-Panel als Modeless Window mit gefilterten Nachrichten
+- In `GmcpBootstrapService` registrieren
+
+#### 3.4 Room.Info
+
+**Ziel:** Raum-Informationen vom MUD empfangen und anzeigen.
+
+**Referenz:** u1 empfängt `Room.Info` mit Name, Domain und Exits.
+
+**Aufgaben:**
+
+- In `CoreGmcpHandler` (aus Phase 1.3) erweitern oder eigenen `RoomGmcpHandler`:
+
+```typescript
+export interface RoomInfo {
+  name?: string;
+  domain?: string;
+  exits?: string[];
+}
+```
+
+- **Minimal**: Raum-Name im Browser-Titel anzeigen (`document.title = roomName + ' - WebMud3'`)
+- **Optional**: Exit-Buttons als anklickbare Links unter dem Terminal
+- In `GmcpBootstrapService` registrieren (wenn eigener Handler)
+
+#### 3.5 Editor-Suche (Suchen & Ersetzen)
+
+**Ziel:** Suchen & Ersetzen im Code-Editor.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/settings/editor-search/editor-search.component.ts` – eigenes Fenster für Suchen & Ersetzen
+
+**Aufgaben:**
+
+- **Option A (empfohlen)**: ACE-eigene Suche nutzen (Ctrl+F / Ctrl+H) — bereits in `ace-builds` enthalten, nur sicherstellen dass die Keybindings nicht vom Terminal abgefangen werden
+- **Option B**: Eigenes `EditorSearchComponent` als Child-Fenster des Editors (wie in u1), das über ACE's Search-API (`editor.find()`, `editor.replace()`) arbeitet
+- Falls Option B: Integration im Fenstersystem als Parent-Child (Editor → EditorSearch)
+
+---
+
+### Phase 4: Multi-MUD Frontend und Deployment
+
+#### 4.1 Multi-MUD-Routing im Frontend
+
+**Ziel:** Verschiedene MUDs über URL-Pfade auswählbar, wie in u1 mit dynamischen Routen.
+
+**Status:** Backend-API (`GET /api/mud-config`) existiert bereits in u3, aber das Frontend hat keine Auswahlkomponente und übergibt keinen `mudId`-Parameter.
+
+**Referenz:** `u1_webmud3_master/frontend/src/app/nonportal/` – Landing-Pages pro MUD (UNItopia, Orbit, Seifenblase)
+
+**Aufgaben:**
+
+- `MudSelectorComponent` (Standalone):
+  - Landing-Page mit MUD-Auswahl
+  - Lädt MUD-Liste von `/api/mud-config` beim Start
+  - Zeigt Name, Beschreibung, Playerlevel pro MUD
+  - Klick → Navigation zu `/:mudId`
+  - ARIA: `role="list"`, Keyboard-Navigation
+
+- Angular Router konfigurieren:
+  - Parametrisierte Route: `/:mudId` → `MudClientComponent`
+  - Default-Route: `'/'` → `MudSelectorComponent` oder direkt zum Standard-MUD aus Config
+  - `mud_config.json` Routes: `"/"` → UNItopia, `"/orbit"` → Orbit, etc.
+
+- `SocketsService.mudConnect()` erweitern:
+  - `mudId` aus ActivatedRoute-Parameter übergeben:
+    ```typescript
+    socket.emit('mudConnect', viewport, sessionToken, mudId);
+    ```
+
+- `MudClientComponent` erweitern:
+  - `mudId` aus Route-Parameter lesen und an `SocketsService` weiterreichen
+
+#### 4.2 Multi-Deployment-Konfiguration
+
+**Ziel:** Verschiedene Deployment-Szenarien unterstützen wie in u1.
+
+**Referenz:** `u1_webmud3_master/frontend/src/environments/` (5+ Environment-Files)
+
+**Aufgaben:**
+
+- Zusätzliche Environment-Files:
+  - `frontend/src/environments/environment.prod.sb.ts` (Seifenblase)
+  - `frontend/src/environments/environment.prod.uni.ts` (UNItopia Produktion)
+
+- `ServerConfigService` erweitern (oder neu erstellen):
+  - URL-basierte Backend-Erkennung:
+    - UNItopia Produktion (`/webmud3/`) → `/mysocket.io`
+    - UNItopia Test (`/webmud3test/`) → `/mysocket-test.io`
+    - Seifenblase (`/webmud3/`) → `/sbsocket.io`
+    - Lokal → `/socket.io`
+  - Referenz: `u1_webmud3_master/frontend/src/app/shared/server-config.service.ts`
+
+- Docker Compose Varianten:
+  - Lokales Deployment (`w3_docker_compose_local.yml`)
+  - Produktion UNItopia (`w3_docker_compose.yml`)
+  - Seifenblase (`w3_docker_compose_sb.yml`)
+  - Mit Apache Reverse-Proxy (`w3_docker_compose_with_apache.yml`)
+  - Secret-Management (`w3_docker_compose_secret.yml`)
+
+- `angular.json`: File-Replacements für zusätzliche Build-Konfigurationen
+
+---
+
+### Phase 5: Experimentelle Features (optional)
+
+#### 5.1 Auth/RPC
+
+**Ziel:** Experimentelle Authentifizierung gegen den MUD-Server, wie in u1 vorhanden.
+
+**Referenz:** `u1_webmud3_master/backend/mudrpc/` – LDJ-Client, MudRpc, RpcClient, AuthController
+
+**Aufgaben:**
+
+- REST-Auth-Routes in TypeScript portieren:
+  - `POST /api/auth/login` → RPC `mud.password` Validierung
+  - `POST /api/auth/logout` → Session beenden
+  - `GET /api/auth/loggedon` → Status abfragen
+
+- `LdjClient` (Line-Delimited JSON) in TypeScript portieren:
+  - TCP/Unix-Socket-Verbindung zum MUD
+  - Zeilenweise JSON-Nachrichten senden/empfangen
+
+- `MudRpc` in TypeScript portieren:
+  - Request/Response-Protokoll mit ID-basiertem Caching
+  - Timeout-Handling für ausstehende Requests
+
+- `RpcClient` mit Lazy-Connection und Auto-Reconnect
+
+- Cookie-Session-Middleware reaktivieren:
+  - `use-cookie-session.ts` existiert bereits in u2/u3 (auskommentiert)
+  - Secret-Key aus Docker Secrets laden
+
+- GMCP `Char.Login`:
+  - JWT-Token-basiertes Auto-Login (konzeptionell aus u1)
+  - Bei vorhandener Session → automatischer Login über GMCP
+
+#### 5.2 mdconn Microservice
+
+**Ziel:** RPC-Bridge zum MUD-Server über Unix-Socket.
+
+**Referenz:** `u1_webmud3_master/mdconn/` – LDJ-Protokoll über Unix-Socket
+
+**Aufgaben:**
+
+- TypeScript-Portierung des LDJ-Protokolls (analog zu Phase 5.1)
+- Eigenes `mdconn/`-Paket im Monorepo oder separates Repository
+- Docker Compose Integration (eigenes Dockerfile, IPC-Mount)
+- Dokumentation der IPC-Schnittstelle
+
+---
+
+## 5. Architektur-Diagramm: Zielzustand nach V3
+
+```mermaid
+graph TB
+  subgraph frontend ["Frontend - Angular Standalone"]
+    MudClient[MudClientComponent]
+    XTerm["xterm.js Terminal"]
+    GmcpFE[GmcpService]
+    CoreMod[CoreGmcpHandler]
+    WinSvc[WindowService]
+    MenuSvc[MenuService]
+    ColorSvc[ColorSettingsService]
+    SoundMod[SoundGmcpHandler]
+    FilesMod[FilesGmcpHandler]
+    CharMod[CharGmcpHandler]
+    NumpadMod[NumpadGmcpHandler]
+    InputMod[InputGmcpHandler]
+    CommMod[CommGmcpHandler]
+    RoomMod[RoomGmcpHandler]
+    SocketsSvc[SocketsService]
+    ScreenReader[ScreenReaderAnnouncer]
+    MudSelector[MudSelectorComponent]
+
+    MudClient --> XTerm
+    MudClient --> WinSvc
+    MudClient --> MenuSvc
+    MudClient --> ColorSvc
+    MudClient --> ScreenReader
+    GmcpFE --> CoreMod
+    GmcpFE --> SoundMod
+    GmcpFE --> FilesMod
+    GmcpFE --> CharMod
+    GmcpFE --> NumpadMod
+    GmcpFE --> InputMod
+    GmcpFE --> CommMod
+    GmcpFE --> RoomMod
+    SocketsSvc --> GmcpFE
+    MudSelector --> SocketsSvc
+  end
+
+  subgraph shared ["Shared - @webmud3/shared"]
+    SocketEvents["Socket Events inkl. GMCP"]
+    MudCfgTypes[MudFamilyConfig Types]
+    GmcpTypes[GmcpModule Types]
+  end
+
+  subgraph backend ["Backend - Express 5 / TypeScript"]
+    SocketMgr[SocketManager]
+    TelnetCl[TelnetClient]
+    GmcpHandler[GMCP OptionHandler]
+    MudCfgSvc[MudConfigService]
+    AuthRPC["Auth/RPC (Phase 5)"]
+    OutputBuf[OutputLineBuffer]
+
+    SocketMgr --> TelnetCl
+    TelnetCl --> GmcpHandler
+    SocketMgr --> MudCfgSvc
+    SocketMgr --> OutputBuf
+  end
+
+  SocketsSvc -->|"Socket.IO"| SocketMgr
+  TelnetCl -->|"Telnet TCP/TLS"| MUDServer[MUD Server]
+  AuthRPC -.->|"Unix Socket / RPC"| MUDServer
+```
+
+### GMCP-Modul-Registrierung (Bootstrap-Flow)
+
+```mermaid
+sequenceDiagram
+    participant App as APP_INITIALIZER
+    participant Boot as GmcpBootstrapService
+    participant Svc as GmcpService
+    participant Sock as SocketsService
+    participant MUD as MUD Server
+
+    App->>Boot: bootstrap()
+    Boot->>Svc: registerModule(CoreGmcpHandler)
+    Boot->>Svc: registerModule(CharGmcpHandler)
+    Boot->>Svc: registerModule(SoundGmcpHandler)
+    Boot->>Svc: registerModule(FilesGmcpHandler)
+    Boot->>Svc: registerModule(InputGmcpHandler)
+    Boot->>Svc: registerModule(NumpadGmcpHandler)
+    Boot->>Svc: registerModule(CommGmcpHandler)
+    Boot->>Svc: registerModule(RoomGmcpHandler)
+
+    Note over Sock,MUD: Verbindung aufgebaut, GMCP ausgehandelt
+    Sock->>Svc: handleGmcpStart(gmcpSupport)
+    Svc->>Sock: sendOutgoing Core.Hello
+    Svc->>Sock: sendOutgoing Core.BrowserInfo
+    Svc->>Sock: sendOutgoing Core.Supports.Set
+    Sock->>MUD: GMCP Messages
+
+    MUD->>Sock: mudGmcpIncoming Char.Name
+    Sock->>Svc: handleIncoming Char Name
+    Svc->>Svc: Route to CharGmcpHandler
+```
+
+---
+
+## 6. Empfohlene Reihenfolge und Priorisierung
+
+| Priorität | Phase | Begründung |
+|-----------|-------|------------|
+| **Kritisch** | 0.1 (Rebase auf develop HEAD) | Basis für alle weiteren Arbeiten |
+| **Kritisch** | 0.2 (Bug-Fixes) | Sauberer Ausgangszustand |
+| **Hoch** | 1.1 + 1.2 (Core.Hello + Supports.Set) | MUD erwartet korrekte Handshake-Sequenz |
+| **Hoch** | 2.1 (Menü-System) | Zentrales UX-Element, Voraussetzung für Toggles/Config |
+| **Mittel** | 1.3 (Core.Ping) | Keep-Alive, verbessert Stabilität |
+| **Mittel** | 2.2 (Farbeinstellungen) | Wichtig für Barrierefreiheit |
+| **Mittel** | 3.1 (Input-Completion) | Wichtiges Komfort-Feature für Power-User |
+| **Mittel** | 3.2 (Numpad/Keypad) | Komfort-Feature für Wizard-User |
+| **Niedrig** | 1.4 (Core.Goodbye) | Robustheit, aber selten ausgelöst |
+| **Niedrig** | 3.3 (Comm-Module) | Minimal: Durchreichen reicht |
+| **Niedrig** | 3.4 (Room.Info) | Nice-to-have (Browser-Titel) |
+| **Niedrig** | 3.5 (Editor-Suche) | ACE-eigene Suche funktioniert bereits |
+| **Niedrig** | 4.1 (Multi-MUD Frontend) | Erst für Produktivbetrieb |
+| **Niedrig** | 4.2 (Multi-Deployment) | Erst für Produktivbetrieb |
+| **Optional** | 5.1 (Auth/RPC) | Experimentell, auch in u1 unvollständig |
+| **Optional** | 5.2 (mdconn) | Experimentell |
+
+---
+
+## 7. Aufwandsschätzung
+
+| Phase | Geschätzter Aufwand | Beschreibung |
+|-------|---------------------|--------------|
+| Phase 0 | 1–2 Wochen | Rebase + Bug-Fixes + Dokumentation |
+| Phase 1 | 1 Woche | Core.Hello, Supports.Set, Ping, Goodbye |
+| Phase 2 | 2–3 Wochen | Menü-System + Farbeinstellungen |
+| Phase 3 | 3–5 Wochen | Input, Numpad, Comm, Room, Editor-Suche |
+| Phase 4 | 1–2 Wochen | Multi-MUD Frontend + Multi-Deployment |
+| Phase 5 | 2–4 Wochen | Auth/RPC + mdconn (optional) |
+| **Gesamt** | **10–17 Wochen** | Je nach Priorisierung und Parallelisierung |
+
+### Vergleich mit MIGRATION_V2
+
+| | V2 (u1 → u2) | V3 (u3 Feature-Completion) |
+|---|---|---|
+| **Geschätzter Aufwand** | 10–20 Wochen | 10–17 Wochen |
+| **Bereits erledigt durch u3** | — | Phase 1 komplett, Phase 2.1 + 3.1–3.3 teilweise |
+| **Neue Arbeit** | Alles | UI-Features, GMCP-Module, Deployment |
+| **Komplexeste Aufgabe** | GMCP-Infrastruktur | Menü-System + Numpad |
+
+---
+
+## 8. Risiken und Mitigationen
+
+| Risiko | Auswirkung | Mitigation |
+|--------|------------|------------|
+| Rebase-Konflikte mit 4 develop-PRs | Merge-Aufwand, mögliche Regressionen | Sorgfältige manuelle Resolution, Tests nach jedem PR |
+| Menü-System ohne PrimeNG aufwändig | Eigene Keyboard-Navigation + ARIA nötig | Angular CDK Overlay als Basis nutzen |
+| Numpad-Tasten werden vom Terminal abgefangen | Keypad-Befehle kommen nicht an | `keydown`-Handler mit `preventDefault()` vor xterm.js |
+| xterm.js Theme-API limitiert Farbkontrolle | Weniger flexibel als u1's HTML-Span-Rendering | Theme-API + Custom-Addon evaluieren |
+| Ace Editor Keyboard-Konflikte mit Terminal | Shortcuts kollidieren (z.B. Ctrl+C, Ctrl+V) | Editor-Fenster bekommt Focus-Tracking, Terminal-Shortcuts nur bei Terminal-Fokus |
+| Multi-MUD-Routing ändert App-Struktur | Breaking Change für Single-MUD-Deployment | Rückwärtskompatibel: Default-Route bleibt gleich |
+| Auth/RPC-Portierung komplex (LDJ-Protokoll) | Schwer zu testen ohne MUD-Server | Mock-Server für Tests, Lazy-Loading |
+| WCAG-Kompatibilität neuer UI-Elemente | Accessibility-Regression | ARIA-Attribute, Keyboard-Tests, Screenreader-Tests |
+
+---
+
+## 9. Referenz-Dateien
+
+### u1 (Master) – Quellen für verbleibende Migration
+
+| Datei/Ordner | Feature | Phase |
+|---|---|---|
+| `frontend/src/app/shared/sockets-config.ts` (Zeile 163–175) | Core.Hello, Core.Supports.Set, GMCP-Start-Sequenz | 1 |
+| `frontend/src/app/mud/mud-signals.ts` (Zeile 166–175, 270–272) | Input.Complete, Core.Ping | 1, 3 |
+| `frontend/src/app/menu/menu.service.ts` | Menü-Hierarchie, dynamische Items | 2 |
+| `frontend/src/app/menu/one-menu.ts` | MenuType, Callback-System | 2 |
+| `frontend/src/app/menu/main-menu/main-menu.component.ts` | PrimeNG Menubar (als Referenz) | 2 |
+| `frontend/src/app/mud/color-settings.ts` | Farb-Invertierung, B/W, Monochrom | 2 |
+| `frontend/src/app/settings/color-settings/color-settings.component.ts` | Farbeinstellungs-Dialog | 2 |
+| `frontend/src/app/shared/keypad-data.ts` | Numpad-Datenmodell (OneKeypadData, KeypadData) | 3 |
+| `frontend/src/app/modeless/keypad/keypad.component.ts` | Visuelles Keypad-Widget | 3 |
+| `frontend/src/app/settings/editor-search/editor-search.component.ts` | Editor Suchen & Ersetzen | 3 |
+| `frontend/src/app/nonportal/` | Landing-Pages pro MUD | 4 |
+| `frontend/src/environments/` | 5+ Environment-Configs | 4 |
+| `frontend/src/app/shared/server-config.service.ts` | URL-basierte Backend-Erkennung | 4 |
+| `backend/mudrpc/` | Auth/RPC-System (LDJ, MudRpc, RpcClient) | 5 |
+| `mdconn/` | RPC-Bridge Microservice | 5 |
+
+### u3 (Target) – Zu erweiternde Dateien
+
+| Datei/Ordner | Erweiterung | Phase |
+|---|---|---|
+| `frontend/src/app/features/gmcp/gmcp.service.ts` | + Core.Hello, + Core.Supports.Set in `handleGmcpStart()` | 1 |
+| `frontend/src/app/features/gmcp/gmcp-bootstrap.service.ts` | + Registrierung neuer Handler (Core, Input, Numpad, Comm, Room) | 1, 3 |
+| `frontend/src/app/features/gmcp/gmcp-module-handler.ts` | + `getMenuItems?()` Interface-Erweiterung | 2 |
+| `frontend/src/app/features/windows/window-config.ts` | + `WindowAction.DataChanged` | 0 |
+| `frontend/src/app/features/gmcp-files/files-gmcp-handler.ts` | Fix: Save-Workflow toter Code | 0 |
+| `frontend/src/app/features/terminal/mud-input.controller.ts` | + Tab-Completion, + Numpad-Tasten | 3 |
+| `frontend/src/app/features/sockets/sockets.service.ts` | + `mudId`-Parameter bei Connect | 4 |
+| `frontend/src/app/app.component.html` | + `<app-menu-bar>` | 2 |
+| `frontend/src/app/app.component.ts` | + MenuBarComponent Import | 2 |
+| `GMCP.md` | Dokumentation aktualisieren | 0 |
+
+### Neue Dateien (zu erstellen)
+
+| Datei | Feature | Phase |
+|---|---|---|
+| `frontend/src/app/features/gmcp-core/core-gmcp-handler.ts` | Core.Ping, Core.Goodbye | 1 |
+| `frontend/src/app/features/gmcp-core/core-gmcp-handler.spec.ts` | Tests | 1 |
+| `frontend/src/app/features/menu/menu.service.ts` | Menü-Hierarchie | 2 |
+| `frontend/src/app/features/menu/menu-bar.component.ts` | Horizontale Menüleiste | 2 |
+| `frontend/src/app/features/menu/menu-dropdown.component.ts` | Dropdown-Panel | 2 |
+| `frontend/src/app/features/menu/menu.service.spec.ts` | Tests | 2 |
+| `frontend/src/app/features/settings/color-settings.service.ts` | Farbeinstellungs-Logik | 2 |
+| `frontend/src/app/features/settings/color-settings.component.ts` | Farbeinstellungs-Dialog | 2 |
+| `frontend/src/app/features/settings/color-settings.service.spec.ts` | Tests | 2 |
+| `frontend/src/app/features/gmcp-input/input-gmcp-handler.ts` | Tab-Completion Handler | 3 |
+| `frontend/src/app/features/gmcp-input/completion-overlay.component.ts` | Completion-Dropdown | 3 |
+| `frontend/src/app/features/gmcp-input/input-gmcp-handler.spec.ts` | Tests | 3 |
+| `frontend/src/app/features/gmcp-numpad/numpad-gmcp-handler.ts` | Numpad GMCP Handler | 3 |
+| `frontend/src/app/features/gmcp-numpad/keypad-data.ts` | Typisiertes Datenmodell | 3 |
+| `frontend/src/app/features/gmcp-numpad/keypad.component.ts` | Visuelles Numpad-Widget | 3 |
+| `frontend/src/app/features/gmcp-numpad/keypad-config.component.ts` | Konfigurations-Dialog | 3 |
+| `frontend/src/app/features/gmcp-numpad/numpad-gmcp-handler.spec.ts` | Tests | 3 |
+| `frontend/src/app/features/gmcp-comm/comm-gmcp-handler.ts` | Comm Handler | 3 |
+| `frontend/src/app/features/gmcp-comm/comm-gmcp-handler.spec.ts` | Tests | 3 |
+| `frontend/src/app/features/mud-selector/mud-selector.component.ts` | MUD-Auswahl Landing-Page | 4 |
+| `frontend/src/environments/environment.prod.sb.ts` | Seifenblase Env | 4 |
+| `frontend/src/environments/environment.prod.uni.ts` | UNItopia Prod Env | 4 |
+
+---
+
+## 10. Abhängigkeitsmatrix
+
+Die folgende Matrix zeigt, welche Phasen aufeinander aufbauen:
+
+```mermaid
+graph LR
+    subgraph phase0 ["Phase 0"]
+        R[Rebase]
+        B[Bug-Fixes]
+    end
+
+    subgraph phase1 ["Phase 1"]
+        Hello["Core.Hello"]
+        Supports["Core.Supports.Set"]
+        Ping["Core.Ping"]
+        Goodbye["Core.Goodbye"]
+    end
+
+    subgraph phase2 ["Phase 2"]
+        Menu["Menü-System"]
+        Colors["Farbeinstellungen"]
+    end
+
+    subgraph phase3 ["Phase 3"]
+        Input["Input-Completion"]
+        Numpad["Numpad"]
+        Comm["Comm"]
+        Room["Room.Info"]
+        EditorSearch["Editor-Suche"]
+    end
+
+    subgraph phase4 ["Phase 4"]
+        MudUI["Multi-MUD UI"]
+        Deploy["Multi-Deployment"]
+    end
+
+    R --> Hello
+    B --> Hello
+    Hello --> Supports
+    Supports --> Ping
+    Supports --> Menu
+    Menu --> Colors
+    Menu --> Numpad
+    Menu --> Input
+    Supports --> Comm
+    Supports --> Room
+    Supports --> EditorSearch
+    Menu --> MudUI
+    MudUI --> Deploy
+```
+
+| Abhängigkeit | Warum? |
+|---|---|
+| Phase 0 → Phase 1 | Sauberer Code-Stand nötig |
+| Core.Hello → Core.Supports.Set | MUD erwartet Hello vor Supports |
+| Core.Supports.Set → alle GMCP-Module | Module müssen dem MUD erst gemeldet werden |
+| Menü-System → Farbeinstellungen | Farbdialog wird über Menü geöffnet |
+| Menü-System → Numpad-Config | Numpad-Config wird über Menü geöffnet |
+| Menü-System → Input-Completion | (Schwache Abhängigkeit: Completion funktioniert auch ohne Menü) |
+| Menü-System → Multi-MUD UI | MUD-Liste im Menü als Connect-Optionen |
diff --git a/dockerfiles/U1_ANALYSIS.md b/dockerfiles/U1_ANALYSIS.md
new file mode 100644
index 0000000..a77be3d
--- /dev/null
+++ b/dockerfiles/U1_ANALYSIS.md
@@ -0,0 +1,470 @@
+# WebMud3 Master (V0.6.2) – Vollständige Projektanalyse
+
+## 1. Projektübersicht
+
+**WebMud3** ist ein webbasierter MUD-Client (Multi-User Dungeon) der dritten Generation, entwickelt als Open-Source-Projekt für [UNItopia](https://www.unitopia.de) und [Seifenblase](https://seifenblase.de). Das Projekt besteht aus einem **Node.js/Express-Backend**, einem **Angular-Frontend** und einem separaten **mdconn**-Microservice für Inter-Prozess-Kommunikation zum MUD-Server.
+
+- **Repository:** `https://github.com/unitopia-de/webmud3` (Branch: `master`)
+- **Lizenz:** GPL-3.0 (LICENSE) / MIT (Backend package.json)
+- **Version:** 0.6.2
+- **Node.js:** 20.19.4 (Docker), Angular ~20.3.4
+- **Autor:** Myonara
+
+---
+
+## 2. Architektur
+
+### 2.1 Projektstruktur (Separate Pakete)
+
+Im Gegensatz zum `develop`-Branch (npm Workspaces Monorepo) sind Backend und Frontend hier **getrennte npm-Pakete** ohne gemeinsames Shared-Paket:
+
+```
+webmud3-master/
+├── backend/                  # Node.js Express + Socket.IO + Telnet
+│   ├── server.js             # Entry Point (Plain JS)
+│   ├── mudSocket.js          # Telnet-Protokoll-Klasse
+│   ├── config/               # Env-spezifische Konfiguration
+│   ├── mudrpc/               # RPC-Client für MUD-Kommunikation
+│   ├── ngxlogger/            # Custom Logging-Modul
+│   ├── cleanup.js            # Graceful Shutdown Handler
+│   └── package.json
+├── frontend/                 # Angular SPA (NgModule-basiert)
+│   ├── src/app/
+│   │   ├── gmcp/             # GMCP-Protokoll-Service
+│   │   ├── menu/             # Dynamisches Menüsystem
+│   │   ├── modeless/         # Nicht-modale Fenster (Editor, DirList, Keypad…)
+│   │   ├── mud/              # MUD-Client-Kernlogik (ANSI, Signals, Files)
+│   │   ├── mudconfig/        # MUD-spezifische Konfiguration (UNItopia-Service)
+│   │   ├── nonportal/        # Landingpages je MUD (UNItopia, Orbit, Seifenblase…)
+│   │   ├── settings/         # Farbeinstellungen, Editor-Suche
+│   │   ├── shared/           # Services (Sockets, ServerConfig, Window, KeypadData)
+│   │   └── widgets/          # Inventar-Anzeige
+│   ├── src/environments/     # Dev/Prod/UNItopia/Seifenblase-Configs
+│   └── src/mud_config.json   # MUD-Liste & GMCP-Familien-Konfiguration
+├── mdconn/                   # RPC-Microservice (Unix-Socket zu MUD-Server)
+├── dockerfiles/              # Docker Compose Varianten
+├── Dockerfile                # Multi-Stage Build
+├── Jenkinsfile               # Jenkins CI-Pipeline
+└── GMCP.md                   # GMCP-Implementierungsstatus
+```
+
+### 2.2 Datenfluss
+
+```
+┌──────────┐   Socket.IO    ┌──────────┐    Telnet     ┌──────────┐
+│ Frontend │ ◄──(WS)──────► │ Backend  │ ◄──(TCP/TLS)► │ MUD      │
+│ (Angular)│                 │ (Express)│                │ Server   │
+│ PrimeNG  │                 │ Node.js  │                │(UNItopia)│
+└──────────┘                 └──────────┘                └──────────┘
+                                  │
+                                  │  Unix Socket (RPC)
+                                  ▼
+                             ┌──────────┐
+                             │ mdconn   │
+                             │ (RPC     │
+                             │  Bridge) │
+                             └──────────┘
+```
+
+### 2.3 Technologie-Stack
+
+| Schicht         | Technologie                       | Version          |
+|-----------------|-----------------------------------|------------------|
+| Frontend        | Angular (NgModule-basiert)        | ~20.3.4          |
+| UI-Framework    | PrimeNG + PrimeFlex + PrimeIcons  | ~20.2.0          |
+| Code-Editor     | Ace Editor (ace-builds)           | ~1.39.1          |
+| Transport       | Socket.IO Client                  | ~4.8.1           |
+| Cookie-Service  | ngx-cookie-service                | ~20.1.0          |
+| Geräte-Erkennung| ngx-device-detector               | ~10.1.0          |
+| Backend         | Express                           | ~4.21.2          |
+| WebSockets      | Socket.IO Server                  | ~4.8.1           |
+| Telnet          | telnet-stream                     | ~1.1.0           |
+| Session         | cookie-session                    | ~2.1.0           |
+| Backend-Sprache | JavaScript (Plain JS, kein TS)    | ES6+             |
+| Frontend-Sprache| TypeScript                        | ~5.9.3           |
+| Container       | Docker (multi-stage)              | -                |
+| CI/CD           | Jenkinsfile + Docker Compose      | -                |
+| Testing         | Karma + Jasmine (Frontend)        | -                |
+| E2E             | Protractor                        | -                |
+
+---
+
+## 3. Feature-Katalog
+
+### 3.1 Multi-MUD-Unterstützung
+
+Das System unterstützt **mehrere MUD-Server gleichzeitig** über ein konfigurierbares MUD-Familien-System:
+
+- **MUD-Familien** (`mudfamilies`): Gemeinsame Protokoll-Features pro MUD-Typ
+  - `basistelnet`: ASCII, kein GMCP, kein MXP
+  - `unitopia`: UTF-8, GMCP, MXP-Unterstützung
+- **Konfigurierte MUDs**: UNItopia (SSL:992), Orbit (SSL:9988), Uni1993 (Port:1993), Seifenblase (Port:3333)
+- **Dynamisches Routing**: Routen werden zur Laufzeit aus `mud_config.json` generiert (z.B. `/` → UNItopia, `/orbit` → Orbit)
+- **MUD-Liste** vom Server abrufbar via `mud-list` Socket-Event
+
+### 3.2 GMCP-Protokoll (Generic MUD Communication Protocol)
+
+Umfangreiche GMCP-Implementierung mit folgenden Modulen:
+
+| Modul            | Richtung      | Status  | Beschreibung                                    |
+|------------------|---------------|---------|--------------------------------------------------|
+| **Core.Hello**   | Bidirektional | ✅      | MUD/Client-Identifikation                        |
+| **Core.Ping**    | Bidirektional | ✅      | Verbindungs-Keep-Alive mit visueller Anzeige     |
+| **Core.Goodbye** | MUD→Client    | ⚠️ Teil | Logoff-Ankündigung (Resource-Handling fehlt)      |
+| **Core.Supports**| Client→MUD    | ✅      | Set/Add/Remove von GMCP-Modulen                  |
+| **Core.BrowserInfo** | Client→MUD| ✅      | Browser-/Geräte-Info an MUD                      |
+| **Char.Name**    | MUD→Client    | ✅      | Charakter-Name, Titel-Update, Wizard-Erkennung   |
+| **Char.StatusVars/Status** | MUD→Client | ⚠️ | Gilde/Rasse/Rang (empfangen, Anzeige begonnen)  |
+| **Char.Vitals**  | MUD→Client    | ⚠️     | HP/SP (empfangen, Anzeige begonnen)              |
+| **Char.Stats**   | MUD→Client    | ⚠️     | STR/INT/CON/DEX (empfangen, Anzeige begonnen)   |
+| **Char.Items**   | MUD→Client    | ✅      | Inventar: List/Add/Remove                        |
+| **Sound.Url/Event** | MUD→Client | ✅      | Audio-Wiedergabe über HTML5 Audio                |
+| **Files.DirectoryList** | MUD→Client | ✅ | Verzeichnisanzeige im Fenster                   |
+| **Files.OpenFile** | Client→MUD  | ✅      | Datei öffnen/bearbeiten                          |
+| **Files.FileSaved** | Client→MUD | ✅      | Datei gespeichert (via HTTP PUT)                 |
+| **Files.ChDir**  | Client→MUD    | ✅      | Verzeichniswechsel                               |
+| **Input.Complete** | Bidirektional | ✅    | Tab-Completion (Text, Choice, None)              |
+| **Numpad.SendLevel/Update/GetAll** | Bidi | ✅ | Numpad-Tastenbelegung vom MUD                 |
+| **Room.Info**    | MUD→Client    | ✅      | Raum-Information (Name, Domain, Exits)           |
+| **Comm.Say/Soul/Tell** | MUD→Client | ✅   | Kommunikationskanäle                             |
+
+### 3.3 Sound-System
+
+- **GMCP-basiertes Sound-Modul**: MUD sendet `Sound.Url` (Base-URL) und `Sound.Event` (Dateiname)
+- **HTML5 Audio API**: Abspielen via `new Audio()`
+- **Schaltbar**: Sound kann über GMCP-Menü an/aus geschaltet werden (Toggle via `Core.Supports.Add/Remove`)
+- **Beep**: Synthetisierter 800Hz-Beep bei ANSI BEL-Zeichen (Code 7) via `AudioContext`
+
+### 3.4 Datei-Browser & Code-Editor
+
+Vollwertiger **In-Browser Code-Editor** für MUD-Wizards:
+
+- **Verzeichnis-Browser** (`DirlistComponent`): Navigation durch MUD-Dateisystem via GMCP
+- **Ace Editor** Integration mit:
+  - **37 Themes** (Dracula, Monokai, Twilight, GitHub usw.)
+  - **Syntax-Highlighting** für C/C++ (`.c`, `.h`, `.inc`) und Text
+  - **Theme-Persistenz** via Cookie
+  - **Suchen & Ersetzen** in eigenem Fenster (`EditorSearchComponent`)
+  - **Speichern** (HTTP PUT) mit Zwischen- und Abschlussspeichern
+  - **Schließen mit Warnung** bei ungespeicherten Änderungen (ConfirmationService)
+  - **Read-Only-Toggle**: Umschaltbar zwischen Lese- und Schreibmodus
+- **Datei-Lifecycle**: `OpenFile` → Load via HTTP GET → Edit → `FileSaved` via HTTP PUT → `FileCanceled`
+
+### 3.5 ANSI-Farbverarbeitung
+
+Vollständige ANSI-Escape-Sequenz-Verarbeitung (`AnsiService`):
+
+- **Standard-Farben**: 8 Vordergrund + 8 Hintergrundfarben (Codes 30-37, 40-47)
+- **256-Farben**: Support via `38;5;N` / `48;5;N`
+- **RGB-Farben**: Support via `38;2;R;G;B` / `48;2;R;G;B`
+- **Bright Colors**: Codes 90-97 / 100-107 gemappt auf Standardfarben
+- **Text-Attribute**: Bold, Faint, Italic, Underline, Blink, Reverse, Concealed, Crossed-Out
+- **Farbkollisionserkennung**: Automatische Invertierung wenn Vorder- = Hintergrundfarbe
+- **Cursor-Befehle**: Save/Restore Position, Scroll, Clear Screen
+
+### 3.6 Farbeinstellungen
+
+Umfangreiche Farbanpassung (`ColorSettings`):
+
+- **Farb-Invertierung**: Alle Farben invertieren
+- **Schwarz auf Weiß**: Schwarz/Weiß-Tausch für helle Umgebungen
+- **Farben aus**: Monochromer Modus
+- **Local-Echo-Farbe**: Konfigurierbare Farbe für lokales Echo (#a8ff00 Standard)
+- **Persistenz**: Farbeinstellungen als Base64-kodiertes JSON im Cookie
+
+### 3.7 Numpad / Tastenbelegung
+
+Konfigurierbares **Numpad-System** für MUD-Steuerung:
+
+- **Modifier-Support**: Shift, Ctrl, Alt, Meta + Numpad/F-Tasten
+- **Ebenen-System** (`OneKeypadData`): Verschiedene Tastenbelegungen pro Prefix/Kontext
+- **MUD-synchronisiert**: MUD sendet Tastenbelegungen via `Numpad.SendLevel`
+- **Benutzer-konfigurierbar**: Änderungen via `Numpad.Update` an MUD zurück
+- **Visuelles Keypad** (`KeypadComponent`): Anklickbares Numpad-Widget
+- **Konfigurationsdialog** (`KeypadConfigComponent`): PrimeNG DynamicDialog
+
+### 3.8 Nicht-modale Fenster (Modeless Window System)
+
+Eigenes **Fenstersystem** (`WindowService`) für schwebende Panels:
+
+- **Fenstertypen**: Editor, Verzeichnis-Browser, Charakter-Statistiken, Keypad-Config
+- **Draggable & Resizable** (`ResizableDraggableComponent`)
+- **Z-Index-Management**: Automatische Schichtung, Fokus-Handling
+- **Parent-Child-Beziehungen**: Fenster können Unterfenster verwalten
+- **Event-System**: `inComingEvents` / `outGoingEvents` für Kommunikation
+- **UUID-basierte IDs**: Jedes Fenster erhält eine UUIDv7
+- **Aktionen**: Focus, Hide, Save, Cancel, SaveAndClose, WinError
+
+### 3.9 Inventar-Anzeige
+
+- **Kategorisiertes Inventar** (`InventoryList`): Items nach Kategorien gruppiert
+- **Live-Updates**: Add/Remove/List via GMCP `Char.Items`
+- **Eigene Komponente** (`InventoryComponent`): Darstellung als Widget
+
+### 3.10 Charakter-Statistiken
+
+- **CharStatComponent**: Anzeige von Charakter-Daten in eigenem Fenster
+- **Live-Updates**: Name, Status, Vitals, Stats via GMCP
+- **CharacterData-Klasse**: Strukturierte Speicherung aller Charakter-Infos
+
+### 3.11 Menüsystem
+
+Dynamisches **hierarchisches Menüsystem** (`MenuService`):
+
+- **PrimeNG MenuBar**: Integration als MudMenu
+- **3-Level-Hierarchie**: Hauptmenü → Untermenü → Sub-Untermenü
+- **Dynamische Items**: Connect/Disconnect, Scroll-Lock, View-Settings, Numpad-Config
+- **MUD-Liste im Menü**: Alle konfigurierten MUDs als Connect-Optionen
+- **GMCP-Menü-Integration**: Module können eigene Menüpunkte registrieren (z.B. Sound Toggle)
+
+### 3.12 Input-Handling
+
+- **Eingabe-History**: ArrowUp/ArrowDown navigiert durch vorherige Eingaben
+- **Passwort-Modus**: Input-Typ wechselt bei `NOECHO-START` zu Password
+- **Tab-Completion**: Tab-Taste löst GMCP `Input.Complete` aus
+- **Lokales Echo**: Eigene Eingaben werden lokal mit konfigurierbarer Farbe angezeigt
+- **Word-Wrap**: Automatischer Zeilenumbruch bei langer Eingabe
+
+### 3.13 Telnet-Protokoll (Backend)
+
+`MudSocket` erweitert `TelnetSocket` und implementiert:
+
+- **Vollständige Option-Tabelle**: Alle Standard-Telnet-Optionen (0-255) als Lookup-Map
+- **DO/DONT/WILL/WONT-Handling**: Korrekte Verhandlung für:
+  - `TTYPE` (Terminal Type): Antwortet mit "WebMud3a"
+  - `NAWS` (Window Size): Leitet Frontend-Fenstergröße weiter
+  - `ECHO`: Steuert Passwort-Modus im Frontend
+  - `CHARSET`: Akzeptiert UTF-8
+  - `GMCP`: Aktiviert GMCP-Support (wenn MUD-Familie es unterstützt)
+  - `TM` (Timing Mark): Beantwortet mit WILL
+- **State-Tracking**: Zustandsverfolgung für jede Telnet-Option
+- **Debug-Events**: Alle Verhandlungen werden als `mud.debug` an Frontend gesendet
+
+### 3.14 Authentifizierung (experimentell)
+
+- **Auth-Routes** (`/api/auth`): Login/Logout/Loggedon REST-API
+- **RPC-Client** (`mudrpc/`): Unix-Socket-Verbindung zum MUD für Passwort-Validierung
+- **LDJ-Client**: Line-Delimited JSON-Protokoll für MUD-RPC
+- **Cookie-Session**: Session-basierte Authentifizierung
+- **GMCP Char.Login**: Geplante Login-Automatisierung über JWT-Token
+
+### 3.15 Multi-Deployment-Support
+
+Konfiguration für verschiedene Deployment-Szenarien:
+
+- **Mehrere Environments**: `environment.ts`, `environment.prod.ts`, `environment.prod.sb.ts`, `environment.prod.uni.ts`
+- **URL-basierte Backend-Erkennung**: `ServerConfigService` erkennt anhand von Origin/Path:
+  - UNItopia Produktion (`/webmud3/`) → `/mysocket.io`
+  - UNItopia Test (`/webmud3test/`) → `/mysocket-test.io`
+  - Seifenblase (`/webmud3/`) → `/sbsocket.io`
+  - Lokal → `/socket.io`
+- **Docker-Varianten**: Zahlreiche Docker Compose Dateien für verschiedene Deployments
+- **Secret-Config**: Docker-Secrets für Session-Keys und DB-Pfade
+
+### 3.16 Browser-Info-Übermittlung
+
+- **Geräte-Erkennung** via `ngx-device-detector`: Browser, OS, Version, Typ (Mobile/Tablet/Desktop)
+- **Client-ID**: UUIDv7 pro Browser-Session
+- **Übermittlung** an MUD via `Core.BrowserInfo` GMCP (Backend fügt `real_ip` hinzu)
+
+### 3.17 Reconnection-Handling
+
+- **Socket.IO Manager**: Automatische Reconnection (bis 10 Versuche)
+- **Server-ID-Tracking**: Erkennung von Server-Neustarts
+- **Socket-ID-Tracking**: Erkennung von Session-Wechseln
+- **Status-Nachrichten**: "[Verbindungsabbruch durch Serverneustart]", "[Verbindung wiederhergestellt]"
+- **Keep-Alive**: Periodische Keep-Alive-Pings via Socket
+
+### 3.18 Logging
+
+- **Backend**: Custom `ngxlogger`-Modul mit:
+  - 8 Log-Level: TRACE, DEBUG, INFO, LOG, WARN, ERROR, FATAL, OFF
+  - Stack-Trace-basierte Datei/Zeilen-Erkennung
+  - IP-Adressen pro Log-Entry
+  - Console-Level-Routing (debug/info/log/warn/error)
+- **Frontend→Backend**: Log-Events via `ngx-log-producer` Socket-Event
+- **IP-Tracking**: `x-forwarded-for` Header für korrekte Client-IP hinter Proxy
+
+### 3.19 Graceful Shutdown
+
+`cleanup.js` behandelt:
+- `SIGINT` (Ctrl+C)
+- `SIGTERM` (Docker Stop)
+- `SIGUSR1/SIGUSR2` (Nodemon Restart)
+- `uncaughtException`
+- Sauberes Trennen aller MUD-Verbindungen vor Beendigung
+
+---
+
+## 4. Backend-Detail-Analyse
+
+### 4.1 Server (`server.js`)
+
+- **Sprache**: Plain JavaScript (ES6+), kein TypeScript
+- **Konfiguration**: Dreistufig – `config.global.js` → `config.{env}.js` → Docker Secrets + MUD-Config
+- **TLS-Support**: Optionales HTTPS für Backend-Server selbst
+- **CORS**: Auskommentiert, aber vorbereitet mit Whitelist
+- **Cookie-Session**: Aktiv mit Secret-Key aus Docker Secrets
+- **Static Files**: Kompiliertes Angular-Frontend aus `dist/`
+- **Ace-Editor-Assets**: Eigener Route-Handler für `/ace/*` → `node_modules/ace-builds/`
+- **MUD-Config API**: `/config/mud_config.json` liefert MUD-Liste ans Frontend
+- **Connection-Tracking**: `MudConnections{}` und `Socket2Mud{}` Maps
+
+### 4.2 MudSocket (`mudSocket.js`)
+
+- Erweitert `TelnetSocket` aus `telnet-stream`
+- Umfangreiche Telnet-Option-Lookup-Tabelle (opt2num, opt2com, num2opt)
+- Buffer-Utilities: `txtToBuffer`, `val16ToBuffer`, `sizeToBuffer`
+- Debug-Forwarding: Alle Telnet-Events als `mud.debug` zum Frontend
+
+### 4.3 MudRPC-System (`mudrpc/`)
+
+- **LDJClient**: Line-Delimited JSON über TCP/Unix-Socket
+- **MudRpc**: Request/Response-Protokoll mit ID-basiertem Caching
+- **RpcClient**: Lazy-Connection mit Auto-Reconnect
+- **AuthController**: REST-Login/Logout über RPC zum MUD
+- **AuthRoutes**: Express-Router für `/api/auth/login` und `/api/auth/logout`
+
+---
+
+## 5. Frontend-Detail-Analyse
+
+### 5.1 Angular-Architektur
+
+- **NgModule-basiert** (nicht Standalone Components wie im `develop`-Branch)
+- **Module**: AppModule, MudModule, NonportalModule, ModelessModule, MenuModule, GmcpModule, MudconfigModule, SettingsModule, WidgetsModule
+- **PrimeNG-UI**: Nora-Theme, DynamicDialogs, Toast-Notifications, Menubar, ConfirmDialog
+- **APP_INITIALIZER**: Lädt `mud_config.json` vor App-Start
+
+### 5.2 Socket-Architektur (3-Schichten)
+
+Mehrstufige Socket-Abstraktionsschicht:
+
+1. **IoPlatform**: Top-Level – verwaltet Manager, ID-Lookups, GMCP-Routing
+2. **IoManager**: Socket.IO Manager – Reconnection-Logik, Server-ID-Tracking
+3. **IoSocket**: Socket-Instanz – MUD-Verbindungen, Keep-Alive, Event-Handling
+4. **IoMud**: Einzelne MUD-Verbindung – GMCP, Signals, Data-Flow
+
+### 5.3 Rendering (HTML-basiert)
+
+Im Gegensatz zum `develop`-Branch **kein xterm.js**:
+- **HTML-Span-Rendering**: MUD-Output wird als `AnsiData[]` Array verarbeitet
+- **MudSpan-Komponente**: Rendert einzelne ANSI-Spans mit Farbe, Bold, Italic, Blink etc.
+- **ScrollLock**: Optional auto-scrolling zum Ende
+- **Responsive Sizing**: Berechnung der Terminal-Größe basierend auf Viewport
+
+---
+
+## 6. mdconn-Microservice
+
+Experimenteller **RPC-Bridge-Service**:
+
+- **Zweck**: Verbindung zum MUD-Server über Unix-Socket statt TCP
+- **Protokoll**: Line-Delimited JSON (gleich wie `mudrpc/` im Backend)
+- **Docker-integriert**: Eigenes Dockerfile, Docker Compose für IPC-Tests
+- **Status**: Experimentell/Testphase (enthält Testnachrichten-Code)
+
+---
+
+## 7. Build & Deployment
+
+### 7.1 Docker (Multi-Stage)
+
+```dockerfile
+Stage 1: ng-build-stage (node:20.19.4-alpine)
+  → npm install + ng build --configuration production
+
+Stage 2: webmud3 (node:20.19.4-alpine)
+  → Backend + Angular dist → node server.js
+```
+
+### 7.2 Docker Compose Varianten
+
+| Datei                           | Zweck                                    |
+|---------------------------------|------------------------------------------|
+| `w3_docker_compose_local.yml`   | Lokales Deployment                       |
+| `w3_docker_compose_test.yml`    | Test-Umgebung                            |
+| `w3_docker_compose.yml`         | Produktion                               |
+| `w3_docker_compose_sb.yml`      | Seifenblase-Deployment                   |
+| `w3_docker_compose_with_apache.yml` | Mit Apache Reverse-Proxy             |
+| `w3_docker_compose_secret.yml`  | Secret-Management                        |
+| `w3mdc_docker_compose.yml`      | mdconn-Service                           |
+| `mdconn.dockerfile`             | mdconn Docker Image                      |
+
+### 7.3 CI/CD
+
+- **Jenkinsfile**: Git Clone → Docker Build → Image Push
+- **Kein GitHub Actions** (im Gegensatz zum `develop`-Branch)
+
+---
+
+## 8. Vergleich mit develop-Branch (u2_webmud3_develop)
+
+| Aspekt                | Master (u1)                      | Develop (u2)                         |
+|-----------------------|----------------------------------|--------------------------------------|
+| **Sprache Backend**   | Plain JavaScript (ES6)           | TypeScript                           |
+| **Projekt-Struktur**  | Separate Packages                | npm Workspaces Monorepo              |
+| **Shared-Paket**      | Keines                           | @webmud3/shared                      |
+| **Angular-Stil**      | NgModules                        | Standalone Components                |
+| **Terminal-Rendering** | HTML Spans (eigenes AnsiService) | xterm.js                            |
+| **UI-Framework**      | PrimeNG (Nora Theme)             | Eigenes SCSS                         |
+| **Code-Editor**       | Ace Editor (37 Themes)           | Kein Editor                          |
+| **Fenster-System**    | Eigenes (Draggable/Resizable)    | Keines (Single-Page)                 |
+| **GMCP-Support**      | Umfangreich (Sound, Files, Char) | Geplant/Stub                         |
+| **Inventar**          | Implementiert                    | Nicht implementiert                  |
+| **Sound**             | Implementiert (HTML5 Audio)      | Nicht implementiert                  |
+| **Numpad**            | Implementiert + MUD-synchron     | Nicht implementiert                  |
+| **Auth/RPC**          | Implementiert (experimentell)    | Auskommentiert                       |
+| **Reconnection**      | Socket.IO Reconnect              | Session-Token + Buffer-Replay        |
+| **Accessibility**     | Keine                            | Screen-Reader-Support                |
+| **Logging**           | Custom ngxlogger                 | Winston                              |
+| **Telnet-Client**     | JS (erweitert TelnetSocket)      | TS (eigene TelnetClient-Klasse)      |
+| **CI/CD**             | Jenkinsfile                      | GitHub Actions                       |
+| **Express**           | v4                               | v5                                   |
+
+---
+
+## 9. Offene Punkte / TODOs im Code
+
+- `Core.Goodbye`: Resource-Handling bei Logoff fehlt
+- `Char.StatusVars/Status/Vitals/Stats`: Empfangen, aber UI-Darstellung unvollständig (charStatsWindow mit `return;` am Anfang)
+- `Char.Login`: JWT-Token-basiertes Auto-Login nur konzeptionell
+- `Char.Items` V2: Unter Design (Sub-Container-Support)
+- CORS: Komplett auskommentiert
+- PWA: Deaktiviert (V0.6.2), Manifest-Route auskommentiert
+- MXP: In MUD-Config als Feature-Flag vorhanden, aber nicht implementiert
+- Playermap: GMCP-Modul registriert, aber keine Frontend-Darstellung
+- `send2AllMuds`: TODO-Marker bei Disconnect-Broadcast
+- Editor Undo/Redo: Kein explizites Tracking (nur Ace-internes Undo)
+- `cancel01_start` / `cancel02_end` in FileInfo: Nur Stubs
+
+---
+
+## 10. Versionsgeschichte (Auszug der Features)
+
+| Version | Wichtige Features                                                    |
+|---------|----------------------------------------------------------------------|
+| 0.0.2   | Konfigurierbare MUD-Liste                                           |
+| 0.0.3   | ANSI-Farbunterstützung                                               |
+| 0.0.5   | Telnet-Negotiation (Echo, TTYPE, NAWS), GMCP-Anfang                 |
+| 0.0.6   | Sound-Modul (GMCP)                                                   |
+| 0.0.7   | Portal-Rewrite, erstes Dockerfile                                    |
+| 0.0.11  | CORS-Support                                                         |
+| 0.0.13  | IE11/10/9 Polyfills                                                  |
+| 0.0.15  | Farbkollisions-Fix, Input-Line-Kürzung                               |
+| 0.0.18  | Menü (Connect, Disconnect, Invert, B/W), dynamische Fenstergrößen   |
+| 0.0.24  | GMCP Ping/Goodbye, weitere GMCP-Module                              |
+| 0.0.25  | Nicht-modale Fenster (Beginn)                                        |
+| 0.0.26  | Sound an/aus schaltbar (GMCP-Menü)                                   |
+| 0.0.37  | Verzeichnis-Browser & File-Editor                                    |
+| 0.0.42  | Lokales Echo mit Farbwahl, BrowserInfo an MUD                        |
+| 0.0.44  | ngx-logger Backend+Frontend                                          |
+| 0.1.0   | Migration zu Angular 12                                              |
+| 0.2.0   | Migration zu Angular 13                                              |
+| 0.2.1   | Migration zu Angular 14, Numpad-Implementierung                      |
+| 0.3.0   | Inventar-Anzeige                                                     |
+| 0.5.0   | Konsolidierung auf ein Docker-Image                                  |
+| 0.6.0   | Angular 19, PrimeNG-Update                                          |
+| 0.6.2   | Log-Fixes, i18n entfernt                                             |
+
+
diff --git a/dockerfiles/U2_ANALYSIS.md b/dockerfiles/U2_ANALYSIS.md
new file mode 100644
index 0000000..00e4420
--- /dev/null
+++ b/dockerfiles/U2_ANALYSIS.md
@@ -0,0 +1,322 @@
+# WebMud3 – Vollständige Projektanalyse
+
+## 1. Projektübersicht
+
+**WebMud3** ist ein moderner, webbasierter MUD-Client (Multi-User Dungeon) der dritten Generation, entwickelt als Open-Source-Projekt für [UNItopia](https://www.unitopia.de). Das Projekt verbindet ein **Node.js-Backend** mit einem **Angular-Frontend** und kommuniziert über **Socket.IO** (WebSockets). Das Backend stellt eine Telnet-Verbindung zum MUD-Server her und fungiert als Proxy zwischen dem Web-Frontend und dem MUD.
+
+- **Repository:** `https://github.com/unitopia-de/webmud3`
+- **Lizenz:** GPL-3.0
+- **Version:** 1.0.0-alpha
+- **Node.js:** ~22.20.0
+- **Autoren:** Myonara, Felag (mit Kontakten @mystiker und @myonara)
+
+---
+
+## 2. Architektur
+
+### 2.1 Monorepo-Struktur (npm Workspaces)
+
+Das Projekt ist als **npm Workspaces Monorepo** organisiert mit drei Paketen:
+
+```
+webmud3/
+├── package.json              # Root – orchestriert Workspaces
+├── shared/                   # @webmud3/shared – gemeinsame Typen & Interfaces
+│   └── src/
+│       ├── config/           # ServerConfig Interface
+│       ├── sockets/          # Socket.IO Event-Typen (Client↔Server)
+│       └── index.ts          # Barrel-Export
+├── backend/                  # @webmud3/backend – Express + Socket.IO + Telnet
+│   └── src/
+│       ├── main.ts           # Entry Point
+│       ├── core/             # Middleware, Environment, Routing, Sockets
+│       ├── features/         # Telnet Feature (Client, Handler, Negotiation)
+│       └── shared/           # Backend-interne Utilities (Logger, HTTP)
+├── frontend/                 # @webmud3/frontend – Angular SPA
+│   └── src/
+│       ├── app/
+│       │   ├── core/         # MudClientComponent, MudService
+│       │   ├── features/     # Terminal, Sockets, ServerConfig
+│       │   └── shared/       # OutputHistory, Types, Utils
+│       ├── environments/     # Dev/Prod Konfiguration
+│       └── assets/           # Icons (PWA-fähig)
+├── dockerfiles/              # Docker Compose Konfigurationen
+├── .github/workflows/        # CI/CD (GitHub Actions)
+└── .vscode/                  # IDE-Konfiguration
+```
+
+### 2.2 Datenfluss
+
+```
+┌──────────┐   Socket.IO    ┌──────────┐    Telnet     ┌──────────┐
+│ Frontend │ ◄──(WS)──────► │ Backend  │ ◄──(TCP)────► │ MUD      │
+│ (Angular)│                 │ (Express)│                │ Server   │
+│ xterm.js │                 │ Node.js  │                │ (UNItopia│
+└──────────┘                 └──────────┘                └──────────┘
+```
+
+1. **Frontend → Backend:** User-Input via `mudInput`, Verbindungssteuerung via `mudConnect`/`mudDisconnect`, Viewport-Updates via `mudViewportSize`
+2. **Backend → Frontend:** MUD-Output via `mudOutput`/`mudOutputBatch`, Status-Events (`mudConnected`, `mudDisconnected`, `setEchoMode`, `setLinemode`, `requestTimingMark`)
+3. **Backend ↔ MUD:** Telnet-Verbindung mit vollständiger Telnet-Option-Negotiation
+
+### 2.3 Technologie-Stack
+
+| Schicht       | Technologie                          | Version         |
+|---------------|--------------------------------------|-----------------|
+| Frontend      | Angular                              | ~20.3.4         |
+| Terminal      | @xterm/xterm                         | ~5.5.0          |
+| Frontend-Test | Jest (@angular-builders/jest)         | ~30.2.0         |
+| Styling       | SCSS, normalize.css                  | -               |
+| Transport     | Socket.IO Client                     | ~4.8.1          |
+| Backend       | Express                              | ~5.1.0          |
+| WebSockets    | Socket.IO Server                     | ~4.8.1          |
+| Telnet        | telnet-stream                        | ~1.1.0          |
+| Logging       | Winston                              | ~3.18.3         |
+| Backend-Test  | Jest (ts-jest)                       | ~30.2.0         |
+| TypeScript    | TypeScript                           | ~5.9.3          |
+| Runtime       | Node.js                              | ~22.20.0        |
+| Containerisierung | Docker (multi-stage)            | -               |
+| CI/CD         | GitHub Actions                       | -               |
+| Deployment    | Azure Web App                        | -               |
+| Linting       | ESLint + @angular-eslint             | ~8.57/~9.37     |
+| Formatting    | Prettier + EditorConfig              | ~3.6.2          |
+
+---
+
+## 3. Backend-Analyse
+
+### 3.1 Entry Point (`main.ts`)
+
+Der Server wird als **Express-Applikation** initialisiert mit folgender Middleware-Pipeline:
+
+1. **CORS** – Permissiv in Dev, restriktiv in Prod (Allow-List basiert)
+2. **Body-Parser** – JSON-Parsing für REST-Endpoints
+3. **Static Files** – Serve des kompilierten Frontends aus `wwwroot/`
+4. **Socket.IO** – WebSocket-Verbindungen über den `SocketManager`
+5. **Config Endpoint** – REST `/api/config` liefert Socket-Namespace
+6. **Info Endpoint** – Nur in Development: Debug-Informationen über `/api/info`
+7. **Routes** – Catch-All für SPA: `manifest.webmanifest` und Fallback auf `index.html`
+
+### 3.2 Environment (Singleton)
+
+Die `Environment`-Klasse implementiert das **Singleton-Pattern** und liest einmalig alle Umgebungsvariablen via `dotenv`:
+
+| Variable                | Pflicht | Default      | Beschreibung                          |
+|-------------------------|---------|--------------|---------------------------------------|
+| `HOST`                  | Nein    | `0.0.0.0`   | Listen-Adresse                        |
+| `PORT`                  | Nein    | `5000`       | Listen-Port                           |
+| `TELNET_HOST`           | Ja      | –            | MUD-Server IP                         |
+| `TELNET_PORT`           | Ja      | –            | MUD-Server Port                       |
+| `TELNET_TLS`            | Nein    | `false`      | TLS für Telnet                        |
+| `SOCKET_ROOT`           | Ja      | –            | Socket.IO Pfad                        |
+| `SOCKET_PING_INTERVAL`  | Nein    | `25000`      | Socket.IO Ping-Intervall (ms)         |
+| `SOCKET_PING_TIMEOUT`   | Nein    | `20000`      | Socket.IO Ping-Timeout (ms)           |
+| `SOCKET_TIMEOUT`        | Nein    | `900000`     | Disconnect-Timeout (15 Min)           |
+| `TELNET_KEEPALIVE_DELAY`| Nein    | `30000`      | TCP-KeepAlive für Telnet-Socket (ms)  |
+| `ENVIRONMENT`           | Nein    | `production` | `development`/`production`            |
+| `NAME`                  | Nein    | `webmud3b`   | Client-Name (TTYPE)                   |
+| `CORS_ALLOWED_ORIGINS`  | Nein    | `[]`         | Komma-separierte Origin-Liste         |
+| `LOG_LEVEL`             | Nein    | `debug`      | Winston Log-Level                     |
+
+### 3.3 Socket-Manager
+
+Der `SocketManager` erweitert `Server` von Socket.IO und verwaltet:
+
+- **Session-Token-basierte Reconnection**: Clients senden ein `sessionToken` beim Handshake. Das Backend hält die Telnet-Verbindung offen, auch wenn das Frontend disconnected. Bei Reconnect werden gepufferte Ausgaben nachgesendet.
+- **Output-Buffering**: Ein `OutputLineBuffer` (Ringbuffer, max 10MB) speichert alle Telnet-Daten. Bei Reconnect wird das gesamte Buffer als `mudOutputBatch` gesendet.
+- **Connection-Timer**: Nach Frontend-Disconnect läuft ein Timer (Default: 15 Min). Erst wenn dieser abläuft, wird die Telnet-Verbindung geschlossen.
+- **Telnet-Option-State-Forwarding**: Echo-Mode und Linemode werden an den Client propagiert.
+- **Transport-Modi**: Unterstützt sowohl `websocket` als auch `polling` (Fallback).
+- **Konfigurierbare Ping-Intervalle**: `pingInterval` und `pingTimeout` sind über Umgebungsvariablen steuerbar, um Idle-Disconnects hinter Proxies/Firewalls zu vermeiden.
+
+### 3.4 Telnet-Client
+
+Die `TelnetClient`-Klasse (erweitert `EventEmitter`) implementiert das vollständige Telnet-Protokoll:
+
+- **Option-Handler-Registry**: Map von `TelnetOptions` → `TelnetOptionHandler`
+- **Unterstützte Optionen**: CHARSET, ECHO, NAWS, SGA, LINEMODE, TTYPE, STATUS, MSSP, EOR
+- **EOR-Buffering**: Wenn End-of-Record ausgehandelt ist, werden Daten gepuffert bis EOR empfangen wird
+- **Negotiation-Tracking**: Vollständiges Tracking aller DO/DONT/WILL/WONT und Subnegotiations
+- **State-Change-Events**: Option-Handler können State-Changes emittieren (z.B. Echo-Toggle)
+- **TCP-KeepAlive**: Konfigurierbar über `TELNET_KEEPALIVE_DELAY` (Default: 30s) – verhindert Idle-Disconnects durch Intermediaries (Firewalls, Load Balancer)
+- **Error-Handling**: Fehler auf dem Raw-TCP-Socket werden abgefangen und geloggt, statt den Prozess zum Absturz zu bringen
+
+### 3.5 Telnet-Option-Handler
+
+Jeder Handler implementiert das `TelnetOptionHandler`-Interface:
+
+- `negotiate()` – Initiale Verhandlung
+- `handleDo()/handleDont()` – Antwort auf Server-Requests
+- `handleWill()/handleWont()` – Antwort auf Server-Offers
+- `handleSub()` – Subnegotiation-Verarbeitung
+- `getState()` / `onStateChange()` – Optionaler State-Tracking
+
+---
+
+## 4. Frontend-Analyse
+
+### 4.1 Angular-Architektur
+
+Das Frontend ist eine **Standalone-Component-basierte** Angular-Anwendung (kein NgModules):
+
+- **AppComponent** – Root-Komponente, hostet `MudClientComponent`
+- **MudClientComponent** – Hauptkomponente mit xterm.js Terminal
+- **MudService** – Facade-Service für Socket-Kommunikation
+- **SocketsService** – Direkter Socket.IO-Client-Wrapper
+- **ServerConfigService** – Lädt Backend-Konfiguration via REST
+
+### 4.2 Terminal-Subsystem (Feature: Terminal)
+
+Das Terminal-Feature ist in mehrere spezialisierte Klassen aufgeteilt:
+
+| Klasse                     | Verantwortung                                                    |
+|----------------------------|------------------------------------------------------------------|
+| `MudInputController`       | Lokaler Editing-Buffer (LINEMODE), Cursor-Management             |
+| `MudPromptManager`         | Prompt-Tracking, Hide/Restore bei Server-Output                  |
+| `MudSocketAdapter`         | WebSocket-Kompatibilitätsschicht für xterm AttachAddon            |
+| `MudScreenReaderAnnouncer` | ARIA-Live-Region, Structured Output, Echo-Suppression, Stop/Clear |
+
+### 4.3 xterm.js Integration
+
+- **Terminal-Rendering**: xterm.js mit JetBrainsMono-Font
+- **Responsive Font-Sizing**: Breakpoint-basiert (8.5px–16px je nach Viewport-Breite)
+- **Addons**: FitAddon, ClipboardAddon, AttachAddon (via MudSocketAdapter)
+- **Bell**: Synthetisierter Beep via Web Audio API (800Hz, Debounce 100ms)
+- **WCAG AAA Kontrast**: `minimumContrastRatio: 7` – xterm.js passt alle Farben automatisch an, um einen ausreichenden Kontrast zwischen Text und Hintergrund zu gewährleisten. Dies kann das originale Farbschema verändern, erfüllt aber die WCAG AAA-Anforderungen.
+
+### 4.4 Barrierefreiheit (Accessibility)
+
+Das Projekt legt besonderen Wert auf Screenreader-Kompatibilität:
+
+- **MudScreenReaderAnnouncer**: Custom ARIA-Live-Region statt xterm's eingebautem `screenReaderMode`
+- **Structured-Output-Announcements**: Ausgaben werden als einzelne `TextNode`-Elemente an die Live-Region angehängt (statt `textContent`-Ersetzung), was eine zuverlässigere Screenreader-Verarbeitung ermöglicht.
+- **Echo-Suppression**: Wenn der Benutzer einen Befehl sendet, wird die vom MUD zurückgesendete Echo-Zeile erkannt und nicht nochmal als Announcement vorgelesen. Vergleich erfolgt über normalisierte Strings (`normalizeForComparison`).
+- **`stopAnnouncements()`**: Methode zum sofortigen Abbrechen aller laufenden Announcements und Leeren des Backlogs (z.B. bei Session-Neustart).
+- **History-Region**: `role="log"` für navigierbaren Ausgabe-Verlauf
+- **Input-Region**: `role="status"` für Echtzeit-Eingabe-Feedback
+- **Helper-Textarea**: xterm's Textarea wird mit Prompt+Buffer aktualisiert
+- **Screenreader-Test-Checkliste**: 13 detaillierte Tests in `SCREENREADER_TESTS.md`
+
+### 4.5 Reconnection & Session-Persistence
+
+- **Session-Token**: UUID in `localStorage`, überlebt Page-Reloads
+- **Force-New-Session**: Nach fehlgeschlagenem Reconnect wird automatisch ein neues Session-Token generiert, um tote Backend-Sessions nicht wiederzuverwenden (`forceNewSession`-Flag).
+- **Output-History**: Strukturierter Store in `localStorage` (max 30MB)
+- **Sequence-Gating**: Jede Server-Ausgabe hat eine Sequence-Nummer. Duplicate werden verworfen
+- **Input-Queue**: Eingaben während Disconnect werden gepuffert und nach Reconnect geflusht
+- **Transport-Fallback**: Socket.IO-Client nutzt `websocket` mit `polling`-Fallback
+
+### 4.6 Environment-Konfiguration
+
+- **Development**: `backendUrl` = `http://localhost:5000`
+- **Production**: `backendUrl` = `window.location.href` (Backend hostet Frontend)
+- **File-Replacement**: Angular CLI ersetzt `environment.ts` mit `environment.prod.ts` im Prod-Build
+
+---
+
+## 5. Shared-Paket
+
+Das `@webmud3/shared`-Paket enthält die Vertragstypen zwischen Frontend und Backend:
+
+- **`ClientToServerEvents`**: `mudConnect`, `mudDisconnect`, `mudInput`, `mudViewportSize`
+- **`ServerToClientEvents`**: `mudOutput`, `mudOutputBatch`, `mudConnected`, `mudDisconnected`, `setEchoMode`, `setLinemode`, `requestTimingMark`
+- **`LinemodeState`**: Vollständiger Linemode-Status (edit, trapsig, softTab, literalEcho, forwardMask)
+- **`ServerConfig`**: Socket-Namespace-Konfiguration
+
+---
+
+## 6. Build & Deployment
+
+### 6.1 Build-Pipeline
+
+```
+npm run build
+  ├── shared: tsc → shared/dist/
+  ├── frontend: ng build → frontend/dist/frontend/browser/
+  ├── backend: tsc → backend/dist/
+  └── postbuild: cpy frontend/dist → backend/dist/wwwroot/
+```
+
+In **Production** (`npm run build:prod`):
+- Frontend wird mit `--configuration=production` gebaut (Optimierung, Hashing, Tree-Shaking)
+- Frontend-Bundle wird in Backend's `wwwroot/` integriert
+- Backend serviert das Frontend als statische Dateien
+
+### 6.2 Docker
+
+Multi-Stage Dockerfile (vollständig überarbeitet):
+1. **Builder** (`node:22.20.0-alpine`): Layer-Caching optimiert – `package.json`-Dateien werden zuerst kopiert, dann `npm ci`, dann Quellcode. Build aller Workspaces via `npm run build:prod`.
+2. **Shared-Workaround**: `@webmud3/shared` wird nach `backend/dist/node_modules/@webmud3/shared` kopiert (kein npm-Registry). Anschließend `npm install --omit=dev` innerhalb von `backend/dist/`.
+3. **Runtime** (`node:22.20.0-alpine`): Nur kompiliertes Backend + Production-Dependencies. Default-Env-Variablen gesetzt (`NODE_ENV=production`, `HOST=0.0.0.0`, `PORT=5000`, etc.).
+
+#### Docker-Compose für lokale Entwicklung
+
+Neues `dockerfiles/wm3_local_dev.yml` und `dockerfiles/unitopia_dev.dockerfile`:
+- Lokaler Docker-Build (`myonara/webmud3:develop`) spiegelt die Produktions-Dockerfile-Struktur
+- Docker Compose konfiguriert Umgebungsvariablen, Ressourcen-Limits (0.1 CPU, 50 MB RAM), Restart-Policies und Port-Mapping
+
+### 6.3 CI/CD (GitHub Actions)
+
+- **Build & Test** (`build_and_test.yml`): Auf PRs gegen `develop` – `npm ci`, `npm run build`, `npm run test`
+- **Deploy to Azure** (`deploy_to_azure.yml`): Auf Push zu `master` – Build, Shared kopieren, Azure Web App Deploy
+
+---
+
+## 7. Testing
+
+- **Backend**: Jest mit ts-jest, CJS-Modus (tsconfig.jest.json), `import.meta` mock via ts-jest-mock-import-meta
+- **Frontend**: Jest über @angular-builders/jest
+- **Vorhandene Tests**: Environment-Tests, Buffer-Tests im Backend; Input-Controller- und Prompt-Manager-Specs im Frontend
+
+---
+
+## 8. Konfigurationsdateien
+
+| Datei               | Zweck                                       |
+|---------------------|---------------------------------------------|
+| `.editorconfig`     | Einheitliche Formatierung (UTF-8, 2 Spaces) |
+| `.gitignore`        | Standard Node.js ignores + dist/, .env      |
+| `.dockerignore`     | Identisch mit .gitignore                    |
+| `tsconfig.json`     | Pro Workspace individuell konfiguriert       |
+| `.vscode/settings`  | Auto-Fix, Format-on-Save, Import-Style      |
+| `.vscode/launch`    | Debug-Konfigurationen für Frontend+Backend   |
+
+---
+
+## 9. Offene Punkte / TODOs im Code
+
+- GMCP-Support noch nicht implementiert (geplant laut Roadmap)
+- MXP-Support in Arbeit (Milestone)
+- Cookie-Session-Middleware auskommentiert (`useCookieSession`)
+- Auth-Routes auskommentiert (`auth-routes`)
+- `sendGmcp()` im Frontend wirft `Error('Method not implemented.')`
+- Timing-Mark-Handling als Round-Trip mit speziellem TODO markiert
+- Status-Request nach TTYPE-Negotiation als Workaround markiert
+- Doppeltes Emitting von Option-States bei Reconnect (TODO im Code)
+- **Offener Feature-Branch** `feat/frontend-logger`: Zentralisiertes Logging-System für das Frontend mit konfigurierbaren Log-Leveln (noch nicht in `develop` gemerged)
+
+---
+
+## 10. Versions-Geschichte
+
+Das Projekt hat eine lange Entwicklungsgeschichte (v0.0.2 – v0.5.0 → v1.0.0-alpha):
+- Ursprünglich Angular 2+ mit Express
+- Mehrfache Angular-Migrationen (6 → 7 → 8 → 9 → 12 → 13 → 14 → 20)
+- Schrittweise Protokoll-Implementierung (ANSI → Telnet Options → GMCP-Ansätze)
+- Docker-Integration über mehrere Iterationen verfeinert
+- Jüngste große Änderung: Komplette Neufassung des Telnet-Clients mit vollem Option-Negotiation-Support
+
+### 10.1 Jüngste Änderungen (seit PR #165)
+
+Die folgenden Merged PRs und Commits sind die neusten Änderungen auf `develop`:
+
+| PR / Bereich | Beschreibung |
+|---|---|
+| **PR #170 fix/reconnection** | Session-Token-Reset bei Reconnect-Failure, `forceNewSession`-Mechanismus, Transport-Fallback auf `polling` |
+| **PR #172 feat/cancelable-screenreader** | Announcement-Queue und Stop-Funktionalität, strukturiertes Output (TextNode-basiert statt `textContent`-Ersetzung), Echo-Suppression für User-Input, Live-Region umgestellt auf `aria-live="polite"` + `aria-relevant="additions text"` + `aria-atomic="false"` |
+| **PR #162 feat/web-colors** | WCAG AAA-konforme Terminalfarben via `minimumContrastRatio: 7`, Entfernung des hardcodierten Themes |
+| **PR #173 fix/docker-local-test** | Dockerfile komplett überarbeitet (Layer-Caching, Multi-Stage optimiert), neues `unitopia_dev.dockerfile` und `wm3_local_dev.yml` für lokale Docker-Entwicklung |
+| **Keepalive-Konfiguration** | Neue Umgebungsvariablen `SOCKET_PING_INTERVAL`, `SOCKET_PING_TIMEOUT`, `TELNET_KEEPALIVE_DELAY` für stabilere Verbindungen hinter Proxies |
+| **Telnet Error-Handling** | Expliziter `error`-Handler auf dem Raw-TCP-Socket, verhindert unhandled exceptions und Prozessabstürze |
+| **Socket-Cleanup** | Entfernung ungenutzter Socket-Konfigurationseigenschaften, Dokumentation für Session-Discarding |
+
diff --git a/dockerfiles/U3_ANALYSIS.md b/dockerfiles/U3_ANALYSIS.md
new file mode 100644
index 0000000..da9ee0c
--- /dev/null
+++ b/dockerfiles/U3_ANALYSIS.md
@@ -0,0 +1,341 @@
+# U3 – Standanalyse des teilweise migrierten Zielstandes (`u3_webmud3_target`)
+
+## 1. Überblick
+
+`u3_webmud3_target` enthält den **Migrations-Zielstand** von WebMud3, basierend auf dem `migrate/p3-gmcp`-Branch. Es handelt sich um den `develop`-Stand (≈PR #165), auf den 15 zusätzliche Migrations-Commits aufgesetzt wurden. Die Migration umfasst primär:
+
+- **GMCP-Protokoll-Support** (Backend + Frontend)
+- **Multi-MUD-Konfiguration** (Backend)
+- **Fenstersystem** (Frontend, Modeless Windows)
+- **GMCP-Module** (Sound, Char/Statusbar, Char/Inventar, Files/Editor/DirList)
+
+**Aktueller Branch:** `migrate/p3-gmcp` (HEAD: `be4f4cf`)
+
+---
+
+## 2. Migrations-Commits (15 Commits auf `develop`)
+
+| # | Hash | Beschreibung |
+|---|------|-------------|
+| 1 | `4d2cd3d` | Cursor-Rules für Backend, Frontend, Shared, Telnet, Docker, Coding-Conventions |
+| 2 | `0290999` | GMCP-Option im Backend aktivieren (TelnetClient + Handler) |
+| 3 | `a42ce6e` | Shared-Typen für GMCP (`GmcpSupport`, `MudConfig`, `MudFamilyConfig`, `MudConfigFile`) |
+| 4 | `c0ad99a` | GMCP im Frontend (GmcpService, GmcpModuleHandler, GmcpEvent, GmcpBootstrapService) |
+| 5 | `4a0da9a` | Optionale Multi-MUD-Konfiguration (MudConfigService, Environment, REST-Endpoint) |
+| 6 | `835dd2d` | Fenstersystem (WindowService, WindowComponent, WindowContainerComponent) |
+| 7 | `0224506` | DirList-Komponente + ACE-Editor-Komponente (FilesGmcpHandler, FilesService) |
+| 8 | `cefdb33` | GMCP Sound-Modul (SoundGmcpHandler) |
+| 9 | `bd42f59` | GMCP Core.BrowserInfo mit Real-IP-Injektion (extractRealIp) |
+| 10 | `4aa393b` | Char-Statusleiste als Statusbar-Komponente (CharStatusBarComponent) |
+| 11 | `2095efb` | GMCP Inventar (InventoryData, InventoryComponent, Char.Items.*) |
+| 12 | `c9bdd50` | Error-Handling Backend + CORS-Konfiguration im SocketManager |
+| 13 | `b045060` | Build-Error-Fixes |
+| 14 | `e01974a` | Error- und Close-Handling im TelnetClient überarbeitet |
+| 15 | `be4f4cf` | Happy-Eyeballs / localhost-DNS-Workaround |
+
+---
+
+## 3. Geänderte / Neue Dateien (62 Dateien, +6660 / −26 Zeilen)
+
+### 3.1 Shared (`@webmud3/shared`)
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `shared/src/gmcp/gmcp-types.ts` | **NEU** | `GmcpModuleConfig`, `GmcpSupport`, `MudFamilyConfig`, `MudConfig`, `MudConfigFile` |
+| `shared/src/index.ts` | Erweitert | Re-Exports für GMCP-Typen |
+| `shared/src/sockets/server-to-client-events.ts` | Erweitert | `mudGmcpIncoming`, `mudGmcpStart` |
+| `shared/src/sockets/client-to-server-events.ts` | Erweitert | `mudGmcpOutgoing`, `mudConnect` mit optionalem `mudId` |
+
+### 3.2 Backend
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `backend/src/features/telnet/utils/handle-gmcp-option.ts` | **NEU** | GMCP-Option-Handler: Negotiation, Parsing, Send/Receive |
+| `backend/src/features/telnet/utils/handle-gmcp-option.spec.ts` | **NEU** | 225 Zeilen Tests für GMCP-Handler |
+| `backend/src/features/telnet/telnet-client.ts` | Erweitert | GMCP-Handler registriert, Events `gmcpIncoming`/`gmcpStart`, `sendGmcp()`, Error-Handling, Happy-Eyeballs-Fix |
+| `backend/src/core/config/mud-config.service.ts` | **NEU** | Multi-MUD-Konfiguration (Singleton, JSON-File, Lookup, GMCP-Support-Auflösung) |
+| `backend/src/core/config/mud-config.service.spec.ts` | **NEU** | 248 Zeilen Tests für MudConfigService |
+| `backend/src/core/middleware/use-mud-config-endpoint.ts` | **NEU** | REST `/api/mud-config` Endpoint |
+| `backend/src/core/middleware/use-sockets.ts` | Erweitert | Übergibt MudConfigService an SocketManager |
+| `backend/src/core/sockets/socket-manager.ts` | Erweitert | GMCP-Forwarding, `mudGmcpOutgoing`-Handler, `Core.BrowserInfo`-Enrichment, `resolveConnectionParams()`, CORS |
+| `backend/src/core/sockets/extract-real-ip.spec.ts` | **NEU** | Tests für Real-IP-Extraktion |
+| `backend/src/core/environment/environment.ts` | Erweitert | `mudConfigPath` (`MUD_CONFIG_PATH`), `TELNET_HOST`/`PORT` als Fallback-Defaults |
+| `backend/src/main.ts` | Erweitert | MudConfigService-Init, `useMudConfigEndpoint`, globale Error-Handler |
+
+### 3.3 Frontend
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| **GMCP-Kern** | | |
+| `features/gmcp/gmcp.service.ts` | **NEU** | Zentraler GMCP-Service: Modul-Registry, Routing, Observable-Stream, Send-Delegation |
+| `features/gmcp/gmcp-module-handler.ts` | **NEU** | Strategy-Interface für GMCP-Module |
+| `features/gmcp/gmcp-event.ts` | **NEU** | Event-Typ für Observable-Stream |
+| `features/gmcp/gmcp-bootstrap.service.ts` | **NEU** | APP_INITIALIZER: Registriert Char, Sound, Files Handler |
+| **Fenstersystem** | | |
+| `features/windows/window-config.ts` | **NEU** | `WindowConfig`, `WindowEvent`, `WindowAction` Enum |
+| `features/windows/window.service.ts` | **NEU** | Registry, Z-Index, Parent-Child, Event-Bus |
+| `features/windows/window.service.spec.ts` | **NEU** | 229 Zeilen Tests |
+| `features/windows/window.component.ts` | **NEU** | Draggable + Resizable Window (Pointer Events) |
+| `features/windows/window.component.scss` | **NEU** | Catppuccin Mocha Styling |
+| `features/windows/window-container.component.ts` | **NEU** | Fixed-Position Overlay, Content-Routing via `@switch` |
+| `features/windows/index.ts` | **NEU** | Barrel-Export |
+| **GMCP Sound** | | |
+| `features/gmcp-sound/sound-gmcp-handler.ts` | **NEU** | HTML5 Audio API, Base-URL + Event-Playback, Toggle-Menü |
+| `features/gmcp-sound/sound-gmcp-handler.spec.ts` | **NEU** | 168 Zeilen Tests |
+| `features/gmcp-sound/index.ts` | **NEU** | Barrel-Export |
+| **GMCP Char** | | |
+| `features/gmcp-char/char-gmcp-handler.ts` | **NEU** | Char.Name/StatusVars/Status/Vitals/Stats/Items.* Handler |
+| `features/gmcp-char/char-gmcp-handler.spec.ts` | **NEU** | 339 Zeilen Tests |
+| `features/gmcp-char/character-data.ts` | **NEU** | Typen + Parsing (Vitals, Stats) |
+| `features/gmcp-char/character-data.spec.ts` | **NEU** | 150 Zeilen Tests |
+| `features/gmcp-char/char-statusbar.component.ts` | **NEU** | Statusleiste: HP/SP, Stats, Status (ARIA: `role="status"`) |
+| `features/gmcp-char/inventory-data.ts` | **NEU** | Kategorisierte Inventarverwaltung |
+| `features/gmcp-char/inventory-data.spec.ts` | **NEU** | 131 Zeilen Tests |
+| `features/gmcp-char/inventory.component.ts` | **NEU** | Inventar-Fenster (Modeless Window) |
+| `features/gmcp-char/index.ts` | **NEU** | Barrel-Export |
+| **GMCP Files** | | |
+| `features/gmcp-files/files-gmcp-handler.ts` | **NEU** | Files.URL, Files.DirectoryList, OpenFile/ChDir, Save-Workflow |
+| `features/gmcp-files/files.service.ts` | **NEU** | HTTP Load/Save, FileInfo-Registry |
+| `features/gmcp-files/files.service.spec.ts` | **NEU** | 158 Zeilen Tests |
+| `features/gmcp-files/file-types.ts` | **NEU** | FileInfo, FileEntry, FilesUrlPayload, FilesDirectoryListPayload |
+| `features/gmcp-files/file-types.spec.ts` | **NEU** | 22 Zeilen Tests |
+| `features/gmcp-files/dirlist.component.ts` | **NEU** | Verzeichnis-Browser (Tabelle, Klick → Open/ChDir) |
+| `features/gmcp-files/editor.component.ts` | **NEU** | ACE-Editor: Syntax-Highlighting, Theme, Toolbar, Dirty-Check |
+| `features/gmcp-files/index.ts` | **NEU** | Barrel-Export |
+| **Integration** | | |
+| `app/app.component.ts` | Erweitert | Importiert `CharStatusBarComponent`, `WindowContainerComponent` |
+| `app/app.component.html` | Erweitert | `<app-char-statusbar>`, `<app-window-container>` |
+| `main.ts` | Erweitert | `GmcpBootstrapService` als APP_INITIALIZER |
+| `features/sockets/sockets.service.ts` | Erweitert | `mudGmcpIncoming`/`mudGmcpStart` Handler, GMCP-Send-Funktion, `sendGmcp()` |
+
+---
+
+## 4. Architektur der neuen Features
+
+### 4.1 GMCP-Datenfluss (End-to-End)
+
+```
+MUD Server
+  │ Telnet Subnegotiation (IAC SB GMCP ... IAC SE)
+  ▼
+TelnetClient.handleSub() → GmcpNegotiator.handleSub()
+  │ Parses "Module.Message {json}"
+  │ Emits 'gmcpIncoming' event
+  ▼
+SocketManager (event handler)
+  │ Forwards via Socket.IO: socket.emit('mudGmcpIncoming', module, message, data)
+  ▼
+SocketsService (frontend)
+  │ Calls gmcpService.handleIncoming(module, message, data)
+  ▼
+GmcpService
+  │ 1. Emits on gmcpEvent$ (for any subscriber)
+  │ 2. Routes to moduleRegistry.get(module).handleMessage(message, data)
+  ▼
+GmcpModuleHandler (Strategy Pattern)
+  │ e.g. CharGmcpHandler, SoundGmcpHandler, FilesGmcpHandler
+  ▼
+UI Components (via BehaviorSubject / WindowService)
+```
+
+### 4.2 GMCP Outgoing (Frontend → MUD)
+
+```
+Component / Handler
+  │ gmcpService.sendOutgoing(module, message, data)
+  ▼
+GmcpService
+  │ sendFunction(module, message, data)  (set by SocketsService)
+  ▼
+SocketsService
+  │ socket.emit('mudGmcpOutgoing', module, message, data)
+  ▼
+SocketManager (Backend)
+  │ [Optional: Core.BrowserInfo Enrichment mit real_ip]
+  │ telnetClient.sendGmcp(module, message, data)
+  ▼
+GmcpNegotiator.sendGmcp()
+  │ socket.writeSub(TELOPT_GMCP, buffer)
+  ▼
+MUD Server
+```
+
+### 4.3 Multi-MUD-Konfiguration
+
+```
+MUD_CONFIG_PATH env var → mud_config.json
+  │
+  ▼
+MudConfigService (Singleton)
+  ├── mudfamilies: { unitopia: { GMCP: true, GMCP_Support: {...} } }
+  ├── muds: { unitopia-prod: { host, port, ssl, mudfamily } }
+  └── routes: { "/unitopia": "unitopia-prod" }
+  │
+  ▼
+SocketManager.resolveConnectionParams(mudId)
+  │ Priority: mudId → MudConfigService → Fallback TELNET_HOST/PORT
+  │
+  ▼
+REST /api/mud-config → Frontend MUD-Auswahl (noch nicht implementiert)
+```
+
+### 4.4 Fenstersystem
+
+```
+WindowService (Registry, Z-Index, Events)
+  │
+  ▼
+WindowContainerComponent (Fixed Overlay, @for + @switch)
+  │
+  ├── WindowComponent (Draggable/Resizable Shell)
+  │     │
+  │     ├── @case 'DirlistComponent' → DirListComponent
+  │     ├── @case 'EditorComponent'  → EditorComponent
+  │     └── @case 'InventoryComponent' → InventoryComponent
+  │
+  └── Pointer Events: Container = none, Windows = auto
+```
+
+### 4.5 Char-Statusleiste
+
+```
+Char.Name/Vitals/Stats/Status (GMCP)
+  │
+  ▼
+CharGmcpHandler → characterData$ (BehaviorSubject)
+  │
+  ▼
+CharStatusBarComponent (app.component.html)
+  │ Layout: [Name] HP: x/y | SP: x/y | STR INT CON DEX | Status
+  │ Nur sichtbar wenn characterData$ !== null
+  │ flex: 0 0 auto → verdrängt Terminal von unten
+  │ Catppuccin Mocha, monospace, responsive
+  └── ARIA: role="status", aria-live="polite"
+```
+
+---
+
+## 5. Neue Umgebungsvariablen
+
+| Variable | Pflicht | Default | Beschreibung |
+|----------|---------|---------|-------------|
+| `MUD_CONFIG_PATH` | Nein | – | Pfad zur `mud_config.json` für Multi-MUD-Support |
+
+Bestehende Änderungen:
+- `TELNET_HOST` und `TELNET_PORT` sind nicht mehr `required` — sie dienen als Fallback wenn `MUD_CONFIG_PATH` nicht gesetzt ist (Default: `localhost:23`)
+
+---
+
+## 6. Neue Socket.IO Events
+
+| Event | Richtung | Parameter | Beschreibung |
+|-------|----------|-----------|-------------|
+| `mudGmcpIncoming` | Server → Client | `module`, `message`, `data` | GMCP-Nachricht vom MUD weiterleiten |
+| `mudGmcpStart` | Server → Client | `gmcpSupport: GmcpSupport` | GMCP erfolgreich ausgehandelt, Support-Config mitgesendet |
+| `mudGmcpOutgoing` | Client → Server | `module`, `message`, `data` | GMCP-Nachricht ans MUD senden |
+| `mudConnect` | Client → Server | `viewport`, `token`, `mudId?` | Erweitert um optionalen `mudId`-Parameter |
+
+---
+
+## 7. Neue REST-Endpoints
+
+| Endpoint | Methode | Beschreibung |
+|----------|---------|-------------|
+| `/api/mud-config` | GET | Liefert MUD-Liste und Routes für Frontend (Multi-MUD-Auswahl) |
+
+---
+
+## 8. Test-Abdeckung der neuen Features
+
+| Feature | Spec-Datei | Zeilen | Beschreibung |
+|---------|-----------|--------|-------------|
+| GMCP-Handler (Backend) | `handle-gmcp-option.spec.ts` | 225 | Negotiation, Parsing, Send/Receive |
+| MudConfigService | `mud-config.service.spec.ts` | 248 | Laden, Lookup, Fallback, GMCP-Support |
+| extractRealIp | `extract-real-ip.spec.ts` | 82 | x-forwarded-for, direct connection |
+| SoundGmcpHandler | `sound-gmcp-handler.spec.ts` | 168 | URL, Events, Toggle, Dispose |
+| CharGmcpHandler | `char-gmcp-handler.spec.ts` | 339 | Name, Vitals, Stats, Items, Wizard |
+| CharacterData | `character-data.spec.ts` | 150 | parseVitals, parseStats, formatStatus |
+| InventoryData | `inventory-data.spec.ts` | 131 | Add/Remove/Init, Kategorien |
+| FilesService | `files.service.spec.ts` | 158 | processFileUrl, load/save, dirty |
+| FileTypes | `file-types.spec.ts` | 22 | Typ-Definitionen |
+| WindowService | `window.service.spec.ts` | 229 | Open/Close/Focus/Children, Events |
+
+**Gesamt: ~1.752 Test-Zeilen für neue Features**
+
+---
+
+## 9. Design Patterns
+
+| Pattern | Verwendung |
+|---------|-----------|
+| **Strategy** | `GmcpModuleHandler`-Interface — jedes GMCP-Modul kapselt sein Verhalten |
+| **Registry/Service-Locator** | `GmcpService.moduleRegistry` — dynamische Modul-Registrierung |
+| **Observer/Observable** | `gmcpEvent$`, `gmcpStart$`, `characterData$`, `inventory$`, `windows$` |
+| **Singleton** | `MudConfigService.getInstance()`, `Environment.getInstance()` |
+| **Event Bus** | `WindowService.incomingEvents$` / `outgoingEvents$` |
+| **Factory** | `handleGmcpOption()`, `handleSoundOption()` etc. |
+| **Adapter** | `MudSocketAdapter` (bestehend), GMCP-Send-Function-Injection |
+| **Parent-Child** | `WindowConfig.parentWindowId` — DirList als Parent für Editor-Fenster |
+
+---
+
+## 10. Bekannte Probleme und offene Punkte
+
+### 10.1 Fehlend gegenüber `develop` (HEAD)
+
+Der Migrations-Branch basiert auf `develop` bis PR #165. Folgende neuere Features aus `develop` fehlen:
+
+| Feature | develop PRs | Status in u3 |
+|---------|------------|-------------|
+| Cancelable Screenreader (Structured Output, Echo-Suppression) | PR #172 | **Fehlt** |
+| WCAG AAA Web-Colors (`minimumContrastRatio: 7`) | PR #162 | **Fehlt** |
+| Docker Local Test Setup (neues Dockerfile) | PR #173 | **Fehlt** |
+| Reconnect Fix (`forceNewSession`, Transport-Fallback) | PR #170 | **Fehlt** |
+| Socket Keepalive (`SOCKET_PING_INTERVAL`, `SOCKET_PING_TIMEOUT`, `TELNET_KEEPALIVE_DELAY`) | Commits | **Fehlt** |
+| Socket Transport `polling` Fallback | PR #170 | **Fehlt** — u3 nutzt nur `websocket` |
+
+### 10.2 Offene TODOs im Code
+
+- `GMCP.md` zeigt alle `Char.*`-Messages als `[ ]` (nicht implementiert) — aber der Code implementiert sie bereits. Die Dokumentation ist **veraltet**.
+- `Core.Supports.Set/Add/Remove` wird funktional genutzt (Sound-Toggle, Wizard-Module), aber es fehlt eine **konfigurierbares UI** für den Benutzer.
+- `Core.Goodbye` ist nicht implementiert (keine Ressourcen-Freigabe bei Goodbye-Message).
+- `Char.Login` ist nicht implementiert (serverseitig auch noch nicht verfügbar).
+- `Numpad`-Modul wird per `Core.Supports.Add` aktiviert bei Wizard-Login, aber es gibt **keinen Handler** im Frontend.
+- `Input`-Modul wird ebenfalls bei Wizard-Login aktiviert, **kein Handler** vorhanden.
+- `Comm`-Modul (Chat) hat **keinen Handler**.
+- `FilesGmcpHandler.saveFile()` enthält einen `completeSave()`-Aufruf, der **nicht direkt verbunden** ist — der Save-Workflow nutzt stattdessen den Re-Open-via-`handleFilesUrl()`-Mechanismus, was die `completeSave()`-Methode effektiv zu totem Code macht (wird über `handleFilesUrl` → `alreadyLoaded`-Branch angestoßen, aber `await this.saveFile(fileInfo.file)` ruft nicht `completeSave` auf, sondern sendet nur GMCP).
+- `WindowService.updateData()` missbraucht `WindowAction.Resize` als "data changed"-Signal — sollte ein eigenes Event bekommen.
+- CORS-Config im SocketManager fehlt Ping-Intervall-Konfiguration (aus neueren develop-Commits).
+- `SocketsService` im Frontend hat noch **keinen `forceNewSession`-Mechanismus** (aus PR #170).
+
+### 10.3 Abweichungen vom ursprünglichen Migrationsplan
+
+- **Char-Statusleiste**: Im Code als Commit-Message markiert als "deviation from migplan" — wurde direkt als feste Statusleiste implementiert statt als Modeless Window.
+- **ace-builds** als neue Dependency im Frontend (`package.json`) — kein Lazy-Loading des Pakets selbst (nur dynamischer `import()`).
+- **Multi-MUD-Frontend-UI** (MUD-Auswahl-Screen): Backend-API (`/api/mud-config`) existiert, aber im Frontend gibt es **keine Auswahlkomponente**. Die `mudId` wird nirgends übergeben.
+
+### 10.4 Build-Zustand
+
+- Letzte Commits (`c9bdd50`, `b045060`) haben Build-Errors behoben.
+- TypeScript-Casts für `AggregateError` und `ErrnoException` wurden über `unknown`-Zwischencasts gelöst.
+- Die Cursor-Rules in `.cursor/rules/` sind umfangreich dokumentiert und aktuell zum Code-Stand.
+
+---
+
+## 11. Zusammenfassung: Migrations-Reifegrad
+
+| Bereich | Reifegrad | Anmerkung |
+|---------|-----------|-----------|
+| **GMCP Backend (Negotiation)** | ✅ Fertig | Vollständig mit Tests, Error-Handling |
+| **GMCP Backend (Forwarding)** | ✅ Fertig | Socket.IO Events, Core.BrowserInfo Enrichment |
+| **Multi-MUD Backend** | ✅ Fertig | MudConfigService, REST-API, Fallback |
+| **GMCP Frontend (Core)** | ✅ Fertig | GmcpService, Strategy Pattern, Bootstrap |
+| **GMCP Sound** | ✅ Fertig | HTML5 Audio, Toggle, Tests |
+| **GMCP Char (Statusleiste)** | ✅ Fertig | HP/SP/Stats/Status, ARIA, responsive |
+| **GMCP Char (Inventar)** | ✅ Fertig | Kategorisiert, Modeless Window, Tests |
+| **GMCP Files (DirList + Editor)** | ⚠️ Weitgehend fertig | Save-Workflow komplex, toter Code |
+| **Fenstersystem** | ✅ Fertig | Drag, Resize, Parent-Child, Events, Tests |
+| **Multi-MUD Frontend** | ❌ Offen | Backend-API vorhanden, keine UI |
+| **GMCP Numpad/Input/Comm** | ❌ Offen | Module werden aktiviert, aber kein Handler |
+| **Rebase auf develop HEAD** | ❌ Offen | 4 PRs aus develop fehlen (#170, #172, #162, #173) |
+| **GMCP.md Dokumentation** | ❌ Veraltet | Zeigt alles als nicht implementiert |

From f0ba3f5ff4d64ab991d8f047aa477d4561c49068 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <Oliver.Weimar-Drese@sanofi.com>
Date: Mon, 16 Feb 2026 14:18:17 +0100
Subject: [PATCH 26/30] prefinal analysis

---
 dockerfiles/U3_ANALYSIS_V2.md | 560 ++++++++++++++++++++++++++++++++++
 1 file changed, 560 insertions(+)
 create mode 100644 dockerfiles/U3_ANALYSIS_V2.md

diff --git a/dockerfiles/U3_ANALYSIS_V2.md b/dockerfiles/U3_ANALYSIS_V2.md
new file mode 100644
index 0000000..e350c65
--- /dev/null
+++ b/dockerfiles/U3_ANALYSIS_V2.md
@@ -0,0 +1,560 @@
+# U3 – Standanalyse V2 des migrierten Zielstandes (`u3_webmud3_target`)
+
+## 1. Überblick
+
+`u3_webmud3_target` enthält den **vollständig migrierten Zielstand** von WebMud3, basierend auf dem `migrate/p4-gmcp`-Branch. Es handelt sich um den `develop`-Stand (≈PR #165), auf den 25 Migrations-Commits aufgesetzt wurden. Die Migration umfasst:
+
+- **GMCP-Protokoll-Support** (Backend + Frontend, vollständig)
+- **Multi-MUD-Konfiguration** (Backend + Frontend mit Routing)
+- **Fenstersystem** (Frontend, Modeless Windows)
+- **GMCP-Module** (Core, Sound, Char/Statusbar, Char/Inventar, Files/Editor/DirList, Input, Numpad, Comm, Room)
+- **Menü-System** (Eigenentwicklung, Catppuccin Mocha, Keyboard-Navigation, ARIA)
+- **Farbeinstellungen** (Invertierung, B/W, Monochrom, lokale Echo-Farbe, xterm-Theme)
+- **Multi-Deployment** (Environment-Files, Docker Compose Varianten)
+
+**Aktueller Branch:** `migrate/p4-gmcp` (HEAD: `5f85380`)
+
+---
+
+## 2. Migrations-Commits (25 Commits auf `develop`)
+
+### Phase 0–1: Basis + Core GMCP (Commits 1–15 + 16)
+
+| # | Hash | Beschreibung |
+|---|------|-------------|
+| 1 | `4d2cd3d` | Cursor-Rules für Backend, Frontend, Shared, Telnet, Docker, Coding-Conventions |
+| 2 | `0290999` | GMCP-Option im Backend aktivieren (TelnetClient + Handler) |
+| 3 | `a42ce6e` | Shared-Typen für GMCP (`GmcpSupport`, `MudConfig`, `MudFamilyConfig`, `MudConfigFile`) |
+| 4 | `c0ad99a` | GMCP im Frontend (GmcpService, GmcpModuleHandler, GmcpEvent, GmcpBootstrapService) |
+| 5 | `4a0da9a` | Optionale Multi-MUD-Konfiguration (MudConfigService, Environment, REST-Endpoint) |
+| 6 | `835dd2d` | Fenstersystem (WindowService, WindowComponent, WindowContainerComponent) |
+| 7 | `0224506` | DirList-Komponente + ACE-Editor-Komponente (FilesGmcpHandler, FilesService) |
+| 8 | `cefdb33` | GMCP Sound-Modul (SoundGmcpHandler) |
+| 9 | `bd42f59` | GMCP Core.BrowserInfo mit Real-IP-Injektion (extractRealIp) |
+| 10 | `4aa393b` | Char-Statusleiste als Statusbar-Komponente (CharStatusBarComponent) |
+| 11 | `2095efb` | GMCP Inventar (InventoryData, InventoryComponent, Char.Items.*) |
+| 12 | `c9bdd50` | Error-Handling Backend + CORS-Konfiguration im SocketManager |
+| 13 | `b045060` | Build-Error-Fixes |
+| 14 | `e01974a` | Error- und Close-Handling im TelnetClient überarbeitet |
+| 15 | `be4f4cf` | Happy-Eyeballs / localhost-DNS-Workaround |
+| 16 | `1a3639b` | Bug-Fixes, Core.Hello, Core.Supports.Set, Core.Ping, Core.Goodbye |
+
+### Phase 2: Menü + Farbeinstellungen (Commit 17)
+
+| # | Hash | Beschreibung |
+|---|------|-------------|
+| 17 | `50be7ec` | Menü-System (MenuBar, Dropdown, Service) + ColorSettingsService + ColorSettingsComponent |
+
+### Phase 3: GMCP Feature Module (Commits 18–22)
+
+| # | Hash | Beschreibung |
+|---|------|-------------|
+| 18 | `e0635bf` | Input-Completion (InputGmcpHandler, Tab-Handling im MudInputController) |
+| 19 | `50ebf4f` | Numpad/Keypad (NumpadGmcpHandler, KeypadComponent, KeypadData-Modell) |
+| 20 | `cb7b91e` | Comm-Modul (CommGmcpHandler: Say, Soul, Tell) |
+| 21 | `18a5bfa` | Room.Info (RoomGmcpHandler: Raum-Name, Domain, Exits, Browser-Titel) |
+| 22 | `8c3ef90` | Editor-Suche (ACE ext-searchbox, Keyboard-Event-Propagation) |
+
+### Phase 4: Multi-MUD Frontend + Deployment (Commits 23–25)
+
+| # | Hash | Beschreibung |
+|---|------|-------------|
+| 23 | `c9a8285` | Multi-MUD-Selector (MudConfigService Frontend, MudSelectorComponent, Angular Router, mudId-Passing) |
+| 24 | `fb66676` | Environment-Files (prod.uni, prod.sb) + Docker Compose Varianten auf u3-Env-Vars migriert |
+| 25 | `5f85380` | Migrationspläne und Analyse-Dokumente archiviert |
+
+---
+
+## 3. Geänderte / Neue Dateien (132 Dateien, +14.251 / −211 Zeilen)
+
+### 3.1 Shared (`@webmud3/shared`)
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `shared/src/gmcp/gmcp-types.ts` | **NEU** | `GmcpModuleConfig`, `GmcpSupport`, `MudFamilyConfig`, `MudConfig`, `MudConfigFile` |
+| `shared/src/index.ts` | Erweitert | Re-Exports für GMCP-Typen |
+| `shared/src/sockets/server-to-client-events.ts` | Erweitert | `mudGmcpIncoming`, `mudGmcpStart` |
+| `shared/src/sockets/client-to-server-events.ts` | Erweitert | `mudGmcpOutgoing`, `mudConnect` mit optionalem `mudId` |
+
+### 3.2 Backend
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `backend/src/features/telnet/utils/handle-gmcp-option.ts` | **NEU** | GMCP-Option-Handler: Negotiation, Parsing, Send/Receive |
+| `backend/src/features/telnet/utils/handle-gmcp-option.spec.ts` | **NEU** | 225 Zeilen Tests für GMCP-Handler |
+| `backend/src/features/telnet/telnet-client.ts` | Erweitert | GMCP-Handler, Error-Handling, Happy-Eyeballs-Fix |
+| `backend/src/core/config/mud-config.service.ts` | **NEU** | Multi-MUD-Konfiguration (Singleton, JSON-File, Lookup) |
+| `backend/src/core/config/mud-config.service.spec.ts` | **NEU** | 248 Zeilen Tests |
+| `backend/src/core/middleware/use-mud-config-endpoint.ts` | **NEU** | REST `/api/mud-config` Endpoint |
+| `backend/src/core/sockets/socket-manager.ts` | Erweitert | GMCP-Forwarding, Core.BrowserInfo-Enrichment, CORS |
+| `backend/src/core/sockets/extract-real-ip.spec.ts` | **NEU** | Tests für Real-IP-Extraktion |
+| `backend/src/core/environment/environment.ts` | Erweitert | `mudConfigPath`, Telnet-Host/Port als Fallback |
+| `backend/src/main.ts` | Erweitert | MudConfigService-Init, useMudConfigEndpoint |
+
+### 3.3 Frontend — GMCP-Kern
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/gmcp/gmcp.service.ts` | **NEU** | Zentraler GMCP-Service: Registry, Routing, Observable, Send, Core.Hello, Core.Supports.Set |
+| `features/gmcp/gmcp-module-handler.ts` | **NEU** | Strategy-Interface für GMCP-Module |
+| `features/gmcp/gmcp-event.ts` | **NEU** | Event-Typ für Observable-Stream |
+| `features/gmcp/gmcp-bootstrap.service.ts` | **NEU** | APP_INITIALIZER: Registriert alle 8 GMCP-Handler |
+
+### 3.4 Frontend — GMCP Core
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/gmcp-core/core-gmcp-handler.ts` | **NEU** | Core.Ping (Latenz-Messung, Toggle), Core.Goodbye (Cleanup, GMCP-Reset) |
+| `features/gmcp-core/core-gmcp-handler.spec.ts` | **NEU** | 109 Zeilen Tests |
+
+### 3.5 Frontend — GMCP Sound
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/gmcp-sound/sound-gmcp-handler.ts` | **NEU** | HTML5 Audio API, Base-URL + Event-Playback, Toggle-Menü |
+| `features/gmcp-sound/sound-gmcp-handler.spec.ts` | **NEU** | 168 Zeilen Tests |
+
+### 3.6 Frontend — GMCP Char
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/gmcp-char/char-gmcp-handler.ts` | **NEU** | Char.Name/StatusVars/Status/Vitals/Stats/Items.* Handler |
+| `features/gmcp-char/char-gmcp-handler.spec.ts` | **NEU** | 339 Zeilen Tests |
+| `features/gmcp-char/character-data.ts` | **NEU** | Typen + Parsing (Vitals, Stats) |
+| `features/gmcp-char/character-data.spec.ts` | **NEU** | 150 Zeilen Tests |
+| `features/gmcp-char/char-statusbar.component.ts` | **NEU** | Statusleiste: HP/SP, Stats, Status (ARIA) |
+| `features/gmcp-char/inventory-data.ts` | **NEU** | Kategorisierte Inventarverwaltung |
+| `features/gmcp-char/inventory-data.spec.ts` | **NEU** | 131 Zeilen Tests |
+| `features/gmcp-char/inventory.component.ts` | **NEU** | Inventar-Fenster (Modeless Window) |
+
+### 3.7 Frontend — GMCP Files
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/gmcp-files/files-gmcp-handler.ts` | **NEU** | Files.URL, DirectoryList, OpenFile/ChDir, Save-Workflow (Bug-Fix: `completeSave`) |
+| `features/gmcp-files/files.service.ts` | **NEU** | HTTP Load/Save, FileInfo-Registry |
+| `features/gmcp-files/dirlist.component.ts` | **NEU** | Verzeichnis-Browser (reagiert auf `DataChanged`) |
+| `features/gmcp-files/editor.component.ts` | **NEU** | ACE-Editor + `ext-searchbox` + Keyboard-Propagation-Fix |
+| `features/gmcp-files/file-types.ts` | **NEU** | Typen: FileInfo, FileEntry, Payloads |
+
+### 3.8 Frontend — GMCP Input
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/gmcp-input/input-gmcp-handler.ts` | **NEU** | Tab-Completion: CompleteText, CompleteChoice, CompleteNone |
+| `features/gmcp-input/input-gmcp-handler.spec.ts` | **NEU** | 73 Zeilen Tests |
+
+### 3.9 Frontend — GMCP Numpad
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/gmcp-numpad/numpad-gmcp-handler.ts` | **NEU** | Numpad.SendLevel Handler, Keypad-Fenster |
+| `features/gmcp-numpad/numpad-gmcp-handler.spec.ts` | **NEU** | 105 Zeilen Tests |
+| `features/gmcp-numpad/keypad-data.ts` | **NEU** | Typisiertes Keypad-Datenmodell mit Modifier-Support |
+| `features/gmcp-numpad/keypad.component.ts` | **NEU** | 3×3 Keypad-Grid-Widget |
+
+### 3.10 Frontend — GMCP Comm
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/gmcp-comm/comm-gmcp-handler.ts` | **NEU** | Say/Soul/Tell als Observable-Stream |
+| `features/gmcp-comm/comm-gmcp-handler.spec.ts` | **NEU** | 59 Zeilen Tests |
+
+### 3.11 Frontend — GMCP Room
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/gmcp-room/room-gmcp-handler.ts` | **NEU** | Room.Info: Name, Domain, Exits, Browser-Titel-Update |
+| `features/gmcp-room/room-gmcp-handler.spec.ts` | **NEU** | 70 Zeilen Tests |
+
+### 3.12 Frontend — Menü-System
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/menu/menu-item.ts` | **NEU** | MenuItem-Interface (hierarchisch, ARIA-Attribute) |
+| `features/menu/menu.service.ts` | **NEU** | Reaktiver Menü-Baum, dynamische Registrierung |
+| `features/menu/menu.service.spec.ts` | **NEU** | 131 Zeilen Tests |
+| `features/menu/menu-bar.component.ts` | **NEU** | Horizontale Menüleiste (Keyboard-Navigation, ARIA `menubar`) |
+| `features/menu/menu-bar.component.scss` | **NEU** | Catppuccin Mocha Styling |
+| `features/menu/menu-dropdown.component.ts` | **NEU** | Dropdown mit Submenü-Support |
+| `features/menu/menu-dropdown.component.scss` | **NEU** | Styling |
+| `features/menu/menu-bootstrap.service.ts` | **NEU** | Menü-Initialisierung: Ansicht, GMCP, Fenster |
+
+### 3.13 Frontend — Farbeinstellungen
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/settings/color-settings.service.ts` | **NEU** | Farbpräferenzen, localStorage-Persistenz, xterm-Theme-Generator |
+| `features/settings/color-settings.service.spec.ts` | **NEU** | 117 Zeilen Tests |
+| `features/settings/color-settings.component.ts` | **NEU** | Modeless Dialog: Invertierung, B/W, Monochrom, Echo-Farbe |
+| `features/settings/color-settings.component.scss` | **NEU** | Catppuccin Mocha Styling |
+
+### 3.14 Frontend — Multi-MUD
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/mud-config/mud-config.service.ts` | **NEU** | Frontend MudConfigService: lädt `/api/mud-config`, Multi-MUD-Erkennung |
+| `features/mud-config/mud-config.service.spec.ts` | **NEU** | 175 Zeilen Tests |
+| `features/mud-config/mud-selector.component.ts` | **NEU** | Landing-Page mit MUD-Karten (ARIA, Keyboard) |
+| `features/mud-config/mud-client-shell.component.ts` | **NEU** | Route-Shell: liest `:mudId`, reicht an MudClientComponent |
+
+### 3.15 Frontend — Fenstersystem
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `features/windows/window-config.ts` | **NEU** | `WindowConfig`, `WindowEvent`, `WindowAction` (inkl. `DataChanged`) |
+| `features/windows/window.service.ts` | **NEU** | Registry, Z-Index, Parent-Child, Event-Bus |
+| `features/windows/window.component.ts` | **NEU** | Draggable + Resizable Window |
+| `features/windows/window-container.component.ts` | **NEU** | Content-Routing inkl. `ColorSettingsComponent`, `KeypadComponent` |
+
+### 3.16 Frontend — Routing + Integration
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `app/app.routes.ts` | **NEU** | Dynamische Routes: Multi-MUD → Selector + `:mudId`; Single-MUD → direkt Client |
+| `app/app.component.ts` | Geändert | `<router-outlet>` statt statischem MudClient |
+| `app/app.component.html` | Geändert | MenuBar + RouterOutlet |
+| `main.ts` | Erweitert | Router, MudConfigService, MenuBootstrapService als Initializer |
+| `features/sockets/sockets.service.ts` | Erweitert | `connectToMud(viewport, mudId?)`, GMCP-Send-Function |
+| `core/mud/services/mud.service.ts` | Erweitert | `connect(viewport, mudId?)` |
+| `core/mud/components/mud-client/mud-client.component.ts` | Erweitert | `@Input() mudId`, Tab-Completion, Live-Theme, GMCP-Bindings |
+| `features/terminal/mud-input.controller.ts` | Erweitert | Tab-Key-Handler, `replaceCurrentWord()`, `setTabCompleteHandler()` |
+
+### 3.17 Deployment
+
+| Datei | Status | Beschreibung |
+|-------|--------|-------------|
+| `angular.json` | Erweitert | Build-Configs: `production-unitopia`, `production-seifenblase` |
+| `environments/environment.prod.uni.ts` | **NEU** | UNItopia-Produktion (origin-basiert) |
+| `environments/environment.prod.sb.ts` | **NEU** | Seifenblase-Produktion (origin-basiert) |
+| `dockerfiles/w3_docker_compose.yml` | Migriert | u3-Env-Vars: `MUD_CONFIG_PATH`, `SOCKET_ROOT`, `CORS_ALLOWED_ORIGINS` |
+| `dockerfiles/w3_docker_compose_sb.yml` | Migriert | Seifenblase-spezifisch |
+| `dockerfiles/w3_docker_compose_local.yml` | Migriert | Lokal mit `host.docker.internal` |
+| `dockerfiles/w3_docker_compose_test.yml` | Migriert | UNItopia Test |
+| `dockerfiles/w3_docker_compose_test_neu.yml` | Migriert | UNItopia Test (tagged image) |
+| `dockerfiles/w3_docker_compose_secret.yml` | Migriert | TLS-Secrets |
+| `dockerfiles/w3_docker_compose_with_apache.yml` | Migriert | Apache Reverse Proxy |
+| `dockerfiles/README.md` | Neugeschrieben | Env-Var-Referenz, Build-Befehle, Deployment-Übersicht |
+
+---
+
+## 4. Architektur
+
+### 4.1 GMCP-Datenfluss (End-to-End)
+
+```
+MUD Server
+  │ Telnet Subnegotiation (IAC SB GMCP ... IAC SE)
+  ▼
+TelnetClient.handleSub() → GmcpNegotiator.handleSub()
+  │ Parses "Module.Message {json}"
+  │ Emits 'gmcpIncoming' event
+  ▼
+SocketManager (event handler)
+  │ Forwards via Socket.IO: socket.emit('mudGmcpIncoming', module, message, data)
+  ▼
+SocketsService (frontend)
+  │ Calls gmcpService.handleIncoming(module, message, data)
+  ▼
+GmcpService
+  │ 1. Emits on gmcpEvent$ (for any subscriber)
+  │ 2. Routes to moduleRegistry.get(module).handleMessage(message, data)
+  ▼
+GmcpModuleHandler (Strategy Pattern)
+  │ 8 Handler: Core, Char, Sound, Files, Input, Numpad, Comm, Room
+  ▼
+UI Components (via BehaviorSubject / WindowService / Observable)
+```
+
+### 4.2 GMCP Handshake-Sequenz
+
+```
+1. Backend: TelnetClient verhandelt GMCP-Option (IAC DO/WILL)
+2. Backend: Emittiert 'gmcpStart' mit GmcpSupport-Config
+3. Frontend: GmcpService.handleGmcpStart()
+   a. Sendet Core.Hello { client: 'WebMud3', version: '0.7.0' }
+   b. Sendet Core.Supports.Set mit allen unterstützten Modulen + Versionen
+   c. Aktiviert alle registrierten Handler
+4. MUD antwortet mit Core.Hello und beginnt GMCP-Nachrichten zu senden
+```
+
+### 4.3 GMCP Module Registry
+
+```
+GmcpBootstrapService (APP_INITIALIZER)
+  │
+  ├── CoreGmcpHandler     → Core.Ping, Core.Goodbye
+  ├── CharGmcpHandler      → Char.Name/StatusVars/Status/Vitals/Stats/Items.*
+  ├── SoundGmcpHandler     → Sound.Url, Sound.Event
+  ├── FilesGmcpHandler     → Files.URL, Files.DirectoryList
+  ├── InputGmcpHandler     → Input.CompleteText/Choice/None
+  ├── NumpadGmcpHandler    → Numpad.SendLevel
+  ├── CommGmcpHandler      → Comm.Say/Soul/Tell
+  └── RoomGmcpHandler      → Room.Info
+```
+
+### 4.4 Multi-MUD-Routing
+
+```
+App Bootstrap
+  │
+  ├── MudConfigService.load() → GET /api/mud-config
+  │     │
+  │     ├── isMultiMud = true  →  Routes: "/" = MudSelectorComponent
+  │     │                                  "/:mudId" = MudClientShellComponent
+  │     │
+  │     └── isMultiMud = false →  Routes: "/" = MudClientShellComponent (kein Selector)
+  │
+  ▼
+MudClientShellComponent
+  │ Liest :mudId aus ActivatedRoute
+  │ Übergibt an MudClientComponent via @Input()
+  ▼
+MudClientComponent → MudService → SocketsService
+  │ socket.emit('mudConnect', viewport, sessionToken, mudId)
+  ▼
+Backend: SocketManager.resolveConnectionParams(mudId)
+  │ Priority: mudId → MudConfigService → Fallback TELNET_HOST/PORT
+```
+
+### 4.5 Menü-System
+
+```
+MenuBootstrapService (APP_INITIALIZER)
+  │
+  ├── "Ansicht" → Farbeinstellungen…, Ping senden
+  ├── "GMCP"    → Dynamisch aus Handler-Beiträgen (z.B. Sound Toggle)
+  └── "Fenster" → Alle schließen, + dynamische Fensterliste
+  │
+  ▼
+MenuBarComponent → MenuDropdownComponent (Standalone, ARIA menubar/menu)
+  │ Keyboard: Arrow-Keys, Enter, Escape
+  │ Styling: Catppuccin Mocha
+```
+
+### 4.6 Fenstersystem
+
+```
+WindowService (Registry, Z-Index, Events)
+  │
+  ▼
+WindowContainerComponent (Fixed Overlay, @for + @switch)
+  │
+  ├── @case 'DirlistComponent'         → DirListComponent
+  ├── @case 'EditorComponent'          → EditorComponent
+  ├── @case 'InventoryComponent'       → InventoryComponent
+  ├── @case 'ColorSettingsComponent'   → ColorSettingsComponent
+  └── @case 'KeypadComponent'          → KeypadComponent
+```
+
+---
+
+## 5. Umgebungsvariablen (Backend)
+
+| Variable | Pflicht | Default | Beschreibung |
+|----------|---------|---------|-------------|
+| `HOST` | Nein | `0.0.0.0` | IP-Adresse des Backends |
+| `PORT` | Nein | `5000` | Port des Backends |
+| `TELNET_HOST` | Ja* | `localhost` | MUD-Server Hostname |
+| `TELNET_PORT` | Ja* | `23` | MUD-Server Port |
+| `TELNET_TLS` | Nein | `false` | TLS für Telnet |
+| `SOCKET_ROOT` | Ja | `/socket.io` | Socket.IO Pfad |
+| `SOCKET_TIMEOUT` | Nein | `900000` | Session-Timeout (ms) |
+| `MUD_CONFIG_PATH` | Nein | – | Pfad zur `mud_config.json` für Multi-MUD |
+| `CORS_ALLOWED_ORIGINS` | Nein | – | Komma-separierte Origins |
+| `LOG_LEVEL` | Nein | `debug` | Winston Log-Level |
+| `ENVIRONMENT` | Nein | `production` | `production` oder `development` |
+| `NAME` | Nein | `webmud3b` | Client-Name für MUD |
+
+*Pflicht nur wenn `MUD_CONFIG_PATH` nicht gesetzt ist.
+
+---
+
+## 6. Angular Build-Konfigurationen
+
+| Konfiguration | Environment-File | Zweck |
+|--------------|-----------------|-------|
+| `(default)` | `environment.ts` | Lokale Entwicklung (`localhost:5000`) |
+| `production` | `environment.prod.ts` | Generisch (`window.location.href`) |
+| `production-unitopia` | `environment.prod.uni.ts` | UNItopia (`window.location.origin`) |
+| `production-seifenblase` | `environment.prod.sb.ts` | Seifenblase (`window.location.origin`) |
+
+---
+
+## 7. Socket.IO Events
+
+| Event | Richtung | Parameter | Beschreibung |
+|-------|----------|-----------|-------------|
+| `mudConnect` | Client → Server | `viewport`, `token`, `mudId?` | MUD-Verbindung herstellen (mit optionalem mudId) |
+| `mudGmcpOutgoing` | Client → Server | `module`, `message`, `data` | GMCP an MUD senden |
+| `mudGmcpIncoming` | Server → Client | `module`, `message`, `data` | GMCP vom MUD empfangen |
+| `mudGmcpStart` | Server → Client | `gmcpSupport: GmcpSupport` | GMCP ausgehandelt |
+
+---
+
+## 8. REST-Endpoints
+
+| Endpoint | Methode | Beschreibung |
+|----------|---------|-------------|
+| `/api/config` | GET | Socket-Namespace-Konfiguration |
+| `/api/mud-config` | GET | MUD-Liste und Routes (Multi-MUD-Auswahl) |
+
+---
+
+## 9. Test-Abdeckung
+
+| Feature | Spec-Datei | Zeilen | Phase |
+|---------|-----------|--------|-------|
+| GMCP-Handler (Backend) | `handle-gmcp-option.spec.ts` | 225 | Basis |
+| MudConfigService (Backend) | `mud-config.service.spec.ts` | 248 | Basis |
+| extractRealIp | `extract-real-ip.spec.ts` | 82 | Basis |
+| WindowService | `window.service.spec.ts` | 229 | Basis |
+| SoundGmcpHandler | `sound-gmcp-handler.spec.ts` | 168 | Basis |
+| CharGmcpHandler | `char-gmcp-handler.spec.ts` | 339 | Basis |
+| CharacterData | `character-data.spec.ts` | 150 | Basis |
+| InventoryData | `inventory-data.spec.ts` | 131 | Basis |
+| FilesService | `files.service.spec.ts` | 158 | Basis |
+| FileTypes | `file-types.spec.ts` | 22 | Basis |
+| MudInputController | `mud-input.controller.spec.ts` | 103 | Basis |
+| MudPromptManager | `mud-prompt.manager.spec.ts` | 714 | Basis |
+| MudScreenReaderAnnouncer | `mud-screenreader.spec.ts` | 173 | Basis |
+| CoreGmcpHandler | `core-gmcp-handler.spec.ts` | 109 | Phase 1 |
+| MenuService | `menu.service.spec.ts` | 131 | Phase 2 |
+| ColorSettingsService | `color-settings.service.spec.ts` | 117 | Phase 2 |
+| InputGmcpHandler | `input-gmcp-handler.spec.ts` | 73 | Phase 3 |
+| NumpadGmcpHandler | `numpad-gmcp-handler.spec.ts` | 105 | Phase 3 |
+| CommGmcpHandler | `comm-gmcp-handler.spec.ts` | 59 | Phase 3 |
+| RoomGmcpHandler | `room-gmcp-handler.spec.ts` | 70 | Phase 3 |
+| MudConfigService (Frontend) | `mud-config.service.spec.ts` | 175 | Phase 4 |
+
+**Gesamt: ~3.581 Test-Zeilen (18 Spec-Dateien)**
+
+---
+
+## 10. Design Patterns
+
+| Pattern | Verwendung |
+|---------|-----------|
+| **Strategy** | `GmcpModuleHandler`-Interface — 8 austauschbare Handler |
+| **Registry/Service-Locator** | `GmcpService.moduleRegistry` — dynamische Modul-Registrierung |
+| **Observer/Observable** | `gmcpEvent$`, `gmcpStart$`, `characterData$`, `inventory$`, `windows$`, `settings$`, `menuItems$`, `completionResult$`, `roomInfo$`, `commMessage$` |
+| **Singleton** | `MudConfigService.getInstance()` (Backend), `Environment.getInstance()` |
+| **Event Bus** | `WindowService.incomingEvents$` / `outgoingEvents$` |
+| **Factory** | `handleGmcpOption()`, `buildAppRoutes()` |
+| **Adapter** | `MudSocketAdapter`, GMCP-Send-Function-Injection |
+| **Parent-Child** | `WindowConfig.parentWindowId` — DirList → Editor-Fenster |
+| **Shell/Wrapper** | `MudClientShellComponent` — Route-Parameter → Component-Input |
+
+---
+
+## 11. GMCP Implementierungsstatus
+
+### Vollständig implementiert (✅)
+
+| Modul | Nachrichten | Richtung |
+|-------|-----------|----------|
+| Core | Hello, Supports.Set/Add/Remove, Ping, Goodbye | Bidirektional |
+| Char | Name, StatusVars, Status, Vitals, Stats | MUD → Client |
+| Char.Items | List, Add, Remove | MUD → Client |
+| Sound | Url, Event | MUD → Client |
+| Files | URL, DirectoryList | MUD → Client |
+| Files | OpenFile, ChDir, fileSaved | Client → MUD |
+| Input | Complete | Client → MUD |
+| Input | CompleteText, CompleteChoice, CompleteNone | MUD → Client |
+| Numpad | SendLevel | MUD → Client |
+| Numpad | Update, GetAll | Client → MUD |
+| Comm | Say, Soul, Tell | MUD → Client |
+| Room | Info | MUD → Client |
+
+### Nicht implementiert / Offen
+
+| Modul | Nachricht | Anmerkung |
+|-------|----------|-----------|
+| Char | Login | Serverseitig noch nicht verfügbar |
+| Char.Items | Inv (Request) | Client → MUD Inventar-Anfrage |
+| Numpad | GetLevel | Level-spezifische Abfrage |
+
+---
+
+## 12. Bekannte Probleme und offene Punkte
+
+### 12.1 Fehlend gegenüber `develop` (HEAD)
+
+| Feature | develop PR/Branch | Status | Aufwand |
+|---------|------------------|--------|---------|
+| Reconnect-Fix (`forceNew`, Transport-Fallback) | PR #170 / `origin/fix/reconnection` | **Portierbar** | Niedrig |
+| WCAG AAA Web-Colors (`minimumContrastRatio: 7`) | PR #162 / `origin/feat/web-colors` | **Trivial** (1 Zeile) | Minimal |
+| Cancelable Screenreader (Echo-Suppression, Queue) | PR #172 / `origin/feat/cancelable-screenreader` | **Manuell portierbar** | Mittel-Hoch |
+| Docker Local Test Setup | PR #173 / `origin/docker-tests` | **Entfällt** (u3 hat eigenes Setup) | – |
+
+**Hinweis:** Diese PRs wurden gegen die alte u1-Architektur geschrieben. Cherry-Pick ist nicht möglich; die Konzepte müssen manuell portiert werden.
+
+### 12.2 Offene TODOs im Code
+
+- **Completion-Overlay**: `mud-client.component.ts` hat `TODO: Show completion overlay` für `CompleteChoice`-Ergebnisse (aktuell Console-Log)
+- **Char.Items.Inv**: Client→MUD Request-Nachricht nicht implementiert
+- **Numpad.GetLevel**: Level-spezifische Abfrage nicht implementiert
+- **MUD-Wechsel im Menü**: Kein Menü-Eintrag für Navigation zwischen MUDs
+
+### 12.3 Gelöste Probleme (seit V1 der Analyse)
+
+- ✅ `GMCP.md` Dokumentation aktualisiert (war: alles als `[ ]` markiert)
+- ✅ `Core.Goodbye` implementiert (war: fehlte)
+- ✅ `Core.Hello` + `Core.Supports.Set` Handshake implementiert (war: fehlte)
+- ✅ `Core.Ping` mit Latenz-Messung und Toggle (war: fehlte)
+- ✅ `FilesGmcpHandler.completeSave()` Bug gefixt (war: toter Code)
+- ✅ `WindowAction.DataChanged` statt Missbrauch von `Resize` (war: Bug)
+- ✅ Menü-System implementiert (war: fehlte)
+- ✅ Farbeinstellungen implementiert (war: fehlte)
+- ✅ Input-Completion implementiert (war: fehlte)
+- ✅ Numpad/Keypad implementiert (war: fehlte)
+- ✅ Comm-Modul implementiert (war: fehlte)
+- ✅ Room.Info implementiert (war: fehlte)
+- ✅ Editor-Suche funktioniert via ACE (war: fehlte)
+- ✅ Multi-MUD Frontend UI mit Angular Router (war: fehlte)
+- ✅ Multi-Deployment Docker Compose migriert (war: veraltet)
+
+---
+
+## 13. Zusammenfassung: Migrations-Reifegrad
+
+| Bereich | Reifegrad | Anmerkung |
+|---------|-----------|-----------|
+| **GMCP Backend (Negotiation + Forwarding)** | ✅ Fertig | Vollständig mit Tests, Error-Handling |
+| **Multi-MUD Backend** | ✅ Fertig | MudConfigService, REST-API, Fallback |
+| **GMCP Frontend (Core Service)** | ✅ Fertig | Strategy Pattern, 8 Handler, Bootstrap |
+| **GMCP Core (Hello/Supports/Ping/Goodbye)** | ✅ Fertig | Automatischer Handshake, Latenz-Messung |
+| **GMCP Sound** | ✅ Fertig | HTML5 Audio, Toggle |
+| **GMCP Char (Statusleiste + Inventar)** | ✅ Fertig | HP/SP/Stats, Kategorien, ARIA |
+| **GMCP Files (DirList + Editor)** | ✅ Fertig | Save-Workflow-Bug behoben, Suche via Ctrl+F |
+| **GMCP Input (Tab-Completion)** | ✅ Fertig | CompleteText/Choice/None |
+| **GMCP Numpad (Keypad-Widget)** | ✅ Fertig | 3×3 Grid, Modifier, MUD-synchron |
+| **GMCP Comm (Chat)** | ✅ Fertig | Observable-Stream (minimal) |
+| **GMCP Room (Info)** | ✅ Fertig | Browser-Titel-Update |
+| **Menü-System** | ✅ Fertig | Eigenentwicklung, 3-Level, ARIA, Keyboard |
+| **Farbeinstellungen** | ✅ Fertig | Invertierung, B/W, Monochrom, xterm-Theme |
+| **Fenstersystem** | ✅ Fertig | Drag, Resize, Parent-Child, 5 Fenstertypen |
+| **Multi-MUD Frontend** | ✅ Fertig | Selector, Router, mudId-Passing |
+| **Multi-Deployment** | ✅ Fertig | 4 Environments, 7 Docker Compose, README |
+| **develop-PRs (#170, #162, #172)** | ⚠️ Portierbar | Manuell, nicht cherry-pickbar |
+| **Auth/RPC (Phase 5)** | ❌ Gestrichen | Experimentell, nicht priorisiert |
+| **GMCP.md Dokumentation** | ✅ Aktuell | Alle Module korrekt markiert |
+
+---
+
+## 14. Vergleich V1 → V2
+
+| Metrik | V1 (be4f4cf) | V2 (5f85380) | Delta |
+|--------|-------------|-------------|-------|
+| Migrations-Commits | 15 | 25 | +10 |
+| Geänderte/Neue Dateien | 62 | 132 | +70 |
+| Code-Zeilen (netto) | +6.660 | +14.251 | +7.591 |
+| GMCP-Handler (Frontend) | 3 | 8 | +5 |
+| Test-Spec-Dateien | 10 | 18 | +8 |
+| Test-Zeilen (gesamt) | ~1.752 | ~3.581 | +1.829 |
+| Offene "Fehlt"-Einträge | 12 | 3 | −9 |
+| Fenstertypen | 3 | 5 | +2 |
+| UI-Eigenentwicklungen | 0 | 2 (Menü, Farbdialog) | +2 |
+| Angular Routes | 0 | 2 (Selector, Client) | +2 |
+| Docker Compose (migriert) | 0 | 7 | +7 |
+| Environment-Files | 2 | 4 | +2 |

From 5e15fe5b984dc0d1ed967bfecbe5f0031d7e2610 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <oliver@weimar-drese.de>
Date: Tue, 17 Feb 2026 03:27:22 +0100
Subject: [PATCH 27/30] reload test dockerfiles

---
 dockerfiles/unitopia_dev.dockerfile | 55 +++++++++++++++++++++++++++++
 dockerfiles/wm3_local_dev.yml       | 15 ++++----
 2 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 dockerfiles/unitopia_dev.dockerfile

diff --git a/dockerfiles/unitopia_dev.dockerfile b/dockerfiles/unitopia_dev.dockerfile
new file mode 100644
index 0000000..1e9379b
--- /dev/null
+++ b/dockerfiles/unitopia_dev.dockerfile
@@ -0,0 +1,55 @@
+# Dockerfile for webmud3 (dev version!!!)
+
+# docker build -f dockerfiles/unitopia_dev.dockerfile -t myonara/webmud3:develop --progress-plain .
+
+# Stage 1: Build the application in a monorepo structure
+FROM node:22.20.0-alpine AS builder
+
+# Set the working directory
+WORKDIR /app
+
+# To leverage Docker layer caching, we first copy over all package.json files
+# from the monorepo. This ensures that 'npm ci' has the full context of all
+# workspaces and their dependencies.
+COPY package.json package-lock.json ./
+COPY shared/package.json shared/
+COPY backend/package.json backend/
+COPY frontend/package.json frontend/
+
+# Install all dependencies for the entire monorepo
+RUN npm ci
+
+# Copy the rest of the source code
+COPY . .
+
+# Run the production build. This should build all workspaces (frontend, backend, shared).
+# The --if-present flag prevents errors if the script doesn't exist.
+RUN npm run build --if-present
+
+# This is the implementation of the step from your Azure workflow.
+# It's a workaround to make the 'shared' package available to the backend at runtime
+# without publishing it to a package registry.
+RUN mkdir -p backend/dist/node_modules/@webmud3 && \
+    cp -r shared/dist backend/dist/node_modules/@webmud3/shared && \
+    cp shared/package.json backend/dist/node_modules/@webmud3/shared/
+# This step creates a production-only node_modules folder directly within the
+# backend's distribution folder, mirroring the Azure deployment process.
+RUN cd backend/dist && npm install --omit=dev
+
+# Stage 2: Create the final production image
+FROM node:22.20.0-alpine
+
+WORKDIR /app
+
+# Set default environment variables based on the README
+ENV NODE_ENV=production HOST=0.0.0.0 PORT=5000 TELNET_HOST=127.0.0.1 TELNET_PORT=23 TELNET_TLS=false SOCKET_ROOT=/socket.io SOCKET_TIMEOUT=900000
+
+# Copy the built backend application, including its production node_modules,
+# from the builder stage.
+COPY --from=builder /app/backend/dist .
+
+EXPOSE 5000
+
+# The command to start the backend server.
+# Note: "main.js" is a common convention, but you may need to adjust this based on your project's entrypoint.
+CMD [ "node", "main.js" ]
diff --git a/dockerfiles/wm3_local_dev.yml b/dockerfiles/wm3_local_dev.yml
index bbb2fe6..9ca525c 100644
--- a/dockerfiles/wm3_local_dev.yml
+++ b/dockerfiles/wm3_local_dev.yml
@@ -3,14 +3,17 @@ services:
   web:
     image: myonara/webmud3:develop
     environment: 
+      ENVIRONMENT: 'development'
       NODE_ENV: 'development'
+      NAME: 'webmud3myonara'
       HOST: '0.0.0.0'
       PORT: 5000
-      TELNET_HOST: 'localhost'
-      TELNET_PORT: 3333
-      TELNET_TLS: 'false'
-      SOCKET_ROOT: '/mysocket.io'
+      TELNET_HOST: 'unitopia.de'
+      TELNET_PORT: 9988
+      TELNET_TLS: 'true'
+      SOCKET_ROOT: '/mysocket-local.io'
       SOCKET_TIMEOUT: 900000
+      LOG_LEVEL: 'debug'
     deploy:
       replicas: 1
       resources:
@@ -20,14 +23,14 @@ services:
       labels:
         com.docker.lb.hosts: www.unitopia.de
         com.docker.lb.network: webnet
-        com.docker.lb.port: 2018
+        com.docker.lb.port: 5000
       restart_policy:
         condition: on-failure
         delay: 20s
         max_attempts: 2 
         window: 3600s
     ports:
-      - "2018:5000"
+      - "5000:5000"
     networks:
       - webnet
 networks:

From 8a0c2b69fc84cf2cd0efdadafea1d881e51cf131 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <oliver@weimar-drese.de>
Date: Tue, 17 Feb 2026 04:07:01 +0100
Subject: [PATCH 28/30] some visual bug fixes

---
 frontend/src/app/app.component.scss                 |  4 +++-
 .../src/app/features/menu/menu-bar.component.scss   |  4 ++++
 .../mud-config/mud-client-shell.component.ts        | 13 +++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index 4491835..0748fe8 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -3,6 +3,8 @@
   flex-direction: column;
 }
 
-app-mud-client {
+app-mud-client-shell,
+app-mud-selector {
   flex: 1 1 0;
+  min-height: 0;
 }
diff --git a/frontend/src/app/features/menu/menu-bar.component.scss b/frontend/src/app/features/menu/menu-bar.component.scss
index 28633d0..d9e165a 100644
--- a/frontend/src/app/features/menu/menu-bar.component.scss
+++ b/frontend/src/app/features/menu/menu-bar.component.scss
@@ -9,6 +9,10 @@
   font-family: sans-serif;
   font-size: 13px;
   user-select: none;
+}
+
+:host {
+  position: relative;
   z-index: 9999;
 }
 
diff --git a/frontend/src/app/features/mud-config/mud-client-shell.component.ts b/frontend/src/app/features/mud-config/mud-client-shell.component.ts
index ba7edba..dd6000d 100644
--- a/frontend/src/app/features/mud-config/mud-client-shell.component.ts
+++ b/frontend/src/app/features/mud-config/mud-client-shell.component.ts
@@ -19,6 +19,19 @@ import { MudConfigService } from './mud-config.service';
     <app-char-statusbar></app-char-statusbar>
     <app-window-container></app-window-container>
   `,
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      min-height: 0;
+    }
+
+    app-mud-client {
+      flex: 1 1 0;
+      min-height: 0;
+    }
+  `],
 })
 export class MudClientShellComponent implements OnInit {
   private readonly route = inject(ActivatedRoute);

From 89f3f963fb62ed6aa74f36c677f402f6ea4380a2 Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <oliver@weimar-drese.de>
Date: Tue, 17 Feb 2026 17:59:46 +0100
Subject: [PATCH 29/30] clipboard copy and lo clipboard logging

---
 .../mud-client/mud-client.component.ts        | 45 ++++++++++++++++---
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
index d8c0bae..d9f95cf 100644
--- a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
+++ b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
@@ -416,9 +416,12 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
    * Special handling for Ctrl+V: intercepts clipboard content and injects it properly.
    */
   private handleInput(data: string) {
-    console.log('[PASTE-DEBUG] Edit mode:', this.state.isEditMode);
-    console.log('[PASTE-DEBUG] Data received:', JSON.stringify(data));
-    console.log('[PASTE-DEBUG] Data length:', data.length);
+    // console.log('[PASTE-DEBUG] Edit mode:', this.state.isEditMode);
+    // console.log('[PASTE-DEBUG] Show Echo:', this.state.showEcho);  
+    // if (this.state.showEcho) {
+    //   console.log('[PASTE-DEBUG] Data received:', JSON.stringify(data));
+    //   console.log('[PASTE-DEBUG] Data length:', data.length);
+    // }
 
     // Special handling for Ctrl+V (paste): xterm converts paste to \u0016 in onData()
     // We need to read the clipboard and inject the actual content
@@ -429,6 +432,14 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
       this.handlePasteFromClipboard();
       return;
     }
+    if (data === '\u0003') {
+      console.log(
+        '[MudClient] Ctrl+C detected, writing selection to clipboard...',
+      );
+      this.handleCopyToClipboard();
+      return;
+    }
+
 
     // Unlock audio context on first user interaction (browser autoplay policy)
     if (!this.audioUnlocked) {
@@ -743,10 +754,11 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
     try {
       const pastedText = await navigator.clipboard.readText();
 
-      console.log('[MudClient] Clipboard content read:', {
-        length: pastedText.length,
-        preview: pastedText.substring(0, 50),
-      });
+      // if (this.state.showEcho) // don't log passwords and stuff
+      //   console.log('[MudClient] Clipboard content read:', {
+      //     length: pastedText.length,
+      //     preview: pastedText.substring(0, 50),
+      //   });
 
       if (pastedText) {
         if (!this.state.isEditMode) {
@@ -761,4 +773,23 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
       console.error('[MudClient] Failed to read clipboard:', err);
     }
   }
+
+  /**
+   * Handles copy by reading the terminal selection when Ctrl+C is detected.
+   * Uses the Clipboard API to write the selected text to the clipboard.
+   */
+  private async handleCopyToClipboard(): Promise<void> {
+    const selection = this.terminal.getSelection();
+    if (selection) {
+      try {
+        await navigator.clipboard.writeText(selection);
+        // console.log('[MudClient] Copied selection to clipboard:', {
+        //   length: selection.length,
+        //   preview: selection.substring(0, 50),
+        // });
+      } catch (err) {
+        console.error('[MudClient] Failed to copy to clipboard:', err);
+      }
+    }
+  }
 }

From 2b854bf9c9304541a32efe2e6dd0b28eb48035bb Mon Sep 17 00:00:00 2001
From: Oliver Weimar-Drese <oliver@weimar-drese.de>
Date: Tue, 17 Feb 2026 18:16:44 +0100
Subject: [PATCH 30/30] fixed clipboard copy

---
 .../mud-client/mud-client.component.ts        | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
index d9f95cf..e2cbb55 100644
--- a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
+++ b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts
@@ -202,6 +202,26 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
     this.terminal.loadAddon(this.terminalAttachAddon);
     this.terminal.focus();
 
+    // Attach custom key event handler to intercept Ctrl+C for copy
+    this.terminal.attachCustomKeyEventHandler((event: KeyboardEvent) => {
+      // Allow copy with Ctrl+C / Cmd+C only if text is selected
+      if (
+        event.type === 'keydown' &&
+        (event.ctrlKey || event.metaKey) &&
+        event.code === 'KeyC'
+      ) {
+        const selection = this.terminal.getSelection();
+        if (selection) {
+          // Returning false prevents xterm from processing it as data (sending \x03)
+          // and allows the browser's native copy behavior to take over if possible,
+          // or we handle it explicitly.
+          this.handleCopyToClipboard();
+          return false;
+        }
+      }
+      return true;
+    });
+
     // Cache helper textarea created by xterm (used to mirror prompt + input)
     this.helperTextarea =
       (this.terminalRef.nativeElement.querySelector(
@@ -432,13 +452,6 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
       this.handlePasteFromClipboard();
       return;
     }
-    if (data === '\u0003') {
-      console.log(
-        '[MudClient] Ctrl+C detected, writing selection to clipboard...',
-      );
-      this.handleCopyToClipboard();
-      return;
-    }
 
 
     // Unlock audio context on first user interaction (browser autoplay policy)