http-request-manager 18.10.0 → 18.10.2

package/fesm2022/http-request-manager.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, APP_ID, Inject, InjectionToken, Injector, Optional, signal, computed, effect, EventEmitter, Input, Output, ViewEncapsulation, Component, NgModule, ViewChild } from '@angular/core';
+import { inject, Injectable, APP_ID, Inject, InjectionToken, isDevMode, Injector, Optional, signal, computed, effect, EventEmitter, Input, Output, ViewEncapsulation, Component, NgModule, ViewChild } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { map, catchError, filter, tap, finalize, takeWhile, retry, startWith, mergeMap, takeUntil, withLatestFrom, switchMap, delay, concatMap, take, scan, distinctUntilChanged } from 'rxjs/operators';
 import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
@@ -803,6 +803,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * LoggerService for http-request-manager library
+ *
+ * Automatically enables debug logging in development mode,
+ * disables it in production mode.
+ *
+ * Usage:
+ * ```typescript
+ * constructor(private logger: LoggerService) {}
+ *
+ * this.logger.debug('WebSocket', 'Connected successfully');
+ * this.logger.info('HTTP', 'Request completed', { status: 200 });
+ * this.logger.warn('State', 'Cache miss for key', { key: 'user' });
+ * this.logger.error('Database', 'Connection failed', error);
+ * ```
+ */
+class LoggerService {
+    constructor() {
+        // Automatically detect development vs production mode
+        this.debugMode = isDevMode();
+    }
+    /**
+     * Debug level logging - only shown in development mode
+     * Use for: Detailed diagnostic information, state changes, connection events
+     */
+    debug(context, message, data) {
+        if (this.debugMode) {
+            console.log(`[HTTP-MGR DEBUG] ${context}: ${message}`, data ?? '');
+        }
+    }
+    /**
+     * Info level logging - only shown in development mode
+     * Use for: Important operational messages, successful operations
+     */
+    info(context, message, data) {
+        if (this.debugMode) {
+            console.info(`[HTTP-MGR INFO] ${context}: ${message}`, data ?? '');
+        }
+    }
+    /**
+     * Warning level logging - always shown
+     * Use for: Potential issues, deprecated usage, recoverable errors
+     */
+    warn(context, message, data) {
+        console.warn(`[HTTP-MGR WARN] ${context}: ${message}`, data ?? '');
+    }
+    /**
+     * Error level logging - always shown
+     * Use for: Actual errors, failures, exceptions
+     */
+    error(context, message, data) {
+        console.error(`[HTTP-MGR ERROR] ${context}: ${message}`, data ?? '');
+    }
+    /**
+     * Check if debug mode is enabled (development mode)
+     */
+    isDebugEnabled() {
+        return this.debugMode;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoggerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoggerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Stateful processor for managing streaming data and events
  */
@@ -1202,8 +1271,48 @@ var CommunicationType;
     CommunicationType[CommunicationType["OTHER"] = 2] = "OTHER";
 })(CommunicationType || (CommunicationType = {}));
 
+var ChannelType$1;
+(function (ChannelType) {
+    ChannelType["STATE"] = "SYS";
+    ChannelType["PUBLIC"] = "PUB";
+    ChannelType["NOTIFICATION"] = "MES";
+    ChannelType["CUSTOM"] = ""; // No prefix (raw channel name)
+})(ChannelType$1 || (ChannelType$1 = {}));
+
+class StateMessage {
+    constructor(sessionId = { id: '' }, content = {}) {
+        this.sessionId = sessionId;
+        this.content = content;
+    }
+    static adapt(item) {
+        return new StateMessage(item?.sessionId, item?.content);
+    }
+}
+
+class PublicMessage {
+    constructor(sessionId = { id: '' }, content = { message: '' }) {
+        this.sessionId = sessionId;
+        this.content = content;
+    }
+    static adapt(item) {
+        return new PublicMessage(item?.sessionId, item?.content);
+    }
+}
+
+class NotificationMessage {
+    constructor(sessionId = { id: '' }, message = '', additionalProperties = {}) {
+        this.sessionId = sessionId;
+        this.message = message;
+        Object.assign(this, additionalProperties);
+    }
+    static adapt(item) {
+        return new NotificationMessage(item?.sessionId, item?.message, item);
+    }
+}
+
 class WebsocketService {
     constructor() {
+        this.logger = new LoggerService();
         this.socket = null;
         this.messages = new BehaviorSubject(null);
         this.messages$ = this.messages.asObservable();
@@ -1241,24 +1350,28 @@ class WebsocketService {
             current.add(channelName);
             this.subscribedChannels.next(current);
             this.isSubscribed = true; // Keep for backward compatibility
-            console.log(`[CLIENT] Sent initial subscription to: ${channelName}`);
+            this.logger.debug('WebSocket', `Sent initial subscription to: ${channelName}`);
         }
         else {
-            console.warn(`[CLIENT] Subscription prevented. Open: ${this.socket?.readyState === WebSocket.OPEN}, Already subscribed to ${channelName}: ${alreadySubscribed}`);
+            this.logger.warn('WebSocket', `Subscription prevented`, {
+                open: this.socket?.readyState === WebSocket.OPEN,
+                channel: channelName,
+                alreadySubscribed
+            });
         }
     }
     connect(options, jwtToken) {
         if (this.socket) {
             if (this.socket.readyState === WebSocket.OPEN) {
-                console.log('WebSocket connection is already OPEN.');
+                this.logger.debug('WebSocket', 'Connection is already OPEN');
                 return;
             }
             if (this.socket.readyState === WebSocket.CONNECTING) {
-                console.log('WebSocket is already CONNECTING. Waiting for handshake.');
+                this.logger.debug('WebSocket', 'Already CONNECTING. Waiting for handshake');
                 return;
             }
             if (this.socket.readyState === WebSocket.CLOSING || this.socket.readyState === WebSocket.CLOSED) {
-                console.log(`Cleaning up stale socket (State: ${this.socket.readyState}).`);
+                this.logger.debug('WebSocket', `Cleaning up stale socket`, { state: this.socket.readyState });
                 this.socket.close();
                 this.socket = null;
             }
@@ -1270,7 +1383,7 @@ class WebsocketService {
         const URL = (jwtToken) ? `${options.wsServer}?token=${jwtToken}&sessionId=${sessionId}` : `${options.wsServer}?sessionId=${sessionId}`;
         this.socket = new WebSocket(URL);
         this.socket.onopen = () => {
-            console.log(`📡 Connected to WebSocket`);
+            this.logger.info('WebSocket', '📡 Connected to WebSocket');
             this.connectionStatus.next(true);
             this.lastOptions = options;
             // Subscribe to primary channel
@@ -1308,7 +1421,7 @@ class WebsocketService {
             try {
                 const data = JSON.parse(event.data);
                 if (data.error && data.error === 'JWT_INVALID') {
-                    console.error('JWT validation failed. Authentication error!');
+                    this.logger.error('WebSocket', 'JWT validation failed. Authentication error!');
                     this.messages.next(data);
                     this.connectionStatus.next(false);
                     this.socket?.close();
@@ -1317,16 +1430,16 @@ class WebsocketService {
                 this.messages.next(data);
             }
             catch (error) {
-                console.error('Error parsing WebSocket message:', event.data);
+                this.logger.error('WebSocket', 'Error parsing WebSocket message', { data: event.data });
             }
         };
         this.socket.onclose = () => {
-            console.log('WebSocket connection closed');
+            this.logger.debug('WebSocket', 'Connection closed');
             this.connectionStatus.next(false);
             this.socket = null;
         };
         this.socket.onerror = (error) => {
-            console.error('WebSocket error:', error);
+            this.logger.error('WebSocket', 'WebSocket error', error);
             this.connectionStatus.next(false);
         };
     }
@@ -1349,14 +1462,14 @@ class WebsocketService {
                 const current = new Set(this.subscribedChannels.value);
                 current.add(channelName);
                 this.subscribedChannels.next(current);
-                console.log(`📝 Subscribed to channel: ${channelName}`);
+                this.logger.debug('WebSocket', `📝 Subscribed to channel`, { channel: channelName });
             }
             catch (error) {
-                console.error(`❌ Failed to subscribe to channel "${channelName}":`, error);
+                this.logger.error('WebSocket', `Failed to subscribe to channel`, { channel: channelName, error });
             }
         }
         else {
-            console.warn(`Cannot subscribe to channel "${channelName}": WebSocket not yet open.`);
+            this.logger.warn('WebSocket', `Cannot subscribe to channel - WebSocket not open`, { channel: channelName });
         }
     }
     subscribeToChannels(channelNames) {
@@ -1364,7 +1477,7 @@ class WebsocketService {
             channelNames.forEach(channel => this.subscribeToChannel(channel));
         }
         else {
-            console.warn('Cannot subscribe: WebSocket not yet open.');
+            this.logger.warn('WebSocket', 'Cannot subscribe to channels - WebSocket not open');
         }
     }
     unsubscribeFromChannel(channel) {
@@ -1374,10 +1487,10 @@ class WebsocketService {
             const current = new Set(this.subscribedChannels.value);
             current.delete(channel);
             this.subscribedChannels.next(current);
-            console.log(`💬 Unsubscribed from channel: ${channel}`);
+            this.logger.debug('WebSocket', `💬 Unsubscribed from channel`, { channel });
         }
         else {
-            console.error('WebSocket is not open. Cannot unsubscribe from channel.');
+            this.logger.error('WebSocket', 'Cannot unsubscribe - WebSocket not open');
         }
     }
     unsubscribeToChannel(channel) {
@@ -1390,19 +1503,19 @@ class WebsocketService {
     sendBroadcast(content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'broadcast', content }));
-            console.log(`📢 Send broadcast: ${content}`);
+            this.logger.debug('WebSocket', `📢 Send broadcast`, { content });
         }
         else {
-            console.error('WebSocket is not open. Cannot send broadcast.');
+            this.logger.error('WebSocket', 'Cannot send broadcast - WebSocket not open');
         }
     }
     sendMessageInChannel(channel, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'stateMangerMessage', subscribedChannel: channel, content }));
-            console.log(`💬 Send message:`, content);
+            this.logger.debug('WebSocket', `💬 Send message`, { channel, content });
         }
         else {
-            console.error('WebSocket is not open. Cannot send message.');
+            this.logger.error('WebSocket', 'Cannot send message - WebSocket not open');
         }
     }
     /**
@@ -1412,10 +1525,10 @@ class WebsocketService {
     sendChannelMessage(channel, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'message', subscribedChannel: channel, content }));
-            console.log(`💬 Send channel message to [${channel}]:`, content);
+            this.logger.debug('WebSocket', `💬 Send channel message`, { channel, content });
         }
         else {
-            console.error('WebSocket is not open. Cannot send channel message.');
+            this.logger.error('WebSocket', 'Cannot send channel message - WebSocket not open');
         }
     }
     /**
@@ -1431,10 +1544,10 @@ class WebsocketService {
                     channels: channels,
                     data: content
                 }));
-                console.log(`💬 Send channel message to channels [${channels.join(', ')}]:`, content);
+                this.logger.debug('WebSocket', `💬 Send channel message to channels`, { channels, content });
             }
             catch (error) {
-                console.error('❌ Failed to send channelMessage batch:', error);
+                this.logger.error('WebSocket', 'Failed to send channelMessage batch', error);
             }
             // Legacy fallback - send individual messages to each channel
             try {
@@ -1443,56 +1556,56 @@ class WebsocketService {
                 });
             }
             catch (err) {
-                console.warn('⚠️ Legacy fallback failed sending individual messages', err);
+                this.logger.warn('WebSocket', 'Legacy fallback failed sending individual messages', err);
             }
         }
         else {
-            console.error('WebSocket is not open. Cannot send message to channels.');
+            this.logger.error('WebSocket', 'Cannot send message to channels - WebSocket not open');
         }
     }
     sendMessageToUser(user, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'userMessage', subscribedChannel: user, content }));
-            console.log(`💬 Send message:`, content);
+            this.logger.debug('WebSocket', `💬 Send message to user`, { user, content });
         }
         else {
-            console.error('WebSocket is not open. Cannot send message.');
+            this.logger.error('WebSocket', 'Cannot send message to user - WebSocket not open');
         }
     }
     getAllChannels() {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'getChannels' }));
-            console.log('🗂️ List of all channels');
+            this.logger.debug('WebSocket', '🗂️ Requested list of all channels');
         }
         else {
-            console.error('WebSocket is not open. Cannot request channels.');
+            this.logger.error('WebSocket', 'Cannot request channels - WebSocket not open');
         }
     }
     createChannel(channel) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'createChannel', content: channel }));
-            console.log('🗂️ Created channel:', channel);
+            this.logger.debug('WebSocket', '🗂️ Created channel', { channel });
         }
         else {
-            console.error('WebSocket is not open. Cannot request channels.');
+            this.logger.error('WebSocket', 'Cannot create channel - WebSocket not open');
         }
     }
     deleteChannel(channel) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'deleteChannel', content: channel }));
-            console.log('🗂️ Delete channel:', channel);
+            this.logger.debug('WebSocket', '🗂️ Delete channel', { channel });
         }
         else {
-            console.error('WebSocket is not open. Cannot request channels.');
+            this.logger.error('WebSocket', 'Cannot delete channel - WebSocket not open');
         }
     }
     getUsersInChannel(channel) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'getUsers', subscribedChannel: channel }));
-            console.log(`👥 List all users in channel: ${channel}`);
+            this.logger.debug('WebSocket', `👥 Requested users in channel`, { channel });
         }
         else {
-            console.error('WebSocket is not open. Cannot request users.');
+            this.logger.error('WebSocket', 'Cannot request users - WebSocket not open');
         }
     }
     // =====================
@@ -1516,28 +1629,21 @@ class WebsocketService {
     getNotificationChannels() {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'getNotificationChannels' }));
-            console.log('📢 Requested notification channels list');
+            this.logger.debug('WebSocket', '📢 Requested notification channels list');
         }
         else {
-            console.error('WebSocket is not open. Cannot request notification channels.');
+            this.logger.error('WebSocket', 'Cannot request notification channels - WebSocket not open');
         }
     }
-    /**
-     * Get today's notification channels from database
-     * Returns unique channels that have notifications posted today
-     */
     getTodaysNotificationChannels() {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'getTodaysNotificationChannels' }));
-            console.log('📢 Requested today\'s notification channels from DB');
+            this.logger.debug('WebSocket', "📢 Requested today's notification channels from DB");
         }
         else {
-            console.error('WebSocket is not open. Cannot request today\'s notification channels.');
+            this.logger.error('WebSocket', "Cannot request today's notification channels - WebSocket not open");
         }
     }
-    /**
-     * Subscribe to a notification channel with optional date filters
-     */
     subscribeToNotificationChannel(channel, options, user) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({
@@ -1548,30 +1654,24 @@ class WebsocketService {
                     ...user
                 }
             }));
-            console.log(`📢 Subscribed to notification channel: ${channel}`, options);
+            this.logger.debug('WebSocket', `📢 Subscribed to notification channel`, { channel, options });
         }
         else {
-            console.error('WebSocket is not open. Cannot subscribe to notification channel.');
+            this.logger.error('WebSocket', 'Cannot subscribe to notification channel - WebSocket not open');
         }
     }
-    /**
-     * Unsubscribe from a notification channel
-     */
     unsubscribeFromNotificationChannel(channel) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({
                 type: 'unsubscribeNotifications',
                 subscribedChannel: channel
             }));
-            console.log(`📢 Unsubscribed from notification channel: ${channel}`);
+            this.logger.debug('WebSocket', `📢 Unsubscribed from notification channel`, { channel });
         }
         else {
-            console.error('WebSocket is not open. Cannot unsubscribe from notification channel.');
+            this.logger.error('WebSocket', 'Cannot unsubscribe from notification channel - WebSocket not open');
         }
     }
-    /**
-     * Send a notification to a channel
-     */
     sendNotification(channel, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({
@@ -1579,10 +1679,10 @@ class WebsocketService {
                 subscribedChannel: channel,
                 content
             }));
-            console.log(`📢 Sent notification to channel: ${channel}`, content);
+            this.logger.debug('WebSocket', `📢 Sent notification to channel`, { channel, content });
         }
         else {
-            console.error('WebSocket is not open. Cannot send notification.');
+            this.logger.error('WebSocket', 'Cannot send notification - WebSocket not open');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebsocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -2193,6 +2293,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+/**
+ * WebSocketMessageService - Unified service for sending WebSocket messages
+ *
+ * Provides type-safe methods for sending messages with automatic prefix management.
+ * Supports three message types: State (SYS-), Public (PUB-), and Notification (MES-).
+ *
+ * Features:
+ * - Type-safe message models
+ * - Automatic prefix management
+ * - Runtime validation
+ * - Boolean return values for success/failure
+ * - Silent failure with console errors
+ */
+class WebSocketMessageService {
+    constructor() {
+        this.wsManagerService = inject(WebSocketManagerService);
+        this.logger = new LoggerService();
+    }
+    /**
+     * Send state message (SYS- prefix)
+     * Used for CRUD operations and state synchronization
+     *
+     * @param path - Path array (e.g., ['ai', 'tests'])
+     * @param payload - StateMessage with sessionId and content
+     * @returns true if sent successfully, false otherwise
+     */
+    sendStateMessage(path, payload) {
+        // Validate payload
+        if (!payload?.sessionId?.id) {
+            this.logger.error('WebSocketMessageService', 'StateMessage must have sessionId.id');
+            return false;
+        }
+        if (!WebSocketManagerService.isConnected()) {
+            this.logger.error('WebSocketMessageService', 'Cannot send state message - not connected');
+            return false;
+        }
+        const channel = `${ChannelType$1.STATE}-${path.join('/')}`;
+        this.wsManagerService.sendMessageInChannel(channel, payload);
+        return true;
+    }
+    /**
+     * Send public message (PUB- prefix)
+     * Used for chat, broadcast, general messaging
+     *
+     * @param channel - Channel name (without prefix)
+     * @param payload - PublicMessage with sessionId and content.message
+     * @returns true if sent successfully, false otherwise
+     */
+    sendPublicMessage(channel, payload) {
+        // Validate payload
+        if (!payload?.sessionId?.id) {
+            this.logger.error('WebSocketMessageService', 'PublicMessage must have sessionId.id');
+            return false;
+        }
+        if (!payload?.content?.message) {
+            this.logger.error('WebSocketMessageService', 'PublicMessage must have content.message');
+            return false;
+        }
+        if (!WebSocketManagerService.isConnected()) {
+            this.logger.error('WebSocketMessageService', 'Cannot send public message - not connected');
+            return false;
+        }
+        const fullChannel = `${ChannelType$1.PUBLIC}-${channel}`;
+        this.wsManagerService.sendMessageInChannel(fullChannel, payload);
+        return true;
+    }
+    /**
+     * Send notification (MES- prefix)
+     * Used for persistent notifications with history
+     *
+     * @param channel - Channel name (without prefix)
+     * @param payload - NotificationMessage with sessionId and message
+     * @returns true if sent successfully, false otherwise
+     */
+    sendNotification(channel, payload) {
+        // Validate payload
+        if (!payload?.sessionId?.id) {
+            this.logger.error('WebSocketMessageService', 'NotificationMessage must have sessionId.id');
+            return false;
+        }
+        if (!payload?.message) {
+            this.logger.error('WebSocketMessageService', 'NotificationMessage must have message');
+            return false;
+        }
+        if (!WebSocketManagerService.isConnected()) {
+            this.logger.error('WebSocketMessageService', 'Cannot send notification - not connected');
+            return false;
+        }
+        const fullChannel = `${ChannelType$1.NOTIFICATION}-${channel}`;
+        this.wsManagerService.sendMessageInChannel(fullChannel, payload);
+        return true;
+    }
+    /**
+     * Send to custom channel (no prefix)
+     * User provides full channel name
+     *
+     * @param channel - Full channel name
+     * @param payload - Any message payload
+     * @returns true if sent successfully, false otherwise
+     */
+    sendToCustomChannel(channel, payload) {
+        if (!WebSocketManagerService.isConnected()) {
+            this.logger.error('WebSocketMessageService', 'Cannot send custom message - not connected');
+            return false;
+        }
+        this.wsManagerService.sendMessageInChannel(channel, payload);
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebSocketMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebSocketMessageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebSocketMessageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// ChannelType is already exported from request-manager-state-service to avoid conflicts
+
 class RequestService extends WebsocketService {
     constructor() {
         super(...arguments);
@@ -4844,6 +5062,7 @@ class HTTPManagerStateService extends ComponentStore {
         this.dbManagerService = inject(DatabaseManagerService);
         this.localStorageManagerService = inject(LocalStorageManagerService);
         this.utils = inject(UtilsService);
+        this.logger = inject(LoggerService);
         this.error$ = this.httpManagerService.error$;
         this.isPending$ = this.httpManagerService.isPending$.pipe(delay(1));
         // PAGINATION
@@ -4926,7 +5145,7 @@ class HTTPManagerStateService extends ComponentStore {
             this.messages.next([...currentMessages, message]);
             console.log('Received:', message);
             // Debug: Log all message types
-            console.log('📨 Message type:', message.type);
+            this.logger.debug('StateStore', '📨 Message type', { type: message.type });
             if (message.error === 'JWT_INVALID') {
                 this.shouldRetry = false;
                 this.httpManagerService.disconnect();
@@ -4939,9 +5158,9 @@ class HTTPManagerStateService extends ComponentStore {
             }
             switch (message.type) {
                 case 'channelsList':
-                    console.log('💬 Channels:', message.channels);
-                    console.log('🔍 channelsList received, checking connection status...');
-                    console.log('🔍 WebSocket connected:', WebSocketManagerService.isConnected());
+                    this.logger.debug('StateStore', '💬 Channels', { channels: message.channels });
+                    this.logger.debug('StateStore', '🔍 channelsList received, checking connection status...');
+                    this.logger.debug('StateStore', '🔍 WebSocket connected', { connected: WebSocketManagerService.isConnected() });
                     // Extract channel names from metadata objects (new format) or use strings directly (old format)
                     const channelNames = message.channels.map((c) => {
                         // Handle new format: {name: string, canSubscribe: boolean}
@@ -4953,35 +5172,35 @@ class HTTPManagerStateService extends ComponentStore {
                     });
                     // Auto-subscribe to all channels from the list
                     if (channelNames && channelNames.length > 0) {
-                        console.log('📥 Auto-subscribing to', channelNames.length, 'channel(s)');
+                        this.logger.debug('StateStore', '📥 Auto-subscribing to channels', { count: channelNames.length });
                         this.subscribeToChannels(channelNames);
                     }
                     else {
-                        console.log('⚠️ No channels to subscribe to');
+                        this.logger.warn('StateStore', '⚠️ No channels to subscribe to');
                     }
                     this.channels.next(channelNames);
                     break;
                 case 'success':
                     // Success messages - check for subscription confirmation
-                    console.log(`✅ Success: ${message.message}`);
+                    this.logger.info('StateStore', `✅ Success`, { message: message.message });
                     if (message.message?.includes('Subscribed to channel:')) {
                         // Extract channel name from message: "Subscribed to channel: PUB-chat"
                         const channelName = message.message.split('Subscribed to channel:')[1]?.trim();
-                        console.log(`✅ Subscription confirmed for channel: ${channelName}`);
+                        this.logger.debug('StateStore', `✅ Subscription confirmed for channel`, { channel: channelName });
                         WebSocketManagerService.addSubscribedChannel(channelName);
                     }
                     break;
                 case 'subscribed':
-                    console.log(`✅ Subscription confirmed: ${message.channel}`);
+                    this.logger.debug('StateStore', `✅ Subscription confirmed`, { channel: message.channel });
                     // Track as subscribed now that server confirmed
                     WebSocketManagerService.addSubscribedChannel(message.channel);
                     break;
                 case 'unsubscribed':
-                    console.log(`🔓 Unsubscription confirmed: ${message.channel}`);
+                    this.logger.debug('StateStore', `🔓 Unsubscription confirmed`, { channel: message.channel });
                     break;
                 case 'info':
                     // Already subscribed or other info messages
-                    console.log(`ℹ️ Info: ${message.message}`);
+                    this.logger.info('StateStore', `ℹ️ Info`, { message: message.message });
                     // If it's an "Already subscribed" message, treat it as subscription confirmation
                     if (message.message?.includes('Already subscribed to channel:')) {
                         // Extract channel name from message: "Already subscribed to channel: PUB-chat"
@@ -5470,7 +5689,7 @@ class HTTPManagerStateService extends ComponentStore {
             }
         }
         catch (error) {
-            console.error('Error initializing HTTPManagerStateService:', error);
+            this.logger.error('HTTPManagerStateService', 'Error initializing', error);
             // Initialize with safe defaults
             this.databaseOptions = undefined;
             this.maxRetries = 3;
@@ -5510,7 +5729,7 @@ class HTTPManagerStateService extends ComponentStore {
         return this.stripChannelPrefix(channel);
     }
     setApiRequestOptions(apiOptions, dataType, database) {
-        console.log('🔧 [STATE STORE] setApiRequestOptions called:', {
+        this.logger.debug('StateStore', '🔧 setApiRequestOptions called', {
             hasWs: !!apiOptions?.ws,
             wsId: apiOptions?.ws?.id,
             wsServer: apiOptions?.ws?.wsServer,
@@ -5527,21 +5746,21 @@ class HTTPManagerStateService extends ComponentStore {
             // Auto-prefix channel ID for private state manager channels
             // This ensures state manager channels are separate from user-defined channels
             this.apiOptions.ws.id = this.prefixChannel(this.apiOptions.ws.id, ChannelType.STATE);
-            console.log(`🔒 Private state channel configured: ${this.apiOptions.ws.id}`);
+            this.logger.debug('StateStore', `🔒 Private state channel configured`, { channelId: this.apiOptions.ws.id });
             // Store our own sessionId for filtering incoming messages
             this.ownSessionId = sessionStorage.getItem('WSID') || null;
-            console.log(`🆔 Stored own sessionId for message filtering: ${this.ownSessionId}`);
-            console.log(`🔍 [STATE STORE] WebSocket configuration:`, {
+            this.logger.debug('StateStore', `🆔 Stored own sessionId for message filtering`, { sessionId: this.ownSessionId });
+            this.logger.debug('StateStore', `🔍 WebSocket configuration`, {
                 channelId: this.apiOptions.ws.id,
                 wsServer: this.apiOptions.ws.wsServer,
                 sessionId: this.ownSessionId,
                 path: this.apiOptions.path
             });
             // Initialize WebSocket connection if not already connected
-            console.log('🔌 [STATE STORE] Checking WebSocket connection status...');
-            console.log('🔌 [STATE STORE] Is connected?', WebSocketManagerService.isConnected());
+            this.logger.debug('StateStore', '🔌 Checking WebSocket connection status...');
+            this.logger.debug('StateStore', '🔌 Is connected?', { connected: WebSocketManagerService.isConnected() });
             if (!WebSocketManagerService.isConnected()) {
-                console.log('🔌 [STATE STORE] WebSocket not connected, will initialize via effect');
+                this.logger.debug('StateStore', '🔌 WebSocket not connected, will initialize via effect');
                 // initWS is an effect that triggers when setApiRequestOptions is called with ws config
                 // The effect is already triggered by calling setApiRequestOptions above
             }
@@ -5552,7 +5771,7 @@ class HTTPManagerStateService extends ComponentStore {
             }
             // Validate wsServer before attempting connection
             if (!this.apiOptions.ws.wsServer || this.apiOptions.ws.wsServer === '') {
-                console.error('WSOptions invalid: wsServer is missing or empty');
+                this.logger.error('StateStore', 'WSOptions invalid: wsServer is missing or empty');
                 return;
             }
             // Clean up previous subscription to prevent duplicate handlers
@@ -5563,23 +5782,23 @@ class HTTPManagerStateService extends ComponentStore {
             // Setup connection status monitoring (internal subscription to drive retry counters)
             this.connectionStatusSubscription = this.setupConnectionStatus().subscribe();
             // Make initial connection attempt
-            console.log('🔄 Initial WebSocket connection attempt...');
+            this.logger.debug('StateStore', '🔄 Initial WebSocket connection attempt...');
             this.httpManagerService.connect(this.apiOptions.ws, this.apiOptions.ws.jwtToken || '');
             // Initialize WS effect to handle messages
             this.initWS(this.apiOptions.ws);
         }
         else {
-            console.warn('WSOptions invalid Id: empty');
+            this.logger.warn('StateStore', 'WSOptions invalid Id: empty');
         }
     }
     // WebSocket
     setupConnectionStatus() {
         return this.httpManagerService.connectionStatus$.pipe(distinctUntilChanged(), tap(status => {
             if (status === true) {
-                console.log('🟢 WebSocket connection is open.');
+                this.logger.debug('StateStore', '🟢 WebSocket connection is open');
             }
             else {
-                console.log('🔴 WebSocket connection is closed.');
+                this.logger.debug('StateStore', '🔴 WebSocket connection is closed');
             }
         }), switchMap(status => {
             if (status === true) {
@@ -6467,6 +6686,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+class DisplayConfig {
+    constructor(type = 'snackbar', supportsMarkdown, stackable, queueBehavior, autoDismiss, width, height) {
+        this.type = type;
+        this.supportsMarkdown = supportsMarkdown;
+        this.stackable = stackable;
+        this.queueBehavior = queueBehavior;
+        this.autoDismiss = autoDismiss;
+        this.width = width;
+        this.height = height;
+    }
+    static adapt(item) {
+        return new DisplayConfig(item?.type, item?.supportsMarkdown, item?.stackable, item?.queueBehavior, item?.autoDismiss, item?.width, item?.height);
+    }
+}
+
+class DisplayRule {
+    constructor(id = '', name, match = () => false, display = DisplayConfig.adapt()) {
+        this.id = id;
+        this.name = name;
+        this.match = match;
+        this.display = display;
+    }
+    static adapt(item) {
+        return new DisplayRule(item?.id, item?.name, item?.match, item?.display ? DisplayConfig.adapt(item.display) : DisplayConfig.adapt());
+    }
+}
+
+class Slide {
+    constructor(title = '', message = '', image, icon) {
+        this.title = title;
+        this.message = message;
+        this.image = image;
+        this.icon = icon;
+    }
+    static adapt(item) {
+        return new Slide(item?.title, item?.message, item?.image, item?.icon);
+    }
+}
+
+class Action {
+    constructor(label = '', action = 'close', target, callback, primary) {
+        this.label = label;
+        this.action = action;
+        this.target = target;
+        this.callback = callback;
+        this.primary = primary;
+    }
+    static adapt(item) {
+        return new Action(item?.label, item?.action, item?.target, item?.callback, item?.primary);
+    }
+}
+
+class MessageContent {
+    constructor(displayConfig, title, message = '', slides, image, images, actions, messageType, icon, data) {
+        this.displayConfig = displayConfig;
+        this.title = title;
+        this.message = message;
+        this.slides = slides;
+        this.image = image;
+        this.images = images;
+        this.actions = actions;
+        this.messageType = messageType;
+        this.icon = icon;
+        this.data = data;
+    }
+    static adapt(item) {
+        return new MessageContent(item?.displayConfig ? DisplayConfig.adapt(item.displayConfig) : undefined, item?.title, item?.message, item?.slides ? item.slides.map((slideItem) => Slide.adapt(slideItem)) : [], item?.image, item?.images, item?.actions ? item.actions.map((actionItem) => Action.adapt(actionItem)) : [], item?.messageType, item?.icon, item?.data);
+    }
+}
+class CommunicationMessage {
+    constructor(type = '', messageId, channel, sessionId, timestamp, content = MessageContent.adapt()) {
+        this.type = type;
+        this.messageId = messageId;
+        this.channel = channel;
+        this.sessionId = sessionId;
+        this.timestamp = timestamp;
+        this.content = content;
+    }
+    static adapt(item) {
+        return new CommunicationMessage(item?.type, item?.messageId, item?.channel, item?.sessionId, item?.timestamp, item?.content ? MessageContent.adapt(item.content) : MessageContent.adapt());
+    }
+}
+
+const defaultDisplayRules = [
+    {
+        id: 'carousel',
+        name: 'Carousel',
+        match: (message) => message.content?.displayConfig?.type === 'carousel',
+        display: {
+            type: 'carousel',
+            supportsMarkdown: true,
+            stackable: false
+        }
+    },
+    {
+        id: 'dialog',
+        name: 'Dialog',
+        match: (message) => message.content?.displayConfig?.type === 'dialog',
+        display: {
+            type: 'dialog',
+            supportsMarkdown: true,
+            stackable: true
+        }
+    },
+    {
+        id: 'default',
+        name: 'Snackbar',
+        match: () => true,
+        display: {
+            type: 'snackbar',
+            supportsMarkdown: false,
+            stackable: true,
+            autoDismiss: 3000
+        }
+    }
+];
+
+class SnackbarStrategy {
+    constructor() {
+        this.name = 'snackbar';
+        this.toastService = inject(ToastMessageDisplayService);
+    }
+    canHandle(message) {
+        return true; // Always can handle (fallback strategy)
+    }
+    display(message, config) {
+        const messageText = this.extractMessage(message.content);
+        this.toastService.toastMessage({
+            message: messageText,
+            color: ToastColors.INFO,
+            icon: 'info',
+            action: 'DONE'
+        }, config.autoDismiss ?? 3000);
+    }
+    extractMessage(content) {
+        if (!content)
+            return '';
+        // Try nested content structure (backward compatibility)
+        if (content.content?.message) {
+            return content.content.message;
+        }
+        // Try direct message
+        if (content.message) {
+            return content.message;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarStrategy }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarStrategy, decorators: [{
+            type: Injectable
+        }] });
+
+class MessageDisplayRouterService {
+    constructor() {
+        this.snackbarStrategy = inject(SnackbarStrategy);
+        // All available strategies
+        this.strategies = [
+            this.snackbarStrategy
+            // DialogStrategy will be added in Phase 2
+            // CarouselStrategy will be added in Phase 3
+        ];
+        // Rules are evaluated in order - first match wins
+        this.rules = defaultDisplayRules;
+    }
+    display(message) {
+        console.log('📨 MessageDisplayRouterService: Processing message:', message);
+        // Find FIRST matching rule (order matters!)
+        const matchingRule = this.rules.find(rule => rule.match(message));
+        // Get the rule (will be 'default' if nothing else matches)
+        const rule = matchingRule || this.rules[this.rules.length - 1];
+        console.log(`🎯 MessageDisplayRouterService: Matched rule '${rule.id}' (${rule.name})`);
+        console.log(`   → Display type: ${rule.display.type}`);
+        // Get strategy for the display type
+        const strategy = this.strategies.find(s => s.name === rule.display.type);
+        if (!strategy) {
+            console.warn(`⚠️ MessageDisplayRouterService: No strategy found for type '${rule.display.type}', falling back to snackbar`);
+            // Fallback to snackbar if strategy not found
+            this.snackbarStrategy.display(message, rule.display);
+            return;
+        }
+        // Execute display
+        console.log(`🚀 MessageDisplayRouterService: Executing ${strategy.name} strategy`);
+        strategy.display(message, rule.display);
+    }
+    registerStrategies(strategies) {
+        strategies.forEach(strategy => {
+            if (!this.strategies.find(s => s.name === strategy.name)) {
+                this.strategies.push(strategy);
+                console.log(`✅ Registered strategy: ${strategy.name}`);
+            }
+        });
+    }
+    setRules(rules) {
+        this.rules = rules;
+        console.log(`📋 MessageDisplayRouterService: Rules updated (${rules.length} rules)`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageDisplayRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageDisplayRouterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageDisplayRouterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 let ClientInfo$2 = class ClientInfo {
     constructor(domain = '', service = '', id = 0, name = '') {
         this.domain = domain;
@@ -6566,7 +6991,7 @@ class RequestManagerBasicDemoComponent {
         this.streamType = 'Auto';
         this.downloadRequest = ApiRequest.adapt({
             server: 'assets/images',
-            path: ['me.jpg'],
+            path: ['lego.png'],
             saveAs: 'john.jpg', // Optional
             headers: { 'Authorization': 'Bearer Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6InJ0c0ZULWItN0x1WTdEVlllU05LY0lKN1ZuYyJ9.eyJhdWQiOiI4ODhhMzFjZS01OWQzLTRhMTItYTU5Ni04ZDYyZjY0MWI1MDUiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vNmY0MTE5ODItY2YyMy00ZTQ1LTk0NDktNGI2MDdiN2E4OGVjL3YyLjAiLCJpYXQiOjE3NjU4MzQxNDksIm5iZiI6MTc2NTgzNDE0OSwiZXhwIjoxNzY1ODM5NzQ2LCJhY2N0IjowLCJhaW8iOiJBV1FBbS84YUFBQUFVUEZOYUhSZkZ4ZVkwRWthcFBzdWZaNG1QYXV6YVRoODRRZUtQRzkrbEFIVE5XanVwQy9ZSjEwK2IrMktWVlJSSXZRNFpwS2xyWTFGd0xRZmtXOTNLbkRNckxSeEMzWTVOOGlQREZ4b1liZExucW1QL1N1ZE1pRW1Va05tTklSWSIsImF6cCI6Ijg4OGEzMWNlLTU5ZDMtNGExMi1hNTk2LThkNjJmNjQxYjUwNSIsImF6cGFjciI6IjAiLCJncm91cHMiOlsiZWE2ZDk5YjAtNDgyNC00MDU0LTk0MTQtZDNhOTZkZDA3MjRiIl0sIm5hbWUiOiJHVExDIEFwcCBTdXBlciBBZG1pbiIsIm9pZCI6IjI2NzUxY2I2LWNlMDEtNDMzMC05OTc0LWZjMzgxMjQ3YTEzYyIsInByZWZlcnJlZF91c2VybmFtZSI6Imd0bGMwMDNAZ3RsYy5jYSIsInJoIjoiMS5BUzRBZ2hsQmJ5UFBSVTZVU1V0Z2UzcUk3TTR4aW9qVFdSSktwWmFOWXZaQnRRVm1BYTR1QUEuIiwicm9sZXMiOlsiZ3RsYy5hY2wuc3VwZXJhZG1pbiJdLCJzY3AiOiJHVExDX0FwcGxpY2F0aW9uIiwic2lkIjoiMDAzZjVhZDktZmJmNi1jZTkyLTg3MjItMWEzNDExYjMzMDJiIiwic3ViIjoiS0RYQ3drVlhUbTRUUmcwaTkxbXZDZzgtQ29uLXpWbk5FQ2Y5LVg0dkpzUSIsInRpZCI6IjZmNDExOTgyLWNmMjMtNGU0NS05NDQ5LTRiNjA3YjdhODhlYyIsInVwbiI6Imd0bGMwMDNAZ3RsYy5jYSIsInV0aSI6InpBaTJoMmpVUUVHbVY0RTJXMWxqQUEiLCJ2ZXIiOiIyLjAiLCJ3aWRzIjpbImI3OWZiZjRkLTNlZjktNDY4OS04MTQzLTc2YjE5NGU4NTUwOSJdLCJ4bXNfZnRkIjoiUDJraW1ZM0tqc1BTRndxNHlZdmJ0bGhrSUk3d2tXNmFpcW1FQ1BaNEdja0JkWE5sWVhOMExXUnpiWE0ifQ.LzppoggMm27smSAy9SamtPN95vCzdELCAfhtOj5n_T_H6g9xCmNRLS9FaUFQMau6Qvl0lROKl7WDklTswLFkfxbIxCBWtXdL-LTqT5cDURSJAll8vC3zlN3Hg9pAFBUVZFRolt6Z7LvPdI3pvUOQs0yFwVzp9k6cLF8aemKdwKQrMX3XXua1MfBWZcqQ4WiBVNmKh8w6yQB35I4u5WqdFnu33nUGb-kvc18SOpoUfiJnlV-PudaEzFXdU3CjAaMEcuPFv5xLwWJKuhU73dNH4EyQDFMVGtcIHNnieOfiY_nK2_0-5DM6aI40UIRK6Bt-HmMQpnbhLps5y3ep6Z7RNw' } // Optional
         });
@@ -7305,7 +7730,7 @@ class RequestManagerDemoComponent {
         this.streamType = 'Auto';
         this.downloadRequest = ApiRequest.adapt({
             server: 'assets/images',
-            path: ['me.jpg'],
+            path: ['lego.png'],
             saveAs: 'john.jpg', // Optional
             headers: { 'Authorization': 'Bearer Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6InJ0c0ZULWItN0x1WTdEVlllU05LY0lKN1ZuYyJ9.eyJhdWQiOiI4ODhhMzFjZS01OWQzLTRhMTItYTU5Ni04ZDYyZjY0MWI1MDUiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vNmY0MTE5ODItY2YyMy00ZTQ1LTk0NDktNGI2MDdiN2E4OGVjL3YyLjAiLCJpYXQiOjE3NjU4MzQxNDksIm5iZiI6MTc2NTgzNDE0OSwiZXhwIjoxNzY1ODM5NzQ2LCJhY2N0IjowLCJhaW8iOiJBV1FBbS84YUFBQUFVUEZOYUhSZkZ4ZVkwRWthcFBzdWZaNG1QYXV6YVRoODRRZUtQRzkrbEFIVE5XanVwQy9ZSjEwK2IrMktWVlJSSXZRNFpwS2xyWTFGd0xRZmtXOTNLbkRNckxSeEMzWTVOOGlQREZ4b1liZExucW1QL1N1ZE1pRW1Va05tTklSWSIsImF6cCI6Ijg4OGEzMWNlLTU5ZDMtNGExMi1hNTk2LThkNjJmNjQxYjUwNSIsImF6cGFjciI6IjAiLCJncm91cHMiOlsiZWE2ZDk5YjAtNDgyNC00MDU0LTk0MTQtZDNhOTZkZDA3MjRiIl0sIm5hbWUiOiJHVExDIEFwcCBTdXBlciBBZG1pbiIsIm9pZCI6IjI2NzUxY2I2LWNlMDEtNDMzMC05OTc0LWZjMzgxMjQ3YTEzYyIsInByZWZlcnJlZF91c2VybmFtZSI6Imd0bGMwMDNAZ3RsYy5jYSIsInJoIjoiMS5BUzRBZ2hsQmJ5UFBSVTZVU1V0Z2UzcUk3TTR4aW9qVFdSSktwWmFOWXZaQnRRVm1BYTR1QUEuIiwicm9sZXMiOlsiZ3RsYy5hY2wuc3VwZXJhZG1pbiJdLCJzY3AiOiJHVExDX0FwcGxpY2F0aW9uIiwic2lkIjoiMDAzZjVhZDktZmJmNi1jZTkyLTg3MjItMWEzNDExYjMzMDJiIiwic3ViIjoiS0RYQ3drVlhUbTRUUmcwaTkxbXZDZzgtQ29uLXpWbk5FQ2Y5LVg0dkpzUSIsInRpZCI6IjZmNDExOTgyLWNmMjMtNGU0NS05NDQ5LTRiNjA3YjdhODhlYyIsInVwbiI6Imd0bGMwMDNAZ3RsYy5jYSIsInV0aSI6InpBaTJoMmpVUUVHbVY0RTJXMWxqQUEiLCJ2ZXIiOiIyLjAiLCJ3aWRzIjpbImI3OWZiZjRkLTNlZjktNDY4OS04MTQzLTc2YjE5NGU4NTUwOSJdLCJ4bXNfZnRkIjoiUDJraW1ZM0tqc1BTRndxNHlZdmJ0bGhrSUk3d2tXNmFpcW1FQ1BaNEdja0JkWE5sWVhOMExXUnpiWE0ifQ.LzppoggMm27smSAy9SamtPN95vCzdELCAfhtOj5n_T_H6g9xCmNRLS9FaUFQMau6Qvl0lROKl7WDklTswLFkfxbIxCBWtXdL-LTqT5cDURSJAll8vC3zlN3Hg9pAFBUVZFRolt6Z7LvPdI3pvUOQs0yFwVzp9k6cLF8aemKdwKQrMX3XXua1MfBWZcqQ4WiBVNmKh8w6yQB35I4u5WqdFnu33nUGb-kvc18SOpoUfiJnlV-PudaEzFXdU3CjAaMEcuPFv5xLwWJKuhU73dNH4EyQDFMVGtcIHNnieOfiY_nK2_0-5DM6aI40UIRK6Bt-HmMQpnbhLps5y3ep6Z7RNw' } // Optional
         });
@@ -8175,6 +8600,7 @@ class WsDataControlComponent {
     constructor() {
         this.path = ['ai', 'tests'];
         this.stateDataRequestService = inject(StateDataRequestService);
+        this.webSocketMessageService = inject(WebSocketMessageService);
         this.user$ = this.stateDataRequestService.user$;
         this.users$ = this.stateDataRequestService.userList$;
         this.userAction$ = this.stateDataRequestService.userAction$
@@ -8209,12 +8635,70 @@ class WsDataControlComponent {
         const lastRec = data[data.length - 1];
         this.stateDataRequestService.deleteData(lastRec);
     }
+    /**
+     * Test direct state message via WebSocketMessageService
+     * Sends an UPDATE message that should trigger fetchRecord() in the state manager
+     *
+     * @param recordId - The record ID to update (default: 63)
+     * @param useFakeSessionId - If true, uses a fake sessionId to avoid filtering (default: true)
+     * @param customSessionId - Optional custom sessionId (overrides useFakeSessionId if provided)
+     */
+    onTestDirectStateMessage(recordId = 63, useFakeSessionId = true, customSessionId) {
+        // Get actual sessionId from sessionStorage (stored by HTTPManagerStateService)
+        const actualSessionId = sessionStorage.getItem('WSID') || 'unknown';
+        // Determine sessionId to use
+        let sessionId;
+        if (customSessionId) {
+            sessionId = customSessionId;
+        }
+        else if (useFakeSessionId) {
+            sessionId = `test-${Date.now()}`;
+        }
+        else {
+            // Use actual sessionId (will be filtered out by receiver)
+            sessionId = actualSessionId;
+        }
+        // Build StateMessage with same structure as CRUD operations
+        const stateMessage = {
+            sessionId: {
+                id: sessionId,
+                name: useFakeSessionId ? 'Test Sender' : (this.user?.name || 'Current User')
+            },
+            content: {
+                method: 'UPDATE',
+                path: ['ai', 'tests', recordId],
+                user: {
+                    id: sessionId,
+                    name: useFakeSessionId ? 'Test Sender' : (this.user?.name || 'Current User')
+                }
+            }
+        };
+        console.log('🧪 [TEST] Sending direct state message:', {
+            recordId,
+            sessionId,
+            actualSessionId,
+            useFakeSessionId,
+            stateMessage
+        });
+        const success = this.webSocketMessageService.sendStateMessage(['ai', 'tests'], stateMessage);
+        console.log('🧪 [TEST] Message sent:', {
+            success,
+            actualSessionId,
+            sentSessionId: sessionId,
+            expectedBehavior: success
+                ? 'Server will broadcast to SYS-ai/tests subscribers'
+                : 'Failed to send (check connection)',
+            receiverBehavior: sessionId !== actualSessionId
+                ? 'Receiver will process message and call fetchRecord()'
+                : 'Receiver will filter out (sessionId match)'
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track $index) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name || user.ldap || user.id || 'Anonymous' }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i3$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track $index) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name || user.ldap || user.id || 'Anonymous' }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n\n    <h3 style=\"margin: 0; margin-top: 1rem;\">WebSocketMessageService Test</h3>\n\n    <p style=\"font-size: 0.875rem; color: #666; margin: 0;\">\n      <strong>Note:</strong> \"Fake SessionId\" will be received and processed. \"Current SessionId\" will be filtered out (self-message).\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n\n    <div style=\"margin-bottom: 1rem; margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div style=\"display: flex; gap: 0.5rem; margin-bottom: 1rem;\">\n      <button mat-flat-button color=\"primary\" (click)=\"onTestDirectStateMessage(63, true)\">\n        Test UPDATE (Fake Id)\n      </button>\n      <button mat-stroked-button (click)=\"onTestDirectStateMessage(63, false)\">\n        Test UPDATE (Current Id)\n      </button>\n      <button mat-stroked-button (click)=\"onTestDirectStateMessage(63, false, 'custom-session-123')\">\n        Test UPDATE (Custom Id)\n      </button>\n    </div>\n\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i3$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ws-data-control', standalone: false, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track $index) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name || user.ldap || user.id || 'Anonymous' }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"] }]
+            args: [{ selector: 'app-ws-data-control', standalone: false, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track $index) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name || user.ldap || user.id || 'Anonymous' }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n\n    <h3 style=\"margin: 0; margin-top: 1rem;\">WebSocketMessageService Test</h3>\n\n    <p style=\"font-size: 0.875rem; color: #666; margin: 0;\">\n      <strong>Note:</strong> \"Fake SessionId\" will be received and processed. \"Current SessionId\" will be filtered out (self-message).\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n\n    <div style=\"margin-bottom: 1rem; margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div style=\"display: flex; gap: 0.5rem; margin-bottom: 1rem;\">\n      <button mat-flat-button color=\"primary\" (click)=\"onTestDirectStateMessage(63, true)\">\n        Test UPDATE (Fake Id)\n      </button>\n      <button mat-stroked-button (click)=\"onTestDirectStateMessage(63, false)\">\n        Test UPDATE (Current Id)\n      </button>\n      <button mat-stroked-button (click)=\"onTestDirectStateMessage(63, false, 'custom-session-123')\">\n        Test UPDATE (Custom Id)\n      </button>\n    </div>\n\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"] }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -8234,7 +8718,7 @@ class WsMessagingComponent {
         this.fb = inject(FormBuilder);
         this.messageService = inject(MessageServiceDemo);
         this.stateService = inject(StateServiceDemo);
-        this.toastService = inject(ToastMessageDisplayService);
+        this.messageDisplayService = inject(MessageDisplayRouterService);
         // Only show public channels (starting with "PUB-"), strip prefix for display
         // SYS- channels are private/internal and hidden from users
         this.channels$ = this.messageService.channels$.pipe(map$1(channels => channels
@@ -8283,20 +8767,15 @@ class WsMessagingComponent {
                 this.messageService.getAllChannels();
             }, 500); // 500ms delay to ensure subscription is processed
         });
-        // Subscribe to latest messages and show toast notification
+        // Subscribe to latest messages and display using rule-based routing
         this.latestCommunicationMessages$.pipe(filter$1(message => !!message), takeUntil$1(this.destroy$)).subscribe((message) => {
-            console.log('🔔 Toast notification triggered:', message);
-            console.log('  message.content:', message.content);
-            // Message structure has nested content: message.content.content.message
-            const messageContent = message.content?.content?.message || message.content?.message || '';
-            console.log('  Extracted messageContent:', messageContent);
-            this.toastService.toastMessage(ToastDisplay.adapt({
-                message: messageContent,
-                color: ToastColors.INFO,
-                icon: 'chat',
-                action: 'DONE'
-            }), -1 // Stay until dismissed
-            );
+            console.log('🔔 Message received, routing to display:', message);
+            // NEW: Delegate to MessageDisplayRouterService
+            // The message payload determines the display type via rules
+            this.messageDisplayService.display(message);
+            // OLD: Hardcoded snackbar (removed)
+            // const messageContent = message.content?.content?.message || message.content?.message || '';
+            // this.toastService.toastMessage(...);
         });
     }
     ngOnDestroy() {
@@ -9163,7 +9642,7 @@ class RequestSignalsManagerDemoComponent {
         this.questionControl = this.fb.control("", [Validators.required]);
         this.downloadRequest = ApiRequest.adapt({
             server: 'assets/images',
-            path: ['me.jpg'],
+            path: ['lego.png'],
             // saveAs: 'john.jpg' // Optional
         });
         // downloadRequest = ApiRequest.adapt({
@@ -9491,7 +9970,9 @@ class HttpRequestManagerModule {
             { provide: HTTP_INTERCEPTORS, useClass: ProxyDebuggerInterceptor, multi: true },
             { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
             HTTPManagerService, LocalStorageManagerService,
-            ToastMessageDisplayService
+            ToastMessageDisplayService,
+            MessageDisplayRouterService,
+            SnackbarStrategy
         ], imports: [CommonModule,
             ToastMessageDisplayModule,
             FormsModule,
@@ -9576,7 +10057,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         { provide: HTTP_INTERCEPTORS, useClass: ProxyDebuggerInterceptor, multi: true },
                         { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
                         HTTPManagerService, LocalStorageManagerService,
-                        ToastMessageDisplayService
+                        ToastMessageDisplayService,
+                        MessageDisplayRouterService,
+                        SnackbarStrategy
                     ],
                 }]
         }] });
@@ -9589,5 +10072,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiRequest, AppService, AsymmetricalEncryptionService, CONFIG_SETTINGS_TOKEN, ChannelInfo, ChannelType, CommunicationType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, PathQueryService, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StreamType, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UserData, UtilsService, WSOptions, WSUser, WebSocketManagerService, WebsocketService, WithCredentialsInterceptor, countdown, createChannelName, delayedRetry, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
+export { ApiRequest, AppService, AsymmetricalEncryptionService, CONFIG_SETTINGS_TOKEN, ChannelType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, LoggerService, NotificationMessage, PathQueryService, PublicMessage, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateMessage, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StreamType, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UserData, UtilsService, WSOptions, WebSocketMessageService, WithCredentialsInterceptor, countdown, createChannelName, delayedRetry, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
 //# sourceMappingURL=http-request-manager.mjs.map